Главная страница

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

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

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

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

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

studio-land.ru

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

kazhdaja novaja knopka UNIKAL''NA.png
2. Насчитал на главной странице 8 вариантов визуального представления кнопок. Если сказать более точно – каждая новая кнопка УНИКАЛЬНА. Проработайте несколько вариантов изображения этого типа элементов и анимации при взаимодействие с ними и не используйте закрепленный за кнопками визуальный стиль на неактивных элементах, как в случае F.A.Q. на принте – выделение этого заголовка сильно напоминает кнопку. А еще лучше для формирования собственного фирменного стиля зафиксируйте несколько вариантов группировки тех же кнопок, чтобы они располагались не просто как в данной группе объектов захотелось дизайнеру, а имели 2-3 варианта расположения. Например:
  
  • ОДИН с выравниванием по правому краю группы элементов с вертикальным отступом 40 px;
  • ВТОРОЙ с выравниванием по левому краю группы элементов с вертикальным отступом 40 px;
  • ТРЕТИЙ с выравниванием по центру для другого типа кнопок и вертикальным отступом 60 px.

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

spisok sleduet sdelat' bolee zametnym.png
3. На этом экране понимание того что здесь для пользователей приготовлено много интерактивного контента нет. И о том, что можно наводить на различные проекты из списка в левой части экрана и будет меняться картинка и описание я догадался случайно.
Стоит сделать выделение «открытого» варианта в имеющемся списке сделать более заметным. Дополнительный акцент, созданный контрастом у одного из элементов списка, позволит сообщить большинству пользователей о имеющемся функционале привлечь внимание и спровоцировать наведение курсора в область отвечающую за смену контента.
У некоторых из объектов отсутствуют описания. У одного из проектов в списке «6 соток РУЗА» появляется не встречающаяся у других контурная обводка в виде серой рамки. Рекомендую заполнить описания объектов и поправить баг/размножить фитчу на другие элементы списка.

tool-tec.ru

neakkuratnost' napisanija teksta po verh izobrazhenija tovara.png
1. Бросилась неаккуратность в виде написания текста по верх изображения товара. Первое решение, которое напрашивается – это вытянуть карточку по высоте. Пусть размер карточки будет больше, причем не только по высоте, но и по ширине это позволит снизить когнитивные нагрузки на пользователей, переделав витрину не под 15 товаров в одном экране а например под 8. Вот так намного проще воспринимать:
bystryj prosmotr v kataloge tovara.png
и 15 оранжевых квадратов уже не кажутся уж таки и неприменимы для акцентов. Остается только усилить группировку за счет меж объектного пространства и получится вообще шикарно:
mezh obektnoe prostranstvo.png
2. В «быстрый просмотр» при наведении на изображение товара легко промазать. Можно расширить кликабельную зону и визуальную составляющую анимационной подсказки «Быстрый просмотр» в высоте например в 2 раза. При группировке предложенной выше, кнопки подробнее будут привлекать больше внимания, повышая свое присутствие на тепловых картах. Т.е. сокращение активной зоны для перехода в карточку по клику на фотографию товара для пользователей пройдет безболезненно.

Na mobil'nyh ustrojstvah sil'no poehala verstka.png
3. На мобильных устройствах сильно поехала верстка, проверял на разных типах устройств – проблема имеет массовых характер. Успехов в исправлении!

raskrytka.ru

Na pervom jekrane glavnoj ochen' mnogo jarkih jelementov.png
1. На первом экране главной очень много ярких элементов. Из-за их плотности необходимые с точки зрения выразительного языка, акценты теряются. И самым привлекательным элементом становится зеленый круг подсказывающий пользователю, что компания работает с 2004 года. Вряд ли это самая важная информация и именно ее мы хотим донести пользователям в первую очередь.
При таком ярком меню с видами услуг ставить такой же яркий баннер рядом не стоит, мы можем совсем запутать и без того рассеянных пользователей, ведь им надо изучать текст на 6 полноцветных больших блоках меню и пытаться сформировать ожидания по поводу баннера «4+1 в подарок». Если его убрать будет лучше.

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

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

