Дизайн и юзабилити интернет магазина

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

А вот и статья. ;)

***********************************************************************************************
Интернет магазин – это узелок коммерции во всемирной паутине, созданный исключительно для извлечения финансовой выгоды. Дизайн сайтов такого типа преимущественно заключается в правильной организации информации.

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

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

Давайте рассмотрим основные блоки интернет магазина, и особенности их дизайна.

Каталог товаров

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

Каталог должен иметь конечное число категорий, желательно не более 7-10. Если возможно что-то объединить в одну категорию – смело делайте это, разобьете лучше в подкатегориях. Уровней вложенности должно быть не больше трех.

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

Корзина

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

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

Список товаров

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

Как показывать товар – «шахматкой», списком, по 5 штук, или по 50 – все зависит только от самого типа товара. Главное дайте возможность посетителю самостоятельно сортировать список по цене (а также в двух направлениях, по убыванию и по возрастанию), по дате добавления товара, возможно по некоторым техническим характеристикам.

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

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

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

Страница товара

Вот он, наш красивый фотоаппарат, или гламурный мп3-плеер, или может даже дрель с перфоратором украшенная стразами от Сваровски… Что на этой страничке? Красивая, качественная фотография товара, плюс возможность посмотреть его с разных ракурсов, и в увеличенном варианте тоже…

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

Описание товара. Тут должно быть не «все, что мы нашли в Гугле», и не стыренный текст с сайта ваших конкурентов. Текст должен продавать, все на вашем сайте должно продавать, и делать это на все 100% своего потенциала. Если это фотоаппарат – добавьте пару тестовых снимков сделанных этой камерой (найти их на соответствующих форумах – это плевое дело). Напишите для кого этот товар больше подходит, опишите все его достоинства.

Хороший текст может продать даже морозильную камеру жителям заполярья. Плохой текст (а такой на 99% всех е-магазинов) в лучшем случае не будет значительно мешать коммерции.

После описания товара, практически внизу страницы следует добавить блок «С этим товаром также приобретают» - и догадайтесь, что же там следует разместить? (;

Поиск по каталогу

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

Также на каждой странице следует разместить окошко поиска с кнопкой “Найти”, и рядом ссылочку на умный поиск о котором шла речь в предыдущем абзаце.

Контакты

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

Регистрация на сайте

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

В этой статье мы рассмотрели основные блоковые элементы классического интернет магазина. Изобретать что-то новое в этом деле – себе вредить. Люди привыкают к некоторым вещам, а сервис должен быть удобным, так что не расстраивайте тех, кто хочет отдать вам свои деньги. (:

***********************************************************************************************

Собственно все. Большое спасибо Денису, который написал эту статью. Если Вы хотите сказать ему спасибо, то лучший способ сделать это - подписаться на его RSS ленту или оставьте спасибы в комментариях.
Или скажите спасибо мне, за то, что я уговорил его написать эту статью. Подписаться на мою ленту можно нажав на три буквы RSS или получайте новости сразу на e-mail.

Кстати, если бы я сравнивал Дениса и сами-знаете-кого, то я бы предпочел работать с Денисом, по ряду причин. ;)

Других ссылок на интересности сегодня не будет. :(

Узнайте секреты успешных предпринимателей

* Обязательно для заполнения
Вас интересуют

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

Всего комментариев: 10

  • News.WebMoon.Ru - Дайджест Интересностей из Мира SEO, SMO, Манимейкинга и Блоггинга. Будь в Теме: Дизайн и юзабилити интернет магазина

    […] Читать […]

  • Федор Сорокин

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

  • Валентин Поляков

    Федор Сорокин, спасибо за отзыв.

  • Андрей

    Чем же сами-знаете-кто не угодил?

  • Валентин Поляков

    Андрей, почему не угодил? Артемий Лебедев замечательный бизнесмен и довольно хороший дизайнер.
    Просто у меня действительно есть “ряд причин”, по которым я бы предпочел работу с Денисом. ;)

  • Фива

    Будь вежлив со всеми, общителен с многими, фамильярен с некоторыми.

  • Алекс

    У меня яхтенный интернет-магазин уже больше года. Прочитав статью, серьезно задумался о реструктуризации категорий (у меня их аж 43! да еще и содержат подкатегории!)

  • puzik

    интересная статья, доводилось делать интернет магазины. статья по делу!

  • Одежда для беременных

    я вот к примеру провожу редизайн на своём интернет магазине, но увы, не чего поз нательного не получил(((

  • Валентин Поляков

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

Оставить комментарий

Add to Technorati Favorites Add to Technorati Favorites