Идентифицировать конверсионную цель визитёров и содействовать ее достижению через интеракцию с web-интерфейсом — не сущность принципиально важно, на независимом лидогенерирующем лендинг пейдж, товарной целевой странице вебмагазина либо полноценном SaaS-ответе — вот главная цель маркетологов и веб-дизайнеров, разрабатывающих и размещающих в Глобальной сети услуги и свои продукты.
Существуют разные элементы информационной архитектуры, каковые воздействуют на удобство применения, т.е. юзабилити (usability), целесообразность (desirability) и надежность (reliability) ресурса. Значительно чаще из аналогичных параметров (понятий) на слуху бывают «интерфейс пользователя» (User interface, UI) и «пользовательский опыт» (User eXperience, UX).
Эти 2 фактора, относящиеся к любому веб-ресурсу, отнюдь не равнозначны. Миф о том, что «UI = UX», вводит в заблуждение обе стороны цифровой интеракции: как визитёров лендингов и сайтов, так и маркетологов и интернет-предпринимателей
В этом посте мы раскроем еще один секрет юзабилити действенного интернет-маркетинга.
Содержание
Дизайнер UI и дизайнер UX — это две различные профессии
Плохой UI и хороший UX
Хороший UI и плохой UX
UI представление и интерфейс информации: краткое руководство по имплементации хорошего UX и UI
Вместо заключения
- 3 принципа научного дизайна: лендинг для красоты либо конверсии?
Дизайнер UI и дизайнер UX — это две различные профессии
действующие профессионалы и Соискатели вакансий в сфере веб-дизайна во всем мире сталкиваются с множеством неприятностей, порожденных широким распространением упомянутого выше мифа.
Дизайнер пользовательских интерфейсов обязан мочь проводить пользовательские изучения (user research) и, само собой очевидно, знать правила проектирования интерфейса пользователя, визуального дизайна и типографики, и баз информационной архитектуры (information architecture).
Похожие требования — дизайн , информационная архитектура — предъявляются к дизайнерам UX. Дизайн интерфейсов, непременно, связан с пользовательским опытом, и существует пересечение опытных навыков, но вот что необходимо четко уяснить и твердо запомнить:
Умение проектировать пользовательские интерфейсы не решает всех неприятностей UX.
Понятие пользовательского опыта куда более широкое и безграничное. Малейшим определением будет такое:
User eXperience — чувство, испытываемое пользователем на протяжении применения цифрового продукта, тогда как User interface — это инструмент, разрешающий осуществлять интеракцию «пользователь — веб-ресурс».
Для простоты усвоения отличия между двумя этими понятиями разглядим наглядный пример: предположим, мы едим сэндвич с сыром. Ощущения, приобретаемые на протяжении поедания сэндвича, это и имеется пользовательский опыт. Ингредиенты, составляющие отечественный мнимый бутерброд (хлеб, майонез, сыр, сливочное масло и т. д.), смогут принимать во внимание частью интерфейса пользователя.
Ощущения, каковые мы испытываем, в то время, когда едим бутерброд, можно считать UX, а ингредиенты сэндвича ассоциируются с UI
Сэндвич, сделанный из сыра и белого хлеба и майонеза с высоким содержанием жиров, на вкус практически кроме этого оптимален, как бутерброд, складывающийся из цельнозернового хлеба, нежирного сыра и низкокалорийного майонеза. Но люди, стремящиеся к здоровому образу судьбы, отвергнут первый сэндвич в пользу второго.
Итак, у нас имеется хороший интерфейс и в том и другом случае, но мы не совершили пользовательское изучение (а это обязательный атрибут UX), мы не знаем соотношения пользователей, каковые будут/не будут применять отечественный продукт, в следствии чего мы теряем весомую часть целевой аудитории.
Этапы проектирования интерфейса пользователя и UX включают в себя изучение поведенческих психологических реакций и паттернов пользователей, разработку информационной архитектуры, дизайн сотрудничества (interaction design), дизайн интерфейса пользователя, интерактивное прототипирование макета (interactive prototyping) и тестирование юзабилити (usability testing).
Дизайнеры интерфейса пользователя должны владеть навыками в области визуального дизайна, иконографики и типографики, но в список их служебных обязанностей не обязательно входит проведение пользовательских изучений либо построение информационной архитектуры веб-ресурса.
А вот дизайнеры пользовательского опыта должны дополнительно еще и разбираться в изучениях целевого рынка, information architecture и дизайне сотрудничеств (что машинально подразумевает базисное знание поведенческой психологии) и т. д.
Сейчас, в то время, когда мы уяснили отличие между UI и UX, можем сделать вывод, что разумнее всего стремиться к созданию полноценного хорошего пользовательского опыта, нежели лишь к разработке прекрасного web-интерфейса. Хорошее внешнее оформление не решает неприятности конверсии (не смотря на то, что и непременно принципиально важно): веб и маркетологи-дизайнеры должны стремиться сделать опыт интеракции с их лендингом/сайтом минимально психологически травмирующим для пользователя.
Как раз таковой подход приближает нас к ответу конверсионной задачи.
UX-дизайнер, прячущийся под псевдонимом Useagility, сравнительно не так давно опубликовал твит, провозглашающий неопровержимую истину:
«Ваш веб-ресурс возможно весьма прекрасным, но визитёры скоро покинут его, если они не в состоянии осознать, какова цель конверсии и как на нем ориентироваться».
Легкая навигация по контенту, ярко выраженные цель конверсии, светло указанная пользовательская сокровище оффера — вот неотъемлемые элементы хорошего UX. Интерфейс сайта необходимо разрабатывать с учетом этого факта.
По всему интернету во множестве разбросаны примеры цифровых веб-продуктов с хорошим UI и нехорошим UX. Самый распространенные из них — долгие лид-формы с множеством полей для заполнения. Да, кое-какие из них выглядят отлично: грамотная компоновка надписей и полей, прекрасное применение пробелов, эстетически идеальные шрифты и т. д. У них лишь один недочёт — они раздражающе долгие.
Правый вариант лид-формы содействует формированию хорошего UX
В то время, когда маркетолог требует пользователя заполнить форму, он в действительности начинает диалог с потенциальным лидом либо кроме того клиентом. Посмотрим жёсткой правде в глаза: в то время, когда в реальности мы начинаем разговор с незнакомым человеком в первоначальный раз, мы не просим его дать нам его персональные эти, как-то: полученное образование, уровень доходов либо домашний адрес. Так просто не бывает.
Так из-за чего мы — веб и маркетологи-дизайнеры, как и все людские существа, способные к эмпатии, — иногда причиняем пользователю психотерапевтический неудобство, который связан с заполнением долгих регистрационных форм?
А ведь легко создать у визитёра хороший UX: оставляем самые нужные поля, собираем их поблизости от заголовка формы, визуально уменьшая ее, и в следствии меняем поведенческую реакцию с «О, боже! Какая огромная форма!» на «Так, сперва мое имя, после этого — email, все легко». Простота — одно из основных правил проектирования интерфейса пользователя.
Как ни необычно, но веб-дизайнерам, кропотливо подбирающим цвета и шрифты для лид-формы, почему-то в голову не приходит максимально упростить жизнь пользователя, кроме того в ущерб красоте UI.
Вот наглядный пример привычного всем устройства, создающего хороший пользовательский опыт при не самом прекрасном UI. Не удивляйтесь, речь заходит о банкоматах.
Сотрудничество пользователей с ними предельно легко и в значительной мере сходно для любого географического пункта земного шара: вы вставляете банковскую карту, вводите пин-код, выбираете задачу (собственного рода цель конверсии), допустим, снятие наличных, делаете задачу (приобретает наличные), извлекаете карту и уходите, довольный: в целом вы взяли хороший UX. Проектирование дизайна и интерфейса банкомата представляется необычной задачей: кто обращал на него внимание? Он функциональный, он разрешает делать желаемые интеракции, и пользователям дела нет до его красоты.
А в то время, когда речь идет о дизайне UI банкомата, кто обращал на него внимание? Он функциональный, он разрешает делать желаемые интеракции, и пользователям дела нет до его красоты.
Сейчас сделаем крайне важное утверждение:
Веб-ресурс, владеющий хорошим UX и нехорошим интерфейсом пользователя, постоянно превосходит с маркетинговой точки зрения цифровой продукт с прекрасным UI, но «награждающий» пользователя отрицательным опытом интеракции.
Разглядим пара примеров, иллюстрирующих тот факт, что нехороший интерфейс пользователя разрешает приобретать хороший опыт сотрудничества с веб-ресурсом, и напротив: шикарный дизайн UI интерфейсов может порождать чувство разочарования при исполнении конверсионной задачи.
- Юзабилити интерфейса пользователя: как сделать невидимое видимым?
Плохой UI и хороший UX
UX Matters: плохой UI и хороший UX
Как ни необычно, кое-какие ресурсы, предоставляющие полезную данные о проектировании интерфейсов UX, UI, владеют чуть ли не нехорошими интерфейсами, что мы когда-либо видели. Эти сайты не следуют актуальным трендам в разработке и создают чувство, что их нисколько не коснулись все новейшие тенденции веб-дизайна. Они не радуют глаз: "Наверное," они прочно застряли в «Средневековье интернета».
Но может ли визитёр легко отыскать то, что он ищет на этом сайте? Понятна ли навигация по веб-ресурсу? Нужен ли он в качестве источника полезного контента?
Ответ на все вопросы: да.
Пример из мобильного мира — интерфейс Emotion UI, оболочка для Android, созданная Huawei. Он минималистичен, и ключевыми принципами, которыми руководствовались его разработчики, были простота и плоскость.
Bank Of India: плохой UI и хороший UX
В случае если любопытствующий любитель (не маркетолог, не дизайнер) желает воочию заметить, что такое «Плохой UI, хороший UX», то ему необходимо посмотрят на сайт банка. Практически любого банка. Веб-дизайнеры и программисты, разрабатывавшие эти веб-интерфейсы, наверное, не знали о существовании каскадных таблиц стилей (CSS, Cascading Style Sheets).
Разглядим UI сайта Bank Of India. Страницы неряшливо сверстаны, кнопки выполнены в виде графических элементов (соответственно, поисковые роботы их не индексируют), попираются все базисные правила типографики (кроме того по окончании того, как Гугл подарил дизайнерам собственные Гугл Fonts!), контент визуально не выровнен по «сетке» (нарушен один из главных подходов к верстке современных лендингов/сайтов), цвета подобраны необычным образом (мы имеем ввиду — вправду необычным) и т. д.
Перечень неточностей индийских веб-дизайнеров возможно продолжать и продолжать, но через данный непривлекательный UI пользователь достаточно легко может осуществлять online транзакции, получая хороший пользовательский опыт. Сайт Банка Индии идеально подходит под формулировку «Нехорошей UI, хороший UX».
- Оптимизируйте пользовательский опыт — не только конверсию
Хороший UI и плохой UX
Glassdoor: хороший UI и плохой UX
Существуют веб-ресурсы, дающие визитёрам некое представление о размещенном на них цифровом контенте (к примеру, eBooks) с последующей просьбой о регистрации для просмотра всего содержимого электронной книги, издания, статьи. Из-за чего? Неужто по прочтении 5-6 строчков из статьи, пользователю делается ясно, что этот контент будет ему нужен?
На некоторых таких целевых страницах вправду наличествует прекрасный визуальный дизайн, следующий новейшим тенденциям разработки UI. Но опыт, что они предоставляют пользователю, в противном случае как негативным, отталкивающим, разочаровывающим не назвать.
Необходимость регистрации для чтения кроме того бесплатных электронных книг/статей выглядит как дерзкое принуждение. Подобный подход, игнорирующий свободную волю визитёра, практикуется, к примеру, на Glassdoor: вы ни при каких обстоятельствах не определите, что находится на второй странице eBook, не заведя аккаунт на этом ресурсе.
American Golf: хороший UI и плохой UX
Еще один хороший пример хорошего UI и ужасного UX: вот вебмагазин с красивым интерфейсом (разумеется, и такими же товарами), но визитёру нужно будет нажимать визуальный блок определенных офферов, дабы перейти на другую страницу и лишь в том месте определить цену заинтересовавшего УТП.
Необходимо перейти на другю страницу, дабы определить цену понравившегося товара
Дополнительная насмешка кроется в том, что переход выполняется через кнопку «Приобрести на данный момент»: выглядит так, словно бы потенциальному клиенту вправду предлагают купить «кота в мешке по малоизвестной цене». Из-за чего бы не разместить цены на эти определенные офферы на странице категории товаров, как это сделано со всеми остальными?
- Первое чувство имеет значение, либо Из-за чего ответствен качественный дизайн
UI представление и интерфейс информации: краткое руководство по имплементации хорошего UX и UI
Ваш лендинг выделится на фоне соперников, отличаясь хорошим интерфейсом и формируя хороший пользовательский опыт. Вот пара советов по имплементации этих двух наиболее значимых элементов в информационную архитектуру вашего веб-ресурса:
- Предоставляйте данные в соответствии с ее важностью, т. е. размещайте контент на целевой странице так, дабы главная и более ответственная информация визуально выделялась. Пример: применяйте всплывающие окна (pop-ups), дабы отобразить сообщение об успешном завершении интерактивного действия («Удалено» либо «Добавлено в корзину») поверх главного массива текста.
- Применяйте визуально привлекательные графические элементы. Попытайтесь применить анимированную графику (данный совет, как и все другие, испытывает недостаток в проверке сплит-тестом). Пример: сделайте выпадающее меню на вашем сайте более привлекательным, придав ему эффекты ослабления/перехода.
- Уменьшите число кликов, требующихся для исполнения цели конверсии, до минимума. Пример: если вы реализовываете SaaS-ответ для облегчения и упрощения какой-либо маркетинговой операции, к примеру, почтовой рассылки, то и ваше предложение должно загружаться легко и скоро: хорошие ассоциации содействуют созданию хорошего UX.
- Воспользуйтесь пробелами как средством ликвидации ненужной информации. Пример: постоянно размещайте на странице лишь критически серьёзный для конверсии контент (пользы, описание, социальные свидетельства и т. д.). Не требуется размещать «портянки» текста, дабы, что вы понимаете большое количество технических терминов и умных слов (не смотря на то, что, само собой разумеется, бывают случаи, что лишь на долгом лендинге при помощи подробных объяснений возможно выразить сущность оффера).
- Уменьшите число кликов, требующихся для исполнения цели конверсии до минимума. Пример: вы реализовываете SaaS-ответ для облегчения и упрощения какой-либо маркетинговой операции, к примеру, почтовой рассылки. Логично будет, что и ваше предложение возможно загрузить легко и скоро — хорошие ассоциации содействуют созданию хорошего UX.
- Упростите навигацию по контенту. Пример: применяйте внутренние ссылки на веб-странице, дабы продемонстрировать больше информации по конкретной теме. Оптимизируйте информационную архитектуру вашего веб-ресурса.
- И постоянно помните умные слова германского писателя Томаса Манна (Thomas Mann): «Человеческое поведение имеет суть, в случае если думать о нем с позиций целей, мотивов и потребностей». Эта фраза относится и к дизайну. Подходите к потребностям потенциальных лидов/клиентов с позиций экономической целесообразности и технической осуществимости дизайнерских ответов. Не забывайте: «дизайн для пользователя, а не пользователь для дизайна».
Совершите юзабилити-тестирование, отследите поведенческие реакции пользователей на любой элемент информационной архитектуры вашего веб-ответа и имплиментируйте в ее окончательный вариант лишь лучшие ответы, содействующие формированию хорошего UX.
- Из-за чего стереотипныe лендинги и сайты конвертируют лучше?
Вместо заключения
Мы сохраняем надежду, что раскрыли настоящую природу таких сложных понятий, как пользовательский опыт и пользовательский интерфейс, и внесли свою лепту в разоблачение вредоносного мифа о том, что «UI = UX».
Неприятность, которую должны решать веб-дизайнеры и маркетологи, — оптимизация UX. Оптимизация интерфейса пользователя — занятие ответственное, но не ведущее напрямую к увеличению коэффициента преобразования. Конечная цель — формирование хорошего пользовательского опыта.
Высоких вам конверсий!
По данным speckyboy.com, image source Sebastian Suk
Случайные статьи:
- Создаем прайс-лист: уроки от 100+ топовых saas-компаний из сферы b2b
- Как интернет-гиганты зарабатывают деньги на бесплатных сервисах и продуктах
Концепт прототипа интерфейса для CRM (UX дизайн пользовательский опыт юзабилити)
Подборка похожих статей:
-
Секреты юзабилити: почему пользователи винят себя в ошибках дизайнеров?
Мы ненавидим неопределенность. В случае если что-то идет не так, мы как возможно скорее желаем разобраться, в чем же обстоятельство. Но в то время, когда…
-
Секреты юзабилити: анимация для внимания и понимания
Резюме: анимация есть замечательным инструментом для привлечения внимания визитёра посадочной страницы либо сайта. Перед тем как применить подобную…
-
Почему простой интерфейс ведет к плохому юзабилити?
С позиций юзабилити, эргономичный ресурс не требует от пользователей громадных либо значимых когнитивных упрочнений, т.е. его «цена интеракции»…
-
Почему оптимизация конверсии и пользовательский опыт должны дополнять друг друга?
Как показывает опыт, оптимизация коэффициента конверсии (Conversion Rate Optimization, CRO) и пользовательский опыт (User Experience, UX) очень схожи….