Категория: Аудит

№ 1

Смущает изображение на заднем экране, словно мы продаём энергетики и нагнетаем.

У наших клиентов есть пара насущных проблем: нехватка времени, завал по предметам, дедлайны.

— Решение: я бы подумал о том, чтобы поставить изображение с итоговой пользой — человек веселится, пока Essay пишет за него, делает другие работы с радостным лицом. Можно сделать фоновое видео. Где студент использует сайт, а потом идёт на вечеринку или на свидание. Чтобы клиент видел фоновое видео и думал: «Хочу так же, мне надоело сидеть до ночи, хочу повеселиться и отдохнуть».

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

№ 2

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

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

№ 3

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

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

№ 4

При клике на один из FAQ с конца предыдущей секции — перекидывает в начало.

№ 5

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

№ 6

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

— Решение: на странице https://essaypro.com/order-an-essay — разместить 1 кнопку в начале и одну в конце. Чтобы человек спокойно без акцентов посмотрел скрины личного кабинета и потом нажал кнопку. Кнопку в конце можно разместить на блоке с таким дизайном:

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

№ 7

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

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

№ 8

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

На главной странице я хочу увидеть подтверждение моих проблем: «У вас нет времени — мы поможем; Вас завалило проектами — мы вытянем». Сейчас сайт общается со мной не в моём мире, а меня компания не особо волнует, мне нужно решение задачи.

Нехватает слов: «наши клиенты защитили дипломов, сдали экзамены, средняя оценка 4.95».

№ 9

Пустой текст в первых 3 пунктах. Почему качественно? Почему безопасно? Почему пунктуальные? Ответов нет.

— Решение: обновить текст так, чтобы я сам сказал: «Качество на высоте, или они пунктуальные». Надо описать, а почему вы пунктуальны:

• Пунктуальность: «Мы ставим дедлайн за 3 дня до вашего, чтобы проверить, внести правки в вашу работы»
• Качество: «Средняя оценка работ наших клиентов— 4.9. 3 этапа фильтрации работы и внесения правок»
• Безопасность: «Мы используем только email, не передаём его третьим лицам, это закреплено в оферте»

Естестенно, текст надо подгонять под потребности и сайт, но направление такое. Я должен без заголовка «Качество» так подумать о компании, за счёт фактов.

№ 10

При наведении на эти иконки они начинают становиться ярче. Это говорит мне, что я могу кликнуть. Открыть отзывы на платформе. Я кликаю — ничего не происходит, значит какая-то ошибка.

— Решение: убрать эффект при наведении.

№ 11

Какой-то элементы закрывает кнопку и накладывается на фото. Из-за картинки поверх кнопка не работает.

— Решение: убрать элемент или доработать его отображение.

Элемент:

На всех разрешениях он ведёт себя не так, как должен.

№ 12

Иллюстрацию заменить, выглядит сыро, словно блок не был доделан до конца.

№ 13

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

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

№ 14

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

Ещё проблемы:

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

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

№ 15

Проблемы с текстом на странице статьи.

Общая проблема — серый фон и серый текст. Плохой конраст, сложно читать. Либо сделать белый фон, либо текст сделать текст темнее.

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

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

Этот оффер выглядит приятно, в фирменном стиле.

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

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

№ 16

«FAQ» блоки перекрывают фиксированную шапку.

№ 17

Проблемы:

• Изображенеи не совсем помогает понять всё описание. «Залетают иконки, вылупляются иконки». Если бы это было видео, где вы собеседуете специалистов — другое дело.
• Линия чтения смещается. Заголовок начинается на одной линии, подзаголовок на другой

Решение:

• Убрать иллюстрацию, подумать о том, как иллюстрировать подбор специалистов так, чтобы я без текста всё понял. Как вариант — видео с нарезкой проверки документов, вычитки текстов.
• Если иллюстрация остаётся — поместить её в правую часть, чтобы текст был по левой части и не разрывал линию чтения.

№ 18

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

Если поменять местами заголовок и картинку — линия восприятия будет

№ 19

Кнопки авторизации слишком близко к меню, я могу не попасть в меню.

— Решение: поместить кнопки авторизации по центру.

