Россия+7 (495) 960-65-87

Современное юзабилити сайтов: как оформить сайт, чтобы не потерять посетителей

Россия+7 (495) 960-65-87
Шрифт:
10 34462

Статья написана в рамках статейного конкурса Serpstat и SEOnews

Условия конкурса

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

  • Что размещать на главной странице?
  • Сколько в меню выводить категорий товаров?
  • В какой последовательности расположить пункты меню и т.д.

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

Какие элементы сайта рассматриваем в статье


Какие элементы сайта рассматриваем в статье.png

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

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

Навигация – наравне с веб-формами таит в себе множество нюансов и требует тщательной проработки.

Графические элементы – а вы бы купили товар/заказали услугу по одной только картинке с этого раздела? Если нет, читаем и внедряем.

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

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

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

«Шапка» или хедер

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

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

Высота шапки не должна быть слишком большой.png

  • В шапке должны располагаться логотип компании и слоган-подстрочник. Желательно расположить логотип с левой стороны и установить на него ссылку на главную страницу. Такое расположение логотипа уже стало негласным отраслевым стандартом.

Слоган-подстрочник – это краткое описание того, чем занимается компания. Такая надпись легко доносит до нового посетителя основную деятельность компании.

В шапке должны располагаться логотип компании и слоган-подстрочник.png

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

В «шапке» должны присутствовать контактные данные.png

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

В шапке полезно разместить кнопки для вызова формы заявки.png

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

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

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

Навигация

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

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

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

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

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

