Что такое пользовательский интерфейс Какие виды пользовательских интерфейсов существуют и как они работают

Взаимодействие между человеком и компьютером (а также программой, на него установленной) всегда требует специальных программных средств. Если ввести в компьютер код на языке программирования, то для его понимания ПК потребуется компилятор. Мы рассказывали об этой программе в одной из предыдущих статей. Сейчас мы поговорим о стороне ПО, которой оснащен любой цифровой продукт - пользовательском интерфейсе.

Что такое пользовательский интерфейс?

Под словосочетанием “Пользовательский интерфейс” или аббревиатурой UI понимают внешнюю оболочку цифрового продукта, через которую происходит взаимодействие между ним и человеком (пользователем, оператором или администратором). Цифровым продуктом, обладающим UI, может быть:

1. Операционная система или платформа ПК.

2. Программа или приложение (для стационарного или мобильного ПК).

3. Веб-продукт (сайт, портал, онлайн-сервис).

4. Аппаратная часть других устройств (модем, банкомат и др.).

Первые пользовательские интерфейсы появились в 1960-е гг. В это время чтение программ с перфокарт было заменено на ввод программного кода с телетайпа. Вскоре после этого компьютеры обзавелись командной строкой. А точкой начала развития графических интерфейсов является 1963 год, когда была создана программа для проектирования Sketchpad.

Задачи пользовательского интерфейса

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

Интуитивность

Значение элементов управления, их расположение должны определяться пользователем “по наитию”, без посторонней помощи. Если пользователю UI непонятно значение элементов, он не сможет быстро им пользоваться.

Отзывчивость

Идеальный UI отвечает на запросы пользователя максимально быстро, без задержек.

Эффективность

Правильно составленный UI позволит пользователю выполнить все запросы максимально просто.

Согласованность

Все элементы UI последовательны друг другу и подобраны в соответствии с принципом единообразия. Ни одна из его частей не выбивается из выбранного стиля и/или шаблона. Этот принцип более характерен для интерфейсов графического типа.

Типы пользовательского интерфейса

Текстовый (командная строка)

Старейший вид внешней оболочки цифрового продукта. Другое название текстового интерфейса - CLI, или Command Line Interface. Этот вид UI представляет собой белый курсор на темном фоне, на месте которого оператор вводит команды к выполнению.

Текстовый UI отличает операционную систему DOS, а также низкоуровневые разновидности Linux. Также через командную строку вводят программные коды на различных языках программирования.

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

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

Графический

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

Альтернативное название интерфейса графического типа - GUI, или Graphical User Interface. Это окно или экран с элементами управления, списками, кнопками и переключателями. Пользователь нажимает на них, чтобы получить доступ к определенным разделам сервиса, отдать команду или открыть файл.

Первый GUI, если таковым считать не Sketchpad, а интерфейс, ставший прообразом современных графических интерфейсов, появился в 1973 году. Это была ОС от Xerox для компьютеров в исследовательских институтах. Apple создала свой графический интерфейс в 1983 году в Lisa Office System, а Microsoft - в 1985 в ОС Windows 1.0. В виде, известном большинству пользователей компьютеров, GUI предстал в 1995 году, во время выхода Windows 95.

Сегодня графическим интерфейсом оснащены большинство цифровых продуктов, такие как операционные системы для стационарных и мобильных ПК, онлайн-сервисы и ресурсы, программы и приложения.

Еще одно обозначение GUI - WIMP, отражает его внутреннее содержание. Расшифровка этой аббревиатуры Window, Image, Menu, Pointer - окно, картинка, меню, указатель.

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

Голосовой

Новая форма UI, управляемая произнесением голосовых команд. Альтернативное его название - VUI. Микрофон устройства фиксирует запись с речью и передает ее в систему обработки. В этой части звуковой сигнал очищается от помех, исследуются ее акустические параметры. Нужные участки речи отбираются и анализируются, происходит их синтез и определение смысла. Конечный этап распознавания команды - передача идентифицированной речи декодером программе.

Обработкой и выполнением самих команд занимается нейросеть или платформа с набором сценариев.

VUI получили развитие и распространение в 2010-х гг. Используются они в умных колонках и голосовых помощниках - виртуальных дополнениях поисковых систем и других сервисов.

Примеры голосовых помощников - Siri от Apple, Google Assistance, Alexa от Amazon, Алиса от Яндекса, Маруся от VK. Эти сервисы, как правило, используются в мобильных ПК и умных колонках. В последнее время голосовой способ управления также используется на горячих телефонных линиях. Автоответчик предлагает абоненту произнести одну из фраз, чтобы перейти в нужный пункт меню, получить информацию или связаться с оператором.

Жестовый

Управление интерфейсом этого типа осуществляется путем жестов. Это может быть касание и/или проведение по сенсорному экрану, движение средств ввода. Также управляющими жестами могут быть движения рук и другими частями тела в воздухе, которые считывают датчики устройства.

Жестовый способ взаимодействия используют все традиционные GUI, такие как ОС Windows. Любой, кто имеет с ними дело, регулярно перетаскивает файлы по рабочему столу или внутри папок, выделяет группы файлов и т. д.. Другие примеры жестового UI - мультитач-экраны сенсорных мобильных ПК, джойстик Wii от Nintendo, сенсорные экраны банкоматов и терминалов оплаты.

