Принципы веб-дизайна интерфейса
Каким должен быть эффективный интерфейс пользователя? Приятным на вид и удобным для использования! Чтобы создать такой интерфейс, нужно понимать основы: как пользователь взаимодействует с UI, чего он ожидает. Более того, нужно видеть источники потенциальных проблем. Итак, давайте рассмотрим принципы проектирования графического интерфейса пользователя, без которых невозможно создание удобного и красивого UI.
Но для начала определимся с ключевым понятием статьи — интерфейсом. Что нам следует знать? То, что интерфейс — это не просто кнопки и меню, цвета и шрифты, то есть внешний вид. Скорее, это набор инструментов, которые помогают пользователю решить определенные проблемы. А теперь перейдем непосредственно к принципам:
1. Знайте своего пользователя
Интерфейс не должен заставлять пользователя думать. Описывайте его как можно более детально: только точно зная, кто ваш пользователь, как и почему он действует, вы сможете создать UI дизайн веб-сайта, который будет работать так, как нужно. Примите решения исходя из того, кто ваш пользователь, и реализуйте их в своем интерфейсе.
2. Не бойтесь заимствований
Что-то новое всегда дается тяжело. Многие пользователи проводят кучу времени в известных социальных сетях: Facebook, VK, Instagram, Twitter. Разберитесь, как они устроены, в чем фишка их дизайна и попробуйте адаптировать уже существующие их наработки к вашим реалиям. Используя уже известные модели, вы поможете пользователям быстро разобраться в новом продукте и завоюете их доверие.
3. Визуальная иерархия
С помощью цвета, размера элементов, размещения, пустого пространства покажите пользователям, что является ключевым и самым важным на вашей странице. Каждый элемент должен быть на своем месте, а его параметры и окружение должны соответствовать его роли.
4. Feedback
Пользователь всегда должен понимать, что происходит. Делайте так, чтобы при работе с вашим сайтов у юзера не оставалось вопросов типа «Куда я нажал?», «Отправилось ли письмо?», «Загрузился ли файл?», «Что за вкладка у меня открылась?». Обеспечьте комфорт пользователям, предотвратите риск случайного удаления важных данных.
5. Больше возможностей опытным пользователям
Те, кто уже давно использует ваш сервис или иной похожий, часто устают от выполнения рутинных действий. Упростите их жизнь, добавив, например, горячие клавиши. Сейчас такая функция доступна во многих сервисах. Однако лучше сделать для этого дополнительное меню: обилие незнакомых команд и кнопок управления может отпугнуть неопытного пользователя.
6. Не показывайте пользователю пустую страницу
Или не оставляйте его один на один с незнакомым ему сайтом. Расскажите новому пользователю, с чего начать, покажите результаты работы сервиса. Помните, что интерфейс должен быть интуитивно понятным.
7. Не усложняйте
Прежде, чем добавить еще один элемент UI, спросите себя, облегчит ли он жизнь пользователя или только заберет у него ценное время. Возможно, нововведения не так уж и необходимы?
8. Экспериментируйте
И, желательно, это делать не в одиночку, полагаясь лишь на свои силы. Привлеките к этому обычных пользователей, экспертов, учитывайте разные мнения. Особенно, мнения тех людей, которые ничего не знают о проекте вашего дизайна, и о том, как все устроено. Их замечания, как постоянных пользователей и просто людей со стороны, будут особенно уместны.
И напоследок расскажем о еще одной любопытной вещи. Когда пользователь приходит на страницу, он не читает ее, а всего лишь пробегается по ней глазами. Поэтому веб-дизайн современного интерфейса пользователя создается с учетом F и Z-паттернов чтения.
F-паттерн работает для сайтов с большим количеством текста — пользователь просматривает верхнюю часть страницы в поиске ключевых слов, потом опускается ниже и пробегается по подзаголовкам.
Z-паттерн работает на страницах без больших фрагментов текста, например, на лендингах. Вначале посетители просматривают шапку слева направо, потом опускают взгляд вниз и влево, и просматривают нижнюю часть окна слева направо:
Такие дела, друзья. Следуйте принципам веб-дизайна пользовательского интерфейса и помните, что он должен решать проблемы юзера самым простым из всех возможных способов.
Cackle
