Кирилл Беляев: заметки с тегом интерфейс

Игра для интерфейсных дизайнеров

Кирилл Беляев — Wed, 03 Apr 2019 08:37:32 +0300

Сantunsee.space — в целом отлична игра для интерфейсных дизайнеров. Но есть спорные места. Ниже два примера.

Тут вопрос не в том, как красивее обрезана картинка, как по какому изображению проще выбрать товар: по полному, но мелкому или крупному, но обрезанному. И тут нет одного верного ответа, потому что если продаются микроны, то обрезать картинку, наверное, не страшно. А если какое-нибудь специфичное оборудование, то лучше показать целиком. Можно сказать, что если нужно обязательно показывать фотографии целиком, то фиксировать высоту карточки не стоит. И в общем случае это так. Но ситуации бывают разные. Что если 90% каталога какое-нибудь специфичное оборудование снята под нужный формат? а остальные разномастные. Разве можно в этом случае считать фиксированные карточки плохими или кропить фотографии?

А тут правильным считаю вариант с разделителем, который на самом деле — объединитель. Возможно, со средней точкой выглядит и лучше, но авторы явно не понимают сути. Илья Бирман 2014-го в помощь.

Удаление позиций из корзины

Кирилл Беляев — Wed, 27 Mar 2019 09:34:19 +0300

Вот условная корзина на сайте с доставкой суши.

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

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

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

Если покупатель не сомневается, то может удалять позиции полностью несколькими кликами в одну и ту же кнопку, что вполне удобно.

Крайний случай в таймере Эпл-вотч

Кирилл Беляев — Tue, 19 Mar 2019 11:04:04 +0300

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

Вот таймер в Эпл-вотч. Серые кнопки «00:01:15» и «00:00:30» непохожи на кнопки. Ну, непохожи, проблема-то в чём? Понятно же, что их можно выбрать.

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

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

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

Теги в поле комментария

Кирилл Беляев — Tue, 27 Nov 2018 12:51:50 +0300

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

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

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

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

График кофейного вкуса

Кирилл Беляев — Fri, 23 Nov 2018 11:37:43 +0300

Вкус кофе описывают по-всякому. Даже так:

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

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

P. S. Спасибо Лео за ссылку!

Подсказка основных почтовых доменов

Кирилл Беляев — Wed, 19 Sep 2018 16:25:26 +0300

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

Пока реализацию встретил только у Али-экспресса. Отдельно отмечу, что классно знать о локально популярных доменах, как это делает Али:

Модальность меню-бара в Мак ОС

Кирилл Беляев — Wed, 22 Aug 2018 15:45:39 +0300

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

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

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

Чтобы закрыть приложение, запускают диалоговое окно «Завершить принудительно» в меню-яблоке, выбирают в нём зависшее приложение и жмут кнопку «Завершить принудительно».

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

Чтобы не сталкиваться с этой модальностью, жму на клавиши.

⌥⌘Esc вызывает диалог «Завершить принудительно».
Удерживание ⌥⌘⇧Esc закрывает активное приложение в любом состоянии.

Стиль кнопок и текста

Кирилл Беляев — Mon, 28 May 2018 10:57:06 +0300

Синхронизирую кнопки с текстовыми стилями. Обычно стилей 4-5, кнопок хватает трёх: размером с основной текст и с подзаголовоки 2-го и 3-го уровней. Или 2-го и 4-го — зависит от задачи. Для массового и броского — 1-го.

Такая синхронизация немного гасит шум и сильно упрощает сбор строк из текста и кнопок. А наличие принципа разгружает голову. При умелой вёрстке упрощает ЦСС и корректировки.

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

Локус внимания в предупреждении Ютьюба

Кирилл Беляев — Fri, 18 May 2018 11:31:10 +0300

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

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

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

Чтобы сделать сообщение ещё заметнее, увеличил кегль. Ещё увеличил область клика: была кнопка «Подробнее» — стала ссылка размером с весь текст:

Предположение о часах работы

Кирилл Беляев — Thu, 03 May 2018 12:35:18 +0300

На странице заведения Форсквер показывает часы его работы. Если время не указано точно, сервис предполагает, опираясь на чекины. Я за такие штуки, потому что они добавляют пользы.

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

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

Делал бы так. Если данные точные, заголовок будет просто «Открыто до 19:00».

Судя по чекинам, открыто:

	Пн	10...16
	Вт	11...15	17...18
	Ср	11...12	14...18
	Чт	11...13	15...16	18...19
Сегодня	Пт	11...19
	Сб, Вс	10...19

Удаление выборочных символов при вводе в поле

Кирилл Беляев — Wed, 28 Feb 2018 11:37:14 +0300

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

Если из лейбла (подписи к полю) очевидно, какие символы не подойдут, незачем разрешать их ввод. Лучше нагрузили компьютер уборкой лишнего и не просить человека что-то стирать.

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

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

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

Уплотнение столбцов в таблице

Кирилл Беляев — Fri, 26 Jan 2018 13:19:31 +0300

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

Скриншот с сайта университета Мэриленда

Столбцы А...F за 1990-й. Год можно вынести на строку выше и не повторять шесть раз. Этого хватит, чтобы сузить столбцы, но если оставшиеся заголовки будут длиннее подойдёт следующий приём. Показывать буду на таком кусочке:

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

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

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

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

Тестируйте перед внедрением.

Криптовотч

Кирилл Беляев — Tue, 23 Jan 2018 15:48:20 +0300

Смотрите, какой сайт с котировками криптовалют — cryptowat.ch

Терминальный минимализм такой. Я бы побился за меньшее число линеек — много шума от них:

В карточке ещё интереснее:

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

Кнопки на автоключах

Кирилл Беляев — Sun, 14 Jan 2018 20:44:21 +0300

Такой ключ у Фольксвагенов, у Шкод и Ауди похожие:

Кнопки похожи и стоят в ряду. Внешний вид подразумевает, что работают они одинаково. Верхняя кнопка разблокирует машину, нижняя — заблокирует, а средняя — разблокирует только багажник. Правда, непонятно тогда, как его заблокировать. Только со всем автомобилем? Или повторное нажатие в среднюю кнопку тоже сработает?

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

Через 1,5 года я обратил внимание на среднюю кнопку. И после пары раз запомнил, как работает. Внешним видом это не объяснить, но можно намекнуть, что не так же, как соседние. Вот пульт какой-то модели Тойоты. Очевидно, что «багажник» отличается:

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

Фичеризм

Кирилл Беляев — Mon, 08 Jan 2018 19:18:07 +0300

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

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

Вместе с возможностью приходит ответственность. Легко пойти по новой ссылке, но получится ли операция в целом быстрее или путь назад займёт больше времени, чем раньше. И вот человек перед выбором. А любой выбор сжигает мышление. Количество решений, которые человек принимает за единицу времени ограничено. Потом придёт усталость и работа на автомате. Если выбор будет сложным, ошибки будут чаще. Это вольный пересказ Максима Дорофеева, которого советую читать.

У меня план примерно такой:

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

Комментарии к сущностям в системах

Кирилл Беляев — Thu, 21 Dec 2017 12:26:34 +0300

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

Крутой Анатолий Буров показал другую сторону. Одно поле комментария расширяет функциональность системы, как несколько полей сразу. Люди могут писать в комментарии что угодно, любые данные, для которых нет полей. С хорошим поиском совсем сказка.

А в таблице можно делать так:

Анатолий Буров добавляет
Комментарии — это дешёвый способ сделать систему устойчивой к изменениям в окружающем мире.

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

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

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

Масштабирование карты и квазирежимы

Кирилл Беляев — Fri, 24 Nov 2017 10:45:20 +0300

Стоит такая интерфейсная задача — изменение масштаба на картах, которые занимают часть экрана.

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

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

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

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

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

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

Мишн контрол

Кирилл Беляев — Fri, 13 Oct 2017 14:01:41 +0300

Мак радует функцией «Мишн контрол». За неё отвечает клавиша «F3»:

Нажатие на одну кнопку показывает открытые окна — супер-наглядно:

Одно но: в этом режиме не видны свёрнутые окна. Ждать, что человек помнит свёрнутое, мега-оптимистично. Если сверить запущенные приложения в Доке с окнами и рабочими столами, можно заметить, что окон не хватает. Но это требует много времени и внимания — раз. А если у одного приложения открыто больше двух окон и хоть одно из них свёрнуто, найти его через Мишн контрол не получится — два.

Выделенное окно Файндера было открыто уже во время первого скриншота:

В настройках есть галочка «Группируй окошки по приложениям», советую включить, будет проще:

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

Надпись, как интерфейс

Кирилл Беляев — Fri, 22 Sep 2017 08:57:45 +0300

Надпись тоже бывает интерфейсом. На фото — капельная кофеварка, она готовит 1-1,5 литра фильтрового кофе. После приготовления, кофеварка подогревает кофейник, потому что сложно выпить литр кофе за раз. Чтобы аппарат не перегревался при подогреве и не вынуждал человека следить за температурой, в большинстве кофеварок есть автовыключение. Но не на всех есть надписи. Об функции написано в инструкции, но человек мог её не читать, потому что это 20-я кофеварка в его жизни, но у первых 19 не было автовыключения, или забыть, потому что люди что угодно забывают. Надпись тут работает, как обратная связь, постоянно показывает перманентное состояние системы.

Добавлено попозже. Меткий твит:

Строго говоря, надпись — это всегда интерфейс.

— Вадим Юмадилов (@Yumadilov) 23 сентября 2017 г.

Приём тары в Берлине

Кирилл Беляев — Wed, 24 May 2017 08:22:05 +0300

В Германии сдают и переиспользуют тару. В Берлине в большинстве продуктовых стоит автомат, который принимает пластиковые и стеклянные бутылки и банки.

Интерфейсы таких автоматов разные. В этот раз попадались образцовые. У автомата три элемента: отверстие для тары, двуцветный экранчик и кнопка. У другого экран был побольше и сенсорный, что позволило кнопке стать софтверной. То есть элементов всего два. Увы, выглядят грустно необоснованные переходы форм и огромный посредственный логотип.

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

В этот раз сдал на 2,95 €.

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

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