Тестируем интерфейс без юзеров и регистраций, но с эвристической оценкой Нильсена

Всем привет, меня зовут Александр, я UI/UX дизайнер. Моя статья будет полезна не только дизайнерам, но и разработчикам.

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

Как мы можем быстро, без лишних энергозатрат, протестировать наш интерфейс на начальных этапах, отметая порой затратные планирования пользовательских тестирований, интервью, опросников и прочего?

Для этого разберем метод «Heuristic evaluation» Якоба Нильсена — доктора физических наук, признанного специалиста в сфере эксплуатационных характеристик веб-узлов; автора термина «разработка эксплуатационных функций с предварительным анализом»; обладателя 38 патентов США на разработки, ориентированные на повышение удобства работы пользователей с Интернетом.

Эвристическая оценка

Существует несколько наборов эвристик, которые взаимодополняют друг друга, самая известная — 10 эвристик Якоба Нильсена, — метод для определения юзабилити-интерфейса, который помогает найти проблемы и «болевые» точки на ранних этапах дизайна, без привлечения реальных пользователей.

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

Это не единственный и самый точный способ собрать все пятна юзабилити. Точнее вам об этом расскажут только любимые юзеры. Качество эвристической оценки зависит от знаний того, кто ее проводит. В процесс желательно привлекать несколько оценщиков для более точного результата.

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

Отображение состояния системы

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

Ниже — пример одной из моей работ на фрилансе и скриншот экрана, на котором я разместил различные способы визуализации состояний (лоадеры, сообщения уведомления, прогресс бары, степперы).

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

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

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

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

Схожесть системы с реальным миром

Система должна говорить с пользователем на понятном ему языке, используя знакомые ему концепции, фразы и слова, а не системно-ориентированные термины. Иконки не должны путать пользователя, а перекликаться с реальным миром. В крайнем случае сопровождаться текстовыми подписями. Информация должна быть в естественной и логической форме. Стоит помнить, что терминология и элементы интерфейса, которые понятны вам и вашему коту, могут быть непонятны для пользователя.

Скриншот ниже я создал для визуализации примера:

Человек привык к физическим банковским картам, он визуально помнит их форму и отображения данных на ней. Если мы будем использовать похожие образы в интерфейсах, это создаст позитивный опыт. Подобное мы можем увидеть в огромном количестве банковских приложений.

Переключатель интерфейса с «дневного» в «светлый» режим также использует пример из физического мира и ограничивается только пиктограммами, что делают такую форму компактной и понятной.

Кнопку выключения мы можем найти на любой бытовой технике или на вашем системном блоке. Это уже укоренилось в голове людей как привычный функционал.

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

Существует также специальное направление в дизайне пользовательского опыта — UX Writer, который ответственен за то, как слова помогают человеку взаимодействовать с интерфейсом. Он переводит все термины и непонятные слова на язык пользователя, помогает достичь цели и совершать правильные действия в системе.

Единообразие и стандарты

Элементы интерфейса, имеющие одинаковый смысл, должны выглядеть одинаково внутри вашего интерфейса. Пользователь не должен думать о том, означают ли разные слова, элементы и действия одно и тоже. На ментальную модель пользователя и его ожидания также влияет предыдущий опыт, полученный в других системах (внешняя согласованность). Мы должны обращать внимание, как человек взаимодействует в повседневной жизни с вещами, которые его окружают.

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

Как одним из примеров внешней согласованности можно выделить UI Kit / Дизайн системы и гайдлайны, которые описывают поведения и логику компонентов и структуры, из которых складывается наш интерфейс. Это помогает нам избежать случаев, когда смысловое назначение элементов меняется из раза в раз. Таким образом мы атомарно раскладываем нашу систему.

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

Дизайн-системы помогают разработчикам и другим дизайнерам создать общее видение интерфейса и «быть на одной волне».

Контроль и свобода действий

Даже в идеальном интерфейсе пользователь может ошибаться с выбором функций вашего интерфейса (всё, как в реальной жизни), потому что у каждого абсолютно разный бэкграунд. Мы должны всегда давать возможность вернуться обратно (запасной выход), чтоб избежать нежелательного результата без дополнительных усилий и обращения в службу поддержку.

Интерфейс должен дать пользователю возможность отменить или повторить действие в любой момент.

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

Юзер может в любой момент удалить загруженный файл и повторить действия заново. Также можно остановить загрузку текущего. В случае проблем пользователь обращается к иконке Help, которая показывает подсказку в виде хинта. Также есть возможность в любой момент отменить, удалить и загрузить документы по новой, это также возвращение на шаг назад.

Предотвращение ошибок

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

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

На виду, а не в памяти

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

Это могут быть фильтры, хлебные крошки, степперы, сайдбары, уведомления, которые ответят на вопрос «В какой части интерфейса я нахожусь на данном моменте?», «Что происходило здесь ранее и что произойдет?».

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

Гибкость и эффективность

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

Примером могут быть шаблоны платежей как на скрине ниже. У каждого из нас есть платежки, которые проводятся регулярно (платежка за интернет, коммуналку или связь). Шаблоны помогают создавать заранее заполненные информацией формы, которые позволяет пользователям избежать повторного заполнения.

Также это могут быть системы рекомендаций. Мы заранее узнаем пользователя, чтобы создать ему персонализированную ленту и контент, предлагая релевантные запросы.

Эстетика и минимализм

