суббота, 11 июля 2009 г.

Интернет магазины: корзина

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

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

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

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

www.edocar.ru


(http://www.edocar.ru/)

Огромная пустая корзина посреди страницы. Зачем она там? Когда в нее будут добавлены первые товары - только тогда появляется хоть какой-то смысл вообще отображать корзину. К чему пустые корзины?

Еще один момент - лично я не пользуюсь так называемой технологией "Drag and Drop", т.е. перетаскивания объектов, например, файла в папку под ОС Windows. А многие пользователи - с удовольствием. И безуспешно тянут товары в корзину, и ничегошеньки у них не выходит! Не давайте вашим пользователям ложных надежд.

www.003.ru


(http://www.003.ru/)

Лучше бы вставили краткую аннотацию к нижней части (вход / регистрация), пока корзина пуста.

www.forum3.ru


(http://www.forum3.ru/)

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

www.exist.ru


(http://www.exist.ru/)

Вроде бы корзина не пустая, места много не занимает. Но это очень грубый ляп: во-первых, корзина не должна быть пунктом меню. Корзина - это не раздел интернет магазина, равно как тележка в реальном магазине - это не какой-либо отдел самого магазина, верно? Корзина интернет магазина - это самодостаточный модуль. Во-вторых, никогда не стоит размещать рядом ссылки типа "заказы", тем более, в данном случае она нужна только для зарегистрированных + авторизированных пользователей. В-третьих, такой вариант даже хуже пустой корзины - что получит пользователь, кликнувший по нему? Ничего хорошего, разве что еще один мотив для закрытия данного сайта и переход на какой-нибудь более удобный и понятный интернет магазин.

www.hotcd.ru


(http://www.hotcd.ru/)

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

На сайте много ляпов, в том числе сразу же бросается в глаза проблема, описанная в предыдущем посте «Чем страдают w3.org, vkontakte.ru, mail.ru, а также...»:



Как надо делать

Есть и весьма успешные реализации "пустых корзин". Рассмотрим, некоторые наиболее яркие варианты.

www.softkey.ru


(http://www.softkey.ru/)

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

www.odarim.ru


(http://www.odarim.ru/)

Как и в предыдущем варианте - это надо видеть. Учитесь - идеальный вариант пустой корзины. Разработчики молодцы. Единственное, ссылку "Для клиентов" я бы заменил на "Скидки", на которой предложил бы зарегистрироваться с целью получения постоянной скидкой, к примеру, в 3%.

Кстати, насчет самих регистраций на интернет магазинов. Что за глупость? Зачем кому-то регистрироваться в магазине? Это контакт или одноклассники? Уважаемые, неужели так сложно добавить предложение регистрации (необязательное и желательно с какими-либо выгодами для клиента) непосредственное после оформления заказа? Так будет получена наиболее полная и ценная база реальных клиентов. Думайте о пользователях!

пятница, 10 июля 2009 г.

Чем страдают w3.org, vkontakte.ru, mail.ru, а также...

... meta.ua, subscribe.ru, все сайты, основанные на mamba.ru, некоторые творения студии Артемия Лебедева, и еще десятки и сотни тысяч крупных и не очень сайтов по всему миру!

Болезнь эта не смертельна, но доставляет миллионам пользователей по всему миру определенный дискомфорт. А вызвана она игнорированием необходимости применения тега LABEL.

Этот нехитрый тег устанавливает связь между определенным объектом, меткой (от англ. "label") с элементом формы INPUT. Для чего это нужно? Проще рассмотреть на примере, сравните два случая:

выбери меня
и меня!
и меня, меня, меня, меня!!!

и:





Единственное, если вы просматриваете этот пост в Firefox (насчет других браузеров я не в курсе), второй вариант будет отличаться от того, как он выглядит в IE. Майкрософтское творение очень в тему подсвечивает соответствующие боксы при наведении мышкой на объект, который с ними связан (в данном случае это текст возле них). Для того, чтоб в FF было еще удобней, можно второй вариант реализовать, например, вот так:





Согласитесь, намного удобней кликать по тексту или иному объекту, чем "целиться" в маленький чекбокс (или радиобокс), особенно если они расположены рядом, а тем более, если их достаточно много.

Кроме того, это не какой-нибудь Ajax, простой HTML-тег, который не создает никакой дополнительной нагрузки (не считая уж совсем незначительное увеличение объема HTML-кода странички) и без проблем работает во всех браузерах, облагораживая элементы форм и делая их использование значительно более удобным. Так что я считаю, что тег LABEL просто обязан быть использован всегда, когда применяются те или иные элементы форм. При чем его можно применять как в случаях с малогабаритными элементами CHECKBOX / RADIOBOX, так и с любыми другими элементами формы, это тоже может стать вполне полезным, пусть и незначительному количеству пользователей:



А теперь кратко рассмотрим наших пациентов.

www.w3.org

Что тут скажешь? Возможно маленький баг у World Wide Web Consortium, но с другой стороны это баг, во-первых, не на каком-то рядовом сайте, во-вторых, не на какой-то второстепенной странице. LABEL используют везде, вот только, почему-то, не на тексте "Search in all lists" к радиобоксу:


(http://www.w3.org/Search/Mail/Public/)

Кстати, на вкладке "Advanced Search" этот же элемент уже связан тегом LABEL с соответствующим радиобоксом. Мелочь, но все же приятно было найти такой баг на таком сайте)) Кстати, сразу скажу, что я ни по одному из сайтов долго не лазил (ну на самом деле один такой все же был)) но обо всем по порядку), не более 20-30 секунд, тут так вообще сразу нашел, дальше не смотрел, может и еще где-то есть. Кстати, может кто-то им напишет?

www.vkontakte.ru

Любимый (хоть и не мною, но все же объективно любимый) Контакт тоже болеет этим, к примеру, страничка "Мои настройки":


(http://vkontakte.ru/settings.php)

www.mail.ru

В регистрационной форме популярной почтовой службы:


(http://win.mail.ru/cgi-bin/signup)

Причем в той же форме, чуть выше радиобоксы идут с соответствующим LABEL-тегом:



Что наводит на мысли "а может это не баг, может это фича?"... С другой стороны, еще 15-20 секунд поисков по сервисам Мэйл.ру и видим форму для комментариев:


(http://soft.mail.ru/article_page.php?id=259&c=1)

Далее практически без комментариев:

www.meta.ua

Прямо в форме для входа:


(http://meta.ua/)

www.subscribe.ru

Куча чекбоксов, часть из них со ссылками возле них, но ни одного LABEL-а, лучше сделали бы метки, а ссылки уже рядом, если такая необходимость:


(http://subscribe.ru/member/join)

Все сайты знакомств на mamba.ru

Тихий ужас, лишь маленький кусочек одной из форм:


(http://love.mail.ru/extended/)

www.stream.ru - сайт студии Артемия Лебедева

Помните я писал, что более 20-30 секунд на сайт не тратил? И упомянул об одном исключении? Сам сайт студии Артемия Лебедева и был этим исключением, его я изучал минут 10. Уж больно сильно хотелось там что-то найти! Хоть я, в отличие от некоторых, и не испытываю никаких негативных чувств ни по отношению к студии, ни к самому Артемию, и глубоко уважаю этого человека, но все же как хотелось бы найти и у него такой вот баг! Но, увы, форм на сайте студии вообще не много, а там где все же были чекбоксы, были и соответствующие LABEL-теги.

Однако, на одном из сайтов студии, ссылка на который была найдена на главной странице самой студии, такой недочет был очень быстро найден в первой же форме:


(http://www.stream.ru/feedback/)

Впрочем, если магазин при студии (на ее домене) можно отнести к самой студии, то все же успех ждет того, кто ищет:


(https://store.artlebedev.ru/cart/)

Заключение

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

Понаехали... а, тьфу, поехали, во!

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

Ну что ж, други мои, в путь!