№ 21

Кнопка сейчас ближе к форме, чем к описании.

— Решение: поднять кнопку выше.

Цена сейчас написана слишком мелко.

— Решение: увеличисть стоимость, чтобы на мобильном было удобно её просматривать.

№ 22

Через пару секунд после входа на сайт, на меня наваливается куча окон, которые занимают почти половину экрана. Куки неудобно закрывать крестик влево. Я попробовал сделать это на iPhone 12 mini — получилось попасть в 5 раза.

— Решение: сделать закрытие куки кнопкой, большой. Всплытие сообщений чата сделать по событиям. Например, человек более 10 минут находится в корзине. Может у него проблемы? Надо настроить чат, чтобы он, например по событию: «после 10 минут в корзине» выдавал сообщение: «У вас возникли проблемы с оформлением заказа? Напишите, мы вам поможем». Чат должен мне как юзеру помогать, а не надоедать.

№ 23

Блок из-за отсутствия отступов выглядит слишком сжатым.

— Решение: добавить отступов сверху и снизу.

№ 24

Проблемы:

• Важная информация скрыта за слайдером. Слайдеры часто пролистывают, не изучая следующие слайды. Если там важная информация — её надо выстаскивать.
• Нехватает срелок для перключения слайдов. Я при попытке переключить слайд скроллил сайт верх и вниз. Это дополнительно уменьшало шанс, что я изучу их до конца.

— Решение:

• Вытащить слайды из слайдера. Расположить 5 блоков друг за другом на мобильном.
• Если слайдер остаётся — добавить стрелки.

№ 25

Табы сейчас выглядят не так, как хотелось бы мне, как пользователю. Я привык, что вкладки это вкладки. Они располагаются горизонтально и под ним идёт контент.

Я попрбовал бы сделать это классическими табами.

№ 26

В этом блоке проблемы с отступами и выравниванием. Заголовок по центру, текст по левову краю, кнопка по центру, картинка по левому краю. В итоге это микро-перемещения доставляют дискомфорт.

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

№ 27

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

№ 28

Снова смещается линия чтения. Выбор языка и установка приложения из Google play стоят на одной линии. Последующие текстовые блоки стоят уже на другой линии. Подписка и возможность оплаты картами сдвигается на уровень кнопки Google play.

— Решение: выровнять элементы по левому краю.

№ 29

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

№ 30

Некоторые блоки перекрывают шапку. Проверить z-index секций главной страницы

№ 31

Проверить и доработать оптимизацию на мобильных.

№ 32

Проверить все страницы валидатором w3c и исправить ошибки в коде.

№ 33

Ошибки в семантике кода. Неправильно выбраны теги html для отображения контента.

1. Для текста используется div, а должны span или p
2. Для заголовков FAQ и seo-текста используются h2, а должны h3 или p
3. Для кнопок используются div, а должны button или a

Скриншоты неправильно-подобранных тегов.

№ 34

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

№ 35

Между «FAQ» и «Write My Essay» блок с кучей текста, который подан скучно и его не будут читать. Не понимаю, почему вопросы из «Write My Essay» не добавлены в «FAQ». Подумайте об их объединении.

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

№ 1

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

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

№ 2

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

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

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

№ 3

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

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

№ 4

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

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

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

№ 5

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

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

№ 6

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

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

№ 7

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

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

№ 8

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

№ 9

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

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

№ 10

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

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

№ 11

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

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

№ 12

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

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

№ 13

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

№ 14

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

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

№ 15

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

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

№ 16

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

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

№ 17

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

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

№ 18

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

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

№ 19

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

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

№ 20

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

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

№ 21

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

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

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

№ 22

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

№ 23

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

№ 24

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

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

№ 25

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

№ 26

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

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

№ 27

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

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

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

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;
  }
}

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

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

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

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

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

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

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

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

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

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

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

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

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

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

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

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

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

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

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

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

№ 1

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

№ 2

1. Изображения взяты с фотостоков. Это подчёркивает низкое качество контента и отношение универсистета к собственному сайту и его посетителям.
   — Решение: дать дизайнеру задачу создать изображения для событий. Можно сделать минималистичные надписи или иконки. В стилистике университета.
