Кнопка. История длиной в 100 лет

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

Другими словами, сегодня мы поговорим о том, как мы пришли от этого — к этому:

85f09fec3a9b67af5f731da747b65225

А еще мы поговорим о том, как кнопки изменили наше понимание этого мира. Вы не представляете, насколько сильным было это влияние: кнопки поменяли саму парадигму нашего мышления.

Самое простое действие

Вы вышли из автомобиля, поставили его на сигнализацию, по пути отправили sms. Набрали на домофоне номер своей квартиры, зашли в лифт, поднялись на свой этаж, зашли домой. Зажгли свет в прихожей, добрались до кухни, поставили кипятиться чайник, включили компьютер. Всё это заняло у вас 1 минуту. Вы нажали на самые разнообразные кнопки минимум 10 раз.

Кнопки дают нам возможность просто запускать сложные процессы. В одной диссертации по философии нашлось прямо-таки пугающее определение:

«Выступающий на поверхности кусочек пластмассы, знакомый нам еще по детским игрушкам, обладает властью над простыми вещами, превышающими физическую силу человека».

4a882c9709abd57e52fbb0a4701532a0

Мы с вами живем в эпоху тотального перехода от рельефной «кнопочной» эры к эре «поверхностей». Всё становится плоским, чувствительным к прикосновениям, взывающим к интуиции, накопленному опыту общения с кнопочными интерфейсами. К тому самому пользовательскому опыту (User Experience, он же UX).

8516ebf69daa968b3e74ded636212ff3

Но и у эры кнопок была своя эра-предшественник. Назовем ее «эра рычага». Рассмотрим прошлое — чтобы лучше понять настоящее.

Эра рычага. Механическая

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

9a4b5d5392d808fbe79cb8823834e586

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

4903dc4638823d9461a582fdfa9aff3f

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

— Рычаг усиливает движение. Рычаг — символ механической эпохи.

47686ba77a470ac85e0a1c940e6f33de
Что по-настоящему изменили подобные технологии — так это то, как мы стали воспринимать мир. Реальность перестала восприниматься, как нечто статичное — с приходом технологий механической эры человечество обрело власть над временем и расстоянием.

9df4990072cc015ebbbf60a856431ef2

До этого мы говорили о рычаге. Рычаг несет в себе смысл усиления: если в начале «цепочки» человек толкает рычаг, то и в конце этой цепочки происходит толчок — усиленный за счет шестеренок, ремней, блоков и других механизмов. В случае с кнопкой всё обстоит иначе: в начале цепочки происходит легкое нажатие, в конце — что угодно.

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

Эра кнопки. Электронная

Какой была первая кнопка? Это кнопка на фонарике — именно этот прибор принес кнопку в повседневность и по пути произвел революцию в понимании людьми электрического света. 1899-й год.

d7ff52c17959692626d1b4a012e906e1

Джордж Истмэн (George Eastman) из компании Kodak поспособствовал внедрению фотокамер в жизнь обывателей. Слоганом камеры был незабвенный «Вы нажимаете кнопку, мы делаем всё остальное». Тем самым слово «кнопка» приравнивалось к слову «простота».

f28fc268f4b87c1c0df2746d2c8c80a2

Именно в начале двадцатого века (именно, в 1900-м году) кнопочные дверные звонки вытеснили своих веревочных собратьев. С распространением электричества в 1910 в домах стали появляться кнопочные выключатели. В газетах появляются карикатуры на мрачный мир будущего: ленивый человек сидит в кресле, окруженный кнопками на все случаи жизни. Ну, по тогдашним представлениям о будущем, конечно.

69e2c8c87934fafc21ded8c15c350fa4
Ссылка на упомянутое на слайде видео. Тот еще sci-fi

Следующей революционной технической новинкой стало радио (1920). К 1938-му году было продано (внимание) 30 миллионов радиоприемников. Это был настоящий «интернет-бум» начала прошлого века.

86a59f26d46128f6b00d9319473760ec
Но для настройки на любимую радиостанцию обыватель должен был быть «немножко ученым». Так было вплоть до 1938-го, когда на радио впервые появились кнопки. Это был первый в истории прецедент функции «сохранить». Вы могли сохранить найденную станцию на кнопку и затем вызвать ее одним нажатием.

— Кнопки олицетворяли будущее

В годы мирового экономического кризиса (1939) люди мечтали о лучшей жизни. Фильм 1940-го года Leave it to Roll-Oh отлично иллюстрирует концепцию воображаемого будущего с его атрибутом: домашним роботом-прислугой (который может даже починить печь!). Управлять роботом можно с помощью кнопочной панели.

Мысль о будущем не стоит на месте, в 1957 в Диснейленде открывается Monsanto House of the Future, напичканный автоматикой, пластиком и, конечно же, кнопками!

Но не только футурологи грезили кнопками. Маркетинг тоже не спал.

— Кнопки олицетворяли роскошь

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

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

