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

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

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

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

pollardi-fashion.com

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

2. Выбранный в карточке размер не сохраняется, в сплывающем окне. Выбрал размер «L»,а в окне «S».Если выбор размера в карточке - это функциональная необходимость, возможность, которая упрощает задачу взаимодействия, то сохраняйте значение при загрузке окна. Если с точки зрения пользовательских сценариев этап выбора размера не имеет значения, то рекомендую в самой карточке отобразить списком размеры «В НАЛИЧИИ», чтобы сформировать правильные ожидания, а выбор оставить в popup окне.

3. Из заголовка окна не совсем понятно для чего заполнять дату. Сейчас, когда кнопка нажата, мы просим пользователя оставить заявку и обещаем перезвонить. Но при этом у потребителей могут создаются дополнительные вопросы. Например: «А дату чего надо заполнять? Дату звонка? Рождения? А примерки!» Если все равно перезванивать, то можно сделать все поля, кроме телефона необязательными, а телефон пометить звездочкой. Это позволит сократить время на обдумывание и избавит от лишних вопросов. Если товар присутствует в одном цвете или размере, выпадающий список стоит убрать.

myportion.ru

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

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

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

• текст;
• ползунки;
• радиобаттоны;
• кнопка.

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

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

Оказывается на несколько экранов выше появляется, немного поехавшее по верстке, сообщение о необходимости заполнения обязательного поля «телефон для связи».

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

3. Осуществив один раз попытку онлайн заказа меня из страницы в страницу начинает преследовать ссылка «вернуться к заказу» и все бы хорошо, но при этом едет верстка. Надо править.

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

chiller.su

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

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

После прочтения заголовка по стрелке взгляд скользит слева на право на заголовок «Запросить Цену и наличие прямо сейчас», потом на кнопку «Запросить» и только потом на следующий заголовок в котором наконец приходит понимание что же предлагает сайт.

Что делать?

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

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

в. Сократите количество вариантов изображения кнопок.

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

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

• информация частично дублируется;
• слабо читается текст из-за написания темного на темном(красный на синем, черный на синем);
• съезжает верстка.

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

avista-perila.ru

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

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

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

Второй момент связанный с этим блоком элементов, это отсутствие новых логотипов в сравнении с этим списком при переходе на детальную страницу по кнопке «Увидеть всех клиентов». Текст кнопки формирует вполне однозначное ожидание, что по клику пользователям будет предоставлен более полный список клиентов или хотя бы более полная информация об уже представленных. Но страница avista-perila.ru/nashi-klienty/ не оправдывает ожидания, предоставляя абсолютно те же 5 логотипов и ничего более. Наполните страницу контентом.

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

textreporter.ru

Интересный продукт. Понравилась простота и реализация идеи. Решение вполне конкретной боли большого сегмента рынка – очень интересно как будет развиваться сервис. Себе взял на заметку – будем тестировать.

1. Отсутствие в первом экране четко и лаконично сформулированного утп не позволяет сразу понять ценность предложения, и мысленно примерять на себя предлагаемое сервисом решение задач. Из всего спектра формулировок, что встретились на сайте, мне кажется лучше всего начать с: «Мы уже наполняем 72 сайта, отдавая в сутки 68 новостей!» («уже» лучше убрать, заставляет задумываться не над тем). Первое, что должно идти под навигацией это именно ответ на вопрос новых пользователей – «что это?». Саму фразу стоит написать шрифтом большего размера – она должна иметь большой визуальный вес (привлекать и фокусировать внимание).

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

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

Предлагаю прорисовать первый экран как-то так:

Данная группировка позволит выстроить простой и понятный сценарий. Во второй экран можно поставить видео.

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

И последнее: надо что-то добавить про ndaи безопасность сотрудничества. Это последний вопрос в моем сценарии, на который я не успел найти ответа.

moskvawood.ru

1.Текущие группировки объектов создают ментальные перегрузки, взгляд разбегается, и первая фокусировка происходит на заголовке «ПОЧЕМУ МЫ?» и «10 ЛЕТ», следующим шагом фокусировки на выстроенных в ряд объектах не происходит. Возврат взгляда наверх стимулирует контраст движения, который создается слайдером. Вторым вероятным вариантом продолжением продолжения сценария будет скрол вниз, и тот и второй вариант не могу назвать плохими, но они практически не контролируемые. Очень много объектов и отдельных элементов имею большие визуальные веса и вынуждены сражаться в такой группировке за внимание пользователей между собой. Необходимо определиться, что является более важным для пользователя на экране и уменьшить объем визуально контента на экране. Уверен, что вам идея не понравится, но я бы начал вырубки леса и избавился от дуба и ели. В погоне за оригинальностью в дизайне мы теряем в практичности.

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

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