От автора: прошедший год принес целую волну новых техник, стилей и трендов, большинство из которых возникли для удовлетворения потребностей растущего рынка мобильных устройств. Технический прогресс изменил ожидания пользователей по поводу эстетики и функциональности сайтов и приложений. В данной статье мы обсудим интерактивный дизайн сайта, а именно 5 лучших трендов 2015 года.
Love Holiday. Из всех работ по интерактивному дизайну за прошедший год больше всего выделились пять, которые в будущем, скорее всего, получат еще большее признание.
Побуждающий дизайн
Сердцем интерактивного дизайна всегда был обмен информацией между компьютером и человеком, диалог между пользователем и сайтом. Но так как почти у каждого сайта есть свои бизнес-цели, то половина диалога между пользователем и сайтом, пользовательский интерфейс часто работает по классическим методам продаж.
В этом году наблюдался рост более побуждающих тактик, которые уже очень тонко укоренились в конструкции дизайна. Данные методы работают очень тонко, они не такие напористые, как некоторые продавцы товаров, которых мы все хоть раз встречали, но все же достаточно эффективны для повторной интеграции.
Давайте разберем несколько распространенных тактик, описанных в книге Лучшие практики интерактивного дизайна.
Фрейминг – То, как вы представляете определенную информацию. Вместо того чтобы показывать, что оплата картой будет стоить дороже, можно было бы включить ее в общую стоимость и представлять другие способы оплаты, как со скидкой.
Анкоринг – Суть заключается в отображении более дорогого товара выше, тем самым устанавливая его цену за эталон. В таком случае более дешевые товары будут выглядеть намного привлекательнее. Способ особенно эффективен в паре со скидками, когда пользователь четко видит, сколько он может сэкономить.
Боязнь потери – По результатам исследования выяснилось, что инстинкт покупателя избежать боли намного сильнее инстинкта удовольствия от покупки. Постановка вопроса «Если вы не зарегистрируетесь, то потеряете 10$» намного эффективнее, чем «Если вы зарегистрируетесь, вы сэкономите 10$».
Дефицит – Чем меньше товара, тем больший на него спрос. Внимательно посмотрев на сайты Groupon и Amazon, вы заметите, как они подчеркивают дефицит товара для управления конверсией.
Невидимый интерфейс
Хороший дизайн не привлекает к себе внимание. Такой дизайн работает на заднем плане, создавая ощущение у пользователей, что все, чего они достигли, все это благодаря только их усилиям. Ниже я представил несколько полезных способов по расширению возможностей пользователя во взаимодействии с сайтом:
Уменьшение и упрощение этапов – Чем меньше шагов пользователь делает для достижения цели, тем более успешен ваш интерфейс. Этапы могут быть небольшими, но даже если вы избавите пользователя от одного лишнего клика, то он оценит это. Просто взгляните, как Uber (ниже скриншот) превратил многоступенчатый процесс добавления данных кредитки в один простой шаг.
Понятная визуальная коммуникация – Придерживайтесь последовательной визуальной темы и универсальных и понятных значков, чтобы пользователь не запутался (т.е. иконка почты означает список сообщений или входящие).
Всепрощающий интерфейс – Предугадывайте распространенные ошибки пользователей и устанавливайте соответствующие меры безопасности. К данным мерам можно отнести отмену, автосохранение, многоформатный ввод данных, а также пояснительную обратную связь.
Следите за передвижением пользователя – Лучший способ выявить избыточность интерфейса и ненужные шаги это визуализировать передвижение пользователя по сайту. Jessica Downey на примере своей «карты щупалец» создает визуальную карту, помогающую правильно организовать этапы. Ryan Singer с сайта Basecamp придумал похожий, но более быстрый способ.
Значение пробелов
В книге «Лучшие практики пользовательских интерфейсов в веб-дизайне» сказано, что пустое место это не всегда скучно. Пробелы необходимо использовать как активную часть дизайна. С точки зрения интерактивного веб-дизайна пробелы это паузы между словами и предложениями. Распознавание и обработка элементов с экрана быстро теряет смысл без кратких передышек.
Ниже я составил парочку советов относительно пробелов, которые стоит запомнить:
Пробелы создают иерархию – Чем больше пустого пространства вокруг объекта, тем больше к нему приковывается внимание. Только этот трюк уже может помочь дизайнерам повлиять на визуальную иерархию того, на что хочется посмотреть первым.
Минимализм добавляет искушенности – Минимизировав количество элементов и увеличив пустое пространство, вы придаете своему сайту атмосферу элегантности и роскоши. Данный подход часто можно встретить на веб-сайтах модных брендов.
Пространство оказывает влияние на четкость – Пробелы используются не только для фона: если отбросить все и посмотреть на дизайн с атомного уровня, то пробелы могут, как улучшить, так и снизить читаемость текста. В нашем случае под четкостью подразумевается легкость чтения сложных букв в слове. Следуйте этим советам по пробелам между строками/буквами, чтобы быть уверенными в читаемости текста.
Текст интерфейса тоже часть дизайна
Развивая аналогию пользовательского взаимодействия, как диалога, можно сказать, что интерфейс должен тщательно подбирать слова. Все на экране приложения или сайта считается интерфейсом, и текст не исключение. Если смысл написанных слов не совпадает с задачей сайта, не поможет даже самый лучший шрифт.
Tuck Effect
Вас не спасет то, что ваш основной текст может принимать различные формы и размеры. Обычно, весь текст можно разделить и изменить по категориям. Слова приветствия могут быть непринужденными или доброжелательными, но текст призыва к действию на той же странице должен быть более смелым и кратким. Вне зависимости от цели вашего текста, следующие советы могут помочь донести до пользователя правильный смысл:
Знайте свою аудиторию – Этот совет стар, как мир. Знайте своих пользователей и то, что они хотят от вас, чтобы вы им сказали. К примеру, на сайте для детей слова или фразы могут повторяться для привлечения внимания, в то время как на юридическом сайте такой подход не приветствуется.
Определите контекст применения вашего сайта – Вы пишите для веб-сайта или приложения? Домашняя или страница описания? Так же, как вы изменили основной текст под аудиторию, измените сайт под среду использования. Если ваше приложение спроектировано для использования в суетливых или отвлекающих ситуациях (Waze при вождении), сокращение текста ускорить обработку информации.
Показывайте свою индивидуальность – Ваш стиль письма вносит свой вклад в общее настроение и атмосферу сайта так же, как и сильный образ или плавная анимация. Необходимо понять, какие эмоции вызывают определенные цвета. Текст не должен конфликтовать с визуальным взаимодействием.
Отличный дизайн
Последний, но не менее важный, хороший интерактивный дизайн это всегда приятно. Эмоциональная связь с пользователями – самый надежный способ завоевать доверие. Когда дело доходит до дизайна сердце так же важно, как и разум.
На примере MailChimp окно подтверждения является важнейшей частью привлечения пользователей через email рассылку. Забавная картинка и смешной текст только усиливают наслаждение от использования сайта (не говоря уже о том, что данный подход снижает раздражение от массовой рассылки почты). Ниже я составил несколько быстрых советов:
Не жертвуйте юзабилити – Думайте об отличном дизайне как о вишенке на торте: вишенка разбавляет вкус торта, но сама по себе она ничего не дает. Никогда не жертвуйте дизайном ценой ясности.
Оторвитесь от привычного – Как сказал Ben Rowe, ваша первостепенная задача в создании «осмысленного восторга». Как ваш сайт или приложение могут ввести людей в состояние, где действия не ограничены ничем?
Исследования – Пользователя любят сюрпризы. Подходящие микровзаимодействия (типа затухающей анимации, если пользователь завершил задачу) могут сделать довольно общие задачи более эмоционально стоящими. На рисунке ниже показано, как даже простая анимация плавного появления меню добавляет увлекательности повторяющимся действиям.
Автор: Jerry Cao
Источник: //thenextweb.com/
Редакция: Команда webformyself.
