Создание своего дизайна

Материал из Insales Wiki
Перейти к: навигация, поиск

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

Главная задача интернет-магазина - продавать. Привлекательность магазина с точки зрения покупателя определяется элементарным необходимым удобством. Что же это за удобство?

Процесс покупки с точки зрения покупателя

Покупателю, попав в магазин, надо убедиться (и побыстрее), что:

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

Что должно быть на страницах сайта магазина

Покупатель пришел в интернет-магазин. Что ему хочется увидеть на станицах заинтересовавшего интернет-магазина? Что захотели бы Вы увидеть, придя в интернет-магазин как покупатель? Логично предположить:

  • направление деятельности,
  • место "базирования" магазина,
  • навигационное меню,
  • поле ввода для поиска в магазине,
  • название магазина.

Какую информацию ищет покупатель в меню? Собственно:

  • Товары
  • О компании
  • Правила торговли
  • Контакты
  • Оплата
  • Доставка

Так что такое хороший дизайн?

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

Об украшении

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

О скорости загрузки

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

О фотографиях и описаниях

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

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

О качестве

Но! Простой дизайн не означает отсутствие дизайна вообще. Убогий вид и тексты с ошибками гарантированно вызовут недоверие посетителя - магазин следует делать качественно.

О некоторых страничках

Важная страничка "Контакты". Лучше, когда не один лишь телефон, но и e-mail, факс, ICQ. Но телефон - обязательно. С указанием зоны, ну и страны, на всякий случай. С указанием времени работы, и по какому времени. В указанное время по телефону нужно отвечать. Не "оставьте сообщение после сигнала...", а сотрудник реальный. Только не пишите в контактах того, что фактически не используется (e-mail, который раз в неделю просматривается, например).

Кроме того, с 1 июля 2006 г. вступил в силу Федеральный закон "О рекламе". В статье 8 этого закона, которая озаглавлена "Реклама товаров при дистанционном способе продажи", говорится: "В рекламе товаров при дистанционном способе их продажи должны быть указаны сведения о продавце таких товаров: наименование, место нахождения и государственный регистрационный номер записи о создании юридического лица; фамилия, имя, отчество, основной государственный регистрационный номер записи о государственной регистрации физического лица в качестве индивидуального предпринимателя".

Но самая важная страничка - "Товары". Тут продавцы обычно сами знают как что располагать. Однако, к каталогам с товарами имеется масса требований, часть из которых противоречивы. Вот, скажем, древовидная структура. Она хороша, но ветвится по одному признаку, например по назначению. А как быть, если покупателя интересуют только изделия одного определённого производителя? - фильтровать очевидно. А если двух? - это уже сложнее. А по цене результат отсортировать? В общем, не всё так очевидно. Можно ли пример привести столь экзотической ситуации? - да легко, и не экзотическая она вовсе! Нужен, скажем, посетителю минимальной стоимости жёсткий диск 2,5", SATA, производства Hitachi или Seagate, ёмкостью от 120 Gb из имеющихся сейчас в наличии. Быстро он его найдёт в магазине?

В любом магазине, как правило. есть "поиск". И, как правило, для решения подобных задач непригодный. Удобен был бы поиск, выводящий список найденного по запросу на страничку, с возможностью поискать ещё по ней по другому запросу (искать в найденном). Идеально, если ещё и сортировать итоговый список по любому параметру товаров можно было.

Кроме перечисленного, на одной из страниц сайта магазина нужно определить свою систему взаимоотношений с клиентом и выразить её:

  • в публичном предложении к заключению договора (оферте);
  • механизме вступления в силу такого соглашения;
  • в правилах пользования сайтом.

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

О применяемых цветах

Подбирать цвета для оформления магазина следует осторожно. Они должны:

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


Этого может оказаться непросто достичь, если не упускать из виду, что:

  • у посетителя и дизайнера разные как по размеру, так и по цветопередаче дисплеи (и настройки у них тоже, разумеется, разные),
  • разные браузеры могут несколько по-разному отображать цвета одного и того же элемента страницы.
  • у посетителя может быть включён режим отображения с малым количеством цветов (2, 16, 256, 65536),
  • у посетителя может быть отключён режим загрузки графики в момент его захода в магазин.


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


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

http://www.crossbrowsertesting.com/
http://browsershots.org/

Чем определяется внешний вид страниц магазина

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

Код страницы формируется на сервере путём объединения нескольких элементов:

Вид страницы формируется браузером посетителя:

Более подробно процесс формирования кода страницы описан здесь

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

Некоторые браузеры имеют возможность показать не только результат интерпретации кода страницы, но и сам код страницы в том виде, в каком он был принят с сервера, что можно использовать при отладке компонентов кода.

Шаблон страницы

Шаблон страницы - это текст на языке HTML, являющийся основой, каркасом для формирования вида страницы. Шаблон содержит кроме HTML-текста ссылки на файлы изображений и вставки на языке "Liquid", позволяющие включать в текст страницы изменяемые данные из базы данных магазина.

Процесс внесения изменений в шаблоны описан здесь.

Справочник по HTML: http://www.htmlbook.ru/content/

Переменные данные на странице

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

Справочник по языку Liquid находится здесь: http://liquid.rubyforge.org/

Файлы стилей

Файлы стилей передаются сервером в составе текста страницы и применяются веб-браузером посетителя к сформированному содержанию страницы в соответствии с правилами языка CSS.

Процесс внесения изменений в файлы стилей (.css) описан здесь.

Справочник по CSS: http://www.htmlbook.ru/content/

Файлы Javascript

Файлы Javascript передаются сервером в составе текста страницы и применяются веб-браузером посетителя для изменения вида загруженной страницы в зависимости от действий посетителя - движений "мышкой" и нажатий на кнопки.

Процесс внесения изменений в файлы скриптов (.js) описан здесь.

Справочник по Javascript находится здесь: http://javascript.ru/doctree/

Изображения на странице

Изображения - это файлы, содержащие картинки в различных форматах (.png, .jpg, .gif), которые показываются веб-браузером в местах страницы, определённых в тексте шаблона страницы.

Процесс загрузки новых файлов изображений описан здесь.

Полезные сведения об изображениях на веб-страницах приведены на http://webimg.ru/

Как можно изменять дизайн магазина

Прежде чем перейти к работе над собственным дизайном, надо ответить на вопрос:

Зачем изменять дизайн магазина?

Изменение дизайна магазина может преследовать различные цели:

  • сделать свой магазин отличающимся от других, использующих ту же стандартную тему;
  • сделать свой магазин более привлекательным для целевой группы посетителей;
  • сделать свой магазин более удобным для посетителей, чем это сделано в стандартных темах;
  • учесть в оформлении и системе навигации магазина характер предлагаемого ассортимента товаров:
  • изменить способ обработки некоторых событий: например, вместо скрытия с витрины отсутствующего товара показывать надпись "Под заказ" или кнопку "Известить о поступлении".

Смена стандартной темы

С помощью смены стандартной темы можно подобрать вид и набор функций магазина, наиболее близкий к тому, что Вы хотите получить в итоге. Это может заметно упростить дальнейшую модификацию магазина. Тему следует сменить, если:

  • другая тема имеет набор возможностей ближе к требующемуся Вам, чем текущая тема;
  • другая тема имеет визуальное оформление ближе к требующемуся Вам, чем текущая тема.

Как осуществить смену темы магазина и возможности стандартных тем описаны здесь

Добавление и изменение страниц

Добавлять новые страницы бывает нужно для:

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

Этот список, разумеется, не исчерпывающий. Как создать новую страницу сайта магазина или отредактировать имеющуюся описано здесь.

Изменение навигации

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

Создание и настройка меню описаны здесь.

Изменение темы

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

Настройка темы

Входит в возможности некоторых тем. Позволяет настраивать цвет фона, цвет и гарнитуру шрифтов.

Замена изображений

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

Как загрузить новые файлы изображений, написано здесь.

Изменение шаблонов

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

Процесс внесения изменений в шаблоны описан здесь.

Использование вставок на Liquid

Использование вставок на Liquid обеспечивает:

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

О применении языка "Liquid" можно прочитать здесь. Доступные объекты в шаблонах стандартного набора тем перечислены здесь.

Изменение стилей

Изменяя файлы стилей CSS можно:

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

Процесс внесения изменений в файлы стилей (.css) описан здесь.

Использование JavaScript

Использование JavaScript обычно требуется, если:

  • требуется изменять вид страницы магазина в зависимости от действий посетителя или по истечении какого-то времени без повторного её приёма с сервера;
  • требуется изменять данные на сервере в зависимости от действий посетителя или по истечении какого-то времени.

Процесс внесения изменений в файлы скриптов (.js) описан здесь.