Избранное

Позднее Ctrl + ↑

На интерфейсном курсе: дизайн универсальных таблиц с непредсказуемым содержимым

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

00:00 Вопрос участника о дизайне таблиц
02:30 Идеологический ответ: в «админках» нужны хорошие таблицы, как везде
04:35 Практический ответ: о ценностях «универсального» дизайна, спасительных колонках и чересполосице

Это фрагмент № 39 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 9 декабря 2020 года.

До 27 июня идёт запись на курс, который пройдёт с 3 июля по 1 августа.

Почитать о курсе

Программа, отзывы, запись

Оплата сейчас или при получении

Нередко на сайтах есть выбор вариантов оплаты:

Оплата
картой онлайн
картой курьеру
наличными курьеру

С таким дизайном две проблемы. Одна простая: нефиг заставлять меня заранее решать, предпочту ли я наличные или карту, когда придёт курьер. Курьеры уже давно всегда с терминалами ездят (а если ваши не ездят, то пусть заездят), так что не грузите.

Остаётся два варианта:

Оплата
онлайн
курьеру

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

Суть выбора — вот:

Оплата
сейчас
при получении

Выбирать проще — конверсия выше.

Разрешить «бессмысленные» действия в интерфейсе

В одном из недавних видосов я говорил:

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

Я там привёл несколько примеров.

Как не надо

В Файндере несколько лет назад появилась команда New Folder with Selection (⌃⌘N). Если выделить несколько файлов или папок и вызвать её, она создавала новую папку, перемещала в неё всё выделенное и давала назвать папку. Похоже на функцию «Сгруппировать» в графических программах. Когда эта функция появилась, она работала только если изначально было выделено хотя бы два файла. Если просто курсор стоит на файле, «завернуть» его в папку этой командой было нельзя. Видимо, программист решил, что группировать один файл «нет смысла».

А у меня как у пользователя руки привыкли жать ⌃⌘N независимо от числа выбранных файлов, и для меня совершенно необъяснимо, почему в каких-то ситуациях это не работает. В более поздних версиях Макоса нелепое ограничение убрали.

В Фотошопе есть команда Copy Merged (⇧⌘C). Обычное Copy копирует выделенное изображение из текущего слоя, а Copy Merged копирует область выделения целиком, как если бы картинка была плоской, без слоёв. По загадочным причинам эта функция перестаёт работать, если картинка и так плоская, из одного слоя. Видимо, программист решил, что раз в этом случае обычное Copy делает то же самое, то делать Copy Merged «нет смысла».

А у меня как у пользователя руки привыкли жать ⇧⌘C независимо от количества слоёв в документе. Я вообще не осознаю, сколько там слоёв, я же их постоянно добавляю или склеиваю. То есть снова, для меня это просто выглядит так, будто функция иногда не срабатывает. Тут проблема усугубляется тем, что при копировании нет никакой обратной связи, поэтому ты даже не знаешь, что команда не сработала. Копируешь, идёшь в телеграм кому-то отправить, вставляешь — а там вставляется что-то, что у тебя до того в буфере обмена было.

В Гитхабе нельзя сделать ревью своего собственного пулреквеста. Про это я ничего не знаю, это мне рассказали.

И вот я вспомнил про ещё одно такое псевдобессмысленное действие.

На Маке есть сочетание клавиш ⌘H, которое означает скрыть текущее приложение. Я им пользуюсь постоянно: приложение остаётся в списке ⌘Tab, и если в него переключиться, то оно снова появится. Для сравнения, вызволять из Дока свёрнутое через ⌘M окно приходится с помощью мыши, да и анимация там утомляет. Так вот, Мак не даёт скрыть приложение, если оно последнее не скрытое. Видимо, программист решил, что в ситуации, когда не видно ни одного приложения, «нет смысла».

А у меня как у пользователя руки привыкли жать ⌘H независимо от того, сколько в данный момент в системе скрыто приложений, а сколько нет. Я вообще понятия не имею об этом! Вот передо мной последнее окно Файндера, я жму ⌘H, ожидая увидеть рабочий стол, а окно не пропадает! Можно было бы подумать, что это потому что рабочий стол сам является Файндером, но нет: если нажать ⌘H в Файндере, когда есть другие видимые приложения, окна Файндера без проблем исчезают.

Как надо

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

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

