Information

[360 VR 4K] ч.3 Кроки проектування графічних користувацьких систем. Людино-машинна взаємодія

Basic shortcuts

Ctrl + SSave subtitles
Ctrl + click
Double click
Edit highlighted caption
TabEdit next caption
Shift + TabEdit previous caption
EscLeave edit mode
Ctrl + SpacePlay / pause video
Ctrl + HomePlay selected caption
Ctrl + EnterSplit caption at cursor position
at current time

Advanced shortcuts

Ctrl + InsertAdd new caption
Ctrl + DeleteDelete selected caption
Ctrl + IEdit currently played segment
Shift + EnterNew line when editing
Ctrl + LeftPlay from -1s
Ctrl + RightPlay from +1s
Alt + LeftShift caption start time -0.1s
Alt + RightShift caption start time +0.1s
Alt + DownShift caption end time -0.1s
Alt + UpShift caption end time +0.1s

Annotation shortcuts

Ctrl + 1Hesitation
Ctrl + 2Speaker noise
Ctrl + 3Background noise
Ctrl + 4Unknown word
Ctrl + 5Wrong segment
Ctrl + 6Crosstalk segment
You are in the read-only mode. Close
56:27.7
57:27.1
червоно тьм'яний, блакитно небесний, темно, сіро небесний,і так далі. Тепер коли ми з кольорами розібрались, з компонентами розібрались,з іконками теж розібрались, будемо знати шо можна малювати, шо не можна малювати. Необхідно розбратися з 13 кроком, це є організація та розташування вікон і сторінок, а також необхідно визаначити чітко шо буде на кожному скріні.Це якраз і була ваша лаба номер 2, лаба номер 4, там де ми спочатку малювали ескізи на основі сфотографованих скрінів, а потім намагались
57:27.2
58:00.3
таким чином нам необхідно наприклад зробити наново скріни для смартфонів для смарт годинників для різних видів планшетів таким чином виглядати буде в інтерфейсі горизонтальній частині в вертикальному положенні ну і відповідно оця організація скрінів вона мала б далі пришвидшити з максимальністю виконання завдань в 3 лабораторній там де ми вивчали
58:00.4
58:24.8
конгнітивні часові залежності використовував конгнітивний канкулянтор ми якраз задавали певні завдання що людина хоче виконати на ваші програмі на ваших екранах і вона мусила як раз знайти оту швидкість часові параметри коли нам необхідно пришвидшити о ту нашу роботу
58:24.9
59:01.6
і по ідеї після 4 лабораторки ми б теж мали ще раз наново другий раз перерахувати всі часові залежності і знову ж таки виявити чи нова форматування і леганізація є кращою чи можливо всетаки б варто було лишити щось інакше ну і такі окремі скріни ми з вами малювали в другій лабораторній потім в 4 починаючи ну і плюс починаючим з 2 лабораторної ви ще малювали о такі схеми сценарію тобто
59:01.7
59:28.5
де є стартове, стартова форма, стартове вікно, яким чином користувач намагається взаємодіяти з цим екраном,який подальший клік або подальшу наприклад перегляд чогось людина здійснює, яку дію він намагається зробити, ну в даному випадку, він тут роздивлявся список можливих параметрів, а потім вподальшому їх вибрав тут він натискав якусь кнопочку, кнопочка його перевела
59:28.6
60:28.4
кнопочка його перевела на наступний етап, на наступне вікно там з'явилось спливаюче вікно, тут він заповнював якиїсь текстове поле можливо шось зберігав,підтвердження було збереження і далі далі далі по сценарію ви просуваєтесь, по ваших вікнах в наступному етапі. Ось це ми робили з вами в 2 лабараторні і ви мусили б таке зробити ще в 4 так, там було із пунктів завдання в 4 лабі це розмалювати схеми сценарів для нових скрінів для телефонів, для планшетів, для годиників для елементів інших. Ще одним етапом було поділ вашого екрану на зони, тобто ми робили наприклад зону відображення 8 типу, або типу заголовку вашої програми ми робили якусь зону панелі інструментів, зону відображення основного вмісту
60:28.5
61:31.7
на екрані, робили оці сплітери, розділювачі на екрані і формували таку площину нашого .. і плюс оті елемнти шо ми з вами повибирали чи то кнопки будуть чи clikonbar чи menubar, потім вже на наступному етапі, це вже 5, 6 лабараторка ви програмним кодом нижній рівень реалізації робили вже командери на тих двох мовах ексемелівських які ми в цьому році взяли за основу. Коли ми зробили ось цю розкодровку далі нам необхідно перейти на ще один крок так, тобто тут ми розмалювали всі можливі переходи де що буде знаходитися, в попередній кроках ви самі розміщували на екрані.Ну і тепер ще один такий фінальний крок нам необхідно провести тестування, ну
61:31.8
62:06.4
нажаль в нас в цьому році провести якесь реальне тестування тих намальованих ваших скрінів не вийшло, але думаю, результати ваших лабараторних які ви зробили в 4 і в 2 лабараторні, ми з вами на наступний рік вже дамо наступному потоку, вже буде окрема лабараторка по тестуванню і повторному тестуванню що ж у вас получилось, чи вдалося вам в нових скрінах зробити якиїсь компроміс для пристрою і
62:06.5
63:02.3
тими початковими скрінами старого програмного продукту. Чи вдалося вам наприклад перемалювати, реорганізувати наново, по нормальному оці екрани. Ну відповідно, коли ми будемо робити оцінку цих взаємодій, ми наново будемо рахувати ці всі часові залежності. Будемо спостерігати за результатами взаємодії, чи людина нормально знайшла функціональні елементи. Будемо знову наново рахувати більш детально часові залежності і плюс наступні студенти коли візьмуть ваші нові ескізи, вони будуть намагатися знайти нам недоліки. Знайти недоліки, тобт, що вам не вдалося врахувати по функціоналу, що вам не вдалося реалізувати в вигляді скрінів, які ще скріни потрібні, які статуси, локалізації добавити і вже
63:02.4
64:01.9
вже якраз в наступних етапах вони будуть вносити ці зміни. Ну і відповідно будемо так само рахувати проценти,в кого ескізи вийшли більш вдалими, де вдалося врахувати моменти пристроїв, а де ні. І відповідно які результати виявляться найбільш трудомісткими для переробки. Тобто де є проблемні місця, скільки елементів прийдеться переробити і чи взагалі по часу людина нормально виконує дії з новими скрінами. Коли ми цю оцінку з вами зробимо, ми будемо перевіряти чи вони функціональні по часу і будемо визначати оцінку для того шоб зробити ще одну зміну в цих от прототипів
64:02.0
65:01.7
попробуємо зробити другу версію, реалізувати її більш так в простішому елементі, кожен скрін будемо ітераційно обробляти, переробляти, переносити кнопки, робити пропорцію, міняти колірні моделі, міняти іконки, міняти розміщення елементів і так от по колу, тіпа, проведемо такий от спіраль розвитку цих скрінів. Ну і потім попробуємо зробити якесь остаточне тестування, плюс ви там частково зробили програмну реалізацію мовами .. і .., відповідно попробуємо теж цей програмний код кудась підключити до реальних елементів. Яким чином ще буде проводитися тестування оцих ваших скрінів. Вот є ваш скрін і ви наприклад фокус уваги ваш тримається на певній зоні, наприклад ви роздивляєтесь
65:01.8
66:02.6
якісь певні іконочки, роздивляєтесь певну панельку, тут якісь панельки, десь ви тут мишкою водите, водите мишкою, мишка рухається, якісь там кроки ідуть, потім ви клікаєте, клікаєте, клікаєте, клікаєте, клікаєте, клікаєте і на основі ваших взаємодій фурмується так званна теплова карта найбільш інтенсивного поля активності. Тобто ви бачите шо ось тут в зонах в нас фактично нічого не було розміщено, тут були порожні елементи, вони просто займали частину екрану, десь елементи можна було почитати, якісь елементи можнарозгорнути, згорнути, якісь іконочки були.Відповідно інтенсивність уваги людини, тут була найбільша. Плюс ми будемо ще рахувати чітко час, протягом якого людина затрималась на певній зоні екрану, чому саме в цій зоні
66:02.7
67:00.4
найбільше ми затримались. Чому наприклад в цій зоні ми найбільше затримались. Чому тут затримались. Чому ось ця зона є зовсім порожня і вона якби не дає нам можливості теж пропорційно заповнити цю дію. Шо тут саме розмістити, якшо тут увага мала, можливо тут дати додаткові панельки, або перемісти частину керування на верхню зону, частину керування на нижню зону. Можливо збільшити кількість статусу або якісь демонстративні варіанти. Систему допомоги тут розмістити. Тоді людина буде виконувати дії і так само звертати увагу, ось тут час в нас так само буде тривати. Читати документацію більш швидше знаходити потрібні іконочки, клікати і виконувати свої дії. Тобто ось цей підхід для температурних карт, він достатньо
67:00.5
68:02.4
є такий цікавий,потрібний. І ось тут ви бачите приклади от таких досліджень електроних бібліотек, активність уваги людини була більша. Які частини екрану більше читалися, де вони менше читалися, де людина більше клікала. Ось це так саме є приклади, наприклад пристроїв. Тобто активність людини на десктопній версії була набагато більшаніж наприклад на менших екранах, зональність елементів була меншою, десь людина менше звертала увагу ніж на десктопній версії, те саме стосується і версії під мобільні пристрої.Тобто знов ми бачимо який елемент по активності можна поміняти, перегрупувати. Отут теж ви бачите температурні карти які активують увагу людини
68:02.5
69:00.7
де людина більше рухала мишкою чи пальцем. Отут на скріні ви теж бачите, що людина дуже інтенсивно постійно читала певний текст, де вона робили затримки очима, робила затримки і вдумливо шось вдивлялася. Отут вона на карті дуже багато всього роздивлялася ну напевно це десь її геолокація. Потім видно чітко треки переміщення мишок, тобто де вони найбільше пересувалися, де рух був її руки. Відповідно ось цей от шлях, це відповідно є затримки часу, тобто скільки часу, мікросекунд, людині приходлося, наприклад: зайди на основну сторінку, відкрий меню, десь там пересунся, залогінся, знайди де ти знаходишся, потім щось почитай, почитай, розберися з якимось текстом. І ось це є час час, затримки затримки
69:00.8
69:22.9
Отут так само показані способи, яким чином, можна в часі визначити акцент уваги. Тобто оць ці всі числа, це є певні коефіцієнти чосових елементів, можна чітко знати контент на який ми дивимось ну і плюс