Часть вводная, где я пытаюсь рассказать, что нынешние подходы к адаптивности – детский сад (в смысле, что это только начало) в развитии интерфейсов и опыта взаимодействия

Сегодня, говоря про адаптивность в вебе, обычно понимают такую простую и тривиальную вещь, как подстройку отображения сайта (веб-приложения) под ширину экрана соответствующего устройста. Адаптивный дизайн, отзывчивый дизайн, резиновый дизайн – чего только не услышишь. Одни утверждают, что это все давно уже изобретено и внедрено в повседневную практику десять лет назад, другие преподносят это как прорывное веяние, за которым будущее, третьи проводят границы между терминами, четвертые думают, к каким еще «фишкам» браузера можно адаптироваться, — и вот уже браузеры внедряют отзывчивые изображения, а не за горами проверка наличия нужной функциональности в CSS!, — пятые стараются смотреть на проблему шире, включая в проблематику и вопросы доступности, и вопросы подстройки под разные способы ввода, и много чего еще. Конечно, все, в опеределенной степени, правы.


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

Впрочем, представьте на минутку, что некоторая система (приложение) адаптируется не только, как это принято сегодня, под размер экрана и его разрешение, но также и под способы ввода (на чем делается дополнительный акцент в Windows 10); под контекст человека: освещенность, время, местоположение, события и т.п. (о чем давно говорят как о “context-aware” системах, Cortana, кстати, вполне может служить таким примером); его состояние: эмоции и настроение, память, состояние здоровья, внимание (о чем отлично показано в художественном фильме «Она»), социальный контекст, включая рабочие взаимоотношения (к примеру, на основе офисного или социального графа), и!, безусловно, ограничения пользоветеля – временные или постоянные. Это такой космос от дизайна и проектирования интерфейсов, “rocket science”, в который индустрия только начинает погружаться, требующий соответствующих исследований и инженерных решений.

Шаг за шагом мы (тут я обобщаю индустрию) к этому идем.

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

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

Для тех, кто впервые про него слышит, в двух словах расскажу, что оно делает. Вы надеваете эту штуковину на свою голову, защелкиваете клипсу на мочке своего уха и еще один коннектор присоединяете ко лбу (при этом не сказал бы, что в таком состоянии можно заниматься активными упражнениями, либо очень долго терпеть прищепку на ухе). Далее цепь замыкается и устройство начинает считывать альфа-, бета-, и прочие ритмы вашего мозга и попутно вычислять два интегральных параметра: уровень внимания и уровень медитации. Все это по Bluetooth (BLE) передается на подсоединенный приемник сигнала (смартфон, планшет, ноутбук и т.п.), где соответствующее приложение что-то с этим делает.

Такое вот развлечение. Есть SDK, можно забавы ради написать приложение, где вы силой мысли раздавливаете магической энергией злобных букашек или троллей. Можно просто пытаться собирать статистику, но подозреваю, что нужно быть немного нейро-кем-нибудь, чтобы здравомысляще читать показания датчиков. Можно просто тренироваться в концентрации внимания или воспитании незамутненности сознания. ?



В общем, устройство почти год пролежало у меня в ящике, пока не случились три события.

1. нашлась хорошая обертка под WinRT, с которой я более-менее смог работать из JavaScript (мне так комфортнее, хотя без кода на C# не обошлось),
2. в контексте Windows 10 появились т.н. Hosted Web Apps (это тема для отдельного рассказа, но вкратце см. ниже),
3. я подумал, что а чего бы мне не попробовать адаптировать некоторый веб-опыт под мозговую активность.

Ну и попробовал.

Идея для эксперимента: а что, если видео на сайте будет менять скорость воспроизведения в зависимости от уровня внимания зрителя? Это как раз такой разрывной (в смысле шаблонов мозга) сценарий, который не про сеточки и адаптивные картинки.

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

Все решение, условно, состоит из трех частей:

1. Приложение для Windows 10 на HTML/JS, в манифесте которого в качестве стартовой страницы прописан внешний сайт, а также указаны права доступа к системным API — это "Project Westminster" (UWP Bridge для Windows 10).
2. WinRT-компонента для работы с MindWave-устройством, обертка над соответствующей библиотекой, помеченная, как доступная для веб-контекста (это важно!).
3. Сам сайт на HTML/JS, расположенный где-либо, в котором сосредоточена вся логика и отображение.

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

Приложение. Так как у меня в данной статье нет цели погружаться подробно в иторию веб-приложений в Windows 10, скажу лишь несколько вещей.

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

<Application Id="App" StartPage="http://codepen.io/kichinsky/pen/rVMBOm">

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

Второе: в приложении нужно явно разрешить, с каких доменов разрешим контент и доступ к той или иной функциональности (WinRT, компоненты).

<uap:ApplicationContentUriRules>
        <uap:Rule Type="include" WindowsRuntimeAccess="allowForWebOnly" Match="http://codepen.io/kichinsky/"/>
        <uap:Rule Type="include" WindowsRuntimeAccess="allowForWebOnly" Match="http://s.codepen.io/"/>
</uap:ApplicationContentUriRules>

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

PM> Install-Package Neurosky

Для использования в приложении на HTML/JS одной библиотеки не достаточно, нужна WinRT-компонента с соответствующими данными. Поэтому, не долго думая, я обернул нужные мне методы в соответсвующую компоненту (фактически, класс на C#).

[Windows.Foundation.Metadata.AllowForWeb]
public sealed class MindWaveDevice
{
        private IMindwaveSensor mindDevice;
        private MindWaveDevice(IMindwaveSensor device)
        {
                this.mindDevice = device;

                this.mindDevice.StateChanged += MindDevice_StateChanged;
                this.mindDevice.CurrentValueChanged += MindDevice_CurrentValueChanged;
        }
….
}

Как я говорил выше, класс нужно пометить метаданными, как доступный для веб-контекста. Наружу выставлено: получение объекта устройства с возможностью подписаться на события изменения состояния и данных. Дальше, как только устройство подсоединено и пользователь разрешил с ним работать, начинает валиться поток данных примерно такого формата:

public struct MindReading
{
        public int AlphaHigh;
        public int AlphaLow;
        public int BetaHigh;
        public int BetaLow;
        public int Delta;
        public int Attention;
        public int Meditation;
        public int GammaLow;
        public int GammaMid;
        public int Quality;
        public int Theta;
}

В JavaScript это все транслируется объектом с соответствующими числовыми (Number) полями.

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

Следуя традициям “feature detection”, вы проверяете доступность API и, если все впорядке, расширяете функциональность сайта:

if (window.MindWaveController != undefined) {
       MindWaveController.MindWaveDevice.getFirstConnectedMindDeviceAsync().then(function (foundDevice) {
              mindDevice = foundDevice;
              mindDevice.onstatechangedevent = stateChangedHandler;
              mindDevice.onvaluechangedevent = valueChangedHandler;
       });
}

В нужный момент времени к вам начинают приходить данные:

function valueChangedHandler(reading) {
       if (mindDevice.currentState == "ConnectedWithData") {
              attentionBar.value = reading.attention;
              meditationBar.value = reading.meditation;
              ….
       }
}

И… это все! Вся магия в простоте этого решения: все просто стыкуется и начинает работать.

Ну а дальше вы делаете все, что душе угодно. Я начал с простого эксперимента и попробовал данные визуализировать:

Часть экспериментальная, в которой я начал адаптировать видео с учетом сигналов коры моего головного мозга

В мозговых волнах, должен признаться, я полный профан. Я, конечно, знаю, что они дескать разные бывают и в разные моменты жизнедеятельности по-разному активируются. Например, в какой-то умной книжке рассказывали, мол тета-волны подавляются при наблюдении за деятельностью другого человека. Надо будет как-нибудь проверить.

Но, на счастье, в устройстве есть небольшой контроллер, который умеет выдавать магические значения внимания и медитативности пациента. Для простых смертных — то, что надо.

Тут я и задумался, а зачем это может понадобиться в практическом применении. Начал представлять себе сайты, которые могут реагировать на мозговую активность посетителя…



Поначалу я думал о разных сложных сценариях, начиная со сбора статистики о мозговой активности посетителя на разных страницах, до различных автоматизированных сценариев вроде скорости листания текста в книжке. Пока наконец, не дошел до проигрывания видео и не вспомнил, что в HTML5 Video есть прямо даже свойство playbackRate, которым можно управлять.

Дело за малым: добавить видео на страницу и посмотреть, что получится.

Конверсия внимания в скорость. Первым делом нужно было придумать, как соотносить внимание (0-100) со скоростью (1.0 – нормальная скорость воспроизведения). Экспериментальным путем решил ограничиться диапазоном скорости от 0.5 (медленное воспроизведение) до 2.0 (быстрое). Делаем простое отображение:

var playRates = [0.5, 0.7, 0.8, 0.9, 1.0, 1.1, 1.2, 1.4, 1.6, 1.8, 2.0];
function attention2speed(attention) {
        var speed = 0;
        if (attention > 30) {
                speed = playRates[Math.floor((attention - 30) / 7)];
        } else {
                speed = 0.5;
        }
        return speed;
}

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



Следующий шаг: менять скорость воспроизведения. К сожалению, попытка сделать в лоб, то есть менять скорость воспроизведения при поступлении новой информации, с треском провалилась. Во-первых, значения внимания скачат, то есть их нужно усреднять, а во-вторых, при слишком частом обновлении (например, на каждой порции данных или каждом кадре) скорость воспроизведения видео начинает «лагать» — и слушать его откровенно становится невозможным.

Поэтому, также экспериментальным путем и из личных предпочтений я ограничился простой схемой:

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

Примерно так:

function getMidSpeed() {
       var speed = 0;
       var count = speedBuffer.length;

       if (count == 0) {
              speed = video.playbackRate; // оставляем как есть
       } else {
              for (var i = 0; i < count; i++) {
                     speed += speedBuffer[i];
              }
              speed = speed / count;
       }
       return speed;
}

function updatePlaybackRate() {
       var speed = getMidSpeed();
       speedBar.value = speed;
       video.playbackRate = speed;
       if (video.paused) video.play();
       speedBuffer = [];
}

Вот как это выглядит:

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

Конечно, это всего лишь эксперимент с практическим подтекстом и навряд ли в ближайшем будущем стоит ожидать массовое появиление устройств, способных транслировать сайту или приложению эмоциональное состояние человека или какие-то интегральные показатели его мозга или мозговой активности.



Хотя помните «девушку» из фильма «Она», по идее, в фильме акцент делается на голосовое управление и взаимодействие, но раз уж герою что-то поместили в ухо, почему не предположить, что это что-то умеет читать пульс и, в перспективе, снимать некоторые другие параметры?

Если объект взаимодействия «на другом конце провода» может «адаптироваться» под действия человека и его состояние, то это и есть та самая адаптивность в широком смысле этого слова.

Или представьте себе отчет Google Analytics или Яндекс.Метрики через несколько лет:

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

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

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

p.s. Жду, когда привезут трекер глаз.