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

Lecture 03 Mobile App Design. Feature Development

Embed Size (px)

Citation preview

Page 1: Lecture 03 Mobile App Design. Feature Development

Lecture 03 Mobile App Design Part 1. Feature Development

Проектування мобільного додатку. Частина 1 Визначення можливостей

Page 2: Lecture 03 Mobile App Design. Feature Development

Типи мобільних додатків1. Ігрові додатки + Розваги

2. Утиліти Погода, Бізнес, Здоров’я і т.д.

3. Клієнт-серверні додатки M2M-додатки Мобільні магазини Автоматизація бізнес-процесів

M2M додатки -> IoT Machine-to-Machine, Mobile-

to-Machine, Machine-to-Mobile…

Page 3: Lecture 03 Mobile App Design. Feature Development
Page 4: Lecture 03 Mobile App Design. Feature Development

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

Page 5: Lecture 03 Mobile App Design. Feature Development

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

Page 6: Lecture 03 Mobile App Design. Feature Development

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

Page 7: Lecture 03 Mobile App Design. Feature Development
Page 8: Lecture 03 Mobile App Design. Feature Development
Page 9: Lecture 03 Mobile App Design. Feature Development
Page 10: Lecture 03 Mobile App Design. Feature Development
Page 11: Lecture 03 Mobile App Design. Feature Development
Page 12: Lecture 03 Mobile App Design. Feature Development
Page 13: Lecture 03 Mobile App Design. Feature Development

Розроблення мобільного додатку

Розроблення технічного рішення

Розроблення цінності

Розроблення бізнес-моделі

Розроблення = інновація

Page 14: Lecture 03 Mobile App Design. Feature Development

Minimal Viable Product

Page 15: Lecture 03 Mobile App Design. Feature Development
Page 16: Lecture 03 Mobile App Design. Feature Development

Important questions

• Why? • How? • What?

https://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action

Page 17: Lecture 03 Mobile App Design. Feature Development

Important questions

• Чому Ви це робите? - Яка місія Вашої компанії? Яку цінність Ви створюєте? Що Ви будете робити, а що не будете?

• Як Ви це робите? - наслідок від «Чому?»

• Що робите? (ЛЮДИ-ЗАДАЧІ-КОНТЕКСТ-ПРОДУКТ)

Page 18: Lecture 03 Mobile App Design. Feature Development

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

(за матеріалами Wikipedia)

Мобільний телефон - предмет Можливість швидко сконтактуватися зі своїми близькими - цінність

Page 19: Lecture 03 Mobile App Design. Feature Development

1) Дизайн зручного інтерфейсу користувача 2) Використання засобів та методик, які можуть:

А) прискорити час виведення програмного продукту на ринок

Б) забезпечити підтримку додатку в середовищі, яке дуже швидко змінюється

Ключові проблеми, які виникають в розробленні ПЗ для мобільних платформ

Page 20: Lecture 03 Mobile App Design. Feature Development

Основні питання, на які треба відповісти перед розробленням мобільного додатку:

1) Хто користувачі мобільного додатку 2) Який має бути інтерфейс користувача 3) Тип пристроїв 4) Тип зв’язку з мережею 5) Обсяг даних, що будуть передаватися між

клієнтом та сервером 6) Рівень інтеграції з API сервера 7) Засоби нотифікації користувача 8) Рівень безпеки 9) Споживання енергоресурсів пристрою під

час роботи

Page 21: Lecture 03 Mobile App Design. Feature Development

Основні проблематичні місця при розробці мобільного додатку

1) Поєднання різних інтерфейсів та технологій

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

Page 22: Lecture 03 Mobile App Design. Feature Development

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

проходить цикл від планування до оцінки стану:

Планування – Реалізація – Перевірка - Оцінка

Гнучкі методології розробки. Ітеративний підхід

Page 23: Lecture 03 Mobile App Design. Feature Development

1. Постійні “локальні” релізи продукту 2. Прийняття змін до вимог 3. Тісне спілкування з замовником (або

користувачами) 4. Найкращим показником є працююче ПЗ 5. Постійна увага на зручний дизайн 6. Швидка адаптація до будь-яких змін

