Slide 1

Slide 1 text

Эвристики Нильсена: 10 правил юзабилити

Slide 2

Slide 2 text

SENLAINC.COM 2 Тая Костюк UX Engineer @funnypersimmon Анализирую их и собственные решения Проектирую сценарии, информационную архитектуру, прототипы Исследую бизнес, пользователей, конкурентов Не рисую красивенько хотя...

Slide 3

Slide 3 text

Ну, давай, расскажи мне… А мне, как разработчику это зачем? ● Проявить эмпатию к человеку по ту сторону экрана ● Посмотреть на интерфейс глазами пользователя ● Помочь ему достичь цели ● Быть сознательным котиком

Slide 4

Slide 4 text

SENLAINC.COM Почему программисты делают неудобно сложно? “Программисты вовсе не злодеи. Они много работают, чтобы сделать свои программы легкими в использовании. К сожалению, судят они по себе, так что программы получаются легкими в использовании лишь для других разработчиков программного обеспечения, но не для обычных людей.”

Slide 5

Slide 5 text

Юзабилити? Эвристики? Что, простите?

Slide 6

Slide 6 text

SENLAINC.COM Юзабилити Стандарт ISO 9241-11 Что-то там про удобство? Юзабилити — степень, с которой продукт может быть использован определёнными пользователями при определённом контексте для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью.

Slide 7

Slide 7 text

SENLAINC.COM Эвристики Толкование от Таи Попытка алгоритмизировать принятие решений Правила, которые помогают нам принимать решения, чтобы каждый раз не обдумывать и не взвешивать все факторы. Эвристики – распространенное понятие и в бытовой жизни. Пример: «я не сажусь в машину к незнакомцам».

Slide 8

Slide 8 text

SENLAINC.COM Познакомьтесь с UX-гуру Якоб Нильсен — специалист по юзабилити мирового уровня, автор множества книг по юзабилити и просто мудрый старец. Вместе с Рольфом Моличем в 1990 году на основе факторного анализа 249 юзабилити-проблем вывел список эвристик по улучшению юзабилити сайта.

Slide 9

Slide 9 text

SENLAINC.COM Эвристики Нильсена Наглядность статуса системы Соответствие реальности Контроль и свобода действий Предотвращение ошибок На виду, а не в памяти Гибкость и эффективность Помощь в исправлении ошибок Поддержка и документация Единообразие и стандарты Эстетика и минимализм

Slide 10

Slide 10 text

Ммм, звучит как содержание моей дипломной работы...

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Наглядность системного статуса

Slide 13

Slide 13 text

Наглядность системного статусы

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Соответствие реальному миру

Slide 17

Slide 17 text

Соответствие реальному миру

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

#3. Контроль и свобода действий Пользователи часто совершают ошибки, и это - нормально! Должен быть предусмотрен “аварийный выход” из нежелательного состояния: ошибки или неожиданной реакции системы. Система должна предоставить пользователю возможность отменить совершенные действия.

Slide 20

Slide 20 text

Контроль и свобода действий

Slide 21

Slide 21 text

Контроль и свобода действий

Slide 22

Slide 22 text

● Всегда существует возможность вернуться на главную страницу. ● С главной страницы можно перейти ко всем ключевым разделам сайта/сервиса. ● Не используются «лишние» технологии. ● Графические ссылки также представлены текстом. Контроль и свобода действий

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Единообразие и стандарты

Slide 26

Slide 26 text

#5. Предотвращение ошибок Необходимо помочь пользователям избежать стандартных ошибок. Для этого можно использовать примеры и подсказки в формах и полях для ввода.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

На виду, а не в памяти

Slide 33

Slide 33 text

На виду, а не в памяти

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Гибкость и эффективность

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

● Визуальные решения сайта должны быть лаконичны и читаемыми. ● Абзацы должны быть короткими. ● На странице должно быть достаточное количество свободного пространства – «воздуха». ● Сайт не должен содержать лишней анимации и не несущих нагрузку изображений. ● Графический дизайн должен соответствовать контексту. ● Страницы должны быть организованы по четко читаемой структуре и содержать необходимые детали. ● Главные части сайта доступны с главной страницы. Эстетика и минимализм

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

