lecture 04. mobile app design

Lecture 04. Mobile App Design Part 2. Interface Prototyping

Проектування мобільного додатку Прототипування інтерфейсу

Піраміда користувачів

Продвинуті користувачі – 15%

Комп’ютерно грамотні користувачі – 25%

Непідготовлені користувачі – 60%

Користувачів не сильно хвилюють функції продуктів.

Вони цікавляться можливістю вирішувати задачі.

Старі приклади гарних інтерфейсів

Weight Log Unit-Conversion Calculator Clipboard Manager

fun to convert miles to kilometers

From "Tapworthy Designing Great iPhone Apps" By Josh Clark

Приклади гарних інтерфейсів

Чи треба буде мені сьогодні парасолю?


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


Rule of Thumb


Button height should be at least 0,27 inch (7mm) 44 pixels at 160 PPI

Be a Scroll Skeptic


Visual Feedback є дуже важливим!


Навігація

Три основні моделі навігації – сторінки, панель вкладок, та дерево

Сторінки

Панель вкладок

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

Основні функції зазначені у головному списку і відмічені активні.

Панель вкладок

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

Основні функції зазначені у головному списку і відмічені активні.

Дерево

Деревоподібну структуру ідеально застосовувати коли ми працюємо з різними даними різних категорій - електронна пошта, списки todo, витрати, фотознімки, музичні записи,

контакти.

Також можна використовувати для вибору великого набору функцій програми.

Дерево

Комбіновані варіанти

Apple/Android guidelines

http://developer.android.com/design/index.html

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/





Прототипування мобільних додатків

Засоби прототипування мобільних додатків

1) Прототипування на папері Основною перевагою є швидкість, оскільки можна одразу обговорити варіанти допустимих інтерфейсних рішень

2) Створення електронних ескізів Основною перевагою є можливість перегляду зв’язків та інтерактивного переходу між екранами, редагування

3) Прототипування з анімаціями Основною перевагою є можливість тестування інтерфейсу додатку, найбільш наближеного до реального

Прототипування на папері

Переваги: • Можна швидко отримати макет

інтерфейсу без кодування • Знаходження широкого кола

проблем в інтерфейсі, в тому числі серйозних

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

• Вся команда може брати участь • Заохочує до творчості команду та

користувачів Недоліки: • Не розв’язує всіх задач,

пов’язаних з інтерфейсом користувача

http://www.paperprototyping.com/what_prosandcons.html

Put Something Ugly on Your iPhone ☺



https://studio.uxpin.com/ebooks/free-ux-design-builders-bundle

Ресурси з шаблонами інтерфейсних рішень та прототипів програм

http://ui-patterns.com/patternswelie.compttrns.com

www.mobile-patterns.comcapptivate.couxarchive.com

http://studio.uxpin.com/patterns/

http://useyourinterface.comhttps://www.behance.net/gallery/10645011/User-Experience-Document-Examples-Prototypeshttp://zurb.com/libraryhttp://zurb.com/library

http://ui-patterns.com/patterns

http://welie.com/

http://pttrns.com/

http://www.mobile-patterns.com/

http://capptivate.co/

http://uxarchive.com/

http://studio.uxpin.com/patterns/

http://useyourinterface.com/

https://www.behance.net/gallery/10645011/User-Experience-Document-Examples-Prototypes



http://zurb.com/library



Засоби прототипування

http://www.cooper.com/prototyping-tools

Balsamiq

Paint ☺

Sketch

Засоби прототипування мобільних додатків

Ресурси з прикладами

Dribbble Behance Pinterest UIMovement …

Dribbble

Dribbble. Fitness example

Розміщення елементів інтерфейсу в AndroidStudio i Xcode

• Android Studio - res/layout/*.xml

• XCode - *.storyboard; *.xib

Розміщення елементів інтерфейсу - LinearLayout

Приклад інтерфейсу (GMail)

Розміщення елементів в XCode

Відео - використання LinearLayout в Android і UIStackView в iOS

1. https://www.youtube.com/watch?v=lUymjX4K7FM

2. https://developer.apple.com/videos/play/wwdc2015/218/

https://www.youtube.com/watch?v=lUymjX4K7FM

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

http://wud-ukraine.com/

http://uxcamp.com.ua/

http://push-conference.com

http://usabilitylab.ru/

Конференції

Курси

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

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

lecture 04. mobile app design

Software