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

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

Компьютер должен отличать для себя две позиции в длинном содержимом: прогресс и положение прокрутки. Но как это должно работать? Пользователя этим обременять не стоит — компьютер должен сам всё понимать.

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

Однако и непрерывность, и длительность — вещи условные. В книге я могу пропустить предисловие, потом пролистать где-то несколько скучных страниц или даже целую главу, и продолжать читать, сдвигая свою «весомую» позицию. В видео я могу промотать неприятные сцены или рекламу, также продолжая внимательно смотреть. Кроме того, я мог решить перечитать книгу или отдельную главу с начала; аналогично с видео. В общем случае сложно угадать, что я мог бы иметь в виду. Хочется учесть всю эту недискретность, визуализировать её для пользователя.

Лет десять назад Артём Горбунов придумал идею «термоскроллера». Типа лифт в полосе прокрутки «греет» шахту. Чем дольше мы находимся в какой-то месте, тем горячее она становится. Применим идею к визуализации положения в книге или видеоролике:

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

Люблю всякие идиотские глюки мозга, связанные со сбоем контекста. В школе я как-то повёл мышку за пределы экрана, чтобы нажать ею на кнопку выталкивания дискеты из дисковода. Ещё, бывает, смотришь газету и пытаешься увеличить фотографию двумя пальцами, чтобы разглядеть. А сейчас я подошёл к светофору, который показывал 47 секунд до моего зелёного света, и машинально даблкликнул в правый эйрпод — типа, промотать на 30 секунд вперёд.

Яндекс давно придумал такую фишку: пока ждёшь такси, тебе показывают какие-то товары на Яндекс.Маркете, и тебе они нет-нет, да нравятся. Я сам не раз туда залипал и добавлял в корзину всякие клёвые вещицы. А что, ловко придумано: тебе всё равно нечего делать, стоишь тупишь в телефон несколько минут — почему бы тебе чего-нибудь не продать? Удобно, когда у тебя «экосистема», и один акаунт работает и для такси, и для Маркета.

Да вот только за все месяцы или годы, что эта фича существует, я не купил ни одного товара! В корзине у меня там наверное их уже сто. Это поразительно, но эта штука вообще ничего не делает, чтобы я купил. Я просто добавляю клёвое, а потом приезжает такси и я больше никогда об этом не вспоминаю. Когда я жду следующее такси, мне не показывают, что я добавил в прошлый раз; меня просто развлекают новыми товарами, как будто это лента соцсети, а не магазин. И ни приложение Маркета, ни приложение такси не может додуматься прислать мне напоминалку, мол, эй, ты там добавил в корзину чё-то, может, хочешь купить?

Такое ощущение, что там оптимизируют метрику «сколько товаров пользователь добавил в корзину» или может даже «сколько времени пользователь провёл в приложении», но не метрику «сколько бабла нам принесла эта фича». Ну либо я один такой, а все остальные сами вспоминают о том, что они добавили в корзину, и потом где-то её находят (где?) и покупают себе всё.

Иногда у вас что-то не влезает в ширину и вы делаете листалку:

Если вы пытаетесь так показать товары, то это неудачный дизайн.

Дело в том, что листать — сложно. Прокрутка — самое приятное и дешёвое действие, для которого у нас есть выделенные жесты и элементы управления на всех устройствах. А для листания приходится целиться в какие-то маленькие стрелочки (Фиттс негодует), да ещё и кликать потом.

Почувствуйте внутреннее сопротивление, которое вызывает у вас интерфейс на примере. Это сопротивление возникает у любого пользователя, даже если он об этом не задумывается. Просто неохота листать, охота крутить!

Крутить в бока в принципе нормально, если ты смотришь с телефона или Мака, но у многих людей мышки с вертикальными колёсами — и в их мире нет нормальной горизонтальной прокрутки.

Бывает, листание делают автоматическим:

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

Кроме того, непонятно, что надо сделать, чтобы оно таки пролисталось. Тут тоже много вариаций: стрелочки для ручного листания могут появляться при наведении либо сами эти полоски могут кликаться (в любом случае снова привет от Фиттса). Всё это — это явные костыли.

Ещё хуже — когда листание работает вертикально:

Тут ко всем бедам добавляется ещё и противоречие с существующей прокруткой.

Если вы хотите показать несколько разных, но равнозначных элементов на странице, используйте прокрутку.

Листание можно использовать, если нужно закомпактить что-то второстепенное, например «С этим товаром также покупают». Да и то, лучше дать там какую-то кнопочку типа «показать всё». Листание нормально работает, если для понимания содержания достаточно только первого элемента, а остальные даны «до кучи», например, очень похожие примеры чего-нибудь, изучать которые нужно только самым внимательным читателям.

Ещё есть классная штука — скиминг. Это когда вы проводите мышкой по одной фотке, а она сменяется другими фотками этого же товара. Скиминг изобрёл Эпл в древней версии Айфото или Аймуви. Вот если у вас есть галерея товаров с нормальной прокруткой, а наводя на любой товар вы можете ещё и проскимить его разные фотки, то получается полный кайф.

Допустим у вас длинный документ с прокруткой, и вы смотрите на какую-то его часть далеко от начала. Тогда если в его начальной части что-то изменится — добавится или уберётся — у вас всё прыгнет:

Так ведёт себя и браузер. Так ведёт себя Гугль-док, когда кто-то пишет что-то в начале документа.

А должно быть вот так:

Прокрутка не должна прыгать из-за изменений за пределами поля зрения, хоть над ней, хоть под ней.

А вот ещё удивительный термин наоборот. Охлаждающая жидкость в автомобиле называется антифризом. А вот незамерзайка — это вообще зимняя жидкость для мытья стёкол.

Быть политиком, чиновником, общественным деятелем — большое дело, требующее активного вовлечения. Есть даже слово такое — активист. Но вот право избираться называется «пассивным избирательным правом».

В то же время сходить раз в несколько лет проголосовать — ничего не стоит. А право сделать это называется «активным избирательным правом».

Это так потому, что избирать это active voice, а быть избранным — это passive voice. Логика ясная (в отличие от логики, по которой синхронное называется асинхронным), но всё равно каждый раз приходится в голове это переворачивать. Но я считаю, что раз логика тут лингвистическая, то, надо было идти дальше, и по-русски называть это действительным и страдательным избирательным правом! Другой вариант — перейти на математическую терминологию и разделить избирательное право на действительное и мнимое.

На вчерашнем семинаре интерфейсного курса разбирали элемент настройки окна:

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

Чтобы исправить синтаксис, нужно все радиокнопки сделать обстоятельствами, то есть чтобы они отвечали на вопрос «как?»:

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

Автономность — это когда для понимания смысла элемента не нужно знать, что находится вокруг. Например, компьютер спрашивает, хотите ли вы удалить файл. Если подтверждающая кнопка называется «Да», то она неавтономна, потому что приходится читать, что спрашивают перед ней. А если кнопка называется «Удалить», то она понятна сама по себе, автономна.

Во втором варианте последняя радиокнопка потеряла автономность. Чтобы понять, что именно «никак», приходится читать общую подпись. А вариант «не открывается» был самодостаточным.

Что же в итоге лучше? Кажется, что удобство важнее формализма, и первый вариант побеждает. Но это ловушка! Нет причин выбирать между плохими вариантами, когда можно найти хороший. Вчера, например, сразу же придумали, что вместо слов можно использовать графику: понятные стрелки в две стороны; крестик между ними.

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

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

Но если от вас реально ждали результат к конкретной дате, то попытки сгладить углы звучат очень фигово и разрушают доверие. В каком смысле «немного не успеваю», мы же договорились, что сегодня будет готово?!

Если вы сорвали настоящий дедлайн, надо сначала сказать: «Мы договаривались, что сегодня я покажу то-то и то-то в таком-то объёме, в том числе... (перечислить всё, что вы обещали). К сожалению, я сделал не всё: не успел сделать то-то и то-то». Все извинения, уточнения и, главное, предложения должны звучать уже после этого. Доверие начинается с того, что клиент хотя бы видит, что вы понимаете, что создали проблему.

Сравните с «почти готово»: выглядит, как будто вы то ли не понимаете, что подвели, то ли надеетесь, что клиент этого не заметит. Клиенту нужно не просто искать решение, а ещё и, возможно, другого исполнителя.

Оправдания не имеют значения, и по идее надо сразу переходить к предложениям: что теперь делать-то? Но все мы живые люди, и иногда очень хочется объяснить, почему что-то не получилось. Если вы просто начнёте оправдываться, клиент будет думать, что решать созданную вами проблему вы не собираетесь. Поэтому нужно хотя бы сказать: «Я хочу объяснить, почему не получилось, и потом, если позволите, расскажу, как предлагаю исправить ситуацию».

Каким бы ни было ваше предложение, нужно убедиться, что клиенту оно подходит. «К завтрашнему дню уже точно будет» — это предложение, но оно звучит, как будто вы сами назначили себе новый дедлайн, не спросив мнение клиента. Мало кому такое понравится. Более нормальный вариант: «Чтобы доделать оставшееся, я бы хотел договориться взять ещё два дня». Тут клиент может либо согласиться, либо возразить, и тогда вы сможете думать дальше.

Почему «ещё два дня», если завтра уже точно будет? Да чтобы завтра опять не пришлось этот разговор проходить. Так-то никто не расстроится, если вы завтра принесёте.

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

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

Даже если для перехода к следующему шагу обязательно необходимо выбрать какой-то вариант, это не отменяет требования обратимости. Это чисто механический момент, не связанный с ролью элемента. Обратимость работает на уровне элемента, а не внешнего по отношению к нему интерфейса; она влияет на ощущение управляемости. Поле ввода не сопротивляется тому, чтобы из него стёрли все символы, даже если оно обязательное. Любой другой элемент, если он в принципе предполагает «пустое» состояние, должен давать к нему вернуться.

Другой пример необратимости — обозначение незаполненных обязательных полей красной рамкой после расфокуса. Изначально поле выглядит просто пустым; пользователь заходит в него, а потом выходит, так и не заполнив (или заполняет, но потом стирает то, что ввёл). Система обводит поле красной рамкой, подсказывая, что оставить его пустым нельзя. После этого невозможно вернуть поле в начальное «чистое» состояние. Решением могло бы быть плавное затухание красной рамки, чтобы поле вернулось в начальное состояние через секунду.