1
00:14:57,100 --> 00:15:02,500
Кнопка має виглядати саме так, що її можна 
натиснути.

2
00:15:02,600 --> 00:15:10,000
Дуже часто, особливо на сайтах ті місця сайту, 
які малюються

3
00:15:10,100 --> 00:15:14,900
сторінки, вони люблять дуже часто просто 
написати якийсь там текст

4
00:15:15,000 --> 00:15:19,800
і розпізнати, що це саме кнопка, на яку можна 
натиснути дуже

5
00:15:19,900 --> 00:15:24,700
рідко буває, так? Відповідно людина тільки 
потім догадається

6
00:15:24,800 --> 00:15:29,600
підвести курсорчик і можливо тут активується 
якась там підсвіточка

7
00:15:29,700 --> 00:15:34,500
і тільки тоді аж людина зрозуміє, що це була 
кнопка і її можна було натискати

8
00:15:34,600 --> 00:15:39,400
всі кнопки мають виглядати як кнопки. Тоді 
людина швидше їх знаходить.

9
00:15:39,500 --> 00:15:44,300
І швидше їх натискає. Якщо наприклад ви хочете 
щось відзначити

10
00:15:44,400 --> 00:15:49,200
то відповідно у нас є окремий елемент - checkbox, 
і тоді людина дійсно

11
00:15:49,300 --> 00:15:54,100
відмічає або галочкою, або там наприклад 
є ratio button, типу

12
00:15:54,200 --> 00:15:59,000
кружечком відмічає або іншим способом відмічає, 
або є такі перемикачі

13
00:15:59,100 --> 00:16:03,900
вліво -  вправо, повзуночок, що ви можете 
його посунути вправо - вліво.

14
00:16:04,000 --> 00:16:08,800
Відповідно, оцей от зовнішній вигляд він 
показує, що саме потім відбудеться, коли

15
00:16:08,900 --> 00:16:13,700
ви на нього натиснете, або його десь потягнете. 
Ми з вами ще в

16
00:16:13,800 --> 00:16:18,600
лабораторці номер один оцей каталог основних 
візуальних

17
00:16:18,700 --> 00:16:23,500
певних елементів з вами розбирали і ви їх 
рахували, їхні статистики

18
00:16:23,600 --> 00:16:28,400
так само знаєте тепер, як в інтерфейсах малювати 
ці кнопочки.

19
00:16:28,500 --> 00:16:33,300
Тепер, ще один важливий момент. Дуже часто, 
коли

20
00:16:33,400 --> 00:16:38,200
створюють новий програмний продукт, акцентують 
увагу якраз на перших первинних

21
00:16:38,300 --> 00:16:43,100
функціях і, як правило, перші версії програмних 
продуктів вирішують

22
00:16:43,200 --> 00:16:48,000
ті функції, які задумав колись розробник.

23
00:16:48,100 --> 00:16:52,900
Потім, чим дальше продукт розвивається, з 
новим кроком, нові вікна, нові функції

24
00:16:53,000 --> 00:16:57,800
добавляється, воно все обростає, обростає, 
обростає, і рано чи пізно кількість

25
00:16:57,900 --> 00:17:02,700
функцій так сильно збільшується, що просто

26
00:17:02,800 --> 00:17:07,600
втрачається первинна задача того програмного 
продукту, відповідно

27
00:17:07,700 --> 00:17:12,500
відображення інтерфейсу, відповідно вам треба 
або взагалі

28
00:17:12,600 --> 00:17:17,400
розбити на зони, тобто зробити: основна система, 
підсистема

29
00:17:17,500 --> 00:17:22,300
і ще одна підсистема. І щоб людина чітко 
розуміла переход.

30
00:17:22,400 --> 00:17:27,200
Ага, тут вона робила тільки одне, чітко перемикнулась 
на якусь другу зону

31
00:17:27,300 --> 00:17:32,100
тут робить зовсім інші функції. Тут зовнішню 
функцію, і ще одну

32
00:17:32,200 --> 00:17:37,000
І просто йде момент інтеграції - розділення 
видів функції на

33
00:17:37,100 --> 00:17:41,900
окремі мікропродукти і відповідно кожен мікропродукт 
вже потім далі має

