Правила пользовательского интерфейса: создаем идеальный UI-дизайн

Что хочет видеть пользователь, заходя в приложение или на сайт? В первую очередь, нужную информацию, на которую рассчитывает, при этом, не затратив много времени на поиски. Не запутаться в хитросплетениях сайта и не сломать голову, размышляя о том, где находится требуемая информация, помогает UI-дизайн. В этой статье ведущий дизайнер HTDev рассказывает и наглядно показывает, на что обратить внимание при создании удобного пользовательского интерфейса.

UI-дизайн помогает пользователю ориентироваться на сайте или в приложении, обеспечивая лёгкий доступ к интересующей его информации. Иначе говоря, дизайн мягко подталкивает посетителя ресурса к совершению целевого действия.

Перед тем, как перейти к этапам и правилам создания веб-дизайна, разберёмся с преимуществами, которые обеспечивает качественный UI-дизайн:

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

• Эмоциональный отклик: визуальные решения положительно воспринимаются пользователем и полностью соответствуют предпочтениям целевой аудитории.

• Бизнес-эффект: высокая конверсия, рост посещаемости сайта/ скачивания приложения.

Какие же шаги необходимо предпринять для того, чтобы разработать понятный и удобный интерфейс?

1. Проведение исследования

   На первом этапе выполняется анализ пользователей, сбор информации об их предпочтениях, основных потребностях, образе жизни, благосостоянии, сфере деятельности и пользовательских привычках, в особенности – причинах приобретения товаров. Это можно сделать с помощью классических методов маркетинговых исследований: детального анализа отзывов клиентов, технической документации, проведения группового интервью в фокус-группах, опроса пользователей или глубинного интервью с ключевым заказчиком.
   
   Метод сбора информации о пользователях зависит от конкретных задач и специфики целевой аудитории. При запуске продукта широко используется методология Jobs to Be Done, при которой пользователи объединяются в группы в зависимости от целей приобретения конкретного товара или услуги и для каждой группы подбирается уникальное торговое предложение. Когда определены группы с набором характеристик ЦА, пользователей помещают в центр user story – пользовательской истории, включающей рассказ о взаимодействии человека с продуктом, который соответствует пользовательским привычкам группы.
   

2. Формирование пользовательских сценариев

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

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

3. Составление структуры и прототипа сайта или приложения
   

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

4. Определение с концепцией дизайна и макетирование
   

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

5. UI-проектирование
   

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

1. Отступы

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

2. Сетка

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

3. Цвета

Цвета помогают акцентировать внимание на ключевых элементах страницы: выделить подзаголовок, обозначить call to action. Базово можно остановиться на трёх цветах: цвет текста, цвет фона и цвет акцента. Цвета должны быть контрастными по отношению друг к другу – проверить это условие поможет специальный инструмент, например, Color Contrast Analyzer.

4. Композиция страницы

Композиция может быть представлена следующей формулой:

- Заголовок
- Подзаголовок
- Текст
- Кнопка
- Картинка или баннер

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

Подводя итог, отметим: успех хорошего дизайна – быть «понятым» пользователям. Чтобы создать качественный, при этом удобный и логичный в использовании сайт или приложение, выбирайте оформление, которое подчеркнёт имидж компании и позволит улучшить опыт взаимодействия с клиентами.