Популярность вашего сайта напрямую зависит от того, насколько качественно выполнен дизайн пользовательского интерфейса. В этой статье мы приведем примеры дизайна веб-интерфейса и расскажем, какие элементы должны присутствовать в хорошем дизайне.
Как оценить качество UI
Для оценки качества UI можно воспользоваться принципом MAYA от промышленного дизайнера Раймонда Лоуи. Эта аббревиатура расшифровывается как Most Advanced Yet Acceptable — самый прогрессивный и в то же время приемлемый. На практике он означает, что интерфейс должен быть инновационным, но при этом достаточно понятным. Применение принципа MAYA можно оценить по таким показателям:
- Использование стандартных «метафор». Действия, которые пользователи могут выполнять на вашем сайте должны быть созвучны с действиями в реальной жизни (например, скроллинг напоминает переворачивание страниц, а архивирование — складывание бумажных документов на полку или в ящик).
- Наличие традиционных функций. Разумеется, вы сами определяете, насколько инновационным или традиционным должен быть интерфейс, исходя из предполагаемых технических навыков ваших пользователей. Но в любом случае в нем должны присутствовать знакомые элементы — это позволяет пользователям чувствовать себя уверенней.
- Отсутствие ненужных шагов в стандартных процессах. Усложняя стандартные процессы, вы только раздражаете пользователей.
Лучшие образцы веб-дизайна UI не только заслуживают уважение пользователей, но и получают награды, например Webby Awards. Ниже мы рассмотрели примеры дизайна веб-интерфейса разного назначения.
Примеры дизайна пользовательского интерфейса
MailChimp
Известная служба организации email-рассылок — отличный образец сервиса, который успешно применяет принципы дизайна пользовательского интерфейса. Зарегистрировавшись, новый пользователь видит не пустое пространство на месте рассылок, а короткую подсказку: что такое кампания, что нужно кликнуть, чтобы ее создать, а также яркий голубой указатель, отмечающий нужную кнопку:
При этом продвинутым пользователям предлагаются расширенные опции в так называемом меню по требованию (menu-on-demand):
Темплейты для рассылок представлены в виде схематических превью — пользователь может сделать выбор, даже не читая описание:
Работа с темплейтом осуществляется в редакторе, в котором используются иконки, стандартные для текстовых редакторов, а также перетягивающиеся блоки, предназначение которых сразу объясняется:
При этом здесь есть важные элементы для тестирования внешнего вида и сохранения шаблона. Особого внимания заслуживает сообщение «We’ll autosave every 20 seconds» — благодаря ему пользователь знает, что ему не нужно периодически сохранять шаблон, чтобы не потерять изменения.
Меню внизу страницы сообщает пользователю, на каком этапе создания рассылки он находиться и позволяет вернуться на нужные этап, если требуется внести какие-то изменения:
Если пользователь сделал ошибку при создании рассылки, во-первых, он увидит сообщение о том, что что-то пошло не так:
А во-вторых, ему будет предложено возможное решение, которое можно сразу же применить:
После того, как новый пользователь завершил некоторые шаги, в руководстве по началу работы появляются отметки Good job! и вычеркиваются выполненные действия:
MailChimp успешно применяет плоский дизайн пользовательского интерфейса.
Hootsuite
Популярная система для управления социальными сетями использует на своем лендинге фиксированное меню и предлагает сразу три яркие кнопки для регистрации с помощью соцсетей, которые привлекают внимание:
При этом, кликнув на ссылку «or create new account», пользователь не перейдет на новую страницу, а всего лишь увидит окошко с крестиком и всего тремя проиллюстрированными полями:
Настроить свою ученую запись и начать использовать Hootsuite мотивирует статистика о том, как сколько времени экономит его использование:
После регистрации и добавления социальных сетей пользователям предлагается ознакомиться с интерактивным руководством по началу работы:
Его можно пройти или пропустить (Skip tour):
В Hooutsuit меню слева с иконками раскрывается, открывая доступ к остальным разделам сервиса (например, настройкам и рекламе):
Поле публикации вверху используется для создания сообщений. Функции прикрепления файла, планирования публикации, добавления данных о расположении и приватности представлены в виде иконок:
При этом кнопка Save является сразу же и меню, и предлагает не только сохранение, но и несколько других опций:
Содержимое приложения организовывается в виде вкладок (прямо как браузере), которые можно добавлять, удалять и редактировать:
В паблишере пользователю предлагаются понятные подсказки по управлению публикациями:
My Energy
Сайт My Energy, который предназначен для учета расхода электроэнергии, газа и воды, отлично объясняет пользователям, для чего нужны те или иные данные и сразу показывает, что шагов по настройке профиля будет только три:
А после ввода адреса демонстрирует карту и, предвосхищая возможность ошибок картографического характера, предлагает нажать кнопку не That’s right, а Close enough!:
В зависимости от местоположения сайт сразу предлагает возможности по получению вычетов из налогов при использовании тех или иных технологий:
А вот советы по экономии и опросник по характеристикам жилья:
На скриншоте выше мы видим два меню — они оба фиксированные, благодаря чему при наличии большого количества данных пользователь все равно может быстро получить доступ к нужным функциям.
Нижнее меню отвечает за статистику по потреблению, сравнение показателей с другими жителями своего района, построение графиков и создание понятных отчетов:
Отдельно стоит упомянуть раздел с советами по экономии:
В нем можно отмечать советы, которых вы придерживаетесь, добавлять их в список дел и быстро просматривать по фильтрам или ориентируясь на показатели Saving Impact (сколько денег они помогают сэкономить) и Effort Required (сложность выполнения), которые представлены в виде градиентных кружочков:
Как показывают примеры выше, современный дизайн пользовательского интерфейса должен быть дружественным к новичкам, использовать уже известные паттерны и элементы, а также предоставлять объяснения и примеры там, где это необходимо.
Мы, студия stfalcon.com, разрабатываем MVP для стартапов, UI для сайтов и мобильных приложений и с удовольствием создадим современный дизайн пользовательского интерфейса, который будет радовать ваших клиентов.
