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



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

Кейс по контекстной рекламе сайта купальников и нижнего белья марки Victoria’s Secret: ROMI 255%

Кейс по контекстной рекламе сайта купальников и нижнего белья марки Victoria’s Secret: ROMI 255% Наибольшее количество онлайн транзакций было получено по брендовым запросам женского белья...

14 06 2024 12:50:46

WolframAlpha или Вычислительная Теория Всего

Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...

13 06 2024 23:58:18

Как сделать отчет для поиска перспективных товаров

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

12 06 2024 13:54:32

Шесть принципов виральности, или Как работает вирусный маркетинг

Шесть принципов виральности, или Как работает вирусный маркетинг Автор книги о вирусном маркетинге «Заразительный. Психология сарафанного радио» Йона Бергер пришел к выводу, что у виральности всего шесть принципов....

11 06 2024 18:51:26

AMP-страницы: как собрать достоверные данные

AMP-страницы: как собрать достоверные данные Получаем реальную статистику эффективности использования AMP-страниц с помощью АМР Client ID API....

10 06 2024 1:46:58

Рамиль Мухоряпов: «Мы стали драйвером развития электронной коммерции в Казахстане»

Рамиль Мухоряпов: «Мы стали драйвером развития электронной коммерции в Казахстане» История создания и развития холдинга «Choco Family» помогает понять масштабы онлайн-рынка Казахстана, найти точки роста для собственного бизнеса в Казнете. Каково быть пионером ecommerce в стране? Чем казахстанский рынок e­commerce отличается от Рунета и Уанета? Читать!...

08 06 2024 19:12:36

Стили управления по Ицхаку Адизесу

Стили управления по Ицхаку Адизесу Менеджмент и лидерство: 4 разных типа руководства организацией и нескучные иллюстрации в стиле South park....

07 06 2024 18:27:27

Симулятор ставок кампании в Google Рекламе

Сергeй Бахарь неустанно исследует Google Рекламу и рассказывает о новинках нашим читателям....

06 06 2024 2:43:23

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

Попасть в топ 3 — ваш предел мечтаний? Почему и когда это не принесет ожидаемых результатов, плюс другие не актуальные убеждения о PPC. Узнать больше!...

05 06 2024 19:34:38

Как украинские компании креативят к Черной пятнице. Примеры

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

04 06 2024 23:26:34

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

Что делать, когда код электронной торговли в одной валюте, а аккаунты Google ***ytics/Google Ads — в другой. И нужной валюты нет в списке возможных....

03 06 2024 5:58:23

Страница «о нас» — первое, что должно быть на сайте

Страница «о нас» — первое, что должно быть на сайте Красивое креативное описание страницы «о нас» — важная составляющая коммуникации с потенциальным клиентом. Покажите свою комaнду, опишите ценности и миссию. Сделайте эту страницу продающей. Узнать больше!...

02 06 2024 21:17:58

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

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

01 06 2024 5:45:59

Как отслеживать изменения на сайте с оповещениями по email

Как отслеживать изменения на сайте с оповещениями по email Как делать мгновенный мониторинг изменений на сайтах? Марина Демьяненко предложила простое решение вопроса с помощью Kimono и таблиц Google....

31 05 2024 14:50:22

Дополнение Google Ads для Google Taблиц — руководство пользователя

Дополнение Google Ads для Google Taблиц — руководство пользователя Как сократить время на создание собственных отчетов, если вы работаете с большими рекламными аккаунтами...

30 05 2024 10:41:53

Гайд по системе умных заметок Zettelkasten — настройка, воркфлоу, лайфхаки

Гайд по системе умных заметок Zettelkasten — настройка, воркфлоу, лайфхаки Как настроить программу Obsidian для удобной и быстрой работы по системе Zettelkasten....

29 05 2024 6:23:27

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

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

28 05 2024 8:33:47

Раскрыт секрет гарантированного роста трафика из поиска, или Серебряная пуля SEO

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

27 05 2024 5:15:44

Как заказать эффективную рекламу у Instagram-блогеров за $15-30

Как заказать эффективную рекламу у Instagram-блогеров за $15-30 Обсуждаем, как попробовать инфлюенсер-маркетинг без особого бюджета...

26 05 2024 7:27:56

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

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

25 05 2024 17:23:53

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

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

24 05 2024 17:10:18

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

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

23 05 2024 11:29:55

Что делать со старыми статьями в блоге

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

22 05 2024 22:40:31

Как обpaбатывать данные из множества таблиц в Google BigQuery

Как обpaбатывать данные из множества таблиц в Google BigQuery Альтернатива классическому SQL — обработка запросов из множества таблиц с помощью функций подстановки в Google BigQuery....

21 05 2024 12:31:34

Как запустить рекламную кампанию Discovery Ads

Как запустить рекламную кампанию Discovery Ads Находим пользователей, которые не знали, что им нужен ваш товар или услуга....

