А: ТЗ на дизайн форм подписки
Задача
Отрисовать формы подписки для интернет-магазина www. shop-example.ru.
Материалы
Бренд-бук shop-example: ссылка на скачивание бренд-бука
1. Форма подписки для «подвала» сайта
1.1. Расположение – в «подвале» сайта, справа:
1.2. Эскиз
• Обрамления нет.
• Иконка конверта в фирменном цвете.
• Поле: Введите Ваш e-mail (написано тонко, бледно-серым).
• Кнопка или ссылка Подписаться (в стиле сайта).
1.3. Thank you page
Сообщение, которое демонстрируется пользователю после того, как он ввел e-mail и нажал Подписаться.
• Эскиз:
• Иконка та же, поля и кнопка исчезают.
• Текст (размер, цвет подобрать): Спасибо! Будем на связи:-).
1.4. Форма с ошибками
Сообщение, которое демонстрируется пользователю при некорректном заполнении поля e-mail:
1.4.1. Если не ввел e-mail, но нажал кнопку
• Текст:
Пожалуйста, введите Ваш e-mail.
• Расположение, вид – решить самостоятельно (возможно, сделать подсветку поля бледно-красным).
1.4.2. Если ввел некорректный адрес (например, без @ или точки)
• Текст:
Пожалуйста, введите корректный e-mail.
• Расположение, вид – решить самостоятельно.
1.5. В результате предоставить исходники в psd:
1.5.1. Форму подписки
1.5.2. Thank you page
1.5.3. Формы с ошибками (1.4.1, 1.4.2)
1.5.4. Произвольная страница сайта – общий вид с формой подписки в «подвале» (в png)
2. Всплывающая (pop-up) форма подписки
Форма будет демонстрироваться посередине экрана новым посетителям сайта, которые пробыли на нем какое-то время или просмотрели несколько страниц.
2.1. Расположение – по центру экрана, на затемненном фоне
2.2. Эскиз
• Размер: по ширине примерно 450 px, по высоте произвольно.
• Граница: нет, просто контраст с затемненным фоном страницы, скругленные углы (можно попробовать тень).
• Иконка в левом верхнем углу: подарок.
• Заголовок: Дарим 300 рублей!
• Поле: Ваш E-mail (тонко серым шрифтом).
• Кнопка: Получить! (оранжевая, шрифт белый – либо свой вариант).
• Текст маркированным списком.
–
Получите подарочный купон по электронной почте
–
Воспользуйтесь скидкой при заказе от 2000 рублей
– Узнавайте о наших акциях и новинках первыми!
2.3. Thank you page
Сообщение, которое демонстрируется пользователю после того, как он ввел e-mail и нажал Получить.
• Эскиз:
• Размер: такой же.
• Граница: такая же.
• Вся верхняя часть та же.
• Вместо поля для подписки, кнопки и списка крупный текст:
Мы отправили подарок на Вашу электронную почту. Проверяйте:-)
2.4. Форма с ошибками
2.4.1. То же, что и в форме для «подвала» сайта (1.4.1, 1.4.2)
2.4.2. Если ввел адрес, который уже есть в базе
• Текст:
Этот адрес уже подписан на нашу рассылку:-).
• Расположение, вид – решить самостоятельно.
2.5. В результате предоставить исходники в psd
2.5.1. Форма подписки
2.5.2. Thank you page
2.5.3. Формы с ошибками (2.4.1, 2.4.2)
2.5.4. Произвольная страница сайта – общий вид с формой подписки по центру и затемненным фоном (в png)
3. Форма подписки на отдельной странице
3.1. Расположение
Форма будет размещена на отдельной странице сайта – в обрамлении типовых элементов навигации («шапка», горизонтальное меню, футер) вместе с кратким описанием рассылки:
3.2. Эскиз
• Предложение: Раз или два в неделю Вы будете получать от нас эксклюзивные предложения, информацию об актуальных акциях, новинках и популярных товарах.
• Поле для ввода данных: Введите Ваш e-mail.
• Кнопка: Подписаться.
3.3. Thank you page
Сообщение, которое демонстрируется пользователю после того, как он ввел e-mail и нажал Подписаться.
• Предложение остается.
• Поле для ввода e-mail и кнопка «Подписаться» исчезают.
• На их месте текст: Спасибо! Будем на связи:-).
• Возможно, только поменять стиль и цвет текста (чтобы был заметнее, но не слишком яркий).
3.4. Форма с ошибками
3.4.1. То же, что и в форме для «подвала» сайта (1.4.1, 1.4.2)
3.5. В результате предоставить исходники в psd:
3.5.1. Страницу подписки
3.5.2. Thank you page
3.5.3. Формы с ошибками (3.4.1)
3.5.4. Общий вид страницы в обрамлении элементов навигации сайта (в png)
Б: ТЗ на внедрение форм подписки
Задача
Сделать формы подписки для «подвала» сайта, всплывающего окна и на отдельной странице.
1. Форма подписки для «подвала» сайта
[В качестве иллюстрации – макет из задачи А: 1.5.1]
1.1. Расположение формы на сайте: в нижнем правом углу
[В качестве иллюстрации – макет из задачи А: 1.5.4]
1.2. Исходники дизайна для верстки в psd: ссылка на скачивание макетов
1.3. Взаимодействие с пользователем
1.3.1. Пользователь вводит значение в поле E-mail
1.3.2. Нажимает Подписаться
1.3.3. Видит Thank you page на том же самом месте:
[В качестве иллюстрации – макет из задачи А: 1.5.2]
1.3.4. Если поле E-mail при нажатии кнопки было пустым – форма выдает сообщение об ошибке:
Пожалуйста, введите Ваш e-mail
1.3.5. Если в поле E-mail при нажатии кнопки не было «@» или «.» – форма выдает сообщение об ошибке:
Пожалуйста, введите корректный e-mail
[В качестве иллюстрации – макеты из задачи А: 1.5.3]
1.3.6. Если в поле E-mail был введен e-mail, который уже есть в базе данных, пользователю все равно демонстрируется Thank you page
1.3.7. Все события могут происходить многократно
1.4. Взаимодействие с рассылочным сервисом:
Порядок взаимодействия с рассылочным сервисом описан в отдельной задаче:
ссылка на ТЗ на синхронизацию.
2. Всплывающая (pop-up) форма подписки
[В качестве иллюстрации – макет из задачи А: 2.5.1]
Пример готовой формы: ссылка на сайт, где действует pop-up-форма.
2.1. Расположение формы: по центру экрана
[В качестве иллюстрации – макет из задачи А: 2.5.4]
2.2. Исходники дизайна для верстки в psd: ссылка на скачивание макетов
2.3. Взаимодействие с пользователем
2.3.1. Пользователь вводит E-mail в соответствующее поле
2.3.2. Нажимает кнопку Получить
2.3.3. Видит Thank you page на том же самом месте:
[В качестве иллюстрации – макет из задачи А: 2.5.2]
2.3.4. Для подписавшегося пользователя генерируется специальный промокод:
• уникальный для каждого e-mail;
• произвольный набор латинских букв и/или цифр (например, 000–000–000);
• размер скидки: 300 рублей;
• условия предоставления: min чек 2000 рублей;
• скидка может быть использована 1 раз;
• срок действия: 1 месяц с момента генерации.
2.3.5. На e-mail подписавшегося пользователя через админку сайта сразу высылается письмо с обещанным бонусом
• E-mail отправителя: newsletter @ shop-example. ru
• Имя отправителя: Shop-example
• Тема (Subject line): Ваш подарочный купон доставлен!
• Тело письма: ссылка на скачивание письма в html
(Вместо {XXХ-XXX–XXX} в теле письма подставлять сгенерированный промокод.)
2.3.6. Если поле при нажатии кнопки было пустым – форма выдает сообщение об ошибке:
Пожалуйста, введите Ваш e-mail
2.3.7. Если в поле при нажатии кнопки не было «@» или «.» – форма выдает сообщение:
Пожалуйста, введите корректный e-mail
2.3.8. Если в поле введен адрес, который есть в базе данных, форма выдает сообщение:
Этот адрес уже подписан на нашу рассылку:-)
[В качестве иллюстрации – макеты из задачи А: 2.5.3]
2.3.9. События могут происходить многократно
2.3.10. Если подписчик НЕ воспользовался промокодом, то за 3 дня до окончания срока действия бонуса на его e-mail через админку сайта высылается напоминание
• Время отправки: 8.00 утра по Мск
• E-mail отправителя: newsletter @ shop-example. ru
• Имя отправителя: Shop-example
• Тема письма (Subject line): Ваша скидка истекает через 3 дня…
• Тело письма: ссылка на скачивание письма в html
(Вместо {XXХ-XXX–XXX} в теле письма подставлять сгенерированный промокод.)
2.4. Взаимодействие с рассылочным сервисом
Порядок взаимодействия с рассылочным сервисом описан в отдельной задаче:
ссылка на ТЗ на синхронизацию.
2.5. Условия демонстрации
2.5.1. Форма демонстрируется пользователю, просмотревшему больше 2 страниц (на 3‑й) или пробывшему на сайте дольше 45 секунд
2.5.2. Форма демонстрируется ОДНОКРАТНО – если пользователь заполнит либо закроет ее, то при последующих посещениях сайта/переходах на другие страницы форма ему больше не демонстрируется (если только не удалит «куки» или не зайдет с другого устройства)
2.5.3. Форма НЕ демонстрируется авторизованным пользователям
2.5.4. Форма НЕ демонстрируется на странице Корзины и формах регистрации/заказа
3. Сделать форму подписки на отдельной странице
[В качестве иллюстрации – макет из задачи А: 3.5.1]
3.1. Размещение: по адресу http://shop– example/subscribe
[В качестве иллюстрации – макет из задачи А: 3.5.4]
3.2. Исходники дизайна для верстки в psd: ссылка на скачивание макета
3.3. Взаимодействие с пользователем
3.3.1. Пользователь вводит значение в поле E-mail
3.3.2. Нажимает Подписаться
3.3.3. Видит Thank you page:
[В качестве иллюстрации – макет из задачи А: 3.5.2]
3.3.4. Если поле E-mail при нажатии кнопки было пустым – форма выдает сообщение об ошибке:
Пожалуйста, введите Ваш e-mail
3.3.5. Если в поле E-mail при нажатии кнопки не было «@» или «.» – форма выдает сообщение об ошибке:
Пожалуйста, введите корректный e-mail
[В качестве иллюстрации – макеты из задачи А: 3.5.3]
3.3.6. Если в поле E-mail был введен e-mail, который уже есть в базе данных, пользователю все равно демонстрируется Thank you page
3.3.7. Все события могут происходить многократно
3.4. Взаимодействие с рассылочным сервисом:
Порядок взаимодействия с рассылочным сервисом описан в отдельной задаче:
ссылка на ТЗ на синхронизацию.