Задача на новый дизайн сайта www. wikiplanet. ru

Задача на новый дизайн сайта www. wikiplanet. ru

Состав требуемого дизайна:

Работа разделена на 2 части. Часть 1 состоит из 3 основных страниц сайта:

ñ  Главная страница. Форма поиска

ñ  Страница результатов поиска.

ñ  Страница тура, блок заказа, блок «хочу в этот тур».

Часть 2 состоит из всего прочего наполнения:

ñ  Оформление заказа

ñ  Личный кабинет пользователя

ñ  Заглушки, используемые графические элементы, дизайн диалогов

Решение о победе будет приниматься по итогам реализации части 1, однако при этом претендент берет на себя обязательства реализовать часть 2.

Суть этой работы заключается в разработке интерфейсов взаимодействия (логистика действий пользователя) пользователя с сайтом и оформление этого в графическую оболочку (собственно, сам дизайн).

Любое решение должно быть обосновано, почему именно так!

Важно! При использовании вариантов, пользуйтесь реальными данными и текстами от предложений с www. wikiplanet. ru. Использование копирования одинаковых текстов (например, создаем список вариантов в результатах поиска) сразу говорит о низком уровне претендента.

Необходима отработка сценариев нескольких вариантов входа пользователей:

1.  Пользователь пришел на главную страницу

2.  Пользователь пришел на страницу конкретного тура

3.  Пользователь пришел на страницу результатов поиска

Главная страница.

Главная страница состоит из 3 частей:

- верхняя часть с логотипом, слоганом «Туры по всей России», номером телефона 8-800-333-9454 и кнопкой «войти» - данная сервисная полоса должна присутствовать на всех страницах сайта

- центральная часть: в качестве фона используется фотография красивого места. В нижнем правом углу фотографии подпись о том, что это за место. В центре — форма поиска. При кликании (возможно, при наведении) мышью на подпись к фотографии, форма поиска исчезает.

