Проектирование пользовательских интерфейсов: сокращение бюджетов и сроков разработки

Юрий Гизатуллин, арт-директор компании Техинформ (Уфа), о UI/UX проектировании на UfaDevConf 2018.

Transcript

1. #UFADEVCONF 2018 Проектирование пользовательских интерфейсов: сокращение бюджетов и сроков разработки techinform.pro Юрий Гизатуллин Худрук, Техинформ
2. «Hello, world! 11 300+ 90% лет опыта в вебе проектов выполнено портфолио с моим участием Юрий Гизатуллин Худрук, Техинформ @yury_gizatullin techinform.pro
3. Математика заменяет дизайн Минутка истории
4. План выступления Проектирование интерфейса: сокращение бюджета и сроков 1 Представление 2 Терминология и примеры 3 UX проектирование – исследование аудитории – Дизайн-мышление – IA – User Story – Wireframes – User flow – прототипирование 4 Инструментарий 5 Кейсы
5. UX Юзбилити UI? Терминология Юзабилити — это степень удобства использования или оценка качества интерфейса. User Experience (UX) — это совокупность ощущений от взаимодействия пользователя с интерфейсом системы, продукта или услуги. User Interface (UI) — узкое понятие, которое включает набор графически оформленных инструментов.
6. Кран здорового человека Пример интерфейса Кран курильщика Интерфейс - это язык общения человека и продукта Пульт привычный и удобный
7. Интерфейс Хороший интерфейс - спасает жизни.
8. 1 Анализ бизнес-целей 2 Исследование (аудитория, конкуренты) 3 Информационную архитектуру, сценарии, карту пользовательсного опыта 5 Каркасные модели (эскизы) 6 Прототипирование (интерактивное) 7 Тестирование юзабилити — многогранная концепция, которая включает в себя: UX дизайн UX дизайн или проектирование Цель UX дизайна — «улучшить степень удовлетворенности клиента и его лояльность через пользу, простоту использования и удовольствие, которое клиент получает в процессе взаимодействия с продуктом».
9. Исследование пользовательской аудитории Методы 1 Интервью, опросы, анкетирование 2 Тестирование юзабилити 3 Создание персонажей (профилей) 2 Веб-аналитика 3 A/B-тестирование 5 Карточная сортировка 6 Айтрекинговое тестирование Исследование аудитории
10. Design Story: The Decanter КЕЙС Walter Landor
11. Исследование аудитории Дизайн мышление – это ориентированный на человека подход к инновациям, вдохновленный дизайнерскими приемами для совмещения потребностей людей, возможностей технологий и требований к успеху в бизнесе. Тим Браун, CEO IDEO
12. Совет: когда вы добавляете новую функцию, задайтесь вопросом, что является решающим фактором: ценность для пользователи или увеличение возможностей системы? Кейс IDEO
13. Кейс: аудитория OneFit 32 вопроса занимали до 1 часа на каждое интервью Кейс: Исследование аудитории
14. IA Проектирование информационной архитектуры IA
15. IA Пользовательские сценарии User Story Как, клиент банка, я хочу сразу знать баланс карт, чтобы планировать расходы.
16. Проектирование Каркасные модели / эскизы Wireframing
17. IA Проектирование Userflow регистрации Продуманные сценарии снижают трудозатраты до 20%
18. IA Проектирование Прототи- пирование и дизайн – на 20-40% сокращает ресурсы по разработке – сокращает количество версий продукта (бета на 3-4 итерации) – дает возможность быстро показать продукт – дизайн на основе готового прототипа в 2-3 раза быстрее
19. IA Проектирование Инструментарий MindNote для архитектуры Balsamiq для создания каркасных моделей/эскизов Sketch для дизайна Zepplin для экспорта макета на верстку Principle для прототипов на iOS Invision для интерактивных прототипов
20. IA Кейс Onefit 1. Введение User Flow ускорило процесс работы с внешними программистами в 2 раза 2. Этап юзабилити- тестирования выявил новые потребности пользователей
21. IA Кейс Уралсиб ДБО «до» 1 Преемственность UI 2 Улучшение UX 3 Приоритизация функций с сохранением функционала
22. IA Кейсы 1 2 3 5 6 4
23. #UFADEVCONF 2018 Дизайн – не то, как выглядит вещь. Дизайн – то, как она работает. Стив Джобс Юрий Гизатуллин Худрук, Техинформ techinform.pro