24 заметки с тегом

интерфейс

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

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

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

19 сентября   интерфейс   подсказка   поле ввода

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

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

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

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

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

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

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

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

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

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

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

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

2018   вёрстка   интерфейс   типографика

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

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

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

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

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

2018   видео   интерфейс   локус   предупреждение

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

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

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

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

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

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

Пн 10...16
Вт 11...15 17...18
Ср 11...12 14...18
Чт 11...13 15...16 18...19
Сегодня Пт 11...19
Сб, Вс 10...19
2018   интерфейс   информация   таблица
Ранее Ctrl + ↓