Как улучшить UX сайта — 12 советов по юзабилити > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Как улучшить UX сайта — 12 советов по юзабилити

Как улучшить UX сайта — 12 советов по юзабилити

< >

Клиенты довольно часто спрашивают: «Зачем вы, SEO-специалист, даете рекомендации по дизайну и юзабилити?». Все просто. Вне зависимости от уровня оптимизации пользователь сразу покинет сайт, если он неудобен. Подтверждающее правило исключение — тематики со слабой конкуренцией. Верно и обратное: проработка вопросов юзабилити может улучшить поведенческие факторы и, как результат, — видимость сайта. За несколько лет работы я собрал ряд заметок и наблюдений по улучшениям в сфере юзабилити, которые действительно оказывают влияние на показатели сайта. 

1. Меню и навигация по сайту

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

1.1. Где использовать горизонтальное меню?

Такое меню органично смотрится на сайтах, посвященных одной определенной тематике, или корпоративных порталах.

Плюсы:

  • занимает меньше места, чем вертикальное;
  • не нужно скроллить.

Минусы:

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

1.2. Где использовать вертикальное меню?

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

Плюсы:

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

Еще один вопрос, связанный с вертикальным меню: где именно его разместить?

1.2.1. Зачем размещать вертикальное меню слева?

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

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

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

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

1.2.2. Зачем размещать вертикальное меню справа?

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

Известный в среде интернет-маркетологов блог Devaka.ru

2. Какие шрифты использовать

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

Читайте по теме:

2.1. Семейство гарнитур

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

Распределение операционных систем в мире. Данные 2014 года

Пользователям Windows хорошо знакомы гарнитуры Arial, Tahoma, Verdana, Times New Roman, Georgia, Courier а также множество других, нестандартных шрифтов. Они установлены по умолчанию. На UNIX-платформах используются их аналоги. Правда, выглядят эти шрифты не совсем так, как в Windows, да и не для каждого нестандартного шрифта найдется соответствующий аналог.

Позвольте, спросите вы, но причем здесь сайты? Дело в том, что при загрузке сайта обычно никто не заливает на сервер файл со шрифтами. Из-за этого текст, набранный Arial, для пользователей Ubuntu, например, будет отображаться по-другому, чем для пользователей Windows.

Читайте по теме: Шрифты, общие для всех (актуальных) версий Windows, и их Mac-эквиваленты.

Самое простое решение вопроса — использовать шрифты из Google Fonts. Их легко подключать, кроме того, среди них нет некачественных гарнитур. Базовая рекомендация — сочетать для заголовка/основного текста шрифты с засечками/без засечек. Например, Antiqua для основного текста и Grotesque для заголовков. Еще несколько удачных, на мой взгляд, комбинаций из Google Fonts: Open Sans + Lora:

PT Sans + PT Serif:

PT Serif + Open Sans:

2.2. Вертикальный ритм текста

Помните, вы в школе писали в тетрадях в прямую линейку?

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

Высота элементов кратна высоте строки. Например, заголовок H1 — три высоты строки, H2 и H3 — две высоты строки. Пример соотношения размеров заголовков и текста в CSS:

h1 {font-size:36px; line-height:48px; margin:24px 0;}h2 {font-size:30px; line-height:48px; margin:24px 0;}h3 {font-size:24px; line-height:24px; margin:24px 0;}p {font-size:16px; line-height:24px; margin:24px 0;}

Здесь для простоты значения указаны в пикселях. На пpaктике обычно используют относительные единицы «em» или «rem». Так будет выглядеть текст с данным оформлением:

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

Например:

2.3. Как выбрать нужный контраст шрифта и фона?

Хороший контраст:

Плохой контраст:

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

Рекомендую использовать цвет шрифта от #000 до #333.

2.4. Оптимальная длина строки

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

2.5. Оформление ссылок

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

3. Когда стоит использовать кнопки?

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

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

3.1. Где расположить кнопку?

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

Диаграмма Гутенберга показывает ориентацию взгляда пользователя

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

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

