К примеру, у цифровых систем пользовательские интерфейсы бывают графические, голосовые, командной строки, жестовые — все это интерфейсы. Через пользовательский интерфейс мы получаем доступ к новым возможностям, которые дает приложение для обучения, работы, творчества, развлечений.
Вехи развития GUI: Alto, Apple, Blit, Paintbox и другие ранние системы
Перед следующей статьей из цикла «Приключения микропроцессоров» мы решили поговорить с вами о GUI. Из года в год система взаимодействия ОС, ПО и пользователей совершенствовалась. Аппаратные методы общения с компьютером уступили место интерфейсу командной строки. Командная строка в пользовательском сегменте «сдалась» под напором файл-менеджеров. И, наконец, появились полностью графические интерфейсы пользователя с привычными окнами, выпадающими меню и прочими удобствами.
Сегодня мы хотели бы поговорить о том, как развивался графический пользовательский интерфейс на протяжении последних 50 лет. Под катом рассмотрим некоторые интересные образчики применения GUI, необычные ОС и компьютеры. Как обычно, с массой фотоматериалов и видео. Потому что, как говорила Алиса, «что же это за книжка, в которой нет картинок?».
Кратко о первых устройствах ввода
Вероятно, одним из самых ранних образцов пользовательского интерфейса (конечно же, если воспринимать его в качестве некой системы взаимодействия программиста и вычислительной машины) является перфокарта. Ничего общего с UI в современном понимании этого термина перфокарты не имели. Фактически, это всего лишь средство ввода программ и данных для последующей обработки. Одно из первых устройств для создания перфокарт было разработано Германом Холлеритом еще в 1897 году. А на фотографии ниже изображено устройство середины XX века.
Перфокарта в перфораторе. // Источник: visualhistory.livejournal.com
Вслед за перфокартами компьютеры обзавелись клавиатурами. Сначала — в виде модернизированных печатных машинок (или подобных устройств), а первые полноценные компьютерные клавиатуры появились только в 1970-х.
Приблизительно так выглядели первые компьютерные «клавиатуры»: телетайпы и печатные машинки нередко «модифицировали» для подключения к ЭВМ. // Источник: Bazava.ru
В 1968 году на Калифорнийской выставке интерактивных устройств была продемонстрирована первая компьютерная мышь, а 2 года спустя Дуглас Энгельбарт запатентовал свое изобретение. В СССР компьютерные мыши также производились. Одна из первых версий носила гордое имя «Манипулятор „Колобок“» — по всей видимости, из-за металлического шарика. Тем не менее, лишь с приходом на массовый рынок GUI мыши приобрели повсеместную популярность.
Прототип мыши Дугласа Энгельбарта. // Источник: en.wikipedia.org Отечественный «Колобок». Следы плавления на корпусе остались от проводов, которыми он был обмотан во время хранения. // Источник: polymus.ru
Еще одно популярное устройство ввода, джойстик, перекочевало в компьютерное (преимущественно игровое) применение из военной техники. Да, это не совсем «указывающее» устройство, однако мы не могли пройти мимо следующего интересного факта.
Неизвестно, кто именно начал применять джойстики для управления компьютером, однако первым электрическим джойстиком на сегодняшний день считается knüppel («кнюппель»), специальное устройство, с помощью которого осуществлялось управление ракетами Henschel Hs 293 1943 года.
Один из вариантов knüppel. // Источник: Wehrmacht-history.com
Кроме того, в течение нескольких десятилетий на рынке существовали разнообразные варианты трекболов (предшественник мыши), световых перьев и прочих устройств ввода. Некоторые из них так и остались в истории, некоторые трансформировались в привычные нам сегодня девайсы. Однако не будем заострять излишнее внимание на средствах взаимодействия с GUI и перейдем к разговору непосредственно об этой концепции.
Большая их часть, порядка полутора тысяч, были установлены непосредственно в Xerox Laboratories, остальные продавались университетам в качестве учебных и вычислительных машин.
История GUI
GUI был разработан в конце 1970-х годов, и до появления GUI существовал интерфейс командной строки или CLI, который представляет собой отвратительный интерфейс, обычно используемый техническими или профессиональными людьми.
Первый коммерчески доступный графический интерфейс разработан Xerox под названием PARC.
Он выпущен с именованной информационной системой Xerox 8010, выпущенной в 1981 году.
После этого Стив Джобс увидел GUI в туре по Xerox. Запущена операционная система Apple на основе графического интерфейса для персонального компьютера Macintosh, выпущенная в 1984 году.
После этого выпуска Windows также начала разработку операционной системы на основе графического интерфейса, в которой 1985 год был выпущен на основе графического интерфейса для Windows 1.0.
GUI Компоненты
Графический интерфейс состоит из разных компонентов.
Не все компоненты должны существовать в графическом интерфейсе, но в большинстве случаев эти компоненты используются.
- Окно является одним из самых популярных компонентов графического интерфейса. Обычно окно содержит несколько компонентов графического интерфейса. Окно также используется в качестве интерфейса для разных приложений
- Кнопка обычно используется для запуска действия, такого как сохранение, редактирование, запуск, остановка некоторых действий в графическом интерфейсе.
- Метка представляет собой текстовую метку, которая используется для предоставления информации с текстом.
- Текстовое поле используется для ввода текстовой информации в графический интерфейс и очень популярный компонент.
- Ползунок используется для перемещения указателя, чтобы установить конкретное значение.
- Изображение – это еще один популярный компонент, который используется для отображения некоторых изображений в графическом интерфейсе.
- Видео является популярным компонентом, где могут быть показаны различные типы видео.
- Чекбокс используется для предоставления нескольких опций для проверки одного или нескольких из них.
- Панель – это часть экрана, которая предоставляет ярлыки или список чего-либо.
- Tab предоставляет несколько экранов в Windows, что очень удобно для размещения множества компонентов графического интерфейса в одном окне.
- Значок используется, чтобы показать небольшую картинку
- Мышь – аппаратная, но очень важная для пользовательского ввода в графический интерфейс
- Клавиатура – это другое оборудование, которое обеспечивает ввод для таких компонентов, как текстовое поле.
- Меню предоставляет несколько ярлыков в окне, чтобы открыть их.
- Указатель используется для выбора и взаимодействия с компонентами графического интерфейса с помощью мыши.
- Рабочий стол используется в операционных системах для предоставления пользователю основного экрана с различными инструментами и компонентами графического интерфейса, такими как меню, окно, изображение и т. д.
Эта форма пользовательского интерфейса теперь считается устаревшей, но по-прежнему используется, например, в операционных системах Windows cmd.exe, хотя синтаксис по-прежнему в значительной степени ориентирован на предка DOS. Использование компьютера через CLI выполняется исключительно с помощью клавиатуры, поэтому мышь не используется.
Каковы недостатки использования графического интерфейса пользователя?
Поскольку элементы представляют собой графику, а не текст, графические интерфейсы могут использовать гораздо большую вычислительную мощность по сравнению со стандартным текстовым интерфейсом.
Кроме того, продвинутые пользователи могут не любить графические интерфейсы, потому что часто требуется последовательность действий (например, открытие меню, переход к файлу, который вы хотите открыть, щелчок по нему) до завершения процесса. С помощью текстового интерфейса или командной строки можно ввести всего одну строчку, и она будет действовать.
История графических пользовательских интерфейсов
Первый графический интерфейс пользователя был разработан в 1981 году в Xerox PARC Аланом Кей, Дугласом Энгельбартом, наряду с другими исследователями, которые поняли, что наличие графического представления операционной системы сделает ее более доступной для масс.
Первое коммерческое использование графического интерфейса было на компьютере Apple Lisa в 1983 году. До этого такие компьютеры, как MS-DOS и Linux, использовали интерфейсы командной строки, поскольку их использование ограничивалось продвинутыми бизнес-пользователями, а не потребителями.
Год спустя Apple Macintosh стал самым популярным коммерческим компьютером с графическим интерфейсом. В 1985 году Microsoft последовала примеру Apple выпустив Windows 1.0. И только в 1995 году после запуска Windows 95 Microsoft догнала коммерческий успех Apple в мире графических интерфейсов.
NUI (жестовые, естественные) применяют в играх для приставок Xbox, Nintendo Wii или PlayStation. Эту же технологию вы найдете в оборудовании «умного дома», например, при включении света или регулировании громкости Яндекс.Станции с помощью изменения положения руки.
Содержание
В начале семидесятых большинство пользователей работали на компьютерах, сидя за символьными терминалами — управление с системой осуществлялось прямиком из командной строки посредством текстового ввода.
Собственно, на первых компьютерах вопрос о пользовательском интерфейсе не стоял — работавшие на них профессионалы вполне могли себе позволить потратить время на изучение самых сложных инструкций по обращению с подопечной машиной — рано или поздно это окупалось сторицей. Однако даже во времена ламповых монстров, когда возможность нашествия многочисленных пользователей-любителей не предполагалась даже в самых смелых прогнозах, кое-кто уже стал задумываться о том, чтобы сделать интерфейс неприступной с виду ЭВМ проще и понятнее для сидящего за терминалом человека.
Эксперименты показали, что пользователь гораздо быстрее учился работе с новым приложением, используя именно графический интерфейс (он же Graphical User Interface, он же GUI) вместо усердного заучивания очередных команд. Выгоды от работы с GUI были налицо — рост производительности труда, очевидный комфорт и просто удовольствие от работы.
Шаг в теорию — так что же такое пользовательский интерфейс? Известный российский программист М. Донской дает этому понятию такое определение: «Сюда входит не только, и даже не столько картинка на экране — трехмерная, анимированная или просто выполненная в модном дизайне, — сколько способы взаимодействия пользователя с системой». Один из главных теоретиков в данной области, Тео Мандрел кратко определил лучший интерфейс как такой, который «позволяет пользователю сделать то, что он хочет, когда он хочет и как он хочет». Если подходить к большинству современных программных средств с такой позиции, то значительную часть из них (если не все) придется признать крайне неудовлетворительными. Впрочем, к этому мы еще вернемся, а сейчас снова обратимся к истории — как все это начиналось?
Теоретические основы GUI были заложены в 1960-е годы работами сотрудника исследовательского центра SRI Дуга Энгельбарта — в активе этого человека числятся манипулятор «мышь», управляемый с помощью манипулятора курсор на экране дисплея и система экранных окон, ответственных за исполняемые компьютером приложения. А точкой роста для идей Энгельбарта, впоследствии реализованных в полноценный GUI, стал Xerox Palo Alto Research Center, Xerox PARC, организованный на рубеже 1960-70 годов — там экспериментировали с прототипом графического пользовательского интерфейса, в котором символьный терминал и командная строка были заменены точечно-растровым экраном с иконками и многочисленными окнами.
В то время корпорация Xerox добилась всемирной известности, став почти монополистом на рынке копировальной офисной техники, и решила диверсифицировать свой бизнес, распространив его в область зарождающихся компьютерных технологий. Примечательно, что никто тогда точно не знал, что же следует делать — Xerox собрала под одной крышей хиппующую талантливую молодежь из университетских леваков, не желавших по политическим соображениям работать на правительство, и обеспечила своим подопечным относительную свободу. Разумеется, обстановка студенческой вольницы доставила немало головной боли администрации, но при этом весьма способствовала возникновению огромного количества передовых идей (в качестве примера можно назвать созданные именно в PARC первый ПК и лазерный принтер). Одной из них была так называемая парадигма WIMP (Windows, Icons, Menus, Point-and-click — окна, пиктограммы, меню, «укажи и щелкни»), которая и переросла позже в GUI.
Классификация
Можно выделить следующие виды GUI:
- простой: типовые экранные формы и стандартные элементы интерфейса, обеспечиваемые самой подсистемой GUI;
- истинно-графический, двумерный: нестандартные элементы интерфейса и оригинальные метафоры, реализованные собственными средствами приложения или сторонней библиотекой;
- трёхмерный.
Одним из требований к хорошему графическому интерфейсу программной системы является концепция «делай то, что я имею в виду» или DWIM (англ. Do What I Mean). DWIM требует, чтобы система работала предсказуемо, чтобы пользователь заранее интуитивно понимал, какое действие выполнит программа после получения его команды.
Пользовательский интерфейс — это все, что помогает людям управлять устройствами и программами с помощью голоса, нажатий, жестов, через командную строку и даже силой мысли (такое теперь тоже есть). Самый популярный вид интерфейсов сейчас — UI приложений.
Графический пользовательский интерфейс
Этим термином чаще обозначаются UI мобильных и веб-приложений, а также игр и сервисов для развлечений.
Мобильные интерфейсы
Выделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer). Подход к дизайну мобильных интерфейсов отличается от подхода к дизайну настольных приложений. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом. Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы.
Дизайн мобильных приложений также зависит от поведенческих паттернов пользователей, например того, как они держат смартфон в руке, какие действия удобно совершать на ходу и т.д.
Веб-интерфейсы
Технологии позволяет создавать полноценные веб-приложения, по функциональности не уступающие настольному ПО: Trello, Google Docs, Twitch, Яндекс.Дзен.
Преимущество таких приложений в том, что их не нужно устанавливать на компьютер — все функции доступны в браузере. Создают такие приложения с помощью JavaScript, HTML и CSS.
Игровой и материальный
Связан с механикой геймплея. Именно в нем лучше всего раскрывается сопровождающая роль интерфейса, так как игрок лучше ощущает, что движется к какой-то цели (например, победить босса и пройти уровень). Интерфейс зависит от игры: кнопки, жесты, движения мыши или взаимодействие с сенсором на экране или 3D интерфейс в VR, нажатие клавиш на джойстике.
Модель пользовательского интерфейса: реальный мир и ментальная модель пользователя
Программные продукты призваны увеличивать наши возможности в реальном мире. Каждый продукт — как супергерой, его задача — помочь нам в чем-либо: суперпамять, общение сквозь любые расстояния, максимум развлечений и так далее. Ко всем этим свойствам мы получаем доступ через интерфейсы.
Каждое приложение мы распахиваем в определенном контексте. Контекст подразумевает определенные ожидания от того, как все должно работать. Ожидания основаны на прошлом опыте. При знакомстве с новым продуктом мы бессознательно переносим на него сформировавшиеся ожидания и привычки, которые выстроились в прошлом вокруг другого схожего продукта (или способа решения схожей задачи).
Ментальная модель — это схема в нашей памяти с логикой «объект → принцип взаимодействия → результат». При этом от всех похожих объектов мы ожидаем похожего поведения и результата.
«В основе ментальной модели лежат убеждения, а не факты. Это значит, что нужно принять то, что пользователи уже знают (или думают что знают) о том, как работает ваш продукт. И взять это в работу».
Nielsen Norman Group
У каждого интерфейса под капотом находится определенная модель системы, которая призвана помогать пользователю достигать определенных целей.
Например, модель покупки дорогих автомобилей для постоянных клиентов автосалона в мобильном приложении может включать 4 шага: наполнить корзину, оформить заказ, подтвердить заказ, внести оплату.
Модель и Интерфейс тесно взаимосвязаны. Чтобы понять разницу между Моделью и Интерфейсом, задайте вопрос: откуда вообще взялась корзина? Разве клиенты добавляют автомобили в тележку пачками, как в супермаркете? Или все-таки нужна модель не корзины/тележки из супермаркета, а тест-драйва в автосалоне?
Т.е. мы в приложении можем вместо корзины сразу при выборе автомобиля предлагать записаться на тест-драйв или начать оформление покупки (в том числе в кредит). А теперь задайте вопрос: как часто покупатели дорогого автомобиля готовы менять авто и вписывается ли мобильное приложение в их жизненный контекст?
Выходит, что за любым объектом в реальном мире стоит модель, которая находится в нашем сознании — это наши представления о том, как эта штуковина перед нами должна работать. И эти представления возникают еще до того, как мы дотронулись до нее.
Несмотря на успех Amiga, восьмибитный Commodore 64 также активно продавался до 1994 года, пережив несколько ревизий и технический «апдейт» — офисную машину с Zilog Z80 в качестве сопроцессора для CP/M, Commodore 128.
Голосовой пользовательский интерфейс (VUI)
Хотя графические интерфейсы используются практически во всех областях, эволюция пользовательского интерфейса с графическим интерфейсом еще далека от поиска: с помощью Voice User Interface взаимодействие с машинами благодаря голосовому управлению . В настоящее время любая текущая операционная система предлагает такой пользовательский интерфейс: Apple имеет Siri, Microsoft оснащена текущими версиями Windows с Cortana и при условии, что имеется подходящее оборудование, даже поиск Google работает с помощью голосовых вставок. Так как приложения могут быть открыты с помощью голосового вызова, а текст вводится автоматически, диктуя слова, пользователи могут работать более эффективно. Дополнительное преимущество: голосовое управление обеспечивает доступность все больше и больше.
Коммуникация с машиной происходит особенно интуитивно с помощью естественного пользовательского интерфейса. NUI можно считать следующим шагом в эволюции графического интерфейса и Voice User Interface : интерактивный командный интерфейс реагирует как на жесты, так и на движения и язык. Кроме того, он имеет возможность распознавать лица и объекты. Различные датчики, камеры и микрофоны позволяют общаться с машиной по-разному. Мало того, что многие современные смартфоны и планшеты все чаще используют технологии NUI, но консоль Wii от Nintendo также решила реализовать жесты, лица и вокальное распознавание игривым способом.
Презентация проекта Microsoft привлекла внимание в 2011 году: технология была разработана с именем OmniTouch, который проектирует функцию сенсорного экрана на любой воображаемой поверхности. OmniTouch основана на системе управления движением Kinect от Microsoft, которая была представлена на рынке консоли Xbox 360 в ответ на конкурента Nintendo Wii. Кроме того, вступают в действие лазерный проектор и специальная видеокамера. Эта специальная форма Natural User Interface также разработана для использования на мобильном устройстве, и в этом случае оборудование переносится на плечо.
Другие типы пользовательского интерфейса
В дополнение к этим формам пользовательского интерфейса повседневного использования существуют также некоторые экзотические типы и инновации, которые еще не достигли массового рынка: например, пользовательский интерфейс Tangible, также сокращенный в TUI, пользовательский интерфейс восприятия (PUI) и компьютерного интерфейса мозга (BCI).
Разумный пользовательский интерфейс (TUI) — это пользовательские интерфейсы объектов, поэтому они осязаемы. Это означает, что взаимодействие с машиной происходит через физические объекты: являются ли они кубиками, шарами или другими объектами, которыми могут манипулировать люди (например, повернутые или раздавленные), благодаря чему выполняются механизмы или запрашивается цифровая информация. Разумный пользовательский интерфейс часто используется в музеях и ярмарках.
Развитие Perceptual User Interface (PUI) все еще находится на эмбриональной стадии, но исследования продолжаются. Это пользовательский интерфейс, контролируемый восприятием, который является связующим звеном между VUI, GUI и электронным распознаванием жестов.
Даже компьютерный интерфейс мозга (BCI) уже не является научной фантастикой: с помощью электродов потоки мозга измеряются и преобразуются в команды по алгоритмам. Исследователи уже смогли отметить первые успехи: в Соединенных Штатах парализованный пациент сумел маневрировать роботизированной рукой с мыслью. Таким образом, BCI рано или поздно может революционизировать использование без барьеров компьютеров или других машин.
