© Маргарита Васильевна Акулич, 2023

ISBN 978-5-0060-3375-7

Создано в интеллектуальной издательской системе Ridero

Предисловие

В данной книге доступным образом объяснено, что собой представляет дизайн пользовательского интерфейса и как он соотносится с дизайном пользовательского опыта. Пересказано о законе Фиттса, о правиле третей и о некоторых важных нюансах дизайна. Обозначены главные тренды UI/UX дизайна мобильных приложений. Указаны ошибки. Приведены рекомендации (включая рекомендации по разработке мобильных приложений). Уделено внимание проблеме эффективного использования UI/UX -дизайнерами для улучшения своей дизайнерской работы искусственного интеллекта.

I Дизайн пользовательского интерфейса: основные понятия

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

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

Дизайн пользовательского интерфейса (UI Design, User Interface Design) – это процесс, используемый дизайнерами для создания интерфейсов компьютеризированных устройств или программного обеспечения с упором на переменные их стиля и внешнего вида. Дизайнеры пользовательского интерфейса (UI-дизайнеры) стремятся создавать интерфейсы, которые приятны и просты в использовании для пользователей.

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

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

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

Весь процесс сбора пользовательских требований, объединения различных программных элементов и создания эффективного пользовательского интерфейса называется дизайном пользовательского интерфейса

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

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

1.2 Что собой представляет пользовательский интерфейс? Исследования дизайнера пользовательского интерфейса

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

Пользовательский интерфейс, точка доступа, в которой пользователь взаимодействует с программным обеспечением (например, Figma, Sketch), веб-сайтом на основе браузера или с аппаратным устройством, называется «интерфейсом» (к примеру, сенсорный экран смартфона).

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

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

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

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

1.3 Графический интерфейс пользователя. Учитываемые при проектировании пользовательских интерфейсов факторы.  В чем разница между UX и UI?

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

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

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

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

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

Когда дело доходит до дизайна, пользователи делают быстрый выбор, базируясь на удобстве использования и предпочтениях. Им важен не ваш дизайн, а быстрое и эффективное выполнение своих активностей. В результате ваш дизайн должен быть «невидимым»: пользователи не должны беспокоиться об этом, а должны выполнять такие действия, как, скажем, заказ пиццы с помощью приложения Domino’s Zero Click.

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

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

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

В чем разница между UX и UI?

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

Что собой представляет дизайн пользовательского опыта? Дизайн пользовательского опыта (UX) – это то, как дизайнеры разрабатывают продукты, которые предоставляют потребителям значимый и полезный опыт. Пользовательский опыт» охватывает все элементы взаимодействия конечного пользователя с фирмой, ее услугами и продуктами.

Объединяя в продукте компоненты брендинга, маркетинга, разработки, дизайна и удобства использования, UX-дизайнеры создают значимый опыт. Чтобы понять образ мыслей, чувства и амбиции своих пользователей и связать эти знания с продуктом, им необходимо провести серьезное исследование пользователей.

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

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

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

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

II Компоненты дизайна пользовательского интерфейса. Формы пользовательских интерфейсов. Как создавать выдающиеся пользовательские интерфейсы?

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

Макет

Макет

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

Цвета

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

Типографика

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

Графика

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

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

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

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

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

Голосовые пользовательские интерфейсы (VUI)

Пользователи общаются через них, используя свой голос.

Виртуальные пользовательские интерфейсы, такие как Alexa на устройствах Amazon и Siri на iPhone

Они составляют большую часть интеллектуальных помощников (VUI).

Интерфейсы на основе жестов

Пользователи взаимодействуют с областями 3D-дизайна, перемещая свое тело, как в играх виртуальной реальности (VR).

2.3 Как создать выдающиеся пользовательские интерфейсы?

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

Следует соблюдать следующие рекомендации.

Сделайте так, чтобы общие элементы и кнопки вели себя последовательно

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

Сохраняйте высокий уровень обнаруживаемости

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

Создайте «невидимое» ощущение, сохранив интерфейсы минимальными

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

Когда дело доходит до макета, уважайте взгляд и внимание пользователя

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

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

Сократите количество действий, необходимых для выполнения задач