Веб-експерименти #1

Частина вступна, де я намагаюся розповісти, що нинішні підходи до адаптивності – дитячий садок (у сенсі, що це лише початок) у розвитку інтерфейсів та досвіду взаємодії

Сьогодні, говорячи про адаптивність у Інтернеті, зазвичай розуміють таку просту і тривіальну річ, як підстроювання відображення сайту (веб-додатки) під ширину екрана відповідного пристрою. Адаптивний дизайн, чуйний дизайн, гумовий дизайн - чого тільки не почуєш. Одні стверджують, що це все давно вже винайдено та впроваджено у повсякденну практику десять років тому, інші підносять це як проривний віяння, за яким майбутнє, треті проводять кордони між термінами, четверті думають, до яких ще «фішок» браузера можна адаптуватися, — і ось вже браузери впроваджують чуйні зображення, а не за горами перевірка наявності потрібної функціональності в CSS!, - П'яті намагаються дивитися на проблему ширше, включаючи проблематику і питання доступності, і питання підстроювання під різні способи введення, і багато чого ще. Звичайно, всі, в певному ступені, мають рацію.

Особисто мені найбільше симпатичний п'ятий табір (див. наприклад, статтю Аарона Густавсона про потенціал розвитку адаптивності “Where Do We Go From Here?”), який спонукає думати про адаптивність у ширшому значенні, розглядаючи сіточки, точки переходів та красиві анімації між різними станами лише як окремий випадок. Безумовно, випадок важливий, цікавий та цікавий для вивчення, гарний та зручний для показу, демонстрації та переконання замовників. (Щоб у вас не склалося відчуття, що я до цієї проблематики ставлюся зі стриманими емоціями, прямо скажу, що не ставлюся: я взагалі в захваті від можливих перспектив розвитку адаптивних інтерфейсів, але сіточки та інші фінтифлюшки – лише перший крок. Я був бищасливий, якби дизайнери з тим же ентузіазмом займалися дослідженням і розвитком цієї тематики, а не повторювали раз у раз побиті рішення.)

Крок за кроком ми (тут я узагальнюю індустрію) до цього йдемо.

Частина теоретична, в якій я приходжу до конкретного прикладу виходу за межі звичного шаблону

У мене вже деякий час є кумедний пристрій – MindWave Mobile, якому я довго не знаходив практичного застосування, якщо не брати до уваги «спробувати пораховувати хвилі свого мозку в демонстраційних прикладах».

Загалом, пристрій майже рік пролежав у мене в ящику, доки не сталося три події.

Частина практична, в якій відкриваю Visual Studio і починаю фігачить код

Все рішення, умовно, складається із трьох частин:

Додаток для Windows 10 на HTML/JS, у маніфесті якого як стартову сторінку прописаний зовнішній сайт, а також вказані права доступу до системних API - це "Project Westminster" (UWP Bridge для Windows 10).
WinRT-компонента для роботи з MindWave-пристроєм, обгортка над відповідною бібліотекою, позначена як доступна для веб-контексту (це важливо!).
Сам сайт на HTML/JS, розташований де-небудь, в якому зосереджена вся логіка та відображення.

Давайте розбиратися по порядку.

Додаток.Так як у мене в цій статті немає мети занурюватися докладно в іторію веб-додатків у Windows 10, скажу лише кілька речей.

Перше: у кожного додатка є стартова сторінка (entry point), з якої починається його робота. Раніше, у Windows 8, 8.1 та Windows Phone 8.1 у додатках на HTML/JS це могла бути лише сторінка всередині пакета. У Windows 10 вміст програми може майже повністю хоститисяна стороні сервера:

Тут я просто розмістив код на CodePen, для експерименту цілком підійде.

Друге: у додатку потрібно явно дозволити, з яких доменів дозволимо контент та доступ до тієї чи іншої функціональності (WinRT, компоненти).

WinRT-компонента.За основу я взяв готову бібліотеку, доступну через NuGet - Neurosky SDK від Sebastiano Galazzo. Для установки можна скористатися командою менеджера пакетів:

