суббота, 4 февраля 2012 г.

Размещение мебели в интерьере, как пример нестандартного функционала на сайте


Итак, обещанный пример нестандартного функционала для сайта мебельной компании.

Пусть воображаемое ООО “Ромашка” продает жилую мебель - корпусную и мягкую (для кухонной и офисной мебели примеры получились бы сложнее, но не менее интересными).

Задача посетителя мебельного сайта - обставить свою квартиру. Поможем ему в решении!

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

  1. Слева он видит рабочее поле, разлинованное в клетку (как лист школьной тетради). Это прообраз его жилплощади. Масштаб клеток можно выбирать - либо оставить по умолчанию 1х1 метр (что просто, но не всегда подходит), либо, например, 10х10 см. Можно позволить пользователю выбирать произвольный масштаб - дело вкуса разработчика.
  2. На первом шаге пользователь по клеткам рисует помещение, для которого он собирается купить мебель. Это может быть отдельная комната или сразу целая квартира. Процесс выбора вполне интуитивен: кликнул по клетке - она окрасилась из серого в белый и “стала” частью помещения.
  3. Справа от рабочего поля на экране расположена “палитра объектов”, где в качестве объектов выступают элементы мебели - шкафы, тумбы, диваны, кресла, столы, стулья и т.д. Причем не просто, а разумеется, той самой мебели, которую производит и продает компания-хозяйка сайта. Также надо дать возможность нанести такие нейтральные объекты, как дверь, окно, батарея и т.д.
    1. Дизайн палитры объектов - одно из тонких мест сервиса. Здесь есть, над чем подумать дизайнеру и юзабилисту. Необходимо компактно разместить довольно большой ассортимент мебели и сделать это максимально привлекательно.
    2. Поскольку мебель продается сериями, то на палитре имеем группировку по сериям, каждую из которых можно развернуть и посмотреть поэлементно. Можно также перейти в каталог интернет-магазина и посмотреть развернутую презентацию серии.
  4. Основной функционал палитры, как вы догадались, это возможность натаскивать мышкой различные элементы мебели на рабочее поле слева, символизирующее жилплощадь. Разумеется, все происходит в реальном масштабе с учетом настоящих размеров каждого объекта.
    1. Мебель можно двигать, удалять, поворачивать, меняя взаимное расположение. И таким образом оценивать текущий вариант обстановки.
  5. Дальнейший функционал - более сложные разработки, но кто сказал, что это невозможно? :) К примеру по окончанию расстановки можно предложить пользователю сделать трехмерную визуализацию (рендер) получившегося интерьера. Не забудем и про выбор мебельной текстуры.
    1. Можно расширить палитру нейтральных элементов за счет цветов, например. Тут можно закрутить партнерство с флористами и предлагать их продукцию! Тоже профит!
    2. Тонким моментом может стать мебель, которая при эксплуатации меняет свой размер, например, раскладной диван. Важно ведь соблюсти взаимное расположение мебели, чтобы никто никому не мешал. Когда такой объект с “гибкими” размерами уже перетащен на рабочее поле, можно кликом по нему правой кнопкой менять конфигурации (“сложен”, “разложен” и т.д.) Если возникает конфликт, выдается предупреждение!
  6. И разумеется главный результат - готовая спецификация на весь комплект мебели с расчетом итоговой стоимости. Не забывайте про скидку в благодарность за самостоятельность покупателя! :)
Пара технических моментов.
1. Современная мебельная компания использует для проектирования системы уровня AutoCad. Таким образом для поддержания актуальности объектов мебели на палитре нашего веб-приложения потребуется наладить импорт базы мебели из подобного пакета. Задача не самая простая, но для опытного разработчика выполнимая.
Важно не упустить этот момент - нельзя сделать этот сервис “раз и навсегда”. Базу мебели надо постоянно актуализировать!

2. Реализация клиентской части возможна как на Flash, так и с помощью JavaScript + HTML5. Выбор технологии - прерогатива опять-таки разработчика, но мне видится более предпочтительным второй вариант.

Давайте в качестве итога пройдемся по пяти пунктам из предыдущего поста про важные моментов на пути создания нестандартного функционала на корпоративном интернет-сайте

1. Элемент игры несомненно присутствует - пользователь увлеченно таскает мебель, “проектируя” собственное жилище, а в качестве финиша - готовая обстановка. В идеале остается оплатить и ждать доставку.

2. Полезность тоже очевидна - в результате пользователь получает продуманное решение по размещению мебели в комнате или целой квартире.

3. Взаимодействие с продукцией компании - здесь тоже нет сомнений. Пользователь “размещает” в комнате мебель именно нашей компании. Если потом выяснится, что у конкурентов диван на 500 рублей дешевле, то, думается, это не станет весомым аргументом. Тут ведь уже “все хорошо вписалось в комнату и грамотно сочетается!” :) Да и плюс скидка за весь комплект!

4. Логика и интуитивность зависят от проектировщика приложения. Но тут большой плюс - широко распространенная концепция палитры объектов и их натаскивания на рабочее поле. По такому принципу уже работают многие “оффлайн”-приложения.

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