Интерфейс пользователя, виды интерфейсов

Интерфейс - система правил и средств, регламентирующая и обеспечивающая взаимодействие нескольких процессов или объектов.

Формально, интерфейс — это «проводник» между:

- человеком и программой (человек-техника)

- операционной системой (компьютер-программа)

- техническим устройством (компьютер-устройство)

- взаимодействие приложений между собой (программа-программа)

Человек дает команды с помощью интерфейса, устройство их анализирует и отвечает.

Основные задачи, для решения которых он предназначен:

- ввод и отображение информации (звук, изображение);

- управление отдельными приложениями;

- обмен данными с другими устройствами;

- взаимодействие с операционной системой.

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

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

Пользовательский интерфейс реализует работу человека с системой посредством элементов взаимодействия.

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

Различают активные и пассивные элементы взаимодействия.

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

К пассивным элементам взаимодействия относятся информационные сообщения, подсказки и т. д.

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

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

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

Развитие пользовательских интерфейсов происходило по двум направлениям:

1. Развитие концепций логического представления данных.

Различают два основных уровня представления данных в ЭВМ:

Классификация уровней представления данных

Этапы развития уровней логического представления данных:

1-й этап. От битов к байтам.

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

2-й этап. От байтов к блокам (сегментам).

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

3-й этап. От блоков к файлам.

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

4-й этап. От файлов к объектам.

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

2. Развитие средств взаимодействия с пользователем

Развитие средств взаимодействия с пользователем также прошло несколько этапов:

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

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

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

4-й этап. Световое перо позволило создать компьютеры планшетного карманного типа и соответствующие им графические пользовательские интерфейсы, ориентированные на работу с рукописным вводом.

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

Виды пользовательских интерфейсов.

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

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

Часть 2

1. Графические пользовательские интерфейсы (GUI)

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

Применяются в настольных и веб-приложениях.

GUI включает такие элементы:

- окна

- иконки

- кнопки

- меню

- списки

- рисунки и схемы

- другие графические элементы

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

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

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

Типовые объекты управления графического интерфейса

Таблица 1

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

Типы диалога:

Виды диалога

- Меню.

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

Пользователь выбирает на экране монитора нужную ему операцию и передает ее к исполнению.

- Шаблон

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

- Команда

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

- Естественный язык

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

Примеры GUI: операционные системы Windows и MacOS, а также веб-браузеры и офисные программы.

1.1. Мобильные интерфейсы

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

Примеры: интерфейсы приложений для iOS и Android.

1.2. Веб-интерфейсы

Веб-интерфейс позволяет работать через браузер. Это взаимодействие программ в интернете.

Например, можно зайти на сайт магазина и там же оплатить покупки.

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

1. 3. Игровой и материальный, консольные интерфейсы

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

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

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

Примеры: интерфейсы для PlayStation, Xbox и Nintendo Switch.

Часть 3

2. Голосовые интерфейсы (SILK-интерфейс, (VUI))

SILK-интерфейс (Speech, Image, Language, Knowledge - речь, образ, язык, знание).

Пользователь взаимодействует с системой при помощи голосовых команд. Гаджет распознает и выполняет звуковые команды.

Эти интерфейсы используются в голосовых помощниках Siri, Alexa и «Алисе», Google Assistant, смарт-колонки, такие как Amazon Echo и Google Home..

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

3. Текстовые интерфейсы (Командная строка, (CLI, TUI))

Текстовые (командные) интерфейсы используют текстовые команды для взаимодействия с системой.

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

Командный интерфейс характеризуется тем, что пользователь осуществляет взаимодействие с ЭВМ посредством командной строки, в которую вводятся команды определенного формата (текст на языке компьютера), а затем передаются к исполнению, посредством нажатия Enter,

Через командную строку можно выполнить максимальное количество операций — это прямой способ общения с операционной системой.

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

Примеры: командные строки в Windows и терминалы в системах Unix/Linux.

4. Натуральный пользовательский интерфейс (NUI), жестовые интерфейсы, тактильные интерфейсы

NUI — это тип интерфейса, который использует естественные взаимодействия человека, такие как жесты и сенсорные команды, для управления функционалом.

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

Позволяют пользователю взаимодействовать с системой с помощью жестов и движений. Эти интерфейсы применяются в устройствах с сенсорным вводом и технологией распознавания движений.

Примеры: сенсорные экраны смартфонов и планшетов, а также Microsoft Kinect, который распознает движения пользователя.

NUI (жестовые, естественные) применяют в играх для приставок Xbox, Nintendo Wii или PlayStation. Эту же технологию вы найдете в оборудовании «умного дома», например, при включении света или регулировании громкости Яндекс.Станции с помощью изменения положения руки.

Часть 4

5. Интерфейсы виртуальной и дополненной реальности (VR/AR)

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

7. Нейронный

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

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

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

• Кнопки

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

• Меню

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

• Текстовые поля

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

• Иконки

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

• Окна и панели

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

• Формы

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

• Навигационные элементы

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

• Модальные окна

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

• Списки и таблицы

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

• Графики и диаграммы

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

• Анимации и переходы

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

• Сообщения и уведомления

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

Единую концепцию интерфейса следует соблюдать на всех страницах и экранах. Использование шаблонов помогает унифицировать элементы.