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

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

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

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

Фото: pravmir.ru

Иногда клиент говорит примерно следующее: "Ну и где тут дизайн? Его нет, такое нарисует любой школьник! За что я заплатил деньги?" Это самый простой случай, не с точки зрения клиентских отношений, конечно, а по логике. Скопировать - да, сможет любой человек, владеющий навыками работы в графическом редакторе. Сделать лучше? Уже вряд ли. Дизайн Интернет магазина - прежде всего удобный интерфейс, а не красивая картинка. Графика вторична, если это не изображение товара.

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

Итак, на чем же нужно делать акценты в дизайне Интернет-магазина?

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

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

Принтскрин с сайта был сделан на разрешении 1024х768 - а это, пока еще, самое популярное разрешение. Мы видим, что примерно 25% полезного места отдано так называемой "шапке", основным элементом которой является логотип. При этом основной своей функции он не выполняет - не кликается на внутренних страницах. Зачем его разместили в таком виде - загадка. Часто ее ответ звучит примерно так - "нам нужно, чтобы название сайта (компании) запоминалось". Это широко распространенное заблуждение. Если покупатель сделал у вас заказ и больше ему от вас ничего не нужно, он забудет сайт максимум через месяц. За исключением того, что "у них был ну очень большой логотип. Как же там они назывались?".  Чтобы вас вспомнили (например, в московском регионе), нужно завесить рекламой весь метрополитен и крутить рекламу по телевизору. А лучше и то и другое.

Собственно, рекомендация следующая. Дизайн интернет магазина не обязан запоминаться. Вы же не запоминаете вид унитаза в аэропорту - он просто должен выполнять свою функцию. Главный элемент интернет-магазина - это товар, навигация (меню) по каталогу. Также важными блоками являются - телефон, корзина. Все остальное - второстепенно. С другой стороны, оригинальный дизайн тоже имеет право на жизнь - оригинальные интересные "фишки" интерфейса, нестандартная подача материала - с этим главное не переборщить. Но это дорогое удовольствие, а также высокий риск "не попасть в покупателя". Если не уверены - лучше использовать проверенные методы. 

Пример правильного дизайна Интернет магазина:

 

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

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

Не пытайтесь с помощью Интернет-магазина решить не свойственные ему задачи, вспомните про чашку кофе и компьютер. Обычно доводы "мы хотим, чтобы посетителю нравилось на нашем сайте" или "наш сайт должен показывать, что мы серьезная компания с большим опытом, надежная и лояльная к клиентам" заканчиваются растягиванием работы по дизайну сайта на полгода (в лучшем случае). При этом сам дизайн потом, к сожалению, можно смело выбрасывать в корзину. Я имею ввиду, что такие работы не вывешивают в портфолио. Хотя в любом случае, что касается юзабилити - мы отстаиваем  свое мнение более категорично, но в этом плане клиенты обычно и не спорят.

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

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

Пример правильной карточки товара:

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

Вот, например:

Слева подписка, справа подписка, текстовые блоки, баннеры, видеоролик...владельцы сайта ОЧЕНЬ хотят завлечь покупателя и продать товар, но не совсем правильно это делают.

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

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