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

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

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

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

car-traveler.com/ru

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

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

2. Условия Аренды важная для всех пользователей информация, но при текущей версии на прочтение всех 19 пунктов надо потратить приличное время. Многие могут видя объем контента просто уйти за решением задачи к конкурентам. Предлагаю подумать над тем, как визуализировать хотя бы часть этой информации (например, выделить только самое важные пункты и разбавить их инфографикой, или подумать о форматах упрощенных условий видео-контента в добавок к прописным) и сократить тем самым время на ознакомление. На мой взгляд это одна из очень хороших точек роста конверсии.

3. Сам фильтр помимо неаккуратности в верстке (например в сплывающий список отличается по ширине от окна) не совсем/не сразу понятно «Пожалуйста выбе…» до начала ознакомления со списком смотришь именно туда и беглый взгляд на вопрос «что надо выбирать?» ответа не дает, надо задуматься. Как говорил Стивен Круг: Don't make me think! (Не заставляй меня думать!) (c)

И кнопку «поиск» при предложенном в п.1 варианте, можно будет уменьшить до привычных размеров, она и так будет основным акцентом. Вариантом быстрой проверки распределения внимания может стать метод размыливания.

mariomuzi.com.ua

1. При запросе потребностей через окно поиска пользователи видят стандартную отписку: Вы искали «тапки». Найдено 0.

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

2. В блоке «Рекомендуем» на карточках товаров поехала верстка - зачеркнутая цена написана поверх текущей. Надо поправить.

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

amorem.ru

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

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

3. Из-за резиновой верстки кнопка отложить просмотренные наезжает на основной контент страниц. Так быть не должно, эта неряшливость в интерфейсе вряд ли сможет всерьез повлиять на конверсию, но дополнительные неудобства пользователям создает точно. Если есть возможность не нарушать композицию контентной части отображением «поверх», то полезно будет исправить.

artmax-studio.ru

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

2. Кнопка основного целевого действия в экране «ОБРАТНОЙ СВЯЗИ» будет быстрее подсказывать пользователям, с каким объект они имеют дело, если сделать ее фоновым акцентом группы элементов, перерисовав с контурной на полноцветную.

3. Подсказки о некорректном заполнении полей хорошо заметны, и выполняют свою задачу. Но с точки читабельности и выделения самой основной задачи могу предложить в некорректно заполненном поле перекрашивать рамку обводки поля ввода в красный цвет помогая быстрее сориентироваться. А в тексте название поля дополнительно выделить за счет контраста размера, увеличив например слово «Телефон» на 6-8 кеглей.

gusarov-group.by

1. Помимо не корректного отображения первой подсказки, во второй «полЯ» сбивают с толку (поле то одно), рекомендую сформулировать корректнее. Контур обводки на мой взгляд плохой вариант контраста для данного типа подсказки. Он не попадает в визуальный стиль и перегружает добавляя к 3 контурным объектам четвертый, что в отсутствии чередования с фоновыми фигурами осложняет восприятие на порядок.

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

Про кнопку этого pop-up окна: фоновая кнопка без скруглений.

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

И оранжевые и зеленые; и со скруглениями и без; и объемные с тенью и плоские; и растянутые и компактные. А если посмотреть варианты их состояний при наведении, то можно обнаружить еще разделить их еще и на подвиды.

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

Растянутая кнопка «Далее» на широкоформатных мониторах не совсем похожа на кнопку. Кнопку назад лучше сделать ссылкой, см пример.

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

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

centre-flower.ru

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

Букетам, как элементам всплывающего меню нужна хотя бы небольшая микро-анимация при наведении курсора.

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

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

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

kamyshan.ru

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

2. Если рассматривать пользовательский сценарий в котором, при просмотре очередной работы принимает решение узнать больше о фотографе, ценах или посмотреть работы из других категорий, то ему в силу специфики сайта (длины страниц) придется не мало скролить вверх. Для решения большинства подобных интентов десктопных пользователей на таких страницах, как kamyshan.ru/portfolio/card/semeynyiy-novyiy-god1 достаточно будет добавить кнопочку «наверх».

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

P.S. сайт очень понравился, есть конечно мелочи типа «не на всех страницах в последнем экране есть перелинковка» или часть фото-калашей отверстаны не на всю ширину, как другие фотографии на сайте, но тем не менее очень много прям классных цветовых решений.

nabor-instrumentov.com

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

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

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

Тут же заинтересовал следующий момент: «Отправка продукции осуществляется со склада в г. Уфа», это формирует у меня сначала лишний вопрос: «А в Москву то вообще можно?», перечитав приходит понимание, что это всего лишь про отправку речь, и появляется новый страх «Наверно долго…, раз с Уфы». Эта информация кажется излишней, она не представляет особой ценности для рядовых покупателей, и ее предоставление на данном этапе пользовательского сценария формирует не правильные ожидания. Лучше укажите ее на странице «Спасибо» вместе с другой информацией по доставке после отправки онлайн заказа.

glavdacha.ru

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

И один маленький seo-совет: в titleстраницы лучше не использовать точки, это разбивает его на пассажи замывая вес всего заголовка по каждому из слов.

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

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

fitmagazine.kandeleria.ru

1. В шапке триггер «Принимай то, что работает!» и цветная карта России размывают внимание и создают не нужные акценты при первом знакомстве с интерфейсом. Можно попробовать без них, тогда машинку со ссылками объединяем в одну группу с логотипом в противовес группе объектов в правой части сайта.

2. Черный цвет баннера с котом забирает на себя все внимание. Со стороны не видя тепловых карт создается впечатление, что навигация выше «Спортивное питание» и «Пептиды» оснащенная для дополнительного внимания отдельными иконками не пользуется популярностью у пользователей. А если так, то ее нужно либо убирать, сокращая количество вариантов взаимодействия в одном экране или изменять пропорции этой навигации относительно баннера Ее увеличение, например, в 2 раза, и перерисовка баннера в контурный объект с легким градиентом в подложке решит задачу. Ну и кота тогда придется или убирать, или уменьшить. Отличное поле для экспериментов – тут точно можно сделать круче! И этот вариант может, и скорее всего должен будет отличаться от внутренних страниц.

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

Во всплывающей подсказке фильтра стоит сделать больше отступы от границ блока до текста. Оранжевый цвет ссылки «показать?» плохо читается на этой подложке. А вытянутая форма кнопки «Купить» не сразу дает понимание что это кнопка.