34
00:17:42,000 --> 00:17:46,800
купу скрінів. Оцей от момент дуже важливий, 
бо інакше

35
00:17:46,900 --> 00:17:51,700
чим більше функцій ви запхаєте в один скрін, 
в одну програму, тим більше людина

36
00:17:51,800 --> 00:17:56,600
заплутається і рано чи пізно всеодно не перестане 
користуватись цим функціоналом

37
00:17:56,700 --> 00:18:01,500
ну і відповідно, з відповідними скрінами. 
Тепер, є таке

38
00:18:01,600 --> 00:18:06,400
поняття, як початкові налаштування, коли 
ви берете якусь нову програмку

39
00:18:06,500 --> 00:18:11,300
як правило, завжди вона має певні початкові 
налаштування

40
00:18:11,400 --> 00:18:16,200
і людина потім може пізніше їх підкоректувати 
під себе. Оці от

41
00:18:16,300 --> 00:18:21,100
початкові налаштування, як правило, виставляються 
на основі

42
00:18:21,200 --> 00:18:26,000
статистики, що більшість людей для себе вибирало

43
00:18:26,100 --> 00:18:30,900
в цих настройках. І, як правило, дуже рідко 
люди

44
00:18:31,000 --> 00:18:35,800
потім їх міняють. Тобто, як розробник або 
група розробників задало

45
00:18:35,900 --> 00:18:40,700
так ,як правило, ці налаштування вважаються 
найкращими і підходять для більшості

46
00:18:40,800 --> 00:18:45,600
наших користувачів. І

47
00:18:45,700 --> 00:18:50,500
вот якраз це намагаються зробити на основі 
оптимізації

48
00:18:50,600 --> 00:18:55,400
і оці от методи, які ви вчите на предметах 
оптимізації

49
00:18:55,500 --> 00:19:00,300
якраз там і застосовуються. Ну і ще такий 
принцип - "Сів і поїхав"

50
00:19:00,400 --> 00:19:05,200
Тобто зразу ви маєте програму, роздивились 
основні кнопки, роздивились

51
00:19:05,300 --> 00:19:10,100
основні меню, і , більшість функцій, які 
вам потрібно

52
00:19:10,200 --> 00:19:15,000
в цій програмі, ви одразу запам'ятали. Тобто 
не треба плодити велику кількість

53
00:19:15,100 --> 00:19:19,900
екранів, велику кількість скрінів і велику 
кількість

54
00:19:20,000 --> 00:19:24,800
різних видів налаштувань в різних зонах вашої 
програми.

55
00:19:24,900 --> 00:19:29,700
Краще зібрати десь в одне місце, людина на 
початках підкоректує під себе

56
00:19:29,800 --> 00:19:34,600
і дальше вже спокійно собі працює. Якщо вдруг 
вам

57
00:19:34,700 --> 00:19:39,500
ви заставите людину на початках дуже багато 
потратити часу ,щоб вона

58
00:19:39,600 --> 00:19:44,400
налаштовувала, погоджувалась з різними

59
00:19:44,500 --> 00:19:49,300
запитами на початках, зразу почуття

60
00:19:49,400 --> 00:19:54,200
якості людина втрачає, бо вона вважає, що 
розробники мусили за неї все

61
00:19:54,300 --> 00:19:59,100
зробити. А вона мусила просто взяти і користуватись. 
І отут відчуття

62
00:19:59,200 --> 00:20:04,000
довершеності вашого програмного продукту

63
00:20:04,100 --> 00:20:08,900
відповідно - інтерфейсу, зразу втрачається. 
І ось ці ось зусилля

64
00:20:09,000 --> 00:20:13,800
які людина затрачає на початкові налаштування 
і адаптацію, вона, як правило

65
00:20:13,900 --> 00:20:18,700
не хоче робити, відповідно, не буде

66
00:20:18,800 --> 00:20:23,600
вважати, що ваша програмка є бездоганною 
і, відповідно, інтерфейс теж є бездоганним.

67
00:20:23,700 --> 00:20:28,500
Тепер, які ще є елементи, на які ми