2. Ссылка «View all events» неоправданно занимает всю строку.
   — Решение: расположить её справа от линии, на одном уровне с «Events».
3. Изображения разного размера влияют на положение заголовка. Глазу постоянно нужно искать точку начала заголовка.
   — Решение: задать фиксированные размеры для изображения и подобрать их по размера. После этого заголовки встанут на одну линию.

№ 3

В блоке новостей среди записей зияющая «дыра». Как пользователю сайта, я не понимаю почему это выполненно именно так. Для меня это ошибка в работе сайта.

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

№ 4

Информация о приёме идёт 3 блоком. Пользователям надо пролистать не такие интересные для них события и новости, чтобы наконец дойти до информации о приёме.

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

№ 5

Текст выравнен по левому краю, кнопка по центру. Это создаёт ощущение неряшливости.

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

№ 6

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

— Решение: убрать градиенты. Они больше не появляются нигде на сайте. Они не вызывают какого-то вау эффекта и приятного ощущения.

№ 7

Один из важных блоков на главной странице спрятан в конце вкладками. А перед ним идут неважные блоки: «ConcordiaUA Stars», «ConcordiaUA Experts Opinions», «References»,"Class of 2020 Graduates"

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

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

№ 8

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

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

№ 9

Блок преимуществ расположен в самом конце, рядом с подвалом. До этой важной информации могут просто не доскроллить.
— Решение: переносим выше и объединяем с другими преимуществами.

№ 10

Блоки сгруппированы одинаовым фоном, но я бы не объединял их, потому что преимущства обучения и информация о том, что вы выпускаете квалифицированных специалистов — разные вещи для пользователя.

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

№ 11

Плохая вёрстка подвала. Появляется «дыра» и не занят правый нижний угол. В итоге композиция рассыпается.

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

Сделал быстрый набросок композиции.

№ 12

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

№ 13

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

№ 14

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

Слишком много акцентов. Некоторые выделены зелёным, некоторые жирным. Я не понимаю что из этого важнее. Кнопки выделены зелёным. Я предполагаю, что текст, выделенные зелёным — ссылка. Пытаюсь кликнуть — ничего не происходит.

— Решение: определиться с стилистикой кнопок, ссылок, акцентов. Использовать минимум ацентов. Когда важно всё — неважно ничто.

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

№ 15

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

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

№ 16

Карточку преподавателя можно улучшить:

1. Подобрать качественные изображения
2. Сделать разный стиль для элементов карточки
3. Убрать излшне «кричащие» элементы

Редизайн карточки. До и после

№ 17

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

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

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

№ 18

Почти все поля в форме — обязательные. Проще написать, какие необязательные.

— Решение: убрать упоминание о звездочке и обязательных полях. Пометить необязательные.

№ 19

Выбор из 2−3 вариантов не нужно делать выпадающим списком. Это избыточно, создаёт лишний клик.

— Решение: сделать выбор варианта не select, а radio-кнопками

№ 20

В тексте много отсупов, его сложно читать. Не выделены ссылки и заголовки.

— Решение: выравнять текст по левому краю. Сделать заголовки крупнее. Выделить ссылки цветом.

№ 21

Почти одинаковые отступы у кнопки начинают смущать, ловишь себя на мысли: «а не перепутали-ли что-то здесь?».

— Решение: подвинуть элементы ближе к изображению.

№ 22

Изображение по центру нарушает поток восприятие по левому краю. Также нарушает поток восприятия элементы, начало которых не выравнено по левому краю.

— Решение:

1. Выравнять изображение по левому краю.
2. Линию Prev/Next растянуть на всю ширину контейнера
3. Shares и иконки расположить слева.

№ 23

Не понимаю, зачем в статье, на которую я перешёл стоит ссылка «Read more». Я уже пришёл читать статью.

Если это что-то отдельное от контента статьи — это нужно выделить либо линией, либо фоном. Но в таком случае, а не понимаю, где контент статьи.

№ 24

Если комментариев 0 — этот элемент вообще можно не показывать. А показывать только тогда, когда комментарии появятся.

№ 25

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

— Решение: сделать телефоны и email кликабельными.

