Раз уж мы начали разбирать историю появления разных частей современных веб-интерфейсов, то неплохо было бы рассказать о кнопке. И о том, как на протяжении последних 100 лет менялось пользовательское мышление людей в отношении кнопок.
Другими словами, сегодня мы поговорим о том, как мы пришли от этого — к этому:
А еще мы поговорим о том, как кнопки изменили наше понимание этого мира. Вы не представляете, насколько сильным было это влияние: кнопки поменяли саму парадигму нашего мышления.
Вы вышли из автомобиля, поставили его на сигнализацию, по пути отправили sms. Набрали на домофоне номер своей квартиры, зашли в лифт, поднялись на свой этаж, зашли домой. Зажгли свет в прихожей, добрались до кухни, поставили кипятиться чайник, включили компьютер. Всё это заняло у вас 1 минуту. Вы нажали на самые разнообразные кнопки минимум 10 раз.
Кнопки дают нам возможность просто запускать сложные процессы. В одной диссертации по философии нашлось прямо-таки пугающее определение:
Мы с вами живем в эпоху тотального перехода от рельефной «кнопочной» эры к эре «поверхностей». Всё становится плоским, чувствительным к прикосновениям, взывающим к интуиции, накопленному опыту общения с кнопочными интерфейсами. К тому самому пользовательскому опыту (User Experience, он же UX).
Но и у эры кнопок была своя эра-предшественник. Назовем ее «эра рычага». Рассмотрим прошлое — чтобы лучше понять настоящее.
Человечество по сути своей — стадо умных приматов. Мы всегда использовали предметы окружающего мира, чтобы усилить с их помощью собственные возможности. Так кость превращалась в лопату, палка — в грабли, сталь — в механизмы.
Например, пистолет можно упрощенно описать как механизм, который одним нажатием на кнопку выбрасывает маленький «камень» с высокой скоростью и точностью. И выбрасывает куда эффективнее, чем если бы человек швырялся боеприпасами «вручную». Клавиши пианино — не что иное, как кнопки, запускающие удары молоточков по струнам.
Особенность механической эпохи состояла в том, что можно было увидеть всю последовательность взаимодействий: как один процесс запускает второй, усиливая первоначальное действие, и так далее, от инициации до финального результата.
Что по-настоящему изменили подобные технологии — так это то, как мы стали воспринимать мир. Реальность перестала восприниматься, как нечто статичное — с приходом технологий механической эры человечество обрело власть над временем и расстоянием.
До этого мы говорили о рычаге. Рычаг несет в себе смысл усиления: если в начале «цепочки» человек толкает рычаг, то и в конце этой цепочки происходит толчок — усиленный за счет шестеренок, ремней, блоков и других механизмов. В случае с кнопкой всё обстоит иначе: в начале цепочки происходит легкое нажатие, в конце — что угодно.
Простой пример с лампочкой: вы нажимаете на выключатель, но нажатие не усиливает яркость света, как бы это произошло с логикой рычажного механизма. Технология абстрактного взаимодействия открыла новый путь осмысления мира. Абстрактность — черта электронной эры, следующей по списку.
Какой была первая кнопка? Это кнопка на фонарике — именно этот прибор принес кнопку в повседневность и по пути произвел революцию в понимании людьми электрического света. 1899-й год.
Джордж Истмэн (George Eastman) из компании Kodak поспособствовал внедрению фотокамер в жизнь обывателей. Слоганом камеры был незабвенный «Вы нажимаете кнопку, мы делаем всё остальное». Тем самым слово «кнопка» приравнивалось к слову «простота».
Именно в начале двадцатого века (именно, в 1900-м году) кнопочные дверные звонки вытеснили своих веревочных собратьев. С распространением электричества в 1910 в домах стали появляться кнопочные выключатели. В газетах появляются карикатуры на мрачный мир будущего: ленивый человек сидит в кресле, окруженный кнопками на все случаи жизни. Ну, по тогдашним представлениям о будущем, конечно.
Ссылка на упомянутое на слайде видео. Тот еще sci-fi
Следующей революционной технической новинкой стало радио (1920). К 1938-му году было продано (внимание) 30 миллионов радиоприемников. Это был настоящий «интернет-бум» начала прошлого века.
Но для настройки на любимую радиостанцию обыватель должен был быть «немножко ученым». Так было вплоть до 1938-го, когда на радио впервые появились кнопки. Это был первый в истории прецедент функции «сохранить». Вы могли сохранить найденную станцию на кнопку и затем вызвать ее одним нажатием.
В годы мирового экономического кризиса (1939) люди мечтали о лучшей жизни. Фильм 1940-го года Leave it to Roll-Oh отлично иллюстрирует концепцию воображаемого будущего с его атрибутом: домашним роботом-прислугой (который может даже починить печь!). Управлять роботом можно с помощью кнопочной панели.
Мысль о будущем не стоит на месте, в 1957 в Диснейленде открывается Monsanto House of the Future, напичканный автоматикой, пластиком и, конечно же, кнопками!
Но не только футурологи грезили кнопками. Маркетинг тоже не спал.
В пятидесятых кнопочные технологии распространились на множество потребительских товаров, включая новый предмет роскоши для среднего класса — автомобиль. Фраза «pushbutton» стала прилагательным, стоящим в одном ряду с такими словами, как «современный», «роскошный», «продвинутый», «новый», «простой» и т.д.
Всё, что заводилось с кнопки, автоматически приобретало статус «премиум». Вот, например, духовка, стиральная машина и открывалка консервов — для хозяюшек той же эпохи:
До кнопок была технологическая пропасть между тогдашними «гиками» и простыми людьми. Теперь же каждый мог пользоваться каким угодно сложным прибором — ведь для это нужно было только нажать на кнопку.
Первый пульт дистанционного управления тоже появился в «кнопочную» эру, в 1956. Люди могут контролировать технику на расстоянии и без проводов!
Но ассоциации с будущим и роскошью — это еще не всё.
После второй мировой войны началась гонка вооружений. Угроза ядерного уничтожения представлялась такой же легкой, как одно несильное нажатие. Помните крылатую фразу с BBC: «У кого палец лежит на ядерной кнопке?».
Знаменитый фильм 1951 года, обучающий детей технике безопасности при ядерном взрыве — «Duck and Cover»
В это же время инженеры строили сложные вычислительные машины внушительных размеров, с рядами кнопок. Только немногие специалисты могли работать с такими машинами, используя особый профессиональный язык.
И обратная сторона: нажатие на неправильную кнопку вызывает хаос, катастрофу.
Но кнопка постепенно обрастает и другими символами.
Игровой пинбол-автомат «Шалтай-Болтай» (Humpty Dumpty, 1947) — первая игрушка, использовавшая флипперы, лопатки, подбрасывающие шарик. Игрок впервые мог с помощью сложного механизма взаимодействовать с шариком и его окружением. Инструментом управления были, как вы понимаете, всё те же кнопки.
Так началась новая история игр. В 1977 произошла вторая революция в игромире — с появлением приставки Atari. И, конечно же, первого кнопочного джойстика — иконы целого поколения. Игры пришли в дом.
Бум аркад пришелся на 1970-е. Постепенно умение ловко управляться с кнопками стало ценным навыком, который породил целую индустрию:
Человечество накопило достаточный пользовательский опыт для того, чтобы интуитивно понимать кнопочные интерфейсы. Настало время, когда кнопка выросла в нечто большее, чем просто «выступающий кусочек пластмассы».
Это новое качество кнопки помогло перейти к следующей эре.
До этого кнопки были физическими объектами. В 1984-м году Macintosh представил миру идею того, что кнопки могут быть виртуальными:
Но виртуальные кнопки всё еще нуждаются в кнопках физических. Чтобы нажать на «Ок», пользователь должен использовать кнопочную мышь.
Однако концепция была настолько новаторской, что компании Apple пришлось обучать людей тому, как этим пользоваться. Они выкупили 39 рекламных страниц еженедельника Newsweek для того, чтобы опубликовать инструкцию.
Вместе с появлением компьютерных интерфейсов, а потом и интернета, с кнопками произошла еще одна метаморфоза:
В вебе «кнопкой» может быть всё, что угодно. И этому не нужно иметь специальную форму — визуально они могут быть, например, подчеркнутым текстом. Или изображением. Для примера пара картинок для сравнения — на первом кадре «сайт как он есть», на втором только интерактивная его часть:
Пользовательский опыт вкупе с проверенной годами системой обозначений в вебе помогают интуитивно понимать, в какое место сайта нужно кликнуть, чтобы получить результат. Появляется целая профессия — проектировщик пользовательских интерфейсов (UI-дизайнер), который должен обладать навыками аналитика, а помимо этого, уметь «предугадывать», какой вариант интерфейса будет в данном случае наиболее удобен пользователю.
Следующий шаг в эволюции кнопок был вполне закономерным: появился совершенно новый тип интерфейса, который не требовал «посредника» между пальцем пользователя и кнопкой.
Тачскрины еще относительно недавно были чем-то на грани научной фантастики. Но технология стремительно проникла в нашу жизнь: сначала на экраны всевозможных терминалов, затем — на дисплеи мобильных устройств и портативных компьютеров.
Итак, в какой эре мы живем сейчас? Давайте подведем итог. Кнопкам больше не нужны:
В то же время, какие свойства мы предписываем кнопкам? Осознанно или на уровне подсознания:
Теперь мы думаем об объектах не как о статичных вещах, но как о предметах, имеющих глубину и продолжительность во времени. Мы приближаемся к той эпохе, когда всё будет интерактивным.
Эволюцию интерфейсов (со взглядом в будущее) можно представить так: Эра рычага → Эра кнопки → Эра «поверхности» → Эра динамичного интерфейса. Последняя не за горами, первые ласточки уже есть.
Сегодняшние дети моментально учатся использовать тот же iPad, ведь его технология не задействует никакие «промежуточные» контроллеры. А результат каждого действия — легко интуитивно предугадать.
Представьте поколение, выросшее в эпоху, когда тач-поверхности и повсеместная интерактивность — обыденные вещи. Представьте, насколько это качественно меняет их сознание, в сравнении с нашим.
И попробуйте угадать — какую технологию взаимодействия и какой интерфейс они предложат миру?
Кнопка имеет историю длиной в 100 лет: от механической эры до эры электроники и компьютерных технологий. Это одно из самых значимых изобретений XX-го века.
Основой сегодняшнего рассказа послужила замечательная презентация Bill DeRouchey. Спасибо ему за колоссальную исследовательскую работу.
Другими словами, сегодня мы поговорим о том, как мы пришли от этого — к этому:
А еще мы поговорим о том, как кнопки изменили наше понимание этого мира. Вы не представляете, насколько сильным было это влияние: кнопки поменяли саму парадигму нашего мышления.
Самое простое действие
Вы вышли из автомобиля, поставили его на сигнализацию, по пути отправили sms. Набрали на домофоне номер своей квартиры, зашли в лифт, поднялись на свой этаж, зашли домой. Зажгли свет в прихожей, добрались до кухни, поставили кипятиться чайник, включили компьютер. Всё это заняло у вас 1 минуту. Вы нажали на самые разнообразные кнопки минимум 10 раз.
Кнопки дают нам возможность просто запускать сложные процессы. В одной диссертации по философии нашлось прямо-таки пугающее определение:
«Выступающий на поверхности кусочек пластмассы, знакомый нам еще по детским игрушкам, обладает властью над простыми вещами, превышающими физическую силу человека».
Мы с вами живем в эпоху тотального перехода от рельефной «кнопочной» эры к эре «поверхностей». Всё становится плоским, чувствительным к прикосновениям, взывающим к интуиции, накопленному опыту общения с кнопочными интерфейсами. К тому самому пользовательскому опыту (User Experience, он же UX).
Но и у эры кнопок была своя эра-предшественник. Назовем ее «эра рычага». Рассмотрим прошлое — чтобы лучше понять настоящее.
Эра рычага. Механическая
Человечество по сути своей — стадо умных приматов. Мы всегда использовали предметы окружающего мира, чтобы усилить с их помощью собственные возможности. Так кость превращалась в лопату, палка — в грабли, сталь — в механизмы.
Например, пистолет можно упрощенно описать как механизм, который одним нажатием на кнопку выбрасывает маленький «камень» с высокой скоростью и точностью. И выбрасывает куда эффективнее, чем если бы человек швырялся боеприпасами «вручную». Клавиши пианино — не что иное, как кнопки, запускающие удары молоточков по струнам.
Особенность механической эпохи состояла в том, что можно было увидеть всю последовательность взаимодействий: как один процесс запускает второй, усиливая первоначальное действие, и так далее, от инициации до финального результата.
— Рычаг усиливает движение. Рычаг — символ механической эпохи.
Что по-настоящему изменили подобные технологии — так это то, как мы стали воспринимать мир. Реальность перестала восприниматься, как нечто статичное — с приходом технологий механической эры человечество обрело власть над временем и расстоянием.
До этого мы говорили о рычаге. Рычаг несет в себе смысл усиления: если в начале «цепочки» человек толкает рычаг, то и в конце этой цепочки происходит толчок — усиленный за счет шестеренок, ремней, блоков и других механизмов. В случае с кнопкой всё обстоит иначе: в начале цепочки происходит легкое нажатие, в конце — что угодно.
Простой пример с лампочкой: вы нажимаете на выключатель, но нажатие не усиливает яркость света, как бы это произошло с логикой рычажного механизма. Технология абстрактного взаимодействия открыла новый путь осмысления мира. Абстрактность — черта электронной эры, следующей по списку.
Эра кнопки. Электронная
Какой была первая кнопка? Это кнопка на фонарике — именно этот прибор принес кнопку в повседневность и по пути произвел революцию в понимании людьми электрического света. 1899-й год.
Джордж Истмэн (George Eastman) из компании Kodak поспособствовал внедрению фотокамер в жизнь обывателей. Слоганом камеры был незабвенный «Вы нажимаете кнопку, мы делаем всё остальное». Тем самым слово «кнопка» приравнивалось к слову «простота».
Именно в начале двадцатого века (именно, в 1900-м году) кнопочные дверные звонки вытеснили своих веревочных собратьев. С распространением электричества в 1910 в домах стали появляться кнопочные выключатели. В газетах появляются карикатуры на мрачный мир будущего: ленивый человек сидит в кресле, окруженный кнопками на все случаи жизни. Ну, по тогдашним представлениям о будущем, конечно.
Ссылка на упомянутое на слайде видео. Тот еще sci-fi
Следующей революционной технической новинкой стало радио (1920). К 1938-му году было продано (внимание) 30 миллионов радиоприемников. Это был настоящий «интернет-бум» начала прошлого века.
Но для настройки на любимую радиостанцию обыватель должен был быть «немножко ученым». Так было вплоть до 1938-го, когда на радио впервые появились кнопки. Это был первый в истории прецедент функции «сохранить». Вы могли сохранить найденную станцию на кнопку и затем вызвать ее одним нажатием.
— Кнопки олицетворяли будущее
В годы мирового экономического кризиса (1939) люди мечтали о лучшей жизни. Фильм 1940-го года Leave it to Roll-Oh отлично иллюстрирует концепцию воображаемого будущего с его атрибутом: домашним роботом-прислугой (который может даже починить печь!). Управлять роботом можно с помощью кнопочной панели.
Мысль о будущем не стоит на месте, в 1957 в Диснейленде открывается Monsanto House of the Future, напичканный автоматикой, пластиком и, конечно же, кнопками!
Но не только футурологи грезили кнопками. Маркетинг тоже не спал.
— Кнопки олицетворяли роскошь
В пятидесятых кнопочные технологии распространились на множество потребительских товаров, включая новый предмет роскоши для среднего класса — автомобиль. Фраза «pushbutton» стала прилагательным, стоящим в одном ряду с такими словами, как «современный», «роскошный», «продвинутый», «новый», «простой» и т.д.
Всё, что заводилось с кнопки, автоматически приобретало статус «премиум». Вот, например, духовка, стиральная машина и открывалка консервов — для хозяюшек той же эпохи:
Слоган эпохи: «так легко, что даже женщина сможет сделать это».
До кнопок была технологическая пропасть между тогдашними «гиками» и простыми людьми. Теперь же каждый мог пользоваться каким угодно сложным прибором — ведь для это нужно было только нажать на кнопку.
Рекламный прием «pushbutton» нельзя назвать самым изящным, однако он используется и по сей день. Только теперь он перекочевал на веб-сайты — вспомните это бесчисленные «всё, что вам нужно сделать, это нажать на кнопку».
Первый пульт дистанционного управления тоже появился в «кнопочную» эру, в 1956. Люди могут контролировать технику на расстоянии и без проводов!
Но ассоциации с будущим и роскошью — это еще не всё.
— Кнопки олицетворяли страх
После второй мировой войны началась гонка вооружений. Угроза ядерного уничтожения представлялась такой же легкой, как одно несильное нажатие. Помните крылатую фразу с BBC: «У кого палец лежит на ядерной кнопке?».
Знаменитый фильм 1951 года, обучающий детей технике безопасности при ядерном взрыве — «Duck and Cover»
— Кнопки олицетворяли контроль
В это же время инженеры строили сложные вычислительные машины внушительных размеров, с рядами кнопок. Только немногие специалисты могли работать с такими машинами, используя особый профессиональный язык.
И обратная сторона: нажатие на неправильную кнопку вызывает хаос, катастрофу.
Но кнопка постепенно обрастает и другими символами.
— Кнопки олицетворяли игру
Игровой пинбол-автомат «Шалтай-Болтай» (Humpty Dumpty, 1947) — первая игрушка, использовавшая флипперы, лопатки, подбрасывающие шарик. Игрок впервые мог с помощью сложного механизма взаимодействовать с шариком и его окружением. Инструментом управления были, как вы понимаете, всё те же кнопки.
Так началась новая история игр. В 1977 произошла вторая революция в игромире — с появлением приставки Atari. И, конечно же, первого кнопочного джойстика — иконы целого поколения. Игры пришли в дом.
Бум аркад пришелся на 1970-е. Постепенно умение ловко управляться с кнопками стало ценным навыком, который породил целую индустрию:
Человечество накопило достаточный пользовательский опыт для того, чтобы интуитивно понимать кнопочные интерфейсы. Настало время, когда кнопка выросла в нечто большее, чем просто «выступающий кусочек пластмассы».
— Кнопка стала метафорой
Это новое качество кнопки помогло перейти к следующей эре.
Эра «поверхности». Электронная
До этого кнопки были физическими объектами. В 1984-м году Macintosh представил миру идею того, что кнопки могут быть виртуальными:
Но виртуальные кнопки всё еще нуждаются в кнопках физических. Чтобы нажать на «Ок», пользователь должен использовать кнопочную мышь.
Однако концепция была настолько новаторской, что компании Apple пришлось обучать людей тому, как этим пользоваться. Они выкупили 39 рекламных страниц еженедельника Newsweek для того, чтобы опубликовать инструкцию.
Вместе с появлением компьютерных интерфейсов, а потом и интернета, с кнопками произошла еще одна метаморфоза:
— Кнопка потеряла форму
В вебе «кнопкой» может быть всё, что угодно. И этому не нужно иметь специальную форму — визуально они могут быть, например, подчеркнутым текстом. Или изображением. Для примера пара картинок для сравнения — на первом кадре «сайт как он есть», на втором только интерактивная его часть:
Пользовательский опыт вкупе с проверенной годами системой обозначений в вебе помогают интуитивно понимать, в какое место сайта нужно кликнуть, чтобы получить результат. Появляется целая профессия — проектировщик пользовательских интерфейсов (UI-дизайнер), который должен обладать навыками аналитика, а помимо этого, уметь «предугадывать», какой вариант интерфейса будет в данном случае наиболее удобен пользователю.
Владимир Завертайлов: У нас в студии, например, сейчас работают сразу двое UI-проектировщиков. Они анализируют потребности бизнеса, «проецируют» их на современные веб-технологии и тренды, добавляют «изюминку». В результате UI-проектировщики предлагают свое цельное видение пользовательского интерфейса, его интерактивный и полностью юзабельный прототип. Мы обсуждаем варианты, подбираем оптимальный и только после этого приступаем к «дорогим» этапам проекта: дизайну, верстке, программированию.
Владимир Завертайлов: У нас в студии, например, сейчас работают сразу двое UI-проектировщиков. Они анализируют потребности бизнеса, «проецируют» их на современные веб-технологии и тренды, добавляют «изюминку». В результате UI-проектировщики предлагают свое цельное видение пользовательского интерфейса, его интерактивный и полностью юзабельный прототип. Мы обсуждаем варианты, подбираем оптимальный и только после этого приступаем к «дорогим» этапам проекта: дизайну, верстке, программированию.Следующий шаг в эволюции кнопок был вполне закономерным: появился совершенно новый тип интерфейса, который не требовал «посредника» между пальцем пользователя и кнопкой.
— Виртуальные кнопки стали чувствительными к прикосновениям
Тачскрины еще относительно недавно были чем-то на грани научной фантастики. Но технология стремительно проникла в нашу жизнь: сначала на экраны всевозможных терминалов, затем — на дисплеи мобильных устройств и портативных компьютеров.
Итак, в какой эре мы живем сейчас? Давайте подведем итог. Кнопкам больше не нужны:
- Форма.
- Контур.
- Объем.
- Слова для обозначения.
- Украшения.
- и так далее.
В то же время, какие свойства мы предписываем кнопкам? Осознанно или на уровне подсознания:
- Простота.
- Контроль.
- Магия.
- Игра.
- Легкость.
- Автоматизация.
Теперь мы думаем об объектах не как о статичных вещах, но как о предметах, имеющих глубину и продолжительность во времени. Мы приближаемся к той эпохе, когда всё будет интерактивным.
Эволюцию интерфейсов (со взглядом в будущее) можно представить так: Эра рычага → Эра кнопки → Эра «поверхности» → Эра динамичного интерфейса. Последняя не за горами, первые ласточки уже есть.
Сегодняшние дети моментально учатся использовать тот же iPad, ведь его технология не задействует никакие «промежуточные» контроллеры. А результат каждого действия — легко интуитивно предугадать.
Представьте поколение, выросшее в эпоху, когда тач-поверхности и повсеместная интерактивность — обыденные вещи. Представьте, насколько это качественно меняет их сознание, в сравнении с нашим.
И попробуйте угадать — какую технологию взаимодействия и какой интерфейс они предложат миру?
Заключение
Кнопка имеет историю длиной в 100 лет: от механической эры до эры электроники и компьютерных технологий. Это одно из самых значимых изобретений XX-го века.
Основой сегодняшнего рассказа послужила замечательная презентация Bill DeRouchey. Спасибо ему за колоссальную исследовательскую работу.