Несколько уровней вложенности.png

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

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

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

    Просто плохо

    У компаний, занимающихся видеонаблюдением огромные каталоги. Из-за этого меню превращается в сплошной текст.png

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

    Хорошо

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

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

    Здесь реализация очень удачная и удобная.png

    Здесь реализация очень удачная и удобная.

    Веб-формы

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

    • В форме должно быть минимум полей (если поле нужно сделать обязательным, то объясняем «почему»).
    • Указываем пример заполнения поля (формат номера телефона, адреса и т.д.).

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

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

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

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

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

    Плохо

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

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

    Хорошо

    Одно обязательное поле аккуратно сверстано, присутствует поле для уточнения, если нужно.png

    Одно обязательное поле аккуратно сверстано, присутствует поле для уточнения, если нужно.

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

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

    «Подвал» или футер

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

    Так, здесь размещаем:

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

    Плохо

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

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

    Хорошо

    Достаточно спорное оформление «подвала», но в целом от такой реализации больше плюсов. Заметьте, как много свободного места при таком количестве элементов. Здорово.png

    Достаточно спорное оформление «подвала», но в целом от такой реализации больше плюсов. Заметьте, как много свободного места при таком количестве элементов. Здорово!

    Графика

    О графике вам следует знать следующее: мозг воспринимает графическую информацию в несколько раз быстрее, чем написанную текстом. Лучше один раз увидеть, чем 100 раз услышать, помните эту поговорку?

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

    • Используйте только качественные фотографии.
    • Используйте уникальные фотографии (для SEO – это тоже плюс). Не используйте стоковые фотографии.

    Стоковые фотографии не несут необходимой информации о компании.png

    Стоковые фотографии не несут необходимой информации о компании.

    • Картинка должна продавать.

    Картинка должна продавать.jpg

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

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

    Адаптивная верстка

    Посмотрите на диаграмму выше.png

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

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

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

    Плохо

    У сайта горизонтальная прокрутка, элементы слишком мелкие, адаптация отсутствует.png

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

    Хорошо

    Удобный сайт, адаптированный под мобильные устройства.png

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

    Для чего следует улучшать юзабилити сайта?

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

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

    Рассмотрим простой пример:

    Пример 1.png

    Пример 12.png

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

    Вместо заключения

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

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

    Усложнять - просто Упрощать - сложно.jpg

    Удобных сайтов, больших конверсий, счастливых клиентов! 

    (Нет голосов)
    Читайте нас в Telegram - digital_bar

    Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


    Новые 
    Новые
    Лучшие
    Старые
    Сообщество
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.
    Отправить отзыв
    • Сергей Удовенко
      1
      комментарий
      0
      читателей
      Сергей Удовенко
      больше года назад
      Статья замечательная, но у меня вопрос касательно расположения логотипа и длинного названия организации, например "Государственное учреждение дополнительного масштабного производства "Государственное производство мягких игрушек республики плюша"? Основная проблема, нельзя использовать сокращение. Как в таком случае сохранить юзабилити?
      -
      1
      +
      Ответить
      • Дмитрий Карпушин
        5
        комментариев
        0
        читателей
        Спасибо за теплый отзыв!

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

        В подстрочнике не обязательно должно быть полное название организации или вообще название органи...
        Спасибо за теплый отзыв!

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

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

        Я бы предложил оставить такой вариант: "Государственное производство мягких игрушек"
        Если слово "Государственное" не несет никаких особенностей для клиента (льготы при заказе например), то его тоже можно опустить.

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

        2. Если сократить надпись всё-таки никак не получается, то можно подстрочник расположить в шапке отдельным блоком. Примерно так: joxi.ru/gmvv8MlSLWZQ7m
        или вот так: joxi.ru/n2YaepXtoPnnb2

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

        Серей, надеюсь мне удалось натолкнуть вас на какую-либо идею.
        -
        0
        +
        Ответить
    • Анастасия Кутейникова
      1
      комментарий
      0
      читателей
      Анастасия Кутейникова
      больше года назад
      Адаптировать сайт также необходимо под экран компьютера. Часто попадала на сайты, где навязчивые кнопки "Закажи звонок" или чаты перекрывают необходимые мне пункты меню в подвале. А когда мы в userpoint.ru проводим видео-тестирования сайтов с реальными людьми, даже среди 5-10 человек встречаются те, у кого старый неширокий экран. В итоге, юзабилити сайта сильно снижается. Так что про это тоже можно было упомянуть в статье.
      -
      1
      +
      Ответить
      • Дмитрий Карпушин
        5
        комментариев
        0
        читателей
        Согласен с вами, Анастасия.

        В счетчиках Яндекс Метрика и Google Analytics можно посмотреть отчёты о разрешениях экранов за продолжительный период и выделить самые популярные разрешения аудитории сайта.

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

        Однако, замечу, что проверку ...
        Согласен с вами, Анастасия.

        В счетчиках Яндекс Метрика и Google Analytics можно посмотреть отчёты о разрешениях экранов за продолжительный период и выделить самые популярные разрешения аудитории сайта.

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

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

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

        Пользователи - наше всё! Удобных сайтов, высоких конверсий, довольных клиентов!
        -
        0
        +
        Ответить
    • Анатолий
      1
      комментарий
      0
      читателей
      Анатолий
      больше года назад
      Дмитрий, спасибо! Отличная статья, доступная пошаговая форма изложения материала.
      -
      1
      +
      Ответить
    • Владислав
      1
      комментарий
      0
      читателей
      Владислав
      больше года назад
      Отличная статья! Очень полезно
      -
      1
      +
      Ответить
    • Гость
      1
      комментарий
      0
      читателей
      Гость
      больше года назад
      Хорошая выжимка
      -
      1
      +
      Ответить
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Сколько ссылок помогут продвинуть молодой сайт
    Павел Андрейчук
    37
    комментариев
    0
    читателей
    Полный профиль
    Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
    Сайт на WordPress: за и против
    Мира Смурков
    1
    комментарий
    0
    читателей
    Полный профиль
    Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
    Обзор популярных CMS: плюсы и минусы
    Андрей Литвиненко
    2
    комментария
    0
    читателей
    Полный профиль
    Андрей Литвиненко - + там где нужно прописать каноникал, там где нужно поставить мета тег ноиндекс (т.к. Гугл не всегда следует правилам robots.txt) ну и то что выше, к техническим сео возможнлстям можно еще отнести легкое и хотя бы полуавтоматическое добавление микроразметки по сайту, увы "из коробки" такого функционала нет ни в одной cms, все на допиливаниях
    Google обошел Яндекс по популярности в России в 2018 году: исследование SEO Auditor
    Рамблер
    1
    комментарий
    0
    читателей
    Полный профиль
    Рамблер - Вот вроде отечественный - это сказано верно.. «Я́ндекс» — российская транснациональная компания, зарегистрированная в Нидерландах. Так говорится в Википедии. И с хрена ли ОТЕЧЕСТВЕННЫЙ поисковик зарегистрирован в Европе? И где платится основная часть налогов? Ну-ууу, точно не в России. И если запахнет жаренным, то был Яндекс и нет Яндекса!
    8 методик в SEO, от которых давно пора отказаться
    Евгений Сметанин
    12
    комментариев
    0
    читателей
    Полный профиль
    Евгений Сметанин - Факторов вообще очень много, согласитесь, вы будете использовать максимальное их количество, особенно, если в ТОПе засели агрегаторы с сумасшедшими ПФ. В таких случаях, вхождение ключа в домен для маленького профильного сайта, сыграет свою положительную роль. Конечно же, если контент на страницах хорошего качества. У меня есть несколько успешных кейсов на эту тему. На сайте продают несколько видов товаров, а выстреливает в ТОП тот, название которого присутствует в доменном имени. Как корабль назовешь, так он и поплывет, верно?))
    Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
    Roman Gorkunenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
    Сергей
    1
    комментарий
    0
    читателей
    Полный профиль
    Сергей - Добрый день! Спасибо за статью, полезный материал! Могли бы подробнее расписать, как настроить вывод Гугл Таблиц с привязкой к отчетному периоду? Заранее спасибо!
    Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
    Дмитрий
    11
    комментариев
    0
    читателей
    Полный профиль
    Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
    Как выбрать подрядчика для продвижения сайта: 7 уровней воронки поиска
    aashutosh
    1
    комментарий
    0
    читателей
    Полный профиль
    aashutosh - data science training institute in noida- Webtrackker Technology (8802820025) providing Data Science Training in Noida. Get ✓ 40 Hours Learning training✓ 70 Hrs Projects ✓ 24 X 7 Support ✓ Job Assistance. WEBTRACKKER TECHNOLOGY (P) LTD. C - 67, sector- 63, Noida, India. E-47 Sector 3, Noida, India. +91 - 8802820025 0120-433-0760 +91 - 8810252423 012 - 04204716 EMAIL:info@webtrackker.com webtrackker.com/Best-Data-Science-Training-Institute-in-Noida.php
    Как построить качественный ссылочный профиль на основе конкурентов
    Ирина
    2
    комментария
    0
    читателей
    Полный профиль
    Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    345
    Комментариев
    262
    Комментариев
    247
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    101
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55

    Отправьте отзыв!
    Отправьте отзыв!