Аудит сайта 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;
  }
}

Аудит сайта SilverCinema

Сайт — https://silvercinema.ru

— Исправлено 11 из 14 проблем

Неправильные окончания

Мы не говорим: «Три кинозалов» или «421 удобных кресел»

Аудит сайта SilverCinema 40
Как было

Как надо

Правильные окончания для всех слов с числами.
25 залов, 3 зала, 523 кресла.

Написал для этого код на php.
https://gist.github.com/Postnov/06f3f87c10ae0e0b8f55740bcf56f646

Дублирование соц. сетей

Может быть они ведут в разные места? Я не знаю.

Аудит сайта SilverCinema 41
4 кнопки соц. сетей

Как исправить?

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

Форма не обрабатывает ошибки

Не умеет подсказывать где именно я допустил ошибку и как надо вводить правильно. Моё имя ей тоже не понравилось. Поля не помечены как обязательные.

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

Аудит сайта SilverCinema 42
«Даниил» — запрещенка

Как исправить?

1. Выделите обязательные поля
2. Добавьте placeholder в поля, чтобы было понятно, как правильно вводить.
3. Заблокируйте кнопку, пока не заполнены обязательные поля.
4. Если данные заполнены неверно, расположите сообщение об ошибке сразу после поля, и не забудьте написать, как правильно.

Некликабельный номер

Аудит сайта SilverCinema 43
Не кликабельный номер

Как надо

Все номера телефонов должны быть кликабельными и выделены как ссылки. Пользователю уже привыкли к звонку при клике на телефон.

Нет названий фильмов — исправлена

Хочу заранее видеть их и не думать как узнать название.

Аудит сайта SilverCinema 44
Набор картинок на главной странице

Как исправить?

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

Область клика

Кто хочет целиться в ссылку? Слишком малая область клика. Прочитайте про закон Фиттса. Все привыкли кликать в изображение и попадать на страницу. Даже если кто-то захочет прицелиться в ссылку и не попадет — все равно перейдет на страницу

Аудит сайта SilverCinema 45
Малая область клика

А про мобильное попадание в ссылку даже говорить не хочется.
Что если я вижу плохо? Или палец дрожит из-за болезни?

Аудит сайта SilverCinema 46
Добро пожаловать на соревнование по стрельбе пальцем.

Как надо

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

Пустота в подвале

На странице вакансии мало контента, разработчики не предусмотрели то, что может быть мало контента и оставили как есть. А подвал просто поднялся вверх. У меня в блоге можно прочитать, как избавиться от этого.

Аудит сайта SilverCinema 47
Пустота в подвале

Что делать?

Прочитать мою статью и сделать «выталкивание подвала контентом»

Ссылка-обманщица

Вижу синий цвет телефона, думаю что это ссылка, кликаю — ничего. Оказывает, это текст, который выделен синим цветом.

Аудит сайта SilverCinema 48
Некликабельный номер телефона

Как исправить?

Если текст синим цветом — это ссылка. Против этого не попрешь. Переделывать условности и привычки бесполезно. Сделать этот телефон ссылкой

Не работает крестик

Не понятно зачем он там, но из любопытства решил кликнуть — никакой реакции. Какой смысл в его размещении?

Аудит сайта SilverCinema 49
Крестик-бездельник

Как исправить?

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

Подарочные сертификаты для красоты

Захожу на страницу сертификатов, чтобы купить маме подарочный сертификат: «Вау, классные сертификаты». Как купить?

Так, сказано: «подарите, купите, наслаждайтесь» и правила использования. А купить-то как?

Аудит сайта SilverCinema 50
Сертификаты

Как исправить?

1. Разместить кнопки «Купить» под каждым сертификатом или добавить одну кнопку «Выбрать сертификат» под группой сертификатов.
2. Написать в подзаголовке: «Сертификаты можно приобрести у кассира»

Непримечательная ссылка

Кликнул просто из любопытства, пошел вызов. Откуда люди узнают что это ссылка?

Аудит сайта SilverCinema 51
Внезапно кликабельный номер

Как исправить?

Если это ссылка — выделить синим и если есть желание, подчеркнуть.

Недоработки в мобильной версии

Отсутствие адаптива. Да, есть мобильное приложение. Но я не хочу его качать ради одного-двух сеансов.

Как узнать название фильма не кликнув на картинку? А если кликну, меня перекинет или покажется название? Боюсь.

Что за белая дыра под Егором?

Аудит сайта SilverCinema 52
Егор не оплатил весь баннер, хватило только на половину

Как исправить?

1. Показать названия сразу крупным кеглем
2. Убрать косяк в блоке с Егором
3. Сделать картинку полностью кликабельной с переходом на страницу фильма

Ага, при клике все-таки показывает название. Может если кликну на видео и увижу его название? Ан нет, смотрю видео.

