Дизайн интерфейсов управления

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

 

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

 

   История графического интерфейса пользователя охватывает промежуток в пять десятилетий. За это время его основные принципы претерпели большие изменения. Впервые концепт многооконного управления системой был применен для управления системой «SAGE» 1954 г. (Semi - Automatic Ground Environment Computer), предназначенным для обнаружения военных угроз, и электронным блокнотом Ивана Сазерленда 1965 г. (США).

 

Полуавтоматический компьютер «SAGE» и  электронный блокнот Сазерленда

Полуавтоматический компьютер «SAGE» (слева) в музее Computer History Museum (Калифорния, США) и

электронный блокнот Сазерленда (справа).

 

   В 1960 году Дуглас Энгельбарт (Калифорния, США) в своем проекте «Augmentationof Human Intellect» («Прирост человеческого интеллекта») разработал первую онлайн систему (NLS). Этот компьютер уже включал в себя компьютерную мышь с курсором и несколькими «окнами», используемых для работы над гипертекстом (текстом «ветвящимся или выполняющего действия по запросу»).

   Позже, в 1973 году, Энгельбарт, работая уже в компании «Xerox PARC», разработал персональный компьютер (personal computer - PC) «Alto», имеющий свой графический интерфейс, разработанный Аланом Кеем, Ларри Теслером, Дэном Инглассом и рядом других разработчиков. Он имел битовый (растровый) экран и был первым, который использовал метафору рабочего стола и графического интерфейса пользователя (GUI). Он создавался как некоммерческий продукт, однако были выпущены несколько тысяч единиц, которые активно использовались в течение многих лет. В 1975 году инженеры «Xerox PARC» продемонстрировали графический интерфейс пользователя, включающий в себя иконки (графические символы) с использованием всплывающих меню.

 

Компьютер «Alto»

Первый персональный компьютер «Alto» от «Xerox PARC»и его графический интерфейс

 

   А в 1981 году «Xerox PARC» предоставила новаторский продукт «Star», включавший  в себя многие новые разработки, в том числе уникальный интерфейс. Хотя этот продукт не был коммерчески успешным, находки, примененные здесь в пользовательском интерфейсе, оказали большое влияние на будущее таких компьютерных гигантов, как «Apple», «Microsoft» и «Sun Microsystems».

 

Персональный компьютер «Star»

Персональный компьютер «Star» от «Xerox PARC» и его элементы графического дизайна, 1984 г.

 

Интерфейс «Macintosh» 1984 г. от «Apple»

Интерфейс «Macintosh» 1984 г. от «Apple»

 

   С тех пор некоторые производители создали свои собственные интерфейсы управления типа «окон» на основе независимого кода, но несущие в себе все те же основные элементы интерфейса, которые мы используем и сейчас – это WIMP – window, icon, menu, pointing device (окно, иконка, меню и кнопки управления). Широкое внедрение PC, появление многоцветных мониторов и удешевление телекоммуникационных сетей способствовало популяризации и распространению деятельности по разработке пользовательских интерфейсов и их начали рассматривать с точки зрения эстетики.

   В 1995 году компания «Microsoft» под лозунгом «Компьютер в каждый дом» выпустила операционную систему «Windows 95», объединявшую в себе ранее раздельные системы «MS-DOS» и «Windows». Эта операционная система получила значительное изменение дизайна графического интерфейса, получивший название «Cairo». Главным дизайнерским ходом стали объем и тени  - все элементы выглядят более реалистично и осязаемо, чем было прежде. На рынке система «Windows 95» получила безоговорочный успех и стала самой успешной операционной системой, которую когда-либо до этого разрабатывали.

 

Операционная система «Windows 95»

Дизайн интерфейса операционной системы «Windows 95» от «Microsoft», 1995 г.

 

   Параллельно с  «Microsoft» успешно развивали и совершенствовали свою среду графического интерфейса в «объеме» такие крупные компании как «Apple», «Sun Microsystems», «Commodore International» и другие.

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

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

 

Приложение «76 Synthesizer» от Джонаса Эрикссона

Пример достижения визуально реалистичного интерфейса в приложении «76 Synthesizer» для iPad, разработанном шведским дизайнером Джонасом Эрикссоном

 

   Сегодня наиболее распространенными операционными системами для портативных устройств являются «iOS» от «Apple», «Android» от «Google» и «Windows 8» от «Microsoft». Появление стиля интерфейса «Metro», в котором были выполнены операционные системы «Windows Phone 7» и «Windows 8» (2012 г.), произвело настоящий фурор среди графических и «digital» дизайнеров. Здесь утратился  тот объем, те тени, и общая реалистичность к которым столько лет стремились разработчики интерфейсов. Дизайн элементов вернулся к плоской эстетике, применяемой в самом начале истории пользовательского интерфейса - «минимум деталей, максимум информации», простота и чистота (2D элементы). Сегодня применение этого стиля можно встретить практически везде начиная от интерфейсов, заканчивая  визитками и корпоративной айдентикой.

 

Стиль "Metro"

Пример концептуального использования стиля «Metro» для платформы «iOS 7» от «Apple», предложенный разработчиками «Appz Venture» 

 

 II. Эргономика использования и дизайн

 

Эргономика использования

  

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

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

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

   Сегодня для определения качества юзабилити смотрят на его основные составляющие:

 

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

 

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

 

Жесты многозадачности

Примеры международных жестов многозадачности «Multitouch», разработанных для сенсорных экранов

 

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

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

 

Дизайн

 

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

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

 

Пример дизайна кнопок

Пример нашего дизайна элементов кнопок для управления с пульта

 

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

 

lll. Использование интерфейсов управления в аудио-видео системах

 

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

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

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

   Сегодня существует несколько протоколов управления электроникой, среди которых управление по IR, RS-232, Ethernet. Выбор того или иного протокола происходит из наличия поддержки его аппаратурой, задействованной в управлении, и в целях, для которых создается интерфейс. Дистанционное управление электроникой может осуществляться с помощью беспроводных протоколов Zig Bee, Wi-Fi, по RF или по кабелю. 

 

Схема управления домашним кинотеатром

Пример схемы управления домашним кинотеатром

 

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

 

Интерфейсы управления на пультах и панели

Интерфейсы управления кинозалом (слева), домашним кинотеатром (по центру) и аудио-мультирумом, разработанные для некоторых из наших объектов для программируемого пульта RTI T3-V+ и настенной панели RTI KX7

 

   Наиболее распространенными программами для разработок интерфейсов управления аудио-видео являются «Integration Designer» от «RTI corp.»,«Composer» от «Control4» и программы от «Universal Remote Control». Эти среды позволяют внедрить индивидуально разработанные интерфейсы в программируемые пульты, панели управления и даже в iPhone и iPad.

 

Примеры интерфейсов управления Примеры наших индивидуально разработанных интерфейсов управления мультирумом на iPhone (вверху) и кинозалом на iPad (внизу)

 

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

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

 

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

Примеры наших интерфейсов управления для iPad: вертикальный на английском языке для кинотеатра и горизонтальный на русском языке для управления звуком в автосалоне

 

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