1
00:01:14,950 --> 00:01:20,990
Так, отже, ми минулої лекції з вами завершили 
на цій структурі пам'яті

2
00:01:20,990 --> 00:01:26,620
і сконцентрували нашу увагу на тому, яким 
чином людина формує свої уявлення

3
00:01:26,620 --> 00:01:30,810
як вона сприймає те, що ми зробили для інтерфейсів

4
00:01:30,810 --> 00:01:36,640
і яка її буде реакція. І ми на цьому тижні 
з вами переходимо до

5
00:01:36,640 --> 00:01:39,330
частини лекції, це є предпроектні аспекти

6
00:01:39,330 --> 00:01:45,160
тобто те що ми з вами якраз і робили в цих 
от перша лабораторна, друга лабораторна

7
00:01:45,160 --> 00:01:50,120
частково ми робили ще в третій лабораторній, 
тобто досліджували, яким чином

8
00:01:50,120 --> 00:01:57,860
які кроки нам треба зробити, щоб потім удосконалити 
ці інтерфейси і зробити їх більш кращими

9
00:01:57,860 --> 00:02:01,380
і щоб ті взаємодії покращилися і скоротили 
час роботи людини

10
00:02:01,380 --> 00:02:08,380
Якраз в четвертій лабораторній ви далі починаєте 
створювати нові ескізи для різних гаджетів

11
00:02:08,380 --> 00:02:14,480
для різних платформ, і по ідеї якраз оті 
от кроки передпроектні ми маємо пройти з 
вами.

12
00:02:14,480 --> 00:02:22,990
І перше, на що треба буде звернути увагу 
- це якими способами досягає користувач своїх 
цілей

13
00:02:22,990 --> 00:02:27,150
Що це мається на увазі? Наприклад, якщо брати 
десктопні програмки

14
00:02:27,150 --> 00:02:32,980
то якщо ви хочете активувати якусь дію, то 
в вас якби є дві можливості

15
00:02:32,980 --> 00:02:38,620
ви можете або через меню, через мишку туда 
добратися, або якщо є підключений Touch-екран

16
00:02:38,620 --> 00:02:42,990
то відповідно через дотики пальцями, плюс 
має бути специфіка того

17
00:02:42,990 --> 00:02:48,140
що палець достатньо такий грубий, товстий, 
тобто площа поверхні дотикання має бути великою

18
00:02:48,140 --> 00:02:54,790
Якщо ж ви використовуєте всякі-різні стилуси, 
електронні пера, відповідно там так само

19
00:02:54,790 --> 00:03:01,990
фокусування досягнення якогось меню, досягнення 
якоїсь кнопочки є по-інакшому

20
00:03:01,990 --> 00:03:09,880
І ще один спосіб - це клавіатурні комбінації, 
там де ви різними клавішами теж можете

21
00:03:09,880 --> 00:03:10,510
доступитися до якихось функцій

22
00:03:10,510 --> 00:03:14,470
Ну і ще один спосіб досягнення - це голосовий 
інтерфейс

23
00:03:14,470 --> 00:03:17,330
тобто розпізнавання тих слів, які ви будете 
говорити

24
00:03:17,330 --> 00:03:25,580
Ну це ми з вами частково проходили в третій 
лабораторці, там де рахували секунди, мікросекунди

25
00:03:25,580 --> 00:03:28,280
і там були приклади розрахунку отаких закономірностей

26
00:03:28,280 --> 00:03:35,060
Ну і тепер розберемо, які ж тут елементи 
треба врахувати, для того, щоб ми могли нормально

27
00:03:35,060 --> 00:03:37,690
мінімізувати ці от витрати

28
00:03:37,690 --> 00:03:42,580
Перш за все, нам необхідно завжди до всіх 
інтерфейсів, які ми робимо

29
00:03:42,580 --> 00:03:50,270
це рахувати ефективність. Ну в даному випадку 
у нас виступає енергетична ефективність

30
00:03:50,270 --> 00:03:54,810
тому що люди, вони ніколи не хочуть робити 
чогось багато.

