Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
8 Июня 2017 в 12:30

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

10 9540
Дмитрий Карпушин
Специалист по юзабилити, веб-аналитик компании Original Works, автор блога,
DiKosmos.ru

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

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

    10 комментариев
    Подписаться 
    Подписаться на дискуссию:
    E-mail:
    ОК
    Вы подписаны на комментарии
    Ошибка. Пожалуйста, попробуйте ещё раз.
    • Сергей Удовенко
      1
      комментарий
      0
      читателей
      Сергей Удовенко
      2 недели назад
      Статья замечательная, но у меня вопрос касательно расположения логотипа и длинного названия организации, например "Государственное учреждение дополнительного масштабного производства "Государственное производство мягких игрушек республики плюша"? Основная проблема, нельзя использовать сокращение. Как в таком случае сохранить юзабилити?
      -
      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
      читателей
      Гость
      6 месяцев назад
      Хорошая выжимка
      -
      1
      +
      Ответить

    Отправьте отзыв!
    X | Закрыть