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 оцей зовнішній вигляд формувати. І що ще важливо - кнопка.