8 (8212) 55 18 12

5 базовых правил UX-дизайна в разработке интерфейса для пользователя

Приступить к чтению

Прежде чем говорить о UX/UI дизайне, давайте разберемся что это за названия такие.

UX (англ. user experience) — дословно означает «опыт пользователя». Взаимодействие между человеком и компьютером. UX-дизайн отвечает за структуру контента, иерархию блоков с учетом потребности пользователя. Чтобы он легко и без преград сделал заказ или выполнил нужное действие.

Ul (англ. user interface) — это интерфейс пользователя, UX в переводе означает «опыт взаимодействия». UI-дизайн это эстетическое преломление UX, какие будут цвета, шрифты, размер кнопок и картинки.

Сегодня поговорим о UX-дизайне.

В каждом этапе разработки пользовательского интерфейса учитывается психология пользователя. Благодаря ей можно создать удобный продукт для человека. Дизайнер продумывает все — начиная с того, как физический продукт ощущается в руке, до того, каким будет процесс покупки в Интернете.

Цель UX-дизайна — функциональность, красота и удобство, от этого пользователь получит приятное впечатление от продукта.

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

Я выделила 5 принципов для удобства пользователя:

  1. Покажите ценность продукта, прежде чем просить пользователя выполнить действие;
  2. Не путайте пользователей, а направляйте;
  3. Не заставляйте пользователей работать;
  4. Не изобретайте велосипед;
  5. Больше наблюдайте за пользователем.

1. Покажите ценность продукта, прежде чем просить пользователя произвести действие

Люди скептически относятся к тому, чтобы тратить усилия, время или деньги. По принципу  «затраты-выгода», который гласит, что люди сравнивают получаемую ценность, с тем, сколько это будет стоить. Работа UX-дизайнера заключается в том, чтобы превзойти преимущества над затратами. Для этого создается упор на психологическую концепцию, называемую взаимностью. Если создать ценность для клиента, то это расположит его к действию, и ему будет проще сделать первый шаг. Поэтому цель состоит в демонстрации ценности продукта для побуждения клиента к последующим действиям.

Позвольте пользователям изучить приложение или сайт, прежде чем требовать:

  • разрешения на отправление уведомлений;

  • запрос делиться местоположением;

  • предоставлять личную информацию;

  • требовать входа в личный кабинет.

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

 

Запрос на показ уведомлений


2. Помогайте пользователям

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


Ввели некорренетные данные, ждем купон.

Заявка принята форма

 

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

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

Разбейте вещи: как пользователь, вероятно, уже знакомы с прогрессивным раскрытием. Это разделение подробной информации на части и раскрытие только тогда, когда это того стоит.

 

Прогрессивное раскрытие в описании товараtoysik.ru характеристики товара можно посмотреть постепенно, переходя в нужные разделы. Все структурировано.

 

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


3. Не заставляйте пользователей работать

Пользователь должен моментально находить ответ на вопрос на сайте. Тогда стоимость взаимодействия будет равна нулю. Используйте постоянные метки. Легкий способ снизить затраты на взаимодействие — это уменьшить количество догадок для пользователей. Иконки, заголовки, подсказки — вам помогут.

Упростите ввод информации: пользователям будет тяжело выбрать местоположение из выпадающего списка из 130 стран. Тщательно продумайте предлагаемые элементы управления пользовательским интерфейсом и выберите правильные элементы управления для каждого элемента информации.
 

4. Не изобретайте велосипед

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

 

Пример сайта с нестандартной кнопкойВы бы сразу догадались что красный кружок — это кнопка?

 

Если будет слишком много непривычных изменений в вашем продукте — то пользователь не справится. Клиент опирается на прошлый опыт и ожидает, что новые продукты будут работать аналогично продуктам, с которыми он уже сталкивался. Лёгкий эффект воздействия говорит о том, что мы находим знакомые слова, обстановку, идеи и шаблоны, которые успокаивают. Используйте общие шаблоны. Меню поиска, чата и навигации выглядят похоже на аналогичных сайтах. Потому, что эти методы работают, и люди знают, как взаимодействовать с ними.

Выберите место для инноваций: если сформулирована четкая причина сделать иначе (как правило, опираясь на собственные исследования пользователей), то сделайте это.

 

Пример интересной кнопкиКнопка необычной формы, но сразу понятно, что это она.

 

5. Больше наблюдайте за реакцией пользователя

Наблюдайте за пользователями: наблюдение может помочь определить проблемы, с которыми сталкиваются, а затем работа как дизайнера заключается в поиске решений. Используйте сервис Яндекс метрика или Вебвизор.

Прототип и тестирование: создайте каркас идей и представьте заказчику в качестве прототипа. Так вы лучше сможете объяснить  свою идею и аргументировать ее.

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

Время прочтения:
Время прочтения 6.1 мин

Для авторов

Хотите стать соавтором блога, рассказать аудитории о новинках в мире веб и все что с ним связано? Тогда присылайте ваши материалы и мы опубликуем их.

Стать автором

Обсуждение