Ваши сайты ну не очень - часть №1

17 мин.
6892
Команда AskUsers
Команда AskUsers
17 января 2017 • 17 мин.
Содержание

Денис Нарижный

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

Выписываются первые 3 замечания и это:

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

pirosalut.ru

pirosalut.jpg

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

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

akcii i predlozhenija.jpg

2. Между первым и последним товаром в карусели белое пространство. Если это фитча, то уж очень она похожа на баг, я бы убрал/поправил. Из-за подобных мелочей у пользователей может формироваться более низкий уровень доверия к ресурсу и компании.

kartochka tovara.jpg

3. У товаров в корзине съезжает верстка, и не подгружаются все изображения. У товаров в корзине съезжает верстка, и не подгружаются все изображения. Хлебные крошки из-за капслока имеют излишний контраст, из за их расположения (приклеились к верхней навигации и немного к основному заголовку H1) группировка элементов получается не айс. Хлебные крошки – это отдельная группа объектов имеющая свое назначение. Увеличьте отступы над и под хлебными крошками, чтобы не создавать дополнительную когнитивную нагрузку.

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

flacon.ru

perebor v shriftovom ansamble.jpg

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

perezagruzkа luchshe cherez ajaks

2. На страницах выбора помещения при клике по дополнительной навигации «КУБ КАФЕДРА СПЕЙС ЛОФТ БАНКА ТЕЛЕСКОП» перезагрузку лучше реализовать например через аякс, чтобы при смене url каждый раз не подкидывало вверх страницы. Пример реализации autoreshenie.ru/avtoservis-tavi-m ; при клике на «Отзывы об автосервисе».

Хорошо бы было продублировать навигацию «КУБ КАФЕДРА СПЕЙС ЛОФТ БАНКА ТЕЛЕСКОП» внизу карточки, т.к. это один из основных пользовательских интентов при выборе – «посмотреть что еще есть». Тем самым мы повысим удобство, пользователям не надо будет мотать вверх каждый раз, плюс повлияем в лучшую сторону на внутрихостовые поведенческие факторы ранжирования. Удобнее = больше переходом между url-адресами страниц.

neobhodimo produblirovat' navigaciju.jpg

3. На странице flacon.ru/space/rent/ поехала верстка. Надо поправить.

zamkitut.ru

oshibki na glavnoj stranice.jpg

1. В первом экране разбегаются глаза. Одновременно 2 разных блока имеют контраст движения – слайдер и группа карточек с категориями. Первые секунды пытаешься привыкнуть к постоянному движению, но этого сделать не дает шапка из-за очень плотной группировки объектов и излишнего числа контрастных элементов. Сократите число элементов, выкиньте цветные логотипы и иконки (они все рано не сочетаются с остальными контурными иконками на сайте) Про оформление шапки сайта писали небольшой гайдлайн, посмотрите.

Можно сделать например так:

primer oformlenija.jpg

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

tovary v korzine.jpg

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

pointcad.ru

pointcad glavnaja.jpg

Для предложений выбрал вот эту страницу: pointcad.ru/formyi-obratnoj-svyazi/priobresti-resheniya-autodesk

bannernaja slepota.jpg

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

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

3. При некорректном заполнении полей ввода информации, срабатывающая валидация выдает сообщение об ошибке. Но найти его сразу из-за плотной группировки объектов сложно. Предлагаю сделать текст сообщения об ошибке контрастнее, например, перекрасив его в другой цвет. Советы по оформлению форм.

seo4u.ru

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

obratnaja svjaz'.jpg

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

  • поменять форму обратной связи и блок «Мои контакты» местами,
  • уменьшить длину строк (для мобильный адаптив отличный, но в десктопе хочется больше пространства)
  • увеличить шрифт email и телефона,
  • сделать ссылки на соц профили более заметными (не думал что когда-нибудь это посоветую, в 99% случаев приходится советовать обратное)

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

oshibki na stranice portfolio.jpg

3. На широкоформатных экранах; «в портфолио», помимо синей тонкой рамки обводки, появляется еще и серая. Из-за этого, и еще из за сильной плотности элементов, возрастает нагрузка на пользователя. Тяжело воспринимать объекты. Предлагаю отказаться от рамок вообще, даже тоненьких. Это должно дать так недостающего пространства и добавить чувства легкости при просмотре. При этом поэкспериментируйте с фоновым экраном и ОБЯЗАТЕЛЬНО на меньших экранах сделайте больше отступы между объектами.

melgora.ru

melgora.ru

1. Как бы ни была прикольна ваша сезонная анимация с падающим снегом, я бы рекомендовал отказаться от нее или «включать» ее не сразу и не на долго. Может быть даже на отдельных страницах. Сейчас она изначально мешает сосредоточится на важных объектах при первых 5 секундах знакомства, потом когда понимаешь что тебе мешает, ловишь wowэффект – «А прикольно» и продолжая работать с сайтом ловишь себя на мысли: « Когда кончится снег? Надоело, отвлекает!» Дизайн должен помогать пользователю взаимодействовать с продуктом, а не отвлекать.

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

