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

Для менеджера Марии не происходит ничего необычного в этот обычный день. У нее есть от десяти до двадцати секунд, пока включится ее стандартный рабочий инструмент. После этого Мария отправит около двадцати писем, напишет в чат семи своим коллегам, посчитает на калькуляторе пару чисел и распечатает тридцать листов на офисном принтере марки Xerox.

Для Марии это обыденно.

А между тем в офисном углу стоит тот самый принтер, той самой фирмы, с которой все началось.

Забытые герои

Если спросить Марию о принтере, она удивленно поднимет бровь и скажет, что это Xerox какой-то модели, он достаточно хорошо печатает, в нем есть много полезных функций. И сама эта фирма производит принтеры, сканеры и прочую офисно-печатающую технику, да и в целом вызывает доверие. А потом попросит не лезть с глупыми вопросами.

А между тем, без изобретения Xerox Мария не отправила бы двадцать писем, не написала бы семи коллегам и все то прочее, что она сделает за день.

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

Страшно, непонятно и абсолютно не ясно, что с этим делать.

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

Сейчас это кажется нормальным и понятным, но для 70-х годов графический интерфейс был большим прорывом. Для своего интерфейса они использовали метафору офиса: файл превратился в иконку документа, место их хранения в папку, в место для удаленных документов в корзину. Раньше это было просто строкой текста на экране. А теперь интерфейс стал понятным, интуитивным и готовым к встрече с массовым пользователем.

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

А дальше дизайн:

И дизайн, и дизайн, и дизайн:

Набирая этот текст в MS Word в 2019 году, я до сих пор вижу иконку дискеты, которая сохранит все внесенные изменения при нажатии. Дискеты вышли из обихода больше пятнадцати лет назад — скоро ли придумают другую метафору для сохранения документа?

Почему курсор кривой

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

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

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

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

Мы привыкли видеть стрелку такой:

Дуглас Энгельбарт, изобретатель компьютерной мыши, на первых набросках изображал курсор как стрелку, направленную вверх.

И она должна была выглядеть как-то так:

Этот курсор кажется инородным, непривычным и чужим. Но такой он должен был быть, если бы не технические ограничения.

В момент проектирования первого компьютера с графическим интерфейсом оказалось, что разрешение экранов так мало, что не позволяет отрисовать ровно вертикальную стрелку достаточно миниатюрной. Размер указателя увеличили и наклонили его на 45 градусов. И придумали это ребята из Xerox. Как мы выяснили, это те, что делают принтеры.

Теперь отрисовать вертикальную стрелку возможно, но уже не нужно. Все привыкли.

Метафоры графического интерфейса

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

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

Есть и странные метафоры. Вы никогда не задумывались, почему меню на некоторых сайтах скрывается за иконкой-гамбургером?

Придумал «гамбургер» Норм Кокс. Норм — консультант по интерактивному дизайну и дизайну пользовательского интерфейса. И придумал он эту иконку для Xerox. Если вам кажется, что Xerox — это что-то вроде масонов в области интерфейса, то вполне может быть.

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

И тогда родилась эта идея.

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

И вот еще вопрос: знал ли Норм, какими станут современные «бургеры», во что превратится его лаконичная иконка трех линий в ряд?

Вместо послесловия

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

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

А, казалось бы, просто принтер в углу.

И под конец небольшая притча:

Как-то Сисадмин спросил:

— Учитель, не желаете ли красивую картинку для вашего десктопа? У меня есть хорошая коллекция обоев для рабочего стола со звездным небом и моральным законом.

— Почему ты думаешь, что мой нынешний wallpaper хуже? — спросил в ответ Инь Фу Во.

— Я не знаю, какая у вас картинка сейчас. Я никогда не видел вашего десктопа. У вас всегда открыто множество окон.

— Я тоже его никогда не видел, — сказал Инь. — Я работаю.