Как улучшить UX/UI сайта — семь советов по юзабилити
Если пользователь зашел на сайт из поисковика, побыл на нем какое-то время, а затем вернулся к поиску, робот сделает вывод, что сайт недостаточно хорош. Пользователь не нашел на нем то, что искал, значит сайт не достоин первых позиций выдачи и понизит его. Так работают алгоритмы поисковых систем, когда ранжируют сайты по запросам.
Юзабилити — один из главных факторов, влияющих на поведение пользователей и, как результат, на его видимость в интернете. Вот почему я, SEO-специалист, даю советы по юзабилити сайтов.
Как улучшить UX сайта — 12 советов по юзабилити С момента публикации
Краткое содержание этого выпуска:
- Как выглядит годный логотип.
- Как корректно оформить ссылки.
- Как сделать четкую кнопку.
- Как подобрать цветовую гамму для сайта.
- О чем помнить перед выбором фотографии.
- Как ставить отступы в соответствии с теорией близости.
- Как оформить таблицу.
Как выглядит годный логотип
Логотип лучше размещать в верхнем левом углу. Большинство людей читает слева направо, и это будет первое, что они увидят. Если адаптивной верстки нет, а размер экрана небольшой, браузер обрезает именно правую часть страницы.
VS.
Под логотипом уместно разместить пояснение — чем занимается проект:
Важно выбрать шрифт для логотипа так, чтобы он соотносился с тематикой сайта. Жирный шрифт с толстыми начертаниями букв создает ощущение надежности, стабильности и тяжеловесности. Отлично подойдет для использования в тематиках, связанных с недвижимостью, автомобилями, строительством и так далее.
Шрифт с тонкими, вытянутыми линиями хорошо подойдет для тематик, которые ассоциируются с красотой. Частично это связано со стереотипом: «стройный значит красивый».
Чтобы передать скорость, можно использовать курсив или наклонный шрифт, так как объекты, которые движутся быстро, кажутся размытыми и наклонными:
В логотипах компаний доставок:
Ссылки по теме:
- Как расположение логотипа влияет на юзабилити вашего сайта.
- 27 психологических тактик создания идеальной рекламы.
Как корректно оформить ссылки
Ссылки должны подчеркиваться, чтобы пользователь мог сразу сориентироваться, где находится ссылка, не наводя на неё курсор. Сейчас половина трафика поступает из мобильных устройств, а там пользователи просто нажимают на экран. Исключение — ссылки в меню.
Анкор ссылки должен соответствовать тому, что увидит пользователь, перейдя на страницу.
Хорошо:
Плохо:
Если действие важно для бизнеса, лучше использовать кнопку. Например, для оформления заказа.
Стоит помечать ссылки, на которые пользователь уже нажимал. Посещенные ссылки можно выделить более темным оттенком того же цвета, а непосещенные — более ярким. Так мы словно призываем пользователя кликнуть по ссылке.
Еще одно правило. Ссылки, при клике по которым происходит какое-то действие без перезагрузки страницы, отображаются прерывистой подчеркнутой линией. Это может быть появление окно справки, как иногда делают на новостных сайтах. В остальных случаях ссылку лучше подчеркивать сплошной линией.
Перед линками, которые ведут на файлы для скачивания можно поставить значок, соответствующий формату документа:
Статья по теме: «Юзабилити ссылок».Как сделать четкую кнопку
Если кнопка темнее фона, обводку лучше сделать более темного цвета, чем цвет кнопки.
Если фон темнее кнопки, обводка должна быть темнее цвета фона:
У кнопок могут быть четыре состояния: простое (input{}), наведение мыши (input:hover{}), нажатие (input:active{}), неактивная (input[disabled=\"disabled\"]{}). Указывайте состояния кнопок, чтобы пользователю было легче понимать логику процесса.
Статьи по теме:Как подобрать цветовую гамму для сайта
Вводим несколько основных высокочастотных запросов по тематике сайта в поиск по картинкам и смотрим на цвета изображений, которые выводятся на первом экране. Нужно попытаться понять, с какими цветами ассоциируется у большинства пользователей эта тематика.
Например, изготовление тортов на заказ:
Основные цвета — белый, коричневый, красный (розовый), зеленый. Красный цвет разжигает аппетит, что актуально для тематики тортов.
Пример дизайна:
Еще одна тематика — дрессировка собак:
Основные цвета: зеленый, бежевый, коричневый, черный.
Пример дизайна в этих тонах:
Чтобы не запутаться, проще использовать не более трех-четырех цветов.
Cерый чаще всего используется для второстепенных элементов, которые должны быть на странице, но не сильно выделяться. Основная задача — расставить акценты на элементах с помощью контраста цветов.
Ссылки по теме:- ColorScheme.ru — инструмент для подбора цветов и генерации цветовых схем) ;
- Flat UI Color — цвета для Flat-дизайна;
- Цветовые схемы в веб-дизайне: шесть советов для начинающих (оригинал, перевод) ;
- Статья про юзабилити и цвета.
О чем помнить перед выбором фотографии
Лучше заранее продумать пропорции и максимальный размер фотографий, которые будут использоваться на сайте. Так как мобильные устройства ресайзят картинки автоматически, для них не нужно ограничивать размер изображений , но стоит следить, чтобы картинка не была слишком маленькой.
Чтобы изображения помещались в окне браузера с учетом различных панелей и полос прокруток, рекомендуется использовать ширину 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].
Как ставить отступы в соответствии с теорией близости
Это небольшая и на мой взгляд, очень полезная рекомендация, помогающая организовать элементы на сайте и расстояния между ними.
Основной принцип в том, чтобы делать внутренние отступы внутри элементов или блоков меньше, чем внешние.
Полезные статьи:- Теория близости (Habrahabr) ;
- Правило близости (DesignPub).
Как оформить таблицу
Просто гифка об оформлении таблиц.
Как построить диаграмму и не облажаться Читайте детально о том,
- Стив Круг, «Не заставляйте меня думать».
- Робин Вильямс, «Дизайн для недизайнеров».
- Артемий Лебедев, «Ководство».
Выводы
- Логотип лучше размещать в верхнем левом углу. Шрифт для логотипа должен соотноситься с тематикой сайта.
- Ссылки должны подчеркиваться, анкор должен соответствовать тому, что увидит пользователь.
- Если действие пользователя важно для бизнеса, лучше использовать кнопку.
- Если кнопка темнее, чем фон, на котором она расположена, обводку лучше сделать более темного цвета, чем цвет кнопки.
- С помощью поиска по картинкам поймите, с какими цветами ассоциируется у большинства пользователей эта тематика, и оформляйте сайт в соответствующей цветовой гамме.
- Чтобы изображения помещались в окне браузера с учетом различных панелей и полос прокруток, рекомендуется использовать изображения шириной 900-1000 пикселей и высотой 600-700 пикселей.
- Внутренние отступы в элементах на странице должны быть меньше, чем внешние.
- Цель таблицы — показать информацию наглядно. Поэтому убирайте лишние данные, разделители и цветовые выделения «для красоты».
Комментарии:
Доля органического трафика увеличилась с 14% до 44%, а небрендового — на 184%....
05 12 2023 6:19:26
Определение частотности запросов — задача первоочередной важности для составления адекватного семантического ядра, наполнения качественным контентом и контекстной рекламой...
04 12 2023 23:56:59
Менеджер экспортного направления Гугл Украина — об особенностях выхода на рынки разных стран мира....
03 12 2023 7:10:12
Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...
02 12 2023 4:13:56
Кейс продвижения YouTube-канала магазина товаров для рыбалки...
01 12 2023 7:57:13
Видеомаркетинг должен стать обязательной частью рекламной онлайн-стратегии, и мы собрали несколько подтверждений этому в нашей инфографике....
30 11 2023 12:42:32
Быстро разогнать рекламные кампании и получить рост конверсий при повышении CPA до 100%. Как этого добиться — читайте в новом кейсе....
29 11 2023 2:14:15
Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....
28 11 2023 2:30:14
Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...
27 11 2023 3:37:16
Конкректная цель — конкретные результаты трудоустройства...
26 11 2023 8:23:28
Как увеличить охват целевой аудитории ресторана или магазина с помощью рекламы на мобильных и сверхточного геотаргетинга...
25 11 2023 5:16:24
Десктопная версия, совместная работа (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....
21 11 2023 2:28:48
Онлайн-корпоративы стали трендом 2020 года, но останутся с нами надолго если не в чистом, то в гибридном формате. Делимся опытом организации дня рождения компании в Zoom....
20 11 2023 13:46:36
Лучшие плагины WordPress для SEO и продвижения сайта в поисковой системе Google и 10 советов для WordPress, которые помогут вам продвигать свой сайт...
19 11 2023 22:35:50
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
18 11 2023 0:57:57
И эксперт, и агент. Анонимный покупатель — специальная проверка бизнес-процессов до и во время рекламной кампании...
17 11 2023 2:22:34
Сет по контекстной рекламе в тематике «разработка программного обеспечения»: снижение стоимости клика на 89%....
16 11 2023 21:45:56
Где найти лидера для своей инхаус-комaнды маркетологов...
15 11 2023 0:12:16
Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...
14 11 2023 21:41:42
Что значит всемирное обновление DMCA-алгоритма и приведет ли оно к полноценной защите авторских прав?...
13 11 2023 6:28:58
Правила преобразования фидов в Google Merchant Center помогут сегментировать товары и сделать вашу рекламу более эффективной...
12 11 2023 19:12:19
Что делать, если нет четкой модели оценки эффективности контекстной рекламы?...
11 11 2023 18:37:40
Лестные отзывы от клинта в интернете невозможно переоценить. Если вы владелец малого бизнеса и только разpaбатываете и внедряете свою маркетинговую стратегию, книга «По рекомендации» будет вам полезной...
10 11 2023 3:22:26
Один из самых известных отчетов в Google ***ytics «Аудитория/Обзор». Но кроме него есть еще несколько, которые будут весьма полезны для вашего блога. Какие именно, читайте дальше....
09 11 2023 15:21:58
SEOmoz создал систему, которая определяет релевантность страницы поисковому запросу....
08 11 2023 3:28:55
Если вы автор телеграм-канала, то стоит задуматься об альтернативных контент-платформах. Мнение...
07 11 2023 5:38:37
Метод не для всех, но увлеченным веб-аналитикой точно понравится!...
06 11 2023 16:42:27
10 базовых правил оформления онлайн-таблиц. Оформление — основа таблицы. Как работать со столбцами и ячейками, комментариями и примечаниями, делать корректные цветовые выделения. Читайте далее....
05 11 2023 23:26:39
1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....
04 11 2023 16:50:50
Хотите говорить с клиентами? Пишите им в телеге. Для этого важно продвижение телеграм-канала. Что и как делать для раскрутки — подробная инструкция....
03 11 2023 9:29:32
Как анализировать конкуренты и делать правильные выводы для развития бизнеса....
02 11 2023 17:31:39
Подбор правильного инструмента для визуализации данных может сэкономить время и ресурсы компании, а также повысить общую продуктивность маркетинга...
01 11 2023 18:11:25
Публикуем тему с закрытого аналитического форума Netpeak про «звездочки» как инструмент оценки релевантности контента....
31 10 2023 7:13:47
Алгоритм настройки и запуска рекламы для SMM-, PPC-специалистов, блогеров и владельцев бизнеса....
30 10 2023 8:21:35
Обновление от Google: похожие аудитории можно использовать не только для медийных, но и для поисковых и торговых кампаний...
29 10 2023 18:12:48
От создания аккаунта до выбора пикселя — просто и понятно про TikTok....
28 10 2023 3:22:18
Всё о крупной рыбе украинского интернет-маркетинга: компании, люди, кейсы в интервью с основателем Артёмом Бородатюком....
27 10 2023 14:19:48
Как рекламировать смартфоны в YouTube — советы крупному бизнесу по настройке и запуску эффективной рекламы. Важно: корректный анализ результатов. Узнайте как его сделать!...
26 10 2023 12:44:36
Реклама мобильных приложений. Хотите показывать рекламу в играх? Вам сюда. Узнайте как правильно настроить показ рекламы на мобильных устройствах....
25 10 2023 1:46:30
Подробнейшая статья об эффективном использовании ремаркетинга. Мотаем на ус!...
24 10 2023 5:14:24
Структура обзора, правила написания и важные хаpaктеристики этого формата. Подача информации в обзоре и запрещенные методы, которые отпугнут клиентов. Узнать больше!...
23 10 2023 10:37:57
Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...
22 10 2023 18:32:20
Исследование по 38,5 миллионам кликов в 22 тематиках в 391 городе страны....
21 10 2023 15:15:31
Представление — это уровень доступа в аккаунте Google ***ytics. На уровне представления можно предоставить или ограничить доступ пользователей к отчетам и аналитическим инструментам...
20 10 2023 22:44:14
Основатель фейсбука опубликовал на WIRED крутое интервью...
19 10 2023 9:44:49
Рецензия на книгу «Нейромаркетинг в действии» Дэвида Льюиса...
18 10 2023 11:31:23
Визуализация данных для новичков. Отвечаем на вопрос читателя....
17 10 2023 19:43:47
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
