Сайт www.fotosklad.ru: замечания по юзабилити сайта и SEO

Ресурс www.fotosklad.ru встречался мне и ранее. Давайте взглянем на юзабилити и SEO параметры этого ресурса подробнее, с точки зрения придирчивого и привыкшего только к хорошим интерфейсам пользователя.

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

1. Расположение элементов на первом экране.

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

первый экран fotosklad.ru для сайта blogtornado.ru

Если посмотреть на рекламную составляющую, то можно заметить три вида баннеров. Три? Нет, лишь один. Остальные вводят в заблуждение не только текстовой содержащей, но и своим предназначением — зачем они тут? Слайдер — понятно. Ниже «хвалебный» баннер, в стиле «мы самые лучшие» — так пишут многие, и это уже точно никого не мотивирует. Баннер некликабельный. Два баннера по сторонам. Они совсем непонятные. Засветлены — ясно, зачем. Для человека не из тематики слово TAMRON и цифры «16-300» ничего не значат и привносят некую навязчивость, когда ты не понимаешь терминов, но должен слушать про акцию или смотреть на неё. + некликабельно, + нет слова «подарок» —  «подарок 1500 рублей при покупке объектива» — лучше, чем без слова подарок, люди любят подарки. 🙂

2. Главная функция большого каталога товаров — поисковик!

Следующий самый большой недостаток огромного каталога товаров. Как искать? Опыт пользователя может давать сценарий, который очень привычен для пользователя, потому как это все каждый день мы видим в обоих поисковиках. ПОДСКАЗКИ!

Итак, что делал я сам. Подумал, что надо найти микрофон, Ввожу мик.. ро.. фон.. жду, ничего не происходит, начинаю думать, что я не так ввел? С опечаткой или, может, микрофонов тут нет? Странно.. Зашел на сайт ulmart — у них то же самое. Но конечно же, у Яндекса не может быть так же — они-то знают, как помогать искать. Просто подсказки — это так помогает в юзабилити поисковика! Уверен, это обеспечит повышенное взаимодействие с поисковым модулем. Конечно, его надо сделать заметнее, и саму графу крупнее для пальцев и для видимости среди десятков элементов. Вот простая зарисовка на тему подсказок.

Надо отметить, что мобильная и десктопная версия сайта fotosklad отличаются в наличии функционала, потому смонтировано два видео:

Десктоп:

Мобильная версия:

Следует также заметить, что как ни набирай в Маркет.Яндекс, он все равное подскажет правильно. Английская раскладка? Не беда! Это должно быть в любом крупном каталоге товаров. Будет гораздо удобнее искать и на fotosklad.ru

русские подсказки на неправильной раскладке в поисковике по сайту

3. Реклама должна работать!

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

4. О разном

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

  • мелочи вроде пересекающихся элементов интерфейса.

при отправке рейтинга текст заслоняется нижним блоком модификация

  • когда ссылка обещает подробности, но дает то же самое, что в превью

содержимое блока на карточке товара и блока подробного описания одинаковые

  • Неработающая, но чертовски привлекательная для неавторизованных пользователей ссылка. Когда авторизация пройдена, то остается неясным, как я могу отслеживать цену. Нужен этот знак вопроса справа и пояснения при наведении — что именно будет происходить при отслеживании. Опять же, если цель отследить, значит хотят понижения цены, и тут можно экспериментировать в сторону желаемого результата: например, «сообщить о понижении цены». Ведь тогда у пользователя есть отложенный спрос, и он может купить или по такой же цене, или по сниженной, если она изменится в эту сторону. Нужно ставить A/B тесты и отслеживать кликабельность.

не работающая ссылка про отслеживание цены

  • История с UBER, конечно, хороша, но в ввиду количества действий может быть отталкивающей для многих посетителей. К тому же, если есть ограничения «бесплатной» поездки в 500 рублей, нужно об этом сообщать. Отзыв взят из сообщества Вконтакте.

отзыв о бесплатной поездке на uber с fotosklad.ru

  • А если акция закончилась, то, конечно, нужно убирать это со всех карточек товара.

акция с uber приостановлена, но на сайте fotosklad.ru она словно действующая

  • Не зная средний чек магазина, сложно сказать, много это или мало, но 100 рублей за отзыв — это как-то слишком демотивирующе. Особенно если человек покупает объектив за 15 тысяч, а камера его стоит 70 тысяч, то за 100 рублей отзыв писать даже неприятно, что ли.. Нужно изучить, сколько людей потеницально имеют интерес отставить отзыв. Для этого я бы сделал «Напиши отзыв и получи подарок … кликни и узнай какой» — тогда по результатам кликов интересующихся можно было бы понять, сколько людей готовы получать подарок за отзыв.

100 рублей за отзыв - мотивация или оскорбление?)

  • Что каждый пользователь получает после оформления заказа? Конечно, это то, над чем можно и не стараться, пользователь-то уже наш! Контакты есть! Но выдавать такое чудо — некрасиво. Нужно сверстать тут все заново. И конечно же, без всяких странных «выделите курсором» — что это? Зачем? У меня на почте и на смс есть все данные, если тут их опасно писать, то зачем их вообще тут указывать, а если безопасно, то зачем эта темная полоска? Это лишнее.

странное сверстанное чудо юдо после оформления заказа

  • Неконкретный посыл об обработке заказа:

сообщение об обработке зааказа с неопределенным временем и не ясным концом

