Азбука e-commerce: интерфейс интернет-магазина

Время чтения: 3 минут
Количество прочтений: 1314
25 июня 2021

Даже не специалист знает, что интерфейс интернет-магазина должен быть простым, удобным и интуитивно понятным. Но звучит как-то абстрактно. Разбираем, что конкретно это значит, в новой статье азбуки e-commerce.

Азбука e-commerce: интерфейс интернет-магазина

Что такое интерфейс

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

Через интерфейс мы управляем не только ПК или смартфоном. Кнопки и экран вашей микроволновки — тоже ее интерфейс. Руль, селектор КПП и педали автомобиля — тоже. 

Что значит простой интерфейс

Простой — значит не перегруженный функционалом. Пользователь хочет, чтобы на сайте интернет-магазина были две-три простые кнопки, позволяющие максимально быстро решить его задачу: купить товар. Раньше многие сайты имели избыточное меню: куча непонятных кнопок, ненужных и бесполезных разделов. Посмотрите, например, на старую версию сайта РЖД. Ее часто приводят в пример разработчики веб-интерфейсов.

Старая версия сайта РЖД

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

Именно поэтому старый сайт РЖД еще долго будут приводить как пример уровня «так делать не надо». Такой интерфейс простым не назовешь. 

Сейчас у «Российских железных дорог» все куда проще.

Текущая версия сайта РЖД

Тоже не идеал, но уже приемлемо. Важные пункты («Купить билет», «Найти маршрут») сделаны красными и большими, блоки расположены по принципу золотого сечения. Да и самих разделов намного меньше, что упрощает интерфейс и делает его легким для восприятия.

Что означает интуитивно понятный интерфейс

Вы замечали, что интерфейсы всех современных интернет-магазинов примерно одинаковы? Так сделано потому, что они построены на основе пользовательского опыта. На языке специалистов это называется UX — user experience. Покупатели уже привыкли, что слева всегда будет каталог товаров, посередине — строка поиска, в нижнем левом углу — окно чата, кнопка «Купить» всегда красная и так далее. 

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

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

Итак, интуитивно понятный интерфейс — это интерфейс, привычный для пользователя на основе его предыдущего опыта. У него есть минус: для новых пользователей совсем без опыта подход не сработает. Поэтому сейчас разрабатываются системы zero UI для пользователей с нулевым опытом. Это, например, голосовые помощники. 

Интерфейсы интернет-магазинов и других сайтов сейчас разрабатывают не программисты и веб-дизайнеры, а UX-специалисты.

Интуитивно понятный интерфейс — интерфейс, привычный для пользователя на основе его предыдущего опыта

Что значит удобный интерфейс

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

Скорость покупки упирается в четыре фактора:

  • Скорость загрузки сайта. Каким бы дружелюбным ни был интерфейс, если документ долго грузится, пользователь покинет страницу.

  • Удобство поиска товара. Для этого есть свои инструменты: фильтры, облако тегов, поиск на сайте.

  • Удобство оплаты. Нужно предусмотреть возможность расплатиться любым способом: банковской картой, наличными, через платежные системы. Если система запоминает данные карты, это плюс.

  • Скорость оформления доставки. Должны быть все виды: самовывоз, курьерская доставка, доставка в ПВЗ или постаматы.

Путь от попадания на сайт до покупки тоже основан на UX. Последовательность шагов покупки является шаблонной для всех интернет-магазинов. Сначала поиск товара, потом оплата и только затем — оформление доставки. Это называется Customer Journey Map — путь пользователя. Он должен быть максимально коротким, удобным и опять же привычным. Интуитивно понятным, простите.

Отдельная боль и вопрос, на котором сломаны тысячи копий: давать возможность купить товар без регистрации или сделать ее обязательной? Безусловно, обязательная регистрация усложняет интерфейс. Поэтому, если без нее никак, сделайте процесс максимально простым и быстрым. Адреса электронной почты вполне достаточно.

Надеемся, статья была полезной. Ваш Кактус.

Информация придет на указанный Email в течение 10 минут!

А пока – присоединяйтесь к нашему Telegram-каналу об онлайн-продажах (маркетплейсы и интернет-магазины):

Присоединиться

Где находят поставщиков клиенты Кактуса?

  • Бесплатный каталог с топ-40 площадок
  • Данные по регионам (Россия, Европа, Азия, Африка)
  • Ссылки на сайты-каталоги поставщиков и описание их товарной специфики
  • Обновлен в сентябре 2023 года
Каталог кактуса
Заполняя форму, вы даете согласие на обработку персональных данных
Экскурсия для селлеров маркетплейсов на фулфилмент-склад Кактуса
Экскурсия для селлеров маркетплейсов на фулфилмент-склад Кактуса
Сильная WMS (система управления складом) — основа технологичного фулфилмент-оператора. Иначе склад не сможет вовремя, без пересорта, брака и потерь об...
Навигация
по статье
Ответы на популярные вопросы
Что такое FBS?

FBS (Fulfillment by Seller). Это схема работы, при которой продавец хранит товары на складе Кактуса, когда поступает заказ, мы его собираем, маркируем, упаковываем и передаем курьеру или в пункт приема маркетплейса. То есть, физически товары находятся на складе Кактуса, а на маркетплейсе только витрина — карточки товаров.

Что такое FBO?

FBO (Fulfillment By Operator). Это схема, при которой продажа товара осуществляется со склада Маркетплейса. Продавцу необходимо разместить товар на наших складах. Мы упакуем, промаркируем товары в соответствии с требованиями и доставим до складов маркетплейсов.

Как ускорить регистрацию на маркетплейсах?

У нас есть прямые контакты с маркетплейсами , но они не повлияют на ускорение регистрации.


Калькуляторы для маркетплейсов: какие бывают, зачем нужны, обзор популярных инструментов расчета прибыли, юнит-экономики, логистики
29 мая 2023
3965
Калькуляторы для маркетплейсов: какие бывают, зачем нужны, обзор популярных инструментов расчета прибыли, юнит-экономики, логистики
До выхода на маркетплейсы, еще на этапе выбора товара продавцу нужно рассчитывать ряд показателей: юнит-экономику, комиссии, прибыльность, затраты на...

#Азбука e-commerce #Бизнес и продажи #Все о маркетплейсах
ЭДО для «Вайлдберриз»: что такое, зачем нужен и как все устроено
22 апреля 2023
4691
ЭДО для «Вайлдберриз»: что такое, зачем нужен и как все устроено
«Без бумажки я букашка, а с бумажкой — человек!» Прочитали? А теперь забудьте: обмениваться документами с Wildberries и другими маркетплейсы можно чер...

#Wildberries #Азбука e-commerce #Все о маркетплейсах #Документация
Комиссии «Мегамаркет» для продавцов и стоимость услуг: за что, сколько, примеры
14 апреля 2023
11197
Комиссии «Мегамаркет» для продавцов и стоимость услуг: за что, сколько, примеры
В 2021 году маркетплейс «Мегамаркет» показал самый высокий среди глобальных  интернет-магазинов рост — 234 %, обогнав Ozon, Wildberries и «Яндекс Марк...

#Азбука e-commerce #Все о маркетплейсах #Мегамаркет