ОБЩИЙ ОБЗОР UX/UI ДИЗАЙНА И ЕГО ПЕРСПЕКТИВЫ В БУДУЩЕМ

GENERAL OVERVIEW OF UX/UI DESIGN AND ITS FUTURE PROSPECTS

Aida Alieva

Master of Arts,  Senior Lecturer Astana International University,

Kazakhstan, Astana

Aselya Orazalieva

4rd year student Astana International University,

 Kazakhstan, Astana

АННОТАЦИЯ

В статье рассматривается практическая значимость UX/UI дизайна. Определены цели и задачи UX-дизайнер. Выявлено поэтапное решение процесса создания проекта.

ABSTRACT

The article discusses the practical significance of UX/UI designer. The goals and objectives of the UX designer are defined. A phased solution to the creative process of the project is considered.

Ключевые слова: дизайнер, проект, UX-дизайн.

Keywords: designer, project, UX design.

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

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

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

Если расшифровать саму аббревиатуру, то у нас получается следующее:

UX-дизайн (User Experience — «пользовательский опыт») отвечает за то, как работает интерфейс.

UI-дизайн (User Interface — «пользовательский интерфейс») отвечает за то, как интерфейс выглядит [1].

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

UX-дизайн

По данным Google* и MTM 74 % удаляют приложение ритейлеров по причине неудовольствия именно интерфейсом. Для компании это убытки и не окупаемость проекта или стартапа, ведь для создания одного приложения или сайта компания вкладывает деньги не только в одного человека, в штате может находиться от 4 специалистов.

Что бы такого не происходило UX-дизайнер исследует целевую аудиторию и создание нужных алгоритмов для желаемого действия, как, например, заказа или покупки [6].

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

Исследование

Любое исследование начинается с анализа целевой аудитории. Кто это? Как вызвать у неё интерес к продукту? Какие инсайты нужны именно этим людям? На данном этапе работа дизайнера – это исследование рынка и анализ конкурентов, в этой части работы мало чего «творческого», дизайнер должен включить все свои аналитические способности, чтобы продукт получился интуитивно понятен любому пользователю ЦА.

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

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

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

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

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

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

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

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

У UX-дизайна есть принципы, которые помогают построить эффективный дизайн интерфейса [3]. Начинающим дизайнерам можно ориентироваться на 10 принципов Якоба Нильсена [5], гуру пользовательского дизайна:

№1 «Видимость состояния системы»;

№2 «Соответствие системы и реального мира»;

№3 «Контроль и свобода пользователей»;

№4 «Последовательность и стандарты»;

№5 «Предотвращение ошибок»;

№6: «Распознавание, вместо необходимости вспоминать»;

№7 «Гибкость и эффективность использования»;

№ 8 «Эстетичный и минималистичный дизайн»;

№9 «Помогите пользователям распознавать, диагностировать и устранять ошибки»;

№10 «Справка и документация» [5].

UI-дизайн

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

59 % пользователей выберут контент с красивым дизайном, а не контент с минимальным оформлением. Таковы результаты исследования компании Adobe.

Настроением продукта, его эстетикой, цветовой палитрой, типографикой –всем этим занимается UI-дизайн [4].

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

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

На самом деле, если интерфейс производит подобное впечатление, значит, над ним хорошо поработали. Вот как это обычно происходит.

Работа над концепцией.

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

Здесь нам пригодятся все исследования – глупо ведь делать продукт для банка с инвестициями ярким и красочным, как и наоборот – делать продукт для детей слишком сдержанным и минималистичным.

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

Затем следует добавление цветов, шрифтов и после добавления графики или иллюстрации наступает время презентации продукта.

Создание мокапа

Английский термин mockup можно перевести как «макет в натуральную величину». Его используют, потому что дизайнер создает мокап не просто на листе в фотошопе, а внутри реального интерфейса телефона или браузера, с учетом пропорций.

Интерактивный прототип

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

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

Перспективы

Важный вопрос для каждого молодого дизайнера, только окончившего ВУЗ, – перспектива его дальнейшего трудоустройства.

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

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

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

UX/UI дизайн не относится только к смартфонам.

UX/UI также является частью бизнеса и помогает предпринимателям и стартаперам оптимизировать процессы в своих проектах.

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

*(По требованию Роскомнадзора информируем, что иностранное лицо, владеющее информационными ресурсами Google является нарушителем законодательства Российской Федерации – прим. ред.)

Список литературы:

1. Что такое UI- и UX-дизайн, чем они отличаются. Принципы и перспективы UI/UX-дизайна [Электронный ресурс]. – Режим доступа: https://practicum.yandex.ru/blog/chto-takoe-ux-ui-dizayn/#chto-takoe-ux-ui-dizayn (дата обращения: 12.09.2023).
2. User interface design [Электронный ресурс]. – Режим доступа: https://en.wikipedia.org/wiki/User_interface_design (дата обращения: 15.09.2023).
3. Что такое дизйн? [Электронный ресурс]. – Режим доступа: https://tilda.education/articles-what-is-ux-design (дата обращения: 20.09.2023).
4. UX-дизайн [Электронный ресурс]. – Режим доступа: https://www.unisender.com/ru/glossary/ux-dizajn/(дата обращения: 22.09.2023).
5. 10 эвристик юзабилити Якоба Нильсена, проиллюстрированных дизайн-решениями Revolut [Электронный ресурс]. – Режим доступа: https://ux.pub/editorial/10-evristik-iuzabiliti-iakoba-nilsiena-proilliustrirovannykh-dizain-rieshieniiami-revolut-662 (дата обращения: 27.09.2023).
6. UX дизайн: Эффект эстетики в юзабилити. Или как UI дизайн интерфейса позволяет прощать ошибки в UX дизайне [Электронный ресурс]. – Режим доступа: https://vc.ru/design/189885-ux-dizayn-effekt-estetiki-v-yuzabiliti-ili-kak-ui-dizayn-interfeysa-pozvolyaet-proshchat-oshibki-v-ux-dizayne (дата обращения: 08.10.2023).