Я в интернете

РСС    Джейсон-фид

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

Избранное

Разложить прототип на макеты

Когда-то рисовать макеты было легко, а делать прототипы — сложно, но постепенно все научились делать и прототипы.

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

Сейчас благодаря нейросетям делать прототипы даже проще, чем рисовать макеты. Нейросеть просто выдаёт готовый кликабельный прототип; макетов в этом процессе в принципе не было и нет. Но что толку, что она его выдаёт? Как ты поймёшь, что там всё действительно по уму сделано?

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

Включение и выключение

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

Раньше выключатели физически замыкали и размыкали электрическую цепь. С появлением электронного управления возникли промежуточные состояния. Например, у некоторых телевизоров есть «жёсткий» выключатель на корпусе, и они включаются с пульта только когда он включён. Если выключить такой телевизор только с пульта, он переходит в режим ожидания (standby) и светит красным огоньком. У многих посудомоечных машин или электронных термометров есть отдельная кнопка включения. Всё, что она делает — включает возможность нажать следом кнопку стирки или измерения температуры.

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

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

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

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

Зелёный огонёк, что программа исправна

У меня очередной пример того, как можно сделать дикий интерфейс и не заметить этого.

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

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

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

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

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

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

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

Не надо так.

Стабильное меню на новом сайте

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

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

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

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

Можно положить внутрь каждого пункта невидимую жирную копию текста, распорку. Это лишний элемент в разметке, тоже не идеально, но смириться можно. Я не нашёл решения совсем без изменения разметки, но зато нашёл, как обойтись атрибутом, без лишних элементов: слово, жирность которого нужно мерить, ставится в атрибут, а потом в ЦССе делается псевдоэлемент, контент которого берётся из этого атрибута. Так уже неплохо.

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

Соответственно надо как-то так сверстать, чтобы подчёркнутая часть осталась по ширине видимого текста, а вокруг неё уже была обёртка по ширине жирного текста, которая бы влияла только на лейаут меню. При этом ради Фиттса область нажатия пункта меню у меня дотянута до середины отступа с соседним пунктом. То есть сама ссылка на самом деле больше и чем её обычный текст, и чем её жирный текст. И да, все эти отступы ещё и адаптивятся по-всякому.

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

В общем, теперь всё распутал: атрибут, используемый ЦССом для измерения жирного текста, стоит у обёртки, а сам текст пункта меню стоит у элемента внутри. Любой пункт можно делать и жирным, и обычным, и подчёркивание при наведении всегда остаётся ровно под буквами. Кликать можно в отступ между пунктами, и ничего никуда не прыгает при переключении. Жирность как бы переезжает с пункта на пункт при переключении, но каждый из них остаётся на своём месте. И расстояние между пунктами растягивается так, чтобы всегда было видно, что есть ещё пункты за краем. Красота!

Две формулы Эйлера

Можно встретить утверждение, что формула Эйлера — самая красивая формула в математике. Это вот эта:

eiπ = −1

Формула прекрасная, спору нет. Но авторы утверждения о её предельной красоте иногда приводят её в таком виде:

eiπ + 1 = 0

А тут уже никакой красоты. Тут и лишнее действие, и лишняя константа. Как будто кому-то показалось, что с минусом некрасиво, и он решил «поправить», прибавив единицу. Очень плохой вкус и полное игнорирование смысла ради формы.

Опросы пользователей

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

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

Получается, результаты у вас искажены: вы знаете только ответы самых нетребовательных пользователей. Более того, возможно, что ответы нетребовательных людей сами по себе низкого качества. Вряд ли они особенно старались и вдумчиво отвечали. Знаете же, как оставляют отзывы на маркетплейсах люди, которым нечего делать? «Отличная вещь, рекомендую, сами ещё не распаковывали». Ну вот.

Я не к тому, что опросы никогда не надо проводить (хотя я был бы счастлив). Я к тому, что если вы сначала решили использовать этот метод при всех недостатках, потому что лучше ничего не нет, то не стоит потом смотреть на его результаты так, будто они настоящие. Надо так и смотреть: «Ну вот, наш кривой метод дал какие-то такие кривые результаты. И что они значат на самом деле?»

Замкнутость интерфейса

 4 мин

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

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

Самое интересное и сложное — это то, что переход должен полностью определяться состоянием и событием. Он не может зависеть от истории предыдущих состояний (если только это не буквально переход по истории состояний типа «Назад» или «Анду»). Если переход из некоторого состояния S при событии E зависит от того, попали мы в S из Q или R, то это значит, что нет никакого состояния S, а есть состояния S1 (S после Q) и S2 (S после R), и важно это осознать. Может показаться, что это какая-то заумь и вообще, какая разница. Но если не обращать внимания на это, то в интерфейсе возникают неявные состояния, в которых вид и переходы не определены. Дизайнер-то думает, что рассмотрел состояние S, да вот только это мифическое состояние, а настоящие состояния S1 и S2 он не рассмотрел.

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

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

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

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

О замкнутости следует думать как о математическом качестве. Возьмём такую теорему: «Число 60 делится на все числа». Это легко проверить: на 1 делится, на 2 делится, на 3 делится, на 4 делится. Мне продолжать? Ну на 5 делится, на 6 делится, сколько ещё примеров надо? Какое число ни возьми — на всё делится: 10, 15, 20... Так ведь? Но нет, это ничего не доказывает. Чтобы доказать теорему, нужно искать не удачные примеры в большом количестве, а саму фундаментальную причину, по которой она неизбежно верна. В данном случае такой причины нет.

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

Список как способ организации интерфейса

Совет о списке как элементе графического интерфейса хочется дополнить ещё другим списком, который можно также назвать вертикальным стеком или даже бутербродом, хотя этот термин скорее из мира вёрстки. Или как бы вы это назвали? Поток?.. Давайте придумаем термин!

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

Картинка с сайта Эпла

На этих примерах с Айфона друг за другом идут тумблеры, элементы навигации, кнопки, заголовки и просто блоки текста.

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

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

Картинка с сайта Эпла

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

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

Студенческая работа

Остатки Венеции

 4 мин

Вот вам ещё пачка фотографий из Венеции.

Сначала дневной:

1
2
3
4
5
6
7
8
9
10

Потом ночной:

11
12
13
14
15

Ну и ещё пара наблюдений осталась. Вёрстка меню:

Шрифт на автобусе:

Фотографии из поездки в октябре 2015 года. Слетайте в Венецию!

Ещё Венеция:

Вывески и таблички Венеции

 5 мин

На днях я перенёс из раздела «Мир» рассказы про Венецию и Верону из поездок в 2015 году — заодно перевыгрузил фотографии в более высоком разрешении.

Оказалось, что из Венеции много всего ещё хочется показать. Например вот, разные вывески и таблички.

1

Дневная версия:

2
3

Номерок:

4

Крутой эффект утоньшения букв к низу:

5

Ещё:

6
7
8

Фото-блиц:

9

Спагеттерия-пиццерия:

10

Государственные дела. Карабинеры:

11

Милитаристы:

12

Прикольный логотип:

13

Выезд машин:

14

Запрет:

15

Удивительный выбор расположения подчёркивания:

16

Куча всего

17

И ещё одна:

18

Жёлтую табличку хочу себе.

Фотографии из поездки в октябре 2015 года. Слетайте в Венецию!

Ещё Венеция:

Ранее Ctrl + ↓