2. UI – User Interface
UX – User eXperience
Что такое интерфейс?
3. Назначение интерфейса
получить от пользователя
информацию, необходимую для
достижения желаемого
результата или решения
поставленной задачи.
- Слушаюсь и повинуюсь,
мой Господин!
4.
5.
6.
7. – степень эффективности, продуктивности и
субъективной удовлетворенности, с которыми
продукт может быть использован
определенными пользователями в конкретном
контексте использования для достижения
заданных целей
субъективной
Что такое юзабилити?
11. Сложный интерфейс
Не интуитивен, трудно понимаем, усложняет или делает
невозможным решение поставленной задачи.
Простой интерфейс
Интуитивно понятен, упрощает решение задачи, помогает и
подсказывает нужные действия
В чем разница?
14. Набросок на бумаге или доске, аппликация
PRO:
быстро нарисовать
легко исправить
CONTRA:
сложно делиться
сложно обсуждать
сложно сохранить
Электронная версия
PRO:
быстро нарисовать
легко исправить
просто делиться
просто обсуждать
просто сохранить
CONTRA:
???
Способы создания мокапа
17. Текстовое поле (Text Input / Text Field)
Назначение
• Ввод информации с клавиатуры
Поиск Google
Адресная строка
браузера
Форма входа
в Приват24
18. Когда использовать
• Количество возможных
вариантов → ∞, но при этом
мы почти всегда знаем, что
именно вводит пользователь, и
мы готовы обработать эту
информацию
Текстовое поле (Text Input / Text Field)
19. «Ограничители» и подсказки
• Ограничение ввода (только
цифры или буквы, ограничение
по количеству вводимых
символов и т.д.)
• Проверка информации по мере
ввода
• Скрытие вводимых символов
(пароль)
• Выпадающий список с
подсказками
Ввод номера
телефона в Приват24
Пароль пользователя
в Ubuntu
Новый твит в Twitter
Поиск сотрудников в
ПриватПерсонале
Текстовое поле (Text Input / Text Field)
20. EPIC FAIL
• Пользователь не понимает, что
мы от него хотим
• Объем информации, которую
мы просим ввести, превышает
все разумные нормы
• Мы не в состоянии корректно
обработать введенную
информацию
• Не используем «ограничители»
и подсказки
Facepalm
Текстовое поле (Text Input / Text Field)
21. Выпадающий список (Droplist / ComboBox)
Назначение
• Выбор данных из заранее
подготовленного набора
Регистрация
в Skype
Расширенные настройки
браузера Chrome
Выбор местоположения
в ПК «Проминь»
22. Выпадающий список (Droplist / ComboBox)
Выбор месяца рождения
при регистрации в SkypeКогда использовать
• Существует конечное число
возможных вариантов
• Каждый из вариантов можно
интерпретировать как значение
или величину одного и того же
типа
• Из возможных вариантов
предусмотрен выбор только
одного
Выбор размера шрифта
в настройках браузера
Chrome
23. EPIC FAIL
• Количество возможных
вариантов слишком велико
• Набор вариантов не
оптимизирован
• Варианты не отсортированы
Facepalm
Выпадающий список (Droplist / ComboBox)
24. Радио-кнопка (Radio Button)
Настройки видео
в Skype
Назначение
• Выбор одного из нескольких
предлагаемых вариантов
(режимов)
Оплата телефонной связи
в Приват24
Настройки браузера
Chrome
25. Радио-кнопка (Radio Button)
Когда использовать
• Количество возможных
вариантов не больше 6-7 (чаще
всего достаточно 2-3)
• Возможные варианты чаще
всего являются режимами
работы системы и не
принадлежат какому-то
конкретному типу значений
или величин
• Все варианты
взаимоисключающие
Настройки видео
в Skype
Оплата телефонной связи
в Приват24
Настройки браузера
Chrome
26. EPIC FAIL
• Использование вместо
выпадающего списка там, где
это не нужно (для выбора
значений или данных)
• Количество вариантов > 7
(слишком сложно)
• Варианты не отсортированы
Facepalm
Радио-кнопка (Radio Button)
27. Флажок (Check Box)
Настройки учетной записи
в браузере Chrome
Назначение
• Выбор нескольких
предлагаемых вариантов
(режимов)
Перечень документов
Google Drive
Настройки уведомлений
в Skype
28. Флажок (Check Box)
Настройки учетной записи
в браузере Chrome
Когда использовать
• Возможные варианты чаще
всего являются режимами
работы системы, признаками,
свойствами, событиями,
явлениями или объектами
• Варианты являются
дополняющими друг друга и не
конфликтуют между собой
• Количество возможных
вариантов ограничено
Перечень документов
Google Drive
Настройки уведомлений
в Skype
29. EPIC FAIL
• Объединение разных по сути
вариантов в одну группу
• Варианты не отсортированы
Facepalm
Флажок (Check Box)
