Сегодня обратился клиент с просьбой внести правки с существующий сайт.
Сайт по ремонту техники компании apple.
Задач было несколько на верстку и на программирование:
Первая версия выбора модели
1.Переделать текущий список моделей, сделать так чтобы список помещался в одну строку и можно было перелистывать вправо и влево.
Слайдер моделей
2. Сделать так чтобы после загрузки страницы появлялся блок с вопросом«У вас другое устройство?».
Показываем блок через 5 секунд
Блок появляется через 5 секунд нахождения пользователя на сайте. После появления логотипы брендов перелистываются автоматически.
3. При клике на бренд должна появляться форма с полями для подачи заявки. Пользователь должен ввести контактные данные, телефон, модель и описание проблемы.
Форма отправки
4. Сделать перерасчет цены в зависимости от длительности гарантии, сделать чтобы даже после дополнении неполадок учитывалось значение гарантии.
Сегодня я хотел показать, как я веду проекты. Я думаю многие люди, которые работали с фрилансерами, задавались вопросами:
На каком этапе мой проект?
Какие задачи были выполнены?
Я решил подойти к этому вопросу более открыто используя сервис Trello.
Trello — это одна из самых популярных систем управления проектами в режиме онлайн, которая пользуется особенным спросом среди небольших компаний и стартапов. Она позволяет эффективно организовывать работу по японской методологии канбан-досок.
Доска не полная, переместил некоторые списки чтобы изображение было удобно разглядывать.
Когда я начинаю выполнять какую-то работу, я создаю доску в трелло и приглашаю заказчика чтобы ему было видно, на каком этапе находится проект, какие задачи были выполнены. Более того! Он может участвовать в обсуждениях со мной или командой и добавлять замечания и предложения в отведенный для него список. Команда получит уведомление об изменениях на доске.
Списки от проекта к проекту разные, но в основном это: информация об оплате, информация о проекте, этапы, замечания/предложения от заказчика.
Я считаю такое ведение проекта очень прозрачно и позволяет заказчику не волноваться, видеть работу или наоборот её отсутствие в любое время и самому участвовать в развитии проекта.
Расскажу о задаче, которая возникла на рабочем проекте. Не буду вставлять участки кода, вам это будет вряд ли интересно.
Ближе к делу
В детальной карточке товара, в некоторых товарах присутствует возможность выбрать цвет и размер товара. Размеры появляются только тогда, когда выбран цвет, они подбираются из базы данных в зависимости от цвета.
Изначально, у меня была проверка на выбранный цвет и размер. Без этого нельзя было купить товар. При нажатии на купить без выбранного размера или цвета, показывалось сообщение«Выберите цвет или размер».
Товары разные, в некоторых были только цвета, в других были только размеры. Формулировка«Выберите цвет или размер» не очень-то подходила.
На тот момент я сделал так, потому что были задачи важнее, я запомнил недочет и собирался вернуться и все поправить.
Уведомление об отсутствии товара на складе.
От заказчика поступила задача, при увеличении количества товара, если такого количества нет, показывать пользователю уведомление об этом.
Поле для ввода количества
Мои коллеги вывели для меня на странице оставшееся количество товара, которое я смог использовать и показывать уведомление.
Показ уведомления при отсутствии товара на складе
Проверка на цвет и размер
Первая задача решена. Но осталось недоработка с подсказками для цвета и размера.
Дело в том, что помимо подсказки отдельно про цвет и размер, нужно было запретить пользователю выбирать количество, если не выбран цвет или размер. Иначе как я буду проверять остаток на складе?
Сделал блок с количество полупрозначным и неактивным
Итак, я отключил возможность увеличивать или уменьшать количество товара. Вместо этого я подсказываю пользователю, что ему нужно делать, чтобы выбрать количество и купить товар.
Цвет не выбран, нажали на количество или кнопку«Купить» — уведомление«Выберите цвет».
Цвет выбран, нажали на количество или кнопку«Купить» — уведомление«Выберите размер».
Иногда запросы в базу данные на размер бывают долгими, и цвета не появляются по 5 секунд. Что пользователь подумает об этом? — «Сайт не работает». Не порядок.
Я сделал еще одну проверку и если размеры еще не загрузились, показываю уведомление о том, что размеры загружаются, подождите немного.
Супер! Теперь пользователь будет знать что сайт работает, а сайт ищет в базе данных размеры по этому цвету.
Если же все поля были выбраны верно, то есть и цвет и размер — товар успешно попадает в корзину.
Мне поступила задача, «обновить сайт, сделать его более красивым».
Полные скрины страниц я выклыдывать не буду, все по частям.
Шапка. До
Ссылки работали только если нажимать на серую полосу под пунктом меню, это было фатальной ошибкой, так как я, разработчик сайтов, сразу не понял в чем дело.
Шапка была растянута на всю ширину экрана. На широких мониторах были большие промежутки между логотипом, навигацией и двумя ссылками
Шапка. После
Добавил кнопку«Главная». Не все знают что на главную можно попасть кликнув на логотип. Да и не на всех сайтах такое сделано.
Разместил телефон, для того чтобы пользователь попав на сайт, не искал номер в подвале или на странице контактов.
Добавил две кнопки для того чтобы пользователь смог быстро получить консультацию и задать вопрос.
Новости. До
Изображения, которые по моему мнению не совсем уместны на таком типе сайта. Учитывая то что изображения всего лишь два, я решил убрать их совсем, пока не будут подготовлены качественные изображения.
Маленькие отступы между элементами.
Дата стоит перед заголовком, её там быть не должно потому что это не является важной информацией для пользователя.
Новости. После
Увеличил размер шрифта у заголовков.
Увеличил отступы между элементами.
Убрал дату под заголовок, сделал цвет светлее, чтобы показать иерархию.
Добавил кнопку«Читать полностью».
Подвал. До
Левая часть подвалаПрава часть подвала
Старая версия подвала была неинформативна, совсем.
Подвал. После
Продублировал верхнее меню, убрал главную страницу и добавил две ссылки из старой версии подвала.
Добавил второй номер телефона и email.
Добавил информацию о времени работы компании.
Как вам изменения? Если есть какие-то мысли и замечания, оставляйте их в комментариях.
