Булат Хазимуратов

Дизайн интернет-магазина: как сделать удобнее?

Летом 2020 года я решил сделать редизайн интернет-магазина GeekTrip. Никто меня об этом не просил, это был мое личное решение. За время разработки я заметил некоторые важные вещи, которые влияют на опыт использования сайта. В этой статье я решил собрать небольшие советы, как сделать онлайн-магазин для малого бизнеса удобнее и круче.

Совет 1: Больше больших качественных фотографий

Конечно, дизайнер должен позаботиться о том, чтобы на сайте были хорошие качественные фотографии, но это зависит не только от него, а еще и от владельца сайта, но то, что обязательно должно быть реализовано в дизайне: большие фотографии товаров. И чем больше фотография — тем лучше. Покупатель должен быть на сто процентов уверен, что магазин с ним честен, к тому же не придется лишний раз приближать, увеличивать, и так далее. И неважно, что продает магазин: комиксы или вертолеты, пусть пользователю будет удобно рассматривать товар. Так, например, уже долго делает ZARA, и я тоже не оставил свой дизайн без этого.

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

страница товаров

Совет 2: В начале расскажи немного о магазине

Мы знаем, что первое мнение о сайте человек формирует в первые 50 мс (подробнее тут), поэтому стоит позаботиться не только о внешнем виде главной страницы, но и о кратком описании, куда попал человек или что он может тут купить. Иначе вы рискуете, что пользователь раздражится от того, что не понимает, где он, что от него хотят, и может просто закрыть вкладку.

Не нужно выкладывать полотна текста, пару слов о магазине, что он продает или какая у него философия, уже сгодятся.

главная страница

Совет 3: Никаких всплывающих окон

Вас тоже бесит, что, когда вы приходите в магазин, к вам сразу подходит консультант, встает на пути и требует, чтобы вы спросили его о помощи? Нет, спасибо, мужик, можно я осмотрюсь, найду, что мне надо и потом, если мне что-то надо, я сам подойду и спрошу? Так и со всплывающими окнами о помощи, звонке консультанту, разных распродажах, скидках, регистраций до какого-то числа. Все это грязный маркетинг, который только отталкивает покупателя, эти окна постоянно приходится закрывать, искать крестики, кнопки «нет, спасибо».

Это уже слабо относится к дизайну, но сильно влияет на удобство пользования.

Совет 4: Кнопка «загрузить еще» лучше

Если в вашем магазине не десятки тысяч товаров, то нет смысла добавлять пагинацию, потому что она просто не имеет смысла. Когда пользователь просматривает товары в конкретной категории, то он просто устанет тыкать вперед, назад. Особенно бессмысленно это будет смотреться, когда на странице мало товаров, их не хватает на несколько страниц, пагинация будет просто висеть с одной страничкой. На смартфоне так она вообще превратиться в нервотрепку.

Так же ошибочно полагать, что пользователь будет запоминать, что его любимый товар находится на странице 5, потому что в жизни некоторые товары заканчиваются, сходят с продажи, появляются новые товары, поэтому через пару дней уже этот любимый товар будет на странице 7 или 3.

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

Единственный плюс пагинации в том, что она показывает, сколько осталось пользователю, чтобы дойти до конца списка товаров, тем самым дает некое чувство контроля, но с кнопкой «загрузить еще» это можно реализовать еще проще, показывая сколько осталось товаров посмотреть.

Можно так же добавить полосу загрузки, которая как бы показывает, сколько товаров посетитель уже просмотрел, как это сделали H&M.

так выглядит кнопка 

Совет 5: Добавьте информацию о доставке на страницу товара

Человек всегда интересуется доставкой: бесплатно или платно, как и куда можно заказать, сколько будет идти, не испортиться ли товар при доставке, как можно ускорить доставку — и еще много вопросов. Поэтому стоит дать возможность сразу, еще не сложив ничего в корзину, узнать о доставке, не тратив время на ее поиски в подвале, в корзине, в помощи покупателям. Бам доставку, сразу на страницу любого товара, все счастливы.

Совет 6: меньше стрелок, больше слайдов

Мое мнение здесь такое, что стрелки в карусели товаров уже давно устарели, потому что просто надоедает постоянно нажимать на мышку, чтобы увидеть еще. К тому же, как правило, все эти стрелки очень маленькие, и приходиться кое-как наводить мышку на нее. Короче, фу. Современное решение — слайдер, как это показано на картинке.

к тому же слайдер выглядит куда приятнее

Заключение

Сегодня есть много дизайн-решений, но они не подходят для всех. Я попробовал собрать более-менее общие, надеюсь вам поможет. У меня остались еще советы, если хотите вторую часть, дайте мне об этом знать)

У меня появился телеграм-канал, в нем я пишу разные интересные вещи про дизайн.

Ссылка на тот самый редизайн.

{ "author_name": "Булат Хазимуратов", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 3, "is_advertisement": false, "subsite_label": "unknown", "id": 197142, "is_wide": true, "is_ugc": true, "date": "Fri, 15 Jan 2021 19:40:05 +0300", "is_special": false }
0
0 комментариев
Популярные
По порядку

Комментарии

null