Принципы веб-дизайна интерфейса пользователя
Эффективный интерфейс пользователя объединяет в себе две составляющие: приятный внешний вид и удобство использования. Чтобы создать такой интерфейс, нужно понимать основы: как пользователь взаимодействует с 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 должен решать проблемы пользователя самым простым из возможных способов.
