Разница между Ui и Ux дизайном

 

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

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

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

Что такое UX-дизайн

UX (User Experience) часто переводят с английского, как «пользовательский опыт». Это действия, которые клиент будет выполнять с программой, чтобы достичь своих целей. В мобильном магазине — покупка, в переводчике — нужное слово, а картах — POI и маршрут к ней.

 

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

 

Что делать, как помочь клиенту и своему делу? На эти вопросы отвечает UX-дизайнер. Его работа связана с психологией и исследованием поведения клиентов, открытием легких путей и сглаживанием кривой обучения.

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

 

Чтобы достичь такой легкости, нужно проделать огромную работу:

• Анализ продукта, целей и потребностей;
• Разработка и отладка прототипов;
• Надзор за UI-дизайном.

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

Далее разрабатываются карты экранов и каркасные макеты (wireframes). Они отражают действия клиента в программе. С учетом знаний и опыта, UX-дизайнер продумывает переходы, чтобы они были проще. На этом этапе устраняются лишние телодвижения и избыточные подтверждения.

 

В современных интернет-магазинах появилась кнопка «Купить в один клик» — это отражение работы UX-дизайнера. Пять страниц регистрации, выбора адреса и способа оплаты осиливают только упорные клиенты.

 

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

 

Что такое UI-дизайн

UI (User Interface) означает «пользовательский интерфейс». С одной стороны — это цвета, фоны, шрифты и стили. Все, что делает программу привлекательной и уютной.

Гуммозная цветовая гамма и мелкие шрифты, корявые кнопки и крошечные поля ввода — прямой путь в корзину.

Софт для расчета ОСАГО не стоит делать в розовых тонах с цветочками. Однако если UX-анализ показал, что клиентов-женщин у сервиса много (например, такси с водителем-женщиной), то такой подход допустим. Оптимально — дать пользователю возможность сменить тему оформления.

С другой стороны — UI помогает клиенту и вашему бизнесу, делает акценты на действиях, направляющих клиента к цели.

Сделать автопоиск в каталоге товаров по первым символам — задача UX (опыт), поставить форму по центру и увеличить шрифт — ответственность UI (визуализация).

Основные компоненты UI-дизайна:

• Сторителлинг;
• Графика и анимация.
• Отзывчивость.

Сторителлинг — это когда каждый видимый компонент говорит сам за себя. Кнопка просит ее нажать, форма — ткнуть в нее и ввести первый символ;

 

Если пункт «Добавить в корзину» будет сделан гиперссылкой серого цвета, клиент ее вряд ли заметит. Нужна большая и зеленая панель.

 

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

 

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

 

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

 

Если использовать аналогию с дорожной сетью:

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

 

Эти составляющие работают только вместе, поэтому часто говорят о комплексном UX / UI-дизайне. Чтобы ваш продукт стал успешным, в нем должны быть учтены оба аспекта — понятность и красота. Если вы задумываетесь о разработке приложения прочитайте статью, сколько стоит дизайн мобильного приложения.