68
00:20:28,600 --> 00:20:33,400
маємо звернути увагу? Тобто, беремо кожен 
скрін, беремо

69
00:20:33,500 --> 00:20:38,300
кожну зону нашого екрану і починаємо роздивлятись, 
чи

70
00:20:38,400 --> 00:20:43,200
будуть у нас якісь психологічні обмеження. 
Є так звані психологічні

71
00:20:43,300 --> 00:20:48,100
обмеження для людити, тому що

72
00:20:48,200 --> 00:20:53,000
люди не люблять читати

73
00:20:53,100 --> 00:20:57,900
відповідно, чим більше ви понаписуєте всяких 
підписів

74
00:20:58,000 --> 00:21:02,800
і будете загромаджувати підписами весь екран

75
00:21:02,900 --> 00:21:07,700
це ніяк не буде корисне для користувача

76
00:21:07,800 --> 00:21:12,600
Він не хоче нічого бачити зайвого на екрані, 
тобто є акцент, так звана верхня

77
00:21:12,700 --> 00:21:17,500
зона і центральна зона. Як правило, боковим 
зором людина мало роздивляється

78
00:21:17,600 --> 00:21:22,400
відповідно, ми маємо взяти кожен скрін і 
почати

79
00:21:22,500 --> 00:21:27,300
тупо рахувати, скільки елементів є на екрані. 
Центральну зону

80
00:21:27,400 --> 00:21:32,200
людина розглядає, всьо що є по боках, як 
правило, не розглядає, відповідно, треба 
зменшити

81
00:21:32,300 --> 00:21:37,100
оті от всі елементи, які ми розміщуємо по 
боках, хіба от лишити

82
00:21:37,200 --> 00:21:42,000
додатковий режим, режим адміністратора. І 
там вже людина, якщо захоче, то буде роздивлятись

83
00:21:42,100 --> 00:21:46,900
оці панельки, стрічки стану, додаткові налаштування 
по боках і так далі.

84
00:21:47,000 --> 00:21:51,800
Далі, текст обов'язково мусить легко зчитуватись.

85
00:21:51,900 --> 00:21:56,700
Люди є дуже з різним зором, ви знаєте, чим

86
00:21:56,800 --> 00:22:01,600
старша людина стає тим зір погіршується, 
фокусування погіршується

87
00:22:01,700 --> 00:22:06,500
і відповідно всі підписи і текст, які ви 
робите, мають бути чіткі і контрастні

88
00:22:06,600 --> 00:22:11,400
шрифтом і має бути великим розміром, меншим 
розміром

89
00:22:11,500 --> 00:22:16,300
бути обов'язково чіткі края шрифтів

90
00:22:16,400 --> 00:22:21,200
Тому, що є шрифти такі рукописні, правописні, 
з такими різними

91
00:22:21,300 --> 00:22:26,100
завиточечками, при частій

92
00:22:26,200 --> 00:22:31,000
роботі, воно не стимулює акцент уваги, якщо 
не потрібно для

93
00:22:31,100 --> 00:22:35,900
художнього оформлення, так, там можна використати 
дєякі випадки. Але як правило, в технічних

94
00:22:36,000 --> 00:22:40,800
воно тільки заважає. Форматування.

95
00:22:40,900 --> 00:22:45,700
Форматування, всякі різні заголовки, нумерації

96
00:22:45,800 --> 00:22:50,600
Якщо є дуже велика програма, її потрібно 
ділити на зони. Людина всеодно

97
00:22:50,700 --> 00:22:55,500
не буде все проглядати. Зона одна, зона друга, 
третя. Як правило

98
00:22:55,600 --> 00:23:00,400
роблять такі панельки, які мають заголовки,і 
потім

99
00:23:00,500 --> 00:23:05,300
панелька пішла, отут йде якийсь текст. Отже, 
це пішла група

100
00:23:05,400 --> 00:23:10,200
різних кнопок. Потім, є ще одна панелька, 
знову вона отут зверху

101
00:23:10,300 --> 00:23:15,100
як правило, має заголовок. Що ще люди

102
00:23:15,200 --> 00:23:20,000
не люблять? Багатозадачності. Так, вони одну 
- дві функції виконують