№ 26

Смешиваются цветовые акценты. По главной странице я привык, что зелёная кнопка — акцент и действие. На этой странице всё смешивается.

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

№ 27

Кнопка скрытия не работает

№ 28

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

№ 29

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

№ 30

Эту таблицу нужно упрошать. Сейчас в ней даже разбираться не хочется. Слишком много переплетений колонок и строк.

№ 31

Таблица сейчас выглядит перегруженной и занимающей много пространства. Её можно упростить. Результат ниже.

Фразу «Entrants with basic and complete higher education» можно либо убрать, если она не несёт большой пользы, либо вынести за таблицу. Серый цвет строки появляется при наведении.

№ 32

После перехода на стрницу программы, мне не хватает кнопки «Поступить/Выбрать»

№ 33

Нужно поправить отступ в колонке сбоку.

№ 34

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

Как-то так.

№ 35

Много линий, разные отстутпы, пространство разделено неравномерно.

Предлагаю 2 варианта решения. Либо выравание по левому краю, либо аккуратная шахматная сетка. Во втором варианте контент тот же, но выглядит аккуратнее.

№ 36

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

— Возможное решение:
1. Сделать блок с нужной информацией для абитуриентов на первом экране: заголовок, подзаголовок, несколько самых важных ссылок, кнопка связи.
2. Избавиться от слайдера. Слайды разместить как отдельные блоки в других частях сайта, где они будут уместны.

№ 37

Кнопка в слайде не выглядит как кнопка.

— Решение: сделать загругленные края и сменить цвет на зелёный.

№ 38

На планшете под линию с 3 элементами выделено слишком много места.

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

№ 39

На планшете разъезжаются блоки у программ.

№ 40

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

№ 41

Некоторые пункты обрезаются наполовину. Меню можно увеличить где-то на 80−100% без потери удобства.

№ 42

Сетка на странице «About us» сломалась на мобильном.

№ 43

На странице «about us» фото пропали, но огромные отступы остались.

№ 44

В подвале линии уже не нужны, отсупы можно уменьшить.

№ 45

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

№ 46

Непонятно, связаны ли эти столбцы. Почему заголовок у второго блока есть, а у первого нет. Где «Program» — это общие программы, а «Bachelor Degree» — программы блока?

Таблицы вызывает больше вопросов, чем ответов. Нужно её дорабатывать. + те же самые правки по выравниванию и упрощению, как в № 31

№ 47

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

№ 48

Текст в таких плашках лучше делать меньше и выравнивать по левому краю

№ 49

Просмотрите все таблицы и адаптируйте их на мобильном. С мобильного это воспринимать тяжело.

№ 50

Эта карточка делает flip при наведении на ПК. На мобильном обратная сторона появляется только при клике, то есть теряется, потому что никто не будет кликать на эту карточку.

№ 51

Схлопнулись карточки и их кнопки.

№ 52

Сместились цветовые акценты. Линии стали зелёными, кнопки синими.

— Решение: поменять цвета. Кнопки зеленые, линии синие.

Сайт — antikvariatpskov.ru

№ 1

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

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

№ 2

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

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

№ 3

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

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

№ 4

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

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

№ 5

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

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

№ 6

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

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

№ 7

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

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

№ 8

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

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

№ 9

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

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

№ 10

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

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

№ 11

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

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

№ 12

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

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

№ 13

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

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

№ 14

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

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

Задача

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

Результат

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

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

Текстовый аудит

№ 1 — отсутствуют элементы, идентифицирующие сайт

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

Решение: Создать логотип и описание слева. Меню расположить справа и показать ссылки сразу. Чтобы пользователь без дополнительных кликов мог попасть на страницы: доставка, сервис, отзывы, трейд-ин.

№ 2 — прокрутка сайта

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

Решение: Отключить прокрутку, когда открыто меню.

№ 3 — заголовки и активный пункт меню

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

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

№ 4 — шрифт цены

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

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

№ 4 — блок с контактами

Проблемы:

1. Большая разрядка текста. Нужно убрать свойство, которое добавляет между буквами расстояние. Если это заголовок — нужно выделить его размером и жирностью
2. Город и адрес ближе к номеру телефона, нежели к слову «Адрес». Это нарушает правило внутреннего и внешнего, из-за ошибки элементы считываются неправильно.
3. Ошибка в слове «Адресс»