31
00:03:54,810 --> 00:04:02,040
Вони хочуть завжди скоротити свій час, і 
скоротити свої дії для того, щоб досягти 
мети.

32
00:04:02,040 --> 00:04:10,450
Ну от на прикладі студентів це особливо видно, 
так? Ви хочете собі ефективність збільшити.

33
00:04:10,450 --> 00:04:16,350
Навіть сьогоднішня лекція, так? Хтось вирішив 
поспати, хтось вирішив подивитись

34
00:04:16,350 --> 00:04:23,110
в Youtube цю лекцію. Відповідно, ви скоротили 
час і покращили свою ефективність

35
00:04:23,110 --> 00:04:30,510
Плюс завжди ефективність - це еволюція, тобто 
ви зробили першу версію

36
00:04:30,510 --> 00:04:35,980
попробували, порахували часові закономірності, 
зрозуміли, що людина тратить меншу часу

37
00:04:35,980 --> 00:04:40,080
більш швидше виконує, менше часу їй потрібно, 
щоб з одного місця, наприклад, екрану,

38
00:04:40,080 --> 00:04:46,760
пересунути свій курсор в іншу точку екрану, 
якщо якусь дію він виконував, наприклад,

39
00:04:46,760 --> 00:04:49,960
в лівій зоні, то йому дуже довго переміщуватися 
в праву зону

40
00:04:49,960 --> 00:04:52,540
Відповідно це потребує  додаткові мікросекунди 
і час.

41
00:04:52,540 --> 00:04:57,860
Ви зробили одну версію, ви зробили другу 
версію, розвиваєте вашу складну систему

42
00:04:57,860 --> 00:05:05,490
Потім от коли ми зараз почнемо робити четверту 
лабу, різні гаджети, вони мають різні екранчики.

43
00:05:05,490 --> 00:05:08,020
Відповідно, там ефективності в різних екранах 
по-різному є

44
00:05:08,020 --> 00:05:12,040
Якщо ви берете ту саму програму, запускаєте 
на телевізорі великому, у вас

45
00:05:12,040 --> 00:05:17,040
тільки пульт є в руках, у вас там тільки 
стрілочки вправо, вліво, вверх, вниз,

46
00:05:17,040 --> 00:05:23,610
відповідно щоб досягти якоїсь там менюшки, 
досягти кнопочки, вам потратиться набагато 
більше часу

47
00:05:23,610 --> 00:05:29,620
і ефективність зменшиться. Якщо  в вас є 
маленький смарт-годинничок

48
00:05:29,620 --> 00:05:34,160
то на ньому багато елементів не розмістите, 
і вам  треба прогортувати, прогортувати, 
прогортувати

49
00:05:34,160 --> 00:05:37,430
один скрін, другий, третій, тобто послідовність 
кроків

50
00:05:37,430 --> 00:05:43,050
Відповідно, чим складніша система, тим на 
різних елементах, на різних гаджетах

51
00:05:43,050 --> 00:05:49,590
вона є по-різному ефективність рахується, 
відповідно, еволюція розвитку в вас буде

52
00:05:49,590 --> 00:05:55,380
Ну і відповідно чим менша кількість роботи, 
тим тіпа для нас є краще.

53
00:05:55,380 --> 00:06:00,230
Ну і відповідно в такому випадку наша система 
є кращою.

54
00:06:00,230 --> 00:06:05,960
Відповідно, рано чи пізно, серед всіх можливих 
гаджетів людина вибере собі тільки той гаджет

55
00:06:05,960 --> 00:06:07,250
який більше підходить під ту програму

56
00:06:07,250 --> 00:06:13,050
Або та програма, яка краще підходить під 
той гаджет, яким вона частіше користується

57
00:06:13,050 --> 00:06:16,340
І відповідно ви лишете тільки той інтерфейс, 
який вам потрібен

58
00:06:16,340 --> 00:06:20,010
Ну і відповідно в даному випадку для певної 
групи користувачів

59
00:06:20,010 --> 00:06:24,960
вона буде слугувати критерієм мінімізації.

