Пользовательский интерфейс и тестирование интерфейсов (UI/HCI)

1.

Министерство сельского хозяйства РК
КАТИУ имени С. Сейфуллина
Информационно-коммуникационные технологии
4. Пользовательский интерфейс как средство взаимодействия человека и
компьютера. Удобство использования интерфейсов. Типы интерфейсов: интерфейс
командной строки, текстовый интерфейс, графический интерфейс. Физические и
психические характеристики пользователя. Этапы разработки пользовательского
интерфейса. Виды тестирования интерфейса (user testing). Перспективы развития
интерфейсов.
Астана

2.

•073-25-44 Фамилие Имя

3. Пользовательский интерфейс, как средство человеко-компьютерного взаимодействия

Пользовательский интерфейс (User Interface, UI) —
это совокупность элементов, через которые человек
взаимодействует с компьютерной системой
Примеры интерфейсов:
Графический интерфейс (GUI)
Командная строка (CLI)
Голосовой интерфейс (VUI)
Текстовые и сенсорные интерфейсы

4. Пользовательский интерфейс, как средство человеко-компьютерного взаимодействия

Человеко-компьютерное взаимодействие (HCI)
Human-Computer Interaction (HCI) — область, изучающая,
как пользователи взаимодействуют с компьютерами и как
сделать это взаимодействие более эффективным, удобным
и понятным.
Цель HCI:
Обеспечить комфортную, интуитивную и продуктивную
работу пользователя с системой.

5. Пользовательский интерфейс, как средство человеко-компьютерного взаимодействи

Связь между HCI и UI
UI — это интерфейсная реализация взаимодействия, т.е.
"Что видит и с чем работает пользователь"
HCI — это теория и практика проектирования этого
взаимодействия, т.е. "Почему и как это должно работать
именно так»

6. Основные типы пользовательских интерфейсов

Тип интерфейса
Тип интерфейса
Тип интерфейса
Интуитивность,
визуальная связь
GUI
Windows, Android, macOS
CLI
Linux Terminal, PowerShell Гибкость, скорость
VUI
Siri, Alexa, Google
Assistant
Удобство без рук,
голосовое управление
NUI
Kinect, AR/VR,
тач-интерфейсы
Естественные жесты,
иммерсивность

7. Пользовательский интерфейс, как средство человеко-компьютерного взаимодействия

Компоненты графического пользовательского
интерфейса
• Кнопки
• Меню
• Формы ввода
• Иконки
• Окна, вкладки
• Слайдеры, чекбоксы, радиокнопки
UI = совокупность визуальных и интерактивных элементов

8. Пользовательский интерфейс, как средство человеко-компьютерного взаимодействия

Принципы хорошего пользовательского интерфейса
Удобство (Usability) — интерфейс должен быть легким в
освоении
Доступность (Accessibility) — подходить для разных
пользователей
Последовательность (Consistency) — одинаковые элементы
ведут себя одинаково
Обратная связь (Feedback) — реакция системы на действия
пользователя
Минимализм — минимум отвлекающих или ненужных
элементов

9. Пользовательский интерфейс, как средство человеко-компьютерного взаимодействия

Эволюция UI
1970-е: CLI (текстовые интерфейсы)
1980–90-е: GUI (мышь, окна, кнопки)
2000-е: Веб-интерфейсы
2010+: Мобильные, сенсорные, голосовые
Будущее: AR/VR, нейроинтерфейсы, адаптивные UI

10. Что такое юзабилити?

Юзабилити (usability) — это степень удобства и
эффективности использования интерфейса
пользователем для достижения своих целей
Ключевые характеристики:
• Простота освоения (Learnability)
• Эффективность (Efficiency)
• Запоминаемость (Memorability)
• Количество ошибок (Errors)
• Удовлетворенность (Satisfaction)

11. Почему важна юзабилити?

Снижает количество ошибок
Увеличивает производительность пользователей
Повышает лояльность и доверие
Экономит время и ресурсы
Улучшает восприятие продукта
Хороший интерфейс не требует инструкций!

12. Основные виды интерфейсов

Вид интерфейса
Вид интерфейса
Интерфейс командной строки Администрирование,
(CLI)
программирование
Текстовый интерфейс
Устаревшие системы,
терминалы
Графический интерфейс (GUI) Современные ОС, сайты,
приложения

13. Интерфейс командной строки (CLI)

