How to decide what features should mobile app implement. Development from mission and vision to target audience, tasks, context, capabilities, and functions.

1. Lecture 03 Mobile App Design
Part 1. Feature Development
Проектування мобільного додатку.
Частина 1 Визначення можливостей

2. Типи мобільних додатків
1. Ігрові додатки
+ Розваги
2. Утиліти
Погода, Бізнес, Здоров’я і т.д.
3. Клієнт-серверні додатки
M2M-додатки
Мобільні магазини
Автоматизація бізнес-процесів
M2M додатки -> IoT
Machine-to-Machine, Mobile-
to-Machine, Machine-to-
Mobile…

4. Number of mobile app downloads
worldwide from 2009 to 2017 (in millions)

5. Number of paid mobile app downloads
worldwide from 2011 to 2017 (in billions)

6. Number of apps available in
leading app stores as of June 2016

13. Розроблення мобільного додатку
Розроблення
технічного
рішення
Розроблення цінності
Розроблення
бізнес-моделі
Розроблення = інновація

14. Minimal Viable Product

16. Important questions
• Why?
• How?
• What?
https://www.ted.com/talks/
simon_sinek_how_great_leaders_inspire_action

17. Important questions
• Чому Ви це робите? - Яка місія Вашої
компанії? Яку цінність Ви створюєте? Що Ви
будете робити, а що не будете?
• Як Ви це робите? - наслідок від «Чому?»
• Що робите? (ЛЮДИ-ЗАДАЧІ-КОНТЕКСТ-
ПРОДУКТ)

18. Цінність
Цінність — властивість того чи іншого
предмета, явища задовольняти потреби,
бажання, інтереси соціального суб'єкта
(індивіда, групи людей суспільства).
(за матеріалами Wikipedia)
Мобільний телефон - предмет
Можливість швидко сконтактуватися зі своїми
близькими - цінність

19. 1) Дизайн зручного інтерфейсу користувача
2) Використання засобів та методик, які можуть:
А) прискорити час виведення програмного
продукту на ринок
Б) забезпечити підтримку додатку в середовищі,
яке дуже швидко змінюється
Ключові проблеми, які виникають в розробленні
ПЗ для мобільних платформ

20. Основні питання, на які треба відповісти перед
розробленням мобільного додатку:
1) Хто користувачі мобільного додатку
2) Який має бути інтерфейс користувача
3) Тип пристроїв
4) Тип зв’язку з мережею
5) Обсяг даних, що будуть передаватися між
клієнтом та сервером
6) Рівень інтеграції з API сервера
7) Засоби нотифікації користувача
8) Рівень безпеки
9) Споживання енергоресурсів пристрою під
час роботи

21. Основні проблематичні місця при розробці
мобільного додатку
1) Поєднання різних інтерфейсів та
технологій
2) Діапазон цільових пристроїв
3) Необхідність оновлень версій ПЗ
4) Інтерфейс користувача
5) Продуктивність
6) Управління пам’яттю
7) Безпека

22. Робота над проектом виконується паралельно з
безперервним аналізом отриманих результатів і
коригуванням попередніх етапів роботи.
Проект при цьому підході в кожній фазі розвитку
проходить цикл від планування до оцінки стану:
Планування – Реалізація – Перевірка - Оцінка
Гнучкі методології розробки.
Ітеративний підхід

23. 1. Постійні “локальні” релізи продукту
2. Прийняття змін до вимог
3. Тісне спілкування з замовником (або
користувачами)
4. Найкращим показником є працююче ПЗ
5. Постійна увага на зручний дизайн
6. Швидка адаптація до будь-яких змін
Гнучкі методології розробки є найбільш
ефективними для мобільних платформ.
Основні принципи:

24. Як зробити додаток
зручним?

25. Human Centered Design
User experience - Відчуття і
реакція людини, внаслідок
використання певного продукту,
системи або послуги.
Зручність є степенем ефективності,
продуктивності і задоволення, з
якими продукт може
використовуватися певними
користувачами для досягнення певних
завдань в певному контексті. (ISO
9421-11)

26. Попередній досвід користувача в значній мірі
впливає на взаємодію з новою програмою.
Тому важливо проаналізувати, які програми
використовують ваші потенційні користувачі, і яким
чином користувачі виконують у них певні дії
(шукають ті чи інші функції).

27. Iterative process of Human Centered Design
ISO 9241-210:2010
Ergonomics of human-system interaction --
Part 210: Human-centred design for
interactive systems

28. Human Centered Design
http://profs.info.uaic.ro/~stefan.negru/hci2014/lab2.html

29. Хороший дизайн програми
повинен:
1. Задовольняти потребу користувача
2. Бути простим у використанні
3. Бути привабливим
4. Відповідати очікуванням бренду

30. Is it Tapworthy?
Люди використовують мобільні додатки тоді, коли вони
мобільні.
Люди бачать мобільний додаток лише одним оком,
приділяючи лише часткову увагу на ваш ретельно
зроблений інтерфейс. Вони бачать зовсім інший
додаток, ніж той, який бачите ви.

31. Як зробити зручний інтерфейс?
1. По мірі виконання задач користувач повинен постійно
відчувати своє наближення до мети.
2. Інтерфейс повинен в кожен момент часу давати розуміння,
що користувач на правильному шляху і вірно йде до мети, а
якщо це не так, то як на цей шлях повернутися.
3. Основне правило:
«Не змушуйте користувача відчувати себе дурнем».
4. Зміст екранів системи повинен бути таким, щоб
концентрувати увагу користувача, а не розсіювати його.
5. Щоб користувач отримав якісні переживання, продукт
повинен розповідати історію, яка гармоніює з історією його
життя і стане для нього чимось дійсно важливим.
© Юрій Грановський, “Процес і результат”

