5 трендов UX 2016 года

5 трендов UX 2016 года

UX это термин, который охватывает взаимодействие пользователя с интерфейсом веб-ресурса. Сайт радует или действует на нервы? Им пользуются с удовольствием или по необходимости?

Создавая UX дизайн, главной целью должно быть оправдание ожиданий пользователя от взаимодействия с сайтом.

В оформлении сайтов продолжают лидировать 5 описанных ниже тенденций в сфере проектирования интерфейса. Каждому дизайнеру, который хочет оставаться востребованным, нужно уметь их использовать.

1. Дизайн веб-сервисов

Сайт – не просто набор веб-страниц. Это неотъемлемая часть общего впечатления клиентов от качества обслуживания, которая объединяет их виртуальный и реальный опыт.

Пример: покупая билеты на концерт, люди взаимодействуют со множеством интернет-ресурсов. При разработке сайта для покупки билетов следует учитывать все точки пересечения между теми ресурсами, которые ваши клиенты посещают на пути к цели. Один информационный портал пользователь посещает, чтобы больше узнать о месте проведения концерта, другой – чтобы почитать об исполнителе, третий – чтобы узнать о планах друзей. В конце концов, пользователи приходят на ваш сайт и покупают билет.

Ваш интернет-ресурс не существует сам по себе, в каком-то вакууме. Создавая его архитектуру и упорядочивая страницы, нужно помнить о пользовательских привычках: они сложились при взаимодействии с похожими интернет-источниками ранее. С точки зрения пользователя, ваш сайт – это всего лишь часть сервиса «покупки билета».

Поскольку сервис-дизайн все больше пересекается с веб-дизайном, всем создателям необходимо освоить принципы проектирования интерфейса. Как никогда прежде, сейчас UX дизайн, ориентированный на взаимодействие пользователей с сайтом, вытесняет методы, сосредоточенные на пользовательском интерфейсе. На то есть причины.

Рост числа шаблонов. Сервисы наподобие WordPress, качественные шаблоны, популярные фреймворки и конструкторы сайтов будут продолжать появляться и развиваться.

Проверенные UI-паттерны. Примеры разработки пользовательского интерфейса упрощают его использование – пользователю не приходится осваивать новые элементы управления. Полагаясь на проверенные паттерны, можно уделить больше внимания экспериментам с UX дизайном.

Методы:

  • Упрощение взаимодействия. Уберите лишние шаги, клики, ненужную графику или текст. Тогда сайт будет сам направлять действия пользователя, позволяя ему быстрее достичь цели – и сервис станет лучше. Нарисуйте последовательность действий, которые приходится выполнять пользователю. Это нужно для того, чтобы наглядно представить процесс и решить, какие шаги нужно выбросить, а какие можно оставить.
  • Раннее и частое прототипирование. Нельзя откладывать создание прототипов на конечный этап работы. С их помощью тестирование помогает определить, как именно пользователь реагирует на дизайнерские решения. Тесты нужно проводить как до, так и во время процесса разработки. С помощью сервиса UXPin можно добавлять элементы взаимодействия даже к макетам (прототипам низкой точности). Это позволяет протестировать базовую структуру до продвижения.
  • Отказ от каскадной модели разработки. Не нужно, чтобы дизайнерский проект футболили от одного участника команды к другому. UX дизайн это достаточно обобщенная отрасль знания. Ответственность за решения в этой сфере несет не один человек, а вся команда. Чтобы четко представлять весь путь, который клиент проходит до получения услуги, нужно не только слушать разработчиков, а и привлекать к работе менеджеров по маркетингу, управлению продукцией и продажами.

2. Персонализация

Каждый хочет особого отношения к себе.

При использовании персонализации (которую не следует путать с кастомизацией) пользователи должны получать то, что им необходимо, без каких-либо усилий. Масштаб персонализации бывает разным. Часто это рекомендации похожего контента (товаров, статей, знакомых в социальных сетях) и push-уведомления о событиях вроде дня рождения.

Методы:

  • Отзывы пользователей. Первый шаг на пути к персонализации – лучше узнать пользователей. Определить и учесть при разработке их предпочтения помогут интервью, опросы и полевые исследования.
  • Использование документации по взаимодействию с интерфейсом. Модели юзера, пользовательские сценарии, карты этапов взаимодействия с клиентом – все это инструменты для персонализации. Сегментация пользователей поможет выделить потребности людей, для которой создается дизайн.
  • Вопрос при регистрации. Исследования показывают, что для лучшей персонализации необходимо получить определённые сведения. Задайте соответствующий вопрос пользователям прямо во время регистрации.
  • Задействование правил и алгоритмов. Правила формируют контент, основа которому – современные тенденции. Алгоритмы же «обучаются» в ходе взаимодействия с пользователем. Сочетайте оба метода для более точных результатов.

3. Микроинтеракции

Чем выше конкуренция в отрасли, тем больше специалисты углубляются в мелочи дизайна.

Пример микроинтеракции – это сигнал «динь», звучащий при получении нового сообщения, или иконка тележки, обозначающая добавление товара в корзину. Эти символы становятся все более важными для взаимодействия пользователей с сайтом.

Микроинтеракции действуют, словно смазка для сложного механизма. Они предоставляют необходимую обратную связь, объясняют функцию элемента, не дают пользователю ошибиться и даже развлекают. На сегодняшний день микроинтеракции стали неотъемлемой частью веб-дизайна – без них сайт выглядит скучно.