Prototip dlja vizualizacii.jpg

Knopki sharinga.jpg

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

realbeercard.ru

realbeercard glavnaja.jpg

1. В верхней части каждого всех страниц сайта есть горизонтальная полоса на которой закреплены соцкнопки, надпись «/realbeercard»(кстати, для чего это здесь?) и самое важное на сайте с точки зрения бизнеса целевое действие – Забронировать стол. Забронировать стол предлагаю выделить на больших экранах при том количестве баннерной графики, которая используется посетители могут просто не заметить его. Мой вариант выделения – избавится от курсива и написание капслоком (он ведь уже использовался в заголовках).

razdel akcii.jpg

2. В акциях не сразу понимаешь, что представленные акции имеют отношение к одному ресторану. Хорошо бы более явно выделить на каждом баннере, и даже скорее не на баннере, поскольку они очень яркие это сделать будет не просто, а возле него. Плюс выделить более явно тег открытого ресторана. Но даже пощелкав, и понимая как оно работает полного понимания почему по тегу : «Биродром (м. Университет)» выдаются 2 акции одна с пометкой - Биродром (м. Университет), а вторая – Ив. Дурдинь и Биродром.

Forma zakaza ne dolzhna nahoditsja na karte.jpg

3. Форма заказа стола расположена на фоне карты, с помощью этого изображения мы не доносим до пользователей ничего нового и полезного, лишь отвлекаем от основного действия этого экрана – заполнения полей формы. Предлагаю убрать с фона карту.

aroma.red

slabaja gruppirovka zagolovka i izlishnij kontrast brendov proizvoditelej.jpg

1. Поиск ответа на основной вопрос нового пользователя сайта: «куда я попал?» осложняется слабой группировкой заголовка и излишним контрастом брендов производителей. С точки обычного пользовательского сценария, посетитель должен сначала понять что он попал в магазин селективной, нишевой и элитной парфюмерии, подкрепив это ощущение зрительным образом, а потом уже увидеть знакомые или не знакомые бренды. Если сделать отступ между заголовком и баннером больше, и ссылки брендов сделать меньше в размером чем заголовок, то объекты не будут смотреться как одна перегруженная группа элементов с которой не хочется знакомится/разбираться.

email-marketing.jpg

2. «А смысл подписываться на рассылку? Чтобы мой ящик спамила еще одна компания?» так могут думать многие посетители. Если мы планируем апсейлить через email-маркетинг и увеличивать жизненный цикл клиента (LTV), то стоит находить баланс целей бизнеса и покупателя. В простейшем виде баланс будет выглядеть так: Подписывайтесь на нашу рассылку! Регулярно делаем ОГРОМНЫЕ скидки для подписчиков и разыгрываем бесплатные парфюмы. Клиент получает выгоду, бизнес получает повторные продажи – всем хорошо.

Podskazka o nekorrektno zapolnennom pole.jpg

3. Подсказка о некорректно заполненном поле выводится высоко, далеко от поля к которому имеет отношения, если мы проскролили ниже и пытаемся отправит отзыв , который не проходит по длине или нас зовут Ян), то мы попросту не увидим сообщение.

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

rivne.ukrainskimebli.com.ua

Zatemnenie u vsplyvajushhih okon.jpg

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

parametry v fil'tre.jpg

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

Soobshhenie o nepravil'no vvedennoj kapche.jpg

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

imarket.by

ikonka+nazvanie rubriki.jpg

1. Иконки не добавляют информативности из-за своего сложного восприятия. Они должны составлять композицию из 8 равнозначных групп элементов – иконка+название рубрики. Сейчас из-за разного размера текстовых элементов и отсутствия разницы в отступах между группами и внутри групп - все сливается и перегружает и без того сильно нагруженную шапку сайта, вызывая дискомфорт при визуальном контакте. Если убрать иконки пользователи смогут быстрее ориентироваться в первом экране.

samovyvoz.jpg

2. В «Самовывозе» города являются активными элементами, по нажатию на них происходит действие – смена контента. Для формирования правильных ожиданий у пользователей следует добавить активное состояние, например оранжевую подсветку как у ссылок.

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

Узнайте, как увеличить конверсию на 41%!
Выберите
ваш сайт
Укажите сайт и получите 7 точек роста.
Рассчитайте
стоимость
Контролируйте стоимость и состав услуги. Авторизуйтесь и выбирайте только то, что нужно вам.
Получите результат
и сопровождение
После оплаты и выполнения задания продолжайте получать регулярные советы и рост конверсий.
Понравилась статья? Жмите лайк или подписывайтесь на рассылку.

А также поделитесь статьей с друзьями в соцсетях.

Команда AskUsers
Команда AskUsers
Популярные статьи