60
00:06:24,960 --> 00:06:31,970
Ви так само зараз вчите деякі предмети, у 
вас там є. Ви шукаєте оптімум, оптимальність 
рахуєте

61
00:06:31,970 --> 00:06:39,110
мінімальні значення, максимальні значення, 
шукаєте точку найбільш ефективного застосування 
системи.

62
00:06:39,110 --> 00:06:42,910
Тут так само ми ці методи можемо застосувати

63
00:06:42,910 --> 00:06:50,220
тільки вони будуть застосовані до статистики 
використання людиною цих от інтерфейсів.

64
00:06:50,220 --> 00:06:54,710
Тепер, який ще один принцип треба завжди 
врахувати.

65
00:06:54,710 --> 00:07:00,420
Берете ви любий скрін, берете ви любу свою 
реалізацію, і ви завжди мусите подумати

66
00:07:00,420 --> 00:07:06,910
чи та інформація, яка подається на цьому 
скріні, подається якимись певними порціями.

67
00:07:06,910 --> 00:07:11,420
Якщо ви зразу всі можливі функції дасте зразу 
на весь один великий скрін

68
00:07:11,420 --> 00:07:17,110
на один екран, скорше всього людина дуже 
довго буде розбиратися

69
00:07:17,110 --> 00:07:20,930
де у вас що знаходиться, де у вас меню, де 
в вас панельки

70
00:07:20,930 --> 00:07:27,040
де у вас є область редагування, де у вас 
є область властивостей, займе великий час

71
00:07:27,040 --> 00:07:29,470
Рано чи пізно людина відмовиться від такої 
програми.

72
00:07:29,470 --> 00:07:33,930
Варто робити так зване прогресивне розкриття

73
00:07:33,930 --> 00:07:39,040
Тобто дати можливість людині поетапно удосконалювати, 
розширювати функціонал.

74
00:07:39,040 --> 00:07:46,640
Є перша версія - обмежили кількість. Через 
певний час запропонували ще якісь

75
00:07:46,640 --> 00:07:49,920
елементи інтерфейса добавити. Людина собі 
поставить на екран

76
00:07:49,920 --> 00:07:54,860
Потім ще добавити, ще. Або зробити, як роблять 
так звані  Візерти.

77
00:07:54,860 --> 00:08:00,980
Тобто один скрін - дві-три функції. Потім 
перехід на наступний скрін.

78
00:08:00,980 --> 00:08:04,830
Тут людина заповнила ще якісь дані. Потім 
ще перехід, ще перехід

79
00:08:04,830 --> 00:08:09,330
І от таким чином робити переходи. Цей підхід 
більше всього підходить до смарт-годинників

80
00:08:10,330 --> 00:08:15,410
якихось телефонів, тому що екран не дуже 
великий. Відповідно, багато елементів

81
00:08:15,410 --> 00:08:21,960
інтерфейсу, кнопочок не розмістите, відповідно 
треба порціями поділити велику частину

82
00:08:21,960 --> 00:08:32,830
І дуже часто, коли людина виконує якісь дії, 
з'являються різноманітні вікна-підтвердження.

83
00:08:32,830 --> 00:08:35,720
Тіпа Ви згідні зробити то-то-то. Людина галочку 
поставила

84
00:08:35,720 --> 00:08:39,860
А ви знову згідні? Знову галочку поставила. 
А ви знову згідні? Знов поставили.

85
00:08:40,860 --> 00:08:47,570
Або вспливаючі нотіфікації, періодично якісь 
новини, періодично приходить вам інформація

86
00:08:47,570 --> 00:08:52,990
що хтось вам щось написав. Відповідно то 
постійно треба закривати це вікно

87
00:08:52,990 --> 00:08:56,040
і постійно фактично це підтверджування.

88
00:08:56,040 --> 00:09:02,190
В таких випадках є зміст дати можливість 
людині вибрати, чи постійно показувати,

89
00:09:02,190 --> 00:09:08,960
чи тільки на початку сесії взаємодії, чи 
під кінець сесії, або зробити проміжки часу

90
00:09:08,960 --> 00:09:13,810
в яких не варто турбувати користувача. І 
вот тут якраз

