Разработка интернет-магазина: альтернативный интерфейс

25.01.2015

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

Популярность web-интерфейсов растёт с каждым днём. Многие компании уже отказались от оконных приложений для работы с базами данных в пользу web-интерфейса, одно из основных преимуществ которого заключается в возможности работы с базой данных из любой точки планеты с доступом к интернету без необходимости загрузки дополнительного программного обеспечения. Оконные приложения научились неплохо взаимодействовать с web-технологиями, но при этом они выступают в качестве посредников при работе с базой данных. Нужен ли этот посредник? Не всегда. Одним из главных принципов, на которых работает Интернет, и о котором часто забывают, является доступность и простота при работе с информацией. Действительно, для поиска товара нужно ввести строку в поле поиска, для получения информации - щелкнуть на ссылке. Это очень простые и интуитивно понятные действия, в отличие, скажем, от тех, которые требуется сделать для создания визитки в графическом редакторе. Почему же пользователи с высокоскоростным доступом в сеть “игнорируют” наш чудесный и красивый сайт и просят прислать прайс-лист, цены в котором могут стать неактуальными через месяц или неделю? Неужели составлять заказ в прайс-листе удобнее, чем через интернет-магазин? Для ответа на этот вопрос нужно сравнить то, как происходит процесс заказа в обоих случаях.

При работе с прайс-листом в Excel весь объем данных загружается один раз при открытии файла. Вся дальнейшая работа происходит без перезагрузки данных, что значительно повышает скорость и удобство работы с информацией. Работа с данными происходит на стороне клиента. Интернет-магазины работают по технологии клиент-сервер, когда сервер отправляет данные клиенту по запросу пользователя. Ввели строку запроса и щелкнули на кнопке “найти” – загрузилась страница с результатами поиска, щелкнули на названии товара – загрузилась страница с информацией о товаре, щелкнули на кнопку “перейти на предыдущую страницу” или закрыть окно предварительного просмотра информации о товаре – загрузилась или показалась страница с результатами поиска. Сама по себе технология клиент-сервер широко и с успехом используется для работы с базами данных в оконных приложениях, но одна из особенностей работы клиент-сервер в интернете заключается в том, что помимо запрашиваемых данных клиенту пересылаются дополнительные данные - html-разметка, реклама, информация о похожих товарах, формы опросов. Это далеко не полный перечень всего, что разработчики считают нужным переслать пользователю помимо запрашиваемой им информации. Нередко получается так, что объем “сопутствующих” данных на один-два порядка превышает объём запрашиваемой информации. Назвать такое взаимодействие пользователя с интернет-магазином эффективным нельзя.

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

Благодаря компьютерным играм можно неплохо повысить навык точного и быстрого позиционирования курсора мыши, пальца или пера, но работа при помощи клавиатуры может производиться быстрее. Если не брать во внимание мобильные гаджеты, то на практике чаще всего используется комбинированный способ –  клавиатура используется для ввода данных, а позиционирование – без использования клавиатуры. Лишние движения - это не только потеря времени, но и ощутимые затраты усилий. Можно ли формировать заказ только с использованием клавиатуры? Конечно! Примером неплохой реализации клавиатурного ввода является поиск и подбор товара из каталога в документы в программе 1С.

Преимущества оконных приложений в плане скорости и удобства работы с данными налицо. Почему же web-разработчики не спешат применять огромный опыт, накопленный в традиционном программировании, для разработки удобных интерфейсов для составления широкоассортиментных заказов? Причин несколько, начиная от отсутствия простых технологий для создания нужной функциональности и заканчивая рекламными уловками и простым нежеланием возвращаться к “ненавистным окнам”. Казалось бы, помимо Java, Flash, AJAX существует достаточно инструментов для создания эффективных приложений, но на практике мы видим пока лишь частичное улучшение: где-то инкрементный AJAX-поиск, где-то всплывающее окно фотографии, где-то обновление информации без перезагрузки страницы, где-то фиксированная полоса навигации на странице. Разработка эффективного интерфейса интернет-магазина требует определенного программного кода, который может значительно ухудшить видимость сайта поисковыми системами. То, что удобно поисковым роботам, неудобно  посетителям! Это факт, и в ряде случае удобная для работы пользователей информационная структура не попадёт на индексацию в поисковые системы. Выход? Использование двух интерфейсов к одной информационной базе данных интернет-магазина: традиционный для узкоассортиментных заказов с возможностью использования разных устройств (смартфонов, планшетов, ноутбуков и др.) и оптимизированный для составления широкоассортиментных заказов. Первый интерфейс реализует базовую функциональность - обеспечит видимость интернет-магазина в поисковых системах, будет доступен для заказа товара с использованием разных устройств, позволит набить его “креативным дизайном и фишками”, а второй - дополнительный сервис для удобной работы с информацией без лишних отвлекающих моментов. Этот дополнительный сервис функционирует как небольшое web-приложение в рамках интернет-магазина.

Пример реализации альтернативного web-интерфейса для быстрого заказа широкого ассортимента товаров можно увидеть в интернет-магазине УчМаркет (рис. 1).

Рис. 1. Альтернативный web-интерфейс интернет-магазина УчМаркет.

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

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

На странице “Быстрый заказ” реализован принципиально другой подход. Сначала весь каталог товаров загружается в список, который является стандартным элементом web-формы, имеющим встроенную функциональность – перемещение по списку при помощи курсорных клавиш и выделение текущей позиции. Поиск товаров и навигация по каталогу осуществляется локально, что значительно увеличивает скорость составления заказа без подгрузки данных с сервера. Информация о товаре показывается без перезагрузки страницы рядом со списком товаров. Навигация, инкрементный поиск, просмотр информации и добавления товара в заказ можно осуществить с использованием  клавиатуры. При использовании браузера FireFox cоздаётся впечатление, что работаешь в оконном приложении, а не в интернет-магазине, настолько всё работает быстро. Internet Explorer отличается медленной загрузкой каталога товаров в список, а Opera загружает каталог быстро, но подтормаживает при навигации по нему.