Гнучкі методології розробки є найбільш ефективними для мобільних платформ.

Основні принципи:

Page 24: Lecture 03 Mobile App Design. Feature Development

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

Page 25: Lecture 03 Mobile App Design. Feature Development

Human Centered Design

User experience - Відчуття і реакція людини, внаслідок використання певного продукту, системи або послуги.

Зручність є степенем ефективності, продуктивності і задоволення, з якими продукт може використовуватися певними користувачами для досягнення певних завдань в певному контексті. (ISO 9421-11)

Page 26: Lecture 03 Mobile App Design. Feature Development

Попередній досвід користувача в значній мірі впливає на взаємодію з новою програмою.

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

Page 27: Lecture 03 Mobile App Design. Feature Development

Iterative process of Human Centered Design

ISO 9241-210:2010 Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems

Page 28: Lecture 03 Mobile App Design. Feature Development

Human Centered Design

http://profs.info.uaic.ro/~stefan.negru/hci2014/lab2.html

Page 29: Lecture 03 Mobile App Design. Feature Development

Хороший дизайн програми повинен:

1. Задовольняти потребу користувача

2. Бути простим у використанні

3. Бути привабливим

4. Відповідати очікуванням бренду

Page 30: Lecture 03 Mobile App Design. Feature Development

Is it Tapworthy?Люди використовують мобільні додатки тоді, коли вони

мобільні.

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

додаток, ніж той, який бачите ви.

Page 31: Lecture 03 Mobile App Design. Feature Development

Як зробити зручний інтерфейс?1. По мірі виконання задач користувач повинен постійно відчувати своє наближення до мети.

2. Інтерфейс повинен в кожен момент часу давати розуміння, що користувач на правильному шляху і вірно йде до мети, а якщо це не так, то як на цей шлях повернутися.

3. Основне правило: «Не змушуйте користувача відчувати себе дурнем».

4. Зміст екранів системи повинен бути таким, щоб концентрувати увагу користувача, а не розсіювати його.

5. Щоб користувач отримав якісні переживання, продукт повинен розповідати історію, яка гармоніює з історією його життя і стане для нього чимось дійсно важливим.

© Юрій Грановський, “Процес і результат”

Page 32: Lecture 03 Mobile App Design. Feature Development

Процес розроблення прототипу продукту включає в себе:

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

Page 33: Lecture 03 Mobile App Design. Feature Development

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

Page 34: Lecture 03 Mobile App Design. Feature Development

Розроблення місії, цілей, можливостей, здібностей продукту

МІСІЯ – Заради чого більшого в світі цей продукт існує?

ЦІЛІ БІЗНЕСУ – Для чого він існує?

МОЖЛИВОСТІ – Що отримає людина завдяки функціям продукту?

ЗДІБНОСТІ – Які основні функції він може робити фактично? (основні)

КОРИСТУВАЧІ – ХТО наш користувач?

Page 35: Lecture 03 Mobile App Design. Feature Development

Розроблення місії, цілей, можливостей, здібностей продукту

ПОРАДА:

МІСІЯ ПРОДУКТУ найлегше формується з МІССІЇ І ЦІЛЕЙ БІЗНЕСУ

Page 36: Lecture 03 Mobile App Design. Feature Development

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

Як зрозуміти користувачів?

Page 37: Lecture 03 Mobile App Design. Feature Development

1. ЛЮДИ: Персони, цільова аудиторія (ЦА)

2. ЗАДАЧІ: Яку проблему має вирішити ваш продукт?

3. КОНТЕКСТ: В якій ситуації яка задача буде вирішуватися?

4. ПРОДУКТ: Створення продукту, який найліпше вирішує для заданої ЦА поставлені ЗАДАЧІ в заданому КОНТЕКСТІ

Page 38: Lecture 03 Mobile App Design. Feature Development

Human Centered Design

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

Це має бути психологічний портрет людини, якої насправді не існує.

Може бути додаткова персона, більш лояльна.

Також може бути негативна персона, не наш клієнт.

Page 39: Lecture 03 Mobile App Design. Feature Development

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

Page 40: Lecture 03 Mobile App Design. Feature Development

Розроблення місії, цілей, можливостей, здібностей продукту

Приклад.

Мобільний додаток для вилучення небажаних об’єктів з фотографій.

Page 41: Lecture 03 Mobile App Design. Feature Development

Розроблення місії, цілей, можливостей, здібностей продукту

Приклад. Мобільний додаток для вилучення небажаних об’єктів з фотографій.

Додатки з подібними функціями:

Adobe Fix Pixelmator Easy Eraser

Page 42: Lecture 03 Mobile App Design. Feature Development

Приклад. Мобільний додаток для вилучення небажаних об’єктів з фотографій.

Додатки з подібними функціями: Adobe Fix Pixelmator Easy Eraser

Page 43: Lecture 03 Mobile App Design. Feature Development

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

МІСІЯ – надати можливість покращити фото на телефоні завдяки якісному та зручному забиранню небажаних об’єктів в одну мить.

Page 44: Lecture 03 Mobile App Design. Feature Development

Розроблення місії, цілей, можливостей, здібностей продукту

№ Можливості Здібності (Функції)

1 Інтелектуальне видалення небажаних об’єктів

Надання можливостей для виділення і видалення небажаних об’єктів

2 Інтелектуальне видалення небажаних ліній

Надання можливостей для виділення і видалення небажаних ліній

3 Ручне забирання об’єктів з ручним вибором джерела

Надати можливість вибрати джерело та замалювати небажані об’єкти

4 Виділити великі об’єкти та дрібні деталі Надання можливості вибору радіусу кисті

5 Розширене керування виділенням об’єктів

Надання можливості не тільки виділяти, але й забирати виділення (eraser) та обводити об’єкти (lasso)

6 Виділити лінію частково Надання можливості виділення сегменту або цілої лінії

7 Можливість застосування поточних змін та запуску процесу видалення об’єктів

Надання візуальних елементів для застосування поточних змін та запуску процесу видалення об’єктів

8 Швидке загальне ознайомлення на початку

Надання Onboarding

Page 45: Lecture 03 Mobile App Design. Feature Development

№ Можливості Здібності (Функції)

9 Навчання для користувачів Надання інформації для навчання, вивчення прикладів видалення небажаних об’єктів, ліній

10 Відновлення роботи над фото Автозбереження

11 Можливість відміни здійсненої дії Підтримка Undo/Redo та надання візуального елемента для відміни дії

12 Можливість масштабування зображення Надання засобів масштабування зображення (Fit, 1:1, Zoom)

13Можливість перегляду оригінального

зображення

Надання візуального засобу для можливості перегляду оригінального зображення (Show

original)

14 Можливість експортувати фото в галерею Надання можливості зберегти фото в галерею

15 Можливість відвантажити фото одразу у сервіси (Facebook, Twitter, Instagram)

Надання можливості вибору сервісу для відвантаження

16 Додаткові опції при експорті фото Надання можливості вибору розширення та формату фото

Page 46: Lecture 03 Mobile App Design. Feature Development

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

Page 47: Lecture 03 Mobile App Design. Feature Development
Page 48: Lecture 03 Mobile App Design. Feature Development
Page 49: Lecture 03 Mobile App Design. Feature Development
Page 50: Lecture 03 Mobile App Design. Feature Development
Page 51: Lecture 03 Mobile App Design. Feature Development
Page 52: Lecture 03 Mobile App Design. Feature Development
Page 53: Lecture 03 Mobile App Design. Feature Development
Page 54: Lecture 03 Mobile App Design. Feature Development
Page 55: Lecture 03 Mobile App Design. Feature Development

http://wud-ukraine.com/

http://uxcamp.com.ua/

http://push-conference.com

http://usabilitylab.ru/

Page 56: Lecture 03 Mobile App Design. Feature Development

Курси

• https://www.open2study.com/courses/user-experience-for-the-web

• http://lits.com.ua/course/uiux-base-course/