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

Коварная кнопка

Для начала давайте сформулируем принцип работы кнопки. В своём классическом виде она имеет два состояния: нажата и не нажата. Логично предположить, что эти состояния соответствуют двум режимам работы устройства, которым эта кнопка управляет.

Представим себе кнопку дверного звонка. Если кнопка не нажата, звонок молчит. Если нажата — трезвонит. Всё логично, понятно и интуитивно.

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

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

Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем»

Именно поэтому человечество придумало ещё один вид элемента управления: переключатель (он же тумблер или рубильник). Конечно, по его положению сначала сложно оценить состояние прибора. Но когда мы разберёмся и запомним, какое положение какому состоянию соответствует, всё будет проще. Ещё можно написать рядом с переключателем: «Вкл» и «Выкл». Тогда управление становится интуитивно понятным и однозначным.

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

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

bash.im

Когда в моду вошли сенсорные кнопки, всё ещё больше усложнилось. Ведь сенсорные кнопки не только не сообщают нам, в каком режиме находится прибор, но и умело скрываются сами. Нас дополнительно заставляют решать ещё две непростые задачи:

• догадаться, где именно находится граница кнопки на гладкой панели, например, телевизора;

• изловчиться коснуться кнопки так, чтобы она «нажалась».

В этом, может, и нет ничего плохого, если речь идёт о настройках, которые мы выполняем редко. Например, один раз можно повозиться с кнопками, если мы настраиваем каналы на телевизоре. Один раз настроил и забыл. Кроме того, кнопки хорошо подходят, например, для управления проигрывателем. Куда же нам без кнопки Play? Совсем другое дело, когда интерфейс из нескольких кнопок используется для довольно часто повторяемых действий по настройке. Например, для настройки будильника.

Избавляемся от кнопок, изобретаем колесо

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

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

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

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

1. Классическая реализация. Берём пульт, переходим в режим установки часов. На экране начинает мигать цифра, показывающая текущий час. Кнопками «Вверх» и «Вниз» устанавливаем нужный час. Нажимаем кнопку переключения режима. Теперь на экране мигает цифра, показывающая минуты. Кнопками «Вверх» и «Вниз» устанавливаем минуты. Нажимаем кнопку сохранения режима.

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

Кроме того, этот интерфейс имеет целых три режима: 

• нет настройки;

• настройка часов;

• настройка минут.

Если сюда добавить установку будильника, то алгоритм станет ещё более сложным и тяжеловесным.

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

2. Реализация без режимов. Оставим на устройстве две кнопки: «Часы» и «Минуты». Первая кнопка последовательно увеличивает на единицу значение часов, вторая — минут. Как только счётчик доходит до максимального значения (23 для часов и 59 для минут), отсчёт начинается заново, с нуля.

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

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

Кстати, в книге Джефа Раскина приведён вариант с четырьмя кнопками: увеличение часов, уменьшение часов, увеличение минут, уменьшение минут.

3. Объединяем часы и минуты. На устройстве есть две кнопки: «Увеличить время» и «Уменьшить время». Первая кнопка последовательно увеличивает значение минут. Когда наберётся 59 минут, то следующее нажатие кнопки обнулит минуты и увеличит часы. Вторая кнопка делает то же самое, но в обратную сторону.

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

Но в нашем интерфейсе всё ещё присутствуют кнопки и их две. Избавимся и от них.

4. Заменим две кнопки на одно колёсико (так для простоты будем называть поворотный регулятор). Поворот по часовой стрелке увеличивает время, против часовой — уменьшает. Элемент управления один, режимов нет. Да и колёсиком пользоваться удобнее и приятнее, чем кнопкой (это, конечно, субъективно, но очень уж надоели кнопки). При этом оно должно быть достаточно большим, чтобы его было удобно обхватывать всеми пальцами руки. Такое колёсико есть, например, во многих микроволновых печах.

Тут нет никаких режимов. Чтобы установить время, мы просто начинаем крутить колёсико. Для увеличения — по часовой стрелке, для уменьшения — против.

Экран с часами можно поместить в центр колёсика.

5. Добавляем будильник. Нужно добавить будильник? Нет ничего проще. Добавим под наше большое колёсико ещё одно, не такое толстое и другого цвета. Оно будет отвечать за установку будильника.

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

Ну и добавим рядом переключатель «ВКЛ/ВЫКЛ» для включения и отключения будильника.

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

