Ошибки в юзабилити обходятся бизнесу дорого в принципе. А у нас в России это вообще болезненно актуальная тема. Ведь слабое юзабилити есть не что иное, как проявление распространенной в нашей стране проблемы — недостаточной клиентоориентированности. Неудобный сайт отталкивает пользователя точно так же, как некачественный сервис.
Из этой статьи вы узнаете, каким нюансам юзабитили стоит уделить внимание, чтобы избежать ухода потенциальных клиентов с вашего сайта.
Оглавление:
1. Почему слабое юзабилити убивает бизнес в интернете
Юзабилити, говоря упрощенно, это определение того, насколько пользователю легко, удобно и приятно пользоваться вашим сайтом. Это одна из главных характеристик современного веб-ресурса. Слабое юзабилити убивает бизнес в интернете по описанным ниже причинам.
Легко уйти к конкурентам — если на вашем сайте неудобно, если нужно долго искать интересующую информацию, пользователю проще перейти на сайт конкурента. У большинства продуктов и услуг есть множество альтернатив, навряд ли ваш бизнес — исключение.
Подсознательный негатив — даже если по каким-то причинам пользователь еще не покинул неудобный веб-ресурс, у него накапливается подсознательный негатив от испытываемого дискомфорта. Поверьте, это скажется на его покупательской лояльности.
Слабое юзабилити понижает прибыль — исходя из вышесказанного, на неудобном и сложном в использовании сайте понижается вероятность конверсионного действия, а значит и прибыли.
Поэтому, если вы предприниматель или управляющий бизнесом, то ваш кровный интерес заключается в повышении юзабилити сайта вашей компании.
2. Как улучшить юзабилити сайта
Любой сайт по сути своей — это связка функционала, дизайна и копирайтинга. Поэтому, для более системного понимания вопроса мы дадим рекомендации по повышению юзабилити в разрезе каждой из этих трех областей сайтостроения.
2.1. Юзабельный функционал
Важно, чтобы ваш сайт позволял пользователю максимально быстро получить интересующую информацию о том, что вы предлагаете и как с вами связаться. У посетителя юзабельного сайта не может возникать вопросов наподобие «Что происходит?», «Что дальше?» или «Ну где же?».
Взаимодействие с пользователем должно быть предельно упрощено. Чтож, пройдемся по конкретным нюансам.
• Короткие формы — делайте контактные формы лаконичными, не запрашивайте у пользователей большого количества информации. Если же «допроса» не избежать, тщательно структурируйте форму, разделите ее на несколько этапов.
• Удобный поиск — разместите его вверху страницы, на видном месте, «научите» понимать опечатки и подсказывать варианты заполнения поля.
• Ненавязчивая поддержка — предложите помощь консультанта, но не надоедайте пользователю многократными предложениями консультации во всплывающих окнах, отвлекая от изучения контента.
• Избегайте «тупиковых» ситуаций — позаботьтесь, чтобы при попадании на 404 страницу пользователю были даны четкие инструкции, что делать дальше. Также поблагодарите человека за заполнение контактной формы или заказ, дайте ему понять, что его запрос обрабатывается, и сориентируйте по срокам. Пользователь всегда должен понимать, что происходит на сайте.
• Возврат вверх одним кликом — разместите в конце длинного лендинга или веб-страницы кнопку, позволяющую одним кликом вернуться на первый экран. Не мучайте пользователя бесконечным скроллингом.
• Быстрая загрузка — «почистите» коды, оптимизируйте изображения, чтобы страница загружалась быстрее — в идеале за 2-3 секунды. Если сайт все равно тяжелый, хотя бы тщательно подберите прелоадер.
• Грамотная навигация — используйте не более 9 пунктов в меню и 3-4 уровней вложенности. Не забывайте о «хлебных крошках», облегчающих навигацию по сайту.
• Кликабельные телефоны — помните, пользователю куда проще нажать на номер и позвонить, чем копировать его из текста или переписывать с картинки.
• Уберите горизонтальную прокрутку — она не только неудобна, но и делает ваш сайт архаичным.
• Отзывчивые кликабельные элементы — особенно важный момент. Дайте пользователю четкое понимание того, что на сайте кликабельно, не заставляйте его попусту кликать или гадать о предназначении того или иного веб-элемента. Тщательно продумайте контрастность. Не допускайте ситуаций, когда на кнопки похожи другие графические элементы — например, текст в рамке. Заставьте кнопки менять цвет при наведении на них курсора, а изображения-ссылки слегка увеличиваться или выдавать поясняющие надписи. Это легко достигается средствами CSS (каскадных таблиц стилей). Также мы рекомендуем вам позаботиться о том, чтобы при посещении сайта с мобильного устройства кликабельные элементы не оказались слишком мелкими — уже 30 пикселей.
Помните — какими бы возможностями не обладал ваш сайт, все технические «фишки» обесценятся, если они не «user friendly». Ведь ушедший к конкуренту пользователь попросту может не успеть воспользоваться ими.
2.2. Юзабельный дизайн
В нашем агентстве UX/UI дизайнеры заботятся о том, чтобы каждый выбранный цвет, очертание, форма делали пребывание пользователя на сайте максимально комфортным и непринужденным.
Вот рекомендации по дизайну, которыми мы поделимся с вами в первую очередь:
• Не перегружайте — избегайте использования на вашем сайте слишком большого количества информации. В глазах рябит, непонятно на что обращать внимание — вот губительные последствия попыток уместить на одну страницу миллион преимуществ.
• Паттерн F — учитывайте, что человеческий взгляд скользит по веб-странице по паттерну, схожему по очертаниям с латинской буквой F. Исходя из этого и определяйте расположение оффера и важнейших веб-элементов.
• Визуальные подсказки — намекайте пользователю, на что обратить внимание в первую очередь, с помощью контрастности, стрелочек, направления взглядов людей на фотографиях.
• Цветовая гамма — подберите гармоничное, не раздражающее глаза цветовое сочетание, соответствующее тематике товара и настрою целевой аудитории. Позаботьтесь о читабельности текста на цветном фоне.
• Эстетичность восприятия — придерживайтесь «золотого сечения», общепризнанных удачных пропорций. Это сделает работу с вашим сайтом более приятной.
• Умеренный минимализм — используйте пустое пространство для того, чтобы акцентировать внимание пользователя на ключевых тезисах, преимуществах, социальных доказательствах и конвертабельных элементах.
• Привычность расположения — учитывайте важность пользовательского опыта. Например, если люди привыкли искать меню сверху страницы или слева, то креатив вроде меню справа снизу необоснован.
Самое главное, помните, что в веб-разработке под дизайном подразумевается не просто «наведение красоты» на сайте, но также и создание удобства, простоты восприятия, продуманной расстановки акцентов.
2.3. Юзабельный копирайтинг
В чем бы не заключались ваш продукт или услуга, именно с помощью текста вы описываете их и предлагаете приобрести.
В то же время современный человек склонен к клиповому мышлению и нужно учесть целый ряд нюансов, чтобы ускорить и облегчить восприятие текста. Вот они.
• Использование терминологии — выражайте мысли просто, не озадачивайте пользователя заумными терминами без объективной на то причины.
• Структурированность текста — используйте списки, подзаголовки, врезки, инфографику. Все перечисленное облегчает восприятие.
• Ссылки синим текстом — людям это привычно, опять же всегда стоит опираться на имеющийся пользовательский опыт.
• Информативность первых строк — выражайте на лендингах мысли от общего к частному.
• Короткие предложения — их суть воспринимается легче и быстрее.
• Меньше воды, больше сути — применяйте принципы инфостиля, пользуйтесь онлайн-редактором «Главред». Однако, не впадайте в крайности. Фанатичная «высушка» текстов напрочь лишает их жизни.
• Согласованность с дизайном / иллюстрациями — хороший коммерческий текст направляет дизайн, выражает саму суть вашего УТП. Недопустима ситуация, когда оформление текста противоречит его посылу. Например, если вы напишите обещание обеспечить безболезненное удаление папиллом кроваво-красным цветом, то из-за ненужных подсознательных ассоциаций подорвете доверие целевой аудитории к вашему предложению.
• Оглавление в лонгридах — если на вашем веб-ресурсе размещаются очень длинные статьи, делайте для них оглавление, навигацию с якорями. Так удобнее изучать контент, предназначенный для вдумчивого изучения.
Главное — помнить, что читать любят далеко не все люди. Поэтому каждое предложение на вашем сайте должно содержать полезную информацию и оставаться понятным даже для человека, впервые столкнувшегося со сферой вашей деятельности.
3. С чего начать
Мы рекомендуем вам использовать эту статью в качестве чек-листа при первичной оценке юзабилити своего сайта. Старайтесь также почаще мысленно ставить себя на место пользователя, смотреть на сайт глазами человека, увидевшего его впервые.
Если вы хотите обстоятельно изучить теорию юзабилити, то мы предлагаем ознакомиться с трудами ведущего мирового эксперта — Якоба Нильсена. Без знания его 10 эвристик проектирования пользовательского интерфейса мы даже не рассматриваем кандидатов на должность UX/UI дизайнера в нашем агентстве.
В свою очередь, для прагматичного анализа юзабилити уже существующего сайта вам доступна целая палитра инструментов Яндекс Метрики — вебвизор, аналитика форм, карты скроллинга и кликов.
Однако, для того, чтобы верно интерпретировать полученные данные, важно иметь наметанный глаз. Именно богатством опыта и способностью к верному истолкованию пользовательского поведения отличается специалист по юзабилити от любителя.
При этом мало понять, что именно составило для пользователя затруднение — необходимо грамотно устранить выявленные проблемы. А для этого требуется слаженная работа коллектива нишевых специалистов — дизайнеров, программистов, копирайтеров, интернет-маркетологов. Например, нас.
Комментарии