UX/UI дизайн пользовательских интерфейсов

UI UX дизайн интерфейсов, проектирование UX дизайна, UI дизайн

4 специалиста типовая команда на UI/UX-проект
UX+DEVинтеграция с командой разработки продукта на этапе UX проектирования
UI и бизнес метрики для измерения эффективности интерфейсов
Подробнее
Награды 6 наград 4 номинации в UI/UX
рейтинги Профиль Evergreen — Clutch Рейтинг Evergreen — CMSMagazine Профиль Evergreen — Behance Все Все

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

UX дизайн (от английского user experience, переводится как опыт пользователя) - это разработка опыта взаимодействия пользователя с интерфейсом. Если коротко, то это определение потребностей пользователей и разработка такого интерфейсного решения, которое позволить эту потребность удовлетворить с наименьшим количеством времени и усилий, с минимальными ошибками и чувством эмоциональной удовлетворенности.

UI дизайн (от английского user interface, переводится как интерфейс пользователя) - это то как интерфейс выглядит внешне - цвета, композиции, типографика - все что делает проект красивым и удобным для пользования.

UX/UI дизайн это комплексная разработка интерфейса продукта. От постановки задачи до передачи материалов разработчикам для превращения прототипа в работающий продукт.

Давайте подробнее остановимся на каждом пунке:

Примеры прототипов
Почему UX/UI дизайн необходим для бизнеса
UI/UX процесс в Evergreen
Комментарии к процессу
Тестирование прототипов
Какие сомнения и возражения мы слышим от клиентов?

Примеры прототипов

Кабинет диллера для оптовых закупок

— Сайт агрохолдинга с системой для дистрибьюторов. В личном кабинете реализовано взаимодействие агрохолдинга с дистрибьюторами: отслеживание плана продаж, оформление заявок, просмотр ассортимента и др.

Кабинет диллера для оптовых закупок

Посмотрите пример прототипа кабинета оптовика

Посмотреть

Интерфейс системы рассылок

— Концепт прототипа системы e-mail рассылки с простым пошаговым мастером создания первой рассылки. Идея блочного редактора делает процесс создания письма наглядным и не требует никакой верстки.

Интерфейс системы рассылок

Посмотрите пример прототипа сервиса рассылок

Посмотреть

Маркетинговый сервис UX дизайн

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

Маркетинговый сервис UX дизайн

Посмотрите пример прототипа маркетингового сервиса

Посмотреть

Государственный портал: редизайн

— Сайт Национального антикорупционного бюро Украины. Спроектирован с учетом потребностей потенциальной целевой аудитории - граждан и журналистов. Ключевые задачи - возможность обратиться в НАБУ и следить за деятельностью.

Государственный портал: редизайн

Посмотрите пример прототипа государственного портала

Посмотреть

Корпоративный сайт: UX прототип

— Сайт компании, которая специализируется на рассылке e-mail и sms сообщений. На прототипе сделали акцент на возможностях для бизнеса - показали шаблоны и решения которые предприниматели могут применить в своем бизнесе.

Корпоративный сайт: UX прототип

Посмотрите пример прототипа корпсайта

Посмотреть

UX и UI админки интернет магазина

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

UX и UI админки интернет магазина

Посмотрите пример прототипа админ-панели (1 страница)

Посмотреть

SaaS сервис для поваров (UX и UI дизайн)

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

SaaS сервис для поваров (UX и UI дизайн)

Посмотрите пример прототипа SaaS сервиса

Посмотреть

Туристический портал (UX прототип)

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

Туристический портал (UX прототип)

Посмотрите пример прототипа портала туроператора

Посмотреть

UX проектирование Интернет магазина

— Прототип крупного интернет магазина компьютерной техники. Целью проекта была возможность сделать «гибкий» магазин, который подстраивается под поиск и предпочтения пользователя и особое внимание уделили подаче контента.

UX проектирование Интернет магазина

Посмотрите пример прототипа интернет магазина

Посмотреть

Мобильное приложение (UX дизайн)

— Мобильное приложение для саморазвития. Разрабатывалось на Ionic Framework, поэтому в дизайне были использованы компоненты фреймворка. Приложение прототипировалось с учетом рекомендаций iOS и Android.

Мобильное приложение (UX дизайн)

Посмотрите пример прототипа мобильного приложения

Посмотреть

Прототип Агропортала

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

Прототип Агропортала

Посмотрите пример прототипа агро портала

Посмотреть

Некоммерческая организация (UX/UI прототип сайта)

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

Некоммерческая организация (UX/UI прототип сайта)

Посмотрите пример прототипа некоммерческой организации

Посмотреть

Почему UX/UI дизайн необходим для бизнеса

slogan-img

Листайте, чтобы увидеть остальные причины

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

75%

– повышение выручки компаний известных как "design unicorns", сделавших ставку на высокий уровень UX

UI/UX процесс в Evergreen

— обязательные этапы разработки

Аналитика

Мокап

Прототип

Тестирование

UI UX дизайн: комментарии к процессу

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

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

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

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

Участие команды дизайн в проекте не заканчивается на отрисовке и передаче дизайна на верстку. Дизайнеры участвуют в тестировании проекта до и после запуски и осуществляют авторский надзор.

Тестирование прототипов

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

Зачем нужно тестирование?

Проверка гипотез. Подтверждение или опровержение того, что пользователь ведет себя именно так как предполагает проектировщик.

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

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

Что мы тестируем?

Навигацию

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

Поведение

Смотрим и анализируем действия пользователя когда он выполняет задание. Обычно проводится сценарное юзабилити-тестирование и тестирование внимания (фокуса) пользователя.

Восприятие

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

Какие сомнения и возражения мы слышим от клиентов?

  • Можно сделать сервис без UX

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

  • В UX не нужно вкладывать, мы и так знаем как наш продукт должен работать.

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

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

  • Можно сделать сервис без разработке UI на готовом шаблоне/теме

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

Вы хотите разработать UI UX дизайн продукта?

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