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



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

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

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

13 05 2025 8:10:43

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

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

12 05 2025 18:23:36

Кейс по SEO для тематики «осветительные приборы, мебель и декор», регион Болгария: рост органического трафика на 108,96%

Кейс по SEO для тематики «осветительные приборы, мебель и декор», регион Болгария: рост органического трафика на 108,96% Кейс по росту органического трафика на сайте интернет-магазина на платформе Summer Cart....

11 05 2025 0:10:37

Странные сайты — 40 диких, симпатичных и очень талантливых ресурсов

Странные сайты — 40 диких, симпатичных и очень талантливых ресурсов И уж если бумага стерпит все, интернет — тем более, а значит онлайн-исповедальне быть! И не только ей......

10 05 2025 21:51:18

Как сделать email-рассылку в MailChimp

Как сделать email-рассылку в MailChimp Инструкция для новичков: как быстро отправить почтовую рассылку клиентам...

09 05 2025 1:43:37

Как перевести свой аккаунт с Google ***ytics на Universal ***ytics

Как перевести свой аккаунт с Google ***ytics на Universal ***ytics Читайте простой мануал о том, как перейти на Universal ***ytics и не поломать весь сбор данных...

08 05 2025 11:35:38

Как COVID-19 повлиял на результаты рекламы в Google для 21 отрасли

Выборка из 15 759 учетных записей клиентов WordStream в США по всем вертикалям, которые до размещали рекламу в поиске Google в 2020 году...

06 05 2025 4:20:57

Core Web Vitals: что это такое и как работает

Core Web Vitals: что это такое и как работает В мае прошлого года Google анонсировал выход нового Core Web Vitals. Что это и как будет работать рассмотрим в статье...

05 05 2025 2:57:13

Эффективная рекламная кампания — обзор автостратегий в Яндекс.Директ

Эффективная рекламная кампания — обзор автостратегий в Яндекс.Директ Как использовать автостратегии для экономии рекламного бюджета...

04 05 2025 16:43:20

Стратегия ведения контекстной рекламы по воронке продаж на примере SaaS: шаблон и инструкция

Стратегия ведения контекстной рекламы по воронке продаж на примере SaaS: шаблон и инструкция Как найти индивидуальный подход к аудитории на каждом этапе воронки продаж? В этом вам поможет правильно составленная стратегия контекстной рекламы....

03 05 2025 0:37:51

Как сделать зеркало сайта

Как сделать зеркало сайта Зеркалами считаются сайты с разными доменными именами, но идентичным контентом...

02 05 2025 16:23:42

Sad But True — телеграм-канал Андрея Чумаченко. Коротко и правдиво про бизнес, самоорганизацию и управление людьми

Sad But True — телеграм-канал Андрея Чумаченко. Коротко и правдиво про бизнес, самоорганизацию и управление людьми Рассказываем про телеграм-канал со-основателя Netpeak и чем он интересен для предпринимателей, руководителей и маркетологов....

01 05 2025 19:53:44

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

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

30 04 2025 4:55:28

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

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

29 04 2025 9:36:17

Продвижение детской костюмерной Colombina.ua — рост заявок на 227% в сезон

Кейс детской костюмерной Colombina.ua — как продвигать проект с ярко выраженной сезонностью....

28 04 2025 12:49:43

История успеха office-expert.kz: перенесли email-рассылки на новый сервис и получили ROMI 440%

История успеха office-expert.kz: перенесли email-рассылки на новый сервис и получили ROMI 440% В течение месяца нам удалось наладить рассылку с новой платформы....

27 04 2025 21:26:58

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

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

26 04 2025 20:10:56

Стратегия email-маркетинга: кому и зачем мы шлем письма

Стратегия email-маркетинга: кому и зачем мы шлем письма Старт любых активностей в сфере email-маркетинга — разработка стратегии...

25 04 2025 17:26:46

Как ускорить сайт с помощью сервиса CDN — краш-тест Айри

Как ускорить сайт с помощью сервиса CDN — краш-тест Айри Как трафик CDN повлиял на систему интернет-магазина — палим кейсы...

24 04 2025 23:47:40

Инфлюенс-маркетинг — как дружить и сотрудничать с блогерами, чтобы всем было хорошо. Опыт Kacho Group

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

23 04 2025 5:39:28

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

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

22 04 2025 6:56:49

Как собрать ключевые запросы в Key Collector

Как собрать ключевые запросы в Key Collector Сбор ключевых запросов с помощью программы Кей Коллектор: показываем и рассказываем пошагово с демонстрацией процесса настройки с сервисом Яндекс.Вордстат. Читать дальше!...

21 04 2025 2:14:15

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

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

20 04 2025 8:38:38

Что нужно понять перед запуском онлайн-рекламы — девять самых важных вопросов к себе и PPC-специалисту

