Что такое графический интерфейс: GUI простыми словами

Графический интерфейс — это всё, что вы видите на экране и на что можно нажать: кнопки, окна, меню, переключатели. Аббревиатура GUI расшифровывается как graphical user interface, то есть графический пользовательский интерфейс.

Он существует ровно для одного: чтобы человеку не нужно было знать, как устроена программа внутри.

Как было до него

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

Графический интерфейс заменил запоминание на узнавание. Вместо того чтобы помнить команду, вы видите папку и перетаскиваете в неё файл.

Это главная идея: узнавать легче, чем вспоминать.

Из чего он состоит

Окна — области, в которых работает программа.

Значки — картинки, обозначающие файл, папку или действие.

Меню — списки доступных команд.

Элементы управления — кнопки, поля ввода, переключатели, ползунки, галочки.

Указатель — то, чем вы выбираете: мышь, палец, стилус.

Что делает интерфейс хорошим

Видно, что можно нажать. Кнопка должна выглядеть как кнопка. Когда всё оформлено одинаково плоско, человек не понимает, где активные элементы.

Понятно, что происходит. Нажал — что-то изменилось: кнопка вдавилась, появился индикатор, выскочило сообщение. Без отклика человек нажимает второй раз, и заказ уходит дважды.

Одинаковые вещи выглядят одинаково. Если на одном экране кнопка сохранения синяя справа, на всех остальных она должна быть такой же.

Ошибку можно отменить. Возможность вернуть назад важнее, чем предупреждения «вы уверены?». Люди всё равно нажимают «да», не читая.

Сообщение об ошибке объясняет, что делать. Не «ошибка 500», а что пошло не так и как это исправить.

Чем отличается от UX

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

Пример: интерфейс оформления заказа может быть безупречным, а опыт — плохим, если товар приедет через три недели. Красивая кнопка не спасёт.

Куда всё движется

Появляются интерфейсы без графики: голос, текстовый диалог с помощником. Но они не заменяют графический, а дополняют его.

Причина простая: голосом удобно задать вопрос, а вот сравнить пять товаров по характеристикам — нет. Для выбора и сравнения глаз работает быстрее, чем ухо. Поэтому кнопки и списки никуда не денутся.

Автор: Рогачев Дмитрий Васильевич, основатель La Chatte. Компания с 2014 года
делает сайты, интеграции и решения на искусственном интеллекте — более 400 проектов.