Конечно же, тут надо написать, буду ли я оповещен о завершении обработки или мне надо обновлять эту страницу. Но вопрос — а что так долго? И сколько все-таки — 1 или 2 часа? Написать нужно так, чтобы не возникало вопросов. «Ваш заказ уже обрабатывается на складе. Обычно это занимает до 2-х часов. Мы оповестим вас по смс и емайл о завершении обработки. После проверки вы сможете оплатить, если выбрали дистанционную оплату.» — это тоже неконкретное сообщение, но хотелось бы такого оповещения, понятного и подробного, я же вам деньги свои отдать собираюсь!

5. Корзина! Не надо… Не надо … останавливаться!

— Какой самый интересный и важный
элемент интернет-магазина?
— Корзина, Зина!

Что я вижу, если я в корзине. Я вижу товар, количество товара и цену. Мне можно показать, что я получил скидку, можно положить в мою корзину подарок для сюрприза… Можно, но не обязательно. А вот что я точно ожидаю увидеть сразу — так это кнопку продолжения или оформления заказа! Где она? На скриншоте отмечено, сколько влезает в первый экран и где относительно его находится кнопка. Конечно, можно возразить, что после шока — «Как продолжить?!!!» — люди начнут скролить мышью вниз и найдут таки кнопку, но зачем? Чтобы увидеть дополнительные товары? В принудительном порядке? 🙂

кнопка оформить заказ на втором экране в корзине сайта fotosklad.ru - преступление!

Ведь есть у кого подсмотреть, на крайний случай. Это весь первый экран и в него вмещается всё (скриншот с сайта apple.com):

пример корзины с кнопками на местах и с помещающимися товарами доп предложения apple.com

SEO замечания по сайту fotosklad.ru будут изложены во второй части поста, так как ресурс объемный и SEO анализ может занять больше времени и места, чем осталось здесь.

На этом мой обзор закончен. С Вами был Алексей.

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

Сервис Торнадо — создан для измерения конверсий пользователей из разных рекламных каналов. Измеряйте конверсию и прибыль автоматически и вкладывайте деньги только в успешные направления!

Сайт TopTop.ru: мои замечания по юзабилити сайта

Доброго дня, читатель!

Последний сайт, который попался под руку и вызвал немного негодования опытного посетителя — TopTop.ru.

  • Меню сайта и номер на главной

Попав на сайт, я сразу обращаю внимание, насколько незаметно меню. Оно отрисовано без классической обводки и исполнено тонким шрифтом. Белым! На светлых тонах гигантского слайдера! Оно просто исчезает для юзера в момент перелистывания картинок. Телефон тоже исчезает, хоть и расположен на привычном месте. Маленькие цифры, белый цвет, тонкий шрифт. Если цель — снизить количество звонящих, она, скорее всего, достигается еще на главной.

  • Номер телефона некликабелен с устройств

Если захочется все же позвонить, то сделать это получится только классическим способом, никаких «коснуться пальцем, и набор номера пошел». Даже если бы номер телефона был кликабельным, позвонить все равно очень трудно: он расположен слишком близко к корзине и скорее пальцем я попаду в корзину, чем в телефон. Либо наоборот: будет набираться номер вместо перехода в корзину.

  • Сайт без границ

Кликнуть можно куда угодно! Зачем ограничивать посетителей, пусть кликают в свое удовольствие 🙂

  • Нижняя часть главной страницы

Записал видео — быстрее будет посмотреть, чем читать. В целом, я бы переделал совсем всю нижнюю часть сайта, так как неудобно всё.

  • Страницы второго уровня

Тут много чего нужно пояснять. Посмотрите видео:

  • В чем предназначение больших баннеров?

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

скриншот с сайта http://toptop.ru

 

Сайт http://toptop.ru создан 2002.08.21, то есть 13 лет назад. Возраст домена очень солидный и дает преимущество в борьбе за поисковый трафик.

SEO заметки о сайте toptop.ru:

  • Битые ссылки и картинки на сайте — есть.
  • Нижнее подчеркивание в URL сайта осталось с былых времен.
  • Параметры в URL — вопрос настройки Robots.txt. Вот весь список этих URL.
  • Если посмотреть title — довольно большой список дублирующих друг друга заголовков. По размерам все title на сайте требуют корректировки.
  • Дескрипшн тоже дублируются 419 раз (скачать список в таблице).
  • Мета keywords слишком много и часто, сделано еще очень давно, лет пять назад.
  • Заголовки H1 всюду дублируются и повторяются в рамках одной страницы, тут вообще никто не думал над верной разметкой страницы.
  • Заголовки H2  совсем не приведены к полезной функции для SEO.
  • Картинки на сайте не оптимизированы и большая часть «весит» намного больше 100 килобайт.
  • Ссылок на домен почти нет. Это весьма странно. За 13 лет набрать меньше 100 ссылок на проект?
  • Более 49 страниц отвечают роботу более чем 2 секунды, то есть загрузка сайта может быть очень долгой, до 11 секунд!
  • Отсутствие мобильной версии сайта сказывается на поведенческих метриках и не дает всю полноту картины с google поиска.

Сайт на мобильных устройствах

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

Приведу несколько скриншотов с указанием недочетов или явных багов (от английского слова bug):

мелкий шрифт элементов на toptop.ru

верстка съезжает toptop.ru

элементы наезжают друг на друга toptop.ru

слайдер не адаптивен и влезает наполовину toptop.ru

 

Итог и вывод

Домен сайта существует давно, но ранее на нем располагалась заглушка в виде каталога сайтов. Затем домен несколько лет пустовал, и теперь на нем этот прекрасный магазин. История доступна здесь.

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

С вами был Алексей М.