Эффективный интерфейс пользователя объединяет в себе две составляющие: приятный внешний вид и удобство использования. Чтобы создать такой интерфейс, нужно понимать основы: как пользователь взаимодействует с UI, чего он ожидает и что может стать источником потенциальных проблем. В этой заметке мы рассмотрим принципы проектирования графического интерфейса пользователя, без которых невозможно создание удобного и красивого UI для web’а.
Для начала давайте договоримся, что интерфейс — не просто кнопки и меню, цвета и шрифты, т. е. внешний вид, а набор инструментов, которые помогают решать проблемы пользователя. Поэтому вот первый принцип создания графического интерфейса:
1. Знайте своего пользователя
Чем детальнее вы его опишите, тем лучше. Только точно зная, кто ваш пользователь, как и почему он действует, вы сможете создать UI дизайн веб-сайта, который будет работать так, как нужно. Например, вот как определяют своих пользователей в MailChimp:
Известный консультант по юзабилити Стив Круг утверждает: интерфейс не должен заставлять пользователя думать. Примите решения исходя из того, кто ваш пользователь, и реализуйте их в своем интерфейсе.
2. Используйте уже известные модели
Об этом легко забыть, но пользователи уже проводят кучу времени в других интерфейсах, будь то Facebook, Gmail или Flickr. Разберитесь, как они устроены и не придумывайте колесо. Используя уже известные модели, вы поможете пользователям быстро разобраться в новом продукте и завоюете их доверие.
Например, индикаторы готовности подойдут не только для проверки заполненности профиля в соцсети — с их помощью можно показать успехи в обучении:
3. Будьте последовательны
Сделав что-то однажды, пользователь ожидает, что и в дальнейшем это будет происходить именно так. Представьте себе, что интерфейс открытия нового файла отличался бы для всех составляющих пакета Google Docs — вряд ли бы это кому-то понравилось.
Например, reddit использует на всех страницах одинаковых подход к ссылкам, выделяя внешние ссылки болшим шрифтом без подчеркивания, а внутренние — с подчеркиванием. Разделы сайта могут быть оформлены по-разному и даже использовать другую цветовую схему, но у пользователя не возникнет сомнений, что перед ним все еще reddit:
4. Создавайте визуальную иерархию
Покажите пользователю, что самое важное на вашей странице. Размер, цвет, размещение и негативное пространство вокруг каждого элемента должны соответствовать его роли, важной или второстепенной. Правильно построенная иерархия упрощает понимание даже сложных концепций:
5. Предоставляйте фидбек и защищайте пользователя от случайных действий
Говорите пользователю, что происходит. Отправилось ли письмо? Загрузился ли файл? Поддерживается ли этот формат изображений? Убедитесь, что нельзя удалить все данные одним нажатием. Пользователю важно знать, что он не остался один на один со своими проблемами. Позаботьтесь, чтобы ему было комфортно.
6. Не показывайте все элементы управления сразу
Это отпугнет неопытного пользователя. Отличный ход — спрятать дополнительные функции, которые могут никогда не понадобиться простому смертному, на вкладке Advanced или в специальном меню:
7. Предоставляйте больше возможностей опытным пользователям
Поверьте, те, кто уже в сотый раз использует сервис, будут благодарны за возможность выполнять рутинные действия с помощью горячих клавиш. Такая функция доступна во множестве известных сервисов — от Google Docs до Github. А вот пример панели с горячими клавишами в сервисе по созданию интеллект-карт Coggle:
8. Не показывайте пользователю пустую страницу
Когда пользователь впервые заходит в новый инструмент, расскажите ему, с чего начать, покажите примеры продуктов, созданных с его помощью — одним словом, вдохновите его на работу с сервисом.
В своей книге «Don’t Make Me Think» Стив Круг утверждает: интерфейс должен быть самодостаточным и объяснять сам себя. Если чтобы понять, как пользоваться навигацией, нужна инструкция, — на лицо пример плохого UI.
9. Не усложняйте
Прежде, чем добавить еще один элемент UI, спросите себя, облегчит ли он жизнь пользователя или только заберет у него ценное время. Вот как изменился сайт American Airlines после редизайна (справа):
10. Тестируйте
Чем раньше вы начнете и чем больше тестов проведете, тем качественнее будет конечный результат. Не полагайтесь на собственные инстинкты — привлекайте обычных пользователей. Они не работали над проектом неделями и ничего не знают о том, как все устроено, поэтому их замечания будут особенно полезны. О том, как мы проводили «коридорное тестирование» мобильного приложения для поиска врача, читайте в нашем кейсе.
И последнее — когда пользователь приходит на страницу, он не читает ее, а всего лишь пробегается по ней глазами. Поэтому веб-дизайн современного интерфейса пользователя создается с учетом F и Z-паттернов чтения (обратите внимание, что они работают для языков с написанием с лева на право).
F-паттерн работает для сайтов с большим количеством текста — пользователь просматривает верхнюю часть страницы в поиске ключевых слов, потом опускается ниже и пробегается по подзаголовкам:
Поэтому на «тяжелых» сайтах важная информация размещается слева, там, где ее ожидает увидеть пользователь. Этот паттерн используют CNN и New York Times.
На страницах без больших фрагментов текста, например, на лендингах, работает Z-паттерн чтения. Вначале посетители просматривают шапку с лева на право, потом опускают взгляд вниз влево и просматривают нижнюю часть окна слева на право:
Описанные выше принципы веб-дизайна пользовательского интерфейса сводятся к следующему: UI должен решать проблемы пользователя самым простым из возможных способов.
Мы, студия stfalcon.com, разрабатываем пользовательские интерфейсы для MVP, сайтов и мобильных приложений и с удовольствием создадим UI, который будет радовать ваших пользователей.
