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

интерфейс

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

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

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

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

28 мая   вёрстка   интерфейс   типографика

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

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

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

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

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

18 мая   видео   интерфейс   локус   предупреждение

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

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

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

  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
3 мая   интерфейс   информация   таблица

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

В интерфейсах бывают специфичные поля, которые не принимает какие-то символы. Например, в телефонном номере или пин-коде не будет букв.
 
Если из лейбла (подписи к полю) очевидно, какие символы не подойдут, незачем разрешать их ввод. Лучше нагрузили компьютер уборкой лишнего и не просить человека что-то стирать.
 
Беспокоить сообщениями о неправильном вводе при этом не нужно. Какой шанс, что человек хотел ввести в номер букву? Подсказка «В номере телефона допустимы только цифры...» только отвлекает. Все знают, что букв там быть не должно: «Спасибо, кэп!»
 
Для таких полей в техзадании для разработчика пишут «нельзя ничего, кроме цифр, скобок, тире и дефисов». Это двусмысленно. Не реагировать на нажатия клавиш, или вводить, а потом стирать?
 
Предлагаю разрешать вводить всё, а после ввода неподходящего символа, сразу его стирать. Сначала кажется, что будет дёргающаяся ерунда. Но она даст пользователю обратную связь. Покажет, что и поле, и клавиатура работают. Ещё покажет, что человек ввёл что-то не то. Вряд ли он хотел писать буквы в телефонный номер, скорее промахнулся. Заметить стирающуюся букву проще, чем не введённую.

2018   интерфейс   машина потеет   поле ввода

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

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

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

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

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

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

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

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

2018   интерфейс   компактность   таблица
Ранее Ctrl + ↓