Графический интерфейс пользователя

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

Появление графического интерфейса было невозможно без устройства отображения информации высокого разрешения, которым до конца XX века оставалась электронно-лучевая трубка. Впервые ЭЛТ для отображения информации в комплекте со световым пером была применена на компьютере Whirlwind в начале 1950-х, а позже — на серийных компьютерах AN/FSQ-7 и AN/FSQ-8, ставших основой системы ПВО SAGE. Световое перо позволяло указывать на конкретный объект на экране, однако большая часть действий производилась с помощью физических элементов управления.

По мере распространения графических дисплеев на основе электронно-лучевых трубок такой графическо-физический интерфейс стал использоваться в системах автоматизированного проектирования, например — написанная в 1963 году для TX-2 САПР Sketchpad. Также примером ранних графических интерфейсов можно назвать первые видеоигры, такие как Spacewar!. Однако не было единого понимания принципов построения графических интерфейсов.

В 1960-е годы Даг Энгельбарт в научно-исследовательском институте Стэнфорда впервые свёл разрозненные примеры применения графических интерфейсов в единую систему в системе, названной oN-Line System (сокращённо NLS). В 1968 году он провёл конференцию, которую позже назвали The Mother of All Demos, на которой он продемонстрировал возможности нового подхода к проектированию интерфейса пользователя, а также новый вид указывающего устройства — мышь. Впоследствии его концепция была перенята учёными из исследовательской лаборатории Xerox PARC. В результате, кроме всего прочего, на свет появляется концепция графического интерфейса WIMP (Windows, Icons, Menus, Pointers) и в рамках этой концепции создаётся компьютер Alto. Он не был выпущен как коммерческий продукт, но широко использовался на фирме как корпоративный инструмент Xerox.

В 1979 году Three Rivers Computer Corporation выпустила рабочую станцию PERQ, похожую по принципам построения на Alto. В 1981 году Xerox выпустила продолжение Alto — Star.

Коммерческое воплощение концепция WIMP получила в 1984 году в продуктах корпорации Apple Computer. Apple критиковали за отказ от командной строки в пользу графического интерфейса^[1]. В 1985 году GUI с многозадачностью был использован в операционной системе AmigaOS.

Позднее GUI стала стандартной составляющей большинства доступных на рынке операционных систем и приложений. Примеры систем, использующих GUI: Mac OS, GEM, Atari TOS, Microsoft Windows, Solaris, GNU/Linux, NeXTSTEP, OS/2, BeOS, Android, iOS, Bada, MeeGo.

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

По назначению виджеты можно разделить на:

• Информационные — выводят какую-либо информацию, которую пользователь может считывать. Примеры — надписи, строки состояния, шкалы, индикаторы;
• Командные — позволяют запустить какой-либо процесс. Примеры — кнопки, меню, гиперссылки;
• Виджеты ввода информации — позволяют внести какую-либо информацию, которая в дальнейшем будет обработана. Примеры — текстовое поле, холст для рисования;
• Виджеты выбора — разновидность виджетов ввода, позволяющая выбрать один из заранее предопределённых вариантов. Примеры — чекбокс, радиокнопка;
• Виджеты управления отображением — позволяют управлять тем, как отображаются другие виджеты. Например — полосы прокрутки, виджеты изменения размеров;
  • Частный случай виджетов управления отображением — виджеты-контейнеры, которые группируют другие виджеты и управляют их поведением. Примеры — окно, панель инструментов;
• Комбинированные виджеты — виджеты, сочетающие в себе несколько функций. Примеры — кнопка с индикатором состояния, иконка в трее.

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

Кроме виджетов, пользователь может производить действия над объектами, являющимися неподсредственным представлением изменяемого объекта: текстом, рисунком, чертежом, картой, трёхмерной моделью. Для взаимодействия с ними могут использоваться специальные виджеты, привязанные к объекту взаимодействия — например, рычаги в векторном графическом редакторе, или текстовое выделение в текстовом процессоре. Однако взаимодействие может происходить и без специальных виджетов — например, путём перетаскивания объекта. Концепция, когда изображённый на экране объект, с которым можно взаимодействовать, является достаточно точным представлением объекта, над которым производится манипуляция называется «What You See Is What You Get», или сокращённо WYSIWYG.

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

Концепция «делай то, что я имею в виду»#edit

Одним из требований к хорошему графическому интерфейсу программной системы является концепция «делай то, что я имею в виду» или DWIM (англ. Do What I Mean). Согласно концепции требуется, чтобы система работала предсказуемо, чтобы пользователь заранее интуитивно понимал, какое действие выполнит программа после получения его команды.

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

Главный недостаток графического интерфейса — значительное влияние называемых визуальных интерфейсных налогов — ситуаций, когда использование графического интерфейса требует от пользователя дополнительных усилий на распознавание элементов, с которыми ему нужно взаимодействовать, из-за чего возникают ненужные затраты времени и растёт вероятность ошибочных действий. К примеру, как физический, так и командный интерфейс пользователя можно освоить до такой степени, что можно использовать практически без обратной связи, полагаясь на привычку и моторную память. В отличие от них, графический интерфейс пользователя требует обязательной визуальной обратной связи, так как элементы управления могут быть не зафиксированы на каком-то определённом месте, а кроме того при опосредованном управлении — например, с помощью мыши, требуется обязательно видеть, в каком месте находится курсор. Наиболее серьёзно визуальные налоги проявляются, когда для доступа к какому-то элементу пользователю нужно пробираться сквозь несколько уровней вложенных меню или открывать несколько разных окон. Разновидностью визуальных налогов также являются труднораспознаваемые или слишком похожие друг на друга элементы интерфейса, а также слишком малый размер этих элементов, требующий «прицеливания» (см. закон Фиттса). Хорошо спроектированный графический интерфейс обязан сводить визуальные налоги к минимуму. Также графический интерфейс принято дополнять другими видами пользовательского интерфейса: в частности, использовать горячие клавиши, дополнять графический интерфейс полем ввода команд, доступным по нажатию определённого сочетания клавиш, а иногда для особо сложных задач могут даже использоваться специализированные физические контроллеры.

1. ^ 33 года назад Apple критиковали за отказ от командной строки в пользу графического интерфейса. www.macdigger.ru. MacDigger. Дата обращения: 31 января 2017. Архивировано 30 января 2017 года.

• Алан Купер. об интерфейсе. Основы проектирования = About Face. The Essentials of Interaction Design. — 3. — СПб.: Символ-Плюс, 2009. — 688 с. — 1500 экз. — ISBN 978 5 93286 132 5.
• The Human–Computer Interaction Handbook / Andrew Sears & Julie A. Jacko. — New York, London: Taylor & Francis Group, 2008. — ISBN 978-0-8058-5870-9.
• Джеф Раскин. Интерфейс: новые направления в проектировании компьютерных систем = The Humane Interface: New Directions for Designing Interactive Systems.
• Aaron Marcus. Graphical User Interfaces // Handbook of Human-Computer Interaction / M.G. Helander, T.K. Landauer, P.V. Prabhu. — Elsevier, 1997. — P. 421—440. — ISBN 0 444 81876 6.

• Guidebook Архивная копия от 23 августа 2006 на Wayback Machine (англ.) — галерея графических интерфейсов
• The Real History of the GUI Архивная копия от 3 января 2022 на Wayback Machine (англ.)
• A History of the GUI Архивная копия от 2 ноября 2016 на Wayback Machine (англ.)