24bc3caf5b515e8783f3b7db445e0705

Слоган эпохи: «так легко, что даже женщина сможет сделать это».

До кнопок была технологическая пропасть между тогдашними «гиками» и простыми людьми. Теперь же каждый мог пользоваться каким угодно сложным прибором — ведь для это нужно было только нажать на кнопку.

Рекламный прием «pushbutton» нельзя сказать самым изящным, однако он используется и по сей день. Только теперь он перекочевал на веб-сайты — вспомните это бесчисленные «всё, что вам нужно сделать, это нажать на кнопку».

33834d042f24d85b4b3b419d43d80900
Первый пульт дистанционного управления тоже тоже появился в «кнопочную» эру, в 1956. Люди могут контролировать технику на расстоянии и без проводов!
584129c05a48ed722caabd1f1222364f
Но ассоциации с будущим и роскошью — это еще не всё.

— Кнопки олицетворяли страх

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


Знаменитый фильм 1951 года, обучающий детей технике безопасности при ядерном взрыве — «Duck and Cover»

— Кнопки олицетворяли контроль

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

1739017ba3bcd3cd5e348fb6955f3073

И обратная сторона: нажатие на неправильную кнопку вызывает хаос, катастрофу.

Но кнопка постепенно обрастает и другими символами.

— Кнопки олицетворяли игру

Игровой пинбол-автомат «Шалтай-Болтай» (Humpty Dumpty, 1947) — первая игрушка, использовавшая флипперы, лопатки, подбрасывающие шарик. Игрок впервые мог с помощью сложного механизма взаимодействовать с шариком и его окружением. Инструментом управления были, как вы понимаете, всё те же кнопки.

bebff2d6459c71bfed7e45e307f93640

Так началась новая история игр. В 1977 произошла вторая революция в игромире — с появлением приставки Atari. И, конечно же, первого кнопочного джойстика — иконы целого поколения. Игры пришли в дом.

b57024f11946158addbe39610743f171

Бум аркад пришелся на 1970-е. Постепенно умение ловко управляться с кнопками стало ценным навыком, который породил целую индустрию:

765c3ead1ad671b0b9e25c4ea426d45e

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

— Кнопка стала метафорой

Это новое качество кнопки помогло перейти к следующей эре.

Эра «поверхности». Электронная

До этого кнопки были физическими объектами. В 1984-м году Macintosh представил миру идею того, что кнопки могут быть виртуальными:
53286da61fdf5e5eb06ee305d679f286
Но виртуальные кнопки всё еще нуждаются в кнопках физических. Чтобы нажать на «Ок», пользователь должен использовать кнопочную мышь.

Однако концепция была настолько новаторской, что компании Apple пришлось обучать людей тому, как этим пользоваться. Они выкупили 39 рекламных страниц еженедельника Newsweek для того, чтобы опубликовать инструкцию.

dee8280a95d693fd25f0e2ddfb2919b8
Вместе с появлением компьютерных интерфейсов, а потом и интернета, с кнопками произошла еще одна метаморфоза:

— Кнопка потеряла форму

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

649d84d18ad62583c54962954108eb22

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

3cddeffa5c47a5a847d7decebddabc17Владимир Завертайлов: У нас в студии, например, сейчас работают сразу двое UI-проектировщиков. Они анализируют потребности бизнеса, «проецируют» их на современные веб-технологии и тренды, добавляют «изюминку». В результате UI-проектировщики предлагают свое цельное видение пользовательского интерфейса, его интерактивный и полностью юзабельный прототип. Мы обсуждаем варианты, подбираем оптимальный и только после этого приступаем к «дорогим» этапам проекта: дизайну, верстке, программированию.

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

— Виртуальные кнопки стали чувствительными к прикосновениям

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

d05aac9645e78daad51403c14f937d5f

Итак, в какой эре мы живем сейчас? Давайте подведем итог. Кнопкам больше не нужны:

  • Форма.
  • Контур.
  • Объем.
  • Слова для обозначения.
  • Украшения.
  • и так далее.

66b773188d301c2706c805b279ad9295

В то же время, какие свойства мы предписываем кнопкам? Осознанно или на уровне подсознания:

  • Простота.
  • Контроль.
  • Магия.
  • Игра.
  • Легкость.
  • Автоматизация.

Теперь мы думаем об объектах не как о статичных вещах, но как о предметах, имеющих глубину и продолжительность во времени. Мы приближаемся к той эпохе, когда всё будет интерактивным.

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

0793aded35629f47c06425f60ff3a541

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

20100630pauca9800

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

И попробуйте угадать — какую технологию взаимодействия и какой интерфейс они предложат миру?

Заключение

Кнопка имеет историю длиной в 100 лет: от механической эры до эры электроники и компьютерных технологий. Это одно из самых значимых изобретений XX-го века.

Основой сегодняшнего рассказа послужила замечательная презентация Bill DeRouchey. Спасибо ему за колоссальную исследовательскую работу.