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

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

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

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

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

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

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

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

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

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

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

Корзина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контакты

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

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

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

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

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

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

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

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

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

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

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

Самостоятельный анализ сайта это как самомассаж, приятно, а толку никакого. Плюс немного SEO.

Существует такая услуга как - Комплексный анализ сайта. Вы еще ей не пользовались? Тогда мы идем к Вам!

Я считаю, что владелец, веб-мастер, дизайнер не может самостоятельно провести полноценный анализ сайта, у истоков которого он стоял. Ведь это сродни самолечению, когда наш мозг играет с нами в злую игру. Он “любезно” подсказывает неочевидные для других вещи и мы начинаем воспринимать их как должное. Это как кубик Рубика, если взять собранный кубик и провести с ним ряд манипуляций, запомнив их последовательность, то собрать его обратно не составит никакого труда. То же самое с сайтом, после длительного времени разработки мы настолько соединяемся с ним, что провести любую манипуляцию не составляет труда.

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

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

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

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

Насчет скролинга, Вы не поверите, но есть люди у которых до сих пор стоят мышки без колесика прокрутки. А еще есть люди которые им не пользуются. Я помню времена когда этих самых колесиков не было вообще, и ничего так не раздражало как необходимость “поймать” линейку прокрутки и прицельно управлять положением страницы. Кстати, многие гуру рекомендуют умещать всю информацию на экран и это не просто так. Разумеется к лентам новостей это не относится.

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

Но это все просто подготовка к более сложному анализу, а что включает в себя настоящий комплексный анализ?
От Вас зависит, в каком виде сайт попадет к специалисту по оптимизации и сколько времени специалист потратит на “обработку” ресурса.

Пойду по порядку:

1. Юзабилити

  • Количество шагов для доступа к тому или иному элементу
  • Визуальная нагруженность страниц
  • Скорость принятия решения посетителем

2. Подача информации и маркетинг

  • Кто целевая аудитория
  • Что именно Вы продаете (услугу, товар, просмотр, трафик)
  • Какая выгода в работе именно с Вами (психологический фактор)
  • Исследования различных сегментов рынка и конкуренции
  • Географическая привязка

3. SEO

  • SEO-анализ сайта
  • Оптимизация страниц под поисковые системы
  • Как опция заказ услуг на продвижение сайта

5. Реклама

  • Разработка рекламной кампании
  • Рекламные решения под целевую аудиторию

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

Если Вы обладаете необходимыми знаниями и умеете воплощать их в жизнь, то это просто замечательно.
А если нет, то мой Вам совет - Не занимайтесь самолечением. ;)

Также небольшой совет по поиску специалистов, не ленитесь и не стесняйтесь наводить справки. Консультант по продвижению товаров и услуг в интернете должен обладать либо отличной репутацией, либо выдающимися знаниями предмета.
Обязательно уточняйте какими именно методами будет проводиться оптимизация и раскрутка, чтобы в итоге не кусать локти.
Бывают такие “компетентные” товарищи которые разными черными методами нагонят на сайт трафик, а потом спрячутся в кусты, предварительно забрав оплату и предоставив Вам разбираться с забаненным в поисковиках сайтом.

Все на сегодня. Пишите комментарии. Подписывайтесь на RSS. Подписывайтесь на e-mail.

Дальше идет Важная информация для подписчиков и посетителей блога. Не читать!

Блог прекращает свое функционирование. :(
Для злопыхателей - Не надейтесь, что навсегда. ;)
Дело в том, что в ближайшие полторы недели я буду тратить деньги в мире загнивающего капитализма и отдыхать в жарких странах.
Такой вот получился спонтанный отпуск.
Надеюсь, что после отпуска, поднабравшись впечатлений, буду делится ими на страницах своего блога.
Спасибо всем кто читает мои статьи и тем кто подписывается на RSS и на e-mail.

P.S. Блогосфера онлайн:
Пиар по-тайски
Мировая нефтяная карта
Путешествия по стране
Забавная диаграма

© Поляков Валентин. Рынок оптимизации.

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

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

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

Страница 6 из 11 « 2 3 4 5 6 7 8 9 10 11 »

Add to Technorati Favorites Add to Technorati Favorites