103
00:23:20,100 --> 00:23:24,900
але тримати в голові штук десять різних дій

104
00:23:25,000 --> 00:23:29,800
як правило, є дуже проблемно. Якщо ви скоротите 
дії

105
00:23:29,900 --> 00:23:34,700
які можна зробити на екрані до трьох-чотирьох. 
Це буде нормально. Як правило

106
00:23:34,800 --> 00:23:39,600
паралельно дуже рідко коли хтось виконує. 
Ну ви напевно по смартфонах

107
00:23:39,700 --> 00:23:44,500
це бачите. В смартфоні, як правило дві-три 
програми одночасно

108
00:23:44,600 --> 00:23:49,400
запустити і дивитись на них майже неможливо. 
Є звичайно можливість

109
00:23:49,500 --> 00:23:54,300
поділу на два вікна, на три вікна, перемикання

110
00:23:54,400 --> 00:23:59,200
одну дію ви поробите в одному програмному 
продукті, в другому програмному продукті. 
 Так само по

111
00:23:59,300 --> 00:24:04,100
екранах. В смартфонах це особливо видно. 
В цьому є деякий

112
00:24:04,200 --> 00:24:09,000
зміст, всеодно ви концентруєте увагу більше 
на одному

113
00:24:09,100 --> 00:24:13,900
якомусь вікні, ніж паралельно на всіх.

114
00:24:14,000 --> 00:24:18,800
Ще є таке поняття, як відносна довжина рядка. 
Якщо ви напишете довгий текст

115
00:24:18,900 --> 00:24:23,700
якусь інструкцію, то довго ніхто читати не 
буде.

116
00:24:23,800 --> 00:24:28,600
І , враховуючи, що останні повідомлення

117
00:24:28,700 --> 00:24:33,500
різна переписка, вона зводиться до рядка 
з десяти

118
00:24:33,600 --> 00:24:38,400
п'ятнадцяти слів, іноді навіть коротше, в 
середньому десь сім слів

119
00:24:38,500 --> 00:24:43,300
в кожній переписці. Відповідно, з кожним 
роком, люди все менше і менше

120
00:24:43,400 --> 00:24:48,200
словами спілкуються і рядки тексту стають 
все коротшими і коротшими

121
00:24:48,300 --> 00:24:53,100
відповідно, і підписи в інтерфейсах, мають 
бути два варіанти:

122
00:24:53,200 --> 00:24:58,000
короткий, і при потребі, людина підведе курсорчик, 
з'явиться

123
00:24:58,100 --> 00:25:02,900
випадаюче віконечко, і деталі людина прочитає 
вже при потребі. Потім, є

124
00:25:03,000 --> 00:25:07,800
в тому віконечку спливаючому загальна велика 
інструкція

125
00:25:07,900 --> 00:25:12,700
і загальна допомога, відкриється окрема велика 
сторінка ,і вже там ви

126
00:25:12,800 --> 00:25:17,600
розпишете всі можливі пояснення до вашого 
інтерфейсу

127
00:25:17,700 --> 00:25:22,500
Тобто, знову ж таки, вибираємо перший принцип

128
00:25:22,600 --> 00:25:27,400
"Нічого зайвого і послідовність кроків". 
Тепер, ще

129
00:25:27,500 --> 00:25:32,300
один важливий елемент, який необхідний при 
створенні, це

130
00:25:32,400 --> 00:25:37,200
є так звані "Зорові обмеження". 70% всієї

131
00:25:37,300 --> 00:25:42,100
інформації, що сприйме або зрозуміє людина, 
пройде через зір

132
00:25:42,200 --> 00:25:47,000
відповідно, все, що треба -  треба відображати 
на екранах.

133
00:25:47,100 --> 00:25:51,900
Які при цьому виникають обмеження? Що людина 
бачить, а що людина

134
00:25:52,000 --> 00:25:56,800
не бачить. Дуже важливим є фокусування

135
00:25:56,900 --> 00:26:01,700
Хоч екран є великий, чим менша є площа

136
00:26:01,800 --> 00:26:06,600
тим більше фокусування. Вот чому наприклад, 
чому вам зараз зі смартфонами зараз є