Для використання у додатку на HTML/JS однієї бібліотеки не достатньо, потрібна WinRT-компонента з відповідними даними. Тому, не довго думаючи, я обернув потрібні мені методи відповідну компоненту (фактично, клас на C#).

Сайт.В принципі, для експерименту абсолютно не критично, де хоститься дані (хоч localhost). Усередині сайту ви працюєте так, як ви звикли працювати, але з одним невеликим доповненням. Уявіть, що цільовий браузер раптом навчився знімати мозкову активність користувача і виставив вам відповідний API.

Дотримуючись традицій “feature detection”, ви перевіряєте доступність API і, якщо все в порядку, розширюєте функціональність сайту:

У потрібний момент часу до вас починають приходити дані:

І… це все! Вся магія у простоті цього рішення: все просто стикується і починає працювати.

Ну а далі ви робите все, що душа забажає. Я почав із простого експерименту і спробував дані візуалізувати:

У мозкових хвилях, мушу зізнатися, я повний профан. Я, звичайно, знаю, що вони, мовляв, різні бувають і в різні моменти життєдіяльності по-різному активуються. Наприклад, у якійсь розумній книжці розповідали, мовляв, тіта-хвилі пригнічуються при спостереженні за діяльністю іншої людини. Треба якось перевірити.

Але, нащастя, у пристрої є невеликий контролер, який уміє видавати магічні значення уваги та медитативності пацієнта. Для простих смертних – те, що треба.

Тут я і задумався, а навіщо це може знадобитися у практичному застосуванні. Почав уявляти сайти, які можуть реагувати на мозкову активність відвідувача.

Конверсія уваги на швидкість.Насамперед треба було придумати, як співвідносити увагу (0-100) зі швидкістю (1.0 – нормальна швидкість відтворення). Експериментальним шляхом вирішив обмежитися діапазоном швидкості від 0.5 (повільне відтворення) до 2.0 (швидке). Робимо просте відображення:

Всі параметри експериментальні без явної наукової складової, що стоїть за ними, хоч і з певною логікою. Основна ідея: при низькій увазі виставляємо маленьку швидкість, а далі робимо дискретне відображення.

Тому, також експериментальним шляхом та з особистих переваг я обмежився простою схемою:

збираємо значення від мозку за останні 5 секунд,
усереднюємо та оновлюємо відповідним чином швидкість відтворення.

Ось як це виглядає:

Частина заключна, із фантазіями

Звичайно, це лише експеримент з практичним підтекстом і навряд чи в найближчому майбутньому варто очікувати масове поява пристроїв, здатних транслювати сайту або додатку емоційний стан людини або якісь інтегральні показники його мозку або мозкової активності.

Якщо об'єкт взаємодії «на іншому кінці дроту» може «адаптуватися» під дії людини та її стан, це і є та сама адаптивність у сенсі цього терміну.

Або уявіть звіт Google Analytics абоЯндекс.Метрики за кілька років:

— Шеф, за свіжою статистикою, на тестовій групі користувачів, додавання зображень плямистих кошенят підвищило емоційну прихильність до нашого сайту та рівень залучення на 10 пунктів! - Відмінна робота! А ви пробували смугастих кошенят показувати? - Через годину спробуємо на другій групі, повернуся зі статистикою.

Технологічно, вся краса саме в тому, що це можна робити на тому самому сайті, що ви робите зараз, — на льоту, так само, як ви сьогодні збираєте статистику відвідувань. Просто потрібні користувачі зі спеціальним user agent, що вміє зчитувати потрібні показники.

Завершуючи, мої фантазії зазначу ще одне спостереження. Середня температура по лікарні підказує, що сьогодні стало модним робити адаптивні сайти, що підлаштовуються під форм-фактор пристрою користувача. Сподіваюся, що колись буде настільки ж модним робити сайти, що підлаштовуються під самих користувачів.

p.s. Чекаю, коли привезуть трекер очей.

Ви можете допомогти і перевести небагато коштів на розвиток сайту