25 лет назад Якоб Нильсен описал 10 основных принципов проектирования взаимодействия. Эти принципы были разработаны на основе многолетнего опыта в области юзабилити-инженерии и стали правилами для взаимодействия человека и компьютера.

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

Видимость состояния системы

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

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

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

Совпадение между системой и реальным миром

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

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

Даже в современном минималистичном мире десятки дизайнерских подсказок сохранились с той эпохи: приложения, такие как компас или калькулятор; или компоненты дизайна: папки, переключатели, иконки блокировки. Кроме того, язык и концепции из реального мира помогают пользователям легко понять виртуальную систему. Вот почему приложение по хранению карточек называется "Кошелек", при сохранении любимых сайтов мы используем "Закладки", во время удаления старых файлов - "Мусорную корзину", а для покупок в Интернете - "Корзину".

Контроль и свобода пользователя

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

Соответствующий аварийный выход может быть чем-то простым, как стрелка назад (например, в браузере), корзина для мусора, которая защищает нас от случайного удаления, или кнопка "отмена", позволяющая пользователю вернуть последнее действие. Все эти примеры демонстрируют системы, которые не подводят пользователей, когда они совершают ошибку, а наоборот, позволяют пользователю исправить ее.

Согласованность и стандарты

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

"Не забывайте, что люди проводят 90% своего времени, взаимодействуя с другими приложениями".

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

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

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

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

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

Распознать, а не вспомнить

Существует два типа восстановления памяти: распознавание и вспоминание [5]. Распознавание происходит, когда вы легко узнаете человека или предмет, который вам знаком. Это очень поверхностная форма извлечения информации из памяти, не требующая никакой работы. Вспоминание происходит, когда вам нужно найти в памяти редко используемую информацию (имена, годы, детали и т.д.). Чтобы вспомнить информацию, людям приходится активировать большее количество блоков памяти. Поэтому процесс вспоминания является достаточно глубоким и требует приложения больших усилий. (Именно поэтому на вопросы с несколькими вариантами ответов в тестах гораздо легче ответить, чем в заданиях с открытым выбором).

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

Гибкость и эффективность использования

Любой пользователь уникален; у каждого из них свои потребности и навыки. Точно так же каждая задача уникальна и требует различных контроллеров.

Разгрузите экран и сделайте приложение более удобным для навигации. В приложении всегда должны отображаться только необходимые элементы пользовательского интерфейса и команды. Посмотрите на такие приложения, как Apple Pages или G-Drive; при написании документа вы видите всего несколько контроллеров, связанных с редактированием текста. Но как только возникает необходимость добавить дополнительную диаграмму, появляется целая палитра функций, специально созданных для того, чтобы помочь вам выполнить эту задачу.

Не забывайте о профессионалах и продвинутых пользователях как таковых! У нового пользователя, который вступает на кривую обучения [6], всегда будут другие потребности, по сравнению с профессионалом, который использует программу по несколько часов каждый день. Опытные пользователи могут оценить расширенные опции, ярлыки или даже расширяемость и настраиваемость интерфейса приложения. Им необходимо экономить свое время и выполнять задачи быстро, но при этом точно и надежно. Хороший пользовательский интерфейс должен предлагать соответствующие функциональные возможности как неопытным, так и опытным пользователям.

Эстетичный и минималистичный дизайн

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

"Совершенство достигается не тогда, когда больше нечего добавить, а когда нечего отнять". - Антуан де Сент-Экзюпери

Чтобы сделать основной контент более заметным, можно использовать только пробелы. Это помогает повысить его удобочитаемость, подчеркивает призыв к выполнению действий, а также создает сбалансированный и приятный внешний вид [8]. Минималистичный дизайн использует только необходимые цвета для поддержки визуальной иерархии. Подумайте о назначении и значении каждого цвета. Используйте его согласованно.

Помогите пользователям распознать, диагностировать и исправить ошибки

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

Каждое сообщение об ошибке должно быть настолько ясным и точным, насколько это возможно. Никто не хочет читать расплывчатые сообщения типа "что-то пошло не так". Изложите произошедшее на удобочитаемом для людей языке. Сообщения типа "Ошибка класса 372" столь же абсурдны. Дайте конструктивный совет о том, что делать дальше. Предложите решение или направьте пользователя к сотруднику службы поддержки, который поможет справиться с ситуацией. Завершающее правило хороших сообщений об ошибках - вежливость. Никогда не обвиняйте пользователя и не намекайте, что он глуп.

Помощь и документация

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

Документация должна быть хорошо структурирована, написана человеческим языком и минималистична. Иногда пользователям не нужно много документации; достаточно простого коучмарка, показывающего, как работает новая функция, или краткого руководства по внедрению, объясняющего основы. Такие приложения, как Trello, Slack и Duolingo, отлично справляются со своей работой по адаптации пользователей.

Ресурсы

1. https://www.nngroup.com/articles/ten-usability-heuristics/

2. https://www.interaction-design.org/literature/article/heuristic-evaluation-how-to-conduct-a-heuristic-evaluation

3. http://www.gdrc.org/decision/info-decision.html

4. https://homepages.cwi.nl/~steven/sigchi/bulletin/1997.4/karn.html

Перевод статьи подготовлен специально для студентов курса "QA Engineer. Basic". В преддверии старта курса приглашаем всех желающих на бесплатный демоурок по теме: "Как правильно составлять баг репорт".

• Записаться на демоурок