UXPUB 🇺🇦 Дизайн-спільнота

Cover image for UX от А до Я — Ошибки: 14 советов, как справиться с неизбежными ошибками
Редакція
Редакція

Опубліковано

UX от А до Я — Ошибки: 14 советов, как справиться с неизбежными ошибками

#ux

Давайте будем честны, люди все время ошибаются.

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

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

Существует множество различных форм ошибок, но в целом их можно разделить на две категории – случайные ошибки (промахи, опечатки) и ошибки [1].

  1. Случайные ошибки (Slips) возникают при выполнении привычных нам подсознательных действий, таких как нажатие не того символа на клавиатуре или выбор неправильного маршрута. Часто бывает, что мы не уделяем задаче должного внимание и работаем на «автопилоте».
  2. Ошибки (Mistakes) совершаются в результате более осознанных, преднамеренных действий. Они возникают в новых ситуациях, когда принимаются неправильные решения на основе имеющейся информации, которая, возможно, связана с нашим предыдущим опытом. Например, ожидание того, как кнопка будет вести себя.

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

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

Серьёзность совершаемых нами ошибок может использоваться, как средство измерения юзабилити продукта или опыта [2].

  • Сколько ошибок совершают пользователи?
  • Насколько серьезны эти ошибки?
  • Насколько легко их можно исправить?

Мы можем объективно измерить и количественно оценить частоту ошибок (время или счетчики), или субъективно с помощью шкал Ликерта. Мы также можем преобразовать их в стоимость, сходя из потери производительности, то есть количества затраченных времени и ресурсов [3].

Задача UX-дизайнера – сделать опыт максимально интересным и полезным, чтобы люди могли эффективно и результативно работать. Пути исправления ошибок – фундаментальная часть этого успеха.

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

Профилактика лучше, чем лечение

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

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

1. Добавьте ограничения

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

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

Еще один пример – селектор размеров обуви на сайте Schuh. При нажатии раскрывающегося списка для выбора подходящего размера, размеры, которых сейчас нет в наличии, исчезают из списка.

А еще сайт дополнительно сообщает, пар каких размеров осталось мало на складе, что потенциально предотвращает разочарование в будущем.

Селектор размеров обуви на сайте Schuh

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

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

Контекстный поиск железнодорожных станций Trainline

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

Одна из эвристик юзабилити Neilsen [4] – обеспечить видимость состояния системы. Удобный способ добиться этого с помощью Rich Visual Modeless Feedback (RMVP – богатый визуальный немодальный фидбек) [5]. Богатый с точки зрения предоставления подробного отчета о том, что происходит. Немодальный в отношении того, что пользователю не требуется взаимодействовать с продуктом для получения упомянутого визуального фидбека.

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

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

Обновление Windows 10, не выключайте компьютер!

Подумайте, какая информация вам важна и как ее можно представить в упрощенном виде, не требуя от пользователя взаимодействия.

3. Берите за основу знакомые паттерны и компоненты

Использование стереотипных UX-компонентов и иконок, знакомых пользователям, повышает предсказуемость правильной функциональности.

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

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

Музыкальные плееры со знакомыми иконками, облегчают понимание

4. Используйте аффордансы

Аффордансы – это характеристики объекта, которые подсказывают, как с ним можно взаимодействовать. Первоначально эта концепция применялась к физическим объектам: классическая дверная ручка «позволяет» пользователю тянуть, а ручка в виде пластины «позволяет» толкать. Этот же принцип применим и к цифровым продуктам.

Вначале скевоморфизм использовался, чтобы помочь пользователям, делая контент более «реальным». Например, цифровые кнопки были спроектированы так, чтобы выглядеть как физические кнопки, которые можно нажимать.

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

Корзина покупок Amazon

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

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

В этом примере из Google Maps используется простая линия, чтобы привлечь внимание к потенциальной точке взаимодействия. Она позволяет потянуть вкладку вверх, чтобы открыть больше контента (но также действует как кнопка). Эта линия меняет форму на стрелку в контексте (чтобы закрыть drawer).

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

