Презентація з вступної лекції до UX у Могилянській школі журналістики. Говорили про методологію продуктового дизайну в умовах «неповного знання». Як знаходити та правильно формувати концепцію продукту і як проектувати сценарій користувача, залежно від бізнес-задач.

1. UX без болю
Як проектувати для реальних задач?

2. Євген Шилов
Ex Junior Strategist
Head of Digital
UX/UI Designer eugeneshylov.com
eugeneshylov.com
evgen.shylov@gmail.comUX/UI Designer

3. Концепція
продукту
Дизайн
взаємодії
Дизайн
графічного
інтерфейсу
Стратегія
Продуктовий
менеджмент
Інформаційна
архітектура
Ідея
Задачі бізнесу і юзера
Портрет користувача
Карта цілей
Мапа сайту
Сценарій
взаємодії
Матриця
функціональних
елементів
Вайрфреймінг
Прототипування
Тестування
Hi-Fi Prototype
Interactions
Mockups
UI
Анімація
Фреймворк

5. Витрати Дохід
Користь Відношення
(RTB, point of love)
Точки контакту
у реальному світі
КористувачіЗадачі
Компоненти
Учасники
(Stakeholders)
Концепція

6. ПЕРСОНА
КОРИСТУЄТЬСЯ ВАШИМ ПРОДУКТОМ
З ТІЄЇ ПРИЧИНИ, ЩО
В МОМЕНТ
И ОЧІКУЄ
… ім’я та соціальний тип …
… мотивація персони …
… коли і де …
… ціль персони …

7. ЗАДАЧІ
ПОПЕРЕДНІЙ ДОСВІД
ДЕМОГРАФІЯ
ФУНКЦІЇ
СКЛАДНІСТЬ
ЕСТЕТИКА

8. Сценарій взаємодії описує один можливий шлях,
який користувач здійснює для досягнення однієї цілі.

10. Одні й ті ж люди різні в різних ситуаціях
…і на різних стадіях користування продуктом

11. BrowsingSearching Discovery

12. Точка входу Вирішена задача

13. Точка входу Вирішена задача

14. Точка
входу
Вирішена
задача

15. Точка
входу
Вирішена
задача

16. UX починається до початку взаємодії
і не закінчується в принципі ніколи

17. Люди приходять до вас з певним багажем знань
і йдуть з тим — який ви їм дасте.

18. UX дуже складно змінити кардинально.

19. Facebook Connect
Pop-up Form
Video Player
Video Player - Votes
Homepage
Login user

20. Що варто знати для створення
ефективної інформаційної архітектури?

21. Бізнес Контент
Користувач
Інформаційна
архітектура

22. — Суть бізнесу
— Місія, політика, культура (для великих проектів)
— Очікування перед ЦА
Бізнес

23. — Структура і наповнення майбутнього продукту
— Повний об’єм інформації, закладеної у проект
— Меседжі, які бізнес транслює аудиторії
Контент

24. — Персони, етнографія, потреби
— Умови і контекст користування
— Яку проблему користувача вирішуємо?
— Які задачі ми ставимо перед користувачем?
— Які очікування формуємо?
— Які очікування має сам користувач?
Користувач

25. Інформаційна
архітектура
сайту з 6 сторінок

27. Wire + Frame

28. Чорнові Детальні

29. ЩО?
Основні групи
контенту
ДЕ?
Структура
інформації
ЯК?
Інтерфейсна
взаємодія

30. Що не так з
вайрфреймами?
Статичні
Потребують документування
Складно тестувати
Погано продають

32. Прототип

33. Для чого
прототипувати?
Спроектувати взаємодію
Протестувати її
«Продати» ідею розробникам

34. Mock-up

36. Анімація

37. UX UI

38. T
Information
Architecture
UX
Visual
Design

39. M
Information
Architecture
UX
Visual
Design
Interviewing Animation

40. З чого почати?
– формалізуйте проблему
– дізнайтесь для кого ви проектуєте
– look for best practices
– випишіть обмеження

41. З . А . П . Я . Т . А . Я

42. З
А
П
Я
Т
А
Я
Яку задачу вирішує сайту / продукт?
Аналіз бізнесу: категорія, ЦА, конкуренти, прибуток
Потребитель: аналіз ЦА, персони
Аналіз бізнесу: категорія, ЦА, конкуренти, прибуток
Технології: HTML + CSS + JS. Здатність до масштабування.
Action: Чіткий Call-to-Action.
Я: коротко про себе, контакти.

43. Один сервіс =
= одна задача

44. Omnigraffle XMind

46. Визначити проблему з реального життя і спроектувати
концепцію сервісу, яка б її вирішувала.
Практика

47. ПЕРСОНА
КОРИСТУЄТЬСЯ ВАШИМ ПРОДУКТОМ
З ТІЄЇ ПРИЧИНИ, ЩО
В МОМЕНТ
И ОЧІКУЄ
… Олег, 36 років, редактор новин …
… хоче придбати унікальний відео-контент …
… коли готує випуск, а потрібного футажа нема під рукою …
… за недорого придбати права на використання футажа …
Посередник між фрілансерами і компаніями, які ці відео купують. Телеканалам не треба
розпорошувати свої знімальні групи, а можна прибати футаж який їх цікавить у локальних
операторів (фрілансери зі своїми камерами, або навіть телефонами).

48. Витрати Дохід
Користь Відношення
(RTB, point of love)
Точки контакту
у реальному світі
КористувачіЗадачі
Компоненти
Учасники
(Stakeholders)
“Witness”
Оператор — ім’я, рейтинги,
портфоліо, гроші.
Сервіс доступу.
Редактор-міжнародник,
і регіональних новин.
Може зробити унікальний
контент. Можливість вибору,
альтернатива Ройтерс.
Замовити відео та технічні
харктеристики.
Футажі — відеосток.
Оператор — додаток, де
зливає. Сайт — для обох.
Телекритика, суспільні
видання. Галузеві тусовки.
Унікальність, кастом
контент.
Фрілансери,
Редактори.
Продаємо відео, яке зняв фрілансер телеканалу.
Приймаємо замовлення на унікальний контент ща роялті.
Надави можливість
продавати та купувати
унікальний контент.
Команда
Розробка, технічна підтримка, реклама для фрілансерів,
юридичний супровід.
Сайт + додаток

49. ПЕРСОНА
КОРИСТУЄТЬСЯ ВАШИМ ПРОДУКТОМ
З ТІЄЇ ПРИЧИНИ, ЩО
В МОМЕНТ
И ОЧІКУЄ
… Соня, 40 лет, кошатница …
… хоче віддати кошенят …
… коли в її житті стало забагато кошенят …
… що вона їх віддасть/продасть …
Сервіс для тих, хто хоче віддати тваину, чи забрати тварину. Працюємо з центрами тварин
та фізичними особами.

50. Витрати Дохід
Користь Відношення
(RTB, point of love)
Точки контакту
у реальному світі
КористувачіЗадачі
Компоненти
Учасники
(Stakeholders)
«Купи слона»
З’єднуємо зацікавлені сторони,
зменшуємо популяцію
безпритульних тварин.
Унікальність, кастом
контент.
Ті, хто хочуть взяти
тварину.
З реклама зоомагазинів.
Надави можливість
продавати та купувати
унікальний контент.
Команда проекту,
Інвестори
Моб, сайт. Сайти волонтерських
організацій,
На сайт на додаток