Обратный звонок

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

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

Посмотреть акцию

Предоставим в подарок бесплатную настройку контекста или первый месяц продвижения по SEO - бесплатно!

Ольга Вишневская
Автор статьи
Ольга Вишневская
14.01.2017
0 комментариев
просмотр(ов)

ЧТО ПРЕДСТАВЛЯЕТ ИЗ СЕБЯ UI ДИЗАЙН

UI дизайн больше отвечает за стилистику, внешний вид интерфейса. И он отвечает на следующие вопросы:

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

ЧЕМ ЯВЛЯЕТСЯ UX ДИЗАЙН ПО СУТИ?

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

  • Как, каким образом будет взаимодействовать посетитель с элементами сайта?
  • Как ему будет удобно нажать, перейти на следующий раздел сайта?
  • На сколько удобно будет ему пользоваться расположенными обратными звонками на сайте?
  • Стоит ли мини-слайдер сделать при наведении на миниатюры товаров, или лучше реализовать его уже в самой карточке товаров?
  • Какие будут основные и дополнительные сценарии взаимодействия пользователя с главной страницей, с разделами сайта?
  • Какие эмоции, ощущения, положительный опыт должно будет вызывать взаимодействие с интерфейсом?

КАК ОТЛИЧИТЬ ХОРОШИЙ UI UX ДИЗАЙН ОТ ПЛОХОГО?

Плохим считается UI UX дизайн, если:

  • Плохая прорисовка элементов, не рассчитаны gap, расстояния и промежутки между элементами.
  • Нет единой концепции, цвета перебиваются, дизайн рябит и нет комфорта в восприятиии и изучении информации на сайте.
  • У клиента нет понимания, отправилась ли заявка с сайта, нет подтвержедния целевых действий. Например, когда посетитель оставляет заявку на сайте, не всплывает окно подтверждения заказа, либо человека не перенаправляет сайт на страницу благодарности за заказ.
  • Не проработаны пользовательские сценарии на сайте. После входа на сайт, куда и как будет двигаться посетитель.
  • Нет customer map journey, не проработана структуа и меню сайта.

332 способа
продвижения бизнеса в интернете

Хотите получать еще больше полезной информации и лайфхаков
по продвижению вашего сайта? Подписывайтесь на нашу еженедельную рассылку

Какие основные есть этапы в разработке UI UX дизайна?

ui ux design

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

  • Анкетирование, опрос клиента, определение его потребностей и желаний.
  • Изучение ниши деятельности, анализ рынка, анализ конкурентов, изучение топовых игроков рынка.
  • Скетчинг, отрисовка вручную предварительных макетов и функционала будущего сайта, интерфейса. Согласование функционала ,элементов, блоков, формата сайта.
  • Прототипирование, с отрисовкой и компоновкой элементов страниц. Проработка карты сайта, customer map journey, сценариев взаимодействия.
  • Отрисовка дизайна, формирование спецификации и заметок программистам для верстки и программирования сайта.

Компания YIS занимается созданием данных видов дизайнов. Мы разрабатываем интерфейсы интернет-магазинов, торговых платформ, сайтов государственных органов, корпоративных порталов.

Что такое customer map journey (CJM)?

customer map journey

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

  • Определение аватара клиента, обобщение целевых групп, их свойств, потребностей, желаний.
  • Формирование и проработка этапов покупки. Классический вариант этапов - это awareness, consideretion, purchase, retantion, advocacy. Т.е. Первый подэтап - это осознание и идентификация потребности и поиск, второй подэтап - это принятие решений о покупке на том или ином сайте. Третий подэтап - это сама покупка. Четвертый подэтап - принятие решения о возврате и повторных покупках. Пятый подэтап - это выступление защитником бренда, когда клиент его защищает, положительно о нем отзывается, рекомендует.
  • Определение точек касания клиента с брендом (сайт, лендинг, соцсети, интернет-магазин и прямой заход на него и т.д.).
  • Понимание мыслей, желаний клиента.
  • Определение болевых точек клиента. В CJM каждая болевая точка клиента должна быть одной из этапов покупки, должна привязана к точке касания (например, к форме заказа, заявки, оставления запроса на просчет и т.д.).
  • Разработка эмоциональной карты на каждом этапе покупки и раздела сайта также важна. Так как есть категория людей, которая принимает решения эмоциями.
  • Моменты истины - это когда у бренда, у сайта есть возможность повлиять на решения пользователя о покупке, о дозакупке товара, о заказе дополнительных услуг. Либо набора товаров и услуг, bundlle.