Форма drawer и ориентация линии также сообщали направление движения для свайпа.

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

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

5. Будьте последовательны

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

Это вселяет в пользователя уверенность. Постоянный опыт повышает предсказуемость, что снижает потребность в обучении и склонность к ошибкам.

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

Рекомендации Material Design обеспечивают последовательность

6. Используйте онбординг

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

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

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

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

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

7. Предоставьте рекомендации, прежде чем ошибка может быть сделана

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

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

Новый профиль Twitter, ввод пароля

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

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

Twitter отображает твит с текстом, длина которого превышает ограничение по количеству символов

8. Устраните двусмысленность

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

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

Добавление деталей поездки в приложении Trainline

9. Тестируйте, тестируйте, тестируйте

Лучшая форма предотвращения ошибок– это протестировать дизайн.

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

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

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

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

10. Обеспечьте возможность исправить действие

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

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

Это успокаивает пользователя. С помощью этой функции пользователь может вернуться в безопасное место в прошлом.

Есть несколько вариантов стиля отмены действия, которые позволяют исправлять ошибки. Однако все они имеют схожие характеристики:

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

Отмена обычно выполняется с помощью специальной кнопки (обычно со значком стрелки указывающей в обратном направлении), хотя бывают и стереотипные сочетания клавиш (CTRL-Z).

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

Отмена действия от Google

11. Устранение ненужных системных ошибок и уведомлений

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

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

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

Всплывающее окно от Spotify, сообщающее мне, что интернет-соединение прервано, хотя со звуком все в порядке

12. Проектируйте хорошие сообщения об ошибках

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

  • Используйте конструктивный, поддерживающий пользователя текст, а не критический.
  • Обеспечьте соответствующие действия.
  • Не пишите коды ошибок, если они не нужны для помощи в диагностике проблемы при обращении в службу поддержки.
  • Избегайте использования ЗАГЛАВНЫХ букв, поскольку это выглядит агрессивно и может еще больше усилить и без того высокий уровень беспокойства и стресса.
  • Сообщения должны быть точными и понятными, без жаргона!
  • Используйте юмор, чтобы смягчить ситуацию и снять вину с пользователя.

Mayank Dhawan (Dribbble), использует юмор, чтобы успокоить пользователя, когда возникает ошибка

13. Требуйте подтверждения действия только один раз

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

Для таких действий, как «Удалить», неоднократно отображаются подтверждения. Тем не менее, если пользователь может восстановить данные после действия простой отменой или открытием корзины, действительно ли необходимо показывать подтверждение?

Если я удалю фотографию / файл на iOS, он будет перемещен во временную область. Это круто. Я могу окончательно удалить его позже (или он автоматически удаляется по истечении X времени). Тем не менее, в обоих случаях я получаю запрос на подтверждение. Зачем?!

Оставьте меня в покое либо:

  • Удалите после первоначального подтверждения и не прячьте файл.
  • ИЛИ спрячьте его в зоне ожидания, пока мне не придется удалить его или пока не истечет время.

Приложение Apple «Фото» излишне защищает пользователя от ошибки

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

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

14. Будьте полезны!

Есть ли что-нибудь хуже, чем сообщение об ошибке, говорящее о том, что ошибки нет…?

Изображение @jmspool

И это…

Изображение @brownie490

Вывод

Ошибки могут возникнуть, и они возникнут

Приготовьтесь к ним:

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

Ссылки

[1] The Design of Everyday Things. Norman, D.A. (2002)

[2] https://www.nngroup.com/articles/usability-101-introduction-to-usability/

[3] Mobile Usability: How NOKIA changed the face of the mobile phone. Lindholm, C., Keinonen, T. and Kiljander. H. (2003)

[4] https://www.nngroup.com/articles/ten-usability-heuristics/

[5] About Face: The Essentials of Interaction Design. Cooper, A., Reimann, R. Cronin. D & Noessel, C (2014)

[6] Interaction Design: Beyond human-computer interaction. Rogers, Y., Sharp. And Preece, J. (2012)


Перевод статьи uxdesign.cc

Найстарші коментарі (0)