Веб-дизайнер и UI/UX-дизайнер - найдите отличия

Волшебный город дизайна

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

Уровни в волшебном городе дизайна

Первый уровень - это удобство и комфорт в проекте. Web-дизайнер занимается созданием функциональных, удобных и привлекательных веб-ресурсов: сайтов, социальных сетей, рекламы в них. Веб-дизайнер - это архитектор, который составляет план волшебного города из элементов, продумывает его архитектуру, пути движения транспорта и пешеходов, удобство расположения магазинов и социальных объектов, парков отдыха и красивых мест. Wев-дизайнер "подает" информацию о бренде так, чтобы пользователи быстро и просто получали желаемое. Хочет человек в волшебном городе найти продуктовый магазин - он видит огромную вывеску, мимо которой пройти никак нельзя. Планирует попасть в парк культуры - на остановке четко нарисован маршрут общественного транспорта, который доставит его в точку назначения в максимально короткое время. Человек устал и хочет приятно провести время - в киоске за углом ему дают газету с интересными новостями. В нашем примере веб-дизайнер на сайте организует якори внимания, навигацию по сайту и новостную ленту.

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

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

Пример качественного UI/UX-дизайна сайта.
Пример качественного UI/UX-дизайна сайта.

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

В 70-е годы прошлого века не было никаких графических интерфейсов. Общаться с компьютером умел только профессиональный программист через командную строку. В 80-е компания Xerox PARC придумала первый графический интерфейс под названием GUI. Так появились первые иконки, кнопки, меню. А позже домашний компьютер Macintosh обрел первую мышку, которая умела дистанционно наводить курсор. Но жизнь не стояла на месте, и возникла необходимость в проектировании очень простых интерфейсов. Теперь недостаточно создать веб-дизайн, преобразовать его в html-страницу и наполнить ее информацией. Дизайнер должен понимать, кто его покупатель, с какими проблемами он сталкивается, как привык их решать различными или типовыми способами. Так появилась необходимость упрощать путешествие пользователя по веб-продукту.

Интерфейс может быть и недружественным.
Интерфейс может быть и недружественным.

Задачи современного веб-дизайнера

Это развитие сайта и каналов привлечения клиентов (соцсетей, рекламы). В небольших компаниях он также занимается разработкой фирменного стиля, промо-материалов вместе маркетологами.

Что умеет веб-дизайнер

Интуитивно понятный интерфейс.
Интуитивно понятный интерфейс.

UX-дизайнер - какова его роль?

Отличие UX-дизайнера в том, что он находит ответы на важные вопросы: сколько шагов человек должен сделать перед достижением цели? Как дизайнер поймет, что достиг успеха?

Что такое модель системы

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

Модель покупки автомобиля в мобильном приложении автосалона может состоять из 5 шагов: положить товар в корзину, внести свои данные, оформить заказ, подтвердить его, оплатить.

Модель всегда тесно связана с самим интерфейсом. Чтобы осознать между ними разницу - ответьте на несколько вопросов. Зачем в нашем примере нужна корзина? Клиенты могут добавлять в нее автомобили по 50 штук, как продукты в продуктовом магазине? Или им понадобится не корзина, а запись на тест-драйв? Значит, в приложении вместо корзины UX-дизайнер может предусмотреть отличие - запись на тест-драйв или сразу предложить оплату покупки (в том числе оформление кредита). Второй вопрос: как часто человек меняет автомобиль и пригодится ли установка данного приложения в их жизненном контексте в принципе?

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

Пример модели кэшбэк-сервиса.
Пример модели кэшбэк-сервиса.

UI-дизайнер интерфейсов - что он умеет

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

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

An error has occurred. This application may no longer respond until reloaded. Reload 🗙