Топ-10 ошибок, которые мы находим на клиентских сайтах. Часть 2

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

E-commerce сайты строятся на большом количестве паттернов. Паттерн — это устоявшаяся модель пользовательского поведения на сайте. Проработка e-commerce паттернов при создании интернет-магазина упрощает жизнь пользователя: он знает где искать корзину или как добавить товар в сравнение. Уход в сторону от устоявшихся поведенческих моделей в угоду дизайну или желаниям бизнеса может дорого стоить проекту.

Чаще всего паттерны не соблюдаются из-за недоработок в UX-проектировании или просто из-за отсутствия в выбранном e-commerce шаблоне. Рассказываем о самых часто забываемых паттернах, которые влияют на конверсию:

• Добавление в корзину из каталога

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

• Выбор количества единиц товара

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

И не забывайте установить в счётчике ограничение по складским остаткам или удобному вам количеству.

• Информация о доставке и оплате

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

• Отображение шагов оформления заказа

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

Полная проработка UI- и UX-паттернов в e-commerce требует глубокого погружения в тему, а в дальнейшем серьёзных затрат на изменение логики работы готовых проектов. Поэтому начните с проверки наличия описанных выше ошибок. Эти проблемы распространены среди интернет-магазинов и оказывают прямое влияние на воронку продаж.

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

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

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

• Использование более двух гарнитур

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

• Злоупотребление разными начертаниями

Не злоупотребляйте жирным начертанием текста: оно подходит для заголовков и расставления акцентов. От курсивного начертания лучше отказаться, поскольку оно затрудняет читаемость текста.

• Отсутствие иерархии среди текстовых единиц

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

• Слишком растянутые или зажатые текстовые строки

Придерживайтесь правила об усреднённой длине текстовой строки. Она содержит в себе не более 60-80 знаков и удобна для чтения.

• Неправильная выключка текста

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

• Висячие предлоги

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

• Злоупотребление цветом и прочее «украшательство»

В 90% случаев текст в веб-интерфейсе должен быть чёрным или белым в зависимости от фона. Такой текст контрастен, внешне аккуратен и удобен для восприятия. Это не касается выделения ссылок и других значимых элементов: для них уместно использовать акцентный цвет.

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

Чтобы решить вопрос с типографикой комплексно, разработайте систему текстовых стилей и внедрите на сайт. Впоследствии переиспользуйте стили так же, как мы советовали переиспользовать компоненты UI-kit. Если к сайту подключена CMS, контент-менеджер будет загружать текстовые материалы с готовыми стилями. Текстовые блоки станут единообразными и сайт будет выглядеть целостно. Так изменения в интерфейсе напрямую окажут влияние на удобство пользования.

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

На клиентских сайтах мы сталкиваемся с целым набором распространённых ошибок, которые связаны с оформлением и работой форм. Эти ошибки наслаиваются друг на друга и в ряде случаев делают формы непригодными для использования. И если непроработанная форма обратной связи это пол беды, то непроработанная форма оформления заказа губит всю выстроенную конверсионную воронку. Рассказываем о популярных ошибках, которые затрудняют взаимодействие пользователя с формой.

• Не отмечены обязательные поля

Увидев перед собой форму, пользователь должен сразу понимать какие поля обязательны для заполнения. Достаточно отметить такие поля звёздочкой (*), это привычный паттерн.

• Отсутствуют понятные тайтлы и плейсхолдеры

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

• Отсутствует маска номера телефона

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

• Ненастроенная валидация полей «на лету»

Если пользователь при заполнении поля ввёл что-то неверно, следует сразу обратить его внимание на ошибку. Для этого настройте валидацию «на лету»: информация в инпутах будет автоматически проверяться после ввода, а сайт будет сообщать пользователю об ошибках через ошибки валидации.

• Ненастроенная валидация

Валидация «на лету» является лучшей практикой юзабилити, однако без неё форма всё равно может работать. Для этого настройте в форме валидацию, которая срабатывает по нажатию кнопки «Отправить». Валидация должна проверять заполнение обязательных полей и правильность введённой информации. Уделите внимание содержанию валидационных сообщений: подробнее о копирайтинге микро-текстов мы писали в 8 пункте первой части статьи.

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

