click fraud detection
click fraud detection
Blog Case

Современный и продуманный UX design = успешный проект

BLOG
CASE
2874
0
0/ 5stars
0/5

Главные принципы UX design 2016

В оформлении сайтов продолжают лидировать 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 Design Trends 2015 & 2016.

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

0/5
Проголосовало людей: 0
СОДЕРЖАНИЕ
СТАТЬИ
1. Дизайн веб-сервисов
2. Персонализация
3. Микроинтеракции
4. Создание дизайна под любые устройства
5. Новый подход к игрофикации
Кейс: рисуем эффектный Landing page для продажи недвижимости
Во время новогоднего ажиотажа к нам поступила заявка от постоянного клиента, который занимается продажей недвижимости…
Полина Приходько
Полина Приходько
15 тенденций веб-дизайна в 2018 году
Какой дизайн выбрать для своего веб-ресурса в 2018-м, чтобы быть в тренде?
Галина Назарова
Галина Назарова
Как нарисовать сайт, который будет продавать
Не продающими текстами едиными! Рисуем веб-дизайн, который поможет увеличить продажи на сайте, и изучаем азы…
Инна Самойлова
Инна Самойлова
Фирменный стиль: зачем он нужен
Фирменный стиль – незаменимый атрибут для развивающихся компаний и для устоявшихся брендов. Поэтому очень важно…
Галина Назарова
Галина Назарова
Автор
2874
0
Галина Назарова
Галина
Назарова
Журналист-копирайтер
most
Popular
самое лучшее на айтыжблог
НЕ ПРОПУСТИТЕ ЭТИ 
СТАТЬИ
Какой дизайн выбрать для своего веб-ресурса в 2018-м, чтобы быть в тренде?
Галина Назарова
Галина Назарова
Возможно
Как показывает опыт последних лет сайт нельзя полностью доверить системному администратору, ведь очень часто возникают…
Артем Лукив
Артем Лукив
Как авторы текстовых материалов «чистят» свои работы от лишних слов и ошибок? Им помогают онлайн-сервисы!…
Галина Назарова
Галина Назарова
Что делать программисту, если он «подсел» на JavaScript? Для начала — прочесть эту статью!
Галина Назарова
Галина Назарова
Оставить комментарий
к статье
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
Уже подписались 229 человек
313
ПОПИСЧИКОВ
ЧИТАТЬ
4269
ПОПИСЧИКОВ
СЛЕДИТЬ
10139
ПОПИСЧИКОВ
СЛЕДИТЬ