От автора: наше зрение это самый сильный орган ощущения. Неважно кто вы, веб или UX дизайнер, для достижения эмоциональной связи со своими читателями вам необходимо освоить метод визуального повествования.
Необходимо исследовать другие сайты вашей и сторонней тематики на предмет того, как они ведут свое повествование. В то же время свою историю вам придется сотворить самостоятельно.
Когда дело касается визуального повествования, сопровождения статьи, естественно, ваш выбор падает на фотографии, но не стоит забывать и об иллюстрациях, если они больше подходят вашему бренду и всей истории. Талисманы, различные иконки амулетов придадут еще большую персонализацию и дружелюбие вашему сайту. Передний план очень важен, но не стоит забывать и про хорошо продуманное фоновое изображение заднего плана.
Основная задача в том, чтобы визуальные эффекты работали, дополняя друг друга, и четко передавали основную мысль сайта, доставляя пользователям удовольствие.
Иллюстрации как альтернатива фотографиям
Для создания эмоциональной привязки вы не обязаны делать свои собственные снимки.
Естественно, фотографии, сделанные специально для вашего сайта и отредактированные именно под вашу историю, всегда оказывают большее влияние на пользователей, но в таком случае бюджет может перейти все рамки приличия (подумайте о месте, которое необходимо сфотографировать, оплате фотографа, расходы на дорогу).
Даже если вам понадобятся уникальные иллюстрации, нарисованные именно под ваш проект, это в любом случае будет дешевле, чем фотосессия. Стоковые иллюстрации вообще бесплатные, хотя они слишком распространены, и с их помощью не получится эффективно передать историю.
Иллюстрации хорошо подходят в тех случаях, когда реализм стоит далеко не на первом месте, когда для эффективной передачи истории необходимы диаграммы, блок-схемы и другая похожая графика. Довольно сложно представить данные или абстрактные концепции фотографией.
В любой проблеме в веб-дизайне, сперва, убедитесь в том, что вы понимаете ваших пользователей. Иллюстрации применимы к большинству сайтов, но необходимо адаптировать их визуальный стиль и вписать в общую картину сайта.
К примеру, рассмотрим изображения на Le Printemps du Polar website – это довольно взрослые и соблазнительные изображения, отлично подходящие под основную аудиторию сайта – творческих людей. Сайт посвящен архетипу роковой женщины в кино, т.е. можно предположить, что люди, заходящие на этот сайт, имеют довольно искушенные взгляды на кино.
Веб-сайт Dangers of Fracking сочетает крайне простую анимацию с иллюстрациями для передачи очень серьезной истории о слишком высокой цене за добычу природных ресурсов с помощью фрекинга. Можно было бы подумать, что сайт и так хорошо передает чувство опасности, но нельзя забывать о том, что пользователи хотят участвовать в процессе, быть частью дизайна.
Если общее впечатление от сайта слишком тяжелое и депрессивное, то пользователи могут оттолкнуть ваш сайт, уйти с него (что контрпродуктивно). В таком случае сайты с parallax эффектом будут слишком мрачными, а опыт от их использования будет не самым приятным.
Не бойтесь эмблем
Эмблема сайта – простой, но действенный способ передать вашу историю. Эмблемы могут многое сказать о вашем бренде, так как это живое проявление личности вашего дизайна. Однако не стоит создавать просто статическую версию, лучше создайте динамическую, которая вдохнет жизнь в ваш интерфейс (и обеспечит увлекательную обратную связь).
Взгляните на эмблему сайта MailChimp Freddie, к примеру. Фредди это говорящий логотип, в нем заложены различные движения, амбиции и цели. Эта очень гибкая, изменяемая эмблема, которая может сама рассказывать историю. Хотя эмблема не может полноценно передать все визуальное повествование, она может усилить некоторые визуальные эффекты на вашем сайте.
Фредди – неотъемлемый компонент непередаваемого опыта на сайте MailChimp: четкость картинки, простая обратная связь и плавность переходов. Он рассказывает анекдоты, шутливо нервничает перед отправкой (вспотевшая ладонь, нависшая над красной кнопкой), и даже дает вам пять.
В статье Лучшие практики интерактивного дизайна на сайте UXPin эмблемы описываются следующим образом — эмблемы придают индивидуальность взаимодействиям между сайтом и пользователем. Данный подход не всегда можно использовать, особенно на технических сайтах с автоматической маркетинговой email рассылкой. Большая часть успеха Mailchimp приходится на веселый опыт взаимодействия с Фредди. Эмблемы это больше чем просто игривые мысли вслух: они создают эмоциональную связь и повышают конверсию сайта.
Не забывайте про фоновые изображения
До сих пор мы обсуждали только изображения, являющиеся частью основного контента, но не стоит забывать и про фоновые изображения. Вам может показаться, что фоновые изображения это всего-лишь деталь в общей картине, но на самом деле они могут, как усиливать повествование, так и рассказывать отдельную историю.
Использование вращающихся или изменяющихся изображений в зависимости от целей страницы добавляет дополнительное измерение реальности вашему сайту. Чем более «живой» ваш сайт, тем более сильное впечатление он оставляет – а значит, пользователи запомнят вашу историю.
Видео или анимационная графика, как правило, намного дороже, чем неподвижные изображения, про которые иногда вообще забывают. Но с точки зрения стоковых видео и дешевого видеооборудования движущийся фон стал намного доступнее, чем раньше.
Если у вас достаточно сложная история, то видео или анимационная графика могут быть более эффективным решением, нежели обычные изображения. Главное не забывать, что с видео есть такой тип людей, которые хотят побыстрее пропустить его или получить текстовую версию. Кроме того, вы можете столкнуться с такой проблемой, что у пользователей нет времени на просмотр видео.
Также не стоит забывать, что с ростом доступности Retina дисплеев высокого разрешения ощущения от посещения сайта становятся сравнимы с просмотром кино. HD фоновое видео с наложением информации создает богатый мультимедиа опыт.
В последние годы фоновое HD видео стало одним из самых популярных способов визуального повествования. От гигантов как AirBnB и до более маленьких сайтов почти всех категорий стриминг видео стал неотъемлемой частью дизайна. К примеру, даже гольф компания Ashworth использует фоновое видео с определенной целью.
Обратите внимание на то, как они подобрали спокойное зацикленное видео, как черно-белый фильтр подчеркивает элегантность. Таким образом, создается ощущение, что гольф это атмосферная игра – а значит, основная задача сайта это передать этуатмосферу. Ниже я привел 5 способов, как хорошо вписать фоновое HD видео в дизайн сайта:
Обратите внимание на вес и продолжительность видео – фоновые видеоролики должны передавать визуальную историю пользователям всего за несколько секунд. В идеале видео необходимо зациклить; видео должно быть четким, ясным и понятным. Для зацикливания подходит продолжительность от 10 до 30 секунд.
Отключите звук – автоматическое проигрывание звука смущает большинство пользователей. Если вам необходимо включить звук, позвольте пользователю самому решить, нужен он ему или нет (проверьте звук, чтобы он был не слишком громким).
Уделите основное внимание времени загрузки – Хотя HD видео и смотрится отлично, оно не должно тормозить ваш сайт. Если пользователь ушел с вашего сайта из-за медленной загрузки, он никогда не увидит ваше замечательное фоновое видео. Помните, что основное внимание вы должны уделять юзабилити сайта.
Продумайте альтернативы для устройств или интернет соединений, которые не могут проигрывать HD видео – Откройте в Google Analytics список популярных устройств и проектируйте под них свой дизайн. Вы сразу же поймете, что в качестве запасного варианта лучше всего использовать статическое изображение.
Используйте только качественное видео – Снимаете ли вы видео сами, нанимаете человека для этого или используете стоковое видео, с точки зрения визуального качества видео должно быть превосходным. Оно не только должно работать в HD фреймворках, но и само должно быть HD качества. Как и с фотографиями, видео плохо смотрится на разрешениях больше оригинального.
Изображения должны подходить пользователям
Мы уже затрагивали немного эту тему выше, крайне важно, чтобы изображения, используемые в повествовании, были осмысленны внутри контекста истории и основной цели сайта, которые вы хотите передать пользователю.
Ниже я составил несколько подсказок, которые помогут определить, подходят ли ваши изображения по контексту:
Подходит ли изображение вам? – Если ваш сайт посвящен 20-ти летним молодым людям, которые тяжело работают и также «тяжело» отдыхают, то не надо вставлять на сайт изображения людей среднего возраста, ведущих повседневные образ жизни.
Используются ли в изображении цвета вашего бренда? – Если дизайн вашего сайта имеет в основном приглушенные нейтральные цвета, а вы захотели вставить изображения с резкими неоновыми цветами, то для пользователей такой переход может быть слишком резким. Подробнее изучить данный вопрос можно в книге Веб-дизайн для человеческого глаза.
Утверждение выше касается и стилей – Сложному сайту – сложные изображение, забавному сайту – забавные и т.д.
Составьте список (даже мысленный) с описанием вашего сайта – убедитесь, что выбранные изображения попадают под описание.
Рассмотрим сайт House of Borel, роскошный бутик модных аксессуаров – отличный пример подачи истории публике.
Дефицита в брендах роскошной одежды на этом сайте не наблюдается. Так как же выделиться из толпы? House of Borel создает визуальную картину того, как молодая девушка исследует причудливые комнаты во французском замке.
Каждая секция подписана как «secret», что добавляет загадок, которые наша главная героиня должна раскрыть. Если открыть все секреты, то можно заметить, как персонаж находит остатки ручного роскошного клатча. На каждом этапе сайт подпитывает ваше желание пройти немного дальше – как киноперсонаж.
Бренд общается через главного героя с такими же сложными девушками, которые находят свое отражение в главной героине. Большие пробелы, описанные в статье Тренды веб-дизайна 2015 и 2016 также повышают изощренность сайта. Фоновая музыка с хорошим вокалом, хотя и включается автоматически, создает правильную атмосферу, не раздражающую пользователей.
Как результат – рассказана оригинальная история: наш бренд создан для высшего класса, мы не такие, как другие роскошные бренды, мы – та жемчужина, которую вы искали.
Персонализируйте повествование
При выборе изображений для повествования необходимо выбрать такие изображения, которые окупятся и выделят ваш бренд среди других. Такой подход сделает вашу историю более личной и поможет вашим пользователям найти ваш сайт среди других.
Как уже говорилось выше, первым делом необходимо определить, подходят ли изображения по контексту. Но можно пойти еще дальше и при помощи нескольких шагов сделать изображения еще более личными:
Если бюджет позволяет, сделайте уникальные изображения – Кастомные иллюстрации дешевле своих фотографий, но фотосессия, проведенная специально под вашу историю, автоматически переводит ваш сайт в ранг более личных в отличие от стоковых фото.
Составьте список описания свойств вашего сайта, которые не подходят конкурентам – Следуйте советам из статьи competitive heuristic reviews, поиграйтесь с вашими преимуществами перед конкурентами, сделайте на них основное ударение.
Показывайте людей – Люди автоматически сравнивают себя с другими людьми. Подумайте о том, как много интернет-магазинов показывают фото с людьми, носящими их одежду или использующими их товары. Jakob Nielsen в своем исследовании выяснил, что социальное одобрение мотивирует людей к покупке товаров. Для заманивания пользователей техника крайне эффективна, даже если вы ничего не продаете.
Применяйте цвета и шаблоны в изображениях сочетающиеся с основным дизайном – Даже добавление цветного фильтра в тон основной цветовой палитры может значительно повлиять на визуальную составляющую сайта.
Основная задача – убедиться, что ваш сайт отвечает критериям визуальной последовательности: отвечайте ожиданиям пользователей на основе их предыдущего опыта, обеспечьте последовательность дизайна на всех страницах и добавьте что-нибудь от себя, что бы пребывание на вашем сайта запомнилось.
Заключение
Нельзя полностью спроектировать UX сайта, но можно создать все элементы, которые внесут вклад в общее ощущение. Работайте для пользователей, ограничьте количество вариантов на самых привлекательных. Так как вы работаете над общим видом и ощущением от вашего сайта, не забывайте отходить подальше и смотреть со стороны, соблюдена ли общая картина. Очень легко потеряться в деталях, но не забывайте брать перерыв и оценивать дизайн с точки зрения пользователя.
Автор: Jerry Cao
Источник: www.thenextweb.com
Редакция: Команда webformyself.
