420

Аудит сайта vedonlyontibonukset.com

Сайт — https://www.vedonlyontibonukset.com/

№ 1

Белая подложка контента сжимает содержимое, лишает воздуха

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

Аудит сайта vedonlyontibonukset.com 1
Аудит сайта vedonlyontibonukset.com 2

№ 2

Маленький отступ между блоками. Не хватает воздуха, все прижато друг к другу.

— Решение: увеличить отступы и межстрочный интервал. Показал в следующем скрине.

Аудит сайта vedonlyontibonukset.com 3

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

Аудит сайта vedonlyontibonukset.com 4

№ 3

Дублирование логотипа. По факту сейчас заголовок повторяет логотип,

— Решение: на его место нужно поставить подзаголовок «Suomen kattavin urheiluvedonlyöntiin keskittyvä sivusto». Так пользователь увидит и логотип и заголовок, ему не нужно будет тратить время, чтобы посмотретьн на дублирование дважды.

Аудит сайта vedonlyontibonukset.com 5

№ 4

Иконки состояний мне непоняны, нужно сделать их информативнее, добавить слова.

— Решение: добавит слова

Аудит сайта vedonlyontibonukset.com 6

Обыграть это как-то так.

Аудит сайта vedonlyontibonukset.com 7

№ 5

Информация в карточках по центру + все сжато.

 — Решение: выравнять по левому краю, добавить больше свободного пространства, выделить важные для пользователя даные. Матч в заголовке будет важнее, чем лига, потому что логотип лиги уже есть в карточке. Также можно добавить иконки к данным, чтобы можно было быстрее считывать информацию.

Аудит сайта vedonlyontibonukset.com 8

№ 6

Сейчас скругление не на всех углах, это бросается в глаза.

— Решение: сделать скругление по всем углам.

Аудит сайта vedonlyontibonukset.com 9

№ 7

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

— Решение: затемнить изображение, выравнять текст по левому краю, сделать текст белым. Возможно увеличить заголовки. Кнопки убрать и сделать кликабельным всю карточку новости. А заголовок сделать с подчеркиванием, чтобы ссылка была нагляднее.

Аудит сайта vedonlyontibonukset.com 10
Аудит сайта vedonlyontibonukset.com 11

№ 8

Отступы списка конфликтуют с другими вертикальными элементами. Сделать их меньше, пикселей 5.

Аудит сайта vedonlyontibonukset.com 12

№ 9

Слишком жизные подчеркивания, отвлекают от самого текст ссылок.

— Решение: сделать подчеркивания аккуратнее.

Аудит сайта vedonlyontibonukset.com 13

№ 10

В подвале seo-текст отвлекает от ссылок и формы подписки.

— Решение: форму подписки увеличить, написать о преимуществах, сделать небольшой редизайн. Seo-текст разместить ниже мелким шрифтом, так как для поисковиков не имеет значения, 12 он пикселей или 18.

Аудит сайта vedonlyontibonukset.com 14
Аудит сайта vedonlyontibonukset.com 15

№ 11

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

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

Аудит сайта vedonlyontibonukset.com 16
Аудит сайта vedonlyontibonukset.com 17

№ 12

Когда на карточке нет кнопки, она воспринимается как вверх высокой карточки.

— Решение: добавить серую кнопку, так будет видно, что он недоступен сейчас.

Аудит сайта vedonlyontibonukset.com 18

№ 13

Ошибки валидатора w3c

Аудит сайта vedonlyontibonukset.com 19

№ 14

Синее пространство не имеет какой-то цели или важности. По кнопке нужно целиться.

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

Аудит сайта vedonlyontibonukset.com 20
Аудит сайта vedonlyontibonukset.com 21

№ 15

При ширине 979 пикселей текст в карточках новостей разваливается.

— Решение: переделать карточки так, чтобы изображение было отдельно.

Аудит сайта vedonlyontibonukset.com 22
Аудит сайта vedonlyontibonukset.com 23

№ 16

Я спустился в подвал и хочу быстро вернуться наверх, но не знаю как это сделать. Нет ни закреплённой шапки, ни кнопки «вверх».

— Решение: добавить кнопку «вверх», которая будет скроллить вверх страницы или закрепить шапку при скролле.

Аудит сайта vedonlyontibonukset.com 24

№ 17

На 768 пикселях разваливаются карточки. Их сложно воспринимать.

— Решение: переработать карточку на мобильном, сделать их шириной 50% на планшете, 100% на мобильном.

Аудит сайта vedonlyontibonukset.com 25

№ 18

Из-за маленького отступа я не понимаю, где заканчивается одна карточка и начинается другая.

— Решение: учеличить отступ между карточками.

Аудит сайта vedonlyontibonukset.com 26

№ 19

Из-за ширины карточек и маленькими отступами все смешивается. Из-за цветных шапок карточек «вес» кнопки снижается и я её уже не замечаю.

— Решение: попробовать избавиться от цветных шапок, увеличить ширину карточки при ширине <768 и добавить отступы между строками.

Аудит сайта vedonlyontibonukset.com 27
Аудит сайта vedonlyontibonukset.com 28

№ 20

Из-за отсутствия границ я не понимаю, где верх, где низ, и на какую карточку я ставлю вето.

— Решение: добавить границы,

Аудит сайта vedonlyontibonukset.com 29

№ 21

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

При клике на кнопку «valikko» при открытии она не меняется, то есть я не вижу очевидных элементов для закрытия меню.

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

Аудит сайта vedonlyontibonukset.com 30
Аудит сайта vedonlyontibonukset.com 31

№ 22

Убрать грязные тени у текста

Аудит сайта vedonlyontibonukset.com 32

№ 23

Добавить отступ между табами на мобильном.

Аудит сайта vedonlyontibonukset.com 33

№ 24

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

Это гипотеза, надо тестировать на пользователях.

Аудит сайта vedonlyontibonukset.com 34

№ 25

Примерно 30% css не используется и может быть удалён. Скорее всего сетка и фреймворки.

Аудит сайта vedonlyontibonukset.com 35

№ 26

Сейчас активна первая ссылка, но она не показана явно.

— Решение: изменить стиль активной кнопки, сделать его как при наведении

Аудит сайта vedonlyontibonukset.com 36
Аудит сайта vedonlyontibonukset.com 37

№ 27

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

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

Первый скрин: как сейчас, второй: как можно сделать

Аудит сайта vedonlyontibonukset.com 38
Аудит сайта vedonlyontibonukset.com 39

Css-стили

По мере аудита я выписывал css-стили, которые я заменил. Возможно они пригодястя вам при разработке.

.main {
  background-color: #fff;
}

.main-text {
  padding: 15px;
}

.main-text p {
  line-height: 1.6;
}

.topplista-casinon, .main-text {
  box-shadow: unset;
}

.topplista-casinon {
  margin-bottom: 40px;  
}

.tab-link, .tab-link.w--current, .tab-link-2, .tab-link-3 {
  box-shadow: unset;
  margin-right: 15px;
}

.w-tab-content {
  margin-top: 20px;
}

.text-link-footer {
  color: rgb(209 207 207);
  border-bottom: 1px solid rgba(209,207, 207, 0.3);  
}

.collection-item-23 {
  margin-bottom: 10px;
}


@media screen and (max-width: 991px) {
  .navbar-mobile {
    padding: 0;
  }
  .navbar-mobile-main-link {
    padding: 15px 0;
    width: 100%;
    display: block;
    margin: 0;
    border-radius: 0;
    border: none;
    color: #000;
  }
  .navbar-mobile-link-popup, .dropdown-link-50 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    color: #222;
  }
  .navbar-mobile-drop-list.w--open {
    padding-left: 20px;
    margin-bottom: 20px;
    background-color: #fff;
  }
  .text-block-105, .text-block-106, .text-block-104, .bold-text-22, .bold-text-21, .bold-text-27  {
    color: #000;
  }
}
Поделиться
Отправить
Линкануть
Вотсапнуть
← К списку проектов