Как улучшить 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ктике влияющие на поведенческие факторы сайта, оставляйте комментарии. Обсудим :)



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

Как быстро подобрать темы для информационных статей

Как быстро подобрать темы для информационных статей Как за один час собрать самые популярные темы для информационных статей с помощью Serpstat и Key Collector?...

19 07 2025 9:15:41

Почему Netpeak стал лидером среди IT-работодателей Украины

Почему Netpeak стал лидером среди IT-работодателей Украины Руководитель отдела HR, Ольга Пачесная, написала пост о главном — людях, которые выбрали работу в Netpeak....

18 07 2025 20:16:47

Как запустить торговые кампании в Bing Ads

Товарные объявления торговых кампаний заметнее в выдаче, да и показываться будут и в Bing, и в Yahoo, и в AOL...

17 07 2025 3:31:35

Подмена текста с помощью GTM — как быстро изменить контент на сайте

Подмена текста с помощью GTM — как быстро изменить контент на сайте Если вам нужно быстро изменить небольшой объем контента на сайте без доступа к CMS, можно воспользоваться GTM. Как именно, читайте дальше....

16 07 2025 15:15:17

Как продвигать онлайн-бизнес в Казахстане — видеоконспект семинара Netpeak Friends Day

Как продвигать онлайн-бизнес в Казахстане — видеоконспект семинара Netpeak Friends Day Лекции о ключевых этапах развития бизнеса в интернете: от создания сайта до подсчета ROMI (возврат маркетинговых инвестиций) рекламных каналов...

15 07 2025 8:52:59

Как получать удовольствие от жизни. Советы из книги «Поток»

Как получать удовольствие от жизни. Советы из книги «Поток» Психологический бестселлер. Как достичь гармонии во всех делах и начать получать удовольствие от жизни, — об этом читайте в новой рецензии Константина Рябенко на книгу Михая Чиксентмихайи «Поток»....

14 07 2025 12:54:14

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

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

13 07 2025 9:42:12

Что такое триггер в маркетинге

Что такое триггер в маркетинге Триггер — способ ненавязчивого воздействия на потенциального клиента путем использования психологических приемов в текстах, заголовках и остальном контенте...

12 07 2025 19:51:21

Как компании контролируют сотрудников в соцсетях. Три кейса

Как компании контролируют сотрудников в соцсетях. Три кейса К социальным сетям уже нельзя относиться, как к сугубо личному прострaнcтву?...

11 07 2025 3:14:38

Как с помощью Google Tag Manager отследить отправку формы на сайте

Отслеживание конверсий: покупка, подписка на рассылку, отправка контактных данных и другое....

10 07 2025 12:22:54

Десять часто задаваемых вопросов о лендингах

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

09 07 2025 21:25:33

Что такое ASO и как правильно продвигать мобильное приложение

Что такое App Store optimization и как раскручивать мобильные приложения...

08 07 2025 14:35:57

CEO fuckups. Три ошибки опытных руководителей

И как с ними справиться. Рабочие инструкции для Chief Executive Office и менеджеров в целом. Давайте управлять комaндой и собой более эффективно и без выгорания. Узнать больше!...

07 07 2025 20:49:44

Форматы рекламных объявлений в Facebook и Instagram

Форматы рекламных объявлений в Facebook и Instagram Гайд по рекламе для SMM-, PPC-специалистов, блогеров и владельцев бизнеса...

06 07 2025 17:35:13

Трендовые инструменты в диджитал-маркетинге и рекламе — новое исследование Gartner

Трендовые инструменты в диджитал-маркетинге и рекламе — новое исследование Gartner В 2019 году в цикл зрелости вошли 28 технологий и инструментов...

05 07 2025 5:42:55

Как маркетологи распределяют бюджет на рекламу — исследование SalesForce

Как маркетологи распределяют бюджет на рекламу — исследование SalesForce Аналитики из SalesForce уже в четвертый раз опубликовали исследование о приоритетах, составе комaнд и распределении бюджетов ведущими маркетологами мира...

04 07 2025 1:14:31

Как продвигаться в Instagram, если у вас B2B-бизнес

Как продвигаться в Instagram, если у вас B2B-бизнес Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....

03 07 2025 14:46:50

10 SEO-требований к сайту

Советы и даже требования SEO-специалистов к разработчикам сайтов....

02 07 2025 2:26:59

Email-маркетинг для интернет-магазина — как настроить, чтобы получить от 7 до 15% общего дохода

Email-маркетинг для интернет-магазина — как настроить, чтобы получить от 7 до 15% общего дохода Email-маркетинг увеличивает частоту транзакций. Показываем как это происходит и за счет чего. Делимся кейсом email-маркетинга для книжного интернет-магазина. Читать дальше....

01 07 2025 9:43:13

Буба и кики — тест для развития креативного мышления

Буба и кики — тест для развития креативного мышления На этой картинке изображены два предмета. Один из них называется «буба», а второй «кики»....

30 06 2025 4:57:32

Как быстро снизить стоимость конверсий в нише элитных автоуслуг — кейс Аверс-центр

Как быстро снизить стоимость конверсий в нише элитных автоуслуг — кейс Аверс-центр Среди интернет-маркетологов существует мнение, что медийная реклама — не перформанс-инструмент. То есть не приносит прямые конверсии. Когда медийные кампании продают — кейс центра тюнинга автомобилей премиум класса....

29 06 2025 0:50:19

Как подключить Яндекс.Метрику к Яндекс.Директу

Как подключить Яндекс.Метрику к Яндекс.Директу Чтобы грамотно анализировать статистику рекламных кампаний, необходимо связать Яндекс.Метрику и Яндекс.Директ. Рассказываем, как это сделать...

28 06 2025 23:47:36

Какие элементы продающего текста нужно тестировать

Какие элементы продающего текста нужно тестировать 89% предпринимателей не тестируют свои продающие тексты. О том, что и как нужно тестировать, рассказал в гостевом посте директор Студии эффективных текстов Владимир Руков....

27 06 2025 19:19:48

Контекстная реклама в Netpeak: 14 закулисных фишек агентства

Контекстная реклама в Netpeak: 14 закулисных фишек агентства Что нужно, чтобы реклама в интернете приносила прибыль....

26 06 2025 19:56:12

Что такое водяной знак и как его используют

Необходимый элемент для защиты контента от копирования и в то же время — шанс стать популярным автором. Тем не менее, от водяных знаков отказываются. Узнать больше!...

25 06 2025 3:55:34

Как подключить API Google Search Console к Google Таблицам

Как подключить API Google Search Console к Google Таблицам Новая инструкция, которую можно применять к любым задачам в Google Таблицах....

24 06 2025 0:11:48

Как стать менеджером проектов в Netpeak

Программа знаний и умений, чтобы стать Project Manager в агентстве интернет-маркетинга...

23 06 2025 21:36:23

Как продвигать личный бренд в Instagram в 2021?

Как продвигать личный бренд в Instagram в 2021? Как завоевать Instagram, задавая правильные цели и вопросы. Также в статье делимся табличкой лучшего времени постинга для различных тематических публикаций. Узнать больше!...

22 06 2025 11:14:18

Как настроить Google ***ytics — инструкция для новичков

Как настроить Google ***ytics — инструкция для новичков Шаги, которые необходимо выполнить для правильного сбора и анализа данных сайта...

21 06 2025 8:11:16

Контент-маркетинг для блога UniSender — что мы сделали для развития сайта

Контент-маркетинг для блога UniSender — что мы сделали для развития сайта Поиск крутых авторов и качественные тексты для блога об email-рассылке...

20 06 2025 7:30:53

5 железных правил IT-бухгалтеров

5 железных правил IT-бухгалтеров Бухгалтерский мир Netpeak: цель, задачи, мотивация....

19 06 2025 1:46:16

