собственные решения Проектирую сценарии, информационную архитектуру, прототипы Исследую бизнес, пользователей, конкурентов Не рисую красивенько хотя...
• Проявить эмпатию к человеку по ту сторону экрана • Посмотреть на интерфейс глазами пользователя • Помочь ему достичь цели • Быть сознательным котиком
Они много работают, чтобы сделать свои программы легкими в использовании. К сожалению, судят они по себе, так что программы получаются легкими в использовании лишь для других разработчиков программного обеспечения, но не для обычных людей.”
— степень, с которой продукт может быть использован определёнными пользователями при определённом контексте для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью.
которые помогают нам принимать решения, чтобы каждый раз не обдумывать и не взвешивать все факторы. Эвристики – распространенное понятие и в бытовой жизни. Пример: «я не сажусь в машину к незнакомцам».
мирового уровня, автор множества книг по юзабилити и просто мудрый старец. Вместе с Рольфом Моличем в 1990 году на основе факторного анализа 249 юзабилити-проблем вывел список эвристик по улучшению юзабилити сайта.
свобода действий Предотвращение ошибок На виду, а не в памяти Гибкость и эффективность Помощь в исправлении ошибок Поддержка и документация Единообразие и стандарты Эстетика и минимализм
Легко понять, в каком месте сайта находится пользователь. • Легко понять, какая информация доступна в данном месте. • Очевидно, какие элементы являются «кликабельными» • Ясно, что будет происходить при взаимодействии с элементом • Представленная информация соответствует ожиданиям. • Понятно, куда можно перейти из текущего места. • Ссылки хорошо видны, распознаваемы, сформулированы понятным языком. • Все функции четко и понятно обозначены. • При отправке форм показывается подтверждающий диалог. Наглядность системного статуса
• Все задачи должны быть сформулированы с пользовательской точки зрения. • Интерфейс должен говорить на доступном и понятном пользователю языке. • Информация должна быть представлена в логичном и естественном порядке. Соответствие реальному миру
это - нормально! Должен быть предусмотрен “аварийный выход” из нежелательного состояния: ошибки или неожиданной реакции системы. Система должна предоставить пользователю возможность отменить совершенные действия.
главной страницы можно перейти ко всем ключевым разделам сайта/сервиса. • Не используются «лишние» технологии. • Графические ссылки также представлены текстом. Контроль и свобода действий
интерфейсе. • Ссылки и меню используются и отображаются согласно принятым в вебе стандартам. • Согласованность цвета, форм, шрифтов. • Сайт корректно отображается во всех основных браузерах. • Пользователя предупреждают при использовании специальных технологий или браузеров. • Названия ссылок соответствуют заголовкам страниц, на которые ведут. • Поведение сайта соответствует ожиданиям. Единообразие и стандарты
Сайт должен поддерживать новых пользователей в выполнении их задач. • Для комплексных задач представлены пошаговые инструкции. • Мастера, подсказки и прочие интерфейсы обучения появляются в системе по мере необходимости. • Поля форм формируют представление о вводимой информации или содержат краткие подсказки. Предотвращение ошибок
держать в памяти большое количество объектов, действий и опций. Вся необходимая информация должна быть видна пользователю без перехода в другую часть системы.
нужно запоминать для того, чтобы ими воспользоваться. • По внешнему виду элементов из прошлого опыта легко установить, как с ними взаимодействовать. • Все возможные действия четко обозначены. • Метки и ссылки имеют наглядные и понятные описания. • Для больших сайтов есть раздел с картой сайта. На виду, а не в памяти
• Для всех частотных операций даны горячие клавиши (или иные способы сделать выполнение операции сделать быстрым для опытного пользователя). • Для ускорения ввода данных даны горячие клавиши. Гибкость и эффективность
Абзацы должны быть короткими. • На странице должно быть достаточное количество свободного пространства – «воздуха». • Сайт не должен содержать лишней анимации и не несущих нагрузку изображений. • Графический дизайн должен соответствовать контексту. • Страницы должны быть организованы по четко читаемой структуре и содержать необходимые детали. • Главные части сайта доступны с главной страницы. Эстетика и минимализм
Сообщения об ошибке должны быть показаны на языке, понятном пользователю. • Ошибки должны максимально точно описывать проблему и предлагать решение. • Формы и поля ввода восстанавливают значения после сбоя или ошибочного submit. Понимание и исправление ошибок
должен быть понятен и без документации, в некоторых случаях она все же может потребоваться. Помощь и справка должны быть лаконичны, легко доступны и содержать конкретные рекомендации, помогающие пользователю решать его задачи.
между основными частями сайта и помощью и наоборот. • Помощь и инструкции должны быть легкодоступны. Помощь должна быть сфокусирована на задачах пользователя и содержать список конкретных шагов. • Помощь не должна быть большой. • Подсказки в интерфейсе должны быть информативными. Помощь и документация
стоит размышлять при проектировании. Но не дает ответа, как именно поступать и какое интерфейсное решение принимать. Быстро Эффективно Успешно Почему они хороши? Почему иногда не очень? Сложность/комплексность Стереотипизация решений Убивают креативность Требуют понимания
- Результаты юзабилити-тестирований - Ошибки дизайна и разработки - Ваши идеи? Нам понадобится: - Система хранения (confluence) - Система классификации - Регулярная верификация
• Сравнение с лучшими практиками • Оценка интерфейса проекта или прототипа • Сравнение интерфейсов между собой • Исключение повторяющихся проблем • Регулярная верификация и актуализация эвристик • Помощь молодым специалистам, БА & тестировщикам: база знаний
и расположены в отдельном окне 2. В качестве логина используются привычные пользователям понятия: email, номер телефона, имя пользователя или другие аналогичные 3. Есть указание на то, какой объект является логином 4. Есть ссылка на восстановление пароля 5. Кроме пароля, есть альтернативные варианты верификации (QR, одноразовый код, отпечаток пальца) 6. Есть возможность посмотреть введенные скрытые символы пароля 7. Есть возможность скрыть вводимые символы пароля 8. Есть возможность войти в систему с помощью другого распространенного аккаунта: соцсети 9. Есть возможность быстро переключиться на другой аккаунт 10. Есть возможность сохранить логин и пароль, чтобы избежать повторного ввода в будущем 11. Есть возможность зарегистрироваться, которая сопровождается ссылкой на страницу регистрации.
на восстановление пароля • Есть возможность сохранить логин и пароль чтобы избегать повторного ввода в будущем • Кроме пароля, есть альтернативные варианты верификации (QR, одноразовый код, отпечаток пальца) • При вводе пароля есть возможность посмотреть введенные скрытые символы пароля Не выполняется, если • Пользователь не знает, как войти в систему, если он потерял доступ к заданному паролю • Пользователь вынужден каждый раз вводить пароль или не знает, что пароль будет сохранен • Нет возможности войти в систему без использования пароля, который надо запоминать или сохранять • Пользователь не может проверить правильность ввода пароля
задавать себе в процессе созидания: А не х..ню ли я делаю? Самое важное качество дизайнера, проектировщика и вообще человека. Эмпатируйте Всего один вопрос к самому себе... Сомневайтесь и проверяйте Тестируйте, спрашивайте, анализируйте. И эвристики вам в помощь!