+7 383 380-81-89
3 сентября 2023
Графический интерфейс — это всё, что вы видите на экране и на что можно нажать: кнопки, окна, меню, переключатели. Аббревиатура GUI расшифровывается как graphical user interface, то есть графический пользовательский интерфейс.
Существует он ровно для одного: чтобы человеку не нужно было знать, как программа устроена внутри, для того чтобы ей пользоваться.
Коротко
- GUI заменил запоминание команд на узнавание кнопок и значков — узнавать легче, чем помнить точную формулировку.
- Хороший интерфейс отвечает на нажатие сразу и одинаковые вещи всегда выглядят одинаково — без этого человек начинает нажимать дважды.
- Графический интерфейс — это экран. Пользовательский опыт — весь путь человека целиком, включая то, что происходит за пределами экрана.
- Голосовые и текстовые помощники не заменяют кнопки и списки — для сравнения нескольких вариантов глаз всё ещё быстрее уха.
В этой статье
Как было до него
Раньше с компьютером разговаривали текстом. Чтобы скопировать файл, нужно было помнить название команды и точный порядок, в котором пишутся её части. Ошибся в одном символе — команда не сработала, и объяснения, что именно не так, чаще всего не было.
Графический интерфейс заменил запоминание на узнавание. Вместо того чтобы держать в голове команду, человек видит папку на экране и просто перетаскивает в неё файл мышью.
Это и есть главная идея графического интерфейса: узнавать легче, чем вспоминать. Она объясняет, почему за полвека компьютеры так и не вернулись к текстовым командам как основному способу общения с обычным человеком.
Из чего он состоит
| Элемент | Что это |
|---|---|
| Окна | Области экрана, в которых работает программа |
| Значки | Картинки, которые обозначают файл, папку или действие |
| Меню | Списки доступных команд, собранные по смыслу |
| Элементы управления | Кнопки, поля ввода, переключатели, ползунки, галочки |
| Указатель | То, чем человек выбирает элемент: мышь, палец, стилус |
Эти пять элементов повторяются на каждом экране программы или сайта. Именно повторение делает интерфейс системой, а не случайным набором картинок: если кнопка на одном экране синяя и справа, а на соседнем — зелёная и слева, человеку приходится каждый раз заново искать взглядом нужный элемент вместо того, чтобы узнавать его автоматически.
Что делает интерфейс хорошим
Видно, что можно нажать. Кнопка должна выглядеть как кнопка. Когда всё на экране оформлено одинаково плоско, без объёма и без цвета, человек перестаёт понимать, где активные элементы, а где просто текст.
Понятно, что произошло после нажатия. Нажал — что-то должно измениться: кнопка вдавилась, появился индикатор, выскочило короткое сообщение. Без такого отклика человек нажимает второй раз на всякий случай, и заказ в интернет-магазине уходит дважды.
Частая ошибка. Кнопка «Оформить заказ», которая после нажатия никак не меняется несколько секунд, пока идёт обработка. Человек не видит, что что-то происходит, и жмёт снова — а на другом конце уходит два заказа вместо одного.
Одинаковые вещи выглядят одинаково. Если на одном экране кнопка сохранения синяя и находится справа, на всех остальных экранах она должна быть такой же — и по цвету, и по месту.
Ошибку можно отменить. Возможность вернуть действие назад важнее, чем предупреждение «вы уверены?» перед каждым шагом. Люди почти всегда нажимают «да», не читая, — а вот отмена реально спасает от последствий случайного клика.
Сообщение об ошибке объясняет, что делать. Не «ошибка 500» без единого слова пояснения, а фраза о том, что именно пошло не так и как это можно исправить прямо сейчас.
Чем отличается от UX
Графический интерфейс и пользовательский опыт часто путают, хотя это разные вещи, которые просто работают в связке.
Графический интерфейс (GUI)
- Как выглядит и работает конкретный экран
- Кнопки, окна, меню, отклик на нажатие
- Заканчивается на границе экрана
Пользовательский опыт (UX)
- Весь путь человека целиком, от первого клика до результата
- Включает доставку, поддержку, ожидание ответа
- Продолжается и после того, как экран закрыт
Наглядный пример: интерфейс оформления заказа может быть безупречным — красивые кнопки, понятные подсказки, мгновенный отклик, — а опыт всё равно окажется плохим, если товар приедет только через три недели. Красивая кнопка сама по себе ничего не спасает, если весь остальной путь человека не продуман.
Куда всё движется
Появляются интерфейсы вообще без картинок: голос, обычный текстовый диалог с помощником в чате. Но они не заменяют графический интерфейс, а дополняют его — и разница в задачах, а не в моде на технологии.
Причина простая. Голосом удобно быстро задать вопрос и получить один ответ. А вот сравнить пять товаров по десятку характеристик голосом неудобно совсем — для выбора и сравнения глаз работает быстрее уха: можно окинуть взглядом сразу всю таблицу, а не слушать её построчно. Поэтому кнопки, карточки и списки никуда не денутся даже там, где рядом появился чат с помощником.
Где это уже совмещено. ИИ-продавец на сайте отвечает текстом в чате, но карточки товаров, кнопка «в корзину» и фильтры остаются графическими — потому что для выбора это по-прежнему удобнее любого диалога.
Тёмная и светлая тема, о которых мы разбирали отдельно, — тоже часть графического интерфейса, а не только вопрос вкуса: от выбора фона зависит, насколько глаза устают за долгую работу с экраном. Подробный разбор — в статье про тёмные темы для сайтов. А базовые принципы — где кнопка узнаваема, а где нет — начинаются ещё на этапе первого экрана сайта: разбирали на примерах в статье про одностраничные сайты.
Частые вопросы
Что означает аббревиатура GUI?
Graphical user interface — графический пользовательский интерфейс. Это всё, что человек видит на экране программы или сайта и на что может нажать: окна, кнопки, меню, значки.
Чат-боты с искусственным интеллектом заменят графический интерфейс?
Нет, они его дополняют. Голосом и текстом удобно задать вопрос и получить один ответ, но сравнивать несколько вариантов по характеристикам глазом всё ещё быстрее, чем на слух. Кнопки и списки для этого остаются нужны.
Почему графический интерфейс и UX — это не одно и то же?
Графический интерфейс — это конкретный экран: кнопки, окна, отклик на нажатие. Пользовательский опыт — весь путь человека целиком, включая доставку, поддержку и то, что происходит за пределами экрана. Хороший интерфейс не спасает плохой опыт целиком.
Какая ошибка в интерфейсе встречается чаще всего?
Отсутствие отклика на действие человека. Если после нажатия кнопки ничего видимо не меняется несколько секунд, человек нажимает снова — и действие может выполниться дважды, например заказ уйдёт два раза вместо одного.
Нужно ли программисту разбираться в графическом интерфейсе, если этим занимается дизайнер?
Базовые принципы — узнаваемость кнопок, единообразие элементов, отклик на действие — стоит понимать всей команде, потому что решения на стыке дизайна и кода принимаются постоянно, а не только на этапе макета.
Назад к блогу
