Сибирикс

Иконки в интерфейсах: 10 историй появления

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

Сегодня небольшая подборка историй появления иконок. Мы нашли одну хорошую статью и немного ее дополнили.

Ещё во время Второй мировой войны инженеры использовали двоичную систему, чтобы маркировать отдельные кнопки питания и поворотные переключатели: 1 означало «включено», а 0 — «выключено». В 1973 году Международная электротехническая комиссия дала довольно расплывчатую формулировку круга с пересекающей его линией — «питание в состоянии ожидания». В институте инженеров по электротехнике и радиоэлектронике (IEEE) сочли такую формулировку слишком неопределенной, и предложили назвать символ просто — «питание».

Что общего у шведских кемпингов и повсеместного использования логотипа Apple? По мнению Энди Херцфельда (Andy Hertzfeld), члена первоначальной команды разработчиков Mac, очень многое. Во время работы над созданием так называемых «горячих клавиш», Энди и его товарищи решили выделить на клавиатуре специальную кнопку, при нажатии на которую одновременно с другими клавишами будет выполняться определенная команда меню. Естественно, в первоначальном варианте это была «кнопка Apple» с фирменным надкусанным яблоком. Стив Джобс сразу возненавидел этот символ, крича в порыве ярости: «На экране слишком много яблок! Это просто смешно! Мы впустую используем наш логотип!» После чего растровой художнице Сьюзан Кэр (Susan Kare) пришлось срочно искать замену. Цветочный символ, широко распространенный в Швеции и других скандинавских странах, символизирующий палаточный лагерь, и известный как «Петля Гордона» показался Сьюзан Кэр наиболее привлекательным. Кстати, в качестве автомобильного знака этот символ означает «достопримечательность».

Несмотря на то, что этот знак «изобретен» много лет назад, в настоящее время под ним понимают порт Ethernet — и всё благодаря Дэвиду Хиллу из IBM, который и предложил такое обозначение. Согласно его задумке, символ был частью целого набора символов, предназначенных для изображения локальных соединений. Каждый блок символизирует компьютер, при этом связи между ними могут не отражать реальную иерархию.

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

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

И как только не называли знак @: улиткой во Франции и Италии, мышкой в Китае, хвостом обезьяны в Германии… В 1971 году Раймонд Томлинсон, программист из Beranek & Newman, решает вставлять символ «собаки» в сетевом адресе компьютера, чтобы различать пользователей. Задолго до этого, в далеком 1885-м символ @ использовался в бизнесе для обозначения стоимости, благодаря чему появился сначала на счетах, потом — на клавиатурах пишущих машинок и уже оттуда перекочевал в мир веба. Узнать же первоначальное значение символа практически невозможно: есть мнение, что @ появилась в шестом веке — в качестве сокращенного написания слова ad — объявление, реклама (англ.). На латыни писали по-другому — at, однако правильно воспринять на слух и не спутать с A.D. (Anno Domini — наша эра) было не так просто.

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

Точка с изогнутыми радиальными линиями является общепринятым обозначением для Wi-Fi. Сам термин Wi-Fi изначально был придуман как игра слов для привлечения внимания потребителя на Hi-Fi (High Fidelity — высокая точность). Несмотря на то, что поначалу использовалось словосочетание Wireless Fidelity (беспроводная точность), на данный момент от такой формулировки отказались, и термин «Wi-Fi» никак не расшифровывается.

Вы, вероятно, слышали историю о датском короле 10-го века, Харальде Синезубом и о том, как его имя связано с Bluetooth. Иконка самой технологии — это комбинация двух рун, которые обозначают инициалы Харальда. Так получилось, что первый Bluetooth-адаптер имел форму, напоминающую зуб, и был синего цвета. Но история символики на том не заканчивается. Харальд был знаменит и тем, что объединил под своим началом земли, ныне известные как Норвегия, Швеция и Дания. Технология Bluetooth разрабатывалась для того, чтобы объединить различные отрасли — компьютерную индустрию, мобильные телефоны и автомобильный рынок.

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


Эрудицией и линками на годные «история возникновения» можно блистать прямо в комментариях!

Сюрприз с мотивирующими иконками от Антона


 

Что еще почитать по этой теме

Роль микровзаимодействий на сайте
07 Апреля 2014

Один из примеров микровзаимодействий — в iOS7 иконка приложения показывает текущее время. Микровзаимодействия могут самым положительным образом сказаться на впечатлениях пользователей о вашем сайте. Дэн Саффер (Dan Saffer) в своей статье «Improve Your Websites With Microinteractions» объясняет, что представляют из себя эти самые микровзаимодействия и как эффективно их использовать.

Заблуждения о параллаксе на сайтах
31 Марта 2014

Параллакс на современных сайтах применяется настолько часто, что уже стал общепринятым стандартом. Однако многие до сих пор не имеют четкого представления о том, что такое параллакс. Роб Палмер (Rob Palmer), дизайнер и креативный директор из Великобритании, в своей статье «The Troublesome Misconception of Parallax in Web Design» расставляет точки в этом вопросе, показывает, чем параллакс отличается от «просто анимации на сайте».

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

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

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.