Для составления оптимальной CJM рекомендуем привлечь несколько людей из ЦА, пройти Вашу карту путешествия клиента, а также пройти ее самому. Это позволит создать более точный прототип и дизайн сайта.

Что такое сценарии в UI UX дизайне?

сценарии ui ux дизайн

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

  • Ключевые моменты, которые нужно учитывать дизайнерам при разработке сценариев, это определение аватара клиента, а также ответить себе на вопросы - какие цели желает достичь посетитель сайта, какая мотивация у посетителя. Важно учитывать внешние факторы, которые влияют на посетителя нашего сайта. Это можно сделать, ответив на вопросы - клиент, который пользуется нашим сайтом, обычно делает это когда в дороге или дома? В какой среде и атмосфере он делает это - например, находясь на работе, стоя в пробке, засыпая перед сном, когда отдыхает и находится на природе и т.д.
  • На каждом разделе сайта, основных страницах продумываются и прописываются дизайнерами возможные варианты взаимодействия, логики передвижения посетителя по сайту.
  • Особый уклон делается на разработке меню, элементов навигации и передвижения по сайту. Возможностью возврата к важным разделам сайта.
  • При необходимости, внедрить на сайт элементы, которые могут изменить сценарии действий определенных целевых групп на сайте.
  • В процессе дизайна необходимо оптимизировать передвижения пользователя по сайту и обеспечить быстрый и легкий доступ к необходимой информации для принятия решения о заказе. Например, в сфере недвижимости можно сделать сервис сравнения нескольких вариантов недвижимости по 10-20 параметрам. Зная, например, что в среднем, люди смотрят 3-4 основных варианта недвижимости, сделать функционал, который позволит сразу одномоментно, пользователю сравнивать 3-4 варианта максимум недвижимости для покупки или аренды.

Когда и как лучше делать точки захвата?

кнопки обратного звонка
  • Одной из точек захвата является форма обратного звонка в шапке сайта. Под ней можно написать время работы компании. Также можно добавить рядом значки соцсетей.
  • Также в шапке сайта есть смысл разместить кнопки месседжеров. Есть часть целевой аудитории, у которой нет времени искать и долго серфить по интернету и им удобно быстро написать в вотсап, получить информацию и передать цену и условия сотрудничества руководству.
  • Кнопки заказа могут быть на карточках товаров, услуг, в теле сайта, раздел - body.
  • Если у Вас есть боковое меню, ASIDE секция сайта, то внизу, под списком пунктов меню, можно оставить форму захвата.
  • Обязательно форма захвата, в виде кнопки обратного звонка должна располагаться в зоне футера. Небольшой процент посетителей будет доходить до конца страниц сайта и чтоб им не возвращаться на верх для оставления заявки, есть смысл оставить кнопку обратного звонка внизу.

Как оформить триггеры в дизайне?

