Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

Пользовательский интерфейс | Новичку

Интерфейс пользователя (user interface или сокращенно UI) – это интерфейс, с помощью которого человек может управлять программным обеспечением или аппаратным оснащением. UI должны быть удобными в использовании, чтобы взаимодействие с ними происходило на максимально интуитивном уровне. Интерфейсы программного обеспечения также называют графическими пользовательскими интерфейсами (graphical user interface или GUI).

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

Графический интерфейс пользователя – тип интерфейсов, который прочно закрепился наряду с постоянно увеличивающейся производительностью ПК. В ближайшем будущем могут появиться пользовательские аудио-интерфейсы (VUI или voice user interface), которые позволят людям взаимодействовать с компьютером с помощью речи.


В различных компьютерных играх применяется натуральный пользовательский интерфейс (NUI или natural user interface). Его система анализирует движения человека, и преобразует их в движения в игре. На данный момент в стадии разработки находится перцептивный пользовательский интерфейс (PUI), а также интерфейс мозг-компьютер (BCI или brain-computer interface). Последняя разработка направлена на то, чтобы обеспечить людям возможность управлять компьютерами силой мысли.

Среди областей применения интерфейса командной строки можно выделить DOS-компьютеры. Взаимодействие происходит с помощью ввода команд. Компьютер обрабатывает эти команды и выводит на экран очередную строку. Данный тип UI давно устарел. Большинство CLI заменены графическими интерфейсами.

Этот тип интерфейса пользователя предназначен для работы с символами. Исполнение происходит в режиме аппаратного текста, однако часто используется и дисплей. В данном случае на каждый источник у программиста имеется 256 символов. Навигация производится клавиатурой, а не мышью. В качестве примера можно привести Norton Commander или Turbo Pascal. Этот интерфейс также используется в загрузчиках ОС и BIOS-программах. Данный тип интерфейса также используется для установки операционных систем.

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

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


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

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

При разработке GUI применяются определенные своды правил, которые помогают сделать программы удобнее в использовании. В качестве примера можно привести 8 золотых правил от Бена Шнайдермана. Ниже приведем несколько сносок из этих правил:

  • Согласованность: взаимодействие должно происходить всегда похожим образом. То есть, следует избегать использования панелей управления с опциями типа “скопировать выделенную область”, “удалить выделенную область”, “добавить выделенную область”. Данный пример показывает отсутствие согласованности в GUI, чего следует избегать;
  • Информативная обратная связь: все действия, производимые пользователем, должны быть подкреплены обратной связью. Например, если двойной клик открывает программу, то человеку приходится подождать пару секунд, прежде чем он сможет пользоваться этой программой. Чтобы пользователь знал, что его действия принесли результат, нужно проинформировать его об этом. Это можно реализовать сменой курсора. Один из старейших и привычных примеров – это курсор с песочными часами в Windows;
  • Не перегружайте память пользователей: пользователи не в силах запомнить все и сразу. В длинных сегментах взаимодействия, где пользователь вынужден переходить по нескольким окнам, информация всегда должна отображаться в одной и той же области. Менее востребованная информация, которая отображалась в самом начале, должна быть скрыта.

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

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

Среди примеров можно отметить голосового помощника Apple, Siri, S-Voice у Samsung или голосовой поиск Google. Одна из главных задач при проектировании этого интерфейса пользователя (аудио-интерфейсов) заключается в том, чтобы предоставить аудитории комфортные условия для взаимодействия. То есть, при использовании голосовых синтезаторов в техподдержке, важно не обременять клиентов длинными сообщениями.

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

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

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



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

К примеру, Nintendo Wii позволяет воспроизводить действия на экране за счет перемещения контроллера рукой. Среди других примеров – дополнение Kinect к Xbox, которое позволяет управлять игровым персонажем на экране движениями собственного тела. Что делает взаимодействие более натуральным.

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

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

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


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

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

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

Данная публикация представляет собой перевод статьи «User Interface» , подготовленной дружной командой проекта Интернет-технологии.ру

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

Например, мы решили использовать вкладки для организации WordPress-темы Divi. В ней все инструменты находятся прямо в конструкторе и разделены по категориям.


Также доступны панели инструментов. В WordPress панель администрирования позволяет быстро перейти к редактору записей, настройщику тем, плагинов и т.д.

Другой пример – разделы Справка / Поддержка / Контакты. Пользователям всегда должна быть доступна кнопка «Справка» или «Обратиться в службу поддержки». Вот почему необходимо располагать кнопки помощи вверху.

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

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

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

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

Также нужно убедиться, что пользовательский интерфейс соответствует основной платформе. Например, приложения для iOS работают не так, как для Android. Десктопные сайты предъявляют требования, отличающиеся от требований мобильных ресурсов.

Пользователи должны ясно понимать, как получить доступ к тому или ному функционалу. Следование этому принципу подразумевает доработку UX. Это увеличивает время просмотра и снижает показатель отказов.

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

Пользователи должны понимать, что происходит. Если они нажимают кнопку, укажите, что кнопка была нажата. Вы можете сделать это несколькими способами. Например, анимировать кнопку. Иконки загрузки (например, MacOS Rainbow Wheel) обеспечивают обратную связь: пользователи понимают, что вы работаете над их запросом.

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

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

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

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

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

В Snapchat выбрали механизм взаимодействия с продуктом, и разработали пользовательский интерфейс на его основе. А не наоборот.

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

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

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

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

Посмотрите на эту контактную форму:

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

А теперь на эту:

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

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

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

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

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

Данная публикация представляет собой перевод статьи «10 Rules of Good UI Design to Follow On Every Web Design Project» , подготовленной дружной командой проекта Интернет-технологии.ру

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

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 22 апреля 2018;
проверки требуют 12 правок.
Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 22 апреля 2018;
проверки требуют 12 правок.

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку Схема графического интерфейса пользователя (GUI).

Графи́ческий интерфе́йс по́льзователя (ГИП), графический пользовательский интерфейс (ГПИ) (англ. graphical user interface, GUI) — разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений. Также называется графической оболочкой управления.

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

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

Благодаря исследованиям, проведённым в 1960-е годы Дагом Энгельбартом в научно-исследовательском институте Стэнфорда, был изобретён графический интерфейс пользователя.

Впоследствии концепция GUI была перенята учёными из исследовательской лаборатории Xerox PARC в 1970-х. В 1973 году в лаборатории Xerox PARC собрали молодых учёных и дали свободу исследований. В результате, кроме всего прочего, на свет появляется концепция графического интерфейса WIMP (Windows, Icons, Menus, Pointers)[1] и в рамках этой концепции создаётся компьютер Alto. Он не был выпущен как коммерческий продукт, но широко использовался на фирме как корпоративный инструмент Xerox.

В 1979 году Three Rivers Computer Corporation выпустила рабочую станцию PERQ, похожую по принципам построения на Alto. В 1981 году Xerox выпустила продолжение Alto — Star[en].

Коммерческое воплощение концепция GUI получила в 1984 году в продуктах корпорации Apple Computer. Apple критиковали за отказ от командной строки в пользу графического интерфейса[2].
В 1985 году операционной GUI с многозадачностью был использован в системе AmigaOS.

Позднее GUI стала стандартной составляющей большинства доступных на рынке операционных систем и приложений. Примеры систем, использующих GUI: Mac OS, GEM, Atari TOS, Microsoft Windows, Solaris, GNU/Linux, NeXTSTEP, OS/2, BeOS, Android, iOS, Bada, MeeGo.

Хотя в подавляющем большинстве систем GUI является надстройкой для операционной системы, существуют и независимые его реализации. Известен вариант графической программы BIOS Setup, когда ещё до загрузки ОС управление настройками IBM PC-совместимой ЭВМ производится мышью, аналогично полноценному GUI. Также имеются GUI для МК, не требующие ОС.

Можно выделить следующие виды графического пользовательского интерфейса:

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

Концепция «делай то, что я имею в виду»[править | править код]

Одним из требований к хорошему графическому интерфейсу программной системы является концепция «делай то, что я имею в виду» или DWIM (англ. Do What I Mean). Согласно концепции требуется, чтобы система работала предсказуемо, чтобы пользователь заранее интуитивно понимал, какое действие выполнит программа после получения его команды.

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

Что такое интерфейс. Графический интерфейс, типы и API

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

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

Примеры употребления:

Многие пользователи хотели бы вернуть старый интерфейс «ВКонтакте», новый им не нравится.

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

Интерфейс Windows очень сложен: неопытные пользователи путаются в куче настроек.

Веб-интерфейс (web-interface) — это страница в интернете, позволяющая пользователю взаимодействовать с каким-то сервисом или устройством прямо через браузер. К примеру, с помощью веб-интерфейса можно воспользоваться онлайн-банком: зайти на страницу банка, ввести логин и пароль, а затем переводить деньги между счетами, оплачивать услуги и т.п.

Аппаратный и программный интерфейс. Что такое интерфейс USB и API

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

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуАппаратный интерфейс — кабель USB

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

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

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

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуТекстовый интерфейс MS-DOS — командная строка

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

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

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуГрафический интерфейс Windows 3.11

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуМатериальный интерфейс — компьютерная мышь. Фото: Depositphotos

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуГолосовой интерфейс — Siri от Apple. Siri — это сокращение от Speech Interpretation and Recognition Interface (интерфейс распознавания и интерпретации речи). Фото: Depositphotos

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуЖестовый интерфейс — игровая приставка Nintendo Wii, контроллеры которой реагируют на движения пользователя.

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуПерчатки виртуальной реальности — пример тактильного интерфейса. Фото: NASA

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

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуКиану Ривз в фильме «Матрица» (1999). Герои пользуются нейроинтерфейсом, чтобы попасть в виртуальную реальность — Матрицу.

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | НовичкуКиберспейс — интерфейс в виде виртуальной реальности. Кадр из фантастического фильма «Джонни Мнемоник» (1995)

8 Характеристик удачного пользовательского интерфейса / Habr

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

  1. Доступность
  2. Минимализм
  3. Уверенность
  4. Отзывчивость
  5. Соответствие контексту
  6. Привлекательность
  7. Эффективность
  8. Снисходительность

Доступность

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

Что делает эта кнопка? Наведем курсор и прочитаем.

Минимализм

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

Панель регулировки уровня звука в OS X. Коротко и доступно, ничего лишнего.

Уверенность

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

Интуитивно понятный интерфейс GoPlan. Надписи на вкладках дают понять пользователю содержимое раздела.

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

Отзывчивость означает несколько вещей. Интерфейс веб-сайта должен работать очень быстро. Длительное ожидание загрузки страницы раздражает. Позаботьтесь о том, чтобы сайт загружался максимально быстро, даже на медленных интернет-каналах.
Так же отзывчивость означает некоторую постоянную форму взаимодействия с пользователем. Интерфейс должен информировать пользователя о происходящем. Например, вы нажимаете кнопку отправки сообщения. Если сообщение отправляется посредством AJAX, было бы разумно выводить состояния отправки, например «Отправка…», «Сообщение отправлено» или «Ошибка отправки сообщения». Когда пользователь видит процесс выполнения, он чувствует себя спокойнее. Особенно это заметно на медленных интернет-каналах.

Во время загрузки Gmail отображается прогресс-бар.

Соответствие контексту

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

Элементы управления MS Office, различные для каждого типа контента.

Привлекательность

Хоть это может быть несколько спорным моментом, но я считаю, что хороший интерфейс должен быть привлекательным. Привлекательный пользователю интерфейс делает работу с ним приятной. Да, вы можете сделать интерфейс простым в использовании, эффективности и оперативности, и он будет отлично справляться со своей задачей, — но если вы дополните этот список достоинств еще и привлекательностью — работа с ним будет чистым удовольствием!
Но сложно сделать интерфейс, который будет нравиться всем. У каждого свои предпочтения, и что покажется одному красивым, у другого будет вызывать отвращение. Тем не менее, пользователей можно разделить на некоторые социальные/демографические группы, среди которых будут и группы вашей целевой аудитории. Например, интерфейс для группы «молодые мамы» будет в корне отличаться от «менеджеров по продаже автозапчастей».

Интерфейс Google Chrome.

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

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

Три самых часто выполняемых действий над фотографиями в Apple Iphone объединены в общий список с моментальным доступом.

Снисходительность

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

Случайно удалено важная информация в Gmail. Не проблема, можем отменить действие!

Заключение

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

Оригинал перевода: 8 Характеристик удачного пользовательского интерфейса.

Назначение и возможности интерфейсов.





⇐ ПредыдущаяСтр 8 из 19Следующая ⇒

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

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

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

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

Параллельные интерфейсы обычно имеют более сложное устройство, чем последовательные, но обеспечивают более высокую производительность. Их применяют там, где важна скорость передачи данных: для подключения печатающих устройств, устройств ввода графической информации, устройств записи данных на внешний носитель и т.п. Производительность параллельных интерфейсов измеряют байтами в секунду (байт/с; Кбайт/с; Мбайт/с).

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



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

 

Основные интерфейсы ЭВМ.

IDE– интерфейс устройств со встроенным контроллером. Используется для подключения внешних накопителей. С внедрением этого интерфейса решается проблема с совместимостью накопителя и ПК. Если раньше приходилось при смене устройства менять контроллер на системной плате, то сейчас достаточно просто подключить устроуство. Скорость интерфейса 1,5-3 Мбайт/с. Наиболее распространен параллельный разъем ATA/IDE, который в последнее время вытесняется параллельным разъемом АТА. IDE-адаптер часто встраивается в системную плату.

 

SCSI(Скази)(интерфейс малых компьютерных систем) – интерфейс системного уровня. Интерфейс позволяет подключать до 7 внешних устройств с контроллерами. Любое устройство может инициировать обмен с другими устройствами. Режим обмена может быть как синхронным, так и асинхронным; данные контролируются по паритету. Данная шина реализуется в виде отдельного шельфа с восмью устройствами, одно из которых отводится для подключения к системной шине.

RS-232— интерфейс передачи информации между двумя устройствами на расстоянии до 30 метров. Информация передается по проводам с уровнями сигналов, отличающимися от стандартных 5 В, для обеспечения большей устойчивости к помехам. Асинхронная передача данных осуществляется с установленной скоростью при синхронизации уровнем сигнала стартового импульса. Интерфейс RS-232-C был разработан для простого применения, однозначно определяемого по его названию: «Интерфейс между терминальным оборудованием и связным оборудованием с обменом по последовательному двоичному коду». Чаще всего используется в промышленном и узкоспециальном оборудовании, встраиваемых устройствах. Иногда присутствует на современных персональных компьютерах.




 

Интерфейс Centronics является однонаправленным параллельным интерфейсом, содержит характерные для такого интерфейса сигнальные линии (8 для передачи данных, строб, линии состояния устройства). Данные передаются в одну сторону: от компьютера к внешнему устройству. Но полностью однонаправленным его назвать нельзя. Так, 4 обратные линии используются для контроля за состоянием устройства. Centronics позволяет подключать одно устройство, поэтому для совместного очерёдного использования нескольких устройств требуется дополнительно применять селектор. Скорость передачи данных может варьироваться и достигать 1,2 Мбит/с.

 

USB ( «универсальная последовательная шина») — последовательный интерфейс передачи данных для среднескоростных и низкоскоростных периферийных устройств в вычислительной технике. Символом USB являются четыре геометрические фигуры: большой круг, малый круг, треугольник, квадрат. Для подключения периферийных устройств к шине USB используется четырёхпроводный кабель, при этом два провода (витая пара) в дифференциальном включении используются для приёма и передачи данных, а два провода — для питания периферийного устройства. Благодаря встроенным линиям питания USB позволяет подключать периферийные устройства без собственного источника питания (максимальная сила тока, потребляемого устройством по линиям питания шины USB, не должна превышать 500 мА). К одному контроллеру шины USB можно подсоединить до 127 устройств по топологии «звезда», в том числе и концентраторы. На одной шине USB может быть до 127 устройств и до 5 уровней каскадирования хабов, не считая корневого. В настоящее время широко используются устройства, выполненные в соответствии со спецификацией USB 2.0. Ведётся внедрение в производство устройств спецификации USB 3.0.

 

ISA(Архитектура промышленного стандарта), другое название AT-Bus. Шина ISA является основной шиной на материнских платах устаревших компьютеров типа PC AT. Максимальная пропускная способность шины ISA не превышает 5,55 Мбайт/с и совершенно недостаточна для современных требований. Через интерфейс ISA раньше подключались практически все компоненты персонального компьютера, такие, как видеокарты, контроллеры ввода-вывода, контроллеры жестких и гибких дисков, модемы, звуковые карты и прочие устройства.




EISA(Расширенная ISA). В разъемы шины EISA можно вставлять как платы для шины ISA, так и для EISA. Платы для шины EISA имеют более высокую ножевую часть разъема с дополнительными рядами контактов, а слот имеет расположенный в глубине такой же ряд дополнительных контактов. Максимальная пропускная способность — 32 Мбайт/с. Поддерживает режим управления шиной со стороны любого из устройств, установленных в разъем (Bus Mastering). На современных материнских платах шина EISA уже не встречается.

PCI(Соединение внешних компонентов). Этот интерфейс не совместим ни с одним из предшествующих. Поддерживает тактовую частоту до 33 МГц (вариант PCI 2.1 — до 66 МГц), имеет максимальную пропускную способность до 132 Мбайт/с на частоте 33 МГц для 32-х разрядной шины (264 Мбайт/с для 32-x разрядных и 528 Мбайт/с для 64-х разрядных данных на частоте 66 МГц). Конструктивно разъем состоит из двух следующих подряд секций по 64 контакта. Внутри второй секции имеется пластмассовая поперечная перегородка (ключ) для предотвращения неправильной установки карт. Разъемы PCI и карты к ним поддерживают уровни сигналов либо 5 В., либо 3,3 В., либо оба уровня (универсальные). В первых двух случаях карты должны соответствовать уровню сигнала разъема, универсальные карты ставятся в любой разъем. Интерфейс PCI обеспечивает поддержку режимов Bus Mastering и автоматической конфигурации компонентов при установке (Plug-and-Play). Все слоты PCI на материнской плате сгруппированы в сегменты, число разъемов в сегменте ограничено четырьмя. Если сегментов несколько, они соединяются посредством так называемых мостов (bridge).

PCMCIA(Стандарт международной ассоциации производителей плат памяти для персональных компьютеров). Интерфейс PCMCIA служит для подключения внешних устройств к мобильным компьютерам класса NoteBook. Поддерживает автоматическую конфигурацию Plug-and-Play, подключение и отключение устройств в процессе работы компьютера («горячее» подключение). Конструктивно представляет собой миниатюрный 68-ми контактный разъем.

AGP (Ускоренный графический порт). Этот интерфейс предназначен исключительно для подключения видеоадаптеров. Шина AGP позволяет видеоадаптеру связываться с оперативной памятью непосредственно, разгружая тем самым системную шину. В оперативной памяти размещаются параметры трехмерных объектов, требующие быстрого доступа как со стороны процессора, так и со стороны видеоадаптера. Максимальная пропускная способность шины AGP в режиме четырёхкратного умножения AGP/x4 — до 1066 Мбайт/с. Конструктивно выглядит как отдельный разъем на материнской плате. Никакие другие компоненты, кроме видеоадаптеров, к AGP подключить нельзя.

SATA — последовательная шина ATA. В версии 2 имеет скорость до 300МБ/с (скорость передачи кодированных данных 3 Гбод)

IEEE 1284 , LPT ( параллельный порт, порт принтера) — международный стандарт параллельного интерфейса для подключения периферийных устройств персонального компьютера. Интерфейс поддерживает одностороннюю (SPP) или двустороннюю (ЕРР, ЕСР) передачу данных при пиковой пропускной способности до 5 Мбайт/с (ЕСР). Интерфейс IEEE1284 обычно используется для подключения принтеров, сканеров, цифровых фотокамер и других внешних запоминающих устройств через параллельные порты компьютера (LPT). Встроенный контроллер параллельного порта имеется на материнской плате. В настоящее время интерфейс IEEE I284 рекомендуется заменять на интерфейсы USB и IEEE 1394.

 

 











Интерфейс (interface) – что это такое

Москва
г. Москва, ул. Нобеля 7, п. 56
+7 (800) 700-59-30

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку

Возможности интерфейса: Интерфейс пользователя — Википедия – Пользовательский интерфейс | Новичку


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


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


Типы интерфейса


Человеко-машинный интерфейс подразделяется на четыре разновидности.


Командная строка


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


interface1.png


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


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


interface2.jpg


Жестовый интерфейс


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


interface3.jpg


Голосовой интерфейс


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


interface4.png

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *