29 заметок с тегом

интерфейс

Позднее Ctrl + ↑

Радио- и мультигруппы

Радиокнопки дают выбор одного из нескольких, а чекбоксы (флаговая кнопка :-) — нескольких из нескольких:

Оба элемента управления не компактны. Запись в строку не спасает: чередование элементов и пробелов шумит. (Если пунктов много, сложно понять, сколько конкретно.)

Вторая проблема — размер кликабельной области. Радиокнопка и чекбокс маленькие. Придётся целиться — Фитс не обрадуется. Кликабельную зону увеличивают за счёт лейбла. Но пока он остаётся простым текстом об этом сложно догадаться. Подчеркивание (и по-хорошему пунктирное) добавит шума.

Умные ребята придумали заменить радиокнопки радиогруппами (название уже прижилось). Они компактны и легко описываются стилями без картинок:

Но если в группе только 2 элемента не очевидно, какой из них выбрали. За этим стоит внимательно следить. Явная тень делает выбранный элемент очевидным (он вдавлен), но, увы, не всегда подходит к общему стилю:

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

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

Чтобы группы одного интерфейса легче узнавались, когда на экране только одна группа, советую по умолчанию не выбирать ни одного в мультигруппах:

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

Ещё работу мультигрупп из 2-х элементов хорошо показывает плюс:

 1 комментарий    421   2015   интерфейс   мультигруппа   радио-группа

Обновление графика финишей

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

Особенно интересно было пересобрать финиши. Было:

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

Склеиваю шкалы в одну и выделяю главное:

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

Чтобы исправить проблему поставлю время над ручкой ползунка:

Лучше, но теперь цифры над ручкой пересекаются с цифрами на шкале. Увеличиваю ручку и ставлю текущее время на неё. Дополнительный плюс — большую ручку удобнее хватать (см. закон Фитса у Раскина):

Конструкцию починил. Теперь детали. Пройденный путь слабо контрастирует с линейкой шкалы. Убираю линейку и делаю рисочки заметнее — теперь они «держат» шкалу. Путь выравниваю по высоте с рисочками.

От ползунка идёт линейка. Внутри ручки она розовая, а снаружи — чёрная, неконтрастная к графику. Два цвета для одного элемента — перебор. Объединил в один и покрасил в него же время на ползунке (см. естественное соответствие в книге Нормана):

Нижняя линейка с рисочками теперь не нужна. Убираю:

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

Ручная коробка переключения передач

В автошколах учат во время движения держать руль обеими руками — так безопаснее. Одна рука может соскользнуть, одной руке без «перехвата» может не хватить радиуса, на который нужно повернуться руль.

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

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

Если же я оставляю руку на ручке, режим превращается в квазирежим. По положению руки я непрерывно отслеживаю текущую передачу.

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

Логин

Благодаря Бюро известно, что «интерфейс — зло», и, следовательно, «вход под паролем» тоже. Но на большинстве ресурсов он есть и с этим нужно как-то жить.

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

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

UPD: Здесь была Голосовалка, но после обновления движка, она сломалась.

Результаты голосования «Кстати, а сколько почтовых ящиков вы используете?»:

16
215
312
45
5—103
> 102
Всего проголосовало44
 Нет комментариев    22   2013   интерфейс   опрос   чушь собачья