Сейчас мы поговорим о том, из чего состоит и как формируется внешний вид страниц GUI, или графического интерфейса.

Элементы графического пользовательского интерфейса

Любой GUI складывается из элементов - составных единиц, выполняющих определенную функцию или отдающих конкретную команду. Альтернативные названия элементов - виджеты, контролы, элементы управления.

Элементы в единичном виде называют атомами. Расскажем о некоторых их разновидностях:

1. Кнопка, которую нажимают для отправки команды или другого действия.

2. Ссылка - элемент, содержащий текст и URL/путь к директории сервиса или места на локальном ПК. При нажатии на ссылку происходит переход по адресу или директории.

3. Радиокнопка - переключатель с несколькими опциями для выбора.

4. Поле ввода, в котором можно набрать текст.

5. Выпадающий список. Содержит несколько строк для выбора.

6. Ползунок. Линия с подвижным прямоугольником, квадратом или иной геометрической фигурой. Передвижение второго относительно первого изменяет выбор числового значения.

7. Чекбокс. Прямоугольник с возможностью проставления галочки.

8. Иконка. Картинка, обозначающая файл, пункт меню и т. д.

Чаще всего элементы-атомы соединяются друг с другом, составляя элементы-молекулы. Их примеры - поисковая строка, включающая поле ввода и кнопку; сочетания выпадающего списка, чекбокса и кнопки (например, формы для выбора товара), комбинация иконки и ссылки. Элементы-молекулы чаще обладают конкретной функцией, чем атомы.

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

Совокупность организмов составляют шаблон - целостные макеты UI для типовых задач. Все элементы меньших порядков согласуются в шаблоне с соблюдением определенного контекста. После наполнения контентом шаблоны становятся основой страниц графического интерфейса.

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

Как создают пользовательский интерфейс

Проектированием, созданием и совершенствованием UI занимаются UX/UI-специалисты. Разработка пользовательского интерфейса проходит несколько этапов.

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

2. Разработка стратегии. На основе полученных данных составляется план действий и результат, который должен быть достигнут.

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

4. Проектирование. UX-специалистами разрабатываются сценарии поведения пользователя, создаются прогнозы его действий.

5. Создание прототипа. На основе собранной информации и созданных сценариев создается предварительная версия интерфейса, которая демонстрируется заказчику.

6. Доработка. После замечаний от заказчика вносятся финальные изменения в проект.

Если заказчику или разработчику важна обратная связь от пользователей, создается общедоступная бета-версия. Те, кто ей воспользуется, предоставляют обратную связь. Замечания и предложения пользователей учитываются разработчиками и на их основе интерфейс также дорабатывается.

Популярные вопросы о пользовательском интерфейсе

Каким должен быть современный пользовательский интерфейс?

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

1. Адаптивность. У идеального UI нет проблем с запуском на разных устройствах, будь то компьютер или мобильный ПК. На сайте не должно быть мелких элементов, не видных на экране смартфона.

2. Быстрота. Если сайт не будет загружаться быстрее, чем за 2-3 секунды, посетители его закроют и перейдут на порталы конкурентов. Поэтому для более быстрой загрузки ресурс нужно оптимизировать. Программы для мобильных ПК также должны быть приспособлены к работе с ограниченными ресурсами. Разработчики приложений должны помнить, что не все мобильные устройства обладают большими возможностями.

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

4. Доступность. Важные элементы должны располагаться на самых видных местах и обладать нужным размером. Функция и назначение каждого элемента должны быть понятны целевой аудитории. Под элементом можно разместить объяснение, но на пару-тройку предложений, чтобы юзер не устал читать и не закрыл UI. А подробный гайд о продукте можно разместить в разделе “Справка”, ссылку на который также нужно разместить на видном месте.

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

Почему современные пользовательские интерфейсы являются объектно-ориентированными?

Основная задача, выполняемая современными UI - манипуляции с объектами, будь то файлы, приложения или базы данных. Объекты имеют вид пиктограмм или иконок, контейнеры отображены иконками дисков или папок. Активировать или открыть объекты можно путем нажатия курсора или пальца/стилуса на сенсорный экран. Взаимодействие с объектами осуществляется в заданной рабочей области.

Какие аналогии с повседневной жизнью реализованы в современном пользовательском интерфейсе?

Аналогий с реальной жизнью у UI очень много. Так, рабочий стол в ОС Windows, Mac и других создан по аналогии с реальными офисными столами с папками, бумагами и другими предметами. В директорию “Корзина” (Recycle Bin) помещают удаленные файлы так же, как выбрасывают ненужные документы в реальную корзину для бумаг. Да и файлы бывают не только компьютерные, но и вполне физические - это прозрачные пластиковые конверты, в которых хранят бумаги, чтобы они не помялись и не повредились.

Прототипом меню в UI стал список подаваемых блюд с аналогичным названием в кафе или другом заведении общественного питания. А кнопки и переключатели есть не только в UI, но и у реальных аппаратов и приборов.

Какая разновидность пользовательского интерфейса появилась позже всех?

Самый молодой интерфейс, который активно используется пользователями - голосовой. Хотя сейчас и ведутся разработки по созданию UI, управляемых силой мысли, пока они не используются.

Какой вид пользовательского интерфейса сейчас наиболее распространен?

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

Читайте также, что такое компилятор: