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

интерфейс

Позднее Ctrl + ↑

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

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

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

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

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

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

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

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

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

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

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

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

Криптовотч

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

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

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

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

2018   интерфейс   разряды   таблица

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

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

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

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

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

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

2018   автомобиль   интерфейс

Фичеризм

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

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

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

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

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