32. Процес розроблення прототипу
продукту включає в себе:
1.Розроблення місії, цілей, можливостей,
здібностей(функцій) продукту
2.Дослідження потенційних користувачів
3.Створення персони
4.Написання сценаріїв та контекстних ситуацій
для персони
5.Проектування інтерфейсних рішень

33. Одним з ефективних підходів є
створення UX-піраміди:

34. Розроблення місії, цілей, можливостей, здібностей продукту
МІСІЯ – Заради чого більшого в світі цей продукт
існує?
ЦІЛІ БІЗНЕСУ – Для чого він існує?
МОЖЛИВОСТІ – Що отримає людина завдяки
функціям продукту?
ЗДІБНОСТІ – Які основні функції він може робити
фактично? (основні)
КОРИСТУВАЧІ – ХТО наш користувач?

35. Розроблення місії, цілей, можливостей, здібностей продукту
ПОРАДА:
МІСІЯ ПРОДУКТУ найлегше
формується з МІССІЇ І ЦІЛЕЙ БІЗНЕСУ

36. 1.Максимально представити себе в ролі користувача
2.Працювати з потенційними користувачами, вивчати
їхні риси, вподобання, особливості (для корпоративного
сектора — додатково з представниками бізнесу, які
приймають рішення)
3.Працювати з персонами
4.Визначити контекст використання продукту
5.На основі цілей бізнесу, особливостей користувача,
створених персон і контексту згенерувати контекстні
ситуації: користувач->ситуація->задача
Як зрозуміти користувачів?

37. 1. ЛЮДИ: Персони, цільова аудиторія (ЦА)
2. ЗАДАЧІ: Яку проблему має вирішити ваш
продукт?
3. КОНТЕКСТ: В якій ситуації яка задача буде
вирішуватися?
4. ПРОДУКТ: Створення продукту, який
найліпше вирішує для заданої ЦА
поставлені ЗАДАЧІ в заданому КОНТЕКСТІ

38. Human Centered Design
Створення персони включає в себе максимально
можливий перебір відомих персонажів, які би
підійшли нам по вимогах до особливостей
потенційного користувача.
Це має бути психологічний портрет людини, якої
насправді не існує.
Може бути додаткова персона, більш лояльна.
Також може бути негативна персона, не наш клієнт.

39. Персони
(приклад)

40. Розроблення місії, цілей, можливостей, здібностей продукту
Приклад.
Мобільний додаток
для вилучення
небажаних об’єктів з
фотографій.

41. Розроблення місії, цілей, можливостей, здібностей продукту
Приклад. Мобільний додаток для вилучення
небажаних об’єктів з фотографій.
Додатки з подібними функціями:
Adobe Fix
Pixelmator
Easy Eraser

42. Приклад. Мобільний додаток для вилучення
небажаних об’єктів з фотографій.
Додатки з подібними функціями:
Adobe Fix
Pixelmator
Easy Eraser

43. ЦІЛЬ БІЗНЕСУ – продати мобільному
користувачеві, який цікавиться фото або
технічними новинками програму для
якісного і суттєво простішого забирання
небажаного контенту (у порівнянні з
аналогами) та утримуватись в TOP-20
програм для опрацювання фотографій на
мобільному пристрої.
МІСІЯ – надати можливість покращити фото
на телефоні завдяки якісному та зручному
забиранню небажаних об’єктів в одну мить.

44. Розроблення місії, цілей, можливостей, здібностей продукту
№ Можливості Здібності (Функції)
1 Інтелектуальне видалення небажаних
об’єктів
Надання можливостей для виділення і
видалення небажаних об’єктів
2 Інтелектуальне видалення небажаних
ліній
Надання можливостей для виділення і
видалення небажаних ліній
3 Ручне забирання об’єктів з ручним
вибором джерела
Надати можливість вибрати джерело та
замалювати небажані об’єкти
4 Виділити великі об’єкти та дрібні деталі Надання можливості вибору радіусу кисті
5 Розширене керування виділенням
об’єктів
Надання можливості не тільки виділяти,
але й забирати виділення (eraser) та
обводити об’єкти (lasso)
6 Виділити лінію частково Надання можливості виділення сегменту
або цілої лінії
7 Можливість застосування поточних змін
та запуску процесу видалення об’єктів
Надання візуальних елементів для
застосування поточних змін та запуску
процесу видалення об’єктів
8 Швидке загальне ознайомлення на
початку
Надання Onboarding

45. № Можливості Здібності (Функції)
9 Навчання для користувачів Надання інформації для навчання, вивчення
прикладів видалення небажаних об’єктів, ліній
10 Відновлення роботи над фото Автозбереження
11 Можливість відміни здійсненої дії
Підтримка Undo/Redo та надання візуального
елемента для відміни дії
12 Можливість масштабування зображення
Надання засобів масштабування зображення
(Fit, 1:1, Zoom)
13
Можливість перегляду оригінального
зображення
Надання візуального засобу для можливості
перегляду оригінального зображення (Show
original)
14 Можливість експортувати фото в галерею Надання можливості зберегти фото в галерею
15
Можливість відвантажити фото одразу у
сервіси (Facebook, Twitter, Instagram)
Надання можливості вибору сервісу для
відвантаження
16 Додаткові опції при експорті фото
Надання можливості вибору розширення та
формату фото

46. Рекомендована
література

55. http://wud-ukraine.com/
http://uxcamp.com.ua/
http://push-conference.com
http://usabilitylab.ru/

56. Курси
• https://www.open2study.com/courses/user-
experience-for-the-web
• http://lits.com.ua/course/uiux-base-course/