Суммируем все рекомендации:

  1. Используйте горизонтальное меню на сайтах, посвященных одной определенной тематике, или корпоративных порталах.
  2. В горизонтальном меню более важные пункты размещайте слева.
  3. Используйте вертикальное меню для крупных интернет-магазинов или порталов с большим количеством разделов.
  4. Если аудитория сайта постоянна и растет незначительно, меню стоит расположить справа, так как большинство пользователей уже знакомы с разделами сайта.
  5. Используйте шрифты из Google Fonts для обеспечения единообразного отображения на разных платформах (Windows, Mac, UNIX).
  6. Сочетайте для заголовка/основного текста шрифты с засечками/без засечек.
  7. При верстке сайта рекомендуется задавать такой размер шрифтов и междустрочный интервал, чтобы все элементы текста вписывались в горизонтальную сетку. Таким образом соблюдается вертикальный ритм текста.
  8. Для проверки контраста шрифта/фона сделайте скриншот страницы и переведите картинку в оттенки серого в любом редакторе. Если текст по-прежнему легко прочитать, то контраст достаточный.
  9. Чтобы читатель не уставал, рекомендуется задавать длину строки на десктопе в 60-75 символов.
  10. Используйте выравнивание текста по левой стороне экрана, чтобы избежать появления слишком больших пробелов между словами при отображении на мобильных устройствах.
  11. Никогда не используйте нижнее подчеркивание для выделения текста.
  12. Кнопки с важными CTA рекомендуется располагать справа, в четвертом квадрате по диаграмме Гутенберга.

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



Комментарии:

Восемь советов успешного запуска рекламной кампании в myTarget

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

27 02 2024 0:59:22

Кейс по снятию автоматического фильтра Яндекса: возврат трафика за 44 дня

Кейс по снятию автоматического фильтра Яндекса: возврат трафика за 44 дня На одном из проектов был успешный рост трафика и транзакций, но в следующем месяце видимость по Яндексу снизилась до 30% и продолжала жестоко падать. ТИЦ упал с 450 до 425....

26 02 2024 8:25:17

Всё, что вы хотели узнать про краудфандинг, но стеснялись спросить

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

25 02 2024 17:13:26

Что объединяет в себе понятие ремаркетинг

Что объединяет в себе понятие ремаркетинг Подробнейшая статья об эффективном использовании ремаркетинга. Мотаем на ус!...

24 02 2024 16:58:29

Системные улучшения Netpeak — демо услуг PPC, чат любителей блога и сервис поиска ошибок рекламных кампаний в Cluster

Новости, доработки и обновления в услугах, блоге, Академии блога и Кластере....

23 02 2024 3:25:46

Как B2B-стартап с помощью партнерской программы увеличил доход на 1983% за 6 месяцев

Как B2B-стартап с помощью партнерской программы увеличил доход на 1983% за 6 месяцев Создание успешного стартапа в нише телемедицины. Без дополнительных трат увеличил за 6 месяцев доход на 1983%, а клиентскую базу — более чем на 1000%....

22 02 2024 23:50:42

Кейс по SEO-продвижению сайта в тематике «эко-товары и натуральная косметика»: ROMI 129%

SEO-продвижение сайта, торгующего натуральной косметикой...

21 02 2024 2:33:45

Обновление Яндекс.Директ Коммaндер — обзор бета-версии

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

20 02 2024 11:38:35

Как рекламировать криптовалюты — 10 советов предпринимателям

Как рекламировать криптовалюты — 10 советов предпринимателям Как сформировать правильную стратегию продвижения и сфокусировать внимание на получении прибыли...

18 02 2024 21:42:38

Рекламные кампании для масштабирования бизнеса в интернете

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

17 02 2024 5:49:22

Продвинутый подход к работе с аудиториями Facebook

Продвинутый подход к работе с аудиториями Facebook В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...

16 02 2024 8:23:41

Как работать с аудиториями Google Ads в наблюдении

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

15 02 2024 5:26:41

Как автоматизировать PPC-отчетность с помощью языка R, Google Таблиц и Data Studio

Как автоматизировать PPC-отчетность с помощью языка R, Google Таблиц и Data Studio Новый способ автоматизации процессов при настройке аналитики больших объемов данных....

14 02 2024 19:55:14

Где бесплатно разместить ссылки — площадки для продвижения

Где бесплатно разместить ссылки — площадки для продвижения Как найти релевантный сайт-донор для размещения своей ссылки...

13 02 2024 19:27:46

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

Какие данные о пользователях можно собирать сайтам, а какие — нет General Data Protection Regulation (GDPR): ответы на вопросы....

12 02 2024 12:14:50

Как настроить динамический ремаркетинг в Google Рекламе без Google Merchant Center