91
00:09:13,810 --> 00:09:18,930
з'являються от такі от елементи підтвердження, 
і необхідно тільки тоді

92
00:09:18,930 --> 00:09:27,250
втручання людини, коли дійсно є щось важливе, 
і це дійсно впливає на загальну функціональність

93
00:09:27,250 --> 00:09:34,210
тому що надлишковість, велика кількість появи 
спливаючих вікон ясно що воно буде тільки 
заважати

94
00:09:34,210 --> 00:09:39,010
відволікати і людина буде виконувати не функціональну 
дію, а просто постійне

95
00:09:39,010 --> 00:09:45,150
відкидання відображення спливаючих вікон

96
00:09:45,150 --> 00:09:51,940
Відповідно ми тоді робитмо порціями. Якийсь 
певний час не відображаємо дані

97
00:09:51,940 --> 00:09:55,250
потім відображаємо. Потім знов відображаємо, 
не відображаємо. Або ставимо часові межі

98
00:09:55,250 --> 00:10:05,040
І відповідно користувачам необхідно якраз 
суть, тобто те, для чого призначена ваша 
програмка

99
00:10:05,040 --> 00:10:13,960
і тільки те має з'являтись на ваших скрінах. 
І от коли користувач дійсно

100
00:10:13,960 --> 00:10:19,040
захоче вибрати на екрані якесь зображення, 
або якусь картинку, або якісь там файлик

101
00:10:19,040 --> 00:10:23,040
і коли він дійсно активує функцію відображення 
різноманітних параметрів

102
00:10:23,040 --> 00:10:30,210
так звані властивості цього елемента, от 
тоді тільки і варто йому показати всі деталі.

103
00:10:30,210 --> 00:10:36,890
Тобто перелічити роздільчу здатність картинки, 
коли зроблена, де зроблена,

104
00:10:36,890 --> 00:10:42,990
GL-тег, хештеги, різноманітні ключові слова, 
і так далі.

105
00:10:42,990 --> 00:10:48,120
Тобто поки того користувач не просить, бокової 
панельки зі всіма властивостями

106
00:10:48,120 --> 00:10:53,990
як правило, не варто цього робити. Хай вона 
буде, але хай вона на початкових етапах

107
00:10:53,990 --> 00:11:00,520
буде ніби прихованою. Пізніше при потребі 
користувач її активує і от тоді ви йому відобразите

108
00:11:00,520 --> 00:11:02,160
всю подібну вичерпну інформацію

109
00:11:02,160 --> 00:11:09,050
Тобто знову ж таки оце є важливий момент, 
для того щоб ми працювали з вами тільки в 
основному порціями.

110
00:11:09,050 --> 00:11:15,840
Тепер, що ще важливе для створення скрінів

111
00:11:15,840 --> 00:11:23,080
Так зване навчання на прикладах. Дуже часто 
зараз в нових версіях програм

112
00:11:23,080 --> 00:11:27,320
особливо там де Google робить, вони коли 
випускають якусь зовсім нову версію

113
00:11:27,320 --> 00:11:33,660
зовнішнього вигляду їхньої програмки, вони 
люблять на етапі першого знайомства

114
00:11:33,660 --> 00:11:38,710
показати, активувати нові зони, і показати, 
де саме щось змінилося в інтерфейсі

115
00:11:38,710 --> 00:11:43,690
І показати такі невеличкі анімаційні відеоролики

116
00:11:43,690 --> 00:11:49,990
як нам користуватися частиною екрану. Наприклад, 
тут вони зробили якусь кнопочку

117
00:11:49,990 --> 00:11:55,040
Ага, зробили активацію таким затіненням, 
тут всьо затінилося, тут підсвітилося

118
00:11:55,040 --> 00:12:02,120
Показали. Потім сюди. Потім намалювали вони, 
куда дальше клікнути на наступну якусь кнопочку

119
00:12:02,120 --> 00:12:08,990
Тут затінилось, тут підсвітилось. І от так 
показують основні сценарії дії з новим скріном

