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

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

Статья написана в рамках статейного конкурса 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
      читателей
      Анатолий
      5 месяцев назад
      Дмитрий, спасибо! Отличная статья, доступная пошаговая форма изложения материала.
      -
      1
      +
      Ответить
    • Владислав
      1
      комментарий
      0
      читателей
      Владислав
      5 месяцев назад
      Отличная статья! Очень полезно
      -
      1
      +
      Ответить
    • Гость
      1
      комментарий
      0
      читателей
      Гость
      5 месяцев назад
      Хорошая выжимка
      -
      1
      +
      Ответить
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
    Иван
    1
    комментарий
    0
    читателей
    Полный профиль
    Иван - 1) IT-Agency 2) Пиксели 3) 1ps 4) Ингейт 5) Нетпики
    «Баден-Баден»: как выйти из-под фильтра
    Сергей Дембицкий «Sima-Land.ru»
    16
    комментариев
    0
    читателей
    Полный профиль
    Сергей Дембицкий «Sima-Land.ru» - Скрины Метрики показывать не буду, но мы (sima-land.ru - 1,5 млн. стр. в поиске Яндекс) в сентябре загремели под ББ, в разгар сезона и вышли из-под фильтра, спустя 50 дней, удалив все тексты с сайта: категории + карточки товаров (описание). Трафик с Google только вырос. Тексты возвращать собираемся, но процесс будет длительный, тексты будем теперь писать исключительно полезные, т.к. было больно :-))
    Второе дыхание ссылочного продвижения
    Автопилот
    14
    комментариев
    0
    читателей
    Полный профиль
    Автопилот - Еще лучше, когда продвижение осуществляется комплексно :)
    «Прямая линия» с Александром Алаевым («АлаичЪ и Ко»): отвечаем на вопросы
    Александр Алаев
    13
    комментариев
    0
    читателей
    Полный профиль
    Александр Алаев - Роман. Тут ответ очень простой. Каждый запрос можно четко разделить на коммерческий или некоммерческий. "Купить слона" и его длинные хвосты - коммерческий. "Как выбрать слона" и подобные - информационные. Вот под коммерческие ключи должны быть страницы услуг или каталога товаров. А под информационку - блог. Очень важно не путать их, тем более несоответствующая коммерческим факторам страниц просто не продвинется, то есть по запросу с "купить" блог никогда не будет показываться в выдаче, так же как и страница услуги/товаров не покажется по "как выбрать". Понятно примерно?
    Кейс: продвигаем бизнес по продаже пластиковых окон в Москве
    Иван Стороженко
    5
    комментариев
    0
    читателей
    Полный профиль
    Иван Стороженко - 1. По началу вообще не использовали, сейчас уже много каналов используется. 2. Все может быть, в принципе сайты должны быть удобны для пользователя, для этого и нужна схожесть между собой. Честно говоря старались брать все самое интересное у конкурентов + подкреплять своими идеями.
    Инфографика: самые распространенные SEO-ошибки Рунета
    Dmitro Grunt
    2
    комментария
    0
    читателей
    Полный профиль
    Dmitro Grunt - Кстати, у проектов которые продвигает Нетпик все тайтлы не более 65 символов? Или вы надеетесь что кто то послушает советов и отдаст вам часть трафика? :-)
    Google.ru внесли в реестр запрещенных сайтов
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
    Сердитый маркетолог: как вы сами хороните свой сайт, или 16 принципов, которые нужно усвоить заказчикам SEO
    Анна Макарова
    313
    комментария
    0
    читателей
    Полный профиль
    Анна Макарова - Artem Sergeev, ваш комментарий удален за агрессивный настрой и безосновательные обвинения. Держите себя в руках!
    «Прямая линия» с Артуром Латыповым: отвечаем на вопросы
    God Koss
    1
    комментарий
    0
    читателей
    Полный профиль
    God Koss - Добрый день! Есть сайты одной компании продвигающиеся в разных странах. .ru .com .net. На российском сайте два языка ru и en, на остальных до 10 языков. Недавно сайт ru по основному брендовому запросу выпал из выдачи Яндекс но после апа вернулся на вторую позицию. На вопрос аффилирования в тех поддержку, получит ответ, что всё в порядке и сайт com не учавствует в выдаче. Но он есть и занимает 1 место. Как быть в данной ситуации? Так же, после возврата в топ 10 по этому запросу зашла еще одна внутренняя страница. Могло ли это случиться из-за каннибализации запроса? Немного изменил description на внутренней, исключил вхождения брендового запроса. Жду апа. Хотел бы услышать ваше мнение. Заранее благодарю!
    Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
    Serhii Diachenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Serhii Diachenko - Спасибо Бернис!
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    313
    Комментариев
    262
    Комментариев
    229
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    55
    Комментариев
    54
    Комментариев
    52
    Комментариев
    49

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