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

интерфейс

Приём тары в Берлине

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

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

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

В этот раз сдал на 2,95 €.

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

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

24 мая   Берлин   видео   Германия   интерфейс   магазин   переработка

Выбора размера штанов в интернете

На курсе «Пользовательский интерфейс и представление информации» Илья рассказал, как упростили выбор размеров джинсов для интернет-магазина «Гетвеара» — вместо больших таблиц соответствия дали выбор нужной шкалы:

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

Так делают «Квеле». Но делают неэлегантно — в пять шагов. Кнопки ломаются, ссылки выбранных пунктов почему-то ведут на редактирование шага. И всё равно забота радует.

Увы, в половине случаев они показываю всё те же таблицы соответствия:

9 мая   интернет-магазин   интерфейс   одежда

Курс Ильи Бирмана «Пользовательский интерфейс и представление информации»

В 2013...2014 я 9 месяцев стажировался в бюро, поэтому сверхоткрытий от курса не ждал. Сходил, чтобы понять, чем курс полезен для лабораторной команды и вспомнить всё. Оказалось, что базу знаю нормально, несмотря на практические ошибки.

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

Без картинок конспект тяжело расшифровать. Сейчас бы вместо записей снимал на телефон каждый пример — по ним-то как раз легко вспомнить материал. Все картинки разом Илья не даёт — предлагает писать на почту, какая нужна, тогда он вышлет.

1-й день, пользовательский интерфейс

Интерфейс — это правила взаимодействия. Пользовательский интерфейс — правила взаимодействия человека с машиной. Ещё есть АПИ — правила для двух машин, и скрипты — правила для двух людей: оператора поддержки и пользователя.

Пользовательские данные бесконечно ценны. К ним относится и выбор, который делал пользователь. Раньше не думал так о выборе. Просто представлял, как мешает, когда система не помнит, что выбрано или сама меняет выбор по неочевидным правилам.

О грубой и нежной обратной связи:

Отступление:

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

Cпросил Илью, как оформлять ссылки в веб-приложениях, которые выглядят и работают, как десктопные программы. Правило простое: подчёркивание — свойство гипертекста. В почтовом клиенте ссылки в тексте подчёркнуты. И в мобильном приложении подчёркивание в тексте будут выглядеть привычно.

Классно, когда Ильи рассказывает истории. Одна из них — мнемоника для теней от кнопок. Тени должны падать строго вниз, поэтому Рома Воронежский шутил: «Солнце никогда не заходит над Яндексом».

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

2-й день, представление информации

В основе дня — Тафти.

Для меня стал важным рассказ о вёрстке колонок. В 2014 я читал заметку, но ещё не дорос до простейшего совета: оставить только левые границы колонок, а справа давать необходимые отступы. Сейчас пошло на ура.

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

Схема вышла в 2008 году:

Когда Илья начинал, остановки были толстыми с белой обводку. Артём предложил убрать обводку, как лишний элемент. Илья убрал и написал, что теперь остановки теряются. Тогда Артём предложил сделать линии остановок сильно тоньше. В этот момент рассказа Илья округляет глаза, показывая первую реакцию на это предложение: «их же и так не видно! Окей, попробую,» — приходит позже. Тонкие остановки стали заметнее. Илья опять удивился и пошёл узнавать у Артёма, как так. В ответе был совет изучить тему информационных слоёв.

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

Среди тем был «Многомерный мир на плоском носителе». Илья там показывал крутящуюся девушку. Это редкая тема, которую я не понял, как применить.

3-й день, практические занятия

Здорово, что на курсе половина времени — практика. Переделывали таблицу, график и форму. Сила в том, что нет контекста — не нужно думать о целом продукте, просто механическая чистка.

Когда разбирали результаты, убедился, что понимание матчасти помогает делать хороший дизайн. Все, кто гуглил, сделали лучше.

Таблицы я успел две. 1-я с исходными данными, 2-я с пересчётом в тонны и м³:

А график наоборот: понял только, что нужна таблица, но сделать нормально не успел:

В форме хак. Всю нужную информацию о машине содержит ВИН-номер, поэтому лишние поля убираются, если научить систему парсить ВИН:

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

4-й день, презентация и разбор домашнего задания

Задание сделал за полдня. Выложил работу последним, потому что затупил. Не делайте так, на последних не остаётся сил. Задание было таким: 

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

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

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

Сайт помнит адреса и подсвечивает их разными цветами, чтобы у пользователя был шанс заметить, что адрес не тот. Главная ошибка, которую нашёл Илья — заказ на разные адреса. Да, это тупня, которая усложняет сценарий, а значит будут ошибаться чаще. А нужно это раз в сто лет. Всегда можно отправить заказ, а потом второй.

Рекомендую курс всем, кто работает за компьютером :-) Никакой базы для курса не нужно. Разработчикам полезно понимать, что им приносит дизайнер и за какие ошибки его пинать. Опытным дизайнерам полезно сверить часы, систематизировать знания, возможно, узнают новое.

5 мая   интерфейс   инфодизайн   курс

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

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

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

Последняя версия 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   интерфейс   опрос   чушь собачья