триггеры на сайте

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

  • Например, триггер авторитетности можно оформить в виде значков и иконок преимущества. Например, выполнили 20000 заказов, продали 30 000 комплектов мебели, 5 заводов, 8 складов. Победители в номинации - Лучший бренд года. И т.д.
  • Триггер дефицита и ограниченности можно оформить в виде интересной и бомбической акции, но дать ограничение по времени и количеству, например, поставив счетчик обратного отсчета на сайте. И сделать так, чтобы реально товар, который стоит 3000 рублей, продавался за 2000-2500 рублей, и его было немного. Таким образом Вы включите у людей триггер дефицита, а также позволите познакомиться аудитории с Вашим товаром, услугой. Обязательно просите оставить отзывы в Интернете, чтобы другие люди видели и формировалось доверие к бренду.
  • Триггер доверия. Как говорят американцы - доверие эквивалентно продаже. Нет доверия - человек не купит у Вас. Создается это доверие через отзывы, через портфолио, через сертификаты и лицензии на сайте.
  • Триггер социального доказательства можно реализовать на сайте, выведя ссылки на группы и аккаунты в соцсетях. Показать, сколько подписчиков и клиентов у Вас в соцсетях. Опубликовать фото части Вашей CRM и показать, как много уже клиентов заказали Ваш продукт, услугу.
  • Триггер взаимного обмена можно реализовать, запустив продажу триппвайера, который в дальнейшем продаст основной продукт. Например, это может быть ходовой товар по акции, за которым придет человек, а будучи уже у Вас в магазине или центре выдачи, он может отблагодарить Вас за хороший товар по низкой цене, купив у Вас еще что-то. Оформите данный триггер в виде акции на сайте.

Как оформить тропинки возврата и OTO (one time offer) на сайте?

тропинки возврата

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

  • Тропинки возврата могут оформляться в формах захвата сверху, с прописанием условий, например, заключите договор на регулярное обслуживание Вашего автотранспорта и получите в подарок мойку салона авто каждый раз при приезде к нам. Также это может быть предложение и акция, красиво оформленные на банере, с предложением заключить годовой договор на поставку расходных материалов в компанию, например, бумаги и ручек. Или воды и напитков.
  • OTO - one time offer - показывается клиенту тогда, когда он ничего не выбрал и не купил на сайте и принимает решение с него уйти. Как только его мышка уходит в зону крестика браузера и закрытия окна, JS скрипт обрабатывает движение мыши и запускает показ OTO, которое может быть оформлено в виде вспылвающего окна с акцией и кнопкой - ЗАКАЗАТЬ. Предложите клиенту условия, от которых сложно отказаться. Пусть Вы при обработке заказа уходящего клиента сработаете в нуль, но если качество товара и услуги будет высоким, такой клиент вернется к Вам вновь и Вы продадите ему товар, услугу уже по полной цене.

ЦЕНЫ НА UI UX ДИЗАЙН ИНТЕРФЕЙСА.

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

UI UX ДИЗАЙН ПРОСТЫХ САЙТОВ
  • Анализ ниши, изучение аналогичных платформ
  • Формирование аватара клиента, изучение ЦА
  • Проработка customer map journey, сценариев взаимодействия
  • Отрисовка прототипа интерфейса
  • Переложение прототипа на дизайн, отрисовка дизайна и передача в продакшен
От 30 000 руб.
UI UX ДИЗАЙН КОРПОРАТИВНЫХ САЙТОВ
  • Анализ ниши, изучение аналогичных платформ
  • Формирование аватара клиента, изучение ЦА
  • Проработка customer map journey, сценариев взаимодействия
  • Разработка скетчей, прототипов
  • Тщательная проработка мобильной, десктопной, планшетной версии сайта
  • Дизайн на основе прототипов
  • Формирование спецификаций, указаний программистам, сдача в продакшен
От 50 000 руб.
UI UX ДИЗАЙН ИНТЕРНЕТ-МАГАЗИНОВ
  • Анализ ниши, изучение конкурентных интерфейсов
  • Формирование аватара клиента, изучение ЦА
  • Разработка скетчей, прототипов основной страницы
  • Разработка скетчей и прототипов разделов, каталога, карточек товаров
  • Разработка прототипа корзины, страницы оформления заказов
  • При необходимости, разработаем страницы личного кабинета пользователя
  • Отрисовка дизайна
  • Внесение правок
  • Сдача в продакшен, программистам.
От 75 000 руб.
Заказать индивидуальный просчет

ВОПРОСЫ И ОТВЕТЫ