● Интерфейс должен давать пользователю возможность восстановления после ошибки. ● Сообщения об ошибке должны быть показаны на языке, понятном пользователю. ● Ошибки должны максимально точно описывать проблему и предлагать решение. ● Формы и поля ввода восстанавливают значения после сбоя или ошибочного submit. Понимание и исправление ошибок

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Панацея?

Slide 53

Slide 53 text

SENLAINC.COM Недостатки эвристик Нильсена Набор эвристик дает направление, в каком стоит размышлять при проектировании. Но не дает ответа, как именно поступать и какое интерфейсное решение принимать. Быстро Эффективно Успешно Почему они хороши? Почему иногда не очень? Сложность/комплексность Стереотипизация решений Убивают креативность Требуют понимания

Slide 54

Slide 54 text

SENLAINC.COM Правила Шнейдермана Другие эвристики Принципы Герхард-Повалз Эвристики Баркера и Уайншейк Ваши собственные эвристики А вот это уже интересно:)

Slide 55

Slide 55 text

SENLAINC.COM Давайте собирать эвристики Есть предложение :) - Лучшие практики - Результаты юзабилити-тестирований - Ошибки дизайна и разработки - Ваши идеи? Нам понадобится: - Система хранения (confluence) - Система классификации - Регулярная верификация

Slide 56

Slide 56 text

SENLAINC.COM Как их можно использовать? ● Погружение в предметную область ● Сравнение с лучшими практиками ● Оценка интерфейса проекта или прототипа ● Сравнение интерфейсов между собой ● Исключение повторяющихся проблем ● Регулярная верификация и актуализация эвристик ● Помощь молодым специалистам, БА & тестировщикам: база знаний

Slide 57

Slide 57 text

SENLAINC.COM Набор эвристик для формы авторизации 1. Поля логин/пароль выделены и расположены в отдельном окне 2. В качестве логина используются привычные пользователям понятия: email, номер телефона, имя пользователя или другие аналогичные 3. Есть указание на то, какой объект является логином 4. Есть ссылка на восстановление пароля 5. Кроме пароля, есть альтернативные варианты верификации (QR, одноразовый код, отпечаток пальца) 6. Есть возможность посмотреть введенные скрытые символы пароля 7. Есть возможность скрыть вводимые символы пароля 8. Есть возможность войти в систему с помощью другого распространенного аккаунта: соцсети 9. Есть возможность быстро переключиться на другой аккаунт 10. Есть возможность сохранить логин и пароль, чтобы избежать повторного ввода в будущем 11. Есть возможность зарегистрироваться, которая сопровождается ссылкой на страницу регистрации.

Slide 58

Slide 58 text

SENLAINC.COM Эвристики с обратными формулировками Выполняется, если ● Есть ссылка на восстановление пароля ● Есть возможность сохранить логин и пароль чтобы избегать повторного ввода в будущем ● Кроме пароля, есть альтернативные варианты верификации (QR, одноразовый код, отпечаток пальца) ● При вводе пароля есть возможность посмотреть введенные скрытые символы пароля Не выполняется, если ● Пользователь не знает, как войти в систему, если он потерял доступ к заданному паролю ● Пользователь вынужден каждый раз вводить пароль или не знает, что пароль будет сохранен ● Нет возможности войти в систему без использования пароля, который надо запоминать или сохранять ● Пользователь не может проверить правильность ввода пароля

Slide 59

Slide 59 text

SENLAINC.COM Актуальность Эвристик Нильсена: как их использовать? Который так полезно задавать себе в процессе созидания: А не х..ню ли я делаю? Самое важное качество дизайнера, проектировщика и вообще человека. Эмпатируйте Всего один вопрос к самому себе... Сомневайтесь и проверяйте Тестируйте, спрашивайте, анализируйте. И эвристики вам в помощь!

Slide 60

Slide 60 text

Ваши вопросы?