Александр Овчаренко, ui для аналитиков
TRANSCRIPT
![Page 1: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/1.jpg)
Проектирование интерфейсов ИС
Овчаренко АлександрЗАО «Си Проект»
![Page 2: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/2.jpg)
О чём речь?
• Что такое и зачем нужно
• Отличительные черты инфосистем с позиций ЧМВ
• Как проектировать: особенности и советы
• Дополнительно: Как работать с проектировщиками UI
![Page 3: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/3.jpg)
1. Введение
![Page 4: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/4.jpg)
Зачем проектировать интерфейсы ИС?
![Page 5: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/5.jpg)
Бизнес(эксплуатант системы)
• Повышение производительности труда• Большая прозрачность и гибкость бизнес-процессов
• Снижение квалификационных требований к персоналу
![Page 6: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/6.jpg)
Пользователь(персонал бизнеса)
• Меньше работы• Меньше контроля• Меньше ответственности
![Page 7: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/7.jpg)
Разработчик(автор системы)
• Снижение неопределенности• Быстрее реализация функционала и легче поддерживать разработку
• Меньше взаимодействия с эксплуатантом
![Page 8: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/8.jpg)
Критерии качества
![Page 9: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/9.jpg)
«Хороших» интерфейсов нет
Есть относительное удовлетворение ряду критериев
![Page 10: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/10.jpg)
• Скорость работы• Скорость обучения• Количество ошибок• Эмоциональная удовлетворенность
Формальные критерии
![Page 11: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/11.jpg)
Частные критерии
• Соответствие бизнес-процессам• Учет контекста и приоритетов• Снижение нагрузки• Предсказуемость и понятность• Унификация• Изучаемость• Отсутствие скрытой логики• и т.д.
![Page 12: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/12.jpg)
Где проектировщик?
![Page 13: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/13.jpg)
Взгляд пользователя
![Page 14: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/14.jpg)
Взгляд аналитика/разработчика
![Page 15: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/15.jpg)
Проектировщик UI
![Page 16: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/16.jpg)
— Эргономика / Юзабилити— Аналитика— Инженерия / технологии— Психология (особенно когнитивная)— Коммуникации (особенно визуальные)— Дизайн— Системный подход— Эмпатия и плюрализм взглядов— Проведение исследований
Знания и навыки
![Page 17: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/17.jpg)
2. Инфосистемы с позиций человеко-машинного взаимодейстия
![Page 18: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/18.jpg)
• Множество ролей• Взаимосвязанные и сложные процессы• Большие объемы данных
• Модульность и кастомизации
Отличительные черты ИС
![Page 19: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/19.jpg)
• Баланс между унификацией и соответствием• Разный уровень пользователей• Разные решаемые задачи• Большое количество связанных объектов• Одни и те же данные для разных задач и контекстов
• Ограничения техсредств
Типичные задачи и сложностидля проектирования UI
![Page 20: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/20.jpg)
А ещё во всю силу
• Итеративная работа• Последствия ошибок• Утомляемость и стресс
![Page 21: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/21.jpg)
3. Как проектировать интерфейсы ИС
![Page 22: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/22.jpg)
Процесс
![Page 23: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/23.jpg)
• Сбор информации• Анализ информации• Проработка интерфейсов• Дизайн и реализация
Часто
![Page 24: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/24.jpg)
• Сбор информации• Анализ информации• Интерактивно-коммуникативная модель• Аналитическая проработка интерфейсов• Эргономическая проработка интерфейсов• Гайдлайны• Тестирование• Дизайн и реализация
Лучше
![Page 25: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/25.jpg)
Интерактивно-коммуникативная
модель
![Page 26: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/26.jpg)
![Page 27: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/27.jpg)
Аналитическая проработка интерфейсов системыЦель: охватить всю систему(варианты ролей, АРМов, все данные и функционал)
Результат: постижение системы, понимание неопределенностей, осознание задач и проблем взаимодействия
![Page 28: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/28.jpg)
Эргономическая проработка системыЦель: системно реализовать эргономичекие принципы в интерфейсах
Результат: законченные, готовые к тестированию и реализации решения
![Page 29: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/29.jpg)
На что обращать внимание
• Общие паттерны использования
• Минимизация скрытой логики• Частотность использования• Критичность последствий• Контекст задач пользователя
![Page 30: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/30.jpg)
Чего избегать
• Нестандартных UI решений
• Игры в дизайн
• Частных случаев
![Page 31: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/31.jpg)
Когдаостановиться?
![Page 32: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/32.jpg)
4. Методы
![Page 33: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/33.jpg)
Этапность работы пользователяс системой
Ознакомление/обучение
Первичная настройка и наполнение
Использование
Вывод
![Page 34: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/34.jpg)
Погружающий подход
![Page 35: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/35.jpg)
НавигацияГде$я?$
Как$вернуться$назад?$ Что$еще?$
Что$здесь$есть?$
![Page 36: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/36.jpg)
Навигация — не основная точка
входа!
![Page 37: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/37.jpg)
Язык
Режим учета медицинских данных пациентов
Пациенты
![Page 38: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/38.jpg)
Подход паттернов
• Элементы управления
• Виджеты• Экранные формы
• Архитектурные решения
• Задачи (!)
![Page 39: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/39.jpg)
Дизайн и ЧМВ
![Page 40: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/40.jpg)
«Перила» и «акселераторы»
![Page 41: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/41.jpg)
Что предоставлять?
• Описания процессов• Приоритеты• Примеры данных, охватывающие разнообразие вариантов
• Анализ конкурентов• Известные проблемы и жалобы
![Page 42: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/42.jpg)
5. Работа с проектировщиком,
если он есть
![Page 43: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/43.jpg)
Что требовать?
• Эргономику (как ни странно)• Внимание к мелочам• Учёт ограничений (без перегибов!)• Описания поведения• Библиотеку контролов и гайдлайны• Тестирование• Сопровождение и надзор
![Page 44: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/44.jpg)
Что критиковать
• Частные случаи• Реализуемость решений• Космос и модные подходы• Чрезмерное разнообразие решений
![Page 45: Александр Овчаренко, UI для аналитиков](https://reader034.vdocuments.mx/reader034/viewer/2022042706/5878cc651a28ab26728b74c7/html5/thumbnails/45.jpg)
Что слушать
• Изменения логики представления данных и функционала
• Предложения по системному улучшению продукта (не только UI, но и процессов)
• Замечания по дизайну (когда применимо)