Принципы веб-дизайна интерфейса пользователя

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

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

1. Знайте своего пользователя

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

2. Используйте уже известные модели

Об этом легко забыть, но пользователи уже проводят кучу времени в других интерфейсах, будь то Facebook, Яндекс, VK, Gmail, Рутвит или Flickr. Разберитесь, как они устроены и не придумывайте колесо. Используя уже известные модели, вы поможете пользователям быстро разобраться в новом продукте и завоюете их доверие.

3. Будьте последовательны

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

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

4. Создавайте визуальную иерархию

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

5. Предоставляйте фидбек и защищайте пользователя от случайных действий

Говорите пользователю, что происходит. Отправилось ли письмо? Загрузился ли файл? Поддерживается ли этот формат изображений? Убедитесь, что нельзя удалить все данные одним нажатием. Пользователю важно знать, что он не остался один на один со своими проблемами. Позаботьтесь, чтобы ему было комфортно.

6. Не показывайте все элементы управления сразу

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

7. Предоставляйте больше возможностей опытным пользователям

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

8. Не показывайте пользователю пустую страницу

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

9. Не усложняйте

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

10. Тестируйте

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

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

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

Поэтому на «тяжелых» сайтах важная информация размещается слева, там, где ее ожидает увидеть пользователь. Этот паттерн используют CNN и New York Times.

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

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