Как улучшить UX/UI сайта — семь советов по юзабилити > NetPeak - Независимость и осознанность
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. Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».



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

Как получить 184% прироста трафика и увеличить долю поискового трафика в три раза в gaming-тематике — кейс Wowcarry

Как получить 184% прироста трафика и увеличить долю поискового трафика в три раза в gaming-тематике — кейс Wowcarry Доля органического трафика увеличилась с 14% до 44%, а небрендового — на 184%....

05 12 2023 6:19:26

Частотность‌ ‌запросов‌ ‌и‌ ‌техника‌ ‌ее‌ ‌определения‌

Частотность‌ ‌запросов‌ ‌и‌ ‌техника‌ ‌ее‌ ‌определения‌ Определение частотности запросов — задача первоочередной важности для составления адекватного семантического ядра, наполнения качественным контентом и контекстной рекламой...

04 12 2023 23:56:59

Как и когда выходить на рынки других стран — советы Google

Как и когда выходить на рынки других стран — советы Google Менеджер экспортного направления Гугл Украина — об особенностях выхода на рынки разных стран мира....

03 12 2023 7:10:12

Как анализировать эффективность рекламы в Google ***ytics? Часть первая: персональные сводки

Как анализировать эффективность рекламы в Google ***ytics? Часть первая: персональные сводки Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...

02 12 2023 4:13:56

Как собрать аудиторию подписчиков YouTube с 0 до 10 000 за год — кейс канала магазина для любителей рыбалки

Как собрать аудиторию подписчиков YouTube с 0 до 10 000 за год — кейс канала магазина для любителей рыбалки Кейс продвижения YouTube-канала магазина товаров для рыбалки...

01 12 2023 7:57:13

Зачем нужен видеомаркетинг: инфографика

Зачем нужен видеомаркетинг: инфографика Видеомаркетинг должен стать обязательной частью рекламной онлайн-стратегии, и мы собрали несколько подтверждений этому в нашей инфографике....

30 11 2023 12:42:32

Кейс Sportcenter Store — рост транзакций на 295% с помощью платной рекламы

Быстро разогнать рекламные кампании и получить рост конверсий при повышении CPA до 100%. Как этого добиться — читайте в новом кейсе....

29 11 2023 2:14:15

Как настроить счетчик Яндекс.Метрики

Как настроить счетчик Яндекс.Метрики Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....

28 11 2023 2:30:14

Решения микро UX на сайтах интернет-магазинов. Удачные кейсы

Решения микро UX на сайтах интернет-магазинов. Удачные кейсы Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...

27 11 2023 3:37:16

Кейс по контекстной рекламе в тематике «трудоустройство»

Кейс по контекстной рекламе в тематике «трудоустройство» Конкректная цель — конкретные результаты трудоустройства...

26 11 2023 8:23:28

Геотаргетинг: 10 способов увеличить охват целевой аудитории

Геотаргетинг: 10 способов увеличить охват целевой аудитории Как увеличить охват целевой аудитории ресторана или магазина с помощью рекламы на мобильных и сверхточного геотаргетинга...

25 11 2023 5:16:24

Обзор: четыре новинки в Instagram

Обзор: четыре новинки в Instagram Десктопная версия, совместная работа (collabs), сбор средств и новые эффекты в Reels. Рассказываем, что дают новые функции. Узнать больше....

24 11 2023 14:29:45

Путь магазина «Модна Каста» от Андрея Логвина

CEO магазина «Модна Каста» Андрей Логвин — сделал отличный доклад на 8P о пути к успеху своего бизнеса и будущем Ecommerce. Детальнее об ощущении deal и «первом дне» для интернета читайте в новом посте....

23 11 2023 0:24:34

Анна Романишина о школе английского, тайм-менеджменте и продвижении

Анна Романишина о школе английского, тайм-менеджменте и продвижении Интервью с основателем школы английского языка Progress...

22 11 2023 14:15:29

Кейс по email-маркетингу для интернет-магазина книг Book24 — рост дохода в 2 раза

