— Кто такой UX/UI-специалист — Какие знания, навыки, опыт приобретать для начала карьеры — Краткий обзор инструментария — Дизайн-игра «Wizard of Oz»

1. UX-дизайн.
Обзор профессии
Андрей Шапиро, арт-директор Byndyusoft

2. Андрей Шапиро
— Проектирую
профессионально с 2006
— Значимые продукты:
Zona.ru, Aurora, OZON.ru
Backoffice, AdBus
— Арт-директор
в Byndyusoft, до этого арт-
директор Zona.ru и
ведущий дизайнер в Бюро
Горбунова

3. Кто такой
UX/UI-специалист?

4. UX
UI
Юзабилити
Эргономика
Human-Computer Interaction Design
Information Design
Information Architecture
Что значит каждое из понятий?
— User Experience
— User Interface

5. UI UX

7. Первые попавшиеся картинки с dribblbe.com

10. Сегодня мы бы
сказали, что у всех
этих продуктов
проблемы с UX

12. Эволюция
процесса
разработки ПО
Иллюстрация из книги Алана Купера и других «Интерфейс»

13. Эволюция
процесса
разработки ПО
Фрагмент иллюстрации из
книги Алана Купера и других
«Интерфейс»
UX UI

14. Люди и процессы вокруг UX/UI-специалиста

15. Какие знания, навыки,
опыт приобретать для
начала карьеры
От минимума к максимуму

16. Диаграмма Дж. Гарретта

17. 1. Сбор требований

18. 1.1 Понимание целей бизнеса
Инструменты:
Impact Mapping
Lean Startup / Business Model Canvas

19. Сбор требований. Построение сценариев
1.2 Понимание работоспособности системы
Инструменты:
Customer Journey Mapping
Диаграммы состояний

20. 1.3 Понимание мотивов и задач пользователя
Инструменты:
User Story Mapping

21. 2. Язык графического интерфейса
Знания:
Синтаксис и морфология
элементов UI
Стандарты на интерфейс
производителей
программных продуктов,
операционных систем,
платформ

22. 3. Экранная вёрстка и типографика

23. 4. Принципы проектирования
взаимодействия человек-компьютер
Обратная связь
Видимость
Монотонность
Состоятельность
Безвредность
Целостность

24. 5. Психология человеческого
восприятия информации
Знания:
Когнетика, гештальт.
Паттерны поведения
людей при
использовании ПО
и аппаратных средств.

25. 6. Паттерны и антипаттерны
проектирования интерфейса

26. 7. Возможности и ограничения
технологий конечного устройства

27. 8. Информационный дизайн
Навыки:
Структурирование
и визуализация данных
Знания:
Систем классификации
признаков

28. 9. Прототипирование
Навыки создания прототипов:
Бумажных
Кликабельных
Видео-анимированных
Интерактивных HTML/CSS/JS

29. 10. Тестирование готового
интерфейса с пользователями
Навыки:
Планирование
юзабилити-
исследования
Составление
сценариев
исследования
Юзабилити-тестирование «на коленке»,
youtu.be/GQCSnQwSL18

30. 11. Графический дизайн
Навыки:
Передача сообщения
через графический
образ
Знания/чутьё:
Актуальные тенденции

31. 12. Навыки работы с текстом
Навыки:
Формулирование мысли
Редактура текста
Знание:
Информационный стиль

32. 13. Анализ статистики и обратной связи
пользователей

33. 14. Формальная оценка интерфейса
Навыки оценки:
Модель GOMS
Параметры Шнейдермана
Оценка по бизнес-метрикам
M — Ментальная подготовка
H — Перемещение руки к устройству ввода
P — Перемещение курсора к необходимому переключателю в группе
K —Нажатие на необходимый переключатель
H + M + P + K + H + M + K + K + K + K + M + K =
= 0,4 + 1,35 + 1,1 + 0,2 + 0,4 + 1,35 + 4*(0,2) + 1,35 + 0,2 = 7,15 с

34. 14. Исследование целей и деятельности
пользователей

35. Разработан
профессиональный стандарт
bit.ly/ux-standart

36. Краткий обзор
инструментария
дизайнера

37. 1. Бумага, стикеры

38. 2. Редакторы схем
Omni Graffle
Visio
Flying Logic

39. 3. Графические редакторы
Sketch / Adobe Illustrator, Photoshop, InDesign / Gimp, Inkscape

40. 4. Редакторы интерактивных мокапов
Balsamique / Axure RP / Keynote, PowerPoint

41. 5. Прототипайзеры
Marvel App / InVision Интерактивные прототипы
на базе макетов

42. 6. Видеоредакторы
Screenflow / Adobe After Effects / Final Cut, Premier Pro, …

43. 7. Генераторы-прототипайзеры, 3D
Processing
Nodebox
Cinema 4D
…

44. Вопросы

45. Спасибо
Андрей Шапиро
andrew@ashapiro.ru