Аудит сайта SilverCinema 53
*Клик*
Аудит сайта SilverCinema 54
Смотрю видео

Как исправить?

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

Дыры в подвале

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

Аудит сайта SilverCinema 55

Как исправить?

Разместить виджет инстаграмма по левому краю. Кнопку обратной связи по правому краю.

При загрузке страницы ломается сетка изображений

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

Аудит сайта SilverCinema 56
Схлопываются блоки

Как нужно

Сделать фиксированной высоту блоков и вставлять туда картинки с position: absolute. Пока картинка загружается показать серый блок и его мигание — моментальная обратная связь о том, что страница загружается. Интерфейс говорит: «Пожалуйста, подожди, я стараюсь.»

Ссылка на решение: https://codepen.io/dan_postnov/full/WNvpZPQ

Моментальная обратная связь

Аудит сайта antikvariatpskov.ru

Сайт — https://www.concordia.edu.ua/

№ 1

Проблема: при клике на эту табличку идёт перезагрузка сайта. Также номер телефона не кликабелен.

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

Аудит сайта antikvariatpskov.ru 57

№ 2

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

Решение: убрать и создать антураж старины шрифтом, иконками, иллюстрациями.

Аудит сайта antikvariatpskov.ru 58

№ 3

Проблема: для чего здесь эти изображения? Они занимаюсь половину первого экрана и находятся на любой странице. Для создания антуража они не подходят, они зря занимают место. Если нужно показать где магазин, это нужно делать в современном качестве фото + карта.

Решение: отснять фото-инструкцию и добавить карту на страницу «Как добраться»

Аудит сайта antikvariatpskov.ru 59

№ 4

Проблема: вертикальная навигация по страницам. Пользователи привыкли к горизонтальной номерной навигации. Её используют повсеместно и она является лучшей практикой. Вертикальная навигация неэффективно использует пространство.

Решение: поставить элементы горизонтально в линию.

Аудит сайта antikvariatpskov.ru 60

№ 5

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

Решение: добавить кнопку «Заказать». Сделать форму с именем, количеством и временем, когда удобно будет созвониться.

Аудит сайта antikvariatpskov.ru 61

№ 6

Проблема: огромный логотип в мобильной версии. Занимает 30% экрана.

Решение: уменьшить до размера примерно 150×150 пикселей. В правой части экрана расположить телефон.

Аудит сайта antikvariatpskov.ru 62

№ 7

Проблема: на мобильном навигация по страницам наезжает на блок с категориями.

Решение: исправить проблему в вёрстке.

Аудит сайта antikvariatpskov.ru 63

№ 8

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

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

Аудит сайта antikvariatpskov.ru 64

№ 9

Проблема: пустые категории, которые занимают место.

Решение: настроить отображение только тех категорий, в которых есть товары.

Аудит сайта antikvariatpskov.ru 65

№ 10

Проблема: форматирование текста такое, что нужно прочитать все, чтобы найти нужную информацию.

Решение: Расставить акценты в тексте, добавить отступы и переносы.

Аудит сайта antikvariatpskov.ru 66

№ 11

Проблема: съехала карта, номер телефона некликабельный. Номер должен быть кликабельным, так как это позволяет нам позвонить одним кликом.

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

Аудит сайта antikvariatpskov.ru 67

№ 12

Проблема: отсутствие новостей. Если вы будете вести новости — нужно добавить еще несколько новостей и настроить в них форматирование: заголовки, абзацы.

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

№ 13

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

Решение: переименовать страницу «продажа антиквариата» в «каталог» и поместить там товары.

Аудит сайта antikvariatpskov.ru 68

№ 14

Проблема: имеет ли какую-то важно курсы валют? Если вы продаете в долларах или евро — может быть. Если нет — это лишняя информаиця.

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

Аудит сайта antikvariatpskov.ru 69

Аудит сайта imag. store

Задача

Ко мне обратились с задачей провести аудит сайта imag.store, на котором представлен ассортимент техники Apple.

Результат

Изучил сайт вдоль и попрек — просмотрел сайт под всеми разрешениями. Проверил работу всех элементов.

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

Аудит сайта для проекта «Псиблог»

Задача

На фриланс-площадке ко мне обратился Дмитрий с просьбой сделать аудит юзабилити для его блога. Договорились о том, что в установленный бюджет я буду проводить аудит в течение 4 часов.

Аудит сайта для проекта «Псиблог» 70

Результат

Три часа выискивал проблемы, описывал их и решение в отдельном текстовом формате (процесс). Я понимал, что кроме видео нужно сделать и текстовую статью для более удобного просмотра и поиска.

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

После выполнения добавил их в отчёт и записал видео по текстовому материалу.

Отрывок аудита

Отзыв

Аудит сайта для проекта «Псиблог» 71