Не перегружайте интерфейс пользователя редко используемой информацией и ненужными для выполнения их задач элементами. Всегда думайте о приоритетах и визуальной последовательности. Каждая дополнительная единица усложняют видимость и восприятие действительно важных функций. Каждый объект на экране конкурирует с другим объектом за видимость.

На нашем сайте я использовал базовые модульные сетки (отображаются зеленым цветом), которые разграничивают пространство и делят интерфейс на логические блоки. Самые классические сетки это на 12 и 16 колонок.

Использован также контраст и визуальная иерархия, чтобы акцентировать внимание на важных элементах. Шрифтовые гарнитуры с большим диапазоном начертаний от самых тонких Light до самых широких Heavy позволят максимально работать с типографикой.

Понимание и исправление ошибок

Данная эвристика тесно связана с пунктом предотвращения ошибок. Если мы все-таки не смогли от этого избавится, то сообщение о ней должно быть на понятном пользователю языке, указывать на проблему, и помочь ему исправить возможные последствия.

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

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

Справка и документация

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

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

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

Заключение

Стоит ли постоянно улучшать ваш продукт и для чего это нужно? Решать, конечно же, вам и бизнесу :)

Подводя итоги из основных вышеприведенных принципов: необходимо стараться постоянно улучшать продукт, анализировать его и людей, которые им пользуются (их привычки, ощущения и эмоции) и минимизировать негативный опыт, который может остаться у пользователей. И конечно же любому специалисту, будь то UI/UX дизайнер, тестировщик или разработчик, стоит смотреть глобальнее на продукт и его пользователей, а прокачка скиллов и повышение уровня мастерства будет только на пользу.

👍НравитсяПонравилось6
В избранноеВ избранном4
LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Точно не варто забувати про ці принципи, дякую!

Отличная статья.
Многое знакомо, недавно гайды читал.
У вас простым понятным языком, спасибо!

Було б добре побачити наступну статтю автора вже державною мовою.
Або хоча б англійською.
Адже після розпаду СРСР російську мову, на щастя, майже перестали вивчати в Україні.
Зараз російську мову в Україні вивчають у школах лише близько 10% громадян.
Що робить матеріали російською незручними для ознайомлення або й узагалі незрозумілими для молодших поколінь.

Було б добре побачити наступну статтю автора вже державною мовою.

але ж ви не написали жодної статті

Адже після розпаду СРСР російську мову, на щастя, майже перестали вивчати в Україні.

на щастя саме обдаровані люди не вчать мову потенційного супротивника

Упорно развивая что-то одно, вы неизежно потеряете в другом.
Какое жалкое оправдание в школах не учат, как будто школьного курса английского вам хватило овладеть им до уровня С2. Идите на курсы, ежайте на стажировку, изучайте русский, в чем проблема?
третий или четвётрый в мире по распространённости язык. По количеству контента в интернете второй, сразу после английского.

если брать для расчетов более-менее реальное население лаптестана, то российский не входит даже в 10ку
На этот же факт указывает и кол-во российского в интернете, где его аж целых 2,5% (на 10 месте, примерно на уровне с немецким)

ПС кстати, этот ваш «топ контента» высчитывается на основании топа сайтов алексы. А рейтинг алексы, в свою очередь высчитывается исходя из колличества пользователей, установивших себе плагин алексы. Так что это совершенно не показатель, а перепись пользователей алексы

Давайте продолжать эскалировать языковой вопрос. Раз по теме автора сказать нечего.
Это ж так уместно и весело. Я пошёл бы мимо, (..на щастя..) от Лободы, показывает уровень его развития, простите не сделжался.
Раз так за язык переживаете, возмите да переведите статью на удобный вам язык будет вам уважуха и респект, напрару с Лободой.

простите, но где же тут эскалация?
я просто проходил мимо и указал в очередной раз очередному «какая разница» на его враньё и манипуляцию информацией.
И не важно какой бред тут был бы написан. Было бы про 80 млн украинцев — я бы точно так же высказался

Вы паладин всия интернетов, склоню голову перед вашим потугами, целыми днями ищете манипуляции, и ярлыки развешиваете в виде «очередному какая разница», честь и хвала вашему труду.

Однобоко, как-то вы смотрите на проблему, бревна в глазу не замечаете.
Т.е. Вас фраза
"

Адже після розпаду СРСР російську мову, на щастя, майже перестали вивчати в Україні.

"

Не смущает ни разу. И сразу противоречие

Зараз російську мову в Україні вивчають у школах лише близько 10% громадян.
Що робить матеріали російською незручними для ознайомлення або й узагалі незрозумілими для молодших поколінь.

Неспособность увидеть потиворечие в причинно-следственной связи в своих высказываниях, ставит автора коментария в невыгодное положение.
А Вы молодец, манинипуляцию с моей стороны узрели!

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

Перестаньте маніпулювати.
І загалом — не варто розводити тут мовосрач.

А в человек-бот проснулся, удостоил нас своим вниманием. Очень удобно обинить в том что делаешь сам, Вот она манипуляция. в чистом виде. Разводишь здесь ты, своими провокациями.

То что ты троль это уже понятно. 10 лет тут тролишь 2300 коментариев, не надоело или на зарплате? Копипаста сплошная, эксплуатируешь тему языка, что здесь что на фб Ниодного содержательного комментария.
Брошеный разумом организм, ни на что не способный.

Подписаться на комментарии