У нас в «Инфографике» есть этап пресейла: клиент приходит с задачей, а мы подбираем несколько референсов и через них показываем, что тут можно сделать. Задачи повторяются, поэтому мы решили делиться своими референсами — думаем, многим они помогут нащупать идею и понять, в какую сторону двигаться. Дальше — три референса для реальной HR-задачи.
Задача: рассказать кандидатам и сотрудникам об офисе компании
Начнем с HR-задачи одного из наших клиентов, дословно она звучала так:
Рассказать внешней и внутренней аудитории, в каком классном офисе располагается компания.
У задачи две аудитории, поэтому цели у проекта тоже две:
- сформировать образ работодателя, который заботится об условиях для продуктивной и комфортной работы, — цель для внешней аудитории, потенциальных сотрудников;
- напомнить сотрудникам, в каком крутом офисе они работают. За ежедневными задачами и рутиной люди нередко об этом забывают — цель для внутренней аудитории, действующих сотрудников.
Под эту задачу мы подобрали три референса с разной логикой повествования, механикой, стилем и бюджетом. У каждого референса — свои преимущества, но проект на основе любого из них отлично решит задачу клиента.
Важно понимать, что референсы используются не для того, чтобы скопировать проект точь-в-точь: с тем же углом проекции, уровнем детализации и интерактивными элементами. Они нужны, чтобы определиться с подходом.
Реф 1. Высотка из «Нью-Йорк Таймс»
Первый референс — рассказ «Нью-Йорк Таймс» об Empire State Building:
Логика: в центре повествования — здание, устройство которого постепенно раскрывается для читателя. Читатель скроллит и движется по зданию сверху вниз, получая кусочки информации.
Этот референс нам понравился простым взаимодействием с информацией: пользователь сначала видит здание в городе, потом по скроллу, шаг за шагом изучает его устройство, например отдельные этажи. А в тексте слева читает истории и факты.
Устройство этажа в разрезе: пользователь видит, что есть на этаже, — так же можно показать этаж офиса с переговорками, кухней и комнатой отдыха:
Текст слева разбавляется фотографиями — они привносят ощущение реальности: пользователь видит не только нарисованное здание, но и настоящие снимки. В проекте с офисом можно так же добавить фотографии или видео с сотрудниками и их истории:
Здесь показано устройство подвала, а в проекте об офисе так можно показать отдельную комнату, например корпоративный фитнес-клуб, столовую или конференц-зал:
Этот референс подходит под нашу задачу по трем причинам:
- позволяет показать расположение офиса в городе среди других зданий;
- можно показать как здание целиком, так и отдельные элементы с разным уровнем детализации, например устройство этажей, кабинетов, переговорок;
- есть возможность добавить истории сотрудников в фото- или видеоформате, чтобы они в роли персонажей рассказывали о своей работе в офисе.
Офис здесь — главный действующий герой, и мы шаг за шагом рассказываем, как он устроен и что в нем классного.
Реф 2. Один день из жизни Лейлы после локдауна, проект BBC
Второй референс — рассказ BBC об одном дне из жизни Лейлы после локдауна. Часть дня Лейла проводит в офисе, поэтому нам интересна эта история.
Логика: повествование ведется от лица персонажа — Лейлы. Она взаимодействует с офисом: приходит на работу, пользуется лифтом, рабочим местом, переговоркой — и именно через это взаимодействие мы и показываем устройство офиса.
Этот референс хорош тем, что повествование строится от лица «реального» человека — Лейлы. Благодаря ей проект воспринимается читателями с большей эмпатией. Но можно улучшить идею под нашу задачу — добавить в начале истории выбор персонажа по полу или профессии, чтобы пользователь мог создать своего героя-аватара.
Герой-аватар позволит усилить сценарий. Например, показывать в проекте те преимущества, что важны именно для выбранной профессии: комфортные рабочие места для программистов или удобные переговорки для менеджеров.
Мозг лучше запоминает информацию, если пользователь идентифицирует себя с персонажем, а не смотрит на повествование со стороны.
В этом референсе повествование строится уже по другому принципу: слева находится изометрическая модель офиса, а справа — увеличенная картинка, на которой видно, как Лейла взаимодействует с отдельными элементами:
При этом повествование складывается в историю. Например, вот Лейла зашла в офис и измерила температуру:
Вот она заходит в лифт и поднимается на свой этаж:
И так далее. История начинается с подъема Лейлы и заканчивается отправкой ко сну.
Еще в этом рефе используется микроанимация для визуализации некоторых элементов, например работы системы вентиляции:
Этот референс мы выбрали, потому что здесь:
- есть персонаж, с которым пользователь мог бы себя идентифицировать;
- показано устройство конкретного офиса со всеми его нюансами;
- передается атмосфера — можно повторить интерьер реального офиса с фирменными цветами, декором и даже тем денежным деревом на подоконнике в бухгалтерии;
- сложные вещи показываются через микроанимацию, например система вентиляции;
- есть место для текстовых блоков, которые помогают пояснять, что происходит.
История Лейлы живее и увлекательнее первого референса, потому что главный герой здесь не офис, а человек. И повествование строится тоже от лица человека: как он приходит в офис, что там делает, как проводит рабочий день.
Реф 3. «Дом, в котором я живу» — проект РИА «Новости»
Третий референс — проект «Дом, в котором я живу» — рассказывает об устройстве двора, дома и подъезда. Для решения нашей HR-задачи дом меняем на офис.
Логика: пошаговая блочная структура повествования. С визуальной точки зрения — микс двух первых референсов: есть изображение дома в левой части экрана и поясняющий текст в правой. Текст рассказывает факты и истории, а изображения слева показывают, как это выглядит.
Легко представить, что вместо подъезда у нас будет устройство офиса с пояснениями, почему компания организовала всё именно так и как это влияет на рабочие процессы:
А вместо рассказа о лифте и тарифах ЖКУ здесь могут быть преимущества одного из этажей офиса, например переговорок, копировальных центров, кухни или комнаты отдыха:
В конце есть карта — так можно показать, где именно находится офис, чтобы кандидат мог понять, удобно ли ему будет добираться:
Этот референс решает нашу задачу, потому что:
- можно показать офис в целом и отдельные элементы, например этаж, переговорку, мини-кухню, копировальный центр;
- в левой части есть изображение, которое показывает, о чем мы говорим в тексте;
- в правой части есть текст, через который можно объяснить, как та или иная деталь офиса помогает продуктивной и комфортной работе;
- пользователь шаг за шагом «прогуливается» по офису и так узнаёт обо всех его фишках.
По логике «Дом, в котором я живу» похож на первый референс, но в реализации он обходится дешевле, потому что здесь используется не 3D-анимация, а быстрая смена статичных картинок:
Бонус: простые механики для вовлечения
Если в проекте только скролл, в какой-то момент читателю неизбежно станет скучно. И важно подкинуть ему новую механику: не скролл, а анимацию, интерактив, появляющийся по клику текст.
Например, здесь используется микроанимация на карточках, а еще их нужно переворачивать вручную. Для офиса же можно придумать мини-игру, которая поможет обратить внимание пользователя на важные мелочи. Например, на внешней стороне карточки показывать фикус, а на оборотной рассказывать об озеленении офиса и объяснять, почему это важно.
А в этом примере пользователь может сам выбирать планировку квартиры. Такую механику можно использовать в нашем проекте, чтобы читатель выбирал свой этаж или конкретный кабинет:
А здесь, чтобы получить кусочек дополнительной информации, пользователю нужно навести мышку на объект:
Такие простые дополнительные механики не дают пользователю заскучать и отвлечься, поэтому их стоит включать в проект. К примеру, в проекте по третьему референсу можно не выносить информацию об элементах вправо, а добавить точки с подсказками прямо на объекты или дать пользователю возможность включить кофеварку или полить цветок:
Итак, чтобы рассказать кандидатам и сотрудникам, какой у компании клёвый офис, подойдет любой из трех референсов, но у каждого немного различаются акценты:
- первый показывает технологичность офиса;
- второй — как сотрудники проводят день в офисе, выстраивают рабочий процесс и с чем взаимодействуют;
- третий подробнее раскрывает нюансы внутреннего устройства офиса.
Но какой бы референс вы ни взяли за основу, стоит продумать две вещи:
- Контент — проекты из референсов смотрятся круто, потому что факты в них выстраиваются в последовательную историю. Без мясистого контента, на одном дизайне и интерактиве, увлекательного рассказа не получится.
- Дополнительные механики для большей вовлеченности пользователя.
Читайте другие наши статьи