Здравствуйте, хочу написать цикл статей про юзабилити веб-интерфейсов, и начну, как не странно, с корзины покупок.В этой статье я постараюсь рассмотреть как выглядит большинство корзин сейчас, разобрать их преимущества и недостатки, а так же попробую сотворить нечто более современное и удобное.
Предупреждаю сразу — пишу я впервые, так что многое может быть изложено далеко не лучшим образом.
Итак, начнем!
Почему корзина?
«Так почему именно корзина?» — спросите Вы.
«А что объединяет все интернет-магазины?» — спрошу я Вас.
Делая покупки в очередном интернет-магазине, Вы можете не обратить внимание на прелести дизайна, удобство каталога или навигации, скорее всего Вы даже не узнаете о всех предоставляемых услугах, но Вы не сможете пройти мимо корзины.
Стандартная корзина
Давайте рассмотрим несколько корзин с произвольно выбранных сайтов.
Что мы видим? Приятно, когда у корзины есть интуитивно понятная иконка и свое имя — для некоторых оно «Корзина» для других «Моя корзина» или «Ваша корзина». Замечу, что во всех корзинах имеется товар, но к сожалению не по всем это понятно. Около некоторых корзин написана общая сумма выбранных товаров, что очень удобно при больших покупках.
Идеальная корзина
Итак, увидев все разнообразие корзин, давайте попробуем понять как же должна выглядеть идеальная корзина?
Идеальная корзина должна выглядеть как корзина, по которой легко понять пустая корзина или полная, она не должна быть похожа на баннер, расположена в привычном месте, а так же дающая основную информацию о ваших покупках.
Рассмотрим основные моменты детальнее:
- «выглядеть как корзина» — иконка не должна быть ведром или ящиком, чем привычнее она, тем проще ее найти;
- «пустая корзина или полная» — меняйте иконку в зависимости от количества товара, это очень удобно;
- «не похожа на баннер» — я думаю всем известен термин «баннерная слепота»;
- «в привычном месте» — обычно корзины размещают в левой части сайта (обычно над или под меню), либо в правом верхнем углу;
- «дающая основную информацию» — посмотрев на корзину покупатель должен сразу увидеть сколько товара он уже выбрал и на какую сумму;
На первом рисунке видно, что похожие корзины имеются, но что будет если добавить интерактива? Мы не видим что за товар в корзине и это не удобно. Давайте сделаем чтобы при наведение мыши отображался список товаров.
Современная корзина
Теперь, когда мы увидели идеал, представьте себя в супермаркете с «идеальной корзиной» в которых не видно товара, а только количество и общая сумма и чтоб посмотреть что в ней, нужно снять накидку и открыть замок. Удобно?
Современная корзина — это «идеальная корзина» в современном вебе. Частью современного веба являются большие разрешения мониторов и интерактивные интерфейсы пользователей. Давайте попробуем собрать все вместе и посмотреть что получится.
На картинке видно, что идеальная корзина стала еще идеальнее — теперь в любой момент мы можем видеть весь список товара с его изображением и кратким описанием. Мы можем с легкостью изменить порядок а при желании и количество товара (на рисунке этого нет). Добавлять товар в корзину можно простым «перетягиванием» его изображения на панель. Если же мы не хотим видеть выбранный товар в данный момент, мы просто скроем панель, но все равно будем иметь к нему быстрый доступ. Панель расположена в правой части страницы, за счет чего тексты в центре становится удобнее читать.
Представьте только как будет удобно собирать компьютер из комплектующих, видя что уже в корзине, или как приятно выбирать мебель с техникой в свою новую кухню, помня какого стиля выбран холодильник со столом.
Помечтаем
Давайте рассмотрим несколько сайтов для примера (сайты выбраны на угад):
- Олди — видим сайт фиксированной ширины, а справа зловещая пустота...
- Фото.ru — опять же фиксированный сайт и опять пустота на большом разрешении.
- Offo.ru — видим резиновый сайт, но удобно ли читать описание товара?
А теперь просто представьте как будут выгдятеть эти сайты с новой корзиной. Красота!
Нюансы
Конечно корзина которая получилась у нас в конце не эталон и все зависит от конкретного сайта, но для большинства это решение будет весьма приемлемым.
Если Ваш интернет-магазин поддерживает «отложенные товары» (товар которого сейчас нет в наличии, но который вы обещаете завезти) то, возможно, рядом с корзиной должна быть информация о них.
Бывают также магазины которые не рассчитаны на покупку большого количества товаров за раз (к примеру, салоны vip-подарков) то смысла в списке товаров особо нет, но все равно не забываем о «идеальной корзине».
Постскриптум
Исследуя просторы habrahabr наткнулся на интернет-магазин Дары Камчатки в котором корзина сделана достаточно приятно, но ее минус в том что она находится внизу страницы — не всегда перед глазами и перетащить товар в нее не очень удобно,… но как же приятно!
На этом все, надеюсь мой первый труд Вам понравится.
В ближайшем будущем я планирую поговорить о корзине изнутри, о процессе оформления заказа, о каталогах и других не менее важных элементах интернет-магазинов… а потом пойдем и дальше.
И еще — я не дизайнер и за красоту набросков не отвечаю, главное идея ;)
UPD: К сожалению, с циклом статей пока не получается, но все же желание еще осталось :)