Кейс по email-маркетингу для интернет-магазина книг Book24 — рост дохода в 2 раза Когда email-маркетинг становится точкой роста. Кейс интернет-магазина книг Book24....

21 11 2023 2:28:48

7 идей для онлайн-корпоратива и день рождения компании в зуме. Кейс Netpeak Group

7 идей для онлайн-корпоратива и день рождения компании в зуме. Кейс Netpeak Group Онлайн-корпоративы стали трендом 2020 года, но останутся с нами надолго если не в чистом, то в гибридном формате. Делимся опытом организации дня рождения компании в Zoom....

20 11 2023 13:46:36

10 мощных советов по маркетингу WordPress

Лучшие плагины WordPress для SEO и продвижения сайта в поисковой системе Google и 10 советов для WordPress, которые помогут вам продвигать свой сайт...

19 11 2023 22:35:50

Генерируем прорывные идеи по Люку Уильямсу

Генерируем прорывные идеи по Люку Уильямсу Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....

18 11 2023 0:57:57

Анонимный покупатель на страже роста продаж — опыт агентства Netpeak

Анонимный покупатель на страже роста продаж — опыт агентства Netpeak И эксперт, и агент. Анонимный покупатель — специальная проверка бизнес-процессов до и во время рекламной кампании...

17 11 2023 2:22:34

Кейс: снижение (not set) трафика в Google ***ytics на 59,35%

Кейс: снижение (not set) трафика в Google ***ytics на 59,35% Сет по контекстной рекламе в тематике «разработка программного обеспечения»: снижение стоимости клика на 89%....

16 11 2023 21:45:56

Что такое консалтинг от Netpeak и почему он нужен инхаус-комaндам

Что такое консалтинг от Netpeak и почему он нужен инхаус-комaндам Где найти лидера для своей инхаус-комaнды маркетологов...

15 11 2023 0:12:16

Что такое SEO и зачем нужна поисковая оптимизация

Что такое SEO и зачем нужна поисковая оптимизация Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...

14 11 2023 21:41:42

DMCA-алгоритм Google: закон об авторском праве в цифровую эпоху

DMCA-алгоритм Google: закон об авторском праве в цифровую эпоху Что значит всемирное обновление DMCA-алгоритма и приведет ли оно к полноценной защите авторских прав?...

13 11 2023 6:28:58

Правила преобразования фидов в Google Merchant Center

Правила преобразования фидов в Google Merchant Center Правила преобразования фидов в Google Merchant Center помогут сегментировать товары и сделать вашу рекламу более эффективной...

12 11 2023 19:12:19

Как мы нашли модель аналитики для SaaS-проекта UniSender.com

Как мы нашли модель аналитики для SaaS-проекта UniSender.com Что делать, если нет четкой модели оценки эффективности контекстной рекламы?...

11 11 2023 18:37:40

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

Как мотивировать клиентов оставить отзыв Лестные отзывы от клинта в интернете невозможно переоценить. Если вы владелец малого бизнеса и только разpaбатываете и внедряете свою маркетинговую стратегию, книга «По рекомендации» будет вам полезной...

10 11 2023 3:22:26

Семь отчетов Google ***ytics для анализа вашего блога

Семь отчетов Google ***ytics для анализа вашего блога Один из самых известных отчетов в Google ***ytics «Аудитория/Обзор». Но кроме него есть еще несколько, которые будут весьма полезны для вашего блога. Какие именно, читайте дальше....

09 11 2023 15:21:58

Плотность ключевых слов — как определить релевантность документа ключевому запросу

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

08 11 2023 3:28:55

О рекламе в Telegram — что пошло не так

О рекламе в Telegram — что пошло не так Если вы автор телеграм-канала, то стоит задуматься об альтернативных контент-платформах. Мнение...

07 11 2023 5:38:37

Как узнать, было ли прочитано ваше письмо адресатом?

Как узнать, было ли прочитано ваше письмо адресатом? Метод не для всех, но увлеченным веб-аналитикой точно понравится!...

06 11 2023 16:42:27

Как оформлять Google Таблицы, чтобы с вами хотели работать

