Графический интерфейс пользователя, каким мы его знаем сегодня, возник в результате десятилетий исследований множества инженеров и ученых. Программа Sketchpad Айвена Сазерленда, созданная в 1962 году, считается первым графическим интерфейсом пользователя.

Дуглас Энгельбарт изобрел компьютерную мышь в 1964 году, чтобы преодолеть ограничения световых перьев. Конструкция мыши продолжала развиваться. Исследователи PARC разработали первые растровые окна и меню, которые реагировали на ввод данных мышью. Дэвид Кэнфилд Смит в 1975 году ввел термин «иконка» для описания графических символов, представляющих программы и данные. 

Xerox Star в 1981 году коммерциализировал многие из этих концепций графического интерфейса, а Macintosh от Apple в 1984 году сделал их общепринятыми. В настоящее время ведутся юридические споры о том, кому принадлежат права интеллектуальной собственности на различные элементы графического интерфейса пользователя, такие как окна и значки.

В начале было Демо

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

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

GUI в понимании большинства — это окна, иконки, меню и курсор (Windows, Icons, Menus and Pointing device, WIMP). Сейчас всё это кажется единой системой, но в эпоху становления GUI все эти элементы развивались по отдельности.

Memex

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

В 1945 в статье «Как мы можем мыслить» Буш впервые описал устройство, которое назвал «Memex». Оно представлялось ему похожим на стол с двумя сенсорными графическими дисплеями, клавиатурой и подключенным к нему сканером. Устройство позволяло пользователю получить доступ ко всем человеческим знаниям, используя элементы, очень похожие на современные гиперссылки. 

Сам Буш описывал Memex так: «В верхней части стола расположены наклонные полупрозрачные экраны, на которые можно проецировать материал для удобного чтения. [...] В нижней части каждого из них есть несколько пустых мест для кодов [...] Пользователь нажимает одну клавишу, и элементы соединяются навсегда». 

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

«При отклонении одного из этих рычагов вправо он пробегает книгу, лежащую перед ним, причем каждая страница по очереди проецируется со скоростью, позволяющей бегло просмотреть ее. Если отклонить его еще дальше вправо, то он пролистывает книгу по 10 страниц за раз; еще дальше — по 100 страниц за раз. Отклонение влево позволяет производить управление в обратном направлении. Специальная кнопка сразу же переводит его на первую страницу оглавления».

Чем не прототип современной программы с GUI или веб-страницы, где пользователь управляет мышью?

На тот момент цифровой компьютер еще не был изобретен, и возможности воплотить идею в реально работающее устройство не было. Идеи Буша в то время широко не читались и не обсуждались.

The Mother of All Demos

Несмотря на то, что концепция графического интерфейса WIMP появилась при разработке компьютера Alto в лаборатории Xerox PARC в 1970-х годах, фактическое изобретение подобного интерфейса приписывается Дугласу Энгельбарту и его проекту Human Augmentation Project научно-исследовательского института Стэнфорда (SRI) в конце 60-х годов.

Энгельбарт вдохновлялся в том числе работами Ванневара Буша, и его главной задачей было «дополнить человеческий интеллект». И тот прототип интерфейса, который мы сегодня относим к GUI, был единственным осмысленным вариантом решения этой задачи. 

Изначально Энгельбарта вдохновили радарные консоли, с которыми он работал на флоте во время Второй мировой войны. Однажды в декабре 1950 г. он представил себя сидящим перед «большим экраном компьютера, заполненным различными символами». Но для полной реализации этого замысла потребовались годы.

В 1960-х годах Энгельбарт вместе со специалистом по психоакустике Джозефом Ликлайдером разработали концепцию симбиоза человека и компьютера. Ликлайдер представлял себе, что человек и компьютер становятся взаимозависимыми, каждый из которых дополняет другого. При этом Ликлайдер представлял себе, что искусственные помощники будут лишь помогать в подготовительной работе, предшествующей собственно мышлению, которое будет осуществляться человеком. 

В 1962 году Энгельбарт разработал знаменитую концепцию H-LAM/T (Human using Language, Artifacts, Methodology, in which he is Trained), моделирующую систему, состоящую из человека, языка (понятий, символов, представлений), артефактов (физических объектов), методик (процедур, ноу-хау) и обучения. Система Энгельбарта представляет собой взаимодействие человека и искусственного объекта, работающего над задачей. 

