В мире дизайна пользовательского опыта есть некоторые концепции, которые составляют основу всего, что вы узнаете впоследствии. Графический пользовательский интерфейс, или сокращенно GUI, является одним из таких понятий.
Большинство современных устройств и приложений используют графический пользовательский интерфейс в своих сборках — они были основным продуктом на протяжении десятилетий, и это, вероятно, не изменится в ближайшее время. Так что определенно стоит разобраться в графических интерфейсах, прежде чем углубляться в UX.
В этом посте вы узнаете:
- Что такое графический интерфейс
- как графические интерфейсы были введены в вычислительную технику
- Как работают графические интерфейсы
- Что такое абстракция
- где вы можете найти графические интерфейсы
- преимущества и недостатки графических интерфейсов
Что такое графический интерфейс?
Графический пользовательский интерфейс (GUI) — это цифровой интерфейс, в котором пользователь взаимодействует с графическими компонентами, такими как значки, кнопки и меню. В графическом пользовательском интерфейсе визуальные эффекты, отображаемые в пользовательском интерфейсе, передают информацию, относящуюся к пользователю, а также действия, которые он может предпринять.
Сегодня трудно представить компьютеры без графических интерфейсов. Но было время, когда у нас даже не было курсора мыши. Давайте посмотрим, как появились графические интерфейсы.
Краткая история графических интерфейсов
До появления графических пользовательских интерфейсов пользователи взаимодействовали с компьютерами с помощью символьных пользовательских интерфейсов или АПИ. В пользовательском интерфейсе пользователи вводят текстовые команды на клавиатуре для выполнения действий на устройстве.
Несмотря на то, что CUI были полезны для программистов, они были доступны только ИТ-специалистам и опытным пользователям. Интерфейс сбивал с толку новичков, а также был неэффективным, поскольку команды нужно было каждый раз запоминать и набирать правильно — не то, что понравится массовому рынку.
Затем, в 1981 году, Xerox выпустила первый графический интерфейс в потребительском продукте Xerox Star. Это далеко от интерфейсов, используемых сегодня, но ознаменовало отход от предыдущих текстовых интерфейсов. В нем были изображения, кнопки и цвета, которые узнавали пользователи-непрофессионалы.
Несколько лет спустя, в 1984 году, Apple выпустила свою первую операционную систему с графическим интерфейсом Macintosh. Microsoft дебютировала со своим первым графическим интерфейсом в следующем году в Windows 1.0. В этих двух новаторских операционных системах появились значки для представления таких вещей, как файлы, папки, приложения и кнопки. Вот как выглядел графический интерфейс Macintosh при запуске:
Xerox Star, Macintosh и Windows ознаменовали собой одно из самых значительных достижений в области персональных компьютеров: их интерфейсы были доступны для широкой публики. Теперь среднестатистический пользователь может делать такие вещи, как манипулирование файлами и запускать сценарии, не зная никаких команд или специализированных языков программирования.
Излишне говорить, что графические интерфейсы теперь используются по умолчанию почти для каждого коммерческого цифрового продукта, от ПК и мобильных устройств до телевизоров, игровых консолей и холодильников — благодаря графическим интерфейсам вы можете нажимать кнопку «колотый лед» на экране вместо того, чтобы каждый раз вводить свой запрос.
Как работают графические интерфейсы
В графическом пользовательском интерфейсе визуальные элементы представляют действия, которые могут выполнять пользователи, объекты, которыми пользователи могут манипулировать, и другую информацию, относящуюся к пользователю. Вот некоторые общие визуальные элементы:
- курсор мыши, который перемещает и манипулирует другими элементами
- кнопки, которые пользователи могут нажимать или касаться, чтобы инициировать действие
- панель инструментов и ленты, по сути, группы кнопок
- значки, небольшие изображения, представляющие информацию или интерактивные компоненты
- меню, списки кликабельных элементов
- полосы прокрутки для прокрутки страницы вниз
Иногда графика графического интерфейса привязана к объектам реального мира, чтобы представить их назначение и помочь пользователям понять доступные им функции. Например, каталог (т.е. группа файлов и/или каталогов) представлен значком папки, а корзина представлена корзиной.
Пользователи могут взаимодействовать с элементами в графическом интерфейсе несколькими способами. Чаще всего мы щелкаем и прокручиваем с помощью мыши на настольных компьютерах и касаемся сенсорного экрана на мобильных устройствах. Все популярные операционные системы с графическим интерфейсом и многие программные приложения также позволяют взаимодействовать с помощью команд клавиатуры (функция доступности клавиш), а некоторые также принимают голосовые команды.
Когда пользователь инициирует взаимодействие, графический интерфейс обычно отвечает каким-либо сигналом, таким как изменение цвета или размера элемента, на который нажимают, звук или другой эффект, а затем система выполняет запрошенное действие.
Вы, вероятно, используете несколько графических интерфейсов каждый день, до такой степени, что кажется очевидным, как они предназначены для работы. Тем не менее, десятилетия тщательных размышлений и исследований ушли на создание интерфейсов, которые нравятся пользователям, и дизайн продолжает развиваться с каждым годом. Например, когда выпускаются новые версии программного обеспечения, они часто включают обновления интерфейса для лучшего взаимодействия с пользователем. Совсем недавно VR и голосовые команды набрали обороты.
Абстракция в графических интерфейсах
Конечная цель графических интерфейсов состоит в том, чтобы позволить людям взаимодействовать с базовым кодом устройства, отделяя нас от технических деталей и представляя пользователю упрощенный интерфейс. Этот процесс называется абстракцией и является ключевым понятием при проектировании и создании интерфейсов.
Чтобы лучше понять, что такое абстракция, мы можем сравнить ее с вождением автомобиля. Чтобы управлять автомобилем, вам не нужно знать конкретные детали того, как именно работают двигатель и рулевая колонка вашего автомобиля — это будет долгий урок вождения.
Вместо этого эти продвинутые концепции абстрагируются за пользовательским интерфейсом автомобиля: педалями и рулевым колесом. Все, что должен знать водитель, это то, что нажатие на педаль газа заставляет автомобиль двигаться вперед, а поворот рулевого колеса заставляет автомобиль двигаться влево и вправо.
То же самое верно и для графических интерфейсов: значки папок не являются настоящими папками на вашем экране, и когда вы перетаскиваете файл в корзину, вы, очевидно, не кладете что-то в настоящую корзину. Это всего лишь абстракции базового программного кода.
И, по сюжету, абстракция идет еще глубже: программный код — это абстракция языка ассемблера компьютера и машинного кода, который сам по себе является абстракцией аппаратного обеспечения компьютера.
Ключевой вывод здесь заключается в том, что эти уровни абстракции позволяют практически любому использовать компьютеры, которые довольно сложны под капотом, в своей повседневной жизни.
Примеры графического интерфейса
Вам не нужно далеко ходить за примерами графических пользовательских интерфейсов — вы используете их прямо сейчас. Большинство веб-сайтов, веб-приложений, программного обеспечения (например, Microsoft Word и Apple Music), веб-браузеров (например, Chrome и Internet Explorer) и операционных систем (например, Windows, macOS, iOS и Android) имеют графические интерфейсы.
Часто разные графические интерфейсы наслаиваются друг на друга. Например, при потоковой передаче музыки с помощью Spotify в моем веб-браузере я работаю с графическим интерфейсом веб-приложения Spotify (оранжевым цветом внизу), который находится внутри графического интерфейса браузера Google Chrome (зеленым цветом), который находится внутри графического интерфейса операционной системы моего Mac (синий).
Увеличивая интерфейс Spotify, мы видим некоторые экземпляры общих компонентов графического интерфейса, таких как кнопки, меню и ползунки:
Вы, вероятно, также используете смартфон, который имеет свой собственный графический интерфейс для своей операционной системы и различные графические интерфейсы для каждого из своих приложений. Все популярные веб-сайты адаптируют свои графические интерфейсы в соответствии с размером экрана, на котором они находятся. Это называется адаптивным дизайном и сегодня является важным фактором в дизайне графического интерфейса.
Преимущества графического интерфейса
Сегодня каждый продукт с экраном имеет графический интерфейс. И вот почему:
- Удобство для пользователя: графические интерфейсы более интуитивно понятны для большинства из нас, чем текстовые интерфейсы, настолько, что даже те, у кого очень ограниченные знания о компьютерах, могут использовать их, не изучая язык программирования или компьютерные команды.
- Эффективность: графические интерфейсы позволяют пользователям выполнять задачи быстрее и проще. Задача, которая потребует нескольких типизированных команд в АПИ, может быть выполнена всего парой щелчков мыши в графическом интерфейсе.
- Ясность: графические интерфейсы дают понять, что делает каждый визуальный элемент, и предоставляют пользователям визуальную обратную связь, чтобы указать, являются ли их действия успешными или нет.
- Эстетика: графические интерфейсы более визуально привлекательны и привлекательны для нас, чем обычный текст, и разработчики имеют гораздо больший контроль над своей визуальной настройкой, чтобы создать приятный пользовательский интерфейс.
- Доступность: Во многих случаях графические интерфейсы более доступны для пользователей с ограниченными возможностями, нарушениями и ограничениями.
Недостатки графического интерфейса
Графические пользовательские интерфейсы повсеместно распространены в персональных компьютерах, но они не универсальны. Некоторые пользователи предпочитают текстовые интерфейсы, такие как выполнение действий через командную строку. Вот некоторые незначительные недостатки графических интерфейсов по сравнению с другими интерфейсами:
- Скорость: графические интерфейсы медленнее и требуют больше энергии, чем текстовые интерфейсы.
- Использование памяти: Графические интерфейсы требуют больше памяти компьютера, чем текстовые интерфейсы.
- Отсутствие гибкости: Обычно пользователю приходится работать в рамках ограничений графического интерфейса и не может изменить его функциональность. Благодаря текстовым интерфейсам легко устанавливать пакеты с помощью мощных пользовательских команд.
- Неэффективность: Да, эффективность является основным преимуществом графических интерфейсов для большинства. Но многие технически подкованные пользователи считают более эффективным выполнение команд в пользовательском интерфейсе. Кроме того, команды АПИ можно автоматизировать.
- Строить: Графические интерфейсы должны создаваться командой дизайнеров и разработчиков, что требует дополнительного времени и ресурсов.
Графические интерфейсы: как (большая часть) мира использует компьютеры
Графические пользовательские интерфейсы сегодня настолько широко распространены, что мы воспринимаем их как должное. Тем не менее, было время, когда до появления графических интерфейсов гораздо меньше людей использовали компьютеры. Появление графического интерфейса ознаменовало переход от нишевого хобби технических фанатов к новой технологической революции, которую мы наблюдали за последние 30 лет.
Вот почему важно сделать шаг назад и оценить, сколько работы было вложено в то, чтобы сделать компьютеры настолько удобными для использования. Как дизайнер, вы должны узнать, куда мы идем дальше.