Всем привет, меня зовут Александр, я UI/UX дизайнер. Моя статья будет полезна не только дизайнерам, но и разработчикам.
Работая в продуктовой компании, UX-дизайнеру нужно постоянно улучшать продукт, которым будет пользоваться человек. Это повторяющийся процесс, во время которого дизайнер собирает метрики, данные, анализирует, а потом тестирует свои гипотезы для будущих улучшений продукта.
Как мы можем быстро, без лишних энергозатрат, протестировать наш интерфейс на начальных этапах, отметая порой затратные планирования пользовательских тестирований, интервью, опросников и прочего?
Для этого разберем метод «Heuristic evaluation» Якоба Нильсена — доктора физических наук, признанного специалиста в сфере эксплуатационных характеристик веб-узлов; автора термина «разработка эксплуатационных функций с предварительным анализом»; обладателя 38 патентов США на разработки, ориентированные на повышение удобства работы пользователей с Интернетом.
Это не совсем формальный способ, где мы можем воссоздать условия, как человек ведет себя с интерфейсом, основываясь на проверенных временем принципах юзабилити и человеко-компьютерного взаимодействия. После всех тестов останется только собрать обратную связь и устранить предполагаемые проблемы до пользовательской оценки.
Это не единственный и самый точный способ собрать все пятна юзабилити. Точнее вам об этом расскажут только любимые юзеры. Качество эвристической оценки зависит от знаний того, кто ее проводит. В процесс желательно привлекать несколько оценщиков для более точного результата.
Давайте разберем на примерах, как некоторые из них помогли улучшить юзабилити для нашего сайта.
Ниже — пример одной из моей работ на фрилансе и скриншот экрана, на котором я разместил различные способы визуализации состояний (лоадеры, сообщения уведомления, прогресс бары, степперы).
Детализируем. Если мы используем лоадер, то пользователю должно быть понятно, что его запрос или действие обрабатывается, соответственно индикатор прогресс-бара должен меняться и визуально показывать состояние на текущий момент. Каких-либо ограничений в реализации со стороны UI нет, необходимо только сохранять смысл.
Всплывающее уведомление о смене пароля должно содержать краткую и понятную для юзера информацию о происходящем, также можно добавить CTA для дальнейшего действия или перехода.
Шкала о заполненном пространстве будет визуально удобнее для пользователя, если по цветам разграничить категории и уведомлять, когда места станет недостаточно.
При совершении покупки для детализации всех этапов используем степпер и подсвечиваем юзеру все этапы прохождения, чтоб управлять его ожиданиями. Так мы улучшаем восприятие и затраченное время.
Скриншот ниже я создал для визуализации примера:
Человек привык к физическим банковским картам, он визуально помнит их форму и отображения данных на ней. Если мы будем использовать похожие образы в интерфейсах, это создаст позитивный опыт. Подобное мы можем увидеть в огромном количестве банковских приложений.
Переключатель интерфейса с «дневного» в «светлый» режим также использует пример из физического мира и ограничивается только пиктограммами, что делают такую форму компактной и понятной.
Кнопку выключения мы можем найти на любой бытовой технике или на вашем системном блоке. Это уже укоренилось в голове людей как привычный функционал.
Большая часть функционала на нашем сайте реализована как каталог, где каждый айтем представляет собой карточку, которую мы можем быстро выделить среди остального контента. Также можно просматривать и сортировать.
Существует также специальное направление в дизайне пользовательского опыта — UX Writer, который ответственен за то, как слова помогают человеку взаимодействовать с интерфейсом. Он переводит все термины и непонятные слова на язык пользователя, помогает достичь цели и совершать правильные действия в системе.
Набор определенных действий и повторяющихся решений, который пользователь привык совершать, называется паттерн. Но помните, иногда проблемы требуют уникального подхода к решению.
Как одним из примеров внешней согласованности можно выделить UI Kit / Дизайн системы и гайдлайны, которые описывают поведения и логику компонентов и структуры, из которых складывается наш интерфейс. Это помогает нам избежать случаев, когда смысловое назначение элементов меняется из раза в раз. Таким образом мы атомарно раскладываем нашу систему.
При проектировании подобных дизайн-систем мы в первую очередь сосредотачиваем свое внимание на фундаментальных вещах — цвет, типографика, форма и ритм (spacing). На их основе них мы создаем систему компонентов, у каждого из которых есть свой смысл и назначение. Некоторые из них переиспользуются постоянно, а некоторые появляются в специальных случаях. Подобный подход помогает нам избежать не органичности нашего интерфейса.
Дизайн-системы помогают разработчикам и другим дизайнерам создать общее видение интерфейса и «быть на одной волне».
Интерфейс должен дать пользователю возможность отменить или повторить действие в любой момент.
Разберем на примере: попап загрузки документов, куда пользователь может прикрепить необходимый файл двумя способами — drag & drop или с помощью обычной загрузки.
Юзер может в любой момент удалить загруженный файл и повторить действия заново. Также можно остановить загрузку текущего. В случае проблем пользователь обращается к иконке Help, которая показывает подсказку в виде хинта. Также есть возможность в любой момент отменить, удалить и загрузить документы по новой, это также возвращение на шаг назад.
На примере ниже, мы помогаем пользователю не допустить ошибку с помощью специального плейсхолдера для номера телефона, который отображается после нажатия на поле. Это позволяет нам указать номер телефона в правильном формате и удобном отображении.
Это могут быть фильтры, хлебные крошки, степперы, сайдбары, уведомления, которые ответят на вопрос «В какой части интерфейса я нахожусь на данном моменте?», «Что происходило здесь ранее и что произойдет?».
На примере ниже — компоненты, которые как раз помогают не потеряться во время работы с интерфейсом. Некоторые из них доступны в определенных фичах — степпер, а некоторые всегда — хлебные крошки.
Примером могут быть шаблоны платежей как на скрине ниже. У каждого из нас есть платежки, которые проводятся регулярно (платежка за интернет, коммуналку или связь). Шаблоны помогают создавать заранее заполненные информацией формы, которые позволяет пользователям избежать повторного заполнения.
Также это могут быть системы рекомендаций. Мы заранее узнаем пользователя, чтобы создать ему персонализированную ленту и контент, предлагая релевантные запросы.
На нашем сайте я использовал базовые модульные сетки (отображаются зеленым цветом), которые разграничивают пространство и делят интерфейс на логические блоки. Самые классические сетки это на 12 и 16 колонок.
Использован также контраст и визуальная иерархия, чтобы акцентировать внимание на важных элементах. Шрифтовые гарнитуры с большим диапазоном начертаний от самых тонких Light до самых широких Heavy позволят максимально работать с типографикой.
На примере нашего сайта мы можем увидеть подсказки под формой, которые объясняют, почему не проходит валидация наших полей. Описание проблемы должно быть понятное, без использования кодировок для ошибок или технической терминологии.
На скрине наглядно показано, что в обязательных полях стоит валидация, и если юзер ввел неправильное количество символов либо не валидный имейл, то внизу под каждым полем ему наглядно показывают ошибки, которые нужно исправить.
На скрине ниже я привел пример базового функционал FAQ, где пользователь может воспользоваться как полем поиска для поиска нужного ответа, так и с помощью вкладок, в которых все вопросы поделены на популярные категории. Все вкладки при этом разбиты на группы, для того чтобы юзер мог сразу наглядно понять, какая из опций ему необходима, а не искать в огромном перечне свой вопрос.
На практике это можно реализовать по части UI совершенно по-разному, главное, чтоб весь основной функционал был всегда в зоне доступности.
Подводя итоги из основных вышеприведенных принципов: необходимо стараться постоянно улучшать продукт, анализировать его и людей, которые им пользуются (их привычки, ощущения и эмоции) и минимизировать негативный опыт, который может остаться у пользователей. И конечно же любому специалисту, будь то UI/UX дизайнер, тестировщик или разработчик, стоит смотреть глобальнее на продукт и его пользователей, а прокачка скиллов и повышение уровня мастерства будет только на пользу.
dou.ua
Работая в продуктовой компании, UX-дизайнеру нужно постоянно улучшать продукт, которым будет пользоваться человек. Это повторяющийся процесс, во время которого дизайнер собирает метрики, данные, анализирует, а потом тестирует свои гипотезы для будущих улучшений продукта.
Как мы можем быстро, без лишних энергозатрат, протестировать наш интерфейс на начальных этапах, отметая порой затратные планирования пользовательских тестирований, интервью, опросников и прочего?
Для этого разберем метод «Heuristic evaluation» Якоба Нильсена — доктора физических наук, признанного специалиста в сфере эксплуатационных характеристик веб-узлов; автора термина «разработка эксплуатационных функций с предварительным анализом»; обладателя 38 патентов США на разработки, ориентированные на повышение удобства работы пользователей с Интернетом.
Эвристическая оценка
Существует несколько наборов эвристик, которые взаимодополняют друг друга, самая известная — 10 эвристик Якоба Нильсена, — метод для определения юзабилити-интерфейса, который помогает найти проблемы и «болевые» точки на ранних этапах дизайна, без привлечения реальных пользователей.Это не совсем формальный способ, где мы можем воссоздать условия, как человек ведет себя с интерфейсом, основываясь на проверенных временем принципах юзабилити и человеко-компьютерного взаимодействия. После всех тестов останется только собрать обратную связь и устранить предполагаемые проблемы до пользовательской оценки.
Это не единственный и самый точный способ собрать все пятна юзабилити. Точнее вам об этом расскажут только любимые юзеры. Качество эвристической оценки зависит от знаний того, кто ее проводит. В процесс желательно привлекать несколько оценщиков для более точного результата.
Давайте разберем на примерах, как некоторые из них помогли улучшить юзабилити для нашего сайта.
Отображение состояния системы
Интерфейс должен всегда сообщать юзеру о том, что с ним происходит (статус) с помощью своевременной обратной связи. Никакие действия с последствиями для нашего юзера не предпринимаются без его уведомления. Таким образом мы можем управлять его ожиданиями.Ниже — пример одной из моей работ на фрилансе и скриншот экрана, на котором я разместил различные способы визуализации состояний (лоадеры, сообщения уведомления, прогресс бары, степперы).
Детализируем. Если мы используем лоадер, то пользователю должно быть понятно, что его запрос или действие обрабатывается, соответственно индикатор прогресс-бара должен меняться и визуально показывать состояние на текущий момент. Каких-либо ограничений в реализации со стороны UI нет, необходимо только сохранять смысл.
Всплывающее уведомление о смене пароля должно содержать краткую и понятную для юзера информацию о происходящем, также можно добавить CTA для дальнейшего действия или перехода.
Шкала о заполненном пространстве будет визуально удобнее для пользователя, если по цветам разграничить категории и уведомлять, когда места станет недостаточно.
При совершении покупки для детализации всех этапов используем степпер и подсвечиваем юзеру все этапы прохождения, чтоб управлять его ожиданиями. Так мы улучшаем восприятие и затраченное время.
Схожесть системы с реальным миром
Система должна говорить с пользователем на понятном ему языке, используя знакомые ему концепции, фразы и слова, а не системно-ориентированные термины. Иконки не должны путать пользователя, а перекликаться с реальным миром. В крайнем случае сопровождаться текстовыми подписями. Информация должна быть в естественной и логической форме. Стоит помнить, что терминология и элементы интерфейса, которые понятны вам и вашему коту, могут быть непонятны для пользователя.Скриншот ниже я создал для визуализации примера:
Человек привык к физическим банковским картам, он визуально помнит их форму и отображения данных на ней. Если мы будем использовать похожие образы в интерфейсах, это создаст позитивный опыт. Подобное мы можем увидеть в огромном количестве банковских приложений.
Переключатель интерфейса с «дневного» в «светлый» режим также использует пример из физического мира и ограничивается только пиктограммами, что делают такую форму компактной и понятной.
Кнопку выключения мы можем найти на любой бытовой технике или на вашем системном блоке. Это уже укоренилось в голове людей как привычный функционал.
Большая часть функционала на нашем сайте реализована как каталог, где каждый айтем представляет собой карточку, которую мы можем быстро выделить среди остального контента. Также можно просматривать и сортировать.
Существует также специальное направление в дизайне пользовательского опыта — UX Writer, который ответственен за то, как слова помогают человеку взаимодействовать с интерфейсом. Он переводит все термины и непонятные слова на язык пользователя, помогает достичь цели и совершать правильные действия в системе.
Единообразие и стандарты
Элементы интерфейса, имеющие одинаковый смысл, должны выглядеть одинаково внутри вашего интерфейса. Пользователь не должен думать о том, означают ли разные слова, элементы и действия одно и тоже. На ментальную модель пользователя и его ожидания также влияет предыдущий опыт, полученный в других системах (внешняя согласованность). Мы должны обращать внимание, как человек взаимодействует в повседневной жизни с вещами, которые его окружают.Набор определенных действий и повторяющихся решений, который пользователь привык совершать, называется паттерн. Но помните, иногда проблемы требуют уникального подхода к решению.
Как одним из примеров внешней согласованности можно выделить UI Kit / Дизайн системы и гайдлайны, которые описывают поведения и логику компонентов и структуры, из которых складывается наш интерфейс. Это помогает нам избежать случаев, когда смысловое назначение элементов меняется из раза в раз. Таким образом мы атомарно раскладываем нашу систему.
При проектировании подобных дизайн-систем мы в первую очередь сосредотачиваем свое внимание на фундаментальных вещах — цвет, типографика, форма и ритм (spacing). На их основе них мы создаем систему компонентов, у каждого из которых есть свой смысл и назначение. Некоторые из них переиспользуются постоянно, а некоторые появляются в специальных случаях. Подобный подход помогает нам избежать не органичности нашего интерфейса.
Дизайн-системы помогают разработчикам и другим дизайнерам создать общее видение интерфейса и «быть на одной волне».
Контроль и свобода действий
Даже в идеальном интерфейсе пользователь может ошибаться с выбором функций вашего интерфейса (всё, как в реальной жизни), потому что у каждого абсолютно разный бэкграунд. Мы должны всегда давать возможность вернуться обратно (запасной выход), чтоб избежать нежелательного результата без дополнительных усилий и обращения в службу поддержку.Интерфейс должен дать пользователю возможность отменить или повторить действие в любой момент.
Разберем на примере: попап загрузки документов, куда пользователь может прикрепить необходимый файл двумя способами — drag & drop или с помощью обычной загрузки.
Юзер может в любой момент удалить загруженный файл и повторить действия заново. Также можно остановить загрузку текущего. В случае проблем пользователь обращается к иконке Help, которая показывает подсказку в виде хинта. Также есть возможность в любой момент отменить, удалить и загрузить документы по новой, это также возвращение на шаг назад.
Предотвращение ошибок
Человек склонен совершать ошибки. Необходимо помочь пользователю избежать возможных проблем, стараясь заранее прогнозировать такие сценарии (полезные ограничения) и предотвращать их, используя подсказки (например, плейсхолдеры или хинты в формах и полях ввода). В случаях, когда мы не можем устранить условия для пользовательской ошибки, мы можем дать ему инструкцию о действиях, как ее избежать. Это предупреждает пользователя, что может пойти не так и создает лучший опыт.На примере ниже, мы помогаем пользователю не допустить ошибку с помощью специального плейсхолдера для номера телефона, который отображается после нажатия на поле. Это позволяет нам указать номер телефона в правильном формате и удобном отображении.
На виду, а не в памяти
Минимизируйте нагрузку на память пользователя, не заставляйте держать в его голове большое количество элементов, сделав видимыми объекты, действия и параметры. Пользователь не должен запоминать информацию о том, что было в одной части системы после перехода в другую, такая информация должна быть всегда доступна.Это могут быть фильтры, хлебные крошки, степперы, сайдбары, уведомления, которые ответят на вопрос «В какой части интерфейса я нахожусь на данном моменте?», «Что происходило здесь ранее и что произойдет?».
На примере ниже — компоненты, которые как раз помогают не потеряться во время работы с интерфейсом. Некоторые из них доступны в определенных фичах — степпер, а некоторые всегда — хлебные крошки.
Гибкость и эффективность
Интерфейс сайта или приложения должен быть гибким, а значит удовлетворять потребности разных групп пользователей — accessibility. Используйте шорт флоу, чтобы опытные пользователи, которые уже знакомы с вашей системой, могли быстро обращаться к часто используемым функциям и выполнять привычные им действия. Разрешайте пользователям настраивать и персонализировать интерфейс и частые действия.Примером могут быть шаблоны платежей как на скрине ниже. У каждого из нас есть платежки, которые проводятся регулярно (платежка за интернет, коммуналку или связь). Шаблоны помогают создавать заранее заполненные информацией формы, которые позволяет пользователям избежать повторного заполнения.
Также это могут быть системы рекомендаций. Мы заранее узнаем пользователя, чтобы создать ему персонализированную ленту и контент, предлагая релевантные запросы.
Эстетика и минимализм
Не перегружайте интерфейс пользователя редко используемой информацией и ненужными для выполнения их задач элементами. Всегда думайте о приоритетах и визуальной последовательности. Каждая дополнительная единица усложняют видимость и восприятие действительно важных функций. Каждый объект на экране конкурирует с другим объектом за видимость.На нашем сайте я использовал базовые модульные сетки (отображаются зеленым цветом), которые разграничивают пространство и делят интерфейс на логические блоки. Самые классические сетки это на 12 и 16 колонок.
Использован также контраст и визуальная иерархия, чтобы акцентировать внимание на важных элементах. Шрифтовые гарнитуры с большим диапазоном начертаний от самых тонких Light до самых широких Heavy позволят максимально работать с типографикой.
Понимание и исправление ошибок
Данная эвристика тесно связана с пунктом предотвращения ошибок. Если мы все-таки не смогли от этого избавится, то сообщение о ней должно быть на понятном пользователю языке, указывать на проблему, и помочь ему исправить возможные последствия.На примере нашего сайта мы можем увидеть подсказки под формой, которые объясняют, почему не проходит валидация наших полей. Описание проблемы должно быть понятное, без использования кодировок для ошибок или технической терминологии.
На скрине наглядно показано, что в обязательных полях стоит валидация, и если юзер ввел неправильное количество символов либо не валидный имейл, то внизу под каждым полем ему наглядно показывают ошибки, которые нужно исправить.
Справка и документация
Даже если система настолько понятна, что юзеру никогда не понадобится помощь (в лучшем случае), все равно может потребоваться документация или инструкция. Она должна быть лаконичной, давать возможность быстро найти нужную информацию и ориентироваться на нужды пользователя, пошагово описывая действия, которые необходимо выполнить.На скрине ниже я привел пример базового функционал FAQ, где пользователь может воспользоваться как полем поиска для поиска нужного ответа, так и с помощью вкладок, в которых все вопросы поделены на популярные категории. Все вкладки при этом разбиты на группы, для того чтобы юзер мог сразу наглядно понять, какая из опций ему необходима, а не искать в огромном перечне свой вопрос.
На практике это можно реализовать по части UI совершенно по-разному, главное, чтоб весь основной функционал был всегда в зоне доступности.
Заключение
Стоит ли постоянно улучшать ваш продукт и для чего это нужно? Решать, конечно же, вам и бизнесуПодводя итоги из основных вышеприведенных принципов: необходимо стараться постоянно улучшать продукт, анализировать его и людей, которые им пользуются (их привычки, ощущения и эмоции) и минимизировать негативный опыт, который может остаться у пользователей. И конечно же любому специалисту, будь то UI/UX дизайнер, тестировщик или разработчик, стоит смотреть глобальнее на продукт и его пользователей, а прокачка скиллов и повышение уровня мастерства будет только на пользу.
Тестируем интерфейс без юзеров и регистраций, но с эвристической оценкой Нильсена
Как быстро и без лишних энергозатрат протестировать интерфейс на начальных этапах и отмести затратные планирования пользовательских тестирований, интервью, опросников и прочего, рассказывает Александр Красник, UI/UX Designer в Clovertech. Статья будет пол
dou.ua