Человек — это одна из частей большой системы, которая работает над решением проблемы. И поскольку эти пары проблема/решение часто определяются и направляются человеческим интеллектом, Энгельбарт и его предшественники назвали этот процесс «дополнением интеллекта», что и было вынесено в заголовок его статьи Human Augmentation.

Основные тезисы Энгельбарта были следующими: 

• человеческий интеллект уже расширен за счет языка, письменности, текстовых редакторов, телефонии и прочих методов общения и поиска информации; 

• человеческие проблемы становятся все более сложными, трудноразрешимыми и выходят за рамки ограниченных возможностей людей; 

• человеческий интеллект может быть расширен еще сильнее и включать термины, идеи и концепции, выходящие за рамки тех, которые может запомнить один человек, с помощью системы хранения и поиска информации; 

• такая система не только увеличит скорость решения существующих проблем, но и может быть применена к новым методам и процессам.

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

В результате исследований и дальнейших доработок идеи группа исследователей SRI создает компьютерную систему oN-Line System (NLS), которая является средой для совместной работы. В 1968 году эта система была представлена на презентации, которую потом назовут The Mother of All Demos.

Открывая 90-минутную презентацию, Энгельбарт задал вопрос: «Если бы у вас, как у работника умственного труда, в офисе был компьютерный дисплей, за которым весь день работал бы компьютер, живущий за вас и мгновенно отвечающий, реагирующий на каждое ваше действие, какую ценность вы бы извлекли?»

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

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

Документация по системе и другие подобные тексты отображались и обрабатывались как текст со встроенными ссылками на другие места, напоминающие гипертекстовый стиль WWW.

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

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

Его идеи стали по-настоящему востребованы уже позже. Сам Алан Кей как-то заметил: «Я не знаю, что будет делать Кремниевая долина, когда у нее закончатся идеи Дуга».

Windows

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

Дальнейшее развитие оконная концепция получила в 1970 году, когда компания XEROX сформировала Исследовательский центр Пало-Альто (PARC). К этому проекту присоединились и многие инженеры из команды Энгельбарта.

Эксперименты исследователей включали в себя создание перекрывающихся окон и всплывающих меню. Эти концепции были придуманы группой Learning Research Group Алана Кея для среды разработки Smalltalk. Алан Кей работал с Айвеном Сазерлендом, разработавшим систему Sketchpad в 1962 году, и видел презентацию Энгельбарта. Кей заинтересовался идеями объектов, объектно-ориентированного программирования и оконных систем. 

Smalltalk предоставлял графический интерфейс внутри своей среды разработки. Разработчики могли визуально создавать и редактировать код, видеть результаты выполнения программы в реальном времени, а также взаимодействовать с объектами и данными непосредственно через графический интерфейс. 

Вот как рассказывает об окнах Алан Кей в своей работе The Early History Of Smalltalk: «Перекрывающиеся окна были ключевой новой функцией Smalltalk. Первые версии окон были сделаны как настоящие перетаскиваемые 2½D-объекты, однако были слишком медленными, чтобы их можно было реально использовать. В итоге окна стали самым переработанным и перепроектированным классом в Smalltalk, поскольку у разработчиков не было достаточно вычислительной мощности.

В первых версиях отсутствовали иконки, кнопки и постоянные строки меню. Команды, включая изменение размера окна, выполнялись щелчком правой кнопки мыши и выбором всплывающего меню. Окна использовали соглашения GRAIL (графическое продолжение языка программирования JOSS, примеч. пер.) о чувствительных углах для перемещения, изменения размера, клонирования и закрытия. При планировании окон использовалась простая «бесконечная» схема управления, которая объединяла все окна вместе».

Первой программой, написанной под Smalltalk, стал Pygmalion. Именно в ней зародилась концепция иконок в том виде, в котором она сегодня представлена в графических интерфейсах компьютеров.

Дальше концепция окна развивалась в продукте Xerox Star, который разрабатывался как система автоматизации делопроизводства. К этому проекту присоединился и Дэвид Кэнфилд Смит — автор Pygmalion, который до этого уже успел поработать над проектом NLS в SRI.

Именно Смиту принадлежит авторство «метафоры рабочего стола». В рамках этой концепции он переделал ориентированные на программистов иконки Pygmalion в понятные офисным сотрудникам. Иконки представляли документы, папки, картотеки, почтовые ящики, телефоны, корзины для мусора и т. д. 

Но вернемся к окнам.

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

Чтобы окна работали, нужны были полосы прокрутки, которые решали бы проблему навигации по бесконечному полотну содержимого. И это изобретение было далеко не простым. 