120
00:12:08,990 --> 00:12:13,620
з новим розміщенням елементів. І тоді людина 
якраз на цих прикладах

121
00:12:13,620 --> 00:12:19,760
спокійнесенько собі буквально там за 30 секунд 
розбереться

122
00:12:19,760 --> 00:12:20,320
і дальше працюємо

123
00:12:20,320 --> 00:12:26,010
Тепер дуже часто коли створюється зовсім 
нова версія продукту

124
00:12:26,010 --> 00:12:30,910
завжди створюють так звані Intro Video

125
00:12:30,910 --> 00:12:34,050
в якому повністю показують основні послідовності 
дій користувача

126
00:12:34,050 --> 00:12:39,010
і, перед тим як ви завантажите програмку, 
ви подивилися на ці приклади

127
00:12:39,010 --> 00:12:43,630
зрозуміли, чи вам підходить ця програма, 
чи не потрібна вона

128
00:12:43,630 --> 00:12:50,380
які основні дії виконуються, і якраз от ті 
приклади показують сценарій взаємодій

129
00:12:50,380 --> 00:12:56,840
Тепер, ще один важливий момент - це є зовнішній 
вигляд вашої програми

130
00:12:56,840 --> 00:13:04,720
це модель взаємодії. Якщо ви просто зробите 
скрін і просто розмістите панельки

131
00:13:04,720 --> 00:13:08,420
і ніяким чином не буде зрозуміло, всі кнопочки 
одинаково виглядають

132
00:13:08,420 --> 00:13:17,270
всі кнопочки однаково мають іконки, розпізнати, 
яка кнопка робить яку дію по іконках теж 
є тяжко

133
00:13:17,270 --> 00:13:23,620
Відповідно мають бути якісь основні підказки, 
тобто якщо є якісь об'єкти, якими ви керуєте

134
00:13:23,620 --> 00:13:30,020
має з'явитися можливо біля нього кнопочки, 
в той момент, коли людина наводить курсором 
на цей об'єкт

135
00:13:30,020 --> 00:13:35,230
Тоді людина розуміє,  що ці кнопки впливають 
саме на цю зону екрану

136
00:13:35,230 --> 00:13:41,010
Якщо з'явилися верхні панельки, так само 
мають вони або спадати, або підніматися

137
00:13:41,010 --> 00:13:46,210
і відповідно людина знає, що вона саме працює 
з цією зоною екрану

138
00:13:46,210 --> 00:13:49,660
Тільки цими кнопками підсвічування, піднімання 
кнопочок.

139
00:13:49,660 --> 00:13:53,240
Тобто воно показує якраз активність режиму 
дій

140
00:13:53,240 --> 00:13:58,520
Тобто яка зона стає активною і чим можна 
керувати.

141
00:13:58,520 --> 00:14:04,760
Причому, керування. Якщо ви, наприклад, намалюєте 
кнопочку

142
00:14:04,760 --> 00:14:11,030
і, наприклад, там зробите, намалюєте, ну 
хай буде там наприклад олівчик такий

143
00:14:11,030 --> 00:14:18,190
Так, олівчик, тут от є, а потім наприклад 
витирання у вас буде хрестик.

144
00:14:18,190 --> 00:14:22,860
Там зелений колір, і тут зелений колір.

145
00:14:22,860 --> 00:14:28,470
Людина не зразу зрозуміє, де є знищувальна 
дія, а де є редагувальна дія

146
00:14:28,470 --> 00:14:33,370
Відповідно скорше всього ви мали би знищення 
зробити напевне червоною дію.

147
00:14:33,370 --> 00:14:39,990
Відповідно тоді є якесь чітке розпізнавання 
зовнішнього вигляду.

148
00:14:39,990 --> 00:14:46,160
Оце теж є важливо. Є цілі бібліотеки, є цілі 
каталоги іконок, і кожна іконка

149
00:14:46,160 --> 00:14:50,990
має мнемонічне зображення, по яких якраз 
і легше

150
00:14:50,990 --> 00:14:56,180
оцей зовнішній вигляд формувати. І що ще 
важливо - кнопка.