toptop.ru

V kartochke tovara dovol'no ne prosto najti pljusiki dlja raskrytija informacii po tablice razmerov i dostavke.png
1. В карточке товара довольно не просто найти плюсики для раскрытия информации по таблице размеров и доставке. Но это только пол беды. Опишу свой вариант отображения на довольно стандартном мониторе: когда пытаешься их развернуть, информация о доставке не попадает в границы экрана, приходится начинать скролить чтобы с ней ознакомиться, и вот в самый ответственный момент, когда остаётся еще одно движение колесиков мышки, появляется предложение получить эксклюзивный доступ к закрытым продажам прямо поверх необходимой информации. В общем это напоминает квест, чтобы узнать основную коммерческую информацию по условиям приобретения товаров необходимо потрудится.
От варианта с появлением закрепленной по низу экрана полосы лучше отказаться или точнее просчитать для всех товаров условия по высоте его появления.

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

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

runetlex.ru

Prihoditsja tratit' lishnee vremja na ponimanie togo chto po nim mozhno eshhe i klikat'.png
1. В блоке «ПОРЯДОК РАБОТЫ» есть смысл шаги-иконки не имеют активного состояния. Приходится тратить лишнее время на понимание того что по ним можно еще и кликать. Прорисуйте для них в соответствии с вашим фирменным стилем еще одно состояние, чтобы при наведение на них курсора на десктопах, пользователи интуитивно понимали, что этот блок элементов интерактивный.

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

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

V forme «zadat' vopros» ne rabotaet prikreplenie fajlov.png
3. В форме «задать вопрос» не работает прикрепление файлов. Хотя может и работает, но визуально пользователю не дается никаких подсказок о том, что действие состоялось после прикрепления файла. Ну и если прикрепленные файлы все-таки улетают адресату, то стоит позаботиться не только о визуальном оформлении прикрепленного документа, но и о сообщении пользователю допустимых форматов и размеров файлов, чтобы сформировать правильные ожидания.

navozov.ru

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

Izobrazhenie tovarov v korzine malen'koe.png
2. Изображение товаров в корзине настолько маленькие, что на них не понятно что изображено. При этом набор вертикально выстроенных в столбец темных кругов сам по себе нарушает консистентность блоков элементов экрана и фокусирует на себе не нужное внимание. Чтобы поправить визуальные веса, предлагаю сбалансировать блок 1 «список товаров» блоком 2 «сумма в корзине» пожертвовав излишними для данного типа товаров изображениями на этом этапе пользовательского сценария. Вариант возможной группировки, которая позволит повысить скорость восприятия информации:
Variant vozmozhnoj gruppirovki.png

Na mobil'nyh ustrojstvah telefon perenositsja na 2 stroki.png
3. На мобильных устройствах телефон переносится на 2 строки, хотя пространство позволяет этого не делать. Написание номера телефона в одну строчку не только добавит аккуратности но и позволит дать в первом экране больше контента. Рекомендую исправить. Еще несколько простых советов по улучшению удобства мобильной версии.

foroneday.ru

vzaimodejstvii s fil'trom.png
1. При взаимодействии с фильтром после нажатия галочек сразу не понятно:
  • что-то уже произошло?
  • когда отсортируется, я же выбрал кремовый?
  • а как работает сортировка?
  • может она не работает?

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

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

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

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

e-prof-it.ru

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

Pravil'noe reshenie sdelat' ikonki menee kontrastnymi po cvetu.png
2. Правильное решение сделать иконки менее контрастными по цвету, относительно текстовой информации идет в разрез с вырисовывающимся визуальным языком сайта. Само по себе использование выразительных средств на темном фоне – отличный ход, но страдает визуальная идентичность. И в первую очередь из-за использования синего цвета для разного типа элементов. Предлагаю здесь не трогать, а поменять цвет кнопок на зеленый, который по палитре будет сочетаться с нашим синим.

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

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 5 оценок, средняя: 3.75 из 5 )

Новые кейсы и лайфхаки еще впереди. Подпишитесь на обновления, и узнавайте все первыми. Это бесплатно!

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать