NetPeak Biz Tech    


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

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

< >

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

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

Как улучшить UX сайта — 12 советов по юзабилити С момента публикации предыдущего поста у меня в закладках накопилось несколько новых статей по UX/UI. В частности, эти советы будут полезны вебмастерам, которые хотят сделать шаблон самостоятельно.

Краткое содержание этого выпуска:

  1. Как выглядит годный логотип.
  2. Как корректно оформить ссылки.
  3. Как сделать четкую кнопку.
  4. Как подобрать цветовую гамму для сайта.
  5. О чем помнить перед выбором фотографии.
  6. Как ставить отступы в соответствии с теорией близости.
  7. Как оформить таблицу.

Как выглядит годный логотип

Логотип лучше размещать в верхнем левом углу. Большинство людей читает слева направо, и это будет первое, что они увидят. Если адаптивной верстки нет, а размер экрана небольшой, браузер обрезает именно правую часть страницы.

VS.

Под логотипом уместно разместить пояснение — чем занимается проект:

 

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

Шрифт с тонкими, вытянутыми линиями хорошо подойдет для тематик, которые ассоциируются с красотой. Частично это связано со стереотипом: «стройный значит красивый».

Чтобы передать скорость, можно использовать курсив или наклонный шрифт, так как объекты, которые движутся быстро, кажутся размытыми и наклонными:

 

В логотипах компаний доставок:

Ссылки по теме:

Как корректно оформить ссылки

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

Анкор ссылки должен соответствовать тому, что увидит пользователь, перейдя на страницу.

Хорошо:

Плохо:

Если действие важно для бизнеса, лучше использовать кнопку. Например, для оформления заказа.

Стоит помечать ссылки, на которые пользователь уже нажимал. Посещенные ссылки можно выделить более темным оттенком того же цвета, а непосещенные — более ярким. Так мы словно призываем пользователя кликнуть по ссылке.

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

 

Перед линками, которые ведут на файлы для скачивания можно поставить значок, соответствующий формату документа:

Статья по теме: «Юзабилити ссылок».

Как сделать четкую кнопку

Если кнопка темнее фона, обводку лучше сделать более темного цвета, чем цвет кнопки.

Если фон темнее кнопки, обводка должна быть темнее цвета фона:

У кнопок могут быть четыре состояния: простое (input{}), наведение мыши (input:hover{}), нажатие (input:active{}), неактивная (input[disabled=\"disabled\"]{}). Указывайте состояния кнопок, чтобы пользователю было легче понимать логику процесса.

Статьи по теме:

Как подобрать цветовую гамму для сайта

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

Например, изготовление тортов на заказ:

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

Пример дизайна:

Еще одна тематика — дрессировка собак:

 

Основные цвета: зеленый, бежевый, коричневый, черный.

Пример дизайна в этих тонах:

Чтобы не запутаться, проще использовать не более трех-четырех цветов.

Cерый чаще всего используется для второстепенных элементов, которые должны быть на странице, но не сильно выделяться. Основная задача — расставить акценты на элементах с помощью контраста цветов.

Ссылки по теме:

О чем помнить перед выбором фотографии

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

Чтобы изображения помещались в окне браузера с учетом различных панелей и полос прокруток, рекомендуется использовать ширину 900-1000 пикселей и высоту 600-700 пикселей. Чаще всего используются пропорции 1:1, 3:2, 4:3:

Чтобы кадры с разным соотношением сторон комфортно смотрелись в браузере, можно использовать такие размеры (в квадратных скобках — размер для отображений на сайте с помощью тега IMG):

  • 3:2 — 1800x1200 [900 х 600];
  • 3:2 — 1000x1500 [500 х 750];
  • 4:3 — 1800x1350 [900 х 675];
  • 4:3 — 1050x1400 [525 х 700];
  • 1:1 — 1200x1200 [600 х 600].
Статья по теме: «Размер файлов для публикации в интернете».

Как ставить отступы в соответствии с теорией близости

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

Основной принцип в том, чтобы делать внутренние отступы внутри элементов или блоков меньше, чем внешние.

Полезные статьи:

Как оформить таблицу

Просто гифка об оформлении таблиц.

Как построить диаграмму и не облажаться Читайте детально о том, как строить таблицы и диаграммы.

Еще несколько интересных книг по теме:
  • Стив Круг, «Не заставляйте меня думать».
  • Робин Вильямс, «Дизайн для недизайнеров».
  • Артемий Лебедев, «Ководство».

Выводы

  1. Логотип лучше размещать в верхнем левом углу. Шрифт для логотипа должен соотноситься с тематикой сайта.
  2. Ссылки должны подчеркиваться, анкор должен соответствовать тому, что увидит пользователь.
  3. Если действие пользователя важно для бизнеса, лучше использовать кнопку.
  4. Если кнопка темнее, чем фон, на котором она расположена, обводку лучше сделать более темного цвета, чем цвет кнопки.
  5. С помощью поиска по картинкам поймите, с какими цветами ассоциируется у большинства пользователей эта тематика, и оформляйте сайт в соответствующей цветовой гамме.
  6. Чтобы изображения помещались в окне браузера с учетом различных панелей и полос прокруток, рекомендуется использовать изображения шириной 900-1000 пикселей и высотой 600-700 пикселей.
  7. Внутренние отступы в элементах на странице должны быть меньше, чем внешние.
  8. Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».



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

Как работать с Яндекс.Вебвизор 2.0

Как работать с Яндекс.Вебвизор 2.0 Бета-версия помогает записывать действия пользователей на сайте и благодаря этому улучшать удобство использования сайта и в перспективе растить продажи. Узнать больше!...

08 06 2026 16:45:59

17 шагов к эффективному бренду, или Крутая зеленая ворона. Рецензия на книгу «Zag»

17 шагов к эффективному бренду, или Крутая зеленая ворона. Рецензия на книгу «Zag» Семнадцать крутых шагов к эффективному бренду Заг — это авторский неологизм от слова зигзаг (англ. zigzag). Он подразумевает движение в другом направлении....

07 06 2026 16:35:36

Как отфильтровать внутренний трафик в Google ***ytics

Как отфильтровать внутренний трафик в Google ***ytics Фильтруем свой трафик от сотрудников в Google ***ytics...

06 06 2026 23:54:27

Что такое VPN-соединение и как им пользоваться

Что такое VPN-соединение и как им пользоваться VPN — технология анонимного сетевого подключения. Она позволяет организовать подсеть в уже существующем соединении. Поверхностная сеть закрыта от внешнего доступа, потому вмешаться в нее не смогут. Чтобы узнать больше, читайте дальше!...

05 06 2026 19:10:59

Как выбрать инструмент для импорта данных из Google ***ytics

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

04 06 2026 17:51:40

Кейс — как увеличить трафик блога юридического сайта на 50 000% с помощью SEO

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

03 06 2026 15:21:37

Почему SEO-аудит сайта должен делать специалист

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

02 06 2026 11:35:47

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в четвертом квартале 2018 года

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в четвертом квартале 2018 года Новое исследование стоимости клика в Казахстане в четвертом квартале 2018 года...

01 06 2026 23:57:13

Как с помощью Google Earth собрать контакты для email-рассылок и холодных звонков

Как с помощью Google Earth собрать контакты для email-рассылок и холодных звонков Проверенный способ для сбора базы данных. Метод, с помощью которого можно извлечь контактные данные, а именно: название точки, телефон, адрес, сайт., а потом высылать своё КП, промокоды для акции, сообщить о выходе товара, сделать спецпредложение...

31 05 2026 4:44:40

Как создать специальный отчет в Google ***ytics

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

30 05 2026 7:31:16

Основные виды контента и правила оформления в зависимости от вида

Контент может информировать, вовлекать и продавать, при этом для каждой цели нужен свой тип контента...

29 05 2026 11:42:50

Как грамотно работать с Директ Коммaндер

Как грамотно работать с Директ Коммaндер Директ Коммaндер от Яндекса позволяет легко работать с большими кампаниями...

28 05 2026 4:54:43

Как создать портрет покупателя — руководство для бизнеса от SEMrush

Как создать портрет покупателя — руководство для бизнеса от SEMrush Как создать портрет покупателя и зачем он нужен бизнесу....

27 05 2026 8:59:21

Двенадцать фишек для онлайн-бизнеса — круглый стол 8P 2016

Двенадцать фишек для онлайн-бизнеса — круглый стол 8P 2016 2013, 2014, 2015 — годы, когда конференция 8p радовала все сео-сообщество СНГ. Прошла она и в 2016 году. Мы собрали лучшие советы интернет-магазинам от экспертов и участников круглого стола на конференции 8P 2016....

26 05 2026 17:20:19

Какой сервис автоматического продвижения выбрать

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

25 05 2026 3:13:48

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

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

24 05 2026 12:13:58

Канонический URL: как повысить рейтинг одинакового контента

Канонический URL: как повысить рейтинг одинакового контента Атрибут rel="canonical" помогает бороться с дублированием контента и обезопасить сайт от дублирования и копирования...

23 05 2026 20:35:53

Сколько стоил клик в Google Ads в Украине в третьем квартале 2020 года — исследование Netpeak

Сколько стоил клик в Google Ads в Украине в третьем квартале 2020 года — исследование Netpeak Данные, приведенные в исследовании, помогут в составлении медиапланов по продвижению в интернете. Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить....

22 05 2026 8:21:52

Кейс Office-Expert.kz: как на треть снизить стоимость транзакций и вырастить CR на 67%

Кейс Office-Expert.kz: как на треть снизить стоимость транзакций и вырастить CR на 67% Как эффективно выйти из карантина с помощью контекстной рекламы...

21 05 2026 10:38:55

Есть идея для бизнеса. С чего стоит начать?

Есть идея для бизнеса. С чего стоит начать? Руководство к действию от основателя Netpeak Group....

20 05 2026 9:22:16

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе»

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе» Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....

19 05 2026 14:53:54

200 этапов настройки рекламной кампании — чек-листы

200 этапов настройки рекламной кампании — чек-листы Что такое【контекстная реклама】и как ее настроить? Подробный чек-лист ✅ в блоге Netpeak ⟁ ▷ 200 ступеней рекламной кампании в Google AdWords, Яндекс.Директ ⚡...

18 05 2026 14:50:50

Инсталлы по цене пирожка — кейс Apple Search Ads для приложения OLX Украина

Инсталлы по цене пирожка — кейс Apple Search Ads для приложения OLX Украина Как с помощью рекламы в Apple Search Ads получить дешевые установки и привлечь релевантных пользователей среди владельцев айфонов...

17 05 2026 22:14:48

Как готовить баннеры для мобильной рекламы

Как готовить баннеры для мобильной рекламы Как сделать креативный мобильный баннер. Зачем нужны особенные баннеры для мобильных? Что делать с картинкой? Что делать с текстом? Что делать с другими рекламными форматами? Дополнительные элементы. Обо всем этом детально и спримерами...

16 05 2026 4:30:56

10 видов инноваций

10 видов инноваций Примеры инновационных проектов. Нескучная рецензия на интересную книгу....

15 05 2026 21:53:41

Как подготовить описание приложения в GooglePlay? Шпаргалка

Как подготовить описание приложения в GooglePlay? Шпаргалка Блиц-инструкция и рекомендации по созданию эффективных описаний для мобильных приложений...

14 05 2026 1:43:29

SEO-среда: Основные инструменты веб-мастера

SEO-среда: Основные инструменты веб-мастера Пройдем вместе путь вебмастера от первых шагов и до вершины ТОПа :)...

13 05 2026 5:36:26

Кейс по продвижению интернет-магазина медицинских товаров: ROMI 32%

Кейс по продвижению интернет-магазина медицинских товаров: ROMI 32% Продвигаем медицинский проект. Кроме цифр рассказываем, что и как делали...

12 05 2026 18:35:24

Рейтинг директоров по маркетингу среди ecommerce-проектов Казахстана

Рейтинг директоров по маркетингу среди ecommerce-проектов Казахстана Помимо полезного и качественного продукта, услуги, компании нужен мощный маркетинг. И возможно это только благодаря хорошему директору по маркетингу. Только так это работает. Кто лучшие в этой нише в Казахстане? Узнать!...

11 05 2026 20:45:17

Как сделать разработчикам приятно — опыт Netpeak

Как сделать разработчикам приятно — опыт Netpeak Отличный способ мотивации, который мы попробовали и вам рекомендуем....

10 05 2026 17:50:10

Авторские права на веб-сайт — как защитить свой ресурс

Авторские права на веб-сайт — как защитить свой ресурс Надежный сайт позволит вести успешную деятельность, защитить плоды собственного труда и результаты работы исполнителей, с которыми вы сотрудничали. Для реализации задумки вам понадобятся авторские права....

09 05 2026 9:45:23

11 вопросов перед заказом коллтрекинга

11 вопросов перед заказом коллтрекинга Какие типы звонков отслеживаются? Есть ли интеграция с Google ***ytics? Существуют ли в выбранном сервисе или на платформе инструменты интеграции с другими системами? Больше вопросов и ответов на них — в статье....

08 05 2026 12:52:51

Как маркетинговому агентству выйти на зарубежный рынок. Опыт ADINDEX

Статья будет полезна небольшим агентствам, которые мечтают работать с заграничными клиентами. Зачем нужно выходить за рубеж, если и в своей стране все идет неплохо, да и вообще — нет времени на продвижение на незнакомом рынке? Давайте разбираться вместе!...

07 05 2026 6:40:39

Алгоритм Google Panda 4.2 — 10 советов от SEO-экспертов

Алгоритм Google Panda 4.2 — 10 советов от SEO-экспертов Как диагностировать Google Panda, понять, что нужно изменить на своем сайте и сделать пользователей счастливыми....

06 05 2026 14:34:13

Funnel Based модель атрибуции в OWOX BI — руководство по настройке

Funnel Based модель атрибуции в OWOX BI — руководство по настройке Как настроить многокaнaльную модель атрибуции для своего бизнеса....

05 05 2026 9:19:38

Что такое внутренние дубли страниц и как с ними бороться?

Что такое внутренние дубли страниц и как с ними бороться? Анализ содержимого сайта показывает: Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей...

04 05 2026 8:44:31

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

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

03 05 2026 8:11:43

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

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

02 05 2026 10:58:37

Как «ломают» воронку продаж при построении отчётности

Как «ломают» воронку продаж при построении отчётности Без понимания того, какие данные заложены в основу воронки продаж получается... — читайте в статье...

01 05 2026 20:15:45

Как повысить эффективность своей работы — 17 советов от тимлида Netpeak

Как повысить эффективность своей работы — 17 советов от тимлида Netpeak Как добиться эффективности и самоорганизации. Читайте о системе тимлида Netpeak Андрея Коваля....

30 04 2026 12:53:11

Что делать, если приложение удалили из Google Play или App Store

Что делать, если приложение удалили из Google Play или App Store Есть ли шанс на апелляцию...

29 04 2026 5:38:56

Мониторинг ошибок 404 с помощью специальных отчетов в Google ***ytics

Мониторинг ошибок 404 с помощью специальных отчетов в Google ***ytics Простой способ отслеживания как внутренних, так и внешних битых ссылок. Узнать больше!...

28 04 2026 4:41:30

Гeймификация в email-маркетинге: повышаем вовлеченность в рассылках

Гeймификация в email-маркетинге: повышаем вовлеченность в рассылках Как использовать игровые механики для вовлечения аудитории....

27 04 2026 13:30:56

Топ-25 телеграм-каналов о веб-дизайне, на которые стоит подписаться

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

26 04 2026 12:10:45

Universal App Campaign 2.0 в Google Рекламе — как выжать максимум пользы

Universal App Campaign 2.0 в Google Рекламе — как выжать максимум пользы Как сделать рекламу в Universal App Campaign 2.0 максимально эффективной...

25 04 2026 23:40:26

Как завоевать доверие подписчиков email-рассылки в США. Опыт eSputnik

Как завоевать доверие подписчиков email-рассылки в США. Опыт eSputnik Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...

24 04 2026 3:12:42

Продвижение на prom.ua — настраиваем аналитику, ремаркетинг, Google Merchant Center

Лафхаки для маркетологов и владельцев сайтов на Prom...

23 04 2026 15:46:26

Свадьба в IT, или Как пиарщику доверить организацию самого важного ивента подрядчику

Свадьба в IT, или Как пиарщику доверить организацию самого важного ивента подрядчику Организаторам мероприятий, коллегам из PR-сферы и невестам о том, как делегировать важные мероприятия внешнему подрядчику...

22 04 2026 20:19:33

Инсайты Google Business Profile: от настройки до оптимизации

Инсайты Google Business Profile: от настройки до оптимизации Как зарегистрироваться и пользоваться аккаунтом в Google Business Profile: руководство для интернет-маркетологов и владельцев бизнеса...

21 04 2026 23:50:29

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

Какие списки ремаркетинга выбрать — исследование Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....

20 04 2026 14:12:58

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