01:14.4
01:20.6
Так, отже, ми минулої лекції з вами завершили на цій структурі пам'яті
01:20.6
01:26.9
і сконцентрували нашу увагу на тому, яким чином людина формує свої уявлення
01:26.9
01:30.8
як вона сприймає те, що ми зробили для інтерфейсів
01:30.8
01:36.7
і яка її буде реакція. І ми на цьому тижні з вами переходимо до
01:36.7
01:39.6
частини лекції, це є предпроектні аспекти
01:39.6
01:45.9
тобто те що ми з вами якраз і робили в цих от перша лабораторна, друга лабораторна
01:45.9
01:50.1
частково ми робили ще в третій лабораторній, тобто досліджували, яким чином
01:50.1
01:57.2
які кроки нам треба зробити, щоб потім удосконалити ці інтерфейси і зробити їх більш кращими
01:57.2
02:01.6
і щоб ті взаємодії покращилися і скоротили час роботи людини
02:01.7
02:08.5
Якраз в четвертій лабораторній ви далі починаєте створювати нові ескізи для різних гаджетів
02:08.5
02:14.2
для різних платформ, і по ідеї якраз оті от кроки передпроектні ми маємо пройти з вами.
02:14.2
02:22.2
І перше, на що треба буде звернути увагу - це якими способами досягає користувач своїх цілей
02:22.2
02:27.0
Що це мається на увазі? Наприклад, якщо брати десктопні програмки
02:27.0
02:32.6
то якщо ви хочете активувати якусь дію, то в вас якби є дві можливості
02:32.7
02:38.3
ви можете або через меню, через мишку туда добратися, або якщо є підключений Touch-екран
02:38.4
02:42.9
то відповідно через дотики пальцями, плюс має бути специфіка того
02:42.9
02:48.4
що палець достатньо такий грубий, товстий, тобто площа поверхні дотикання має бути великою
02:48.4
02:54.0
Якщо ж ви використовуєте всякі-різні стилуси, електронні пера, відповідно там так само
02:54.1
03:01.0
фокусування досягнення якогось меню, досягнення якоїсь кнопочки є по-інакшому
03:01.0
03:09.5
І ще один спосіб - це клавіатурні комбінації, там де ви різними клавішами теж можете
03:09.5
03:10.9
доступитися до якихось функцій
03:10.9
03:14.2
Ну і ще один спосіб досягнення - це голосовий інтерфейс
03:14.2
03:17.1
тобто розпізнавання тих слів, які ви будете говорити
03:17.1
03:25.2
Ну це ми з вами частково проходили в третій лабораторці, там де рахували секунди, мікросекунди
03:25.2
03:28.5
і там були приклади розрахунку отаких закономірностей
03:28.5
03:35.2
Ну і тепер розберемо, які ж тут елементи треба врахувати, для того, щоб ми могли нормально
03:35.2
03:37.8
мінімізувати ці от витрати
03:37.8
03:42.7
Перш за все, нам необхідно завжди до всіх інтерфейсів, які ми робимо
03:42.7
03:50.8
це рахувати ефективність. Ну в даному випадку у нас виступає енергетична ефективність
03:50.9
03:54.4
тому що люди, вони ніколи не хочуть робити чогось багато.
03:54.5
04:02.3
Вони хочуть завжди скоротити свій час, і скоротити свої дії для того, щоб досягти мети.
04:02.3
04:10.9
Ну от на прикладі студентів це особливо видно, так? Ви хочете собі ефективність збільшити.
04:10.9
04:16.2
Навіть сьогоднішня лекція, так? Хтось вирішив поспати, хтось вирішив подивитись
04:16.2
04:23.4
в Youtube цю лекцію. Відповідно, ви скоротили час і покращили свою ефективність
04:23.4
04:30.0
Плюс завжди ефективність - це еволюція, тобто ви зробили першу версію
04:30.0
04:35.3
попробували, порахували часові закономірності, зрозуміли, що людина тратить меншу часу
04:35.3
04:40.7
більш швидше виконує, менше часу їй потрібно, щоб з одного місця, наприклад, екрану,
04:40.7
04:46.4
пересунути свій курсор в іншу точку екрану, якщо якусь дію він виконував, наприклад,
04:46.4
04:49.7
в лівій зоні, то йому дуже довго переміщуватися в праву зону
04:49.7
04:52.3
Відповідно це потребує додаткові мікросекунди і час.
04:52.3
04:57.7
Ви зробили одну версію, ви зробили другу версію, розвиваєте вашу складну систему
04:57.7
05:05.2
Потім от коли ми зараз почнемо робити четверту лабу, різні гаджети, вони мають різні екранчики.
05:05.2
05:08.7
Відповідно, там ефективності в різних екранах по-різному є
05:08.7
05:12.8
Якщо ви берете ту саму програму, запускаєте на телевізорі великому, у вас
05:12.8
05:17.4
тільки пульт є в руках, у вас там тільки стрілочки вправо, вліво, вверх, вниз,
05:17.4
05:23.6
відповідно щоб досягти якоїсь там менюшки, досягти кнопочки, вам потратиться набагато більше часу
05:23.6
05:29.0
і ефективність зменшиться. Якщо в вас є маленький смарт-годинничок
05:29.0
05:34.5
то на ньому багато елементів не розмістите, і вам треба прогортувати, прогортувати, прогортувати
05:34.5
05:37.4
один скрін, другий, третій, тобто послідовність кроків
05:37.4
05:43.2
Відповідно, чим складніша система, тим на різних елементах, на різних гаджетах
05:43.2
05:49.4
вона є по-різному ефективність рахується, відповідно, еволюція розвитку в вас буде
05:49.4
05:55.1
Ну і відповідно чим менша кількість роботи, тим тіпа для нас є краще.
05:55.1
06:00.1
Ну і відповідно в такому випадку наша система є кращою.
06:00.1
06:05.8
Відповідно, рано чи пізно, серед всіх можливих гаджетів людина вибере собі тільки той гаджет
06:05.8
06:07.9
який більше підходить під ту програму
06:07.9
06:13.2
Або та програма, яка краще підходить під той гаджет, яким вона частіше користується
06:13.2
06:16.8
І відповідно ви лишете тільки той інтерфейс, який вам потрібен
06:16.8
06:20.3
Ну і відповідно в даному випадку для певної групи користувачів
06:20.3
06:24.2
вона буде слугувати критерієм мінімізації.
06:24.2
06:31.4
Ви так само зараз вчите деякі предмети, у вас там є. Ви шукаєте оптімум, оптимальність рахуєте
06:31.5
06:39.4
мінімальні значення, максимальні значення, шукаєте точку найбільш ефективного застосування системи.
06:39.4
06:42.4
Тут так само ми ці методи можемо застосувати
06:42.4
06:50.2
тільки вони будуть застосовані до статистики використання людиною цих от інтерфейсів.
06:50.3
06:54.7
Тепер, який ще один принцип треба завжди врахувати.
06:54.8
07:00.5
Берете ви любий скрін, берете ви любу свою реалізацію, і ви завжди мусите подумати
07:00.5
07:06.1
чи та інформація, яка подається на цьому скріні, подається якимись певними порціями.
07:06.1
07:11.9
Якщо ви зразу всі можливі функції дасте зразу на весь один великий скрін
07:11.9
07:17.7
на один екран, скорше всього людина дуже довго буде розбиратися
07:17.7
07:20.7
де у вас що знаходиться, де у вас меню, де в вас панельки
07:20.7
07:27.1
де у вас є область редагування, де у вас є область властивостей, займе великий час
07:27.1
07:29.7
Рано чи пізно людина відмовиться від такої програми.
07:29.7
07:33.5
Варто робити так зване прогресивне розкриття
07:33.5
07:39.5
Тобто дати можливість людині поетапно удосконалювати, розширювати функціонал.
07:39.5
07:46.1
Є перша версія - обмежили кількість. Через певний час запропонували ще якісь
07:46.1
07:49.5
елементи інтерфейса добавити. Людина собі поставить на екран
07:49.5
07:54.7
Потім ще добавити, ще. Або зробити, як роблять так звані Візерти.
07:54.7
08:00.3
Тобто один скрін - дві-три функції. Потім перехід на наступний скрін.
08:00.3
08:04.0
Тут людина заповнила ще якісь дані. Потім ще перехід, ще перехід
08:04.0
08:09.9
І от таким чином робити переходи. Цей підхід більше всього підходить до смарт-годинників
08:10.0
08:15.6
якихось телефонів, тому що екран не дуже великий. Відповідно, багато елементів
08:15.6
08:21.4
інтерфейсу, кнопочок не розмістите, відповідно треба порціями поділити велику частину
08:21.4
08:32.1
І дуже часто, коли людина виконує якісь дії, з'являються різноманітні вікна-підтвердження.
08:32.1
08:35.7
Тіпа Ви згідні зробити то-то-то. Людина галочку поставила
08:35.7
08:39.9
А ви знову згідні? Знову галочку поставила. А ви знову згідні? Знов поставили.
08:40.0
08:47.3
Або вспливаючі нотіфікації, періодично якісь новини, періодично приходить вам інформація
08:47.3
08:52.0
що хтось вам щось написав. Відповідно то постійно треба закривати це вікно
08:52.0
08:56.0
і постійно фактично це підтверджування.
08:56.0
09:02.4
В таких випадках є зміст дати можливість людині вибрати, чи постійно показувати,
09:02.4
09:08.8
чи тільки на початку сесії взаємодії, чи під кінець сесії, або зробити проміжки часу
09:08.8
09:13.0
в яких не варто турбувати користувача. І вот тут якраз
09:13.0
09:18.2
з'являються от такі от елементи підтвердження, і необхідно тільки тоді
09:18.2
09:27.0
втручання людини, коли дійсно є щось важливе, і це дійсно впливає на загальну функціональність
09:27.0
09:34.7
тому що надлишковість, велика кількість появи спливаючих вікон ясно що воно буде тільки заважати
09:34.7
09:39.7
відволікати і людина буде виконувати не функціональну дію, а просто постійне
09:39.7
09:45.7
відкидання відображення спливаючих вікон
09:45.8
09:51.4
Відповідно ми тоді робитмо порціями. Якийсь певний час не відображаємо дані
09:51.4
09:55.6
потім відображаємо. Потім знов відображаємо, не відображаємо. Або ставимо часові межі
09:55.6
10:05.0
І відповідно користувачам необхідно якраз суть, тобто те, для чого призначена ваша програмка
10:05.0
10:13.3
і тільки те має з'являтись на ваших скрінах. І от коли користувач дійсно
10:13.3
10:19.3
захоче вибрати на екрані якесь зображення, або якусь картинку, або якісь там файлик
10:19.3
10:23.9
і коли він дійсно активує функцію відображення різноманітних параметрів
10:23.9
10:30.3
так звані властивості цього елемента, от тоді тільки і варто йому показати всі деталі.
10:30.3
10:36.3
Тобто перелічити роздільчу здатність картинки, коли зроблена, де зроблена,
10:36.3
10:42.0
GL-тег, хештеги, різноманітні ключові слова, і так далі.
10:42.1
10:48.1
Тобто поки того користувач не просить, бокової панельки зі всіма властивостями
10:48.1
10:53.2
як правило, не варто цього робити. Хай вона буде, але хай вона на початкових етапах
10:53.2
11:00.3
буде ніби прихованою. Пізніше при потребі користувач її активує і от тоді ви йому відобразите
11:00.3
11:02.3
всю подібну вичерпну інформацію
11:02.4
11:09.8
Тобто знову ж таки оце є важливий момент, для того щоб ми працювали з вами тільки в основному порціями.
11:09.8
11:15.3
Тепер, що ще важливе для створення скрінів
11:15.3
11:23.0
Так зване навчання на прикладах. Дуже часто зараз в нових версіях програм
11:23.0
11:27.8
особливо там де Google робить, вони коли випускають якусь зовсім нову версію
11:27.8
11:33.1
зовнішнього вигляду їхньої програмки, вони люблять на етапі першого знайомства
11:33.1
11:38.8
показати, активувати нові зони, і показати, де саме щось змінилося в інтерфейсі
11:38.9
11:43.0
І показати такі невеличкі анімаційні відеоролики
11:43.0
11:49.0
як нам користуватися частиною екрану. Наприклад, тут вони зробили якусь кнопочку
11:49.0
11:55.1
Ага, зробили активацію таким затіненням, тут всьо затінилося, тут підсвітилося
11:55.1
12:02.5
Показали. Потім сюди. Потім намалювали вони, куда дальше клікнути на наступну якусь кнопочку
12:02.5
12:08.8
Тут затінилось, тут підсвітилось. І от так показують основні сценарії дії з новим скріном
12:08.8
12:13.7
з новим розміщенням елементів. І тоді людина якраз на цих прикладах
12:13.7
12:19.0
спокійнесенько собі буквально там за 30 секунд розбереться
12:19.1
12:20.9
і дальше працюємо
12:20.9
12:26.3
Тепер дуже часто коли створюється зовсім нова версія продукту
12:26.3
12:30.2
завжди створюють так звані Intro Video
12:30.2
12:34.7
в якому повністю показують основні послідовності дій користувача
12:34.7
12:39.9
і, перед тим як ви завантажите програмку, ви подивилися на ці приклади
12:39.9
12:43.7
зрозуміли, чи вам підходить ця програма, чи не потрібна вона
12:43.7
12:50.4
які основні дії виконуються, і якраз от ті приклади показують сценарій взаємодій
12:50.4
12:56.9
Тепер, ще один важливий момент - це є зовнішній вигляд вашої програми
12:56.9
13:04.4
це модель взаємодії. Якщо ви просто зробите скрін і просто розмістите панельки
13:04.4
13:08.5
і ніяким чином не буде зрозуміло, всі кнопочки одинаково виглядають
13:08.6
13:17.1
всі кнопочки однаково мають іконки, розпізнати, яка кнопка робить яку дію по іконках теж є тяжко
13:17.1
13:23.3
Відповідно мають бути якісь основні підказки, тобто якщо є якісь об'єкти, якими ви керуєте
13:23.3
13:30.6
має з'явитися можливо біля нього кнопочки, в той момент, коли людина наводить курсором на цей об'єкт
13:30.6
13:35.7
Тоді людина розуміє, що ці кнопки впливають саме на цю зону екрану
13:35.7
13:41.7
Якщо з'явилися верхні панельки, так само мають вони або спадати, або підніматися
13:41.7
13:46.0
і відповідно людина знає, що вона саме працює з цією зоною екрану
13:46.0
13:49.5
Тільки цими кнопками підсвічування, піднімання кнопочок.
13:49.5
13:53.4
Тобто воно показує якраз активність режиму дій
13:53.4
13:58.4
Тобто яка зона стає активною і чим можна керувати.
13:58.4
14:04.0
Причому, керування. Якщо ви, наприклад, намалюєте кнопочку
14:04.0
14:11.8
і, наприклад, там зробите, намалюєте, ну хай буде там наприклад олівчик такий
14:11.8
14:18.3
Так, олівчик, тут от є, а потім наприклад витирання у вас буде хрестик.
14:18.3
14:22.1
Там зелений колір, і тут зелений колір.
14:22.1
14:28.4
Людина не зразу зрозуміє, де є знищувальна дія, а де є редагувальна дія
14:28.4
14:33.0
Відповідно скорше всього ви мали би знищення зробити напевне червоною дію.
14:33.0
14:39.7
Відповідно тоді є якесь чітке розпізнавання зовнішнього вигляду.
14:39.7
14:46.9
Оце теж є важливо. Є цілі бібліотеки, є цілі каталоги іконок, і кожна іконка
14:46.9
14:50.9
має мнемонічне зображення, по яких якраз і легше
14:50.9
14:56.7
оцей зовнішній вигляд формувати. І що ще важливо - кнопка.