Да ведь это наш старый знакомый будильник из детства! У него тоже сзади было два колёсика: для установки времени и для установки отдельной стрелки будильника. Рядом был расположен рычажок для включения или отключения будильника. 

Так что, стремясь избавиться от кнопок мы случайно «изобрели» заново старый механический будильник. Но у нас интерфейс получился современнее и эргономичнее.

Радиоприёмник без кнопок — миф или реальность

Попробуем развить идею отказа от кнопок в интерфейсе наших приборов. Например, придумаем радиоприёмник, в котором тоже не будет ни одной кнопки.

Для начала составим себе техническое задание — сформулируем основные требования к нашему интерфейсу.

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

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

3. Никаких кнопок и дисплеев. Мы уже избавились от кнопок в интерфейсе часов. Будем последовательны — не будем применять кнопки и в нашем радиоприёмнике. А заодно откажемся и от дисплеев. Очень уж надоели все эти экранчики, в которые приходится вглядываться, чтобы различить цифры, и которые плохо видно издалека.

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

1) Часы. Преобразуем вариант часов, который у нас получился в предыдущем разделе. Заменим экран на обычный циферблат со стрелками. В середине циферблата — одно колёсико, с помощью которого можно установить время. Оно перемещает одновременно обе стрелки: часовую — медленней, минутную — быстрее. Такие колёсики обычно делают на задней крышке настенных электронных часов. Установить время одним колёсиком — что может быть проще? Кстати, обычный стрелочный циферблат имеет одну очень приятную особенность — если стрелки будут слегка светиться в темноте, то распознать время издалека будет гораздо проще, чем по цифровому дисплею.

2) Будильник. Интерфейс будильника состоит из трёх элементов:

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

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

• Выключатель будильника. Расположен рядом с колёсиком установки будильника. Тут всё тоже предельно просто: у переключателя есть два положения — включён и отключён. Рядом можно нарисовать символ колокольчика. При желании можно сделать так, чтобы колокольчик мягко светился, когда будильник включён. Но это необязательно — положение переключателя сообщает нам о состоянии будильника лучше, чем любой другой индикатор.

3) Радио. Его интерфейс тоже состоит из трёх элементов:

• Шкала FM-диапазона. Просто обычная шкала с разметкой. На ней — три риски разного цвета. О них — чуть ниже.

• Колёсики выбора станции. Три колёсика таких же цветов, как риски на шкале. Каждое колёсико перемещает свою риску. Для удобства и точности настройки колёсики крутятся не плавно, а с мягкими приятными щелчками. Каждый щелчок перемещает риску на одну десятую FM-диапазона. Ведь радиостанции именно с такой дискретностью и расположены: 92.9, 95.0, 95.5, ... Щелчки захотелось добавить после того, как вспомнил неудобства тонкой настройки станций на старых приёмниках: чуть тронул колёсико — и уже помехи.

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

Почему положения три? Мне показалось, что памяти на три станции вполне достаточно. Конечно, количество колёсиков и рисок можно увеличить.

4) Громкость. Просто обычное колёсико громкости. Можно на нём нарисовать маленький динамик. Но обязательно, чтобы на колёсике была риска, показывающая текущее значение. Так мы сможем ещё до включения приёмника сразу визуально определить, какая громкость выбрана — чтобы он неожиданно не «заорал» на весь дом.

5) Общий выключатель. Предназначен для включения и отключения радио.

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

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

Что нужно, чтобы найти любимую станцию? Покрутить колёсико и изменить положение переключателя. А что теперь нужно сделать, чтобы приёмник её запомнил? А ничего не нужно! Станция уже выбрана — риска стоит на нужном месте и никуда не будет двигаться, пока мы снова не покрутим колёсико. А как же теперь выбрать другую станцию? Нет ничего проще — крутим второе или третье колёсико.

Теперь давайте вспомним, сколько действий нужно совершить, чтобы выбрать и запомнить радиостанцию на обычном среднестатистическом музыкальном центре? А чтобы поставить будильник?

Согласитесь, что наш интерфейс получился гораздо удобнее.

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

• какая радиостанция сейчас выбрана;

• включён ли будильник;

• если включён, то на какое время он установлен;

• какая сейчас выбрана громкость.

Разработчики современных кнопочно-экранных интерфейсов даже не подразумевают возможности постановки таких вопросов.

Не важно, удобно ли нам

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

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