Представьте ситуацию: пользователь заходит в интернет-магазин одежды в поиске рубашки и теряется в потоке товаров. В каталоге он сразу видит и обувь, и джинсы, и носки, а рубашки найти не получается. Отфильтровать товары тоже не вариант: по всему сайту разбросаны какие-то кнопки, но непонятно, за что они отвечают. Да и текст на них сливается с цветом самих кнопок или фона.
В итоге покупка рубашки превращается в квест. Из-за такой перегруженности страницы покупатель, скорее всего, уйдет с сайта, ничего не купив. Эта история — пример, когда владелец магазина не позаботился о UX.
Что такое UX и как с ним работать на сайте, разобрались в статье. Для этого пообщались с экспертами и упаковали всё важное в 10 идей — делимся с вами.
Почему UX важен для бизнеса и пользователей
UX или пользовательский опыт — это то, что делает использование сайта понятным и удобным. Удобный сайт увеличивает шансы, что пользователь что-то купит и порекомендует магазин друзьям. Например, в 2018 году в компании McKinsey выяснили, что хороший UX помогает компаниям генерировать на 32% больше доходов.
Хороший дизайн влияет не только на доходы, но и на пользовательский опыт. Чем человеку проще и приятнее что-то купить, тем выше вероятность, что он вернётся в магазин снова или расскажет о своем опыте друзьям. Так в 2021 году компания Top Design Firms провела исследование и рассказала, что для 50% пользователей дизайн сайта имеет решающее значение.
Раз UX так важен, разберёмся, как сделать максимально удобный сайт для пользователей.
Екатерина Комарова
UX/UI дизайнер, эксперт Tilda publishing. Разрабатывает сайты на Tilda и ведет авторский Telegram-канал
Перед созданием сайта важно понимать, с каких устройств пользователь будет его изучать. Если у компании уже есть сайт и ему требуется редизайн, я смотрю на статистику по девайсам. Если подавляющее большинство посещает сайт с телефонов — работаем изначально над ней и продумываем удобство. Если десктоп — аналогично. Если сайта не было, изучаем ЦА, на основе собранной информации, комментариев собственника и сотрудников разрабатываем сайт, подключаем метрики. Анализируем посещаемость. После этого улучшаем удобство сайта с учетом тестов (смотрим карту скролла, кликов, Вебвизор).
1. Упрощаем навигацию через меню
Меню — это дорожная карта вашего сайта или приложения. Оно должно быть максимально понятным и интуитивным. Для этого его нужно разбивать на логические группы, а каждому пункту давать короткое и понятное название. Иначе посетители будут теряться, путаться в разделах и в итоге уходить, не найдя нужного.
❌ Так не надо
Представьте, что вы зашли в интернет-магазин электроники. Сразу под шапкой расположено громадное меню из 20 пунктов без группировки. Среди них есть такие странные названия как «Акционерам», «Личный идентификатор», «Подбор параметров». Непонятно, что значит каждый раздел меню и куда ведут ссылки.
✅ Надо так
Меню делится на разделы «Каталог», «О магазине», «Помощь» и т.д. В каждом разделе есть еще по 3–7 пунктов с понятными названиями: «Оплата и доставка», «Гарантия и возврат» и т. д.
Такая структура понятна пользователю: он сразу видит основные блоки и может найти нужный раздел.
Пример понятной навигации по разделам сайта на Ozon
— Старайтесь не делать слишком много пунктов. Нет ничего менее удобного, чем гигантские меню, в которых никто ничего не понимает. Проведите ревизию: может быть пункты «Контакты» и «Помощь» можно объединить?
— Делите на группы с заголовками групп, если пунктов много. 4 ветки в главном меню, в каждой ещё по 4 ветки.
— Не делайте слишком сложную иерархию. Два-три уровня вложенности пользователь может стерпеть — больше уже становится тяжело.
— В идеале пункт меню должен занимать 1-2 слова. Лучше стремиться к одному, но не в ущерб понятности. Пункт «Оплата» в интернет-магазине будет слишком абстрактным, хоть и коротким. Что может там быть? Про то, как платить, или мне туда надо идти, чтобы заплатить? «Способы оплаты» — снимет двусмысленность.
— Пункты должны быть понятными и самодостаточными. Даже если в соседнем пункте уже используется слово, лучше его повторить, ничего страшного. «Мобильный интернет», затем пункт «Домашний» — так не надо. Что за домашний? Представьте, что пользователь не увидит другие пункты (часто так и будет) — сможет он понять, что скрывается за словом «Домашний»?
— Будьте постоянными в используемых терминах и названиях пунктов меню. Если пункт меню зовётся «Статистика» — не надо называть его «Графики» или «Данные» в других частях сайта или приложения.
2. Добавляем визуал: картинки, подсказки, всплывающие элементы
Визуальные элементы играют важную роль в UI/UX дизайне. Они помогают пользователям быстрее ориентироваться и находить нужную информацию. Например, на главной странице интернет-магазина можно разместить блоки с названиями основных категорий товаров: «Одежда», «Обувь», «Аксессуары». И для каждого блока — добавить подкатегории, которые всплывают при наведении на раздел меню: «Женская одежда», «Мужская одежда», «Детская одежда».
Чтобы эффективно использовать визуальные элементы, придерживайтесь основных правил:
1. Используйте иллюстрации и иконки, которые несут смысловую нагрузку и помогают в навигации. Например, показывают, куда ведёт та или иная кнопка.
2. Визуальные элементы должны соответствовать брендбуку и быть в едином стиле. Иначе отдельные кнопки или элементы будут выбиваться из общей картины и перетягивать внимание на себя.
3. Располагайте элементы так, чтобы направлять внимание пользователя на ключевые области интерфейса. Например, в интернет-магазине кнопку «Купить» можно делать больше других, чтобы она выделялась на общем фоне.
Пример работы с визуалом и кнопками от Ozon
Главное — не переборщить с количеством визуала. Иначе он будет давить на пользователя, путать его в разделах сайта.
Богдан Гончаренко
Head of Product Design at Social Links, ex-Mish, EPAM, Sber, автор Telegram-канала @uxuitelno
Визуальная составляющая должна отражать позиционирование бренда, его эмоцию и ценности. Но если говорить вне этого контекста, то есть базовые психологические приемы. Например, взгляд персонажа или человека должен быть направлен на акцентную часть интерфейса вроде кнопки. Все это неплохо встраивается в маркетинговый фреймворк AIDA. Часто используется в баннерах и лендингах.
Обычные картинки или фотографии — еще один способ улучшить визуал сайта. Например, их можно использовать в качестве подсказок, чтобы объяснить какой-то элемент интерфейса или даже провести полноценное обучение на платформе.
3. Добавляем плавающие элементы
Плавающие элементы — удобный инструмент навигации. Меню, кнопки соцсетей, окно диалога с оператором всегда перед глазами пользователя — остаётся только кликнуть по ним. Главное — правильно разместить эти элементы.
Располагать их лучше сверху или сбоку экрана. Так пользователю будет легко по ним кликнуть и перейти в нижний раздел. Например, иконки соцсетей обычно размещают в правом верхнем углу. А чат с поддержкой клиентов оптимально смотрится в нижнем правом, ниже левом углу.
Кроме удобства здесь работает и привычка: люди привыкают, что на большинстве сайтов есть техническая поддержка в правом нижнем углу, поэтому на вашем они вряд ли станут искать ее в каком-то разделе меню или футере.
Плавающая кнопка связи с поддержкой. Она всегда рядом, чтобы вы могли кликнуть на нее
Когда добавляете плавающие элементы, следите, чтобы они не перекрывали важный контент на странице. Кнопки должны быть небольшими и минималистичными. Но при этом читаемыми: пользователь должен понимать, что это за иконка или что написано в кнопке. В таком случае всплывающие элементы не будут отвлекать внимание.
Кроме кнопок меню и социальных сетей, во всплывающие элементы можно добавлять CTA-блоки. Например, сделать попап с призывом оставить email в обмен на лид-магнит — подарок или скидку. Главное, чтобы такой блок не всплывал сразу при открытии страницы. Также важно, чтобы кнопка «Закрыть» или крестик были хорошо заметны. Кроме того, любые «всплывашки— должны адаптироваться и под ПК, и под смартфоны. Иначе некоторые пользователи не смогут его закрыть и уйдут с сайта.
Пример всплывающей кнопки — сбор email-адресов в обмен на подарок от издательства МИФ
4. Используем стрелки
Стрелки — еще один элемент для навигации по сайту. Они мгновенно переносят пользователя в нужную точку страницы или раздела. Например, вверх страницы, если до этого читатель долго скроллил вниз.
При этом стрелки занимают мало места, поэтому разместить их можно практически где угодно. Главное, чтобы они не закрывали другие всплывающие элементы или важные блоки сайта.
Стрелками можно отправлять пользователя как вниз, так и вверх страницы
Стрелки можно использовать и для того, чтобы подсвечивать какие-то разделы сайта. Например, кнопки для перехода на определенные страницы. Ещё один вариант — провести с помощью стрелок и небольших надписей над ними обучение по работе с вашей платформой.
5. Прописываем образец заполнения форм
Образцы заполнения форм — полезная фишка, которая облегчает пользователю ввод данных. С такими подсказками человек быстрее заполнит нужные поля и сделает меньше ошибок. А значит, шанс того, что пользователь заполнит форму до конца и не уйдет с сайта, выше.
Что писать в образце. Стоит заполнить форму так, будто она уже полностью готова. Например, для адреса электронной почты можно указать какой-то email. В поле с паролем можно добавить подсказку с требованиями: минимум 8 символов, включая букву и специальный символ.
— Образцы заполнения можно давать в самом поле — в плейсхолдере или в подсказке под полем. Но вообще образец лучше смотрится в плейсхолдере, подсказка скорее помогает с форматом ответа. Формат в плейсхолдере будет плохо работать — ведь он исчезает, когда пользователь начинает заполнять. Пример не так жалко.
— Не везде нужны примеры — иногда достаточно показать формат. «Фамилия Имя», «дд/мм/гггг»— вполне понятные форматы.
— В поле для свободного ввода можно дать пример самого типичного ответа или перечислить несколько вариантов, охватывающих разные сферы — чтобы не ограничивать воображение пользователя.
— Поле для ввода длинного текста пугает пользователей. Что можно сделать? Можно показать пример текста подходящего объёма. Так мы мягко подскажем: здесь не нужно писать эссе, достаточно одного-двух предложений. Можно ограничить сам размер поля — это визуально покажет, какого объема текст мы ждём.
— В последнее время сервисы следят за объемом в реальном времени и советуют добавить деталей, если отзыв или ответ слишком короткие. Тоже нормальная практика, которая маленькими шагами подталкивает к детальному тексту.
— Учтите, что в опросе подсказки могут серьёзно влиять на ответы респондента. Пользователи часто просто используют пример в качестве ответа. В таких случаях примеров стоит вообще избегать, а подсказку делать только чтобы был понятнее сам вопрос.
— Примеры в плейсхолдерах не должны выглядеть слишком настоящими, чтобы пользователь не подумал, что кто-то уже заполнил все поля за него, что это чья-то чужая анкета.
Богдан Гончаренко
Head of Product Design at Social Links, ex-Mish, EPAM, Sber, автор Telegram-канала @uxuitelno
В формах не приводите реальные данные. Был кейс, когда дизайнеру звонили несколько лет из-за того, что он указал в поле для ввода свой номер телефона.
6. Добавляем FAQ
Чтобы не нагромождать много текста на одну страницу.
FAQ — это блок часто задаваемых вопросов, который поможет пользователям найти ответы на свои вопросы без нужды писать в поддержку. Грамотно составленный FAQ может разгрузить ваш отдел поддержки и повысить продажи.
Чтобы FAQ был полезным, информация в нем должна быть актуальной и постоянно обновляться. Вопросы стоит разбивать по категориям, чтобы пользователю было проще ориентироваться в них. Например, в интернет-магазине можно разбивать вопросы на такие группы: доставка и оплата, возврат и обмен товара, работа с личным кабинетом.
Сами вопросы стоит прописывать максимально подробно и писать так, как спросил бы реальный пользователь. Т.е. не писать «Почему я должен купить в вашем лучшем магазине», а «Почему я должен выбрать вас» и т. д.
Неудачные вопросы:
Что касается доставки товаров нашими курьерами?
Информация о бонусах и специальных предложениях.
Как быть в ситуации, если я передумал покупать товар?
— Главное про FAQ — вопросы должны быть настоящими. Если ваш вопрос выглядит надуманным и рекламным, никто не будет читать. «Почему мои деньги будут в надёжных руках?» — это не настоящий вопрос, как бы вам ни хотелось на него ответить. «Безопасно ли хранить у вас деньги?» — уже похоже на настоящую боль.
— Ответы должны быть достаточно сжатыми, но достаточными, чтобы ответить на вопрос. Не нужно бросаться писать статью и рассказывать все исторические предпосылки. Люди приходят в FAQ за быстрым ответом, читать длинные тексты никто здесь не готов.
— Настоящие вопросы берите в отзывах, комментариях, обращениях в поддержку. Видите часто повторяющийся тип вопроса — отвечайте на него. Ответы тоже можно позаимствовать у саппортов, переиспользовать их опыт.
— Помните, что FAQ — это последний рубеж дешёвой обороны от вопросов, дальше только дорогая поддержка. Это значит, что нужно следить, чтобы FAQ не был самым популярным вашим разделом. Если видите по метрикам, что большая часть пользователей тусуется у вас в FAQ, значит, вы плохо закрыли эти вопросы в лендинге, онбординге или поскупились на объяснения в самом продукте.
— В каком порядке отвечать на вопросы? Можно отсортировать по популярности — это нормально, если вопросов немного. Если же много, то лучше следовать понятной логике: например, от вопросов про регистрацию к вопросам по использованию продвинутых функций. Также ориентироваться помогут подразделы. Пользователь должен легко найти нужный вопрос.
7. Прорабатываем служебные страницы
Служебные страницы — это те, которые пользователи не должны посещать. Например, страница 404 или 403. Часто такие страницы воспринимаются пользователем как тупик: раз она всплыла, значит сайт не работает и с него нужно уходить. Но это не так: с помощью служебных страниц можно общаться с пользователями и перенаправлять их в другие разделы сайта.
Для этого на всех служебных страницах стоит прописывать, что это за ошибка и что она означает. Здесь же нужно предложить пользователю варианты решения: вернуться на предыдущую страницу или перейти к другим разделам сайта по оставленным ссылкам.
Пример хорошей страницы 404: на ней собраны ссылки на другие части сайта
— Упрощать нужно всё, но только до необходимого минимума. Если необходимый минимум — это статья с информацией, значит, придётся делать статью с информацией. Если достаточно понятного заголовка и ссылки — отлично.
— Как понять необходимый минимум? Разобраться с тем, кто и зачем туда попадает. Даже на самые служебные из служебных страниц люди не попадают случайно. Пользователь хотел куда-то попасть, у него была какая-то задача. Попытаться понять или предсказать задачу — это первый шаг, чтобы понять, что на ней должно быть.
— Не делайте тупиковые страницы, всегда давайте кнопку или ссылку на что-то ещё, чтобы не терять пользователя. Хорошо, вот я попал на 404, потому что такой страницы уже нет — но может быть мне будет интересно посмотреть другой товар или прочитать другой материал? Я всё ещё на вашем сайте — используйте это.
8. Делаем контакты заметными
Наличие контактов на сайте — обязательная часть. Во-первых, пользователю не придётся искать вашу компанию. Во-вторых, это сразу повысит его доверие, ведь мошенники вряд ли оставят реальные контакты на сайте.
Поэтому номера телефонов, адреса почт и ссылки на мессенджеры обязательно должны быть на каждой странице. Вот список всех сервисов, на которые стоит оставлять ссылки:
email;
мессенджеры — будет достаточно Telegram и WhatsApp;
социальные сети;
форма ввода номера телефона для тех, кто предпочитает, чтобы звонили ему.
Пример, как оформить контакты на сайте
Важно! Если оставляете ссылки на соцсети, то не забывайте их вести. Пользователь вряд ли захочет сотрудничать с компанией, которая публиковала посты 2 или 3 года назад.
9. Делаем сайт адаптивным
Адаптивный сайт подстраивается под размеры экранов и ориентацию устройств. Благодаря этому все формы, поля и кнопки отображаются корректно. А значит у пользователя не будет проблем с тем, чтобы куда-то нажать или куда-то написать.
Например, чтобы форму на сайте было удобно заполнять со смартфона, поля должны быть широкими и не выходить за рамки в вертикальном положении. Не стоит верстать сайт так, чтобы человеку приходилось переворачивать устройство, менять масштаб страницы и т. д.
Екатерина Комарова
UX/UI дизайнер, эксперт Tilda publishing. Разрабатывает сайты на Tilda и ведет авторский Telegram-канал
Динамический контент на сайтах работает лучше статического. Поэтому можно использовать галереи с автоплеем и короткие видео. Здесь важно следить за оптимизацией контента, сжимать максимально все, но без потери качества. Это нужно для того, чтобы сайт загружался быстро.
10. Проверяем, чтобы все взаимодействия интерпретировались однозначно
Иначе человек может не понять, что от него требуется. Чтобы избежать недоразумений на сайте, важно, чтобы каждое действие и команда были понятны пользователю. Если кнопка называется «Отправить», должно быть ясно, что после нажатия информация уйдёт на обработку. Если выбор ответа в форме подразумевает согласие с условиями, это необходимо указать рядом, чтобы не было двусмысленности.
Допустим, пользователь заполняет форму регистрации на сайте, и одним из шагов является согласие с условиями обработки персональных данных. Рядом с чекбоксом выбора должна быть фраза: «Я согласен с условиями обработки персональных данных», и возможность прочитать эти условия — т.е. политику конфиденциальности, — кликнув по ссылке.
Все элементы интерфейса должны общаться с пользователем ясно и недвусмысленно. Дизайн должен быть интуитивно понятным, чтобы пользователь не тратил время на разгадывание, что означает этот текст.
Например, если вы просите оставить номер телефона, уточните — для подтверждения заказа, обратной связи или рассылки новостей.
Вместо заключения: закрепим все знания на примере реального кейса
Реальным кейсом с нами поделилась Екатерина Комарова, UX/UI-дизайнер. На примере одного из своих проектов она поэтапно рассказала, как создать удобный для пользователей сайт.
Екатерина Комарова
UX/UI дизайнер, эксперт Tilda publishing. Разрабатывает сайты на Tilda и ведет авторский Telegram-канал
При проектировании обязательно продумываем навигацию, начиная с проектирования карты сайта. Удобная понятная навигация на сайте — забота о пользователе, она должна быть понятной, однозначной и иметь отклик: легкая анимация или ховер-эффекты — т.е. анимация, благодаря которой элементы сайта изменяют свой вид при наведении на них курсора или клике по ним.
Пример такой карты — карта сайта компании«Тундро» — производителя игрового оборудования.
В начале проектирования важно сделать схему, в которой отображены важные детали сайта. Как я понимаю, что они важные? Задаю заказчику на интервью множество вопросов, опрашиваю сотрудников, получаю рекомендации от SEO-специалистов, анализирую конкурентов и смежные направления. Далее собираю сильные решения из разных источников и думаю, как можно применить их относительного проекта, над которым работаю с учетом платформы Tilda.
Вот, что получается после опроса и сбора информации
После анализа информации я работаю над прототипом, в котором прорабатываю решения и забочусь о пользователе — думаю, как сделать так, чтобы ему было легко совершить целевые действия (основное и второстепенные): найти контакты, изучить необходимую информацию. Структурирую все на странице, продумываю меню (шапку сайта, еще ее называют header), подвал (footer), делаю перелинковку — чтобы все страницы были все между собой связаны, и пользователь «не попадал в тупик»
Если у сайта есть каталог и разделы, то для десктопной версии можно заложить подменю, которое будет сразу давать выбор без дополнительных переходов. Это решение упрощает поиск необходимой категории. Подобное решение может использовать для подменю при клике «О компании» — помимо ссылок на внутренние страницы даем контакты, ссылки на мессенджеры, карту и возможность заказать звонок. Для превью разделов хорошо сразу уточнять, сколько позиций в нем — сразу даем представление о наполнении.
Вот пример интерактивного шаблона, который получается в итоге.
Хороший UX — это еще и тексты. Поэтому на этапе создания прототипа ввожу копирайтера в контекст и помогаю ему писать осмысленные тексты. Если заказчик предоставляет тексты самостоятельно — помогаю поправить их. Пример ТЗ для копирайтера прикладываю ниже. А вот — ссылка на него.
Также мы не забываем о визуале (UI), поэтому я заранее взаимодействую с графическими дизайнерами, иллюстраторами, визуализаторами.
Одна из важных частей сайта — главный экран. Его задача — за 2-3 секунды дать понять пользователю, куда тот попал. Поэтому через тексты мы закладываем ключевое преимущество на экране, чтобы, например, отстроиться от конкурентов, заинтересовать пользователя и попасть в его ожидания. Опционально даем кнопки целевого действия на первом экране и в шапке. Кнопки лучше использовать привычной формы с понятными краткими побуждающими формулировками («оставить заявку», «скачать презентацию», другое).
Когда прототип готов, презентуем его заказчику и тестируем на нескольких пользователях. Если возникают сложности, дорабатываем и правим. После согласования переходим к отрисовке дизайна, опираясь на прототип и референсы, которые нравятся заказчику.
В процессе UI-дизайна важно то, как дизайнер предложит визуальные решения без ущерба для изучения контента и совершения целевого действия. Так как уже есть информация по целевой аудитории, уже становится понятно, какие размеры шрифтов использовать, какие цвета будут лишними и многое другое. Дизайнер отрисовывает дизайн-макеты для всех страниц, а также для адаптивных версий. Аккуратно используем анимацию, чтобы придать жизни, но не утомить и не усложнить взаимодействие.
После презентации заказчику и вносим правки и верстаем проект. Итоговый результат такой работы можете посмотреть здесь.