Решение:

1. Убрать разрядку текста. Выделить заголовок размером и жирностью — http://joxi.ru/Drl37poc0DjxGA
2. Выровнять расстояния так, чтобы элементы не влезали в границы других элементов.
3. Убрать ошибку в слове

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]

№ 5 — статичная карта

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

Решение: поставить яндекс карту с такой же позицией.

№ 6 — иерархия в детальной

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

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

№ 7 — некорректное отображение латиницы и цифр

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

Решение: подобрать шрифт, который будет отображать цифры и латиницу корректно. В примере бесплатный шрифт «Rubik»

№ 8 — характеристики абзацем

Проблема: характеристики товара одним абзацем. Характеристики — это показатели товара. Считывать их в формате абзаца сложно непонятно где начинается и заканчивается характеристика.

Решение: сделать характеристики товара таблицей. Пользователи к этому привыкли. Это удобный формат для предоставления таких данных.

№ 9 — не выделена цена

Проблема: в каталоге и детальной не выделена цена. Цена — акцентный элемент, который ищет множество пользователей. В данный момент она не выделена и приходится всматриваться, чтобы найти её.

Решение: выделить цену жирностью и размером.

№ 10 — неакцентные кнопки

Проблема:

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

Если мы делаем её дизайн таким, что она не выглядит как кнопка — это снизит конверсию. «Взять в кредит» и «доставка» — вспомогательные элементы.

Решение:

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

№ 11 — неправильные расстояния

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

Решение: Опусти заголовок ниже, рядом с изображением.

№ 12 — страница доставки

Проблемы:

1. Размер заголовка меньше, чем номер телефона.
2. Стоимость, режим и время доставки не расписаны.
3. Плохая композиция страницы — не выделены ключевые элементы, элементы не используют доступное место страницы.

Решения:

1. Заголовок должен быть крупнее чем номер и почта.
2. Стоимость, режим и время доставки нужно расписать детальнее
3. Сделать новую композицию страницы, где информация подана чётко и легко считывается с помощью заголовков.

№ 13 — фальшивость отзывов

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

Решение: взять у покупателей аудио или видео-отзывы, на которых будет виден и человек и товар.

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

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

№ 14 — скучный текст

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

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

№ 15 — полотно текста

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

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

№ 16 — отсутствие сопутствующих товаров

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

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

№ 17 — разделы в футере

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

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

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]

№ 18 — некликабельный номер

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

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

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta. В скором времени они будут загружены без иконок этих компаний]

№ 19 — наложение кнопки меню

Проблема: в версии для планшетов нужно отделить категории и иконку меню, чтобы можно было попасть по категории «Аксессуары»

Решение: Отделить категории и иконку меню, чтобы можно было попасть по категории «Аксессуары». У категорий можно сделать отступ справа, который оставит место для кнопки меню.

№ 20 — категории не влезают в экран

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

Решение: сделать иконки в 2 ряда либо сделать выпадающий список

№ 21 — максимальная ширина изображений

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

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

№ 22 — размер текста на мобильном

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

Решение: увеличить размер текста на мобильном

№ 23 — дизайн страницы «Покупка»

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

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

№ 24 — подсказки полей

Проблема: я не знаю, в каком формате вводить информаци. ФИО или имя? Адрес, это с обласью и индексом или улицы и дома будет достаточно?

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

№ 25 — поле с комментарием

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

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

№ 26 — требовательность полей

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

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

№ 27 — одна страница на разные действия

Проблема: при клике на кнопки «Купить» и «Оформить в кредит» открывается одна и та же страница.

Решение: сделать 2 отдельные страницы. Одна — покупка, вторая — оформление в кредит. Поставить заголовки и изменить названия кнопок на странице оформления: «Купить», «Оформить в кредит»

№ 28 — адаптивность страницы «Покупка»

Проблема: взаимодействовать с элементами на странице покупки не возможно из-за ошибок в адаптивности.

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

Задача

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

Результат

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

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

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

Отзыв