🇮🇹 Что такое GUI (графический интерфейс пользователя)?

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

Давние пользователи Windows могли подумать, что переход от текстовых систем к графическому интерфейсу пользователя произошел, когда Windows 95 пришла на смену Windows 3.1. Хотя это было важной вехой в принятии графического интерфейса пользователя, вы должны вернуться в 1963 год, когда была представлена ​​первая программа компьютерного графического дизайна.

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

В 1970-х годах было представлено программирование на языке Smalltalk, которое выполнялось на компьютере Xerox Alto. Большинство современных графических интерфейсов пользователя являются производными от этой системы. Между тем, пользовательский интерфейс Xerox PARC выдвинул на первый план другие уже знакомые графические элементы, включая окна, меню, переключатели и флажки. К концу десятилетия такие компании, как Microsoft, Apple и IBM, начали заниматься графическими интерфейсами.

Позднее усыновление

Системы с графическим интерфейсом пользователя вошли в мейнстрим в стремительно развивающиеся 1980-е. Apple Lisa была выпущена в 1983 году, а годом позже последовал гораздо более успешный первый Apple Macintosh. Windows 95 наконец появилась через десять лет и через несколько месяцев стала самой популярной операционной системой для настольных ПК всех времен.

В начале 21 века появились мобильные операционные системы, включая iOS от Apple, Android от Google и многие другие. Хотя внешне они разные, в каждом из них использовались одни и те же элементы графического интерфейса, впервые реализованные несколько десятилетий назад.

Видео

Этапы разработки пользовательского интерфейса — как проработать UI

В международной практике подход к дизайну интерфейсов уже стал стандартом. Процесс по дизайну интерфейсов включает следующие ключевые этапы. В этом блоке я опираюсь на материалы UX Mastery — партнера Interaction Design Foundation, крупнейшего в мире сообщества обучения UX-дизайну.

  • Стратегия (Бренд-стратегия и UX-стратегия) — определяет полезное действие, ценности бренда и видение будущего. Стратегия естественным образом влияет на цели проекта по дизайну интерфейсов, критерии достижения целей и приоритет проекта в общем ландшафте высот организации.
  • Исследование (UX-исследование) — фаза открытий. Комплексные проекты включают в себя масштабную работу по пользовательским исследованиям (UX-исследованиям) и анализу конкурентов (бенчмаркинг). Небольшие организации или стартапы могут подойти к исследовательской работе в упрощенном формате и обосновать идею, построенную по принципам минимальной жизнеспособности (Minimum Viable) через интервью, опросы и юзабилити тестирования. Именно на фазе исследований, согласно принципам дизайн-мышления, происходит погружение в образ жизни, пристрастия, цели и барьеры пользователей. Понимание контекста пользователей помогает создавать социально значимые продукты, которые с высокой вероятностью приживутся и начнут развитие на рынке: так они будут казаться интуитивными (ментальные модели) и родными (метафоры).
  • Анализ (UX-аналитика) — цель анализа в том, чтобы сделать выводы из данных и дать уверенный старт созданию дизайн-концепций. Выводы призваны помочь понять суть происходящего и приступить к проектированию интерфейса.
  • Проектирование и прототипирование интерфейсов — на этапе проектирования происходит создание прототипов интерфейсов, их тестирование пользователями и корректировка на основе обратной связи. На этой фазе чаще применяются прототипы с низкой детализацией (Low-fi prototyping), так в них пользователи фокусируются только на функциях и не отвлекаются на бренд-дизайн (уникальную графическую идентичность) и другие визуальные детали.
  • Дизайн интерфейсов и Разработка — на этом этапе создается проработанный дизайн, пишется детальный контент, создается вся уникальная графика и начинается совместная работа с программистами.

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

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

Мобильные интерфейсыВыделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer). Подход к дизайну мобильных интерфейсов отличается от подхода к дизайну настольных приложений. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом. Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы.

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

Веб-интерфейсыТехнологии позволяет создавать полноценные веб-приложения, по функциональности не уступающие настольному ПО: Trello, Google Docs, Twitch, Яндекс.Дзен.

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

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

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

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

Текстовый интерфейс MS-DOS - командная строка Текстовый интерфейс MS-DOS — командная строка

Проблема текстового интерфейса в том, что пользователь должен знать необходимые команды и каждый раз вручную набирать их без ошибок. Частично от этой трудности избавили оболочки для MS-DOS — например, Norton Commander.

Norton Commander - файловый менеджер для MS-DOS. В Norton Commander — файловый менеджер для MS-DOS. В нем можно не только набирать команды на клавиатуре, но работать с файлами с помощью сочетаний клавиш.

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

Графический интерфейс Windows 3.11 Графический интерфейс Windows 3.11

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

Материальный интерфейс - компьютерная мышь. Фото: Материальный интерфейс — компьютерная мышь. Фото: Depositphotos

Голосовой интерфейс — это управление с помощью речевых команд. Человеческий голос сегодня умеют понимать даже мобильные телефоны. Например, Siri от Apple, голосовой помощник Google, «Алиса» от «Яндекса»

Голосовой интерфейс - Siri от Apple. Siri - это со Голосовой интерфейс — Siri от Apple. Siri — это сокращение от Speech Interpretation and Recognition Interface (интерфейс распознавания и интерпретации речи). Фото: Depositphotos

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

Жестовый интерфейс - игровая приставка Nintendo Wi Жестовый интерфейс — игровая приставка Nintendo Wii, контроллеры которой реагируют на движения пользователя.

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

Перчатки виртуальной реальности - пример тактильно Перчатки виртуальной реальности — пример тактильного интерфейса. Фото: NASA

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

Йенс Науманн - слепой, способный «видеть» с помощь Йенс Науманн — слепой, способный «видеть» с помощью нейронного зрительного протеза. Камера улавливает изображение и направляет обработанную версию в зрительную кору головного мозга через электроды.

Киану Ривз в фильме «Матрица» (1999). Герои пользу Киану Ривз в фильме «Матрица» (1999). Герои пользуются нейроинтерфейсом, чтобы попасть в виртуальную реальность — Матрицу.

Киберспейс - интерфейс в виде виртуальной реальнос Киберспейс — интерфейс в виде виртуальной реальности. Кадр из фантастического фильма «Джонни Мнемоник» (1995)

Теги