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

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

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

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

studio-land.ru

1. Не смотря на то, что в этой рубрике речь должна идти об интерфейсах, я все-таки позволил себе обратить внимание на «чудовищную» ошибку с точки зрения seo. Мне кажется, допустимым сделать исключение, поскольку выполнение данной рекомендации может дать больше, чем многие интерфейсные усовершенствования. Вы можете сколько угодно долго пренебрегать внутренней оптимизацией и органическим трафиком, но склеить зеркала вашего сайта через 301 первый редирект надо. Сейчас у главной существует как минимум 3 варианта: с www, без www при index.html после слеша. Более того переходы по кнопкам и ссылкам на сайте реализованы разными вариантами написания этих ссылок. Сделайте редиректы и приведите все ссылки в относительный вид и будет вам счастье в виде дополнительного трафика из органики.

2. Насчитал на главной странице 8 вариантов визуального представления кнопок. Если сказать более точно – каждая новая кнопка УНИКАЛЬНА. Проработайте несколько вариантов изображения этого типа элементов и анимации при взаимодействие с ними и не используйте закрепленный за кнопками визуальный стиль на неактивных элементах, как в случае F.A.Q. на принте – выделение этого заголовка сильно напоминает кнопку. А еще лучше для формирования собственного фирменного стиля зафиксируйте несколько вариантов группировки тех же кнопок, чтобы они располагались не просто как в данной группе объектов захотелось дизайнеру, а имели 2-3 варианта расположения. Например:

• ОДИН с выравниванием по правому краю группы элементов с вертикальным отступом 40 px;
• ВТОРОЙ с выравниванием по левому краю группы элементов с вертикальным отступом 40 px;
• ТРЕТИЙ с выравниванием по центру для другого типа кнопок и вертикальным отступом 60 px.

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

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

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

У некоторых из объектов отсутствуют описания. У одного из проектов в списке «6 соток РУЗА» появляется не встречающаяся у других контурная обводка в виде серой рамки. Рекомендую заполнить описания объектов и поправить баг/размножить фитчу на другие элементы списка.

tool-tec.ru

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

и 15 оранжевых квадратов уже не кажутся уж таки и неприменимы для акцентов. Остается только усилить группировку за счет меж объектного пространства и получится вообще шикарно:

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

3. На мобильных устройствах сильно поехала верстка, проверял на разных типах устройств – проблема имеет массовых характер. Успехов в исправлении!

raskrytka.ru

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

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

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

3. Подсказка о некорректном заполнении обязательного поля, будет гораздо актуальнее в самом pop-up окне а не дополнительном.

toptop.ru

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

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

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

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

runetlex.ru

1. В блоке «ПОРЯДОК РАБОТЫ» есть смысл шаги-иконки не имеют активного состояния. Приходится тратить лишнее время на понимание того что по ним можно еще и кликать. Прорисуйте для них в соответствии с вашим фирменным стилем еще одно состояние, чтобы при наведение на них курсора на десктопах, пользователи интуитивно понимали, что этот блок элементов интерактивный.

Ну и в копирайте год на 2017 поменяйте ;)

2. На странице runetlex.ru/services/offers/terms-of-use/ заголовок «ЧТО ВЫ ПОЛУЧИТЕ» написан белым на белом, вряд ли это такая фитча. Поправьте подложку с белой на темную и будет как в подобных блоках на других страницах.

3. В форме «задать вопрос» не работает прикрепление файлов. Хотя может и работает, но визуально пользователю не дается никаких подсказок о том, что действие состоялось после прикрепления файла. Ну и если прикрепленные файлы все-таки улетают адресату, то стоит позаботиться не только о визуальном оформлении прикрепленного документа, но и о сообщении пользователю допустимых форматов и размеров файлов, чтобы сформировать правильные ожидания.

navozov.ru

1. Признаюсь, первое что мне захотелось узнать на сайте – решить личную задачу. Весной предстоит высадить деревья, засеять газон и выровнять участок на 20 сотках земли. Я как неопытный покупатель (опыт отсутствует, но потребность уже сформирована) не знаю сколько мешков, какой земли/навоза мне необходимо, а прикинуть стоимость хочется.

В моем сценарии этот сайт не поможет, поэтому в качестве первого улучшения я хочу предложить задуматься о болях таких покупателей, как я и разработать для них удобных калькулятор, который считал бы из метров/соток в мешки и рубли, с подсказками, сколько сантиметров земли нужно для решения какой задачи. Например, ввожу я такой 20 соток нажимаю radiobutton «для газона» и мне выдается результат – «75 мешков торфа, 75 мешков земли, 15 мешков навоза, расчётная высота 15 см, 43 000 рублей, доставка в подарок» и тут же кнопка добавить в корзину. Профит? Для неопытных городских жителей типа меня да!

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

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

foroneday.ru

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

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

Голубое окно в виде горизонтального прямоугольника, которое появляется на пару секунд после взаимодействия с чекбоксами фильтра очень не заметно. А на компьютерах с виндой, он еще и маскируется сливаясь с голубой панелью задач.

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

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

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

e-prof-it.ru

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

• Сократить текст основного сообщения, выкинув все что написано сейчас капском (подобные приемы лучше работают в контекстной рекламе, когда вам надо «выделиться из толпы» объявлений. Здесь же пользователь уже ваш, за его внимание не нужно бороться. Ему нужно дать суть.
• Оставшуюся фразу дополнить глаголом и написать в две строки, отказавшись от капслока, не используемого на подобных заголовках других экранов. Например так: Делаем контекстную рекламу и с новой строки Яндекс.Директ и GoogleAdWords. Полное написание сервисов, для части пользователей будет привычнее и позволит быстрее уловить суть сообщения, увидев знакомое написание.
• Кнопки, навигации по лендингу лучше сделать ссылками, чтобы они не отнимали на себя излишнего внимания. Выровнять их лучше по правому краю, по высоте на уровне логотипа.
• Дополнительное разделение в виде горизонтальной полосы не делит, а перегружает. Усилить акцент последнего по распределению внимания элементе (кнопки) лучше за счет группировки. Увеличение расстояния от других блоков позволит правильно распределить внимание среди элементов композиции экрана.
• С размером телефона можно поэкспериментировать в зависимости от цвета кнопки. Про кнопки в следующем пункте.

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

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