Как я пробовал пользоваться kabanchi.com

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Недавно в Киеве стартовал весьма продвинутый сервис по онлайн-заказу продуктов в супермаркете kabanchi.com — и страшно мне понравился своей идеей, так как я хронически не люблю ходить по магазинам и очень люблю интернет-проекты. Кратко — идея простая: все можно набрать на сайте, специальный человек сходит и соберет это все (за 12 гривен) и потом вынесет ко входу или даже доставит домой (за 30 гривен или за 60 если срочно). Что ж, я готов, это по мне.

Вчера мне выдался шанс протестировать его и я отозвался в твиттере, мол интерфейс неудобный. И тут же получил ответ от ревностных авторов интерфейса (студия vis-design.com) в лице Ильи Бахвалова с предложением конкретизировать, а то, мол «п***еть не мешки ворочать». С радостью принимаю предложение и надеюсь, что это поможет сервису стать лучше. Хотя я люблю рассуждать о недостатках эмоционально, на самом деле сервис мне понравился, не интерфейсом, но идеей, и так как конкурентов у него пока нет — надо признать, что у него самый лучший интерфейс онлайнового продуктового магазина в Украине!

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

В первую очередь должен сказать, что я был крайне атипичным пользователем, так как я хотел заказать продукты с доставкой по адресу в Киеве, находясь при этом в Берлине. И как выяснилось (уже, конечно, после того, как я облазил весь магазин и набрал кучу продуктов), этого нельзя сделать, хотя на сайте русским по белому написано:

— Каким образом я могу рассчитаться?

— Наличными в момент получения корзины либо же карточкой Visa или MasterCard — через безопасный шлюз ПриватБанка Liqpay (если заказываете доставку) или через платежный терминал (если собираете заказ самостоятельно).

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

Второй общий неприятный момент, увы, характерен для всего уанета — это невыполнение взятых обязательств.

Наш график работы:

— Заказать продукты самостоятельно через сайт: 24 часа в сутки

— Заказать продукты по телефону и забрать корзину: 09:00 — 23:00

— Плановая доставка: 12:00 — 22:00

— Срочная доставка: 10:00 — 23:00

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

Но вернемся к интерфейсам. Интерфейс делал субподрядчик, сторонняя компания, веб-студия. Поэтому тут уж косяки в интерфейсе — это вопросы его авторам, которые, по идее, думали именно о том, чтобы интерфейс был удобным. Причем, по описанию все выглядит очень современно — wireframes, все дела. Сделать интерфейс к большому магазину с огромным количеством товаров — непростая задача, легких решений тут нет, кто пробовал — знает. Давайте посмотрим, как решили эту задачу дизайнеры

Тут есть совсем «детские» косяки с отступами и визуальным связыванием, которые уж совсем стыдно делать людям, называющим себя «юзабилистами»

(такую картинку можно увидеть, проскролив немного продукты в категории «Сладости, Чипсы, Снэки», угадайте, какая кнопка «купить» относится к какому продукту?)

Или, например, визуальное подтверждение действия «положить в корзину». Нет, оно, конечно есть, появляется такая полупрозрачная картинка с изображением корзины (спорное решение, но не о том речь). Если положить несколько экземпляров одного продукта с относительно высокой (вовсе не космической, просто уверенной) скоростью клика, уведомление будет возникать через раз, то есть, когда «кладешь» три штуки — появится два уведомления. Сиди, гадай — «положились» они туда, три ли...

А есть некоторые места, которые вызывают простое человеческое недоумение, например вот этот чудесный фильтр по весу:

Неправильная сортировка — это, конечно, нелепая ошибка, но вот сделать фильтр с конкретными значениями там, где явно нужен фильтр с диапазоном? Если мне нужна небольшая пачка, грамм эдак 150–200, мне в какую опцию тыкать прикажете?

Или вот этот фильтр:

Как мне делать выбор в списке, пункты которого не исключают друг друга? И вообще, не являются значениями одной шкалы? Что, если меня интересует что-то варено-копченое на вес — в этом списке минимум четыре пункта соответствуют моей цели, куда мне жать?

(Кстати, почему перед фильтром по бренду написано «бренды», перед этим фильтром написано «уточнения», а перед фильтром по весу — ничего не написано? Не то, чтобы это был мегакосяк, но как в том анекдоте — неаккуратненько как-то)

Ну или, например, как мне жить вот с таким выбором — три одинаковых опции на двух уровнях (я подсветил зеленым)?

А вот вопрос интереснее. Какая разница между «кнопками» и «линками» здесь?

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

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

Некоторые слова в ней превращаются в специальную синюю пепяку (если совпадают полностью с названием категории):

(а частичное совпадение — нет):

Что нам это дает? Да, в общем, ничего, кроме информации о том, что мы «попали» в категорию. Здорово, но зачем? Ну и еще — синюю пепяку можно удалить одним кликом.

Хм, может все дело в том, что поисковая строка различает собственноручно введенные и предустановленные компоненты? Типа, если ты нажал кнопку, то тогда в строке появляется не просто запрос, но с синей пепякой, а если что-то руками вписал — то нет? Проверяем:

ведет нас к

То есть — нет, это неправильное предположение.

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

При этом морфология не поддерживается, увы:

(выдачи разные)

В общем, я бы сказал, что скрещивать категорийную навигацию, фильтры и поисковую строку — это очень смелый, а точнее — безрассудный ход. Может показаться, что это упрощение — как же, у нас теперь все — это поиск, нет фильтров, нет категорий — есть только разные удобные способы формировать поисковую строку (ах как хорошо про такие решения написал в свое время Джоел)! Но увы — получилось вовсе не проще. Получилось очень сложно, непонятно, и главное — ненадежно, ты никогда не можешь быть уверен в результате. Нельзя заменить фильтры поиском, даже гении поиска Google не пытаются это сделать — поиск поиском, фильтры фильтрами.

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

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

А работа с результатами поиска или применения фильтра, сортировка, например, банальная — здесь просто отсутствует. Нет, вру, один элемент есть — он в конце списка продуктов по текущему фильтру (он же — результаты поиска):

(Читатели с математическим образованием в этом месте могут ощутить недоумение — как так может быть, что список, в котором 100 продуктов, и который представлен строками по четыре, может иметь последнюю строку, содержащую ОДИН продукт?)

Кстати о категориях. Вот как так, в категории верхнего уровня «морозилка» нет пельменей?

и при этом они на самом деле есть:

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

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

Да, я считаю, что интерфейс можно было бы сделать значительно лучше — проще, понятнее, удобнее, приложив примерно те же производственные (дизайнерские, программистские) усилия, просто построив его на другой архитектуре представления информации. Ну вот просто не делать ставку на эту волшебную поисковую строку. Иными словами — лучше подумать вначале и не стремиться к новаторству в области, где оно не нужно, просто скопировав нужные решения с уже существующих сайтов. Но, мне кажется, для веб-студии это почти то же самое, что расписаться в собственном бессилии, фактически — плагиат. Это может быть действительно так для графического дизайна, но не для интерфейса. Поэтому у меня есть подозрение, что веб-студии не могут делать хороших интерфейсов — паттерны мышления не позволяют.

Еще раз вернусь к изначальной идее: сервис — отличный. Интерфейс — это только способ достичь некоторой цели. Мне удалось сделать это (ну — почти). Я справился и разобрался, пусть не без проклятий, но смог набрать кучу продуктов и готов был отдать деньги за тот сервис, который предлагает kabanchi.com. И это — отлично, и я призываю всех попробовать kabanchi.com — дать им хотя бы шанс удивить вас.

Разве их идея — не великолепна? Разве нет очарования в том, что можно не ходить куда-то, таскаться с тележкой и стоять в изнурительной очереди -, а получить все то же, не вставая из-за уютного компьютера, с чашечкой кофе, слушая любимую музыку? Разве это не стоит тех, прямо скажем — небольших денег, которые они за это просят? Разве не стоит хотя бы раз попробовать лично?

Целую,
Алексей Колупаев,
@kolupaev

P.S. На всякий случай — да, я знаю, как сделать лучше. Да, со мной можно об этом поговорить, я готов помогать.

P.P. S. Пользуясь случаем, хочу послать лучи поноса модераторам Хабра, заблокировавшим статью на основании: «Модераторы сайта ограничили для вас возможность публиковать посты до 06.02.2012. Причина: использует Хабр для рекламы аккаунта в Твиттере, ранее рекламировал личный сайт. Похоже, не умеет читать правила сайта». По-моему вы, там, ребята, охренели со своими правилами. Бан на год? За ссылку на твиттер в подписи? За рекламу личного сайта — стартапа, который я запускал два года назад?

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU