Как в разы сократить время на анализ конкурентов и поиск лучших практик?
Покупаем сумку в Fiore Bags
Или как испортить впечатление о бренде с помощью интернет-магазина
Я не раз говорил о том, что опыт клиента должен быть консистентным – через какой бы канал он ни взаимодействовал с компанией. Сегодня мы разберем интересный [анти]пример.
Fiore Bags – это модный бренд с бутиками на Патриарших и в центре Петербурга, сделавший имя на изготовлении хороших качественных сумок. Коллеги оттачивают путь клиента в офлайне до мелочей: консультанты в белых перчатках предложат вам кофе или игристое, усадят в кресло, принесут понравившиеся лоты и вместо навязчивой беседы оставят вас в покое, чтобы вы могли выбрать сумку в комфортной обстановке.
Однако в онлайне бренду есть к чему стремиться, а в этой статье мы прожарим мобильную версию интернет-магазина Fiore Bags и разберем 30 моих наблюдений и вредных советов о том, как не стоит проектировать e-com интерфейсы.
Как всегда, делитесь этим постом с коллегами, которым материал может быть полезен, и подписывайтесь на выход нового контента в Telegram.
Fiore Bags – это модный бренд с бутиками на Патриарших и в центре Петербурга, сделавший имя на изготовлении хороших качественных сумок. Коллеги оттачивают путь клиента в офлайне до мелочей: консультанты в белых перчатках предложат вам кофе или игристое, усадят в кресло, принесут понравившиеся лоты и вместо навязчивой беседы оставят вас в покое, чтобы вы могли выбрать сумку в комфортной обстановке.
Однако в онлайне бренду есть к чему стремиться, а в этой статье мы прожарим мобильную версию интернет-магазина Fiore Bags и разберем 30 моих наблюдений и вредных советов о том, как не стоит проектировать e-com интерфейсы.
Как всегда, делитесь этим постом с коллегами, которым материал может быть полезен, и подписывайтесь на выход нового контента в Telegram.
Посмотрите, чего у нас нет
При входе на главную сайта первый же товар, с которым сталкивается клиент, оказывается не в наличии. Видимо, путешествие по сайту обещает быть интересным.
Placeholder поиска
В placeholder'е поисковой строки главное – информативность: чем больше информации, тем лучше. Ну а если на мобильном он не влезает в строку – ну кто у нас нынче смартфонами пользуется?
Активация поиска
Вообще нужно выступать за то, чтобы клиенты не просто покупали у вас, а тренировали мелкую моторику: чем больше их пальцы двигаются, тем лучше. В движении – жизнь!
Поэтому когда клиент нажимает на кнопку поиска, не нужно сразу открывать клавиатуру: лучше еще и заставить его нажать на строку повторно, чтобы ввести запрос – пальцы скажут «спасибо!»
Поэтому когда клиент нажимает на кнопку поиска, не нужно сразу открывать клавиатуру: лучше еще и заставить его нажать на строку повторно, чтобы ввести запрос – пальцы скажут «спасибо!»
Изучаем новые цвета
Поразительно, но, зайдя на сайт, я впервые осознал, что всю жизнь воспринимал в качестве желтого совсем другой цвет. Теперь всё встало на свои места.
К – консистентность
Говоря про фильтры, важно, чтобы они выглядели консистентно, единообразно: если в одном фильтре есть элемент «показать всё», он должен быть и в другом фильтре – иначе непорядок: в одном есть, в другом нет.
А то, что отображаемые значения в некоторых фильтрах – по сути и есть весь список, – это уже вопрос вторичный. Главное – визуальное единообразие.
А то, что отображаемые значения в некоторых фильтрах – по сути и есть весь список, – это уже вопрос вторичный. Главное – визуальное единообразие.
Тренируем точность
Еще одно благо, которое нужно нести клиентам – это тренировка точности: лентяи, которые выбирают значения в фильтрах и промахиваются (например, нажимая чуть-чуть правее), пусть жмут, пока не попадут ровно по тексту значения.
А практики, когда кликабельными делают не только текст, но и всю ячейку по ширине – это от лукавого. Мы за то, чтобы клиенты были меткими.
А практики, когда кликабельными делают не только текст, но и всю ячейку по ширине – это от лукавого. Мы за то, чтобы клиенты были меткими.
Ползунки не ползают
Примечательно, что в фильтре по цене специальные ползунки хоть и есть в наличии, но не реагируют на перетаскивание (drag).
Пятьдесят тысяч рублей
Ну а после неудачной попытки перетащить ползунки нам предлагают ввести цену с помощью символьной клавиатуры, хотя корректная раскладка клавиатуры – вопрос одной строки кода.
Зум фото vs. карточки
Когда клиент решил посмотреть на товар в деталях, раздвигая фото пальцами (pinch), хорошая практика – это увеличивать не само фото, а вообще всю страницу: вдруг он захочет ознакомиться, например, еще и с увеличенным текстом цены и названия. Удобство!
Грамотное центрирование
Если вы нажмете на фото и перейдете в галерею, вас сразу встретит замечательный зум пустоты внутри ручки сумки: удачного изучения деталей!
Поясню: если фото делаются так, что товар смещен ближе к нижней части, если уж делаете зум, сместите и его из самого центра ближе к низу. Да и уровень зума по умолчанию можно сделать поменьше.
Поясню: если фото делаются так, что товар смещен ближе к нижней части, если уж делаете зум, сместите и его из самого центра ближе к низу. Да и уровень зума по умолчанию можно сделать поменьше.
Вопросы остались?
Сразу после фото товара в карточках нас встречает уместный блок, в котором компания искренне интересуется, не остались ли у нас вопросы.
Блок стратегически расположен до остального контента: описания, характеристик, гарантии, блока с доставкой и возвратом, чтобы повысить нагрузку на службу поддержки. Пусть не расслабляются.
Блок стратегически расположен до остального контента: описания, характеристик, гарантии, блока с доставкой и возвратом, чтобы повысить нагрузку на службу поддержки. Пусть не расслабляются.
Кнопка корзины
Кнопка добавления в корзину выполнена серым цветом, создавая подсознательное ощущение, будто она неактивна. Хороший ход, ведь то, что недоступно, так притягивает к себе.
Возвращаемся к истокам
Как мы уже говорили ранее, тренируя клиентов, мы делаем благое дело. Ведь лень правит миром, а лень – не есть хорошо.
Поэтому помимо тренировки пальцев на лишних действиях, хорошо еще и тренировать их память, добавляя вход по логину и паролю.
Долой быстрый вход через разные сервисы, долой мобильных операторов с конскими ценами на авторизационные sms.
Старые добрые логин с паролем – классика удобства, к которой клиенты в 2026г привыкли. Это лишь подстегнет их лояльность.
Поэтому помимо тренировки пальцев на лишних действиях, хорошо еще и тренировать их память, добавляя вход по логину и паролю.
Долой быстрый вход через разные сервисы, долой мобильных операторов с конскими ценами на авторизационные sms.
Старые добрые логин с паролем – классика удобства, к которой клиенты в 2026г привыкли. Это лишь подстегнет их лояльность.
Расположение кнопки входа
Кнопка входа, разумеется, заботливо размещена в крайней левой части, чтобы до нее было приятнее тянуться (впрочем, если вы левша, для вас это решение идеальное).
Меня зовут Gmail
Во время регистрации всё проходит отлично... до момента, когда нужно ввести имя. Ведь кто-то из разработчиков решил, что вставка email'а в поле с именем будет уместной.
Разделение обязанностей
Если вы решили восстановить пароль, можно заметить, что за название поля и подпись к нему, судя по написанию адреса электронной почты, видимо отвечали 2 разных человека.
Станислав Станислав Хрусталёв
Видимо нужно будет менять фамилию на составную: ведь сервис предлагает мне вставить full-name вместо last-name в поле с фамилией. Впрочем это же касается и имени, и отчества🫠
Третье декабря
Когда вы решаете ввести дату своего дня рождения, вам любезно предлагают буквенную клавиатуру, чтобы отдельно пришлось её переключать. Про отсутствие пояснения о том, зачем компании эти данные и как это улучшит ваш опыт, я и не говорю.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Тебе туда не надо
Буквально во время написания статьи коллеги немного обновили сайт, из-за чего часть пунктов, которые я не успел снять, пришлось срезать. Но с обновлениями приходят и новые косяки.
Хотел я написать про empty state корзины, а его теперь нет. Зато есть просто кнопка корзины, которая выглядит активной, но не нажимается, если в ней нет товаров – как бы вы ни старались.
Хотел я написать про empty state корзины, а его теперь нет. Зато есть просто кнопка корзины, которая выглядит активной, но не нажимается, если в ней нет товаров – как бы вы ни старались.
Приятный ноль
Даже если скидка – 0%, важно её показывать клиенту на чекауте. Ведь наличие скидки – какой бы она ни была – гораздо более приятно, чем её отсутствие.
Рублей много не бывает
При описании условий доставки важно учитывать, что клиенты воспринимают валюту по-разному: кто-то привык к «рублям», кто-то – к «р», кому-то более понятен символ ₽.
Поэтому хорошей практикой будет в текстовом блоке, касающемся стоимости, совместить все 3 написания, чтобы учесть особенности всех групп клиентов.
Поэтому хорошей практикой будет в текстовом блоке, касающемся стоимости, совместить все 3 написания, чтобы учесть особенности всех групп клиентов.
Премиальные иконки
В премиальном клиентском опыте должно быть премиально всё: каждая деталь может сместить ощущение от взаимодействия с компанией в позитивную или негативную сторону.
И сайт здесь – не исключение. Желательно, чтобы дизайнер не просто взял иконки со стоков, а отрисовал их с нуля под вас. Иконки должны резонировать с идеей вашего бренда и транслировать тонкие эмоции.
И сайт здесь – не исключение. Желательно, чтобы дизайнер не просто взял иконки со стоков, а отрисовал их с нуля под вас. Иконки должны резонировать с идеей вашего бренда и транслировать тонкие эмоции.
Названия полей
Чтобы действительно выделиться, можно играться и с текстами: например, ФИО написать через точку: Ф.И.О, а вместо email указать E-Mail. Пожалуй, сделаю заказ на получателя Х.С.В.
Повторение – мать учения
Если вы идете на поводу у своей лени и вставляете свой номер телефона из подсказки, вам на всякий случай нужно отдельно лишний раз подсветить, что поле это обязательно для заполнения. Чтобы в следующий раз не накосячили, когда будете сумку покупать!
Поясню: ошибка появляется ровно в тот момент, когда срабатывает автозаполнение.
Поясню: ошибка появляется ровно в тот момент, когда срабатывает автозаполнение.
Дубль – не лишний
Если клиент забыл ввести какие-то данные, ему важно не просто подсветить «обязательно для заполнения», но и в явной форме сказать и что это «поле», а также пояснить, какое это поле – вдруг не поймет.
Ну а то, что название этого поля находится в нескольких пикселях от текста с ошибкой – пусть так и будет. Чем информативнее, тем лучше.
Ну а то, что название этого поля находится в нескольких пикселях от текста с ошибкой – пусть так и будет. Чем информативнее, тем лучше.
Доставим в пустоту
При выборе курьерской доставки получатель и город – критичны, а вот адрес доставки – нет. Ну куда-нибудь доставим, как получится. Надеемся, что не ошибемся.
Тут немного поясню: если адрес – необязательное поле, вероятно, так компания хотела реализовать flow покупки в подарок, когда хочешь порадовать даму сердца, но не знаешь её адреса.
В таких случаях лучше делать специальный переключатель уточнения адреса у получателя, чтобы покупатель не мучился в думах, что случится, если он не укажет адрес.
Тут немного поясню: если адрес – необязательное поле, вероятно, так компания хотела реализовать flow покупки в подарок, когда хочешь порадовать даму сердца, но не знаешь её адреса.
В таких случаях лучше делать специальный переключатель уточнения адреса у получателя, чтобы покупатель не мучился в думах, что случится, если он не укажет адрес.
Помощь близоруким
Всегда важно входить в положение клиента. И если он близорукий, при вводе данных в форму на этапе чекаута приближать это поле, увеличивая зум страницы, чтобы он не ошибся.
Ну а те, у кого со зрением всё нормально, пусть терпят. Мы за инклюзивность! P.S. после ввода данных страница так и остается в состоянии зума и начинает прокручиваться по горизонтали.
Ну а те, у кого со зрением всё нормально, пусть терпят. Мы за инклюзивность! P.S. после ввода данных страница так и остается в состоянии зума и начинает прокручиваться по горизонтали.
Это всё мелочи!
«Тут недавно один зануда написал, что на чекауте в тексте согласия говорится про кнопку «Зарегистрироваться», а на кнопке написано «Оформить заказ». Видимо так и не оформил»
Мы будем расширяться
Если вы хотите получить более позитивный опыт, чем в интернет-магазине, можно посетить одну из офлайн-точек.
Примечательно, что под списком магазинов зияет огромное пустое пространство, как бы намекающее на то, что сеть будет расширяться.
Примечательно, что под списком магазинов зияет огромное пустое пространство, как бы намекающее на то, что сеть будет расширяться.
Галя, у нас замена!
Доскроллив страницу до футера, мы можем связаться с компанией по контактному телефону. Вот только при тапе по нему «почему-то» телефон, на который будет совершен звонок – уже совершенно другой.
To be continued...
Итак, это были Fiore Bags. Список точек роста интернет-магазина 30 пунктами не ограничивается, но «Войну и мир» я сегодня писать не планировал😊 Вместо еще одной порции из 30 косяков, пожалуй, просто замечу, что часто хороший UX требует не огромных бюджетов (всё, что выше, можно поправить за пару дней), а вовлеченности в продукт, который делаешь, и внимания к деталям.
Коллегам из Fiore Bags желаю успехов на их пути. А если у вас есть идеи по дополнениям, буду ждать вас в комментах. И, как всегда, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Коллегам из Fiore Bags желаю успехов на их пути. А если у вас есть идеи по дополнениям, буду ждать вас в комментах. И, как всегда, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce