Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Пользовательский интерфейс

Принципы и методы

Элементы

Хотелки и изобретения

Наблюдения

Ещё теги

Технозависимость и механический таймер

В квартире, в которой я жил зимой в Тель-Авиве, был такой таймер водогрейки:

Я не сразу понял, как он работает. Попробуйте додуматься.

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

Часовая стрелка нарисована на внутреннем кружке, минутная — физически торчит над ним. Они указывают текущее время. Стрелки медленно крутятся, и там даже слышно некое тикание, то есть часы всегда показывают реальное время. А ещё за минутную стрелку можно крутить руками, чтобы настроить часы (кружок с часовой при этом будет сам крутиться в двенадцать раз медленнее). Треугольничек, который показывает примерно на 23-24 тоже указывает текущее время, хотя и чуток не попадает. Сам треугольничек неподвижен, но вокруг него крутится внешнее кольцо с отметками от 1 до 24 часов. Поэтому он всегда смотрит на нужное место в этом кольце.

Красные фигулины соответствуют пятнадцатиминуткам. Если фигулина включена (то есть сдвинута внутрь), то в её пятнадцатиминутку водогрейка греет воду. На фото таймер настроен греть воду с 4 до 5, с 7 до 8, с 14 до 15 и с 18 до 19. При этом включение и выключение водогрейки в нужное время происходит как-то механически. Всё же крутится, и вот, когда треугольничек оказывается на территории включенных красных фигулин, водогрейка включается. Об этом свидетельствует зажигающийся красный светодиод в ЛНУ.

Один из признаков человечного интерфейса — отсутствие технозависимости (читайте совет). А тут явная технозависимость. То есть вся эта штука устроена так, как устроена, только для того, чтобы использовать часовой механизм и всё дальше работало само собой.

Когда я это понял, мне в голову пришли две не очень-то связанные мысли.

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

Во-вторых, я стал думать, как бы выглядел нетехнозависимый интерфейс для настройки этого таймера. Вот, допустим, у нас тач-скрин вместо этой шайбы, и что тогда? Оказалось, что задача не такая уж простая. Все штуки, которые приходят в голову, требуют кучи элементов управления, навигации между экранами. При этом ни на одном из этих экранов не будет настолько же наглядной картины расписания, как есть на фото выше (когда ты уже понял, как работает эта штука). Если же всё-таки попытаться разместить всё на одном экране, то все элементы будут слишком мелкими, и всё равно вряд ли удастся добиться такой же пятнадцатиминутной гибкости. Так что, возможно, этот интерфейс не такой уж плохой — примерно как классическая ручка громкости, которая в сто раз удобнее кнопок − и + и сенсорных панелей.

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

13 июня   пользовательский интерфейс   Тель-Авив

Быстрая установка ряда чекбоксов

Вспомнил одну штуку.

Во вчерашнем совете показал интерфейс с рядом чекбоксов:

Хорошо бы упростить человеку выделение ряда чекбоксов. Если я нажал клавишу мыши над чекбоксом и повёл мышь вертикально, не отпуская клавишу, то все чекбоксы, над которыми я «проехал», должны переключиться в то же состояние.

Уточнение про то же состояние — важное. Если первым нажатием я чекбокс включил, то все, по которым я потом веду, должны включиться, а не переключиться (как было бы, если бы я их прокликал по очереди). Если у вас есть под рукой Фотошоп, посмотрите, как там работают «глазики» в панели слоёв — вот так и надо.

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

13 июня   пользовательский интерфейс

Правило семи биатлонинок

Создатели айфона изобрели новый интерфейсный элемент — индикатор листания, в простонародье «биатлон»:

До айфона такое обозначали стрелками:

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

Когда страниц слишком много, биатлон разрастается до неприличной длины:

Поэтому важно помнить правило 7 биатлонинок: если биатлонинок больше 7 (±2, ясное дело), то дальше показывать их нет никакого смысла и можно спокойно намекнуть на продолжение уменьшением их размера:

В первом айфоне так ещё не умели.

Конечно, число 7 взято с потолка. Реальный смысл в том, что если биатлонинки сливаются в линию и не поддаются подсчёту, то можно их и прибрать.


См. также совет о правиле семи элементов.

3 апреля   пользовательский интерфейс

Информативность и ложная информативность

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

Вот завалялась картинка:

Я сначала случайно прочитал day light вместо day flight и подумал: ого, они показывают, с какой стороны будет солнце! Вот вам пример повышения информативности. Это полезно, это влияет на выбор места (обычно я в уме представляю, как полетит самолёт и где будет солнце, чтобы ни дай бог не попасть под него).

Информативность — про полезную информацию, связанную с задачей пользователя, а не просто любые данные, которые можно вывалить. Очень часто дизайнеры показывают количество чего-нибудь, что не имеет никакого значения:

Что мне толку с того, что вариантов именно 26? Как это повлияет на моё желание перейти по ссылке? Меня-то интересует, есть ли там что-то подходящее. Лучше написать, что за варианты: со шнурками и без, с прорезиненной подошвой. Или показать превьюшечки.

Количество имеет смысл, например, тут:

Число позволяет мне оценить, сколько работы меня ждёт (а окружающим — умею ли я пользоваться почтой; это, конечно, не мой скриншот). Если я недавно видел 2, а теперь вижу 5, я понимаю, что пришла новая почта.

Но чаще всего количество элементов внутри не приносит никакой пользы. В одной из позапрошлых версий Эгеи я перестал показывать количество черновиков рядом с их иконкой — это просто мусор.

2018   дизайн   пользовательский интерфейс   студентам

Замкнутость интерфейса: проверочные вопросы

Я вчера написал про замкнутость. Продолжаю в режиме черновиков.

Вот вопросы, которые дизайнер должен задать себе, глядя на каждый макет интерфейса:

  1. Для каждой нарисованной кнопки: что произойдёт, если нажать? Не обязательно должна быть прям картинка следующего состояния, но понадобится внятный ответ.
  2. Для каждой кнопки «Закрыть», «Скрыть» и подобных: как снова открыть, показать?
  3. Для каждой переменной величины: что, если значение будет отрицательным, нулём, единицей, в сто раз больше, в сто раз меньше, длиннее, короче? Что, если значение изменится в реальном времени?
  4. Для каждого переменного числа элементов (список, матрица иконок и т. д.): что, если элементов будет ноль, один; в сто раз больше, чем нарисовано. Что, если число элементов изменится в реальном времени?

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

2018   дизайн   замкнутость интерфейса   пользовательский интерфейс   студентам

Пример незамкнутости интерфейса

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

Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрулены. Может, не очень удачное слово, но пока такое. Я имею в виду, все пути в интерфейсе ведут в какие-то имеющиеся состояния внутри интерфейса.

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

Давайте вот разберём пример.

Скажем, надо сделать поле с автодополнением. Дизайнер рисует поле и показывает, как работает автодополнение:

А потом где-нибудь в описании пишет:

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

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

На самом деле их несколько, но разберём главный. Что конкретно будет в поле, когда я введу «ча»? Если автодополнение просто дописывает кусок в конце, то «ремонт часов» в поле никак не может появиться.

Дизайнер уходит думать и возвращается с уточнением в описании:

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

А сейчас видите дыру?

Судя по первому описанию, выпадайка должна появляться, если подходит несколько вариантов. А раз в поле сразу что-то дописано, то какой-то из вариантов, выпавших в выпадайке, должен быть как бы сразу выбран:

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

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

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

А могу нажать на стрелку вниз, и получится такое:

Так ведь? А что тогда во втором случае, если нажать на стрелку вниз, будет?

Так что ли?

Но это же странно. Он мне как бы с двух сторон дописал, но при этом с одной стороны предвыделил, а с другой нет. И сейчас если нажать бекспейс, уже не останется исходный текст. А могу ли я нажать стрелку вверх, и что при этом произойдёт, вернётся ли «ча» или останется «ремонт ча»? А если я стрелку влево нажму, выпадайка останется или пропадаёт?

Тут дизайнер перестаёт писать описание и начинает латать дыры на лету. Говорит, «давай в этом случае сделаем, чтобы бекспейс стирал всё дописанное и возвращал исходное „ча“, и стрелка вверх тоже».

Но такой патч ничего не замыкает, а только сильнее размыкает. Теперь у нас появляется какое-то особое состояние интерфейса, когда бекспейс работает не как обычно. И надолго ли это состояние сохраняется? Например, если я введу „с“, будет ведь вот так:

И это согласно исходному описанию, безо всяких поправок — ведь сейчас уже начало введённой строки совпадает с началом единственного подходящего варианта, и выпадайка не нужна. Но посмотрите ещё раз на предыдущую картинку. Какого хрена там делала выпадайка в точно такой же на вид ситуации? И почему выпадайка пропала при вводе буквы „с“? Уже совсем трудно предсказать, что сделает бекспейс. Помнит ли он ещё, что слово «ремонт» тут «ненастоящее»?

Это не то, чтобы неразрешимые проблемы. Тут нет никакой проблемы всё аккуратно распутать. Но просто маловероятно, что дизайнер хотя бы увидел сам этот ворох вопросов, если ему показалось, что добавленная им к исходному описанию мысль всё объясняет.

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

Я на этом возьму паузу, а вам всем домашка: замкнуть этот интерфейс.

И ещё почитайте про автодополнение через выделение.

2018   дизайн   замкнутость интерфейса   пользовательский интерфейс   студентам

Ещё штуки в Зерулсе 2.0

Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе.

Во-первых, у нас два стиля ссылок: синие для переходов внутри сайта и чёрные-подчёркнутые для уходов наружу. Мы решили не подчёркивать внутренние ссылки, как Википедия. Учитывая, что на сайте нет других цветов, путаницы между ссылкой и не ссылкой не возникнет.

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

В-третьих, смотрите, как это поле подвисает при прокрутке. В Сафари оно становится матово-прозрачным, но при этом в узкой полоске над полем прокручивающийся текст не просвечивает. Это нелогично, но так красивее.

В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.

В-пятых, поводите мышкой по ссылкам на главной. Обратите внимание, что там непрерывная зона клика, между ссылками нет дыр. Это чтобы Фиттс был доволен.

Наверняка что-то забыл.

См. также страничку о проекте.

2018   веб-дизайн   дизайн   Зерулс   пользовательский интерфейс   продукты   проекты

Покупка билетов на электричку в аэропорт Амстердама

Смотрите:

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

2018   Амстердам   видео   пользовательский интерфейс

Что почитать на выходных — 165

Вот:

  1. Designing Hebrew Type.
  2. Reachability by overscrolling. Написал в английском блоге о том, как делать интерфейс для Айфона ещё лучше.
  3. Software 2.0. Нейросети — это не просто ещё один инструмент в арсенале программиста, а вообще другой вид софта.
  4. Как объяснить дедушке веб-аналитику за 5 минут с картинками.
  5. «Я вижу в сети много эмоциональных комментариев на мою критику экономической программы Навального». Андрей Мовчан сильно про Навального.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

2017   Айфон   дизайн   политика   пользовательский интерфейс   программирование   чтиво

Модальность и редактор «Вим»

Читатель книги «Пользовательский интерфейс» Валентин Немцев написал мне интересное письмо про модальность и редактор «Вим». С разрешения Валентина привожу его целиком:

Илья, привет!

В Пользовательском интерфейсе ты упомянул редактор vi и его режимы для вставки и редактирования текста. Мне показалось, что ты считаешь, что модальные текстовые редакторы морально устарели.

Я пользуюсь исключительно vim (современная версия vi) для написания кода и хочу рассказать, почему я предпочитаю его всем другим редакторам кода, несмотря на модальность, надеюсь, это будет интересно.

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

Теперь про модальность. Продвинутые пользователи vim очень редко совершают модальные ошибки. Дело в том, что режим вставки не является режимом в строгом смысле, согласно определению Раскина. Этот режим включают только на время ввода текста, а так как за раз вводится небольшое количество текста, переход в режим вставки, ввод текста и выход из него становятся одним жестом. Это все работает, если ты выучил vim, умеешь печатать вслепую, ну или достаточно уверенно, иначе ввод текста не становится частью жеста и все разваливается.

На самом деле в vim больше десятка режимов, они включаются по-разному, но все они отключаются возвратом в нормальный режим, часть автоматически, когда vim распознает конец команды по смыслу, часть — нажатием esc. Вставка текста ощущается как ввод чего-то в Spotlight, где ты не забываешь нажать enter после окончания ввода. Индикация режимов существует, но нет нужды ей пользоваться. В случае, если в ответ на команду происходит что-то не то (например, из-за опечатки), я нажимаю esc, чтобы вернуть редактор к известному состоянию, после чего отменяю последнюю правку, если она случилась и пробую еще раз.

Вот пример относительно частой операции: я хочу заменить строку в кавычках (включая кавычки), внутри которых сейчас стоит курсор, на имя переменной var. Для этого я набираю ca"var, что можно читать как change text around quotes to «var». Vim переходит в режим вставки после нажатия ", я нажимаю esc, чтобы вернуться в нормальный режим. Описанная выше команда (включая возврат в нормальный режим) вводится в один жест, я не задумываюсь над последовательностью кнопок, не смотрю на индикацию текущего режима и никогда не забываю нажать esc в конце.

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

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

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

Последний на сегодня интересный факт про vim — его первую версию, vi, создали 40 лет назад для терминалов, у которых появился монитор вместо принтера (отсюда название, visual), а на клавиатуре не было стрелок. Современные версии vim до сих пор используют текстовый программный интерфейс, сделанный для терминалов тех лет. Несмотря на то, что этот интерфейс с тех пор получил поддержку мыши и другие обновления, по своей сути этот интерфейс ближе к телеграфу, чем к современным графическим интерфейсам. MacOS и встроенный в нее Terminal с запущенным vim, работающий на современном макбуке, до сих пор во многом эмулирует клавиатуру и принтер, подключенные по телефонному проводу к мейнфрейму с UNIX.

Спасибо за отличную книгу!

Это всё мне напомнило мои рассуждения про интерфейс пионеровских «Сидиджеев». В заметке я писал, что их интерфейс модален и рассказывал про разные его режимы. Но позже я понял, что на самом деле модальности там нет, потому что в каждый момент времени режим является непосредственным предметом моего внимания, а для модальности необходимо, чтобы режим я не осознавал. Я про такое ещё писал в заметке про прокрутку.

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

2017   книга «Пользовательский интерфейс»   пользовательский интерфейс