×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
11 46164
Подпишитесь на нас в Telegram

Статья написана в рамках статейного конкурса 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

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

    Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772
    Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.

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


    Новые 
    Новые
    Лучшие
    Старые
    Сообщество
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.
    Отправить отзыв
    • Аяз Алиев
      4
      комментария
      0
      читателей
      Аяз Алиев
      больше года назад
      Здравствуйте! Мы занимались разработкой сайта можете
      оценить работу, дизайн, адаптивность, ссылка на статью про сайт
      style.kz/company/blog/razrabotka-saita-stal-treyd/
      -
      -2
      +
      Ответить
    • Сергей Удовенко
      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
    Альманах фатальных ошибок b2b-сайта: как владельцы бизнеса обрекают сайты на бесславное существование. Часть первая
    Сергей Ерофеев
    3
    комментария
    0
    читателей
    Полный профиль
    Сергей Ерофеев - Спасибо за комментарий! Вы правы, если за CMS следит заинтересованный профессионал - риски минимальны. Но мы же с вами понимаем, что: а) Не каждый разработчик делает все, как "для себя". б) После создания сайта разработчик редко остается на проекте в) Часто разработчик не является маркетологом. В этом случае принцип "функционал работает и этого достаточно" может быть на первом месте. Мы тоже видели большое количество хороших и качественных проектов на бесплатных CMS, но проблемных проектов мы видели сильно больше. Просто статистика.
    Белые и серые методы продвижения. Тренды 2023
    sarges
    2
    комментария
    0
    читателей
    Полный профиль
    sarges - Нужно учитывать и тот факт, что со временем методы продвижения меняются и необходимо подстраиваться под новые реалии. Посоветую заглянуть на zenlink.ru/blog/kak-izmenilsja-internet-marketing-za-10-let и почитать статью, там рассказывается о том, как изменился интернет-маркетинг за последние 10 лет, какие сейчас тенденции и какие прогнозы в этой сфере.
    Почему сайтам нужно переезжать с конструкторов на полноценные CMS
    Seodm.ru
    3
    комментария
    0
    читателей
    Полный профиль
    Seodm.ru - Ааа по мне, сам seo специалист, вероятность внедрения необходимого контента на тильда того же блока этапом работы или преимуществ, намного выше чем на движке. А что тильда что движок малый бизнес норм продвигается особо супер разработки не требуется
    Как мы увеличили для клиента трафик из поиска в 7 раз. Кейс
    Кирилл Половников
    2
    комментария
    0
    читателей
    Полный профиль
    Кирилл Половников - Оба этих статуса (редирект и малополезная) преобладали в качестве проблем с индексацией. Помогла работа с .htaccess (в нем были ошибки и его чистили), работа над корректировкой редиректов, каноникалами и прочими техническими ошибками. Нельзя сказать, что только редиректы были ключевым препятствием.
    Как показывать рекламу посетителям сайтов конкурентов
    Павел
    2
    комментария
    0
    читателей
    Полный профиль
    Павел - Спасибо за комментарий. Гипотеза была в том, что с указанными счетчиками конкурентов показы будут не просто похожей аудитории их сайтов (как при рекламе по доменам), а именно на аудиторию которую Яндекс для себя разметил как целевая дл сайтов конкурентов. Важно, это гипотеза. А про белые нитки, как говорится, доверяй, но проверяй))
    Как автоматизировать мессенджеры для бизнеса в CRM-системе
    Алиналина
    1
    комментарий
    0
    читателей
    Полный профиль
    Алиналина - Кстати да. Но мы зарегались, CRMка реально интересная
    Чек-лист: как настроить рекламу в Яндекс Директе и избежать ошибок
    Сергей Ильин
    2
    комментария
    0
    читателей
    Полный профиль
    Сергей Ильин - я ваще не туда написал
    Кейс MediaNation: увеличили еженедельный трафик автомобильной компании на 50% за год и вышли в топ поиска по 300 запросам
    Игорь Скляр
    1
    комментарий
    0
    читателей
    Полный профиль
    Игорь Скляр - Действительно, изначально рост был именно по информационным запросам. Но рост позиций и трафика по информационным запросам положительно повлиял и на связанные позиции по коммерческим запросам и сдвинул видимость с мёртвой точки
    Как продвигать интернет-магазин в поисковой выдаче, если она забита маркетплейсами
    Олег
    1
    комментарий
    0
    читателей
    Полный профиль
    Олег - Так как все-таки продвигать?)
    Как попасть в топ-10 Яндекса и Google при продвижении сайта на регион Молдовы
    Гость
    9
    комментариев
    0
    читателей
    Полный профиль
    Гость - "В первое время наши работы продолжали давать результат (сайт несколько месяцев рос), а потом начал постепенно терять позиции. По этой причине заказчик решил возобновить сотрудничество и вернулся в июле 2022. Мы еще ведем работы по восстановлению утраченных результатов." Хитрожопый клиент.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    385
    Комментариев
    373
    Комментариев
    262
    Комментариев
    249
    Комментариев
    171
    Комментариев
    156
    Комментариев
    141
    Комментариев
    121
    Комментариев
    116
    Комментариев
    100
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    77
    Комментариев
    74
    Комментариев
    67
    Комментариев
    64
    Комментариев
    60
    Комментариев
    59

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