Как в Fotos.ua делали форму для заказа на сайте
Интернет-магазины сталкиваются с тем, что некоторые пользователи начинают оформлять заказ, но бросают это дело на полдороге. Одной из причин может быть неудобная или сложная форма заказа на сайте. Как сделать ее максимально понятной и удобной для покупателя, объяснял Александр Сергеев, который занимался обновлением формы онлайн-заказа в Fotos.ua. На конференции «Интернет-магазины: стратегии роста» он рассказывал о том, с чем пришлось столкнуться, проектируя для магазина новую форму. Ниже приводим основные тезисы его выступления.
Кнопка «Купить»
Когда пользователь нажимает кнопку «Купить», а в корзине просто меняется количество товаров. Это часто происходит незаметно для самого покупателя. В Fotos.ua решили сделать всплывающее окно: оно позволяет либо сразу быстро оформить заказ только по номеру телефона, либо перейти к полной форме оформления заказа. Если человек полностью оформил заказ, он автоматически участвует в дисконтной программе магазина.
Александр обратил внимание на такую, казалось бы, мелочь, как расположение двух кнопок «Оформить заказ» и «Продолжить покупку». Первый раз, когда тестировали форму, кнопку «Оформить заказ» расположили справа, а «Продолжить покупки» — слева. И через неделю-полторы выяснили следующее: почему-то пользователи, покупающие более одного товара, предпочитали каждый товар оформлять по отдельности. Когда кнопки поменяли местами, пользователи поняли, что можно просто продолжать оформление заказа. А до этого кнопку «Продолжить покупки» просто не замечали.
Ремарка к быстрому оформлению заказа: важно нормально объяснить пользователю, в каком виде и какие данные ему вводить:
Оформление заказа — первый шаг
Когда пользователь магазина переходит к оформлению заказа, шапка сайта поменяется. Так пользователю на уровню ощущений дают понять, что он уже не выбирает товары на сайте, а участвует в другом процессе, где нужно будет оставлять свои данные и в конечном итоге — деньги. Также, покупателю показывают путь, который ему нужно будет пройти.
Формы заказа для нового пользователя и пользователя, который уже покупал в магазине ранее, отличаются. Так, регулярный пользователь может войти в свой профиль, указав e-mail или пароль, либо же может авторизоваться через аккаунт в социальной сети.
Так форма выглядит для нового пользователя (кликните, чтобы увеличить):
А так — для того, кто уже регистрировался в магазине (кликните, чтобы увеличить):
Одна из основных проблем проектирования, по словам Александра — это навигация и поиск. В форме нужно просто показать, что именно покупателю сделать для оформления заказа (шаги последовательно указаны вверху формы).
В старой форме заказа Fotos было одношаговое оформление: пользователю предлагалось сразу заполнить множество полей (личные данные, адрес, тип доставки, оплаты). Такая детализированная форма могла не понравиться покупателюили отпугнуть его. С другой стороны, если оставить только форму быстрого заказа, где нужно указать только имя и телефон, количество заказов, возможно, и вырастет, но также вырастут и расходы на сбор дополнительной информации, могут появиться дополнительные ошибки при ее валидации. Поэтому, по мнению Александра, оптимальным является пошаговое оформление.
В форме заказа магазина есть возможность оставить дополнительный e-mail и телефоны. Оказалось, что в базе Fotos есть люди, на которых зарегистрировано по 5 и даже по 12 адресов. Почему так? Часто бывает, что для всей семьи покупками в интернет-магазине занимается кто-то один. Так что лучше дать пользователю возможность оставлять несколько телефонов/адресов. Эту возможность лучше подчеркнуть с помощью иконки (обычную ссылку покупатель может пропустить):
На скриншоте видно, что возле каждого поля размещается объяснение: зачем магазину такие данные.
Оформление заказа — второй шаг
На этом этапе сначала указывается город. В идеале пользователь должен сразу получить информацию о том, в какой день, в какое время он получит заказ, а также — сколько это будет стоить. К примеру: «Можем доставить ваш заказ такого-то числа, с 10:00 утра». Лояльность покупателя сразу повысится. Fotos не использует эту «фишку», поскольку поток заказов у магазина — значительный. Но небольшой интернет-магазин вполне может себе такое позволить. Но, если магазин не может гарантировать время доставки, лучше не рисковать и не обещать покупателю невыполнимых вещей, считает Александр.
Как помочь пользователю выбрать город? Можно использовать подсказки, всплывающие окна, комбо-боксы, в Fotos выбрали последнее: выделили области, вынесли основные города в верхний список. По данным WebVisor, пользователи находят свой город в такой форме без проблем.
Проблема, которую в магазине пока не решили: что делать, если человек не может найти свой город (к примеру, магазин туда просто не доставляет).
Интернет-магазины часто пишут адрес самовывоза. Но важно, особенно если пользователь делает покупку на сайте впервые, показать этот адрес на карте, нарисовать схему проезда.
Оформление и подтверждение заказа — третий шаг
В Fotos дают два варианта оплаты: наличный и безналичный расчет. Как и во всей форме заказа, здесь лучше человеческим языком пояснить пользователю, что произойдет, если он выберет какой-то из этих вариантов.
В форме подтверждения заказа показывается информация, которую сам пользователь ввел ранее. В Fotos решили, что подтверждать заказ будут только по телефону (ведь пользователи не всегда проверяют почту). «Покупатель не будет волноваться: он будет знать, что ему позвонят и проверят все данные», — говорит Сергеев.
Два важных момента, которые нужно учитывать. Если, например, покупатель отобрал покупку в корзину, затем отвлекся, вернулся через какое-то время, а цена в магазине — уже другая, ему обязательно нужно на это указать. В Fotos в форме заказа уведомляют пользователя, что цена поменялась. Важно, чтобы это работало без перезагрузки страницы.
Также, форма заказа будет смотреться лучше, если внизу будет перечень товаров с маленькими их изображениями. Тогда, по мнению Александра, покупателю виднее, что именно и в каком количестве он выбрал.
Комментарии | 40
Очень аккуратно, удобно. Мне понравилось — буду пытаться что-то подобное по одному из проектов сделать.
з.ы.Копипастить не буду, так что не минусуйте 🙂
Осталось поработать над ценами)
Осталось курсу устаканиться )
Та и до повышения курса там цены были не самые низкие
Это не мешает им оставаться одним из самых старых интернет магазинов в Украине. Может они знают что делают?
Стареют разве что)
Мне нравится внешне фотос. Юзабилити у них хорошо продумано. Но всегда цена оказывается не совсем выгодной 🙂 И речь не о 10 грн разницы с розеткой в большую сторону, к сожалению 🙂
Имхо простого пользователя: юзабилити фотоса — что-то среднее между классными идеями и какими-то стремными элементами, которые просто убивают общее впечатления от использования сайта. Как-то устаешь от интерфейса, имхо он сильно визуально перегружен…
Насчёт перегруженности согласен.
Дмитрий, можете сказать, в какой момент возникло ощущение, что сайт перегружен?
Это произошло в процессе поиска товара или оформления заказа?
Может быть в момент изучения информации на карточке товара?
Буду благодарен за обратную связь.
Поддержу.
Красиво-да, но как то бестолково. Налеплено всего +мелкий шрифт.
Второе место после Комфи по дискомфорту.
Юрий, можете сообщить что Вам кажется неудобным?
Про шрифт — согласен. Местами действительно мелковат.
Будем принимать меры.
Спасибо за обратную связь.
Я попадал на ваш сайт не раз и всё время ощущал дискомфорт.
Куча мелкого текста, всё плотно друг к другу натыкано.
Вот сравните — где полегче для глаз:
http://fotos.ua/lg/p715-optimus-l7-dual-white.html
http://e96.ru/phones/mobile_phones/lg_optimus_l7_ii_dual_p715_black
Я смотрю на 15″ ноуте вашу страницу — у вас справа гуляет место, при том что слева всё сжато до не могу.
http://joxi.ru/W-U7U_3JTJC7RqoacV4
Сравните каталоги:
http://www.sotmarket.ru/category/mobiles.html
http://fotos.ua/shop/mobilnye-telefony/
Сравните главное меню ваше и сотмаркета:
у сотмаркета оно по высоте меньше, но шрифт больше
у вас наоборот — высота больше, шрифт мелкий, зато треугольнички втулили бесполезные.
Ставить фильтр справа, когда почти у всех он слева. Еще +1 к разрыву шаблона в голове.
Ну и так далее.
И все эти мелочи в сумме дают общий негативный фон.
Я бы увеличил шрифты с одновременным увеличением зазоров между элементами и уменьшил бы количество рюшек в виде плашек, заливок пиктограмм и так далее.
А так же возьмите дизайнера со стороны, у которого взгляд не замылен.
+1 на счет горизонтального меню. Интуитивно все время целишься в надпись, но кликабельная вся облать, а это непонятно визуально
В общем хотели хлопцы попиариться со своими А/Б тестами корзины, а вышло совсем наоборот)
Думаю, что самый лучший пиар — это решение актуальных вопросов для пользователей 😉
Отдельное человеческое спасибо за потраченное время Юрий.
Юрий, благодарю за развернутый ответ.
Есть пара уточняющих вопросов. Хобу разобраться с Вашим сценарием поведения.
1. Что именно искали на сайте?
2. Какие элементы, кажутся мелкими? Само описание в каталоге или какие-то надписи на формах? Не помешало бы больше конкретики, потому что пока все достаточно абстрактно.
Визар показывает, что большинство людей все быстро находят, но возможно есть какие-то более узкие группы или сценарии на которые мы не обратили внимание.
Буду очень признателен за детализацию (что искали и в какой момент возник дискомфорт)?
Ваше главное меню — это раздвоение сознания.
Выглядит оно как полоса с активными текстовыми ссылками, а по факту — это набор блоков (кнопок) в которые можно тыкать.
Изначально открыв сайт — я вижу кучу мелких ссылок, в которые нужно целиться.
Это с порога неприятно, я же не телепат чтобы догадаться что это «блоки» а не ссылки.
Ок, я поцелился и кликнул на ссылку.
http://joxi.ru/cgU8U_3JTJDCRmUlLXg
Это что за конструкция ? Я кликал на ссылку… А это что ? Недоблок…
Открылось боковое меню
http://joxi.ru/EQY8UxjKTJC1ULIMDNM
Боковое меню-красивое, да.
Наверху надо было кликать, здесь «при наведении». Еще одно раздвоение сознания.
Теперь везде по сайту мне надо будем напрягать голову и пытаться угадать — здесь надо будет кликнуть или «при наведении».
Пока я изучаю подкатегории и боковое подменю — дергающийся на заднем фоне рекламный слайдер раздражает, т.к. он проглядывает по краям экрана.
Отдельно про слайдер с рекламой на главной — это П…Ц!!!
Мне чтобы изучить главную, ввиду того что она насыщена текстом — нужно время.
А вместо этого у меня вспышки в глазах от смены баннеров каждые 3 секунд.
Честно я пока этот текст написал — уже хотел закрыть ваш сайт раз 10, в первую очередь из за баннера, которые мешает сосредоточится во всем многообразии (в плохом смысле этого слова) элементов интерфейса.
И таких отзывов на пол-экрана текста можно написать практически про любой квадратный сантиметр сайта.
P.S.
1. Общее ощущение от сайта в первые 30 сек — элементы ведут себя не так как выглядят
2. Постоянно мигающий баннер вызывает раздражение.
3. Фильтр «справа»- затем окончательно в этом убеждает.
PPS
Я немного проморгался после баннера, пишу дальше
Строка поиска в шапке — длиной 100 символов минимум!
Зато телефоны не влезли и вы их повесили по остаточному принципу
http://joxi.ru/oQo8UxjKTJCEOGMSk-c
Отдельно по телефонам — можно выбрать город, можно выбрать оператора
Я так и не понял.
Я например в Житомире, мне звонить на городской номер в Житомире или выбирать своего оператора ?
Судя по всему мобильные номера — только для Киева, потому что выбрав Киевстар и меняя города — номер не меняется.
Кому вообще сейчас интересные городские номера в эпоху мобилок ?
Как можно было на ровном месте наплодить столько неоднозначностей, я не знаю.
И зачем мне звонить по Житомирскому номеру, если я так понимаю там пункт выдачи ?
PPPS
Это жесть и очередной подтверждение что элементы ведут себя не так как выглядят.
Ну почему лого в шапке слева не ведет на главную ???
Я ткнул, а это мертвая картинка.
Это не сайт,а квест какой то…
Юрий, спасибо замечания. Если честно, большая часть написана в азарте. Как например:
«Это жесть и очередной подтверждение что элементы ведут себя не так как выглядят.
Ну почему лого в шапке слева не ведет на главную ???
Я ткнул, а это мертвая картинка.
Это не сайт,а квест какой то…»
Зачем с главной вести на главную? Ведь кликали на главной? Но среди всего этого, есть действительно несколько очень важных замечаний. Что интересно, эти же замечания, один в один проблемы есть и на сайтах приведенных Вами как «эталон» чайтах.
Но пишу я не для того, что бы сказать, что все замечания «хлам», а напротив отблагодарить за важные замечания которые часто не замечают, при «замылившемся взгляде».
Спасибо на хлеб не намажешь. Я хотел бы отблагодарить чем то более материальным. Как с вами связаться? Ну и хотим еще комментариев.
насчет «Зачем с главной вести на главную?» -я кликал при развернутом меню, чтобы его свернуть. в целом это не самый главный момент.
Насчет «еще комментариев» — ваш сайт это непочатый край, там можно писать и писать.
Я недавно закончил один подобный проект с подобными прблема — это куча времени реально.
Подарков не надо, наймите лучше профи и перелицуйте сайт или хотя бы скопируйте с лидеров рынка, лучше россиян.
Но ведь меню свернулось? Значит задача была выполнена.
Как знаете, раз не нужны благодарности.
Но мы уж лучше как то своей дорогой. Почему то все чаще получается наоборот. Россияне и не только, в том числе и лидеры, копируют у нас массово. По проторенной дорожке ведь проще?
Я писал что подарков не надо, благодарности достаточно устной.
А какой дорогой — конечно вам решать.
Зачем на главной в шапке выбор валюты нал/безнал ?
Я например могу кликнуть режим «безнал» и забыть и буду как дурак возмущаться дальше по сайту — какие высокие цены.
Безнальную цены обычно пишут рядом с обычной ценой на странице товара.
Да и вообще это разве столь важный пункт, чтобы его показывать в шапке везде по сайту ?
Ну и так далее, далее далее…
http://joxi.ru/pg48U_3JTJC_RgHflpg
Я в Житомире. Где я получу свой товар ?
Как я его оплачу ? Есть наложенный платеж ? Какой перевозчик ?
Фразу «без предоплаты» -я лично пропустил сразу, а вот фразу: «оплата при получении» выделенную жирным я бы заметил я думаю.
Стоимость доставки ???????????????????????????????
Это в раздел юмор
http://joxi.ru/6w88UxjKTJChOFvN0UE
Короче какие то 1С-ники сайт писали))))
Юрий, достаточно много моментов, которые могут вызывать вопросы у человека — не являющимся РЕАЛЬНЫМ клиентом магазина.
Именно поэтому я и спрашивал — Вы выбирали какой-то товар (то есть, были вовлечены в настоящий процесс работы) или же Вы зашли на сайт и все что Вам показалось непонятным в свободном виде накидали тут.)
Это ведь абсолютно два разных (!) сценария поведения.
Человек который хоть каким-то образом связан с индустрией веб-разработки смотрит на все достаточно критично. Почитал Ваши комменты в ain.ua за последние несколько месяцев, изучил так сказать Вас как клиента 😉
Другой вопрос, когда у человека возникает реальная потребность и ему нужно искать товар. Когда он заходит на сайт (fotos.ua), то он в первую очередь смотрит на меню. Ищет навигацию. Разбирается с интерфейсом, чтобы найти ТО, что ему нужно.
Читает названия менюшки. Как-то продвигается по продуманному сценарию (если такой сценарий продумывался).
Если в процессе поиска у него не возникает никаких сложностей, ему все понятно, то он будет продвигаться до момента покупки (хотя может и не купить — это уже вопрос маркетинга).
—
Для того, чтобы разобраться в том, что действительно происходит на сайте, нужно смотреть что люди делают, что покупают и что пишут в обратной связи.
Только слушать нужно настоящих (!) покупателей.
—
Если быть вообще абсолютно открытым, то мне кажется (мое личное мнение), что Вы не являетесь покупателем этого магазина, а просто часто читаете AIN.UA и правильно делаете, это ведь замечательное издание 😉
Рекомендую попробовать, ради интереса конечно, что-то заказать на Фотосе и притвориться обычным рядовым клиентом. Попробовать найти что-то, когда это действительно понадобиться, а потом на себе лично ощутить как работает магазин в реальных условиях.
Вдруг станете постоянным покупателем))
Я не являюсь вашим покупателем,
Если человек хочет что-то купить именно у вас — конечно он купит, преодолев все трудности.
При прочих равных (цена, доставка) — за счет вашего юзабилити, лично у меня, фотос был бы не самым первым.
В общем дискуссия зашла куда-то не туда.
Я вам написал своё частное мнение, насколько это вам важно/не важно — дело ваше.
Вадим, можете сообщить что именно Вам кажется перегруженным?
Товарная выдача в каталоге; товарная карточка ниже первого экрана. Все это субъективно конечно, но много элементов очень мелких, нет акцентов на основные вещи, мелкий шрифт, все сливается в одну кучу
Влад, спасибо за ответ.
А если не секрет, что конкретно искали? Какой товар?
По поводу сообщения по обратному звонку, то я ошибся на докладе. Это на Фотосе сделано уже давно.
Если пользователь оформляет заказ вечером, то мы с ним свяжемся завтра утром (например в 10 утра). Если он оформляет заказ в 2 ночи, то 10 утра уже не подходит. Человек ведь очень поздно ложится спать. Поэтому в этом случае лучше связаться с ним позже (в 12-13).
Не совсем так. Я, например, ложусь спать в 2-3. Встаю в 7. В 8 уже на работе.
Мне кажется это достаточно индивидуально, но интересно. Думаю можно опросить людей.
Спасибо за идею опроса 😉
Фотос уважаю. Самый адекватный магазин. Всегда в любых ситуациях шли навстречу.
Поэтому и покупок за долгие годы сделано уже и не на десятки тысяч. .
Цены давно уже у них не самые низкие, даже с максимальной скидкой. Доставка была не всегда самая оперативная, а сейчас для мелочей удобные точки выдачи…. Но зато, я ВСЕГДА уверен, что клиент для них ВАЖЕН и если за такое отношение, условно, нужно оплатить десять-пятьдесят гривен — то это оправданно.
Спасибо Фотосу, его руководству и персоналу.
Молодцы. Радует, что у нас на рынке есть магазины, которые серьезно подходят к сервису. Тот же е-магазин номер 1, как были торгашами лоточниками так ими и остались, только в более красочной обертке.
Я бы не сказал что форма заказа на Фотосе адекватная и правильная. Пример — когда вписывал e-mail, допустил ошибку, и одну букву написал неправильно. А так как логином в кабинете является ящик, то соответственно, в аккаунт попасть не смог. Чтобы сменить логин, понадобилось не менее 5-и звонков в поддержку. Причем 2 раза мне сказали, что через оператора это будет долго и посоветовали поискать администраторов на форуме. В общем жесть … Хотя от магазина не отказался, но сервис не порадовал …..
Спасибо за сообщение. Жаль, что не написали сразу на форуме о реакции консультанта. Очень хотелось бы подробнее разобраться в ситуации, почему сотрудник не проявил должного внимания к просьбе.
Спасибо за реакцию, но в свете данного материала не суть важно как ответил оператор. Задумайтесь в отношении того, как решить возникшую проблему с формой (если еще не решили). Самый простой выход — прежде подтверждать e-mail или сделать логином не e-mail. Это лишний шаг, но он помог бы избежать недельной задержки в моем случае (возможно не я один столкнулся с такой проблемой).
Да, мы планируем сделать логином на выбор мобильный телефон или mail. Но это не исключит вероятность опечатки пользователем. Подтверждение же только усложнит форму. Сейчас для нас действительно важно разобраться, почему консультант был недостаточно внимателен.
Консультант — не знаю. После моего комментария перезвонил консультант, но тоже был не вполне компетентен — спросил какие у меня возникли проблемы с оплатой )). Т.е. каким-то образом проверили по базе и идентифицировали меня, но перед тем как позвонить, консультант не вник в суть проблемы. В отношении формы — сделайте возможность запроса на изменение логина. Как это есть с паролем. Забыл пароль — могу восстановить. А если проблема с логином — то сделать ничего не могу. Было бы хорошо в таком случае иметь возможность изменить логин через какую-либо форму.
«А до этого кнопку «Продолжить покупки» просто не замечали.»
Юмористы. Сами сделали эту кнопку едва заметной текстовой ссылкой, а потом пользователи видите ли не замечают 🙂 🙂 🙂
Никогда не покупайте ничего в fotos.ua
Замечательный интернет магазин.
Заказ приняли, записали точное время доставки, на которое настоятельно просили сделать доставку. В итоге время достаки поставили по умолчанию не учитывая просьбы.
Потом достаку перенесли. Просьба доставить с определенное время снова была проигнорирована.
На вопрос почему товар небыл доставлен вовремя — сказали что еще в дороге, хотя служба доставки находилась в 10 мин езды от места доставки.
Мы пошли на уступку и договорились доставить снова в конкретное время, но на завтра. Снова просьбы о времени доставки были проигнорированы.
В итоге пришлось отказаться от услуг даного магазина. и Вам не советую.