Что нужно понять перед запуском онлайн-рекламы — девять самых важных вопросов к себе и PPC-специалисту Читайте, если не хотите «слить» бюджет. Определите конкретные цели и УТП, соберите аналитику, идите к специалисту без опыта работы в конкретной нише и другие рекомендации эксперта. Читайте подробнее в статье!...

19 04 2025 3:26:15

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

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

18 04 2025 8:44:10

Бизнес-фреш: что такое digital и чем это отличается от SMM (продвижения в социальных сетях)

Бизнес-фреш: что такое digital и чем это отличается от SMM (продвижения в социальных сетях) «Что такое диджитал и чем это отличается от услуги продвижения в социальных сетях» — о цифровой стратегии, креативных концепциях и том, как это все происходит в крупных агентствах....

17 04 2025 0:36:12

Как найти тему для срача — на примере vc.ru

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

16 04 2025 2:15:58

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

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

15 04 2025 2:52:37

Деньги или карма: что делать, когда клиенту не нужен интернет-маркетинг

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

14 04 2025 23:54:10

Как удалить себя из социальных сетей

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

13 04 2025 20:21:22

Аудит мобильной версии сайта — подробное руководство

Аудит мобильной версии сайта — подробное руководство О видах мобильных версий, их плюсах и минусах, а также советы по аудиту....

12 04 2025 18:28:51

120 пунктов продающей мобильной версии сайта — чек-лист

120 пунктов продающей мобильной версии сайта — чек-лист Пора сделать так, чтобы мобильная версия сайта приносила прибыль....

11 04 2025 7:45:11

Бархатная оптимизация исходящих ссылок

Бархатная оптимизация исходящих ссылок Качественные исходящие ссылки и исходящий мусор, который только вредит репутации сайта. Находим и отсеиваем....

10 04 2025 22:52:15

SEMRUSH. Шпионаж за конкурентами при раскрутке сайтов

SEMRUSH. Шпионаж за конкурентами при раскрутке сайтов Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...

09 04 2025 20:47:18

15 статей о контент-маркетинге — от идеи до размещения

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

08 04 2025 23:13:50

Как исключить площадки в Google Рекламе и сэкономить деньги — реклама мобильных приложений

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

07 04 2025 9:24:36

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

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

06 04 2025 20:11:18

Как сделать в Google Web Designer анимированные баннеры для рекламных кампаний

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

05 04 2025 11:29:36

Как создать чат-бот для Telegram-канала — инструкция для администраторов

Как создать чат-бот для Telegram-канала — инструкция для администраторов Как с помощью ботов ControllerBot и BotFather упростить управление каналами и разнообразить контент....

04 04 2025 1:32:11

Руководство для брендов по Playable Ads

Руководство для брендов по Playable Ads Рассказываем о перспективном формате рекламы, который привлекает внимание потребителя даже в эпоху повсеместной «баннерной слепоты»....

03 04 2025 2:25:43

Как массово удалить в интернет-магазине страницы товаров, которые не приносят трафик

Как массово удалить в интернет-магазине страницы товаров, которые не приносят трафик Инструкция с применением языка R. Полезно веб-аналитикам, которые работают с крупными интернет-магазинами. Например, на сайте еженедельно появляется примерно 1000 новых наименований и такое же количество позиций переходит в статус «нет в наличии»....

02 04 2025 14:34:45

8 сервисов для аудита мобильной версии сайта

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

01 04 2025 5:29:16

13 неочевидных и пpaктически применимых SEO-фишек — круглый стол 8P 2017

13 неочевидных и пpaктически применимых SEO-фишек — круглый стол 8P 2017 Лучшие идеи круглого стола о SEO с участием Тараса Гущи, Сергея Карпенко, Алексея Чекушина, Дмитрия Шахова и других экспертов...

31 03 2025 20:21:21

Как получать деньги из YouTube

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

30 03 2025 21:20:19

Настройка динамического ремаркетинга в Google Ads — пошаговое руководство

Настройка динамического ремаркетинга в Google Ads — пошаговое руководство Динамический ремаркетинг: как вернуть посетителя на сайт и продать, когда человеку «надо ещё подумать»....

29 03 2025 10:15:28

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

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

28 03 2025 22:19:14

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

О неправильных тpaктовках отчета по времени загрузки страниц сайта в ***ytics...

27 03 2025 14:22:28

Как увеличить CTR и open rate в email-рассылках: получаем больше переходов на сайт

Как увеличить CTR и open rate в email-рассылках: получаем больше переходов на сайт Делимся советами по оптимизации рассылок. Важны новые форматы писем, предварительное тестирование, смена тем письма, ярче CTA. Все это в сочетании с понятностью и искренностью не заставит ждать хороший CTR...

26 03 2025 5:48:39

Почему мы играем или не играем в игры

Почему мы играем или не играем в игры Николь Лаззаро из XEODesign провела исследование о том, почему мы играем или не играем в игры....

25 03 2025 20:55:29

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