Эвристики как волшебная таблетка?

Знакомство с юзабилити-эвристиками Нильсена для разработчиков.
Простой способ держать фокус на юзабилити.

Презентация была представлена на SenlaNontech'2019 вместе с практической частью.

Transcript

1. Эвристики Нильсена: 10 правил юзабилити
2. SENLAINC.COM 2 Тая Костюк UX Engineer @funnypersimmon Анализирую их и собственные решения Проектирую сценарии, информационную архитектуру, прототипы Исследую бизнес, пользователей, конкурентов Не рисую красивенько хотя...
3. Ну, давай, расскажи мне… А мне, как разработчику это зачем? • Проявить эмпатию к человеку по ту сторону экрана • Посмотреть на интерфейс глазами пользователя • Помочь ему достичь цели • Быть сознательным котиком
4. SENLAINC.COM Почему программисты делают неудобно сложно? “Программисты вовсе не злодеи. Они много работают, чтобы сделать свои программы легкими в использовании. К сожалению, судят они по себе, так что программы получаются легкими в использовании лишь для других разработчиков программного обеспечения, но не для обычных людей.”
5. Юзабилити? Эвристики? Что, простите?
6. SENLAINC.COM Юзабилити Стандарт ISO 9241-11 Что-то там про удобство? Юзабилити — степень, с которой продукт может быть использован определёнными пользователями при определённом контексте для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью.
7. SENLAINC.COM Эвристики Толкование от Таи Попытка алгоритмизировать принятие решений Правила, которые помогают нам принимать решения, чтобы каждый раз не обдумывать и не взвешивать все факторы. Эвристики – распространенное понятие и в бытовой жизни. Пример: «я не сажусь в машину к незнакомцам».
8. SENLAINC.COM Познакомьтесь с UX-гуру Якоб Нильсен — специалист по юзабилити мирового уровня, автор множества книг по юзабилити и просто мудрый старец. Вместе с Рольфом Моличем в 1990 году на основе факторного анализа 249 юзабилити-проблем вывел список эвристик по улучшению юзабилити сайта.
9. SENLAINC.COM Эвристики Нильсена Наглядность статуса системы Соответствие реальности Контроль и свобода действий Предотвращение ошибок На виду, а не в памяти Гибкость и эффективность Помощь в исправлении ошибок Поддержка и документация Единообразие и стандарты Эстетика и минимализм
10. Ммм, звучит как содержание моей дипломной работы...
11. #1. Наглядность системного статуса Система всегда должна сообщать о том, что с ней происходит с помощью адекватной и наглядной обратной связи в обоснованное время.
12. Наглядность системного статуса
13. Наглядность системного статусы
14. • Всегда можно понять, в каком состоянии находится система. • Легко понять, в каком месте сайта находится пользователь. • Легко понять, какая информация доступна в данном месте. • Очевидно, какие элементы являются «кликабельными» • Ясно, что будет происходить при взаимодействии с элементом • Представленная информация соответствует ожиданиям. • Понятно, куда можно перейти из текущего места. • Ссылки хорошо видны, распознаваемы, сформулированы понятным языком. • Все функции четко и понятно обозначены. • При отправке форм показывается подтверждающий диалог. Наглядность системного статуса
15. #2. Соответствие реальному миру Используйте язык пользователя, знакомые фразы и понятия вместо специализированных терминов. Информация должна подаваться в естественной, логичной форме с соблюдением реального порядка вещей.
16. Соответствие реальному миру
17. Соответствие реальному миру
18. • Структура интерфейса должна соответствовать пользовательским задачам и рабочему процессу. • Все задачи должны быть сформулированы с пользовательской точки зрения. • Интерфейс должен говорить на доступном и понятном пользователю языке. • Информация должна быть представлена в логичном и естественном порядке. Соответствие реальному миру
19. #3. Контроль и свобода действий Пользователи часто совершают ошибки, и это - нормально! Должен быть предусмотрен “аварийный выход” из нежелательного состояния: ошибки или неожиданной реакции системы. Система должна предоставить пользователю возможность отменить совершенные действия.
20. Контроль и свобода действий
21. Контроль и свобода действий
22. • Всегда существует возможность вернуться на главную страницу. • С главной страницы можно перейти ко всем ключевым разделам сайта/сервиса. • Не используются «лишние» технологии. • Графические ссылки также представлены текстом. Контроль и свобода действий
23. #4. Единообразие и стандарты Пользователь не должен задаваться вопросом, означают ли разные слова, ситуация и действия одно и то же. Элементы интерфейсы, имеющие одинаковый смысл и функцию, должны выглядеть одинаково.
24. • Назначение элементов управления, расположение и наименования согласованы во всем интерфейсе. • Ссылки и меню используются и отображаются согласно принятым в вебе стандартам. • Согласованность цвета, форм, шрифтов. • Сайт корректно отображается во всех основных браузерах. • Пользователя предупреждают при использовании специальных технологий или браузеров. • Названия ссылок соответствуют заголовкам страниц, на которые ведут. • Поведение сайта соответствует ожиданиям. Единообразие и стандарты
25. Единообразие и стандарты
26. #5. Предотвращение ошибок Необходимо помочь пользователям избежать стандартных ошибок. Для этого можно использовать примеры и подсказки в формах и полях для ввода.
27. Предотвращение ошибок
28. Предотвращение ошибок
29. Предотвращение ошибок
30. • Сайт подразумевает минимальную необходимость использования помощи, подсказок, инструкций. • Сайт должен поддерживать новых пользователей в выполнении их задач. • Для комплексных задач представлены пошаговые инструкции. • Мастера, подсказки и прочие интерфейсы обучения появляются в системе по мере необходимости. • Поля форм формируют представление о вводимой информации или содержат краткие подсказки. Предотвращение ошибок
31. #6. На виду, а не в памяти Не заставляйте пользователей держать в памяти большое количество объектов, действий и опций. Вся необходимая информация должна быть видна пользователю без перехода в другую часть системы.
32. На виду, а не в памяти
33. На виду, а не в памяти
34. • Все действия, объекты и опции, видимые на экране не нужно запоминать для того, чтобы ими воспользоваться. • По внешнему виду элементов из прошлого опыта легко установить, как с ними взаимодействовать. • Все возможные действия четко обозначены. • Метки и ссылки имеют наглядные и понятные описания. • Для больших сайтов есть раздел с картой сайта. На виду, а не в памяти
35. #7. Гибкость и эффективность Используйте ускорители, с помощью которых опытные пользователи смогут получить доступ к часто используемым функциям
36. Гибкость и эффективность
37. • Ключевые функции сайта/сервиса должны быть доступны во всех экранах. • Для всех частотных операций даны горячие клавиши (или иные способы сделать выполнение операции сделать быстрым для опытного пользователя). • Для ускорения ввода данных даны горячие клавиши. Гибкость и эффективность
38. #8. Эстетика и минимализм Не перегружайте интерфейс элементами, не нужными для выполнения пользователями их задач. Такие элементы ухудшают восприятие действительно важных функций.
40. • Визуальные решения сайта должны быть лаконичны и читаемыми. • Абзацы должны быть короткими. • На странице должно быть достаточное количество свободного пространства – «воздуха». • Сайт не должен содержать лишней анимации и не несущих нагрузку изображений. • Графический дизайн должен соответствовать контексту. • Страницы должны быть организованы по четко читаемой структуре и содержать необходимые детали. • Главные части сайта доступны с главной страницы. Эстетика и минимализм
41. #9. Понимание и исправление ошибок Сообщения об ошибках должны быть изложены на понятном, доступном пользователю языке, точно описывать проблему и предлагать решение.
42. Понимание и исправление ошибок
43. Понимание и исправление ошибок
44. Понимание и исправление ошибок
45. Понимание и исправление ошибок
46. • Интерфейс должен давать пользователю возможность восстановления после ошибки. • Сообщения об ошибке должны быть показаны на языке, понятном пользователю. • Ошибки должны максимально точно описывать проблему и предлагать решение. • Формы и поля ввода восстанавливают значения после сбоя или ошибочного submit. Понимание и исправление ошибок
47. #10. Помощь и документация Несмотря на то, что хороший интерфейс должен быть понятен и без документации, в некоторых случаях она все же может потребоваться. Помощь и справка должны быть лаконичны, легко доступны и содержать конкретные рекомендации, помогающие пользователю решать его задачи.
48. Помощь и документация
49. Помощь и документация
50. Помощь и документация
51. • Интерфейс должен содержать систему помощи. • Должна существовать связь между основными частями сайта и помощью и наоборот. • Помощь и инструкции должны быть легкодоступны. Помощь должна быть сфокусирована на задачах пользователя и содержать список конкретных шагов. • Помощь не должна быть большой. • Подсказки в интерфейсе должны быть информативными. Помощь и документация
52. Панацея?
53. SENLAINC.COM Недостатки эвристик Нильсена Набор эвристик дает направление, в каком стоит размышлять при проектировании. Но не дает ответа, как именно поступать и какое интерфейсное решение принимать. Быстро Эффективно Успешно Почему они хороши? Почему иногда не очень? Сложность/комплексность Стереотипизация решений Убивают креативность Требуют понимания
54. SENLAINC.COM Правила Шнейдермана Другие эвристики Принципы Герхард-Повалз Эвристики Баркера и Уайншейк Ваши собственные эвристики А вот это уже интересно:)
55. SENLAINC.COM Давайте собирать эвристики Есть предложение :) - Лучшие практики - Результаты юзабилити-тестирований - Ошибки дизайна и разработки - Ваши идеи? Нам понадобится: - Система хранения (confluence) - Система классификации - Регулярная верификация
56. SENLAINC.COM Как их можно использовать? • Погружение в предметную область • Сравнение с лучшими практиками • Оценка интерфейса проекта или прототипа • Сравнение интерфейсов между собой • Исключение повторяющихся проблем • Регулярная верификация и актуализация эвристик • Помощь молодым специалистам, БА & тестировщикам: база знаний
57. SENLAINC.COM Набор эвристик для формы авторизации 1. Поля логин/пароль выделены и расположены в отдельном окне 2. В качестве логина используются привычные пользователям понятия: email, номер телефона, имя пользователя или другие аналогичные 3. Есть указание на то, какой объект является логином 4. Есть ссылка на восстановление пароля 5. Кроме пароля, есть альтернативные варианты верификации (QR, одноразовый код, отпечаток пальца) 6. Есть возможность посмотреть введенные скрытые символы пароля 7. Есть возможность скрыть вводимые символы пароля 8. Есть возможность войти в систему с помощью другого распространенного аккаунта: соцсети 9. Есть возможность быстро переключиться на другой аккаунт 10. Есть возможность сохранить логин и пароль, чтобы избежать повторного ввода в будущем 11. Есть возможность зарегистрироваться, которая сопровождается ссылкой на страницу регистрации.
58. SENLAINC.COM Эвристики с обратными формулировками Выполняется, если • Есть ссылка на восстановление пароля • Есть возможность сохранить логин и пароль чтобы избегать повторного ввода в будущем • Кроме пароля, есть альтернативные варианты верификации (QR, одноразовый код, отпечаток пальца) • При вводе пароля есть возможность посмотреть введенные скрытые символы пароля Не выполняется, если • Пользователь не знает, как войти в систему, если он потерял доступ к заданному паролю • Пользователь вынужден каждый раз вводить пароль или не знает, что пароль будет сохранен • Нет возможности войти в систему без использования пароля, который надо запоминать или сохранять • Пользователь не может проверить правильность ввода пароля
59. SENLAINC.COM Актуальность Эвристик Нильсена: как их использовать? Который так полезно задавать себе в процессе созидания: А не х..ню ли я делаю? Самое важное качество дизайнера, проектировщика и вообще человека. Эмпатируйте Всего один вопрос к самому себе... Сомневайтесь и проверяйте Тестируйте, спрашивайте, анализируйте. И эвристики вам в помощь!
60. Ваши вопросы?