Как улучшить юзабилити сайта


Оглавление (нажмите, чтобы открыть):

— Блог об интернет деятельности и финансовой независимости —

  • ГЛАВНАЯ
  • Все статьи
  • Поделись
  • Куплю сайт
  • Что такое юзабилити сайта и как повысить его качества?

    Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как Usability (юзабилити) сайта, о том, как улучшить данный фактор, зная его основные принципы и правила. Ну и в заключение научимся делать независимый и бесплатный аудит (анализ) своего проекта на привлекательность к его аудитории. Итак, начнем, пожалуй, с определения самого понятия usability (юзабилити).

    Что такое Usability (юзабилити) и каковы его принципы?

    Usability – с перевода означает меру удобства, качества, простаты в использование чего-либо. В нашем случае имеется в виду сам сайт, так как он непосредственно взаимодействует с пользователями интернета. От того какой уровень юзабилити у того или иного проекта напрямую будет зависеть его CTR (процент) продаж, позиции в поисковых системах и естественно количество трафика (посетителей). Если вам удастся улучшить данный фактор, то вы одним выстрелом убьете сразу нескольких зайцев, которые могут повысить ваш заработок в 2-3 раза! Вот что вы получаете в случае высокого уровня usability:

    — Увеличения такой очень важной вещи как конверсии сайта (процент продаж), а значит и прибыль владельца сайта.

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

    — Уменьшению бюджета (расходов) на контекстную и иную рекламу для привлечения посетителей. Зачем за них платить, если вас и так хорошо находят через поиск?

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

    — Уменьшения количество сотрудников, которым надо платить зарплату. Как вы знаете, на каждом уважаемом себя сервисе должна быть онлайн поддержка клиентов. Так вот, если ваш посетитель сможет сам без какой-то либо помощи находить ответы на интересующие его вопросы, то вряд ли он будет дергать вашего консультанта.

    — Довольные клиенты будут рекомендовать вас вашим друзьям и знакомым, ведь они уже знают, что вам можно доверять.

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

    Многие в погоне за клиентами пытаются выделиться среди общей массы конкурентов, показывая так сказать свою «крутость», состоятельность. Чаще всего это можно заметить в текстах, где используются сложные термины для восприятия, которые могут понять только очень узкая прослойка общества. Но не будем себя обманывать, ведь чаще всего наши клиенты это обычные бабули и дедули и даже иногда школьники, которые так сказать не могут «врубиться», что это за вещь такая и почему я должен ее купить именно тут, если я даже описания ее не могу понять?

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

    Итак, вот ряд тех вопросов, которые надо учитывать при проектировании сайта:

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

    — Насколько полезный и легко читаемый контент (статьи, видео) для восприятия разными группами людей по возрастным и культурным особенностям.

    — Насколько пользователь легко сможет запомнить и отыскать ваш сайт (тут иметься в виду красивый уникальный дизайн, короткий и понятный адрес сайта, его название, телефон и т.д.).

    — Будет ли доволен посетитель после покупки? А вдруг доставка запоздает или вообще товар придет разбитым, а у вас как и у всех денежные средства не возвращают.

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

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

    Основные правила как улучшить юзабилити контента (статей) сайта.

    1 ) Разделяйте свой статьи на небольшие абзацы, каждый из которых состоит примерно из 5-7 предложений. В наше время пользователи уже не читают записи на сайтах как какую-нибудь книгу, а просто их сканируют и определяют, стоит ли читать ее полностью или нет. Так вот если вы пишите длинные статьи, как я, то пользователь может просто испугаться, увидев один огромный текст, которому невидно конца. Думаю, вы тоже вряд ли прочитали бы и эту статью, если бы она не была бы поделена на абзацы.

    2 ) Используйте цепляющие, интригующие подзаголовки, которые выделяются специальными тегами:

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

    3 ) В самом первом предложении своей статьи всегда выделяйте ключевые слова, по которым ищет вас пользователи жирным шрифтом. Данная операция даст пользователю понять, что он нашел то, что искал, ведь как я уже писал выше, пользователи не читают даже и половины текста, они просто сканируют его на ее релевантность (степень ответа статьи на вопрос).

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

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

    5 ) Вставляйте в публикации качественные картинки или видеоролики. Это помогает улучшить usability статьи, ведь никому не хочется читать один нудный текст. Это, кстати, в наше время стало очень актуально, когда все больше и больше людей начали покупать небольшие комиксы, чем когда-то килограммовые книги.

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

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

    Как улучшить юзабилити самого сайта?

    8 ) Перед тем как создавать сайт надо проанализировать рынок, свою аудиторию, что им привычно, а что чуждо, понять ход их мыслей. Чаще всего в 90% случаев юзабилити сайта начинают заниматься, когда он уже создан, что в конечном итоге приводит владельца сайта в уныние, так как он начинает осознавать, что придется провести столь большой ряд нововведений, что легче всего будет вообще снести весь сайт и сделать все сначала.

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

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

    10 ) Сделайте страницу ошибки 404. Вы, конечно же, можете удивиться: как же она может, повлияет на продажи? А вот как. Давным-давно одна компания сделала хитрую вещь, написав на странице 404 сообщение, что они просто не могут обработать товар и просили заново повторить процедуру покупки. Таким вот способом они увеличили свою прибыль на 380$ в месяц.

    11 ) Сделайте на сайте кнопку наверх. Если у вас достаточно большие публикации или описания товаров, то пользователь может просто утомиться, прокручивая долго вверх после прочтения.

    12 ) Не делайте много подкатегорий, какой бы большой сайт у вас не был бы (достаточно двух). Большое количество подкатегорий могут запросто запутать вашего читателя, да и в большинстве случае в вообще не даст ему найти нужный товар или материал.

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

    14 ) Сделайте заголовок и описание вашего сайта человечески понятным, чтобы пользователь с первого взгляда понял, что это за сайт и какова его цель. Многие, по моему мнению, делают одну и ту же грубую ошибку, вставляя в описание своего сайта название компании (особенно на английском) из которого пользователь ничего понять не может. Например, вот только что я ввел в поиск запрос «купить платье», перешел по первому же рекламному объявлению на сайт и что я вижу в заголовке? Mondigo.ru. Да, согласен, хороший прием, чтобы пользователь запомнил сайт, только вот вряд ли он им воспользуется.

    15 ) Прикрепите к вашему сайту поиск, желательно в привычное для всех место — к верхнему правому углу. Если у вас меньше 100 страниц, то можете пока что не волноваться по поводу этого, так как тут можно обойтись простой постраничной навигацией, но как страниц станет больше, обязательно добавьте поиск. Это, кстати, касается и партнерской программы. Совсем недавно я искал интернет-магазин, где была бы партнерка по нужному мне товару.

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

    16 ) Так как мы по своей культуре читаем записи слева направо, то и сам сайт должен быть так устроен, что весь текст должен начинаться слева, а не с центра, например, где у сайта две колонки с обеих сторон. Также фон обязательно должен быть белым, а текст черным не меньше 12рх.

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

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

    18 ) Уберите всплывающую форму подписки которая помимо того, что и так сильно раздражает, еще и замедляет сайт в 10 раз. Также давно на многих сайтах лицезрел такую ужасную прелесть, когда при нажатии на крестик сайта выходила ужасная форма подписки с тупым вопросом: вы точно хотите покинуть этот сайт? Рекомендую отказаться от данного способа собирания емайл адресов, ибо этим вы только ухудшите ваши поведенческие факторы.

    19 ) Знайте меру при монетизации сайта. Слишком много рекламы может отпугнуть или вообще не дать найти нужный материал читателю.

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

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

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

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

    24 ) Уберите плеер со своего сайта, посетитель пришел, чтобы найти нужный ему материл, а не слушать классику или роке-н-рол. Также рекомендую убрать все ненужные элементы на сайте такие как: календарь, топ комментаторов и т.д.

    25 ) И последнее, будьте дружественны и позитивны к вашей аудитории, ведь негатива и так всем хватает в своей жизни.

    Как сделать качественный аудит (анализ) сайта бесплатно?

    Для начала поставьте любой счетчик посещаемости, по которому вы сможете узнать, что за люди вас посещают: их возраст, пол, откуда пришли (страны) и т.д. Рекомендую устанавливать счетчик от Яндекса, так как там есть такая классная функция как «вебвизор» через который вы сможете увидеть, как каждый пользователь повел себя на вашем сайте. На этом этапе можно найти кучу багов (ошибок), а также разных недочетов в конструкции сайта. Также вы сможете увидеть на тепловой карте, куда чаще всего кликают ваши пользователи, что очень может хорошо помочь при размещении рекламы.

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

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

    Улучшение юзабилити сайта: проверенные советы, которые работают

    Значение понятия “юзабилити” по отношению к веб-сайтам можно излагать десятками формулировок разной сложности с более или менее профессиональной терминологией. Но, как бы мы ни изощрялись, самым лучшим определением останется буквальный перевод этого слова с английского. Usability — это удобство использования. Вам наверняка много раз приходилось слышать, что юзабилити сайта или интернет-магазина должно быть простым и интуитивно понятным. Именно так.

    Вот, допустим, вы создали веб-сайт с ультра креативным дизайном, в котором воплотили все актуальные тренды. Вот вы разработали непревзойденный функционал и напичкали сайт до отказа самыми полезными опциями. Вот вы вбухали уйму денег в рекламу и (вполне резонно) приготовились пожинать плоды… а интернет-магазин не продает. А ваш крутой информационный проект не дает и десятой доли запланированной отдачи. Почему? Потому что он элементарно неудобен для пользователей.

    Потому что то самое “удобство использования” оказалась ниже плинтуса, и посетителю не удается мгновенно определять, где то, что ему нужно. А если юзеру у вас в гостях некомфортно, успеха сайту не видать. На эти грабли наступило уже множество предпринимателей, и они продолжают это делать, бесконечно отпугивая и теряя своих клиентов, так что конкурентам остается только забирать их тепленькими.

    Хотите развивать свой бизнес в онлайн, получать больше трафиков и заказов с сайта? Давайте работать над этим вместе!

    Почему над юзабилити нужно работать

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

    улучшение поведенческих факторов;

    улучшение видимости веб-сайта в поиске;

    рост удовлетворенности посетителей сайта;

    увеличение глубины просмотров;

    уменьшение показателя отказов;

    снижение расходов на техническую поддержку;

    рост уровня конверсии и прочих целевых показателей;

    рост прибыли и процветание бизнеса.

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

    Как улучшить юзабилити: практические советы

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

    Адаптируйте сайт под мобильные устройства

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


    на среднестатистический сайт до 75% пользователей заходят с мобильных устройств (есть исключения, обусловленные спецификой тематики ресурса и аудитории);

    уже с 2015 года Google учитывает дружелюбность сайта к мобильным устройствам при ранжировании;

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

    Сознательный отказ от адаптации веб-ресурса под мобильные устройства — это путь к непрерывному снижению продуктивности работы сайта, то есть к краху бизнеса. Мало того, что вы “уроните себя в глазах поисковиков” (рискуете остаться без трафика), так еще около половины пользователей (по той же неумолимой статистике) откажутся второй раз заходить на сайт, страницы которого некорректно отображаются на их смартфонах.

    Оптимизируйте скорость загрузки страниц

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

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

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

    Оформляйте текст так, чтобы их было удобно читать

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

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

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

    избегайте мелких и вычурных шрифтов, не заставляйте юзера увеличивать масштаб страницы, всматриваться и расшифровывать “арабскую вязь”;

    убедитесь, что сочетание цветов шрифта и фона смотрится гармонично и не “выедает” глаза;

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

    Сделайте навигацию удобной

    Удобная навигация — Альфа и Омега юзабилити. Помните про характер современного пользователя? Дайте ему все лучшее, сразу, да еще разложите по полочкам. Берегите своего посетителя, он робок как лань, изнежен и капризен. Насыпьте на всем пути его следования “хлебные крошки”, чтобы он, не дай Бог, не успел наморщить лоб, пытаясь понять, куда ему дальше идти, как вернуться назад, и что вообще он тут делает.

    Исправьте технические ошибки

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

    Юзабилити сайта: описание принципов и правил построения эффективного дизайна, инструменты тестирования юзабилити

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

    Факторы, которые влияют на юзабилити ресурса

    Почему вопросам юзабилити сайта уделяют много внимания

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

    Юзабилити влияет на:

    • конверсию;
    • поисковую выдачу;
    • посещаемость;
    • длительность проведения времени на площадке;
    • восприятие информации аудиторией;
    • процент отказов.

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

    Главная страница сервиса Фабрика Юзабилити

    Факторы оценки юзабилити сайта

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

    Факторы оценки юзабилити:

    1. Ориентация на новых пользователей. Помогает оценить простоту комфорт совершения действия на странице. Негативными аспектами является наличие автозапуск видео, аудио, обилие рекламных баннеров, всплывающих окон, закрывающих важные зоны.
    2. Эффективность работы ресурса. Указывает на то, как быстро пользователь может разобраться в интерфейсе и структуре для оперативного поиска желаемой информации.
    3. Запоминаемость интерфейса. Демонстрирует, насколько легко пользователь может вспомнить устройство площадки после кратковременного и длительного отсутствия.
    4. Частота ошибок. На это указывают повторные возвращения на исходную страницу. С помощью карты кликов можно определить положение курсора во время нажатия, что помогает понять удобство кнопок, ссылок и их расположения.
    5. Субъективная удовлетворенность пользователя. Этот параметр представляет собой совокупность предыдущих параметров и означает общее впечатление от посещения площадки.

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

    Составляющие юзабилити сайта

    Правила юзабилити сайта

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

    Проще – лучше

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

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

    Правило трех кликов

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

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

    Фокусировка внимания: F-паттерн

    Паттерны изучения площадки

    Во время проведения многочисленных исследований было установлено движение взгляда посетителя при изучении новой площадки. Траектория выработана на базе стандартной модели чтения.

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

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

    Принципы обеспечения юзабилити сайта

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

    Особенности навигации

    Удобство серфинга по веб-ресурсу обеспечивают навигационные элементы в:

    • горизонтальном меню шапки;
    • вертикальном меню сайдбара.

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

    Для крупных проектов со сложной структурой рекомендуется создавать карту сайта.

    Советы, как повысить юзабилити сайта

    Средства поиска

    Для ускорения поиска информации используются:

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

    Отсутствие ошибок структуры

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

    Рекомендуется отказаться от стандартного оформления страницы ошибки 404 в пользу оригинального дизайна в контексте площадки.

    Корректное оформление шапки

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

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

    Основные виды тестирования юзабилити сайта

    Свободное пространство

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

    Текстовая информация

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

    Для удобства восприятия информации нужны:

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

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

    Скорость загрузки сайта

    Отчет проверки скорости загрузки на Яндекс.Метрике

    Средняя продолжительность нахождения пользователя на странице составляет 27 секунд. Такой вывод сделан на основании результатов исследований консалтинговой компании NN/g. Длительная загрузка сокращает время на ознакомление с ресурсом, а значит – посетитель узнает меньше полезной информации и может закрыть потенциально полезный сайт.

    Существует множество сервисов проверки скорости загрузки, среди которых выделяются:

    1. Google PageSpeed Insights.
    2. Яндекс.Метрика.
    3. PR-CY.


    В PR-CY, WhichLoadFaster и аналогах присутствует возможность сравнения площадок, в том числе размеров страниц, показателей скорости загрузки. Через сервис Monitis Tools можно узнать среднюю скорость загрузки для ресурсов отдельных регионов, что позволяет понять, к какому показателю нужно стремиться, а лучше – превзойти.

    Сервисы проверки предоставляют отчет и дают практические рекомендации по улучшению показателя.

    Взаимодействие с пользователем

    Для взаимодействия с аудиторией используются различные средства:

    • предложение помощи онлайн-консультантом (ненавязчивое);
    • опросы;
    • простое оформление заказа и форм связи;
    • оповещение о выполненных действиях.

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

    Адаптация для мобильных устройств

    Пример правильной адаптации для мобильных устройств

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

    Для повышения юзабилити с адаптацией под мобильные устройства существуют свои правила:

    1. Сокращение функциональности и контента до минимума, необходимого для восприятия информации и принятия решения.
    2. Размещение в одну колонку.
    3. Ориентированное на мобильные платформы навигационное меню и средства поиска.
    4. Внедрение встроенных функций: аудио и видеосвязь, просмотр расположения на карте в один клик.
    5. Адаптация под нужды аудитории. Например, ориентация на устройства с сенсорным экраном, кнопочным управлением, низкой скоростью интернета.

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

    Реклама на сайте

    Рекламные блоки и всплывающие окна уже сами по себе создают плохое впечатление о ресурсе, но когда речь заходит о простой статичной рекламе, стоит помнить о соблюдении ее разумных объемов. Баннеры, тизерная реклама с нежелательным содержанием, мешающие просмотру или навигации текстовые объявления — вызывают у аудитории желание закрыть страницу.

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

    Пример результатов айтрекинга: тепловая карта, которая показывает, как внимание пользователей распределяется по экрану

    Инструменты тестирования юзабилити

    Чтобы получить адекватную оценку удобства сайта, рекомендуется использовать комплекс мероприятий:

    • сбор статистики;
    • ненавязчивый опрос посетителей;
    • использование Вебвизора в Яндекс.Метрике и других инструментов наблюдения;
    • визуальный анализ действий контрольной группы – 3-10 человек.

    Для сбора необходимой информации и оценки юзабилити будут полезны следующие сервисы:

    1. UsabilityHub.
    2. UserPlus.
    3. Usabilla.
    4. Optimal Workshop.
    5. WebVisor.
    6. Feng-GUI.
    7. Фабрика Юзабилити (Fabuza.ru).
    8. СайтПолис (подключение аудиторов к тестированию ресурса).

    Не стоит забывать о доступных механизмах в Яндекс.Метрике и Google Search Console, ведь критерии оценки этих сервисов отражаются на ранжировании сайта в соответствующих поисковых системах.

    Модель поведения пользователя при просмотре информации
    (Диаграмма Гутенберга)

    Подведем итоги

    После изучения материала можно сделать следующие выводы:

    1. Юзабилити – важная составляющая разработки, развития, функционирования веб-сайта.
    2. Существуют устоявшиеся правила и принципы создания удобного для посетителей интерфейса.
    3. Регулярные проверки юзабилити помогут своевременно обнаружить и устранить ошибки.
    4. Для оценки удобства площадки используются различные инструменты и анализ действий реальных пользователей.

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

    Как повысить юзабилити сайта — 3 важных совета

    Дата публикации: 2020-01-09

    От автора: вы когда-нибудь представляли себя на месте пользователя вашего сайта? Представьте, что вы говорите по телефону с начальником, тут вам пишет кто-то из родственников и напоминает о том, что сегодня обязательно нужно быть на дне рождении подруги брата кумы. Подарок у вас еще, естественно, не куплен. И вы понимаете, что у вас очень мало времени, чтобы выбрать подарок в интернете, и еще меньше — чтобы забрать его в магазине. Заходите на какой-то сайт. Блин, долго грузится, нет времени ждать. А на этом ничего не понятно — нет желания разбираться. А где здесь вообще меню?

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

    Что такое юзабилити?

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

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    удобство и простоту навигации;

    логичное и комфортное расположение разных элементов;

    продуманную структуру меню и элементов управления;

    общую легкость восприятия веб-дизайна.

    Это обязательно должны учитывать все мастера веб-дизайна и другие специалисты по веб-разработке.

    Для чего нужно повышать юзабилити?

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

    Несомненно, дурацкая навигация, неудобный интерфейс, странное сочетание цветов и т. д., отталкивают посетителей от вашего сайта. Зачем тогда, спрашивается, надо было столько денег тратить на продвижение своего ресурса в ТОП поисковой выдачи, если клиент «разворачивается и уходит» к конкурентам?

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

    Если сравнить два сайта с одинаковым уровнем доходов на рекламу, но разным уровнем usability, то можно сделать такие выводы:

    у сайта с более высоким уровнем юзабилити больше поток клиентов;

    сайт с более удобным интерфейсом имеет низкие издержки на call-центр и менеджеров, так как у посетителей меньше вопросов, связанных с поиском, навигацией, оформлением заказа;

    уровень лояльности клиента выше к той компании, сайтом которой более комфортно пользоваться. Если компания заботится об удобстве посетителей веб-ресурса — значит, ей можно доверять.

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

    С чего начать работы по улучшению юзабилити?

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

    Изучаются сайты конкурентов (дизайн интерфейса, навигационная структура, семантическое ядро, способы привлечения клиентов и т. д.).

    Составляется список поисковых запросов по тематике вашего ресурса.

    Определяются роль и задачи проекта.

    Изучаются отзывы клиентов в соцсетях, форумах, сайтах.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

    Советы по повышению юзабилити

    Совет 1. Используйте принципы визуальной иерархии на вашем сайте. Профессиональные веб-дизайнеры знают: люди не читают всю информацию на веб-странице — они ее сканируют, причем, по определенному узору. Обычно это узоры в виде буквы «F» или «Z».

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

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

    К прочим принципам визуальной иерархии, которые нужно соблюдать, можно отнести:

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

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

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

    Совет 2. Сделайте идеальное «лицо» сайта — главную страницу. Вот несколько рекомендацию по улучшению юзабилити главной страницы:

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

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

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

    Совет 3. Уделите особое внимание оформлению текстов. Что имеет особое значение:

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

    отсутствие резких визуальных эффектов. Ядовитый или сильно контрастный по отношению к фону цвет шрифта, бегущая строка, мигающие абзацы могут раз и навсегда отбить у людей охоту заходить на ваш веб-ресурс;


    элементы оформления. Списки, картинки, подзаголовки —не обязательно, но очень желательны. Они позволяют структурировать и оформить текст, чтобы на него «любо-дорого» было глянуть;

    отсутствие ошибок. Орфографические, пунктуационные, стилистические ошибки могут сильно подорвать репутацию вашего веб-сайта. Если не уверены в вашем копирайтере — наймите корректора.

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

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

    Если вам нравится юзабилити нашего сайта, подписывайтесь на новые статьи и рекомендуйте их своим друзьям в соцсетях. А мы уже готовим для вас следующую статью по юзабилити, которая поднимет ваши usability skills до невообразимых высот . До новых встреч на страницах этого блога!

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Веб-дизайн. Быстрый старт

    Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

    Как улучшить юзабилити сайта?

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

    Если вы хотите обстоятельно изучить теорию юзабилити, то мы предлагаем ознакомиться с трудами ведущего мирового эксперта — Якоба Нильсена. Без знания его 10 эвристик проектирования пользовательского интерфейса мы даже не рассматриваем кандидатов на должность UX/UI дизайнера в нашем агентстве.

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

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

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

    Как улучшить юзабилити сайта? Советы профессионалов

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

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

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

    Термин юзаби́лити (от англ. usability — дословно «возможность использования») определяет то, насколько человеку удобно пользоваться сайтом. Конечно, думать об этом нужно ещё на этапе проектирования, но часто даже готовый сайт можно «оживить», следуя простым рекомендациям. Итак, с чего же начать ?

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

    1. Сделайте сайт очевидным для пользователей

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

    2. Используйте картинки и фотографии

    Одна удачная картинка стоит тысячи слов. На восприятие небольшой картинки человеческим глазом уходит 1,5–2 секунды, в то время как прочтение текста по диагонали зависит от объёма текста, и составляет не менее 10–15 секунд. Таким образом, используя «говорящие» картинки либо изображения с эмоциональной окраской, вы можете улучшить качество поведения пользователя на сайте.

    Берите для сайта фотографии из фотобанков. Они для этого созданы.

    Не стесняйтесь пользоваться фотографиями из фотобанков (да-да, мы о PressFoto.ru ), ведь они для этого и созданы. Например, если сделать большое, красивое изображение на главной странице информационного сайта, оно привлечёт больше пользователей, чем большой, информативный текстовый блок. Конечно, так сразу не определишь, какая картинка цепляет больше. Для этого существуют методы A/B тестирования, которые помогут вам выбрать наиболее эффективный вариант.

    3. Располагайте важную информацию там, где её увидят

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

    4. Добавьте «воздуха»

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

    5. Покажите выгоду

    Согласно последним исследованиям, наиболее эффективными, с точки зрения конверсии, считаются кнопки и надписи с указанием выгоды. Конверсия в некоторых случаях повышается на 1500%.

    6. Используйте разборчивые шрифты

    Желание приукрасить сайт, используя дизайнерские шрифты, понятно и даже похвально. Но, шрифт, в первую очередь , должен хорошо читаться. Поэтому убедитесь, что всем посетителям понятно — здесь написано «Контакты», а не «ΚæŸϖœ».

    Как говорится: «Дьявол кроется в деталях». Любой, даже самый замечательный сайт может оттолкнуть посетителя какой-то «мелочью», на которую разработчик даже не обратил внимания. Ответьте для себя на вопросы, следуя приведённым рекомендациям, и вы обязательно найдёте слабые места (если они есть) и сможете их устранить.

    Если вы знаете ещё какие-то приёмы, с помощью которых можно сделать сайт более эффективным, или вы улучшили свой сайт, следуя приведённым рекомендациям — пишите нам! Мы обязательно расскажем о вашем опыте в следующих публикациях!

    Благодарим экспертов компании VTEST за ценные советы и экспертное мнение по вопросам юзабилити.

    Как улучшить юзабилити сайта? Практические советы от Андрея Гусарова

    Совсем недавно мы делали подборку стримов по маркетингу от Андрея Гусарова. Там рассматривались такие темы, как «Отличие конкурентов в интернете и в голове предпринимателей», «Контент-маркетинг. Рентабельность. Ценообразование. Как делать контент, который не стареет?» и т.д. Сейчас мы снова сделали подборку, но уже с подробным описанием одного из стримов.

    Стрим «Совместный поиск зон роста»

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

    Давайте разберемся, что должно и чего не должно быть на сайте интернет-магазина.

    Ошибки, которые часто встречаются

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

    Расположение сортировщика товаров справа

    Сортировщик товаров должен находится слева. Почему? Люди воспринимают информацию слева направо. Поэтому сначала выбирают критерии, а только потом смотрят на сформированный список товаров.

    Отсутствие отзывов на сайте

    Многие владельцы сайтов недооценивают роль отзывов на своем веб-ресурсе и руководствуются принципом: «Захотят – оставят». На эту тему агентством «РБК.Research» было проведено исследование, в результате которого выяснилось, что 79% пользователей социальных сетей обсуждают товары со своими друзьями, а около 65% обязательно ищут и читают отзывы о товарах перед тем, как принять решение о покупке.

    Совет: проверьте, имеется ли на вашем ресурсе раздел «Отзывы». Если отсутствует – самое время завести.

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

    Согласно исследованию Эрика Руниона, лишь 1% посетителей сайта кликает на карусель , и 84% этих кликов приходятся на первый слайд.

    Кнопки социальных сетей, которые не работают

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

    Совет: если у вас на сайте есть кнопка, которая ведет на ту соцсеть, где информация давно не обновлялась, стоит убрать ее.

    Даты публикаций контента

    Информация в блоге должна обновляться периодически, а не от случая к случаю.

    Совет: внимательно следите за датами публикаций.

    Что должно быть на сайте

    Возможность заказать товар через мессенджеры

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

    Как повысить конверсию: 75 примеров улучшения юзабилити

    Какая конверсия у вашего сайта?

    Это один из первых вопросов, которые задают интернет-маркетологи своим клиентам.

    И если вы точно знаете ответ на этот вопрос, давайте зададим следующий:

    Вы знаете как увеличить конверсию сайта уже сегодня?

    Пользовательский интерфейс (UI) будет считаться хорошим тогда когда он не только прост в использовании, но и способен давать высокие показатели конверсии.

    Только в этом случае сайт будет эффективно работать как для компании, так и ее клиентов.

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

    Это обновленный на 2020 год перевод статьи GoodUI, где были описаны идеи и проведены эксперименты с результатами.

    Далее перечень из 75 идей по улучшению конверсии страниц с помощью изменения интерфейса.

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

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

    Так, при выводе контента в один столбец читатель будет предсказуемо двигаться по странице сверху вниз, тогда как на странице с многоколоночной (плиточной) раскладкой есть риск, что читатель начнет «блуждать» по блокам контента и отвлечется от основной цели страницы.

    Логика представления контента должна нативно направлять читателя к призыву к действию на вашей странице.

    2. Дайте сначала что-то бесплатно вместо того, чтобы сразу пытаться продать продукт или услугу

    Акционный купон, доступ на пробный период к продукту или просто полезный чек-лист — это зачастую именно то что нужно.

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

    3. Объединяйте аналогичный функционал вместо фрагментации UI

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

    Не забывайте периодически проверять разделы сайта на наличие таких дублей.


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

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

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

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

    5. Повторяйте призыв к действию несколько раз

    Повторение призыва к действию — это стратегия, наиболее применимая к длинным лендингам.

    При этом, не стоит показывать призыв к действию все 10 раз на одном экране. Это может вызвать раздражение у пользователя.

    Так как длинные посадочные страницы давно уже стали нормой, то призывы к действию стоит размещать равномерно.

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

    6. Используйте контрастные стили для оформления кликабельных элементов сайта

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

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

    При правильном использовании цвета пользователям будет проще воспринимать интерфейс сайта.

    7. Давайте пользователям рекомендации, а не просто подборки продуктов

    Исследования в области психологии говорят о том, что чем больше у человека вариантов выбора, тем сложнее ему остановиться на каком-нибудь одном.

    Показывая список из похожих товаров в каталоге или разделе, выделите для пользователя какие-то отдельные позиции. Это поможет ему определиться с выбором и смотивирует к покупке.

    8. Предоставьте возможность мгновенной отмены действий, не требующей дополнительных подтверждений

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

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

    9. Не пытайтесь охватить всех и вся — обозначьте свою целевую аудиторию

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

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

    Это также даст потенциальным клиентам уверенность в надежности вашего бизнеса/сервиса, так как вы не пытаетесь продать «все и всем». Для определения своей целевой аудитории вы можете пользоваться такими сервисами, как MicroPersonas, которые предлагают наборы уже готовых портретов. Остается только выбрать.

    10. Старайтесь быть прямолинейными

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

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

    11. Выделяйте призывы к действию

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

    Усилить контраст можно несколькими способами.

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

    Второй способ — это создание эффекта объема посредством теней и градиентов (в таком случае объект с «call to action» будет смотреться ближе к пользователю, в противовес другим объектам).

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

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

    12. Показывайте описанием в чем уникальность вашего продукта

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

    Это помогает персонализировать диалог.

    На самом деле, люди любят, когда описание товара начинается с упоминания места где он был произведен.

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

    Часто подобные описания помогают позиционировать продукцию как нечто высококачественное. А это — уже маленькая победа.

    13. Используйте в формах как можно меньше полей

    Люди по своей природе всегда стараются избегать трудоемких задач. Это же прямо касается и заполнения полей в формах.

    Каждое новое поле, которое вы запрашиваете для заполнения, с большой долей вероятности заставит пойти ваших посетителей в обход или вовсе уйти.

    К тому же, не все набирают текст достаточно быстро, особенно в случае с мобильными устройствами.

    Прежде чем создавать емкую форму с множеством полей, задайте себе вопрос, так уж ли необходимо присутствие каждого конкретного поля?

    После этого, удалите как можно больше ненужных строк.

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

    14. Отображайте нужные опции

    Каждый блок с выпадающим меню на сайте, скорее всего, содержит в себе дополнительные опции.

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

    Вместо этого вы можете скрывать опции, которые и так понятны по умолчанию (например, это может быть календарь или перечень городов).

    15. Если контент на вашей странице занимает больше одного экрана — показывайте это

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

    Если вы все-таки приняли решение делать длинные страницы (занимающие более одного экрана), позаботьтесь о том, чтобы пользователь это тоже понимал и видел.

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

    16. Фокусируйте внимание пользователей на том, что действительно важно, вместо того чтобы «забрасывать» ссылками

    Создать страницу с множеством ссылок, пытаясь ответить на как можно большее число вопросов клиента, несложно.

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

    Любой «линк», находящийся выше основного призыва к действию, рискует увести пользователя на другие страницы.

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

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

    17. Обозначайте текущие состояния элементов

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

    Например, письма могут быть прочитаны или не прочитаны, корзина может быть пуста или нет и т. д.

    Информирование пользователей о конкретном состоянии, в котором находится тот или иной элемент, является хорошим способом обеспечения обратной связи.

    18. Размещайте кнопки, которые прямо называют преимущества вместо тех, которые описывают стандартные действия

    Представьте себе две простые кнопки, отображаемые на странице. Одна кнопка говорит, что нажав ее, вы сможете «Сэкономить 30%», а другая попросит «Зарегистрироваться».

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

    Более того, процесс регистрации требует усилий и часто связан с длинными и многочисленными полями для ввода.

    Кнопки-преимущества, в свою очередь, могут привести к более высокой конверсии.

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

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

    19. Предоставляйте пользователям более удобные элементы управления

    Иногда имеет смысл предоставить пользователям возможность взаимодействовать с определенными элементами интерфейса напрямую.

    Например, при отображении списков с данными мы, как правило, можем разрешить пользователю производить с ними некоторые манипуляции (добавить, удалить, сравнить и т. д.).

    Другим вариантом простого управления является создание кликабельных полей в элементах списка.

    Например, пользователь может кликнуть по тексту, который после нажатия превращается в редактируемую строку.

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

    20. Размещайте формы с полями для ввода сразу на посадочной странице

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

    Например, размещение формы регистрации сразу на посадочной странице имеет ряд преимуществ по сравнению с тем вариантом, когда под это создаются отдельные страницы (или всплывающие окна).

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

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


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

    21. Внедрите плавную анимацию для отображения смены состояния элементов интерфейса

    Некоторые элементы интерфейса могут появляться, скрываться, перемещаться, двигаться/меняться в размерах при взаимодействии с ними.

    Рекомендуем искусственно создать некоторое время выдержки между переходом элемента из одного состояния в другое, добавив какую-нибудь анимацию (например, песочные часы).

    Делается это с той целью, чтобы пользователю было проще понять к чему приводят те или иные действия на сайте.

    При этом, имейте в виду, что продолжительность такой задержки сверх 0,5 секунды может вызывать у некоторых пользователей раздражение.

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

    22. Мягко вовлекайте пользователя вместо того, чтобы сразу требовать от него что-то сделать

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

    Таким образом, вы сможете рассказать пользователям о ваших преимуществах, а также предоставить им возможность персонализировать ваш продукт.

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

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

    23. Не создавайте лишних границ. Не рассеивайте внимание пользователей

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

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

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

    Но у этого метода есть также свои недостатки.

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

    Следовательно, страницы с большим количеством блоков могут выглядеть весьма хаотично и беспорядочно.

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

    24. Продавайте не сам продукт, а его преимущества

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

    Преимущества всегда несут в себе четко определенную ценность. Крис Гильбо в «Стартапе за 100 долларов» написал, что люди действительно стремятся к тому, чтобы обрести еще больше любви, денег, признания и свободного времени.

    В то же время, они не хотят стрессов, конфликтов, хлопот и неопределенности. Конечно, «сухие» характеристики продукта имеют право на жизнь, но все же лучше их гармонично увязать вместе с конкретными преимуществами (по крайней мере, там, где это возможно).

    25. Адаптируйте выдачу результатов на странице под любое количество данных

    В каталоге интернет-магазина, например, в зависимости от запроса пользователя, может быть получено совершенно любое количество данных в выдаче: их может быть 0, 1, 10, 100 и даже 1000+.

    Сайт должен быть максимально адаптивным для любого объема информации.

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

    То же самое касается и ситуаций с большим количеством данных.

    26. Предоставьте пользователям возможность выбора

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

    С другой стороны также распространена стратегия, когда чтобы что-то получить пользователь должен выполнить какое-то действие на сайте (нажать на кнопку, заполнить форму и т. д.).

    Но есть две веские причины, по которым первый вариант работает лучше, чем второй.

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

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

    Как показывают исследования, такая тактика может даже сохранять людям жизни.

    27. Внедряйте в UI сайта только те решения, которые не будут требовать от пользователя постоянно переучиваться, чтоб понять как с ними работать

    Создание согласованного и понятного пользовательского интерфейса — это самый простой способ сократить время, которое тратят ваши пользователи на овладение им.

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

    Создать подобный UI можно посредством таких вещей, как цвет, направление и расположение линий, размер, форма, маркировка и т. д.

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

    Пробуйте и пытайтесь определить золотую середину.

    28. Внедряйте в UI «умные» формы вместо того, чтобы просить пользователя давать одну и ту же информацию снова и снова

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

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

    «Умные» формы — это еще один способ сэкономить пользователю время и сократить количество действий, которые ему необходимо выполнить на сайте. Чем меньше работы нужно выполнить потенциальному клиенту, тем лучше.

    29. Внедряйте то, что уже работает. Не изобретайте велосипед

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

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

    Не пытайтесь внедрить в UI какую-нибудь уникальную логику или новые решения с которыми у пользователя могут возникнуть сложности.

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

    30. Говорите клиенту каких болей он сможет избежать получив ваш продукт или услугу

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

    Это можно применить и к позиционированию продукции.

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

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

    31. Внедрите четкую визуальную иерархию

    Правильная визуальная иерархия может использоваться для подчеркивания важных элементов на фоне менее важных.

    Она может быть выстроена на основе таких параметров, как выравнивание, цвет, отступы, размер шрифта, размер элемента, интервалы и т. д.

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

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

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

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

    Создавайте визуально «цепляющий» интерфейс.

    32. Группируйте связанные между собой элементы

    Группировка связанных друг с другом элементов является главным условием удобства их использования.

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

    Размещая связанные элементы рядом, вы сделаете UI более логичным и не введете ваших пользователей в замешательство.

    33. Проверяйте корректность введенных данных в каждом отдельном поле, а не по всей форме

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

    Увидев сообщение об ошибке (например, справа от поля ввода), пользователь исправит ее сразу же.

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

    34. Предусмотрите разные форматы ввода данных

    Поля для ввода в формах должны уметь распознавать различные форматы данных. Это сделает ваш интерфейс дружелюбнее.

    Прекрасный пример реализации данного приема — случай, когда мы спрашиваем человека о номере телефона.

    Его, в свою очередь, можно ввести разными способами — с помощью скобок, пробелов, тире, кодов областей и так далее.

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

    Срочность — это тактика убеждения, которая применяется в тех случаях, когда необходимо мотивировать людей действовать сейчас, а не позже (а следовательно, как вариант, вообще никогда).

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

    Ее эффективность можно объяснить и тем, что люди не желают мириться с потерями точно так же, как и упускать возможности.

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


    36. Акцентируйте внимание на дефиците товара

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

    Именно дефицит позволяет продемонстрировать пользователям, что вскоре товар может и вовсе исчезнуть из продажи.

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

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

    37. Задавайте пользователям наводящие вопросы вместо того, чтобы просить самостоятельно что-то описать

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

    Согласитесь, что иногда экзаменационные задания с несколькими вариантами ответов выполняются быстрее, чем задания с открытым вопросом.

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

    38. Делайте важные кнопки более крупными

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

    Именно по этой причине подумайте достаточных ли размеров ваши формы, призывы к действию и ссылки.

    В качестве альтернативы, можно сохранить размеры элементов увеличив, при этом, кликабельную зону вокруг них.

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

    39. Ускоряйте время загрузки страниц

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

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

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

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

    Один из них — это отображение индикаторов, которые отображают статус выполнения задачи.

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

    40. Показывайте пользователям возможные сочетания клавиш для взаимодействия вместо обычных кнопок

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

    Люди часто ищут способы, которые позволяют им выполнять повторяющиеся задачи быстрее, а сочетания клавиш — как раз один из таких способов.

    Горячие клавиши, которые человек единоразово запомнит могут существенно ускорить выполнение задач и помочь ему буквально «как семечки», щелкать один интерфейс за другим.

    Одним из таких примеров является использование горячих клавиш J и K для загрузки следующей и предыдущей страницы (они были популяризированы такими приложениями, как Gmail, Google Reader, Twitter и Tumblr).

    Кнопки (кликабельные элементы UI) также имеют право на жизнь, но все же желательно дополнить их функционал клавиатурными сочетаниями.

    41. При демонстрации цены идите от большего к меньшему

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

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

    42. Показывайте пользователям насколько они продвинулись при заполнении тех или иных форм

    Люди более мотивированы дожидаться завершения какого-либо процесса, если они видят, что он уже близок к концу.

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

    Эта модель также имеет название «эффект градиента цели». Создайте видимость прогресса для своих пользователей и дайте им ощущение того, что уже совсем скоро они придут к завершающему этапу.

    43. Если в форме много полей — не перегружайте ими пользователя сразу

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

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

    Используя этот простой прием можно удержать внимание человека и довести его до последнего поля в форме.

    44. Знакомьте пользователей с продуктом постепенно

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

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

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

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

    45. Используйте подсказки вместо диалоговых окон

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

    Кроме того, такие окна иногда бывает весьма непросто закрыть, а нередко они и вовсе тормозят выполнение процессов на вашем компьютере.

    И, наконец, диалоговые окна могут отвлечь пользователя от выполнения целевой задачи. Т

    Так почему бы не прибегнуть к помощи более деликатных и менее навязчивых текстовых подсказок непосредственно на странице.

    46. Внедряйте многофункциональные элементы управления

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

    Один из способов, с помощью которого можно сделать UI более удобным — это наделить элементы управления многофункциональностью.

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

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

    Стоит также учесть, что многофункциональность — это далеко не панацея. Хоть она и упрощает интерфейс, но происходит это за счет совмещения функционала разных кнопок, а это может привести к тому, что пользователь вовсе не поймет где находятся те или иные элементы.

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

    47. Используйте подписи для иконок вместо того, чтобы заставлять пользователей додумывать их значение самостоятельно

    Функционал иконок без подписей может быть довольно двусмысленно воспринят пользователями.

    И напротив, сопровождение этих иконок некоторым словесным описанием поможет устранить эту неоднозначность.

    Проблема иконок без подписей становится еще более актуальной в случае, когда человек имеет не так много времени на взаимодействие с интерфейсом.

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

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

    48. Адаптируйте сайт к более живому языку вашей аудитории

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

    49. Вызывайте любопытство у пользователей

    Эта тактика заключается в предоставлении пользователю некоторого «дразнящего» любопытство объема информации.

    Это может быть часть главы книги, которую вы продаете, пробная версия продукта или бесплатный уникальный контент, который несет в себе призыв к действию. Как правило, он звучит как «для того, чтобы увидеть остальное, вам нужно: 1…2…3».

    Такое небольшое «поддразнивание» — это хороший способ подтолкнуть аудиторию к действию.

    50. Давайте пользователям гарантии

    Когда вы подводите пользователей к форме заполнения заказа дайте им некоторые гарантии.

    Например сообщите, что процедура перевода денег 100%-безопасна, доставка для них будет бесплатна и также, что у них есть возможность в течение некоторого времени вернуть свои средства без каких-либо проблем и рисков.

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

    51. Экспериментируйте с форматом подачи цены

    Если вы хотите использовать человеческую иррациональность, то отобразите цену так, чтобы ее можно было оправдать максимально просто.

    Например, она может быть разбита на стоимость за единицу (30 центов за страницу вместо 30 долларов за книгу, или 1 доллар в день вместо 30 долларов за месячный пакет). Также можно использовать цены, заканчивающиеся на «9» вместо того, чтобы их округлять.

    И, наконец, цены могут быть показаны с меньшим количеством цифр (30 долларов вместо 30.00 долларов).

    52. Благодарите пользователей за целевое действие

    Благодарность за завершение какой-либо цепочки действий — это нечто большее, чем просто обратная связь.

    Это также мотивация пользователя к дальнейшему диалогу. Кроме того, это отличная возможность предложить пользователям совершить следующее целевое действие.

    53. Не заставляйте пользователей делать вычисления там, где они могут этого не делать

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

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


    В частности, отметка «3 мин. назад» более целесообразна и требует от пользователей меньше усилий для понимания, чем сообщение вроде «16:37, 2 сентября».

    54. Напоминайте про свободу выбора

    Идея состоит в том, чтобы мотивировать пользователя сделать то или иное действие простой аннотацией, в которой указывается, что «это ваш выбор» или «вы можете отказаться» и т.д.

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

    55. Вырабатывайте привычку ждать ваш контент

    Если у пользователя выработать привычку ждать вашу e-mail рассылку (к примеру), то он будет открывать письма независимо от того, будет там какой-то бонус или нет. Подумайте, как вы можете привлечь пользователей к вашей e-mail рассылке. Это могут быть эффектные заголовки, демонстрация выгоды и бонусов в теме письма и т.д.

    56. Обращайте внимание на наиболее значимые элементы

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

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

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

    57. Давайте пользователям возможность сравнить похожие продукты

    В некоторых ситуациях пользователям бывает полезно показать сравнение продуктов со схожим функционалом (в виде таблицы, например).

    Данная опция, в свою очередь, непосредственным образом влияет на простоту использования UI.

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

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

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

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

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

    58. Предлагайте продукты в наборе

    Часто приобретение набора продуктов мотивирует больше, чем когда они предлагаются по отдельности.

    Также демонстрируя товары или услуги в комплексе можно показать их дополнительные преимущества (например, торт — это нечто большее и лучшее, чем просто отдельные ингредиенты).

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

    И, наконец, мотивация для покупки полного комплекта является по-настоящему сильной, если известно, что количество товаров — ограничено (они находятся в дефиците).

    59. Указывайте на ожидаемые результаты

    Представьте, вы на первом шаге X. Ваш выбор приведет к Y. Вы получите что-то до заданного времени Z.

    Все эти маленькие уточнения в процессе взаимодействия с UI сайта не только информируют пользователей, но и создают доверие к вам.

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

    60. Не бойтесь использовать юмор

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

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

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

    61. Давайте обратную связь

    Когда мы выполняем некоторую задачу, мы хотим убедиться в том, что она была успешно завершена. Для этого используется обратная связь.

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

    С другой же стороны, отсутствие фидбека порождает неопределенность — «все получилось?», «нажал ли я кнопку?», «я должен повторить это снова?».

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

    62. Пробуйте предугадать действия пользователей

    Пользовательский интерфейс, который «догадывается» о последующих действиях пользователя, обычно, приносит больше денег и доверия клиентов.

    Например, в Amazon добились этого на уровне взаимодействия со своим выпадающим меню.

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

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

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

    63. Давайте UI больше пространства, делайте его более читабельным

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

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

    И наоборот, в случае ее отсутствия элементы начинают как будто «смазываться» и сливаться воедино.

    64. Давайте контент в повествовательной форме, не перечисляйте только факты

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

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

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

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

    65. Делайте акцент на своей оригинальности

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

    Другой аспект, который также может стать источником скептицизма, — это отзывы к продуктам.

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

    66. Совершенствуйте UI исходя из опыта получаемого вашими пользователями

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

    Например, некоторые кнопки, расположенные на панели управления, могут быть перемещены немного дальше, с целью освобождения места для другого контента.

    Или, как вариант, словесные обозначения иконок можно скрывать, по мере понимания пользователем их назначения.

    67. Ставьте интересы клиентов выше своих

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

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

    68. Объясняйте, а не вынуждайте пользователей додумывать

    Некоторые вещи, которые нам кажутся очевидными, могут оказаться менее понятными для других.

    Поля ввода являются классическим примером демонстрации данной проблемы — вот где необходимо давать объяснения, описания и подсказки.

    На самом деле, использование объяснений поможет устранить неопределенность при взаимодействии с UI.

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

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

    69. Убирайте всю «воду» из контента на сайте

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

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

    70. Внедряйте адаптивный дизайн вместо статического

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

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

    Самый очевидный способ решения этой проблемы — это внедрение адаптивного дизайна для вашего сайта.

    71. Объясняйте UI с помощью визуальных приемов

    Самым большим разрушителем в UI является двусмысленность, когда что-то имеет смысл отличный от того о котором пользователь подумал изначально.

    Именно поэтому лучше целенаправленно группировать похожие элементы, используя при этом различные размеры шрифтов и различные оттенки.

    Не нужно заставлять пользователя самостоятельно додумывать была ли в том или ином фрагменте UI допущена ошибка или «так и было задумано изначально».

    72. Предоставьте пользователям возможность исправлять свои ошибки

    Предоставление человеку возможности корректировать свои ошибки позволит ему не начинать заново всю цепочку действий.


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

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

    Именно поэтому формы в UI должны разрешать пользователям вносить исправления.

    73. Мотивируйте пользователей с помощью публичных обязательств

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

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

    74. Предоставьте пользователям возможность попробовать сделать что-то снова

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

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

    Поэтому пользовательский интерфейс должен содержать в себе такой функционал.

    75. Предлагайте пользователям небольшой выбор вместо того, чтобы предоставлять слишком много опций

    Чем больше вариантов выбора, тем сложнее принять решение в отношении какого-либо из них.

    Более того, с большим выбором наше чувство удовлетворения рискует уменьшиться, поскольку ожидания, сожаления (в случае неправильного решения), как правило, также возрастают. Предлагайте пользователям 3–5 вариантов продуктов вместо длинных списков опций, в которых легко потеряться.

    Понравились фишки по улучшению графического интерфейса сайта?

    Внедряйте у себя на сайте и делитесь новыми идеями в комментариях.

    Увеличить количество продаж можно и за счет роста трафика сайта. Отправьте заявку и получите консультацию от команды Livepage.

    Юзабилити сайта: понятие, правила и рекомендации по улучшению

    Качественный сайт — это ключевой элемент интернет-маркетинга, от которого зависит степень вовлеченности ЦА и уровень продаж. В процессе создания веб-площадки многие интернет-предприниматели стремятся выделиться за счет умопомрачительного дизайна уймы графических элементов, креативных фотографий, сотни попап-окон. Но при этом забывают о юзабилити web-сайта — более важном критерии эффективности ресурса.

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

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

    Понятие юзабилити веб-сайта: принципы, параметры эффективности

    Что такое «юзабилити» в широком смысле слова? Это степень удобства и полезности чего-либо в процессе достижения конкретных целей. То есть, говоря о сайте, мы подразумеваем, что это — уровень игрового комфорта интерфейса в процессе совершения желаемого целевого действия (покупки, поиска информации, коммуникации). Это также понятность структуры, навигации, наличие тех или иных функций, элементов дизайна.

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

    Итак, ключевые параметры эффективности юзабилити веб-сайта:

    • обучение — возможность быстро разобраться с функционалом сайта;
    • запоминание — сможет ли посетитель вспомнить алгоритм взаимодействия с интерфейсом, если он длительное время не заходил на ваш сайт;
    • ошибки — какие сбои происходят в процессе работы с вашим ресурсом, сколько их, почему они возникают;
    • результат — насколько быстро пользователь может выполнить целевое действие на странице после изучения функционала;
    • практичность — уровень полезности контента конкретно для вашей ЦА;
    • эстетичность — соответствует ли дизайн, графика, цветовые сочетания ожиданиям ЦА, не возникает ли противоречие, отторжение;
    • удовлетворенность — приятно ли пользоваться ресурсом;
    • целостность — это симбиоз всех перечисленных параметров.

    Далее рассмотрим ошибки юзабилити сайта и примеры неудачного оформления.

    Серьезные ошибки, ухудшающие юзабилити

    Улучшение юзабилити сайта неразрывно связано с процессом анализа ошибок, которые являются причиной низкой конверсии.

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

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

    Ошибка 3 . Сложная навигация, структура сайта. Если человек долго не может найти интересующую его информацию, он с большой долей вероятности уйдет к конкурентам. Причем понятие «долго» для посетителя можно выразить в количестве кликов, которые он совершает в процессе поиска нужного контента. Правда, если раньше это число равнялось 3-м кликам, то сегодня пользователь более терпелив и готов кликать 7-12 раз.

    Ошибка 4 . Неинформативный, бесполезный контент заметно портит юзабилити продающего сайта. Это распространенная ошибка многих интернет-бизнесменов, которая приводит к плохому ранжированию поисковиками и потере конверсии. Поэтому… Только полезный контент и только хард-кор!

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

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

    Ошибка 7 . Малоинформативная страница о компании, отсутствие контактов, социальных доказательств. Вашей ЦА важно знать, кто вы, можно ли вам доверять? Открытая информация о компании, руководстве, главных специалистах, их уровне экспертности и достижениях — первый этап формирования доверия. Важно, чтобы такая страница была. Но тут также нужно понимать, что размещать информацию о компании на главной странице — еще одна ошибка, ведущая к низкой конверсии.

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

    Ошибка 9 . Нечитабельный текст, отсутствие полей. Слишком мелкий, крупный, витиеватый шрифт, который сложно читать, выведет из себя даже самого терпеливого. А отсутствие полей, форматирование по высоте и ширине делают текст сплошным полотном, которое визуально отталкивает и заметно снижает скорость чтения.

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

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

    Ошибка 11 . Обязательная регистрация для доступа к информации сайта. Допускается в том случае, если она оправдана конкретной целью (оформление заказа, подписка).

    Чтобы определить слабые места своего ресурса, нужно провести аудит, выявить ошибки — элементы юзабилити, о которые пользователи чаще всего «спотыкаются».

    Как улучшить юзабилити сайта? Рекомендации и советы

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

    Чек-лист юзабилити сайта

    • адаптация сайта под мобильные устройства — заказать продукт, получить информацию, совершить любое действие должно быть одинаково просто как с ПК, так и со смартфона;
    • главная страница понятна, содержит ключевую информацию;
    • все страницы сайта выполнены в едином стиле;
    • лаконичный дизайн;
    • наличие подсказок, объяснения цепочки шагов, ведущих к выполнению целевых действий;
    • активные формы онлайн-поддержки;
    • контакты доступны с любой страницы сайта;
    • информативное меню — только главные пункты (расположение — от главного к второстепенному);
    • названия пунктов меню понятны новому пользователю;
    • все кликабельные элементы выглядят соответственно (выделены, подчеркнуты);
    • понятные призывы к действию (без двусмысленности и воды);
    • значение графических элементов, иконок, заголовков, названий интуитивно понятно;
    • корректная загрузка сайта во всевозможных браузерах.
    • наиболее важные элементы находятся в первом экране;
    • нажатие на логотип ведет на главную сайта;
    • логотип компании расположен в одном и том же месте на каждой странице;
    • аудио и видеофайлы проигрываются только при нажатии, но не автоматически;
    • нет лишней информации (реклама не по теме, мигающие баннеры, гифки);
    • максимально упрощенные целевые формы подписки (запрашивайте только ту информацию, которая вам действительно нужна для взаимодействия с подписчиком);
    • гарантия безопасности (если требуются действия, связанные с заполнением контактных форм, должна быть гарантия защиты от утечки информации, спама, использования данных третьими лицами);
    • прозрачная политика ценообразования — цены на продукты/услуги отображаются;
    • наличие исчерпывающего описания каждого продукта (характеристика, опции, возможности);
    • информация о состоянии корзины, общей сумме заказа и стоимости доставки постоянно видна в процессе работы с сайтом;
    • понятная страница оформления заказа (без отвлекающих элементов);
    • простой и понятный процесс оплаты, а также наличие нескольких популярных вариантов расчета;
    • наличие поиска по сайту;
    • отсутствие пустых страниц и «мертвых» ссылок;
    • информативная страница 404 (нельзя оставлять посетителя один на один с его проблемой — укажите причину ошибки и способ ее решения);
    • кнопки с CTA выглядят привычно, находятся в ожидаемых местах.
    • текст структурирован: заголовки, подзаголовки, маркированные списки, абзацы;
    • текстовые блоки четко отделены друг от друга;
    • наличие белых полей и межстрочных интервалов;
    • размер кегля 14-16 рх;
    • шрифты и форматирование одинаковые на всех страницах сайта;
    • кликабельные части текста выделены синим;
    • ключевая информация подается по F-кривой (по левому краю, вверху, по центру первого экрана);
    • достаточный контраст между текстом и фоном (например, черный на белом);
    • CTA на кнопках — в неопределенной форме глагола (инфинитив): заказать, подписаться, найти.

    Повышение конверсии за счет улучшения юзабилити сайта — вполне реальная и выполнимая задача. Но стоит помнить, что любое «улучшение», которое вы внедряете в интерфейс, должно быть протестировано на ЦА.

    Напишите в комментариях, какие ошибки вы заметили в юзабилити своего сайта? И как планируете его улучшать?

    Хотите поблагодарить за статью? Сделайте репост

    Как улучшить юзабилити сайта?

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

    Итак основные ошибки:

      Музыка на сайте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Мастер Йода рекомендует:  Знакомство с консольными командами в Symfony cron.
    Добавить комментарий