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

Част от уводната част, където се опитвам да обясня, че настоящите подходи към адаптивността са детска градина (в смисъл, че това е само началото) в разработването на интерфейси и потребителско изживяване

Днес, говорейки за адаптивност в мрежата, те обикновено разбират толкова просто и тривиално нещо като настройване на дисплея на сайт (уеб приложение) към ширината на екрана на съответното устройство. Отзивчив дизайн, отзивчив дизайн, флуиден дизайн - не можете да чуете нищо. Някои твърдят, че всичко това отдавна е измислено и внедрено в ежедневната практика преди десет години, други го представят като пробивна тенденция, зад която е бъдещето, трети очертават граници между термините, трети мислят към какви други „чипове“ може да се адаптира браузърът - и сега браузърите въвеждат отзивчиви изображения и недалеч проверяват наличието на необходимата функционалност в настройките на CSS! за различни методи на въвеждане и много повече. Разбира се, всеки е прав до известна степен.

Лично аз харесвам най-много петия лагер (вижте например статията на Арън Густавсън за потенциала за развитие на адаптивност „Where Do We Go From Here?“), който насърчава мисленето за адаптивността в по-широк смисъл, разглеждайки мрежите, преходните точки и красивите анимации между различни състояния само като специален случай. Разбира се, случаят е важен, любопитен и интересен за изучаване, красив и удобен за показване, демонстриране и убеждаване на клиенти. (За да не имате усещането, че третирам този въпрос със сдържани емоции, ще кажа откровено, че не го правя: като цяло съм възхитен от възможните перспективи за развитие на адаптивни интерфейси, но мрежите и другите джаджи са само първата стъпка. БихЩастлив съм, ако дизайнерите са еднакво ентусиазирани да проучват и развиват тази тема, а не да повтарят изтъркани решения от време на време.)

Стъпка по стъпка ние (тук обобщавам индустрията) вървим към това.

Теоретичната част, в която стигам до конкретен пример за излизане от обичайния шаблон

От известно време имам едно забавно устройство, MindWave Mobile, за което дълго време не намирам практическа употреба, освен за „опитвам се да преброя мозъчните ви вълни в демонстрациите“.

Като цяло устройството лежеше в кутията ми почти година, докато не се случиха три събития.

Практическата част, в която отварям Visual Studio и започвам да се забърквам с кода

Цялото решение, условно, се състои от три части:

HTML/JS приложение за Windows 10 с външен сайт като начална страница и права за достъп до системните 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.

Следвайки традицията на „откриване на функции“, проверявате наличността на API и, ако всичко е наред, разширявате функционалността на сайта:

В точното време данните започват да идват при вас:

И... това е! Магията е в простотата на това решение: всичко просто пасва и започва да работи.

Е, тогава прави каквото искаш. Започнах с прост експеримент и се опитах да визуализирам данните:

Що се отнася до мозъчните вълни, трябва да призная, че съм пълен лаик. Разбира се, знам, че те уж са различни и се активират по различен начин в различните моменти от живота. Например в някаква умна книга казаха, че тета вълните се потискат, когато се наблюдава дейността на друг човек. Ще трябва да се провери по някакъв начин.

Но, наЗа щастие устройството има малък контролер, който може да издаде магическите значения на вниманието и медитативността на пациента. За обикновените смъртни - това, от което се нуждаете.

Тук също размишлявах и за какво може да е необходимо в практическото приложение. Започнах да си представям сайтове, които могат да реагират на мозъчната активност на посетителя ...

Преобразуване на вниманието в скорост.Първата стъпка беше да разберем как да свържем вниманието (0-100) със скоростта (1,0 е нормална скорост на възпроизвеждане). Експериментално реших да се огранича до скоростен диапазон от 0,5 (бавно възпроизвеждане) до 2,0 (бързо). Създаване на прост дисплей:

Всички параметри са експериментални без очевиден научен компонент зад тях, макар и с определена логика. Основната идея: с ниско внимание задаваме ниска скорост и след това правим дискретно показване.

Затова, също експериментално и от лични предпочитания, се ограничих до проста схема:

събира стойности от мозъка за последните 5 секунди,
осреднете и съответно актуализирайте скоростта на възпроизвеждане.

Ето как изглежда:

Последната част, с фантазии

Разбира се, това е само експеримент с практически нюанси и едва ли в близко бъдеще можем да очакваме масова поява на устройства, способни да предават емоционалното състояние на човек или някои интегрални показатели за неговия мозък или мозъчна дейност на уебсайт или приложение.

Ако обектът на взаимодействие "от другата страна на жицата" може да се "адаптира" към действията на човек и неговото състояние, тогава това е самата адаптивност в широкия смисъл на думата.

Или си представете отчет на Google Analytics илиYandex.Metrica след няколко години:

- Главен готвач, според последните статистически данни, на тестова група от потребители, добавянето на изображения на петнисти котенца увеличи емоционалната привързаност към нашия сайт и процента на ангажираност с 10 точки! - Страхотна работа! Опитвали ли сте да показвате таби котенца? —След час ще опитаме втората група, ще се върна със статистиката.

Технологично красотата е, че това може да се направи на същия сайт, който правите сега - в движение, точно както събирате статистика за посещения днес. Нуждаем се само от потребители със „специален“ потребителски агент, който може да чете необходимите индикатори.

Завършвайки фантазиите си, ще отбележа още едно наблюдение. Средната температура в болницата предполага, че днес е станало модерно да се правят адаптивни сайтове, които се адаптират към форм-фактораустройствона потребителя. Надявам се, че някой ден ще бъде толкова модерно да се правят уебсайтове, които се адаптират къмсамите потребители.

p.s. Чакам око тракера да пристигне.

Можете да помогнете и да прехвърлите средства за развитието на сайта