Простые принципы проектирования в UX

В статье мы поговорим об эвристике в UX-дизайне.
Начнем с того, что такое эвристика:
Эвристика — совокупность исследовательских методов, способствующих открытию ранее неизвестного.
Разумное проектирование обеспечивает высококлассный пользовательский опыт.
Важно понимать как люди воспринимают информацию, как они ее запоминают, как используют и что помнят.
В UX-дизайне мы более всего заинтересованы в том, как именно нужно проектировать, используя знания о людях.
И, как правило, ответ, на интересующий нас вопрос приходит в форме основных методических рекомендаций, которые являются своего рода правилами (советами) о том, как разработать конкретные типы систем, чтобы обеспечить отличный UX. Существует множество различных форм, в которых будут действовать эти самые методические рекомендации.
Есть 10 методических рекомендаций от Якоба Нильсена (специалист по юзабилити), они были выведены из оценок и тестов сотни сайтов и имеют следующие характеристики:
- “Эвристика” означает “эмпирическое правило”, то есть правило, выведенное на основе практики. Значит можно их использовать в более широком смысле и в соответствии к той платформе, которая разрабатывается
- Основа исследований — систематический обзор удобства пользования ресурсами.
- Предназначен для небольших, полных и пригодных для использования наборов
- Можно изучить за несколько часов, но вы лучше и быстрее разберетесь на практике
- Эти рекомендации хорошо подкрепляются теориями восприятия и познания, о которых мы говорили ранее.
А теперь приведем эти методологические рекомендации (прочтя их, не все сразу покажется очевидным, но далее мы рассмотрим каждую из рекомендаций подробнее):
- Отображение (видимость) состояния системы
- Соответствие между системой и реальным миром
- Пользовательский контроль и свобода
- Согласованность и стандартизированность
- Предотвращение ошибок
- Распознавание проблемы, а не отмена действий
- Гибкость и эффективность использования
- Эстетический и минималистический дизайн
- Помощь пользователям распознать, диагностировать и восстановить ошибки
- Помощь и документация
А теперь предлагаю рассмотреть каждую из десяти эвристик:
- Видимость состояния системы — ресурс всегда должен информировать пользователя о том, что происходит с системой через обратную связь.
Ну, и узнав это, первый вопрос, который приходит в голову — почему это важно?
Есть несколько ответов:
- для того, чтобы пользователь мог понимать, какие действия сейчас доступны
- для того, чтобы знать, как система реагирует на те или иные действия
Эта эвристика проявляется несколькими разными способами и мы пройдемся по каждой из них:
- feedback (обратная связь)
Пример:

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

Еще вариант обратной связи — показать пользователю, какие функции сейчас активны, а какие нет. Как показано на картинке — когда текст выбран, тогда активируюется панель редактирования.
- Общая доступность

Мы часто встречаемся с такими вариантами ожидания, которые дают нам понять, что никакие действия сейчас не примутся, сейчас обрабатывается информация.
2. Соответствие между системой и реальным миром
Это означает, что система должна говорить на языке пользователя, вместо ориентированных на систему терминов. Плюс ко всему, необходимо предоставлять информацию в естественном и логичном порядке.
Почему это важно?
- Во-первых, он позволяет вам использовать “схему” в памяти пользователя, о которой мы говорили в предыдущей статье (сетевая структура, связи и ассоциации в голове пользователя)
- Знакомые и близкие к пониманию пользователя знаки и обозначения
- Уменьшает сложность формирования ассоциативных связей у пользователя, по тому, что мы используем уже существующие
И опять же есть некоторое количество разных путей реализовать эту рекомендацию.
- Язык

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

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

Посмотрев на эти иконки сразу можно понять что будет при нажатии на них, так при нажатии на тележку пользователь обычно может:
- Добавить товары
- Удалить товары
- Оформить заказ
- Отказаться от заказа
При нажатии на документ:
- Удалить файл
- Копировать файл
- Отправить или опубликовать файл
3. Пользовательский контроль и свобода
Люди часто нажимают не на те иконки и попадают в ненужные им системные функции. Пользователи должны иметь возможность выйти из неверно выбранного состояния, в которое они попали по ошибке через четко обозначенный “аварийный выход” или что-то подобное.
Почему это важно?
- Ошибки неизбежны. Независимо от того, насколько хорошо вы проработали свою систему, пользователи все равно будут ошибаться в системе. Дайте им возможность исправить ошибки
- Необходимо позволять пользователям переформулировать свои цели или отказаться от чего-то, что они заказали чтобы создать новую цель
- Мы знаем, что пользователи используют метод проб и ошибок для изучения новой системы. Поэтому иногда они могут просто клацать функции для того, чтобы понять, что они делают
Рассмотрим несколько примеров:
- Аварийная кнопка выхода

Если пользователь приступил к действию и понял что это не то, что ему нужно или это займет слишком много времени, мы должны предоставить возможность выйти из этого действия.
4. Согласованность и стандартизированность
Пользователи не должны думать одинаковые ли это слова/функции или нет. Нужно следовать стандартам платформы.
Почему это важно?
- Позволяет использовать “схемы” (логические и ассоциативные связи) пользователей
- Стандартизированность позволяет легче пользователям понять, как работает система, перенося свой прошлый опыт на новую платформу
Давайте рассмотрим два разных товара на сайте Amazon:

Мы видим стандартизированное преподнесение товара: изображение товара слева, можем прокручивать их, приближать, цена, описание и многое другое.
5. Предотвращение ошибок
Лучше, чем сообщение об ошибке, — это тщательно проработанный дизайн, который предотвращает возникновение проблемы в первую очередь. Либо устраните условия, которые приводят к ошибкам и предоставьте пользователям возможность подтвердить действие до того, как они его совершают.
Почему это важно?
- Ошибки распространены и люди будут ошибаться. И мы можем их предотвратить
- Люди не перестанут делать ошибки только потому, что вы предоставили им прежде информацию на экране, не все ее будут читать
- Пользователи делают ошибки тогда, когда печатают, кликают и прочее
Итак, какие есть методы для предотвращения ошибок при проектировании пользовательских интерфейсов? Например, мы можем дать некоторые ограничения.
Вспомните, при введении нового пароля в большинстве случаев, если пароль короткий или не имеет необходимый набор символов — система его не примет и не задаст. Или когда вы вводите дату рождения или почту. При неверном формате система скажет об этом и попросит ввести корректные данные.

6. Распознавание и вспоминание объекта
Минимизировать нагрузку на память пользователя, создавая соответствующие объекты, действия и опции. Пользователь не хочет запоминать и потом вспоминать информацию от одной страницы к другой. Инструкции по использованию системы должны быть видны или легко извлекаться, когда это необходимо.
Почему это важно?
- Знакомый стимул извлекает информацию из долговременной памяти. По этому, если пользователь узнает что-то из показанного на экране, это проще для восприятия
Давайте рассмотрим пример, где распознавание используется при построении UX:
- Прямая манипуляция
Все чаще сталкиваемся с ситуацией, когда пользователям приходится полагаться на отзыв. Пример с пользовательским интерфейсом речи — Apple Siri.
Можно интуитивно понять какие команды можно давать Сири.

Если я буду ждать некоторое время и ничего не сделаю, то Siri вернется с предложениями того, что можно спросить, таким образом давая мне подсказки о том, что я могу спрашивать. Но, в конечном итоге, когда я вернусь к ней в следующий раз, мне придется вспомнить как взаимодействовать.
Как итог — пользователю предпочтительно распознавать интуитивно, а не вспоминать целенаправленно информацию.
7. Гибкость и эффективность использования
Акселераторы — невидимые для новичков системы, могут ускорять взаимодействие для пользователя-эксперта. Так что система может обслужить как опытных, так и не опытных гостей. Позвольте пользователям настраивать частые действия там, где это возможно.
Почему это важно?
- Для продвинутых пользователей намного лучше ускорять процесс достижения цели и потому придуманы ускорители действий — горячие сочетания клавиш. Но нельзя заставлять ими пользоваться

Справа от названия возможных функций в программе Photoshop представлены горячие клавиши. И пользователи, которые уже некоторое время пользуются программой захотят ускорить процесс, не открывая меню и ища нужную функцию, а простым нажатием клавиш.
Также ускорение процесса взаимодействия обеспечивают разнообразные закладки, которые могут быстро предоставить необходимую информацию.
8. Эстетический и минималистический дизайн
Диалог системы с пользователем не должен содержать информацию, которая не имеет значения или редко требуется. Каждая новая единица информации на сайте конкурирует с уже существующими и уменьшает их бощую видимость.
Почему это важно?
- Чем больше материала на экране, тем больше вероятность, что пользователю будет сложнее найти то, что интересно. Визуальный беспорядок затрудняет поиск и фокусировку на желаемых действиях и информации
- Хорошее использование цвета, форм, движений и принципы Гештальта помогут направить взгляд на нужную информацию.
- Чем больше можно увидеть, тем меньше будут видеть
Исходя из этих правил, первое, что нужно сделать — минимизировать беспорядок на странице.

На главной странице Google очень мало элементов, которые могут отвлечь пользователя от основной задачи.
9. Помощь пользователям распознать, диагностировать и восстановить ошибки
Сообщения об ошибках должны быть выражены простым языком, без кодов, программирования, точно указывать на проблему и предлагать конструктивное решение.
Почему это важно?
- Давать отчет об ошибке для упрощения восстановления
- Обратная связь
- Говорить на языке пользователя
- Предвидеть и катализировать ошибки
Важная часть этой эвристики состоит в том, чтобы убедиться, что любые сообщения об ошибках, которые вы показываете пользователю, имеют для него смысл.
Вот пример ошибки 404 — несуществующей страницы.

Этот отчет об ошибках предоставляет полезную информацию о том, что произошло и разъясняет вам, что он не может найти страницу. Также предоставляет полезные ссылки, на которые вы можете перейти.
10. Помощь и документация
Несмотря на то, что лучше использовать систему без какой-либо документации, иногда может пригодиться предоставление помощи. Любая такая информация должна быть легкой в поиске, ориентированной на задачу пользователя, перечислять конкретные шаги, которые необходимо выполнить, и не быть слишком большой.
Почему это важно?
- В некоторых ситуациях ваш пользовательский интерфейс (UI) не всем может быть понятен, как вы надеялись
Документация разных сервисов имеет разный вид, но всегда должна быть неизменно простой и конкретной.
Таким образом, мы рассмотрели 10 методологических рекомендаций, которые важны при создании качественного UX.
Общей формулы успеха нет, везде придерживайтесь здравого смысла.