UI ДИЗАЙН (USER INTERFACE) ПРЕДСТАВЛЯЕТ СОБОЙ СИСТЕМУ, ПОЗВОЛЯЮЩЕМУ ВЗАИМОДЕЙСТВОВАТЬ ЧЕЛОВЕКУ С МАТЕРИЕЙ.

Будь то материя физическая из реального пространства или из веб пространства (страницы, сайты, приложения и т.д.), имеется определенная система, регулирующая эти взаимодействия. В контексте веб разработок UI дизайн представляет собой систему меню, переходов от одной страницы к другой, формы захвата, кнопки, колеса прокрутки, ползунки для расчета стоимостей, навигация, плавные переходы между блоками сайтов, подсвечивающиеся графические изображения и т.д. На примере продукции APPLE можно привести простой пример. Способ зарядки iPhone 6, способ его включения, вывода меню, нахождения нужных файлов, перехода в различные режимы – за все это отвечает user interface. И дизайн разрабатывается именно как UI. Есть также у людей наработанный опыт пользования предметами, который нарабатывается в течении всей жизни. Именно его учитывают при проектировании user experience design. Попробуйте Вашей бабуле дать в руки iPhone6 и попросите ее опубликовать свое selfi в Instagram. Бабушке будет очень сложно это сделать, так как UX дизайн явно сделан не под нее.

UX ДИЗАЙН ОТВЕЧАЕТ ЗА ОПЫТ ВЗАИМОДЕЙСТВИЯ ПОЛЬЗОВАТЕЛЯ С ИНТЕРФЕЙСОМ, С УСТРОЙСТВОМ.

Получается, что бабушке будет сложно работать с iPhone6, так как UX дизайн разработан не для нее. У нее отсутствует пользовательский опыт использования данной продукции. Но если дать iPhone студенту Университета, то он с легкостью сможет использовать продукцию Apple. И вот почему – user experience данного устройства учитывает опыт взаимодействия своей аудитории с ранними версиями продукции. В исследовательских лабораториях компании знают, как ведут пользователи с ее продукцией, какой опыт и знания о товаре они накопили и что хотели бы улучшить, добавить или убрать. В сайтостроении как раз UX компонент отвечает за аналогичные потребности посетителя. В веб пространстве требуется большое количество аналитики, данных для того, чтобы правильно разработать UX дизайн.

КАКИЕ ВЫГОДЫ ДАЮТ ДАННЫЕ ПЕРЕДОВЫЕ РАЗРАБОТКИ?

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

ПОЛЕЗНО ЗНАТЬ!

Основные разрешения верстки.

Основные разрешения экранов (контрольные точки), для которых мы разрабатываем наш дизайн. Это десктоп - 1920px, 1366px, 768 px, 320px.

Основные этапы веб дизайна.

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

  • Отрисовка скетчей, набросок будущего интерфейса на бумаге, отрисовка функционала.
  • После согласования скетча идет прототипирование интерфейсов, без наложения дизайна.
  • Создание на основе скетча, прототипа веб-дизайна интерфейса.



Была ли полезна Вам статья?

0.00%
Статьи, которые могут заинтересовать
ЗАКАЖИТЕ ДИЗАЙН И РАЗРАБОТКУ САЙТА У НАС!
Предоставим 1 месяц технической поддержки и сопровождения бесплатно!
ОФОРМИТЬ ЗАКАЗ
Наши клиенты
Создали сайт корпусной мебели.
создание сайтов
Кейс по продвижению бутика обуви в Инстаграм
Реклама в Инстаграм от Promote
Провели настройку и оптимизацию контекстной рекламы.
Контекстная реклама
Продвижение в Яндексе и Гугл сайта клининговой компании
СЕО продвижение сайта услуг
Продвижение пиццы через Яндекс Директ, Гугл Адс.
рост конверсии
клиент компании
заказчик компании
услуги для клиентов
Как нас найти
197198, Россия, г. Санкт-Петербург, 197198, ул. Лизы Чайкиной дом 25
Время работы: ПН – СБ с 9 до 21
Эл. почта наша:
hello@site-promote.com