20 05 2024 17:42:30

Что такое Server-side tracking

Что такое Server-side tracking И чем этот тип отслеживания событий отличается от Client-side. Узнать!...

19 05 2024 8:39:13

Как добавить видео на Youtube с телефона. Пошаговая инструкция

Как добавить видео на Youtube с телефона. Пошаговая инструкция Будь мобильным — заливай видео на Youtube с телефона...

18 05 2024 3:30:25

Как мы одолели «Баден-Баден» и подняли трафик из поиска на 55% — кейс MirCli

Как мы одолели «Баден-Баден» и подняли трафик из поиска на 55% — кейс MirCli Продвижение крупного интернет-магазина в перегретой нише...

17 05 2024 11:44:53

Рейтинг журнала Time — 11 изобретений, полезных для бизнеса

Рейтинг журнала Time — 11 изобретений, полезных для бизнеса Ноу-хау, интересные для бизнеса, которые вошли в ежегодный рейтинг журнала Time....

16 05 2024 18:41:19

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

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

15 05 2024 1:23:57

Что такое CTA: как сформировать эффективный призыв к действию

Основная цель CTA — помочь посетителю принять решение о покупке, скачивании, регистрации или подписке...

14 05 2024 18:26:49

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

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

13 05 2024 10:12:42

Кейс по контекстной рекламе портала-каталога организаций: как оптимизация целевых страниц повлияла на поведенческие факторы

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

12 05 2024 22:42:44

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

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

11 05 2024 11:10:53

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

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017 Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...

10 05 2024 0:35:41

Загадки для тренировки мозга: заяц с одним ухом, пароход из Гавра и лабиринт с правым поворотом

Загадки для тренировки мозга: заяц с одним ухом, пароход из Гавра и лабиринт с правым поворотом Проверьте свою логику, находчивость и креативность...

09 05 2024 10:45:42

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

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

08 05 2024 4:39:31

Анализ пути в Google ***ytics 4: как ускорить процесс покупки на сайте

Анализ пути в Google ***ytics 4: как ускорить процесс покупки на сайте Анализ пути — это как многокaнaльные последовательности в Universal ***ytics, только лучше....

07 05 2024 18:48:55

Конкурент Shazam: искусственный интеллект распознает песни по насвистываниям и мычаниям

Конкурент Shazam: искусственный интеллект распознает песни по насвистываниям и мычаниям Как в Google Search можно найти мелодию по примерному напеву...

06 05 2024 19:51:25

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

Как перевести статью для блога — инструкция для технарей Почему нельзя просто взять и перевести. В худшем случае специализированный текст на иностранном языке должен стать для переводчика дорожной картой, в лучшем — источником вдохновения. Почему? Читайте об этом!...

05 05 2024 11:35:58

Как открыть магазин на Etsy

Как открыть магазин на Etsy Магазин вязанных вещей хенд мейд. Как за два месяца увеличить посещаемость в 20 раз....

04 05 2024 19:34:52

Какие ошибки возникают при работе с Google ***ytics и как с ними бороться

Какие ошибки возникают при работе с Google ***ytics и как с ними бороться Советы специалистам по контекстной рекламе. Технические сложности, которые возникают при работе с Google ***ytics: от ограничений интерфейса до ошибок настройки отслеживания и последующей недостоверности полученных данных, и решения для них...

03 05 2024 10:11:43

Как найти путь к 250 миллионам пользователей за рубежом — обзор возможностей Pinterest

Как найти путь к 250 миллионам пользователей за рубежом — обзор возможностей Pinterest в поисках нового источника трафика расскажем о Pinterest — современной поисковой сети c акцентом на визуальном контенте...

02 05 2024 2:10:56

Интеграция Google BigQuery c BI-платформами и электронными таблицами

Интеграция Google BigQuery c BI-платформами и электронными таблицами Подробная инструкция по интеграции с облачной базой данных и сравнение BI-платформ....

01 05 2024 4:34:22

Как получать данные от сторонних сервисов — создаем вебхук с помощью Google Apps Scripts

Как получать данные от сторонних сервисов — создаем вебхук с помощью Google Apps Scripts Всё о вебхуках. Как настроить механизм получения уведомлений о событиях с помощью функций обратных вызовов....

30 04 2024 5:22:20

Первопроходцы в нише ремонта мобильных телефонов в Казахстане — история Satel.kz

Первопроходцы в нише ремонта мобильных телефонов в Казахстане — история Satel.kz Satel является одним из топовых игроков онлайн-маркета, но на старте интернет в качестве канала продаж не рассматривался. Когда онлайн запустили на полную? Узнать!...

29 04 2024 2:31:42

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

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

28 04 2024 23:56:47

Как провести анализ юзабилити сайта онлайн

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

26 04 2024 13:58:16

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