Part 2. Interface Prototyping

1. Lecture 04. Mobile App Design
Part 2. Interface Prototyping
Проектування мобільного додатку
Прототипування інтерфейсу

2. Піраміда користувачів
Продвинуті користувачі – 15%
Комп’ютерно грамотні користувачі – 25%
Непідготовлені користувачі – 60%
Користувачів не сильно хвилюють функції
продуктів.
Вони цікавляться можливістю вирішувати
задачі.

3. Старі приклади гарних інтерфейсів
Weight Log Unit-Conversion Calculator Clipboard
Manager
fun to convert miles to kilometers
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

4. Приклади гарних інтерфейсів
Чи треба буде мені сьогодні парасолю?
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

5. Мобільні інтерфейси, які імітують фізичні пристрої
переважають своєю інтуїтивністю і перевіреною
ергономікою.
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

6. Мобільні інтерфейси, які імітують фізичні пристрої
переважають своєю інтуїтивністю і перевіреною
ергономікою.
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

7. Rule of Thumb
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

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

9. Be a Scroll Skeptic
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

10. Be a Scroll Skeptic
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

11. Visual Feedback є дуже важливим!
From "Tapworthy Designing Great iPhone Apps" By Josh Clark

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

13. Сторінки

14. Сторінки

15. Сторінки

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

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

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

19. Дерево

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

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

22. Apple/Android guidelines
http://developer.android.com/design/index.html
https://developer.apple.com/ios/human-interface-
guidelines/overview/design-principles/

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

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

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

36. Прототипування на папері
Переваги:
• Можна швидко отримати макет
інтерфейсу без кодування
• Знаходження широкого кола
проблем в інтерфейсі, в тому
числі серйозних
• Можливість уточнення інтерфейсу
додатку за відгуками користувачів
до початку реалізації
• Вся команда може брати участь
• Заохочує до творчості команду та
користувачів
Недоліки:
• Не розв’язує всіх задач,
пов’язаних з інтерфейсом
користувача
http://www.paperprototyping.com/what_prosandcons.html

37. Put Something Ugly on Your
iPhone ☺
Прототипування на папері

38. Прототипування на папері
https://studio.uxpin.com/ebooks/free-ux-design-builders-
bundle

39. Ресурси з шаблонами інтерфейсних рішень та прототипів програм
http://ui-patterns.com/patterns
welie.com
pttrns.com
www.mobile-patterns.com
capptivate.co
uxarchive.com
http://studio.uxpin.com/patterns/
http://useyourinterface.com
https://www.behance.net/gallery/10645011/
User-Experience-Document-Examples-
Prototypes
http://zurb.com/libraryhttp://zurb.com/library

40. Засоби прототипування
http://www.cooper.com/prototyping-tools

42. Balsamiq

43. Balsamiq

44. Paint ☺

45. Sketch

46. Sketch

47. Axure

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

49. Ресурси з прикладами
Dribbble
Behance
Pinterest
UIMovement
…

50. Dribbble

51. Dribbble. Fitness
example

52. Dribbble. Fitness
example

53. Dribbble. Fitness
example

54. Dribbble. Fitness
example

55. Dribbble. Fitness
example

56. Розміщення елементів інтерфейсу
в AndroidStudio i Xcode
• Android Studio - res/layout/*.xml
• XCode - *.storyboard; *.xib

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

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

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

62. Відео - використання LinearLayout
в Android і UIStackView в iOS
1. https://www.youtube.com/watch?v=lUymjX4K7FM
2. https://developer.apple.com/videos/play/wwdc2015/218/

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

71. http://wud-ukraine.com/
http://uxcamp.com.ua/
http://push-conference.com
http://usabilitylab.ru/
Конференції

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