UX/UI-дизайн — элемент, который сильнее всего влияет на успех приложения или веб-сайта у пользователей. В статье разберемся, что такое UX и UI, и на примере одного из кейсов Softweather узнаем, какую роль они играют в разработке мобильного приложения.
Взаимодействие пользователя с любыми интерфейсами — механическими и цифровыми панелями управления, веб-сайтами, мобильными приложениями — должно быть удобным, простым и интуитивно понятным.
С развитием интернет-торговли и перехода большинства компаний в онлайн этот пункт стал еще более актуальным.
Согласно данным исследований, из-за неудобного и неинтутивного интерфейса 88% пользователей не возвращаются на веб-сайты повторно, и по той же причине 74% мобильных приложений ритейлеров удаляются сразу после установки.
Сложности, с которыми сталкиваются пользователи при регистрации и первом использовании приложения. Источник: Совместное исследование Google и MTM
Как видно из диаграммы выше, пользователи ожидают от мобильного приложения легкий поиск функций, простую навигацию, своевременные подсказки, автоматическое выполнение операций, а также приятный внешний вид.
Обеспечить все эти характеристики помогает UX/UI-дизайн.
Что такое UX/UI?
Понятия UX и UI тесно связаны между собой, однако обозначают разные аспекты мобильной и веб-разработки.
Аббревиатура UX расшифровывается как «user experience» и относится к пользовательскому опыту использования цифровых продуктов: удобству навигации, поиска, составу функций внутри веб-сайта или приложения.
UI — это «user interface» — аспект, который отвечает за пользовательский интерфейс, визуальную составляющую цифрового продукта: графическое наполнение, расположение элементов, оформление меню и кнопок и цветовое решение.
Часто эти два вида дизайна передаются в руки одного специалиста, UX/UI-дизайнера, который продумывает всю концепцию и структуру продукта, а затем визуализирует ее.
UX/UI-дизайн и веб-разработка
UX/UI-дизайн — это ключевой элемент, от которого зависит успех веб-сайта у пользователей. Как уже говорилось выше, именно из-за неудобства использования веб-сайта большая часть пользователей не возвращаются и уходят к конкурентам.
При разработке веб-сайтов UX/UI-дизайнеры определяют следующее:
- из каких разделов будет состоять веб-сайт;
- какие данные будут размещены на каждой странице;
- как связать страницы друг с другом, чтобы содержимое стало удобным и логически связанным для пользователей.
Часто при создании веб-сайтов UX/UI-дизайнеры создают карту пользовательских путей (CJM, Customer Journey Map). В ней подробно расписывается, какими путями клиент приходит на сайт, с какими трудностями он при этом может столкнуться, чего он боится и из-за чего может отказаться от покупки.
Грамотное размещение элементов, кнопок, меню сайта, а также логичная структура — это главное условие положительного пользовательского опыта.
Опыт Softweather: UX/UI-дизайн и разработка мобильного приложения
В отличие от UX/UI-дизайна веб-сайтов, из-за более сложной архитектуры мобильные приложения требуют более глубокой проработки.
Рассмотрим процесс разработки мобильного UX/UI-дизайна на примере проекта, реализованного Softweather.
В Softweather обратился новосибирский онлайн-ритейлер продукции для сыроделия.
Перед компанией были поставлены следующие задачи:
1. Разработать айдентику компании (фирменный стиль, цветовое решение).
2. Создать приложение для интернет-магазина для платформ Android и iOS.
3. Интегрировать информацию о наличии товаров и заказах, а также данные клиентов и оплаты через API.
Работа над проектом была разделена на несколько этапов:
Этап 1. Изучение бизнес-процессов заказчика и составление ТЗ.
На этом этапе четко определяются потребности заказчика, особенности целевой аудитории — будущих пользователей приложения, обсуждается функционал разрабатываемого продукта.
Этап 2. Создание мокапов (макетов) дизайна и схем UX.
На данном этапе прорабатываются пользовательские пути и взаимодействие всех ролей с интерфейсом будущего приложения.
Заказчику предоставляется прототип разрабатываемого продукта.
Этап 3. Предварительное тестирование UX/UI.
Этот этап выполняется до программной разработки самого приложения и помогает выявить и исправить ошибки. Также выясняется, понятен ли пользователям интерфейс и удается ли им быстро достичь своей цели.
Этап 4. Разработка приложения.
На этом этапе проводится программная разработка приложения, тестирование, доработка и последующий запуск.
Благодаря проработки тщательной проработке каждого этапа приложение было отдано заказчику в кратчайшие срок.
Чтобы посмотреть результат выполненного UX/UI-дизайна, а также узнать другие подробности об этом кейсе, переходите на сайт Softweather.
Так же можете скачать приложение для просмотра в App Store и Google play.