- «подвал»: присутствует на всех страницах сайта — это набор вспомогательных ссылок и логотипов (можно взять с текущего сайта www. wikiplanet. ru

Форма поиска:

ñ  необходимо иметь возможность использовать не один, а 2-3 независимых раздела, переключаясь между которых, форма поиска меняется. Пример решений: www. Таким образом, не смотря на единственный раздел в данный момент, у нас должна быть возможность добавлять разделы в будущем.

ñ  Основной раздел поиска: «Туры по России», в котором используется текстовое поле, где пользователь вводит, куда он хочет поехать. Пользователю необходимо понимать, что вводить в данное поле.

ñ  Рядом с полем ввода региона, должен быть блок с выбором времени проведения тура. Период проведения тура — это 1 и пара месяцев, например, январь-февраль. Можно смотреть как реализовано сейчас, не забывая, что решение требуется от вас. Тут важно понимать, что поехать в тур — это не поехать в гостиницу на выходные: туры имеют определенные даты начала, определенную длительность. При этом, в отличии от туров за границу, если задавать очень жесткие рамки, например «дата начала с и по + продолжительность в днях» - очень высок риск получить 0 результатов, так как формирование туров в России принципиально отличается от формирования туров при выездном туризме. Поэтому мы пришли к выводу, что на этом шаге необходимо указывать достаточно длительный диапазон дат.

ñ  Рядом поле ввода числа туристов. Соответственно, название этого поля должно быть также интуитивно понятным. В поле ввода числа туристов важно понимать, что могут быть взрослые, а могут быть и дети, при этом, необходимо указывать возраст детей. Пример компактной реализации ввода числа туристов (к нам не подходящей) — www.

Логика основной поисковой формы: на данном этапе мы просим у пользователя 3 уточнения: куда он хочет, примерно когда он хочет и в каком составе он хочет.

Зачем нам необходимо узнавать возраст детей (если есть): некоторые туры допускают детей (некоторые вообще не допускают) с определенного возраста.

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

Минимальное разрешения экрана: 1024Х768. Фоновое изображение на главной странице должно корректно отображаться на любых разрешениях вплоть до 2880×1800 (или тайлиться или логично завершается в сплошной фон-заливку. В случае использования фоновых изображений на иных страницах, к этим изображениям те же требования.

Страница результатов поиска.

Структура:

-  сервисная полоса (см. структуру главной страницы)

-  полоса уточнения результатов поиска

-  результаты поиска

-  «подвал»

Сервисная полоса и полоса уточнения результатов поиска — фиксированы, контент прокручивается. Контент в списковом контенте динамически добавляется при прокрутке вниз до момента окончания контента, и только после этого появляется «подвал».

Важно! Пользователь должен иметь возможность:

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

-  в любой момент пользователь должен иметь возможность изменить поисковый запрос (например, ему раскроется форма поиска)

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

-  желаемые даты начала тура из возможных (например, разворачивается календарик, где пользователь отмечает интересующие его даты)

-  продолжительность тура

-  наборы тегов «Тип тура» (21 тег) и «Что здесь есть» (44-45 тегов) - это теги-фильтры.

Единая сортировка вывода результатов поиска — по цене (от минимума к максимуму)

В зависимости от ширины экрана, результаты поиска должны выводиться в 2 или 3 или в 4 (при ширине экрана более 1800 пикселей) колонки. В каждом блоке результата поиска мы должны выводить:

-  Фотографию тура

-  Название тура

-  Продолжительность в днях

-  Краткое описание + обязательно ссылка «Подробная информация», ведущая на страницу тура в новом окне.

-  Цена от ХХХ рублей до ХХХ рублей за человека

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

-  Фото тура — открывает фотогалерею без перехода к самой странице тура

-  «Добавить в избранное» - функция, по которой пользователь сможет всегда вернуться к списку того, что отметил. Можно посмотреть как это реализовано сейчас.

-  «Заказать» - по нажатию переходит переход к странице тура в новом окне

Вот пример информации, которая выводится сейчас: http://www. wikiplanet. ru/search_tour? entityType=1&Filter=&Regions=&Stars=&NearCities=&CityDistricts=&Districts=&tourDates=&tourDays=&FilterDistanceId=&FilterDistanceType=&FilterDistanceAt=0&FilterDistanceTo=&FilterCoursIds=&FilterCoursAt=&FilterCoursTo=&entityInSearchFormId=&name=%C1%E0%E9%EA%E0%EB%2C+%EC%E5%F1%F2%EE&sid=66&stype=4&decodeNums=2&remCount=0&checkin_from=&checkout_from=&month_at=11.2014&month_to=12.2014&adult1=2&child1=0

В настоящий момент данная информация избыточна.

Страница тура

1.  блок заказа остается текущим, вместе с плавающим «чеком» справа. Однако, допустимо изменение цветовой гаммы, выделений и прочих графических элементов в данном блоке. Однако, в чеке необходимо отразить 2 варианта: когда вносится сразу вся сумма и когда вносится сразу только 30% от стоимости, а остальные 70% турист оплачивает на месте.

2.  С левой стороны должна быть отображена история просмотренных пользователем туров

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

4.  На странице должен быть отображен путь: Главная \ Результаты поиска \ Название тура

Блоки с информацией, которые должны быть на странице тура:

-  Краткое описание тура + ссылка «подробнее», ведущая на блок с подробным описанием тура

-  Главное фото и фотогалерея

-  Продолжительность в днях

-  Цена тура от и до на человека + ориентировочная стоимость на заданную группу

-  Быстрый переход к блоку заказа

-  «Добавить в избранное»

-  Что включено в цену

-  Что за отдельную плату

-  Места размещения ( если в месте размещения присутствует конкретная гостиница, то она отображена в виде ссылки, по нажатию на которую открывается новый слой с информацией по этой гостинице)

-  Место и адрес начала тура

-  Основное описание тура

-  Тип условий отмена тура — всего у нас существует 5 типов отмены тура: Бесплатная отмена тура, Очень жесткие условия отмены, Жесткие условия отмены, Средние условия отмены и Мягкие условия отмены — со ссылкой на соответствующую вкладку с подробностями

Ряд вкладок (как возможное решение):

-  программа тура — для уменьшения перегрузки текущей страницы сюда выносим программу

-  условия отмены

-  «важно» - прочая важная информация

-  Рассчитать стоимость билетов — здесь используется функция примерного расчета стоимости билетов

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

Блок с изменением возможных дат и состава группы

Ниже сам блок заказа, который должен присутствовать при всех вкладках

Под блоком заказа - «Вопросы, обсуждения, отзывы»

Также необходимо добавить 2 функции:

1.  Задать вопрос организатору — открывает новый слой где пользователь может задать вопрос, попросить скидку и тд, отталкиваясь от конкретного тура (с конкретной даты начала, числа туристов и стоимости с возможностью получить ответ на емейл, телефон или пройдя быструю авторизацию через соцсеть (vk, одноклассники, фейсбук)

2.  Рассказать друзьям об этом туре — новый слой, где пользователь может поделиться информацией по этому туру в соцсетях

Часть 2.

Оформление заказа. Здесь мы выводим информацию о том, что пользователь заказывает, накапливаемые бонусы + возможность тратить уже накопленные бонусы (требуется авторизация). Также тут выводим информацию о том, какой вариант оплаты используется: 100% оплата или же 30% сейчас и 70% на месте (устанавливает организатор тура).

Далее идет блок с данными покупателя:

-  юридическое или физическое лицо — в случае юридического лица, требует реквизиты, а вариант оплаты будет только один - «получить счет на оплату»

-  данные о покупателе: пол, ФИО, емейл, телефон, номер паспорта, дату рождения. Если пользователь уже авторизован — данные подставляем автоматически

-  данные по каждому из туристов: пол, ФИО и дату рождения. Для первого туриста галочку «совпадает с данными покупателя» (если нажата — копируем выше введенные данные) + для каждого туриста галочку «данные пока не известны»

-  выбор варианта оплаты (по-умолчанию не выбрано ничего): кредитные карты, получить квитанцию для оплаты в банке, связной, купит в кредит. Для каждого из варианта указывается итоговая сумма к оплате со всеми надбавками и скидками (для Связного +3%, для оплаты через банк скидка 1%)

-  в зависимости от выбранного варианта оплаты, переходим на следующий шаг

Личный кабинет. Необходимый функционал:

-  мои туры — страница по-умолчанию. Тут список предстоящих и проведенных туров с возможностью по проведенным турам оставить отзыв. По каждому из туров выводится статус. Для предстоящего и не оплаченного тура ссылка «Оплатить» - открытие слоя с блоком оформления заказа, но с уже подставленными известными данными. По оплаченным предстоящим турам ссылка на распечатку ваучера

-  сообщения — переписка с организаторами

-  получить договор — функция заказа письменного договора к отправке по почте (необходимо будет указать почтовый адрес)

-  Мои бонусы — здесь мы отображаем накопленные и планируемые бонусы. Очень прилично это сделано в личном кабинете на

Заглушки. Имеется в виду, что поиск и оформление заказа происходят не мгновенно, и на эти секунды нам необходимо отображать заглушку, которая должна показать пользователю, что «мы не висим, а ищем; мы хорошие — вот какие у нас преимущества (цены производителя, гарантия лучшей цены, туры по всей России и тд»

Диалоги (То, что открывается как новый слой или является отдельной страницей):

1.  Авторизация \ регистрация (включая через соц сети vk, одноклассники, фейсбук), напоминание пароля

2.  Даты заездов по конкретному туру на странице результатов поиска

3.  Функция «Избранное»

4.  Изменение поискового запроса на странице результатов поиска

5.  Уточнение среди найденных вариантов: выбор конкретных дат, выбор конкретных тегов

6.  Изменение дат и числа туристов на странице тура

7.  Слой конкретного места размещения на странице тура — краткое описание конкретной гостиницы, ее номерного фонда с фотографиями.

8.  «Присоединиться к группе» - где пользователь выбирает группу из предложенных в выбранных им датах и имеется блок для заказа с вариантами и расчетом стоимости относительно того, что пользователь присоединяется к этой группе. Также указывается число туристов и их пол уже набранных в группу и возможность связаться с главным в этой группе (например, хочу узнать, какой возрастной состав группы)

9.  Диалог «Связаться с группой» - используется в функции «присоединииться к группе» - по этой функции главному представителю этой группы или организатору должен отправляться вопрос.

10. Задать вопрос организатору — тут предполагается некая форма обратной связи, где пользователь выбирает тему, задает вопрос и оставляет данные для ответа: емейл и\или телефон + имя или проходит быструю авторизацию через соцсеть. Важно понимать, что обращаясь к организатору, пользователь должен определить конкретику: не просто по какому туру вопрос, а конкретно на какую дату и в каком составе, при этом пользователь должен видеть расчет цены, а в случае нескольких вариантов — должен выбрать конкретный вариант или несколько вариантов

11. Рассказать друзьям об этом туре

12. Ввод отзыва по туру — имеется в виду текстовый блок, общая оценка 1-5 + добавление фотографий из тура