Окна потребовали и изобретения оконных менеджеров. Проблема заключалась в том, как расположить окна на дисплее фиксированного размера. Было придумано бесчисленное множество вариантов расположения окон. В Xerox Star были окна, размер которых можно было изменять, перетаскивать и накладывать друг на друга.

В оригинальной Star окна приложений были расположены так, что они не перекрывали друг друга. Однако окна свойств и другие диалоговые окна могли перекрываться. Идея заключалась в том, чтобы оптимально использовать ограниченное пространство экрана. Кроме того, при открытии первого окна оно обычно открывалось так, чтобы не закрывать иконки справа.

Вскоре все эти наработки были переняты и развиты другими компаниями — Apple и Microsoft. Например, в ранних версиях Microsoft Windows окна располагались в виде плиток, представляющих собой не перекрывающиеся сетки окон. 

В 1979 году в Apple стартовал проект Lisa. Сотрудники не совсем представляли, каким должен быть новый компьютер. Тогда ученый-компьютерщик Джеф Раскин, занимавший в те годы в Apple должность менеджера отдела публикаций, предложил Стиву Джобсу посмотреть, что делают в PARC.

Сотрудникам Apple провели демонстрацию Smalltalk на компьютере Alto. Увидев графический интерфейс, Джобс инстинктивно понял потенциал этого нового способа взаимодействия с компьютером и не понимал, почему Xerox не продвигает эту технологию на рынок. В дальнейшем, в 1980 году, Джобс наймет в качестве главного дизайнера Lisa Ларри Теслера из Xerox PARC.

По воспоминаниям Кея, одним из лучших моментов демонстрации был момент, когда Джобс сказал, что ему не нравится прокрутка в blt-стиле (то есть bit field block transfer: блочная передача битового поля). Он спросил, можно ли сделать ее в плавном непрерывном стиле. Менее чем за минуту сотрудник PARC нашел соответствующие методы, внес (относительно серьезные) изменения, и прокрутка стала непрерывной. Это шокировало посетителей, особенно программистов, поскольку они никогда раньше не видели действительно мощной инкрементной системы.

Icons

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

Например, еще до появления Star секретарша компании Xerox жаловалась, что не может уследить за файлами на своем диске. При осмотре системы были обнаружены файлы с именами: memo, memo1, memo071479, letter и т. д. Осмысленно именовать файлы было совершенно неестественно для большинства обычных пользователей.

Впервые иконки появились в IDE Tajo, которая имела много общего со средой Smalltalk-80 и в дальнейшем была переименована в XDE. В Tajo иконки первоначально были просто заголовками окон. 

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

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

Так в команде появился Норм Кокс. Он руководил группой дизайнеров, которые разрабатывали шрифты для электронных пишущих машинок Xerox. В 1978 году Кокс отправил в проект Star картинку «входящей почты». Сотрудники PARC сочли ее «интересной» иллюстрацией, но не совсем той, которую хотели для своего проекта. Но в итоге, видимо, разглядев потенциал дизайнера, Норма Кокса пригласили в команду Star.

Спустя несколько лет, в 1981 году, Кокс, придумал знаменитое меню «Бургер», которое при этом сам признавал наименее продуманным решением.

Иконки в Star позволяли пользователям организовывать файлы пространственно. Файлы можно было хранить вместе, поместив их в папку или просто сгруппировав на рабочем столе, моделируя физический мир. Поскольку файлы данных были представлены иконками и различались по расположению, то пользователи могли использовать не осмысленные имена — memo, memo1, letter и т. д., не теряя при этом сами файлы, как в других системах.

Однако если в SmallTalk и Xerox Star иконки представляли собой файлы, то в интерфейсе Apple Lisa впервые появилась идея, что пиктограммы могут представлять все файлы в файловой системе, которые затем можно просматривать с помощью иерархической структуры каталогов, где каждый каталог открывается в новом окне. Тогда же была придумана идея «перетаскивания».

В 1984 году был выпущен первый компьютер Macintosh. По словам Бена Шнейдермана, профессора информатики и эксперта по пользовательским интерфейсам, «было ясно, что Mac — это большой шаг вперед по сравнению со Star». Шнайдерман был одним из первых пользователей Xerox Star, а позже выступал в качестве свидетеля в судебном процессе по делу об авторских правах, который Apple подала против Microsoft. Apple обвинила конкурента в заимствовании элементов GUI Mac и Lisa. Apple проиграла, а аналогичный иск, поданный компанией Xerox против Apple, был отклонен.

Иконки для Macintosh разработала дизайнер Сьюзан Кэр. Например, за основу символа command в Macintosh (⌘) она взяла знак, который используется в Скандинавии для обозначения достопримечательностей. Она также черпала вдохновение в разнообразных источниках, а также в Symbol Sourcebook — справочнике 1972 года по графическим символам, в котором собрано все: от астрологических знаков до меток бродяг. 

В 1992 году Кэр продолжила разработку иконок уже в Windows 3.1.

Menus

Одним из первых, кто реализовал меню, был исследователь PARC Уильям Ньюман в программе под названием Markup. Вслед за ним команда проекта Smalltalk встроила всплывающие меню, которые появлялись на экране в месте установки курсора при нажатии пользователем одной из кнопок мыши.

В Xerox Star пункты выпадающего меню представляли собой отдельные команды. Все дело в том, что реальной потребности в меню в этой ОС не было: разработчики добились этого не путем отказа от команд, а путем обобщения команд. Понятие универсальных команд (generic commands) придумал Дэвид Кэнфилд Смит. 

Каждое окно в Star имело заголовок, содержащий название иконки, и меню команд. Команды состояли из стандартного набора, присутствующего во всех окнах ("?", CLOSE, SET WINDOW), и других, зависящих от типа иконки. Например, окно файла записей содержит команды, предназначенные для поиска информации. Команда CLOSE удаляет окно с экрана дисплея, возвращая иконке ее миниатюрный размер. Команда "?" выводит на экран интерактивную документацию, описывающую тип окна и его применение.

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

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

Для решения этой проблемы команда Star придумала формы. Большинство форм отображается во всплывающих окнах, которые запрашивают ввод от пользователя перед выполнением команды.

Apple во многом улучшила и доработала изначальные идеи, реализованные в Xerox.

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

Выпадающее меню — это то, что было должным образом доработано в Apple Lisa. Apple сделала меню популярными благодаря своей верхней панели инструментов, которая существует и по сей день.

Pointer, mouse

Говоря про мышь и указатели, нельзя не упомянуть новаторское приложение Sketchpad, разработанное Айвеном Сазерлендом в 1963 году. Сазерленд, как и Энгельбарт, вдохновлялся идеями Ванневара Буша. Его приложение Sketchpad напрямую манипулировало объектами на ЭЛТ-экране с помощью светового пера. Для тех лет это действительно выглядело революционно.

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

Как указано в биографии Сазерленда, «Sketchpad стал пионером концепций графических вычислений, включая структуры памяти для хранения объектов, упругие привязки линий, возможность увеличения и уменьшения масштаба дисплея, а также возможность создания идеальных линий, углов и стыков. Это был первый GUI задолго до появления самого термина». 

В 1968 году Дуглас Энгельбарт впервые показал миру указатель и компьютерную мышь на презентации NLS. 

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

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

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

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

Когда и при каких обстоятельствах возник термин «мышь», достоверно установить невозможно. Один из разработчиков аппаратного обеспечения Роджер Бейтс рассказывал, что такое название стало логичным продолжением термина, которым тогда обозначали курсор на экране: CAT. Тогда забавной показалась идея назвать периферийное устройство компьютера, преследующее курсор (CAT) по экрану, мышью.

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

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

Дальнейшее развитие мышь получила в исследовательском центре Xerox в Пало-Альто, наиболее заметным изменением стало введение шарикового механизма. В продаже она появилась в 1981 году на рабочей станции Xerox Star, примерно через 15 лет после ее изобретения. 

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

***

Дальнейшее бурное развитие графических интерфейсов в 1980-х годах положило начало эре развития ПК, ориентированных на потребителя, которому больше не нужно разбираться в технических деталях. Имело ли это что-то общее с идеями Буша и Энгельбарта о расширении человеческого интеллекта — вопрос. 

Несмотря на то, что предпринимались попытки (например, демонстрационный проект Looking Glass компании Sun и исследовательский проект 3D-интерфейса компании Microsoft), пока радикально изменить способ взаимодействия с графическим интерфейсом никому не удалось.

Недавно Microsoft презентовала новый пользовательский интерфейс на основе LLM (Large Language Model), который выглядит очень простым в использовании и бросает вызов традиционному GUI.

Возможно, это и есть будущее развитие GUI-интерфейса. Пишите в комментариях, что думаете по этому поводу.

НЛО прилетело и оставило здесь промокод для читателей нашего блога:

-15% на заказ любого VDS (кроме тарифа Прогрев) — HABRFIRSTVDS.