137
00:26:06,700 --> 00:26:11,500
ну якби зручніше і легше? В них достатньо 
зручний і легкий фокус.

138
00:26:11,600 --> 00:26:16,400
Вам на екрані не треба роздивлятись ліві 
крайні,

139
00:26:16,500 --> 00:26:21,300
праві, верхні, нижні зони. У вас є чіткий 
фокус на

140
00:26:21,400 --> 00:26:26,200
невеличку зону на екрані. І нормально ви 
все там чітко роздивляєтесь все, що

141
00:26:26,300 --> 00:26:31,100
вам потрібно. Дві-три функції на екранчику 
і вам цього достатньо.

142
00:26:31,200 --> 00:26:36,000
І навіть якщо великий екран, якщо ви працювали 
з величезним

143
00:26:36,100 --> 00:26:40,900
планшетами, з великими моніторами. Ви би 
потім всеодно почали групувати

144
00:26:41,000 --> 00:26:45,800
зображення, групувати зони. І оці групування, 
вони би потім всеодно

145
00:26:45,900 --> 00:26:50,700
зробились до таких маленьких підекранчиків.

146
00:26:50,800 --> 00:26:55,600
І, коли є великий екран, якщо ви

147
00:26:55,700 --> 00:27:00,500
почнете зображення розкидати по всьому екрані, 
буде

148
00:27:00,600 --> 00:27:05,400
багато пустих зон, відповідно фокус уваги 
постійно стрибає

149
00:27:05,500 --> 00:27:10,300
і це теж частково ускладнює сприйняття, хоча 
при цьому людина

150
00:27:10,400 --> 00:27:15,200
чітко бачить зону. Але ускладнює процес пошуку 
зон, де сфокусувати

151
00:27:15,300 --> 00:27:20,100
свою зорову увагу. І, відповідно, туди клікнути 
мишкою.

152
00:27:20,200 --> 00:27:25,000
Чи перенести курсор. Тепер, зв'язність об'єктів.

153
00:27:25,100 --> 00:27:29,900
Тут теж є важливий елемент, людина мусить 
розуміти

154
00:27:30,000 --> 00:27:34,800
куди далі їй рухатись. Яким чином ці об'єкти 
між собою

155
00:27:34,900 --> 00:27:39,700
пов'язані? Якщо ви поставили їх близько один 
до одного, відповідно

156
00:27:39,800 --> 00:27:44,600
скорше всьо ті кнопочки будуть прцювати або 
в парі

157
00:27:44,700 --> 00:27:49,700
або вони якимось чином впливають на той об'єкт. 
Ну, наприклад

158
00:27:49,800 --> 00:27:54,600
як правило, робота з буфером, так? Вирізати

159
00:27:54,700 --> 00:27:59,500
буфер, скопіювати буфер, вставити буфер. 
Як првило, ці кнопочки ставлять

160
00:27:59,600 --> 00:28:04,400
поряд, бо це є група дій з буфером обміну. 
Якщо ви наприклад

161
00:28:04,500 --> 00:28:09,300
редагуєте шрифти в текстовому редакторі, 
нахилений шрифт

162
00:28:09,400 --> 00:28:14,200
жирний шрифт, підкреслений шрифт, там верхній 
індекс

163
00:28:14,300 --> 00:28:19,100
нижній індекс, відповідно, це все - робота 
з елементами

164
00:28:19,200 --> 00:28:24,000
шрифта на екрані. Як правило, всі ці панельки 
на екрані роботи групують

165
00:28:24,100 --> 00:28:28,900
Відповідно, людина коли вже виконала якусь 
одну дію

166
00:28:29,000 --> 00:28:33,800
клікнула, то вона потім вище клікнула на 
ще одну

167
00:28:33,900 --> 00:28:38,700
продовжувальну дію, наступних там дій. Відповідно, 
час руху по екрану

168
00:28:38,800 --> 00:28:43,600
менший, фокус уваги тут і так вже був, тобто 
можна ті мікросекунди

169
00:28:43,700 --> 00:28:48,500
врахувати і вже клік відбувається ближче.