Методы:

  • Мгновенное реагирование. При взаимодействии с сайтом микроинтеракции должны срабатывать моментально – в течение 0,1 секунды. Это необходимо, чтобы пользователь чувствовал себя уверенно. Если отклик заставит себя ждать дольше, микроинтеракция не будет ассоциироваться с первоначальным действием.
  • Объединяющий мотив. Использование единого мотива, например, повторяющихся цветов или одинаковой анимации для разных иконок, не только подчеркнет оригинальность вашего бренда, а и покажет, что разные элементы имеют схожие функции. В оформлении сайта фильма Amy, например, многократно используются розовые линии разной толщины.
  • Проектирование с учетом повторяемости. Одна и та же микроинтеракция будет повторяться снова и снова. Не забывайте, что разрабатываете ее для длительного использования. После 50 проигрываний забавный звуковой эффект может стать раздражающим.
  • Подсказки при наведении. Чтобы узнать, для чего служит тот или иной элемент, пользователь, скорее всего, наведет на него курсор мышки. Микроинтеракции или их отсутствие могут кое-что рассказать об элементах. Например, являются ли те интерактивными.

4. Создание дизайна под любые устройства

Теперь, когда просмотр веб-страниц с телефонов стал нормой, очень  важно, чтобы взаимодействовать с сайтом было одинаково удобно на разных устройствах. Тем более что многие пользователи производят одни и те же действия по очереди с разных девайсов. Этот факт передает власть в руки UX дизайна, поскольку изменения в последнем гораздо больше зависят от типа устройства.

В ходу две главные стратегии: респонсивный (или отзывчивый) веб-дизайн (Responsive Web Design) и адаптивный (Adaptive Web Design). Первый подразумевает, что сайт «откликается», подстраиваясь под то или иное устройство, в то время как второй предусматривает создание разных макетов сайта для различных устройств.

В бесплатной электронной книге Responsive Design Best Practices лучшим признается подход «сначала мобильные». Суть в том, что сначала разрабатывают макет для самого маленького экрана, а потом постепенно увеличивают масштаб. Это вынуждает дизайнеров определять ключевые для взаимодействия компоненты в самом начале работы – вместо того, чтобы сначала разработать все элементы сразу, а потом раздумывать, от каких из них отказаться.

Методы:

  • Визуальное единство. На всех устройствах должны отображаться одинаковые графические элементы – например, иконки и цветовые схемы. Важно также правильно разместить элементы, поскольку пользователи привыкли видеть их на определенных местах. Понятно, что верстка будет меняться под размер экрана – так что сохраняйте единство, где это возможно.
  • Настраивание изображений. Изображения почти всегда отображаются на разных устройствах по-разному, поэтому займитесь их обрезкой и масштабированием. Если этого не сделать, то неизвестно, в каком виде изображения увидит пользователь.
  • Внимание к особенностям устройств. У различных устройств есть свои преимущества и недостатки. Примите во внимание такие особенности, как возможность навести курсор или управление жестами. Когда их задействуют, пользовательские интерфейсы становятся интереснее. Не бойтесь новшеств.

5. Новый подход к игрофикации

Пусть многие считают игрофикацию избитым и замороченным приемом, однако во многом она довольно эффективна. Поэтому ею и стали злоупотреблять. При новом подходе к игрофикации используются исключительно ее преимущества – надо только знать, где их искать.

В лучших образцах игрофикации используется то, что Нир Эяль в своей книге «Покупатель на крючке» называет моделью «крючка».

Сначала пользователь видит визуальный сигнал (1.), который помогает выработать у него привычку, либо по-другому начинает ощущать внутреннюю потребность.

Это побуждает к выполнению привычного действия (2.), которое, по мнению пользователя, поможет ему достичь цели.

Выполнив действие, пользователь получает вознаграждение (3.), ради которого он и начал действовать. Модель взаимодействия закрепляется (4.), и в будущем пользователь обращается к ней снова.

Методы:

  • Отказ от покровительственного отношения. Одна из причин неудачной игрофикации – снисходительный тон при общении с пользователем. Хорошая игрофикация дает пользователям возможность поверить в собственные силы и почувствовать себя умнее. Речь идет не о том, чтобы раздавать незаслуженные похвалы или лишать пользователей практической поддержки.
  • Демонстрирование прогресса пользователям. Если пользователь, глядя на индикатор прогресса или инфографику со статистикой, увидит, насколько далеко он зашел, то поймет, что его вложения оправданы. Так модель «крючка» получает подкрепление.
  • Стабильность валют. Как и настоящие, игровые валюты сложно ввести в употребление, а их ценность часто меняется. Если валюта недостаточно ценная, она станет ненужной и начнет раздражать; если слишком ценная – люди попытаются извлечь из нее выгоду или взломают систему.

Эта статья – просто краткий обзор. Если вы хотите узнать больше о том, как проектировать интерфейсы сайтов, загляните в бесплатную электронную книгу: UX DesignTrends 2015 & 2016.

А если у вас нет времени или вы не считаете необходимым разбираться в этой теме, но хотите для своего сайта только самое лучшее - заказывайте веб-дизайн в агентстве WeZom. Мы посоветуем и поможем сделать ваш сайт привлекательным, удобным и современным!


Залишити коментар
Будь ласка, введіть ваше ім’я
Будь ласка, введіть коментар.
1000 символів

Будь ласка, введіть email
або Відмінити

Інші статті в категорії Новини