Преимущества:
• Высокая скорость при
навыке
• Большая гибкость и
контроль
• Низкие системные
требования
Недостатки:
• Крутая кривая обучения
• Нет визуальных подсказок
• Ошибки в синтаксисе
команд
Пользователь взаимодействует с системой через текстовые команды
Windows CMD, Bash (Linux), PowerShell

14. Текстовый интерфейс

Преимущества:
• Прост в реализации
• Поддерживается в старых
системах
• Минимальное
потребление ресурсов
Недостатки:
• Ограниченные визуальные
возможности
• Менее интуитивный для
современных
пользователей
Основан на текстовом выводе, меню и формах. Управление часто
через клавиатуру.
BIOS, старые версии DOS-программ, терминалы 80-х

15. Графический интерфейс пользователя (GUI)

Преимущества:
• Интуитивный и наглядный
• Минимум ошибок
• Подходит широкой
аудитории
Недостатки:
• Требует больше ресурсов
• Меньшая гибкость (по
сравнению с CLI)
Визуальный интерфейс с окнами, иконками, кнопками, меню.
Управление — мышью, тачпадом, пальцами (сенсор).
Windows, macOS, Android, веб-приложения

16. Сравнение интерфейсов по юзабилити

Критерий
Простота
Эффективность
Ошибки
Гибкость
Удовлетворённость
CLI
Текстовый
GUI

17. Как повысить юзабилити интерфейса?

Использовать понятные иконки и термины
Предоставлять обратную связь (feedback)
Избегать перегрузки информацией
Проверять дизайн на пользователях (user testing)
Следовать принципам UX-дизайна и гайдлайнам
(Material, Apple HIG)

18. Примеры плохого и хорошего интерфейса

Плохой интерфейс:
• Перегружен элементами
• Нет логики в
расположении
• Отсутствует помощь или
подсказки
Хороший интерфейс:
• Минималистичный
• Четкие кнопки и действия
• Предсказуемый результат

19. Кто такой пользователь?

Пользователь — человек, взаимодействующий с
системой для выполнения задачи.
Чтобы интерфейс был удобен, нужно учитывать:
физические характеристики пользователя
ментальные (когнитивные) особенности
контекст использования

20. Физические характеристики пользователя

Физические особенности влияют на доступность и
удобство интерфейса.
Примеры физических характеристик:
• Возраст
• Острота зрения
• Слух
• Моторика (точность движений, скорость реакции)
• Особенности тела (левша/правша, ограничения
подвижности)

21. Примеры влияния физических особенностей

Характеристика
Как влияет на интерфейс
Плохое зрение
Требует крупных шрифтов,
контраста
Крупные кликабельные
элементы
Простота, отсутствие перегрузки
Нельзя полагаться только на
цвет
Ограниченная моторика
Возраст (пожилые)
Цветовая слепота

22. Ментальные (когнитивные) характеристики

Когнитивные особенности — это способы
восприятия, мышления и обработки информации.
Основные характеристики:
• Память (рабочая, долговременная)
• Внимание
• Логическое мышление
• Уровень знаний и опыта
• Способность к обучению
• Эмоциональное состояние

23. Примеры ментальных ограничений

Характеристика
Слабая память
Низкий опыт
Высокая нагрузка
Высокая нагрузка
Проявление в интерфейсе
Пользователь не помнит, где
кнопка
Нужно объяснять каждый шаг
Усталость → ошибки,
непонимание
Интерфейс должен быть
простым, прямолинейным

24. Ошибки при игнорировании особенностей пользователя

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

25. Инклюзивный дизайн

Интерфейсы должны быть:
• Доступными для людей с разными способностями
• Гибкими — подстраиваться под пользователя
• Предсказуемыми и понятными
• WCAG, ADA, ГОСТ Р ИСО 9241 — стандарты доступности

26. Как учитывать характеристики пользователя?

Провести исследование аудитории (персоны, сценарии)
Делать прототипы с разными вариантами
Тестировать интерфейс на реальных пользователях
Использовать гайдлайны (Google, Apple, Microsoft)
Обеспечивать доступность по стандартам

27. Основные этапы разработки пользовательского интерфейса

Исследование и анализ
Проектирование структуры
Создание прототипов
Визуальный дизайн
Тестирование и итерации
Реализация и интеграция
Поддержка и улучшение

28. Этап 1 — Исследование и анализ

Цель: Понять, кто пользователь и что ему нужно.
Методы:
• Интервью, опросы
• Анализ конкурентов
• Создание персонажей (user personas)
• Изучение контекста использования