• «Сломанная» валидация

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

• Перегрузка форм

Чтобы пользователь заполнил форму, запрашивайте у него только необходимые данные. Чем больше полей в форме, тем скорее посетитель сайта откажется её заполнять. Особенно если эти поля отмечены как обязательные и форму без них не отправить.

• Отсутствие структуры в больших формах

Если вы при помощи формы запрашиваете у пользователя большой объем информации, разделите форму на шаги или на логические блоки. Это делает работу пользователя с формой комфортнее: пользователь не путается среди полей и наглядно видит, какая информация от него требуется и в каком объёме.

• Отсутствие чек-бокса с согласием на обработку данных

По закону «О персональных данных», пользователь должен давать согласие на передачу личной информации. Для этого добавьте под формой чек-бокс с согласием. В тексте рядом с чек-боксом разместите ссылку на страницу с «Политикой конфиденциальности». У нас есть отдельная статья о ФЗ-152, в которой можно больше узнать о работе с личными данными пользователей.

• Отсутствие сообщения об успешной отправке

Сообщение после отправки формы даёт пользователю понимание, что действие выполнено успешно. При этом сообщение не должно мешать пользователю отправить ещё одну форму. Наиболее удобным вариантом является отображение модального окна. В нём можно разместить дополнительную информацию: к примеру, срок ответа на отправленное сообщение или время доставки заказа.

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

Как и любые интерфейсные ошибки, которые мы разбираем в этом топе, значение правильно выстроенной композиции не упирается только во внешний вид сайта и «украшательство» страниц. Композиция в первую очередь отвечает за то, чтобы контент сайта комфортно и эффективно воспринимался. Пользователь должен не задумываясь считывать сайт как набор структурированных и логически оформленных блоков. Блоки в свою очередь объединяются в страницы, так достигается композиционное единство всего сайта.

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

• Правило «внутреннего» и «внешнего»

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

• Теория «близости» объектов

Объекты, размещённые близко друг к другу, воспринимаются как связанные или как части единого целого. Это не менее важное правило, которое обеспечивает ясность организации элементов на страницах сайта.

• Наличие достаточного количества «воздуха»

«Воздух» — это пространство, которое не занято контентом. Оно помогает сделать контент более читабельным и приятным с визуальной точки зрения. Организовывайте пространство сайта таким образом, чтобы страницы были чистыми и просторными. Желание занять каждый пиксель контентом приведёт к тому, что пользователь запутается в информации.

• Принцип контраста и акцента

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

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

Ещё одной составляющей, которая важна для построения пользовательского опыта, является контент. В особенности — размещаемые на сайте триггеры доверия. Это элементы, которые попадают в поле зрения посетителя и на психологическом уровне повышают уровень лояльности к сайту и бизнесу. Невозможно предсказать, какой именно триггер доверия повлияет на посетителей сайта. Триггеров должно быть много, они распределяются по страницам проекта и работают совместно.

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

• Отсутствие или недостаток контактной информации

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

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

• Отсутствие информации о компании

Демонстрация лица бизнеса — одна из первоочерёдных задач сайта. Не забывайте рассказывать посетителям о том, чем занимается команда проекта, какова история компании. При написании текста для страницы «О компании» будьте осторожны: избегайте корпоративных штампов и необоснованного выделения собственных преимуществ. Оперируйте реальными фактами, цифрами и другими статистическими данными. Разместите фото сотрудников и корпоративных мероприятий. Это делает бизнес прозрачным и напрямую влияет на уровень доверия посетителей.

• Использование фотографий со стоков

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

• Отсутствие отзывов клиентов

Ещё одним доказательством добросовестности бизнеса является наличие клиентских отзывов. Здесь также стоит быть аккуратным: отзывы должны внушать доверие посетителю сайта. Докажите пользователю, что за отзывами стоят реальные люди, которые пользовались услугами или продуктами компании. Разместите фотографии авторов отзывов, приложите ссылки на их социальные сети или другие контакты. Если ваша компания работает в B2B формате, разместите благодарственные письма от клиентов.

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

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

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