Как настроить динамический ремаркетинг в Google Рекламе без Google Merchant Center Создаем фид товаров, настравиваем код и списки динамического ремаркетинга для интернет-магазинов в странах, где отсутствует Google Merchant Center....

11 02 2024 10:33:31

Какую стратегию использовать для продвижения интернет-магазина

Какую стратегию использовать для продвижения интернет-магазина Что нужно делать на старте работ с интернет-магазином и как минимизировать риски для бизнеса онлайн, используя такие инструмента как SEO, PPC и Email-маркетинг — советы от эксперта. Читать дальше!...

10 02 2024 1:12:46

Зрители Big Money и Артем Бородатюк предложили свои советы по ведению бизнеса

Зрители Big Money и Артем Бородатюк предложили свои советы по ведению бизнеса Советы бизнесу от зрителей Big Money и Артема Бородатюка. Предлагаем 11 универсальных, но простых и понятных идей....

09 02 2024 8:30:45

Обзор Netpeak Spider 3.0: краткая версия

Обзор Netpeak Spider 3.0: краткая версия Обзор новой версии краулера Netpeak Spider 3.0, которая включает в себя около 300 изменений: от супер-фич до небольших фиксов в юзабилити....

08 02 2024 4:23:10

Реклама для интернет-магазина техники — запуск видеокампаний TrueView for Shopping и TrueView for Action

Реклама для интернет-магазина техники — запуск видеокампаний TrueView for Shopping и TrueView for Action Как рекламировать смартфоны в YouTube — советы крупному бизнесу по настройке и запуску эффективной рекламы. Важно: корректный анализ результатов. Узнайте как его сделать!...

07 02 2024 6:12:55

Как правильно продвигать приложение в странах арабского мира

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

06 02 2024 21:34:24

Система Планфикс — SaaS-система управления проектами

Система Планфикс — SaaS-система управления проектами Ситема управления проектами, которой пользуются в Netpeak....

04 02 2024 0:59:10

Как улучшить UX сайта — 12 советов по юзабилити

Как улучшить UX сайта — 12 советов по юзабилити Какие фишки влияют на видимость сайтов? Советы по юзабилити от SEO-специалиста....

03 02 2024 5:25:51

Как масштабировать блог: успешный кейс роста блогов Serpstat до 300 000 ежемecячных сессий и $100 000 годового дохода

Как масштабировать блог: успешный кейс роста блогов Serpstat до 300 000 ежемecячных сессий и $100 000 годового дохода Личный опыт маркетинг-директора Serpstat. Внутренняя перелинковка, работа с контентом, настройка email-рассылок и построение качественного комьюнити помогли нам получить стабильный поток читателей и новых пользователей. Обо всем читайте дальше!...

02 02 2024 3:32:34

Шесть блестящих примеров видеоконтента в B2B (и почему они так хороши)

Шесть блестящих примеров видеоконтента в B2B (и почему они так хороши) Перевод статьи Никки Джиллиленд из Econsultancy об уроках для маркетологов про то, каким должно быть хорошее видео. Узнайте 4 правила эффективного видеоконтента прямо сейчас!...

01 02 2024 12:27:51

Дропшиппинг: как за два месяца снизить стоимость привлечения лида на 25%

Дропшиппинг: как за два месяца снизить стоимость привлечения лида на 25% Дропшип предполагает минимум затрат со стороны предпринимателя. Например, не нужно думать о логистике, держать склад. Можно минимизировать и траты на рекламу. Узнать как!...

31 01 2024 22:35:29

Чаты для бизнеса от Яндекс: руководство по настройке

Чаты для бизнеса от Яндекс: руководство по настройке Идеи для интернет-маркетологов, как получить дополнительные каналы трафика и сделать заметным сниппет в поисковой выдаче....

29 01 2024 5:33:20

Редизайн писем в email-маркетинге — на что обратить внимание

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

28 01 2024 3:37:21

Миллион сеансов в месяц на AMP-страницы в E-commerce

Миллион сеансов в месяц на AMP-страницы в E-commerce Как Bigl.ua внедрили AMP и остались очень довольны результатом....

27 01 2024 4:54:38

Где бесплатно скачать иконки для сайта (пиктограммы)

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

26 01 2024 2:54:26

Как увеличить продажи на 75% с помощью внутренней оптимизации сайта — кейс maxi.az

Как увеличить продажи на 75% с помощью внутренней оптимизации сайта — кейс maxi.az Увеличение трафика из поисковых систем Азербайджана на 30% за три месяца. И он продолжает расти...

25 01 2024 22:24:41

Блог Netpeak 2.0 — мы всё поменяли, и вот почему

Блог Netpeak 2.0 — мы всё поменяли, и вот почему Блог на новом движке и с новым дизайном, перетянувший в себя огромное количество постов и комментариев за Х лет своей работы...

24 01 2024 7:29:59

Сленг — словарь в помощь бумерам для работы со стартаперами и маркетологами

Сленг — словарь в помощь бумерам для работы со стартаперами и маркетологами Слорварь сленга, без которого к 25-летним не подходи...

23 01 2024 8:30:49

Бизнес-фреш: Дэвид и Кестрел Ли о «нешелковом» пути западных брендов к сердцам пользователей в Китае

Бизнес-фреш: Дэвид и Кестрел Ли о «нешелковом» пути западных брендов к сердцам пользователей в Китае Покупать в Китае. Как брендам покорить сердца и кошельки китайских пользователей...

22 01 2024 14:42:24

HTML5 объявления в Google Рекламе

HTML5 объявления в Google Рекламе Flash онлайн объявлений в формат HTML5: нововведение гугл рекламы...

21 01 2024 8:40:16

Влияют ли негативные комментарии на эффективность рекламы в Facebook? Тест на $1000

Помогают ли комментарии повысить эффективность рекламных постов? Единственный способ выяснить наверняка — провести A/B-тестирование в Facebook. Спойлер: тональность комментария также имеет значение в Facebook...

20 01 2024 4:50:42

Путь от обычного сайта до интернет-магазина — история Сергея Бабенышева и бизнеса Tricolor

Путь от обычного сайта до интернет-магазина — история Сергея Бабенышева и бизнеса Tricolor C какими сложностями пришлось столкнуться при создании интернет-магазина....

19 01 2024 9:38:25

Контекстная реклама интернет-магазина автотоваров — как снизить траты и увеличить ROMI на 772%

Контекстная реклама интернет-магазина автотоваров — как снизить траты и увеличить ROMI на 772% Изучаем на примере тестирования товарных кампаний в момент смены логотипа и ренейминга...

18 01 2024 5:44:24

Что дешевле в Украине: Google Ads или Директ — исследование Netpeak

Что дешевле в Украине: Google Ads или Директ — исследование Netpeak Украинские реалии того, в каких тематиках трафик из Yandex.Direct дороже Google Ads. Новое исследование Алексея Селезнева....

17 01 2024 2:16:29

Статистика и аналитика аккаунта в Twitter — полезные инструменты

Статистика и аналитика аккаунта в Twitter — полезные инструменты Твиты, реплаи, ретвиты - как сделать правильные выводы из активности в Twitter? Об этом читайте в нашем посте....

16 01 2024 6:51:48

7 признаков хорошего отдела по работе с клиентами

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

15 01 2024 14:44:19

White paper: что за маркетинговый зверь?

Хороший пост с примерами продающих «Белых книг»....

14 01 2024 2:58:39

Сколько стоил клик Google Ads и Facebook в Украине во втором квартале 2018 года

Сколько стоил клик Google Ads и Facebook в Украине во втором квартале 2018 года Ежеквартальное исследование Netpeak по стоимости клика...

13 01 2024 15:35:29

Как настроить AdWords Express в 4 шага и в чем секрет этой системы

Как настроить AdWords Express в 4 шага и в чем секрет этой системы Настройка в четыре шага и другие отличия AdWords Express от Adwords...

12 01 2024 1:14:33

Сколько получают интернет-маркетологи? Обновленный рейтинг зарплат специалистов

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

11 01 2024 23:10:59

Как отслеживать конверсии в Google Рекламе

Как отслеживать конверсии в Google Рекламе В арсенале Google Рекламы есть очень ценный инструмент — отслеживание конверсий....

10 01 2024 6:35:38

Пять вопросов для проверки софт-скиллз в IT

Пять вопросов для проверки софт-скиллз в IT Как узнать, что потенциальный сотрудник креативный, умеет убеждать, работать в комaнде, адаптироваться к быстрой смене условий, владеет эмоциональным интеллектом? Вопросы для проверки этих софт-скиллов здесь....

09 01 2024 19:16:11

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::