Онбординг-рассылка: как подружить пользователей с продуктом, чтобы они не уходили к конкурентам

Онбординг-рассылка: как подружить пользователей с продуктом, чтобы они не уходили к конкурентам Как упростить знакомство клиента с компанией, продуктом или услугами....

18 06 2025 17:37:56

Номер телефона в формах — как помочь пользователю оставить номер на сайте

Номер телефона в формах — как помочь пользователю оставить номер на сайте Используем маску ввода для оптимизации сбора телефонных номеров в формах на сайте: кейсы агентства Netpeak...

17 06 2025 3:57:55

Как мы сделали аналитический инструмент для блога Netpeak

Как узнать, хорошую ли статью вы опубликовали в блоге...

16 06 2025 10:44:50

Алгоритм LSA для поиска похожих документов

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

15 06 2025 18:25:43

Девять месседжей клиенту от агентства интернет-маркетинга

Девять месседжей клиенту от агентства интернет-маркетинга Лучшие маркетинговые ориентиры тем, кто захочет познакомиться с SEO и контекстной рекламе...

14 06 2025 23:37:26

Как арбитражнику получить правильную статистику конверсий из контекстной рекламы

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

13 06 2025 19:55:47

14 неочевидных и пpaктически применимых фишек круглого стола SaaS Nation 2017

14 неочевидных и пpaктически применимых фишек круглого стола SaaS Nation 2017 Советы от Agorapulse, Smarp, Readdle, Competera, Leadfeeder, Smartly, Toggl, Grammarly, .Io Media, MacPaw, Depositphotos, Promorepuplic, OWOX, Serpstat, Quokka и TemplateMonster для развития SaaS-продуктов...

12 06 2025 13:43:51

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

Сколько стоил клик в Google Ads и Facebook в Украине в первом квартале 2019 года Данные по 42,5 млн кликов в 25 тематиках и 391 городу...

11 06 2025 0:51:57

Как оценить новый канал трафика?

Как оценить новый канал трафика? Эффективен ли ваш канал привлечения трафика? Лучше писать об этом с помощью формул...

10 06 2025 21:34:26

Как привлечь клиентов в 2021 году. Способы лидогенерации, о которых вы могли не знать

Как привлечь клиентов в 2021 году. Способы лидогенерации, о которых вы могли не знать Как снизить стоимость лидов путём использования новых технологий...

09 06 2025 19:42:31

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах

Сооснователь SUPERLUDI Влад Ноздрачев о развитии рынка инфобизнеса и инфоцыганах Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....

08 06 2025 11:40:19

Сравнение First Click, Last Click и Funnel Based моделей атрибуции — кейс Serpstat

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

07 06 2025 18:57:47

SEO своими силами, проверка качества и эффективности продвижения сайта

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

06 06 2025 17:56:34

Как мы вошли в топ Product Hunt — четкая инструкция от Serpstat

Подробный алгоритм успешного питча на Product Hunt на примере Serpstat...

05 06 2025 19:10:49

A/B тестирование в email-маркетинге: что это, типы, и топ идеи для сплит тестирования

Как понять, что именно нравится подписчикам в вашей рассылке...

04 06 2025 4:28:24

Социальный арбуз или самые популярные тематики в Facebook в Украине

Охват и средняя цена за клик в самых популярных тематиках....

03 06 2025 7:31:29

Ежемecячная подписка в Telegram — что это значит и кому может быть полезна

Ежемecячная подписка в Telegram — что это значит и кому может быть полезна Субъективный рейтинг новых функций мессенджера от Head of Telegram Network в Netpeak....

01 06 2025 16:15:28

20 ошибок при запуске рекламы в myTarget, из-за которых вы сливаете бюджет

Чек-лист для РРС-специалистов. Всегда быстрее учиться на опыте других людей, а не набивать шишки самостоятельно. А также советы, как исправить рекламные кампании. Обо всем читайте в этой статье!...

31 05 2025 18:33:13

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