Интерфейсы, UI, UI/UX — обычно под этими терминами понимают кнопочки и менюшки в программе или на странице сайта. На интуитивном уровне всем понятно, что, если нажать в меню пункт «Открыть файл», появляется «диалог» выбора файла, или если нажать «Войти» на сайте, тебя перекидывает на страницу ввода логина.

В этом параграфе разберёмся, что там происходит на самом деле и как это всё работает.

Что такое интерфейс

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

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

Какие интерфейсы бывают

Основная концепция организации интерфейсов на обычных компьютерах — это WIMP, акроним, который расшифровывается так: Windows, Icons, Menus, Pointers (окна, иконки, меню, указатели). Эта концепция подразумевает, что в интерфейсе должны быть все перечисленные элементы.

Строится этот интерфейс вокруг управления курсором (при использовании мыши, тачпада или какого-нибудь более экзотического устройства) и кучи интерактивных элементов, которые пользователь может располагать, как ему нравится: таскать иконки по рабочему столу, двигать окна, открывать менюшки или запускать программы по клику или двойному клику.

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

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

Самый новый класс пользовательских интерфейсов — это интерфейсы для носимой электроники, в основном для смартфонов и планшетов. Они адаптированы под взаимодействие касанием, что позволило упразднить окна.

Разве?

Возможность запустить рядом несколько приложений на планшете — это не то же самое, что окна, которые можно расположить как угодно, хотя визуально это во многом похоже.

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

Как работают интерфейсы

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

Так же и в интерфейсах пользователя: каждому интерактивному элементу соответствует какой-то программный код, который выполняется при нажатии на этот элемент (или при наведении на него курсора). В этом плане меню программы, иконка крестика и кнопка в самой программе одинаковы: при нажатии исполняется какой-то программный код, который до этого написал заботливый программист.

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

Как создаются интерфейсы

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

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

Можно создать интерфейс для приложения почти в любой операционной системе, и даже есть специальные библиотеки интерфейсов (например, Qt или Tk), цель которых — дать возможность программе выглядеть одинаково на разных операционных системах.

В веб-приложениях используется тот же принцип, но всё немного сложнее. Сама веб-страница — это структура-скелет плюс правила её «украшения» и немного JavaScript-кода для оживления и интерактивности. Всё это загружает браузер, когда вы отправляете запрос на веб-сервер.

У каждого браузера есть свои правила, как отображать содержимое страницы. Но веб-разработчики обычно их обнуляют, чтобы интерфейс одинаково хорошо смотрелся во всех браузерах.

Разработка интерфейса происходит так:

• Описывается структура — что должно быть на странице — с помощью языка разметки HTML.
• Описывается, как должны выглядеть элементы структуры, — с помощью языка стилизации CSS.
• Описывается, что должно происходить при взаимодействии пользователя со страницей, — с помощью языка программирования JavaScript.

Затем .html-, .css- и .js-файлы размещаются на веб-сервере, и, когда вы переходите по URL (например: https://education.yandex.ru/handbook), веб-сервер отвечает на ваш запрос и передаёт эти файлы браузеру. А уже браузер читает их и решает, как разместить всю эту красоту на экране.

У веб-разработчиков тоже есть библиотеки интерфейсов — например, MUI, которая имплементирует дизайн-систему Google Material UI. Или библиотека компонентов от Яндекса Gravity UI.

То есть программисты описывают, что именно произойдёт, когда пользователь откроет страницу, нажмёт кнопку, наведёт курсор на элемент.

Например, у нас есть форма отправки файла, она уже загружена, и мы нажимаем кнопку «Прикрепить файл». Или мы листаем каталог магазина, доходим до кнопки «Загрузить ещё», нажимаем её, и нам прилетает с сервера ещё набор товаров на страницу.

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

Эволюция интерфейсов ОС

Неожиданно, но, если мы захотим окунуться в историю пользовательских интерфейсов, мы окажемся не в командной строке без каких-либо окон, а перед машиной с двумя экранами, клавиатурой и сканером, в 1930 году, когда Вэнивар Буш придумал концепцию Memex.

Буш задумывал устройство, которое является «внешней памятью» человека, где он всегда сможет найти нужную информацию. Конечно, это было до появления компьютеров в том виде, в каком мы их знаем. Буш развил свою идею в эссе «Как мы можем мыслить».

Этим эссе очень вдохновился Дуглас Энгельбарт, который в 1968 году представил свой проект The Mother of All Demos, где показал прототип системы, в которой можно было перемещаться по разным частям интерфейса, выделять текст и менять его размер.

Всё это он делал странным устройством с колёсиками, указателем, который он назвал «клоп» (его впоследствии назовут «компьютерная мышь»). А потом он включил вместе с коллегой камеры и, общаясь по видео, они вместе редактировали один документ. Да, это был всё ещё 1968 год, все были в восхищении, но разработчик опередил своё время на десятилетия, и его работа так и осталась прототипом.

Восхитились демонстрацией и в компании Xerox, которая в 1973 году представила свой компьютер с графическим интерфейсом и своим вариантом мышки. Компьютер предполагался для работы с текстом, поэтому у него был вертикальный экран с пропорциями листа А4, чтобы набирать текст и сразу видеть, как он будет выглядеть при печати.
С того момента все поняли, что компьютеры не продать без красивого интерфейса, и стали его разрабатывать. Вот пример интерфейса от Apple Lisa, выпущенного в 1979 году:

Ближе к концу 1980-х годов из-за MS-DOS и необходимости выпускать недорогие компьютеры, у которых не было ресурсов, чтобы рисовать красивые интерфейсы, произошёл откат до текстовых интерфейсов.
Впрочем, далее по мере развития компьютеров становилось всё больше ресурсов. И уже сейчас наши смартфоны способны отрисовывать такой интерфейс, какой и не снился стационарным в восьмидесятых.
Но — меньше слов. Взгляните сами, как развивались интерфейсы ОС:

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

А ещё мы коротко затронули вопрос, как браузер получает документы с веб-сервера. В следующем параграфе углубимся в эту тему: поговорим о том, как работает интернет.