Примеры дизайна веб-интерфейса

Примеры дизайна веб-интерфейса

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

Как оценить качество UI

Для оценки качества UI можно воспользоваться принципом MAYA от промышленного дизайнера Раймонда Лоуи. Эта аббревиатура расшифровывается как Most Advanced Yet Acceptable — самый прогрессивный и в то же время приемлемый. На практике он означает, что интерфейс должен быть инновационным, но при этом достаточно понятным. Применение принципа MAYA можно оценить по таким показателям:

  1. Использование стандартных «метафор». Действия, которые пользователи могут выполнять на вашем сайте должны быть созвучны с действиями в реальной жизни (например, скроллинг напоминает переворачивание страниц, а архивирование — складывание бумажных документов на полку или в ящик).
  2. Наличие традиционных функций. Разумеется, вы сами определяете, насколько инновационным или традиционным должен быть интерфейс, исходя из предполагаемых технических навыков ваших пользователей. Но в любом случае в нем должны присутствовать знакомые элементы — это позволяет пользователям чувствовать себя уверенней.
  3. Отсутствие ненужных шагов в стандартных процессах. Усложняя стандартные процессы, вы только раздражаете пользователей.

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

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

MailChimp

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

Дизайн пользовательского интерфейса MailChimp

При этом продвинутым пользователям предлагаются расширенные опции в так называемом меню по требованию (menu-on-demand):

Меню по требованию в веб-интерфейсе MailChimp

Темплейты для рассылок представлены в виде схематических превью — пользователь может сделать выбор, даже не читая описание:

Темплейты для рассылок в меню MailChimp

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

UI редактирования темплейта в MailChimp

При этом здесь есть важные элементы для тестирования внешнего вида и сохранения шаблона. Особого внимания заслуживает сообщение «We’ll autosave every 20 seconds» — благодаря ему пользователь знает, что ему не нужно периодически сохранять шаблон, чтобы не потерять изменения.

Меню внизу страницы сообщает пользователю, на каком этапе создания рассылки он находиться и позволяет вернуться на нужные этап, если требуется внести какие-то изменения:

Указания этапа создания рассылки в веб-интерфейсе MailChimp

Если пользователь сделал ошибку при создании рассылки, во-первых, он увидит сообщение о том, что что-то пошло не так:

Указание на ошибку в веб-интерфейсе MailChimp

А во-вторых, ему будет предложено возможное решение, которое можно сразу же применить:

Подсказка по исправлению ошибки в веб-интерфейсе MailChimp

После того, как новый пользователь завершил некоторые шаги, в руководстве по началу работы появляются отметки Good job! и вычеркиваются выполненные действия:

В веб-интерфейсе MailChimp отмечаются выполненные действия

MailChimp успешно применяет плоский дизайн пользовательского интерфейса.

Hootsuite

Популярная система для управления социальными сетями использует на своем лендинге фиксированное меню и предлагает сразу три яркие кнопки для регистрации с помощью соцсетей, которые привлекают внимание:

Лендинг Hootsuite

При этом, кликнув на ссылку «or create new account», пользователь не перейдет на новую страницу, а всего лишь увидит окошко с крестиком и всего тремя проиллюстрированными полями:

Простая форма регистрации в веб-интерфейсе Hootsuite

Настроить свою ученую запись и начать использовать Hootsuite мотивирует статистика о том, как сколько времени экономит его использование:

Вдохновляющая статистика рядом с формой регистрации Hootsuite

После регистрации и добавления социальных сетей пользователям предлагается ознакомиться с интерактивным руководством по началу работы:

Руководство по началу работы в веб-интерфейсе Hootsuite

Его можно пройти или пропустить (Skip tour):

В веб-интерфейсе Hootsuite можно пропустить руководство по началу работы

В Hooutsuit меню слева с иконками раскрывается, открывая доступ к остальным разделам сервиса (например, настройкам и рекламе):

Боковое меню в веб-интерфейсе Hootsuite

Поле публикации вверху используется для создания сообщений. Функции прикрепления файла, планирования публикации, добавления данных о расположении и приватности представлены в виде иконок:

Поле публикации в веб-интерфейсе Hootsuite

При этом кнопка Save является сразу же и меню, и предлагает не только сохранение, но и несколько других опций:

Многофункциональная кнопка Save в веб-интерфейсе Hootsuite

Содержимое приложения организовывается в виде вкладок (прямо как браузере), которые можно добавлять, удалять и редактировать:

Вкладки в веб-интерфейсе Hootsuite

В паблишере пользователю предлагаются понятные подсказки по управлению публикациями:

Подсказки по управлению публикациями в веб-интерфейсе Hootsuite

My Energy

Сайт My Energy, который предназначен для учета расхода электроэнергии, газа и воды, отлично объясняет пользователям, для чего нужны те или иные данные и сразу показывает, что шагов по настройке профиля будет только три:

3 шага по заполнению формы регистрации My Energy

А после ввода адреса демонстрирует карту и, предвосхищая возможность ошибок картографического характера, предлагает нажать кнопку не That’s right, а Close enough!:

Использование карты в веб-интерфейсе My Energy

В зависимости от местоположения сайт сразу предлагает возможности по получению вычетов из налогов при использовании тех или иных технологий:

Подсказки в веб-интерфейсе My Energy

А вот советы по экономии и опросник по характеристикам жилья:

Полезные советы в веб-интерфейсе My Energy

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

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

Понятные отчеты в веб-интерфейсе My Energy

Отдельно стоит упомянуть раздел с советами по экономии:

Советы по экономии в интерфейсе My Energy

В нем можно отмечать советы, которых вы придерживаетесь, добавлять их в список дел и быстро просматривать по фильтрам или ориентируясь на показатели Saving Impact (сколько денег они помогают сэкономить) и Effort Required (сложность выполнения), которые представлены в виде градиентных кружочков:

Градиенты в веб-интерфейсе My Energy

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

Мы, студия stfalcon.com, разрабатываем MVP для стартапов, UI для сайтов и мобильных приложений и с удовольствием создадим современный дизайн пользовательского интерфейса, который будет радовать ваших клиентов.