48
8. Горизонтальная карусель партнеров. Наличие серьезных партнеров
положительно сказывается на формировании первого впечатления об Интернет-
магазине и участвует в создании имиджа в целом.
На рисунке 6 можно ознакомиться с итоговой схемой главной страницы,
которая стала основой для создания шаблона.
Рисунок 6 — Макет шаблона главной страницы
49
Следующий ключевой шаблон — страница каталога продукции, от которой во
многом зависит формирование интереса покупателя именно к данным товарам. На
этой странице необходимо наиболее удобно и очевидно продемонстрировать
ассортимент товаров, доступных в Интернет-магазине. Важная роль отводится
созданию привычного для обычных пользователей интерфейса поиска товаров и
навигации, не требующего от них длительных раздумий.
Исходя из этих требований был подобран список блоков, в который входит:
1. Сортировка товаров по различным показателям, которые были бы
удобны потенциальному покупателю.
2. Поиск по товарам, существенно экономящий время тех клиентов,
которые уже точно определились с тем, что планируют заказывать.
3. Сетка вывода карточек товаров по четыре позиции в ряд. Это наиболее
наглядная форма представления ассортимента.
На рисунке 7 можно ознакомиться с итоговой схемой страниц каталога
продукции, которая стала основой для создания шаблона.
Рисунок 7 — Макет шаблона страницы каталога
50
Ряд важных функций отводится страницам отдельных товаров. Они должны
максимально полно и наиболее достоверно знакомить посетителей Интернет-
магазина с просматриваемыми ими изделиями. Для этого необходимо предоставить
информацию об основных качествах и характеристиках изделий, доступных опциях
и конфигурациях. Мало заполненная страница без фотографий и данных, скорее
всего, будет закрыта посетителем сайта практически сразу, в то время как
продуманная карточка с достоверной информацией существенно повысит
вероятность оформления заказа.
На этой же странице пользователь узнает конечную стоимость покупки,
выбирает количество товаров, получает информацию по оплате и условиям
доставки. Конечная цель страницы отдельных товаров — это доставление
представленной на ней продукции в виртуальную корзину.
Учитывая стоящие перед страницей задачи и цели, были определены
следующие блоки, участвующие в формировании схемы:
1. Интерактивная галерея изображений, которая бы наглядно отображала
внешний вид изделий и, возможно, особенности их эксплуатации или
установки.
2. Информация о цене и производителе. Отсутствие этих данных на
странице вызовет неприятные ассоциации и заставит посетителей усомниться
в надежности Интернет-магазина.
3. Блок переменных характеристик товара, количества и стоимости, в
которых данные можно оперативно поменять, исходя из текущих реалий.
4. Блок с информацией о способах оплаты, которыми пользователь может
воспользоваться при совершении покупки.
5. Подробное описание товаров. Чем больше информации — тем меньше
у посетителя сайта соблазн изучить другие источники в поисках ответа на
важные вопросы.
6. Дополнительные особые условия.
51
На рисунке 8 можно ознакомиться с итоговой схемой страниц товаров,
которая стала основой для создания шаблона.
Рисунок 8 — Макет шаблона контент-части страницы товара
Как показывает практика, посетители далеко не всегда заходят на страницу
отдельных товаров, изучая представленную на ней информацию. Многие люди
делают свой выбор, опираясь только на карточки товара, представленные в каталоге.
Поэтому продуманная, богатая на полезную информацию, но не слишком
перегруженная карточка товара является весьма важным элементом Интернет-
магазина, участвующим в повышении онлайн-продаж компании в целом.
Карточка товара на сайте Simbez.ru приведена на рисунке 9 и включает
следующий набор элементов, тщательно продуманных и выбранных вместе с
заказчиком:
1. Изображение товара, которое позволяет детально рассмотреть
приобретаемую продукцию.
2. Наименование изделия, чтобы его можно было найти как в поиске, и
среди множества других товаров.
52
3. Форма выбора доступных характеристик. Так как каждый товар имеет
собственные характеристики, важно иметь возможность выбрать разные
свойства под разные изделия.
4. Поле выбора количества товаров. Далеко не всегда продукция
покупается в единственном экземпляре — покупатель должен иметь
возможность выбрать оптимальное для себя количество товаров.
5. Кнопка покупки — заметная часть карточки товара, которая должна
побуждать посетителей сделать заказ.
6. Кнопка быстрого оформления заказа. Далеко не всегда посетитель
сайта готов проходить сложную регистрацию на сайте только для того, чтобы
сделать небольшой заказ. Лучшим решением этой проблемы станет установка
кнопки быстрого оформления заказа.
Рисунок 9 — макет карточки товара
53
Для шаблона страницы корзины и страницы оформления заказа было решено
использовать классическое табличное представление. Это объяснимо тем, что
подобная форма является понятной и давно привычной для большинства
покупателей. Таким образом, им не придется тратить собственное время на попытки
разобраться с незнакомым интерфейсом, что могло бы негативно сказаться на
количество оформленных заказов и желании посетителей снова возвращаться на
страницы Интернет-магазина.
Шаблон представлен на рисунке 10 и состоит из перечня следующих элементов:
1. Таблица товаров. Каждая строка таблица состоит из наглядной
фотографии, наименования, полного и понятного описания, параметров и
ценовой информации.
2. Выбор способов доставки. Интернет-магазин предлагает покупателям
несколько способов доставки, из которых они смогут подобрать оптимальный
для себя вариант.
3. Выбор способа оплаты. Клиенты могут иметь разные предпочтения по
оплате заказов, которые нужно учитывать. Кто-то предпочитает электронные
деньги, кто-то наличный расчет, кто-то банковские платежи и так далее.
4. Форма ввода данных покупателя. Для того, чтобы покупатель мог
получить свой заказ, ему необходимо оставить свою контактную
информацию.
Сочетание данных элементов позволяет сделать продающую форму, существенно
облегчающую заказ и оформление покупки со стороны клиентов.
54
Рисунок 10 — макет шаблона страницы корзины и оформления заказа
После завершения работ по структуризации и проектированию интерфейса
вся информация была передана в работу штатному дизайнеру. Также дизайнер
совместно с заказчиком изучил фирменный стиль компании, логотип, пожелания
заказчика по поводу визуального оформления.
Любой современный сайт должен создаваться с учетом эргономики чтобы
максимально способствовать комфорту просмотра и навигации, предоставляя
максимально положительный и привычный опыт использования для конечных
посетителей. Был определен ряд эргономических требований, которые должны быть
учтены в дизайне, ознакомиться с требованиями можно в таблице 7.
55
Таблица 7 — эргономические требования к сайту simbez.ru
Комфорт
Дизайн сайта не должен негативно влиять на физическую и
психологическую усталость посетителя
Круг пользователей
Сайт рассчитан на широкую аудиторию пользователей в
возрасте от 20 до 65 лет
Привычки
Навигация сайта должна быть максимальна привычной для
пользователей российского сегмента сети Интернет
Оборудование
Сайт должен адекватно отображаться на офисных и
домашних мониторах с разрешением от 1280px по ширине.
Мобильные устройства не являются целевыми.
Уровень знаний
Посетители сайта не являются специалистами в области
информационных технологий
Цветовая палитра
Сайт должен быть выполнен к красно-серых тонах. В
качестве основного фона должен использоваться белый
цвет.
Шрифт
Должны использоваться гарнитуры без засечек с кеглем не
меньше 13.
Контраст
Между цветом фона и текстом на страницах и в блоках
должен быть обеспечен достаточный контраст даже для
людей с проблемным зрением.
В результате были получены готовые макеты сайта, подходящие для верстки
и шаблонизации. Итоги работы дизайнера можно изучить в приложениях 1-5 данной
работы. Стоит обратить внимание, что изображения для приложений были получены
с живого сайта, на котором заказчик уже вносил собственные коррективы и
содержимое.
4. Технический проект
4.1. Верстка и шаблонизация.
Для наиболее эффективного создания сложных и продуманных программных
продуктов, к которым относится и Интернет-магазин, применяются IDE -
интегрированные среды разработки. Это специальный комплекс программных
средств, который включает в себя интерпретатор или компилятор, текстовый
56
редактор с подсветкой синтаксиса, систему контроля версий, отладчик, средства для
выполнения проверки качества кода и автоматизации сборки. [15]
В данном проекте в качества IDE применяется среда разработки JetBrains
PHPStorm 10, которая отличается весьма высокой скоростью функционирования. В
ней присутствуют все самые необходимые инструменты, позволяющие реализовать
любые интернет-решения независимо от их сложности. Достаточно существенным
аргументом для выбора именно JetBrains PHPStorm 10 выступило наличие
поддержки работы с удаленным SFTP сервером. Свою роль сыграла и возможность
одновременно заниматься разработкой как серверной, так и клиентской частью
Интернет-магазина.
После проведения установки и дальнейшей настройки среды разработки
начинается этап статической верстки. Это обязательная часть для создания любых
сайтов из заранее подготовленных дизайн-макетов. Для реализации этого этапа были
использование следующие технологии и специальный набор библиотек:
1. HTML5 — основной язык гипертекстовой разметки.
2. CSS3 — каскадные таблицы стилей. Формальный язык для описания
внешнего вида HTML документа.
3. JavaScript стандарта ECMAScript 5.
4. jQuery - JavaScript библиотека, которая существенно упрощает
взаимодействие разработчика с HTML элементами.
5. Slick Slider - многофункциональная JavaScript
библиотека,ориентированная непосредственно для создания различных
интерактивных слайдеров и наглядных каруселей из изображений.
Далеко не все системы управления позволяют легко интегрировать готовый
дизайн. В большинстве случаев для этого предоставлен специальный набор средств
для внедрения верстки, например, шаблонизатор. Использование в DIAFAN подхода
57
MVC (Model - View - Controller) позволяет обеспечить разделение представления
(View) от данных (Model) и логики (Controller). Это способствует достижению
высокой скорости работы при минимальных трудозатратах на внесение доработок и
изменений. Схема формирования страницы при MVC подходе представлена на
рисунке 11.
Рисунок 11 — схема формирования страницы в ядре системы DIAFAN