В Телеграме сообщения самому себе не только не запрещены, а логично называются Saved Messages и имеют собственное сочетание клавиш ⌘0. Более того, продуман сценарий сохранения: если нажать ⌘0 в окне пересылки сообщения, оно мгновенно перешлётся в сохранённые без перехода в сами сохранённые.

Ilya Birman: Give Me a Window

Спустя два с половиной года после прошлого трека я, наконец, написал новый:

Ilya Birman: Give Me a Window

Или на Саундклауде.

Невероятно, но я преодолел Эйблтон и написал в нём трек! Раньше я всё делал в ФЛ-cтудии. При этом последние лет десять, или сколько там у меня Мак, я мечтал с неё слезть. Наконец-то критическая масса знаний про Эйблтон набралась. В целом после ФЛ-студии в каких-то местах я просто прусь от того насколько легко и приятно всё в Эйблтоне; а в каких-то просто бешусь от того, насколько через жопу сделаны простые вещи.

Ещё техно:

Внесение асимметрии

Если какие-то вещи симметричны, логично и обозначать их симметрично.

А вот несколько примеров того, что иногда полезно внести асимметрию.

На знаках вылета и прилёта самолёт взлетает и приземляется:

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

Твой ряд и встречные ряды:

Из поездки Артемия Лебедева

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

Промежуточный сигнал светофора при переключении на зелёный и на красный:

Картинка Пиксабай

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

Математические знаки «плюс» и «минус», кстати, тоже несимметричны.

А у вас какие примеры есть?

На интерфейсном курсе: оставляйте введённый запрос в поле поиска и рисуйте клавиатуру

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

00:00 Я почувствовал неладное
01:08 Что не так: в интерфейсе нет анду и сохранения данных!
02:47 Смотрим дальше. Наде не забыть рисовать клавиатуру

Это фрагмент № 36 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 3 декабря 2020 года.

До 2 мая идёт запись на курс, который пройдёт с 8 мая по 6 июня.

Почитать о курсе

Программа, отзывы, запись

Осло

Осло — последнее место, откуда я пока не выложил фоток. Начну с общего впечатления от города.

Когда подъезжаешь на поезде из аэропорта к вокзалу, показывают клёвые дома:

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

Вот сразу любимая фотка про уют и благодать, да ещё и с уличными табличками:

Улица:

Река:

Мост:

Перекрёсток в центре:

Вид на королевский дворец:

Другой вид:

Вид, если немного отъехать от центра:

Ещё река:

Рельеф:

Лодочки:

Улица:

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

Есть крепость:

Где-то рядом:

В общем, погулять три дня вполне норм. Подробности — в следующих заметках.

Фотографии из поездки в сентябре 2019 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Осло! (Когда дадут)

Набуть

Многие ошибаются и говорят одеть вместо надеть — об этом много написано.

При этом иногда упоминается, что глагол обуть не имеет пары, и сразу означает и одеть и надеть, просто про обувь. Пишут, что нельзя одеть ботинки (можно надеть), а вот обуть можно и ботинки на Колю, и Колю в ботинки. И обычно это пишут в таком ключе, что типа глагол обуть удобнее и проще, не нужно думать, как правильно сказать.

Вообще, глагола набуть действительно нет, но из этого не следует, что глагол обуть можно использовать в его значении. Но это ладно.

Я не путаю глаголы одеть и надеть, потому что они выражают разные действия, а не потому что я выучил какое-то правило для их различения. Точно так же я не путаю ещё более похожие глаголы сесть и съесть, например. Просто потому они вообще про разное, с чего их путать?

Так что «фича» глагола обуть, что он якобы может означать и надеть обувь, представляется не фичей, а багом; у меня язык не повернётся сказать «обуть ботинки», я всё равно скажу «надеть ботинки», просто потому что зачем их обувать, у них что, ноги мёрзнут?!

См. также:

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

Показываю примеры клёвых интерфейсов, взаимодействовать с которыми можно не глядя: радиокнопки (настоящие), джойстики и рукоятки в самолёте, фотоаппарат Фуджифильм:

00:00 Интерфейс радиоприёмника: радиокнопки
02:30 Интерфейс американского военного самолёт
04:14 Интерфейс фотоаппаратов «Фуджифильм»

Это фрагмент № 33 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 25 ноября 2020 года.

До 2 мая идёт запись на курс, который пройдёт с 8 мая по 6 июня.

Почитать о курсе

Программа, отзывы, запись

Ранее Ctrl + ↓