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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Графический интерфейс и пользовательский опыт часто путают, хотя это разные вещи, которые просто работают в связке.

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

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

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

Причина простая. Голосом удобно быстро задать вопрос и получить один ответ. А вот сравнить пять товаров по десятку характеристик голосом неудобно совсем — для выбора и сравнения глаз работает быстрее уха: можно окинуть взглядом сразу всю таблицу, а не слушать её построчно. Поэтому кнопки, карточки и списки никуда не денутся даже там, где рядом появился чат с помощником.

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

Разработка дизайна сайтаСпроектируем интерфейс, который узнаваем с первого взгляда и одинаково понятен на любом экране