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

В статье мы поговорим об эвристике в UX-дизайне.

Начнем с того, что такое эвристика:

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

Разумное проектирование обеспечивает высококлассный пользовательский опыт.

Важно понимать как люди воспринимают информацию, как они ее запоминают, как используют и что помнят.

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

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

Есть 10 методических рекомендаций от Якоба Нильсена (специалист по юзабилити), они были выведены из оценок и тестов сотни сайтов и имеют следующие характеристики:

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

А теперь приведем эти методологические рекомендации (прочтя их, не все сразу покажется очевидным, но далее мы рассмотрим каждую из рекомендаций подробнее):

  1. Отображение (видимость) состояния системы
  2. Соответствие между системой и реальным миром
  3. Пользовательский контроль и свобода
  4. Согласованность и стандартизированность
  5. Предотвращение ошибок
  6. Распознавание проблемы, а не отмена действий
  7. Гибкость и эффективность использования
  8. Эстетический и минималистический дизайн
  9. Помощь пользователям распознать, диагностировать и восстановить ошибки
  10. Помощь и документация

А теперь предлагаю рассмотреть каждую из десяти эвристик:

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

Ну, и узнав это, первый вопрос, который приходит в голову — почему это важно?

Есть несколько ответов:

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

Эта эвристика проявляется несколькими разными способами и мы пройдемся по каждой из них:

  • feedback (обратная связь)

Пример:

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

  • Доступные действия

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

  • Общая доступность

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

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

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

Почему это важно?

  • Во-первых, он позволяет вам использовать “схему” в памяти пользователя, о которой мы говорили в предыдущей статье (сетевая структура, связи и ассоциации в голове пользователя)
  • Знакомые и близкие к пониманию пользователя знаки и обозначения
  • Уменьшает сложность формирования ассоциативных связей у пользователя, по тому, что мы используем уже существующие

И опять же есть некоторое количество разных путей реализовать эту рекомендацию.

  • Язык

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

  • Порядок операций

Давайте представим как мы создаем документ в реальном мире:

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

Аналогичный порядок операций для создания цифровых документов.

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

  • Метафоры

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

Вот некоторые примеры:

Посмотрев на эти иконки сразу можно понять что будет при нажатии на них, так при нажатии на тележку пользователь обычно может:

  • Добавить товары
  • Удалить товары
  • Оформить заказ
  • Отказаться от заказа

При нажатии на документ:

  • Удалить файл
  • Копировать файл
  • Отправить или опубликовать файл

3. Пользовательский контроль и свобода

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

Почему это важно?

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

Рассмотрим несколько примеров:

  • Аварийная кнопка выхода

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

4. Согласованность и стандартизированность

Пользователи не должны думать одинаковые ли это слова/функции или нет. Нужно следовать стандартам платформы.

Почему это важно?

  • Позволяет использовать “схемы” (логические и ассоциативные связи) пользователей
  • Стандартизированность позволяет легче пользователям понять, как работает система, перенося свой прошлый опыт на новую платформу

Давайте рассмотрим два разных товара на сайте Amazon:

Мы видим стандартизированное преподнесение товара: изображение товара слева, можем прокручивать их, приближать, цена, описание и многое другое.

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

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

Почему это важно?

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

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

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

6. Распознавание и вспоминание объекта

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

Почему это важно?

  • Знакомый стимул извлекает информацию из долговременной памяти. По этому, если пользователь узнает что-то из показанного на экране, это проще для восприятия

Давайте рассмотрим пример, где распознавание используется при построении UX:

  • Прямая манипуляция

Все чаще сталкиваемся с ситуацией, когда пользователям приходится полагаться на отзыв. Пример с пользовательским интерфейсом речи — Apple Siri.

Можно интуитивно понять какие команды можно давать Сири.

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

Как итог — пользователю предпочтительно распознавать интуитивно, а не вспоминать целенаправленно информацию.

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

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

Почему это важно?

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

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

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

8. Эстетический и минималистический дизайн

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

Почему это важно?

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

Исходя из этих правил, первое, что нужно сделать — минимизировать беспорядок на странице.

На главной странице Google очень мало элементов, которые могут отвлечь пользователя от основной задачи.

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

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

Почему это важно?

  • Давать отчет об ошибке для упрощения восстановления
  • Обратная связь
  • Говорить на языке пользователя
  • Предвидеть и катализировать ошибки

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

Вот пример ошибки 404 — несуществующей страницы.

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

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

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

Почему это важно?

  • В некоторых ситуациях ваш пользовательский интерфейс (UI) не всем может быть понятен, как вы надеялись

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

Таким образом, мы рассмотрели 10 методологических рекомендаций, которые важны при создании качественного UX.

Общей формулы успеха нет, везде придерживайтесь здравого смысла.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade