Только до 4.12
Вечерний «Путь в ИТ» с Иваном Ургантом
Кнопка закрыть топ-бар
ГлавнаяБлогПользовательский интерфейс: виды и правила создания
Пользовательский интерфейс
29.09.2022
1 527
Время чтения: 17 минут

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

29.09.2022
1 527
Время чтения: 17 минут
Сохранить статью:
Сохранить статью:

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

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

В статье рассказывается:  
  1. Понятие пользовательского интерфейса
  2. Виды пользовательских интерфейсов
  3. Элементы пользовательского интерфейса
  4. Этапы разработки пользовательского интерфейса
  5. 5 ошибок в разработке пользовательского интерфейса
  6. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

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

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

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

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

UI реализуется за счёт применения следующих элементов:

  • клавиатура;
  • компьютерная мышь;
  • джойстик;
  • дисплей;
  • стилус.

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

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

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

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

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

К примеру, для удаления каталога вместе со всеми файлами следует прописать команду rd: диск\_имя каталога, а затем указать (при необходимости) специальные параметры (скажем, /s-удаляет выбранный каталог и все его компоненты). В конечном итоге пользователь находит определенную информацию или получает текстовый результат своих действий.

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

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

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

Аббревиатура WIMP состоит из 4 слов: Window (окно), Image (картинка), Menu (меню) и Pointer (указатель). Графический интерфейс начали использовать в 70-х, после того как фирма Xerox попыталась облегчить работу по подготовке документов с целью дальнейшей их распечатки на принтерах.

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

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

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

Речевой вид — Silk

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

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

На данный момент существует множество организаций, которые применяют голосовые помощники в своём ПО. Такими компаниями являются «Яндекс», Apple, Microsoft, Amazon и др. Пользователь произносит ту или иную фразу, а устройство считывает голосовую информацию и выдает соответствующий результат.

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

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

ТОП-30 IT-профессий
2022 года с доходом
от 200 000 ₽
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Александр Сагун
Александр Сагун
Исполнительный
директор Geekbrains
pdf иконка

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Поможет разобраться в актуальной ситуации на рынке труда

doc иконка

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

pdf иконка

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb
doc 1,7mb
Уже скачали 16141 pdf иконка

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

Наиболее распространённые элементы интерфейса: Кнопка, Ссылка, Иконка, Вкладка, Чекбокс, Радиокнопка, Переключатель, Выпадающий список, Ползунок, Поле ввода, Таблицы, Меню.

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

  • Атомы — самые маленькие компоненты пользовательского интерфейса: кнопки, поля ввода, чекбоксы, радиокнопки, стили для типографики.
  • Молекулы представляют собой комбинацию из нескольких атомов. К примеру, кнопка и поле ввода.
  • Организмы — группы молекул. Например, сквозная навигация в шапке или боковой панели сайта.
  • Шаблоны — комбинация из нескольких организмов. Это интерфейсы, которые позволяют выполнять типовые задачи.

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

Анализ

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

Только до 5.12
Как за 3 часа
разбираться в IT
лучше, чем 90%
новичков и выйти на
доход в 200 000 ₽?
Приглашаем вас на бесплатный онлайн-интенсив «Путь в IT»! За несколько часов эксперты GeekBrains разберутся, как устроена сфера информационных технологий, как в нее попасть и развиваться.
Александр Волчек CEO GeekBrains

Интенсив «Путь в IT» поможет:

  • За 3 часа разбираться в IT лучше, чем 90% новичков.
  • Понять, что действительно ждет IT-индустрию в ближайшие 10 лет.
  • Узнать как по шагам c нуля выйти на доход в 200 000 ₽ в IT.
При регистрации вы получите в подарок:
pdf иконка

«Колесо компетенций»

Тест, в котором вы оцениваете свои качества и узнаете, какая профессия в IT подходит именно вам

doc иконка

«Критические ошибки, которые могут разрушить карьеру»

Собрали 7 типичных ошибок, четвертую должен знать каждый!

pdf иконка

Тест "Есть ли у вас синдром самозванца?"

Мини-тест из 11 вопросов поможет вам увидеть своего внутреннего критика

Хотите сделать первый шаг и погрузиться в мир информационных технологий? Регистрируйтесь и смотрите интенсив:
Только до 5 декабря
Осталось 17 мест

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

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

В конце концов, намечается цель, которую хочет достичь пользователь при взаимодействии с интерфейсом. Формируется Job Story с учетом контекста.

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

Представление интерфейса через призму UX/UI-дизайна

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

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

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

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

Прототипирование

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

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

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

Прототипирование
Прототипирование

Повторный анализ

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

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

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

  • Несовместимая визуальная иерархия

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

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

  • Пренебрежение шаблонами

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

В качестве примера можно рассмотреть два автомобиля: ВАЗ 2109 и Mercedes E 200. Можно сказать, что они оба сделаны по одному шаблону: 4 колеса, 4 двери, 1 лобовое стекло. Но вполне очевидно, что два этих автомобиля по-разному воспринимаются людьми.
  • Излишнее количество сущностей

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

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

Чем меньше вы нагружаете пользователя, тем лучше.

Чтобы создать удобный UI, выполните следующие шаги:

  • При наличии двух модулей, которые выполняют одно и то же действие, уберите один из них.
  • Изучите пользовательский интерфейс на предмет оформления заказа. Чем меньше будет шагов, тем лучше. Если вы сократите процесс до одной кнопки «Отправить», то повысите удобство пользования.
  • Проверьте дубликаты. Если у вас имеется несколько похожих страниц, но разные UX шаблоны для одной функции, то оставьте наиболее простой вариант.
  • Говорите с потребителем на одном языке

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

  • Помните об итерации и аналитике

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

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

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

Оцените статью
Рейтинг: 5
( голосов 1 )
Поделиться статьей
Добавить комментарий

Забрать
гарантированный
подарок

Получите бесплатно подборку файлов от GeekBrains:

Осталось 17 мест

Поздравляем! Вы выиграли 4 курса по ИТ профессиям. Чтобы закрепить подарок и получить к нему доступ, заполните информацию в открывшемся окне

×
Петр Озеров
Петр Озеров печатает ...