о подаче информации, айдентике, интерфейсах и жизненной среде.
Посмотреть работы · Поддержать · Подписаться

Позднее Ctrl + ↑

Процентный индикатор в статусбаре АйОС

Илья Бирман писал, что проценты заряженности Айфона в статусбаре  — «туфта». У меня другая вселенная. Цитирую:

Заряженность батарейки — условная вещь. Вот вроде много было, а вот на солнце чуток в интернет повтыкал — уже мало осталось. Точнее изобразить батарейку, чем её уже изображает иконочка, невозможно. Какая разница между 67% и 72%? Да никакой нет разницы!

Хорошо чувствую разницу между 20, 10 и 5%, но на иконке этого не вижу.

Зато сразу начинаешь думать, блин, вот пока только на 98% зарядился телефон, надо дождаться 100% перед тем, как вытыкать. Или смотришь после длинного разговора, на сколько там уменьшилось. Или читаешь книжку в очереди и краем глаза поглядываешь, что быстрее меняется — номера страниц или количество процентов.

Как быть, если не начинаю думать (заряжаю ровно ночь), не смотрю после разговора, и читая не поглядываю?

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

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

Если не понятно, что показывают проценты, предлагаю микс:

Ремарка о выравнивании по центру

Читая прошлую заметку, Роман не всё понял. Дело, конечно, в слабом объяснении — мои формулировки ещё точить и точить. А пока они рыхлые, буду объяснять. Цитирую:

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

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

Если на странице одна строка, не выровненная с другими элементами, выключка исчезает вовсе.

Формат — контекст выравнивания (флага, выключки). Элементы выравнивают относительно формата, а потом относительно друг друга (внутри формата). 

Посмотрите на кнопки.

Кнопки слабо относятся к вёрстке — у них своя история. Они попали на экраны из физического мира уже готовым элементом. Кнопки не мыслят, как текст на плашке.

Если предположить, что кнопка — отдельный формат, и применить к надписи левый флаг, кнопка сломается:

P. S. Спасибо Роману за комментарий.

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

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

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

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

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

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

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

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

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

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

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

Выравнивание по центру

По умолчанию шумнее флагового набора (а флаг шумнее выключки по формату). Потому что у него на отступ больше:

↦ Строка текста по центру ↤

И строка с флагом ↤

Читавшие Тафти, знают, что отступ — это тоже информация. А дополнительный отступ бывает лишним.

С увеличением числа строк, растёт и шум:

↦ Текст с центральным ↤
↦ выравниванием ↤
↦ в несколько строк ↤
↦ шумит, как трактор ↤

Текст с флагом ↤
в несколько строк ↤
шумит в двое тише, ↤
как гибрид ↤

Шум — не единственный критерий качества дизайна. Поэтому центральное выравнивание не табуировано полностью.

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

Новичкам советую вообще не использовать в интерфейсах выравнивание по центру.

Цифровые раскладки

В 21 веке цифровые клавиатуры, схожие по формату, но разные по содержанию объяснимы, но не оправданы. Проблема в том, что клавиатуры только выглядят одинаково (3 колонки в 3 ряда).

Калькулятор Браун и телефон Пункт

Это отличный пример режима, который приводит к ошибкам. Режимы подробно обличает Раскин.

∼60 лет люди живут с разными форматами. Первые 30, возможно, помнили устройства-прародителей, что уменьшало количество ошибок. Но последние 30 — уже вряд ли.

Калькулятор и телефон на Айфоне

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

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

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

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

В начале 1960-х, когда в мир вышла технология DTMF (тоновый набор, который позволил отказаться от дискового номеронабирателя и заменить его кнопками), инженеры «Бел лабс» (Bell Labs) озадачились оптимальным расположением кнопок на телефонной клавиатуре. Рассматривались разные варианты — расположение кнопок по кругу, как на дисковом номеронабирателе <...>, расположение кнопок в две колонки по пять цифр и так далее. В результате исследования на подопытных показали, что человек быстро и легко привыкает к упорядоченному расположению клавиш <...>.

Наиболее логичным для неподготовленного человека (<...> привыкшего писать слева направо и сверху вниз) расположением клавиш и является как раз телефонная клавиатуру. Тот факт, что единица расположена вверху, а ноль внизу — дань традиции дискового номеронабирателя.

Стоит добавить и тот факт, что в США уже на тот момент был очень распространен «мнемонический» ввод номеров — ассоциация цифр со словами. И раз уж на дисковом номеронабиратель 1 соответствовало A, B и C и так далее, то нелепо было бы помещать её вниз и «корёжить» алфавит. <...>

…Исследования, которые проводились в конце 50-х годов не учитывали опыт и навыки небольшого числа профессионалов, работавших на калькуляторах. Первый транзисторный «калькулятор» (размером со шкаф, IBM-608) появился в 1954-м году. А компьютерных клавиатур еще не было вовсе. У арифмометров же и других механических счетных машин цифры стояли в ряд.

<...>

...Калькулятор, как инструмент бухгалтера, унаследовал традиции кеш-регистера (cash register)... Первые кеш-регистеры (не пишу «кассовый аппарат» или «ККМ», потому что привычные нам устройства появились значительно позже, и когда в Америке деньги считали кеш-регистером, у нас — в лучшем случае, на счетах) имели нумерацию снизу вверх — 0 внизу, 9 вверху — в один ряд...

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

Замечу, что на арифмометрах <...> и других кеш-регистрах можно найти раскладку сверху вниз. Но тем не менее традиция сложилась так.

Отмечу ещё важный факт, что «стандартная раскладка калькулятора» и раскладка телефона создавалась приблизительно одновременно (50-е годы) и независимо — единой традиции ещё не было.

<...>

...Первые калькуляторы. Тут в частности хорошо видна эволюция клавиатуры.

ANITA MK VIII — первый массовый калькулятор, 1963 г. Цифры расположены столбиками, снизу вверх.

Ранее Ctrl + ↓