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

Введение

Разберем: что такое пользовательский интерфейс, виды и правила проектирования. Как его делать на практике и какими программами пользоваться. И напоследок кратко о трендах и адаптиве. Ещё в абзацах на разные темы дополнительные источники. Хорошего прочтения!

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

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

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

 

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

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

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

2. Ввод данных — формы, поля ввода и переключатели (forms, input fields, tumblers). Они создают диалог человека с программой, чтобы первый получал обратную связь. Их меньше, чем кнопок, но сталкиваемся с ними ежедневно. Без них приходилось бы каждый раз звонить консультанту или заполнять данные офлайн.

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

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

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

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

• Самый популярный и востребованный — графический, GUI. Все, о чем говорили ранее, относится именно к нему.

• Командно-строковой, CLI. Командная строка Windows, например. Она непонятна и некрасива, но отлично выполняет цель человека — ввести команду программе, чтобы получить обратное действие.

• Текстовый, TUI. Тоже невостребованный и состоит практически только из текста (буквы, цифры и специальные символы).

• Голосовой, VUI. Тут нет кнопок и иконок, как в двух прошлых, ведь ввод и вывод данных осуществляется голосом. Всем известные «Окей, Google» и «Привет, Siri».

• Жестовый, Gesture-based UI. Ввод и вывод данных уже осуществляется жестами.

 

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

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

Это придумали очень давно и называют 10 эвристиками (Якоб Нильсен, местная легенда). Рассмотрим несколько из них чуть подробнее.

• Согласованность и предсказуемость. Частая ошибка начинающих дизайнеров. Если «Корзина» один раз называется «Корзина», то должна она называться так везде. Это позволяет заранее иметь представление о том или ином объекте в интерфейсе.

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

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

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

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

Наверно, вы ожидали увидеть здесь фотошоп, но нет. 

1. Figma.Самый востребованный инструмент во всем мире. Графический редактор, в котором: рисуют интерфейсы, брейнштормят командой, создают дизайн-системы, прототипируют, тестируют и даже кодят. Бесплатно.

2. Adobe XD.Здесь все сделано для уже сборки дизайна и последующего прототипирования. Некоторые в нем создают оживленные эскизы от руки, чтобы иметь представление о продукте.

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

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

1. А/B тестирование (количественный метод).Показывает, какой из двух похожих вариантов с одним различием для пользователя наилучший.

2. Юзабилити тестирование (качественный). Наглядно демонстрирует взаимодействие пользователя с продуктом и как его облегчить или ускорить.

 

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

 

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

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

1. адаптивные, 

2. респонсивные (отзывчивые). 

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

Последнее, что затронем — material и flat design. Последний характеризуется плоскостью, простотой и двумерностью, а первый наоборот — объемом, тенями, скруглениями и физикой реальных объектов. Он же к слову и является дизайн-системой Google.Многие напрасно уходят в крайности и забывают о стиле графической составляющей или придают ей первую роль. Этому, как и адаптивному дизайну, просто надо обучиться и уметь.

Заключение

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