Как оформлять Google Таблицы, чтобы с вами хотели работать 10 базовых правил оформления онлайн-таблиц. Оформление — основа таблицы. Как работать со столбцами и ячейками, комментариями и примечаниями, делать корректные цветовые выделения. Читайте далее....

05 11 2023 23:26:39

Выгорание на работе: как сохранить интерес и продуктивность. Личный опыт директора по маркетингу

1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....

04 11 2023 16:50:50

Как раскрутить телеграм-канал в 2022 — 14 актуальных способов продвижения

Как раскрутить телеграм-канал в 2022 — 14 актуальных способов продвижения Хотите говорить с клиентами? Пишите им в телеге. Для этого важно продвижение телеграм-канала. Что и как делать для раскрутки — подробная инструкция....

03 11 2023 9:29:32

Исследование рынка для стартапа и действующего бизнеса. Ключевые шаги

Исследование рынка для стартапа и действующего бизнеса. Ключевые шаги Как анализировать конкуренты и делать правильные выводы для развития бизнеса....

02 11 2023 17:31:39

10 готовых дашбордов для маркетолога в Data Studio

10 готовых дашбордов для маркетолога в Data Studio Подбор правильного инструмента для визуализации данных может сэкономить время и ресурсы компании, а также повысить общую продуктивность маркетинга...

01 11 2023 18:11:25

«Звездочки» нужны только для повышения CTR поисковой выдачи?

«Звездочки» нужны только для повышения CTR поисковой выдачи? Публикуем тему с закрытого аналитического форума Netpeak про «звездочки» как инструмент оценки релевантности контента....

31 10 2023 7:13:47

Как продвигать посты в Instagram — пошаговая инструкция для новичков

Алгоритм настройки и запуска рекламы для SMM-, PPC-специалистов, блогеров и владельцев бизнеса....

30 10 2023 8:21:35

Результаты тестирования похожих аудиторий в торговых кампаниях (Google Shopping)

Результаты тестирования похожих аудиторий в торговых кампаниях (Google Shopping) Обновление от Google: похожие аудитории можно использовать не только для медийных, но и для поисковых и торговых кампаний...

29 10 2023 18:12:48

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

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

28 10 2023 3:22:18

Big Money: как Netpeak Group связана с Сингапуром

Big Money: как Netpeak Group связана с Сингапуром Всё о крупной рыбе украинского интернет-маркетинга: компании, люди, кейсы в интервью с основателем Артёмом Бородатюком....

27 10 2023 14:19:48

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

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

26 10 2023 12:44:36

Настраиваем Google Рекламу на мобильные приложения

Настраиваем Google Рекламу на мобильные приложения Реклама мобильных приложений. Хотите показывать рекламу в играх? Вам сюда. Узнайте как правильно настроить показ рекламы на мобильных устройствах....

25 10 2023 1:46:30

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

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

24 10 2023 5:14:24

Как написать обзор товара

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

23 10 2023 10:37:57

Аукцион рекламы в Facebook: всё, о чем вы стеснялись спросить

Аукцион рекламы в Facebook: всё, о чем вы стеснялись спросить Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...

22 10 2023 18:32:20

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

Сколько стоил клик в Google Ads и Facebook в Украине в четвёртом квартале 2018 года Исследование по 38,5 миллионам кликов в 22 тематиках в 391 городе страны....

21 10 2023 15:15:31

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

Как настраивать представления в Google ***ytics — подробное руководство Представление — это уровень доступа в аккаунте Google ***ytics. На уровне представления можно предоставить или ограничить доступ пользователей к отчетам и аналитическим инструментам...

20 10 2023 22:44:14

Интервью с Марком Цукербергом про Facebook Home, деньги и будущее коммуникаций

Интервью с Марком Цукербергом про Facebook Home, деньги и будущее коммуникаций Основатель фейсбука опубликовал на WIRED крутое интервью...

19 10 2023 9:44:49

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

Как воспитать лояльного пользователя: нейромаркетинг в действии Рецензия на книгу «Нейромаркетинг в действии» Дэвида Льюиса...

18 10 2023 11:31:23

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

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

17 10 2023 19:43:47

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