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

интерфейс

Ошибки распознавания на практике

Мепс-ми — лучшие офлайн-карты на сегодня. Но их интерфейс периодически хромает.

Когда-то маршруты строились только от текущего положения до выбранной точки. Это отлично решало главный сценарий — как добраться куда-то.

Последняя версия 6.4.4 прокладывает маршрут от объекта и до него. Это закрывает дополнительные сценарии. И пока перед глазами нет экрана, задача решена.

А в интерфейсе ошибка, которую описывал ещё Норман, — очень похожие иконки направления. Обе состоят из круга, стрелки подписи «Route...». На ходу выбрать нужное крайне трудно. Приходится останавливаться и вглядываться в «...from» и «...to».

История о клавиатурах, которую приводит Норман:

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

Я рассказал об этом дизайнеру, добавив, что сам несколько раз допустил подобную ошибку, следовательно, её будут допускать и другие пользователи. Первая реакция дизайнера была такой: «Почему вы допустили эту ошибку? Разве вы не читали инструкцию?» Затем он пустился в объяснения разницы между двумя кнопками.

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

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

«О, да, — ответили все секретари, — такая проблема возникала много раз».

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

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

И его «рассуждения по этому поводу»:

Если ошибка возможна, кто-то обязательно ее допустит. Дизайнер должен предусмотреть все возможные ошибки и постараться свести к минимуму вероятность их появления. Ошибки должны быть легко распознаваемы и по возможности обратимы и не должны приводить к серьезным последствиям.

Для максимального контраста лучше оставить только «From» и «To», а иконки сделать разными. Например, флаг для старта и пин для финиша. Если нужно быстрее — «А» для начала и «В» для конца.

2016   иконки   интерфейс   Норман   приложение

Маленькие иконки рядом на практике

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

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

Клик в корзину сразу переносит «файл» в список с удалёнными. А карандаш запускает редактирование имени. Поле ввода закрывает иконки, предохраняя от случайного попадания. Клик мышкой (или клавиша «Ввод») вне поля сохраняет изменения.

Задача решена, но есть проблемы — иконки маленькие и стоят близко, поэтому легко попасть в соседнюю (подробнее о законе Фиттса у Раскина). Да, и как закончить редактирование не очевидно. Место ограничено, поэтому площадь всплывающей области увеличить нельзя. Увеличить иконки тоже не получится. 

Убираю при наведении иконку типа «файла», и ставлю на её место карандаш. Радую Фиттса, выигрываю в длине текста.

Теперь области клика можно сделать сильно больше иконок:

И если оставлять карандаш при редактировании, то пусть он завершает редактирование (включение и выключение на одном элементе не редкость).

2016   интерфейс   на практике   Фиттс

Стандартные инструменты в сервисах

Заботливые разработчики сервисов дают пользователю всё для «сделывания» проекта. Как уникальные инструменты (функции), так и стандартные (нативные). Пусть проект — заметка. Чтобы не пропустить публикацию, в Эверноуте появились напоминания. Или проект — сделка (продаём квартиру). Чтобы документы лежали «под рукой», в сервис добавляют раздел с папками и файлами.

Желание помочь пользователю сделать проект прекрасно. 

Чтобы стандартные инструменты сработали придётся постараться. Потому что мы успели привыкнуть к файловой системе, будильнику, календарю, мессенджеру, которые идут пакетом к операционной системе. Для создателей ОС стандартные инструменты — главный продукт, полезное действие. Тут они собаку съели.

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

Не знаю, что удобнее маковского Файндера. Поэтому на слово не поверю, что работа с файлами в сервисе на высоте. Получается для меня это лишняя функция. «Лишняя — не пользуйся» — слабое утешение. Сервис станет сложнее (лишние кнопки, формы, разделы). Если сервис предполагает между пользователями взаимодействие (современные стремятся), то кому-то «стандартные» инструменты сервиса подойдут. И это не значит, что они не покритикуют их при случае. И вот я обрёк себя на работу с чужими сценариями, которые в силах потеснить мои собственные. «Не пользоваться» не получится.

Дешёвое решение
Незачем делать ещё один Файндер. Полезно посмотреть, как работает сейчас, и попробовать улучшить процесс не добавляя стандартных инструментов в сервис. Прокачать сценарии с инструментами ОС, «включить» готовый Файндер в сервис. Подобное делает Трело, подключая сторонние сервисы.
Важно оговориться: решение могут не подойти сервисам с повышенной секретностью и безопасностью. Тут лучше украсть, как крадут великие, решения из ОС.

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

Поделитесь опытом. Какие ещё решения знаете?

2015   инструмент   интерфейс   система

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2015   интерфейс   Лаборатория данных   ползунок

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

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

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

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

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

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

2013   автомобиль   жизнь   интерфейс   Раскин   режим

Логин

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

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

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

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

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

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