Ломая привычные паттерны, вы рискуете быть непонятыми
На днях выбирал себе ортопедический матрас на сайте Askona. Посмотрев ассортимент мне было сложно сделать выбор, потому что характеристики у матрасов были примерно одинаковые, но при этом цена могла отличатся в разы.
Я подумал, что для таких как я, ребята из асконы должны были предусмотреть функцию «Сравнить», чтобы можно было выбрать понравившиеся модели и наглядно посмотреть, чем они все таки отличаются. Забегая немного вперед скажу, что такую функцию я в итоге нашел, но мне пришлось пройти небольшой квест, чтобы ее найти.
Поиск неочевидного
Перейдя в каталог, я стал наводить на товары, в надежде увидеть там иконку сравнения или пункт «Сравнить». Исходя из своего опыта, как пользователя интернет-магазинов, я привык, что функцию «Сравнить» обозначают иконкой в виде черточек с плюсом, столбцов «больше-меньше» или весов.
Но, к моему сожалению, такой иконки там не было. Мне предлагалось только добавить товар в избранное.
«Ну, хорошо» — подумал я и решил поискать эту функцию непосредственно в самой карточке товара.
Некоторые интернет-магазины не выносят подобный функционал в каталог, хотя мне кажется это не очень удобным. Приходится переходить в карточку товара, вместо того, чтобы сразу из каталога выбрать нужные товары для сравнения.
Обычно, функции на подобии «Сравнить» располагают где-то в одном блоке с функцией «Добавить в Избранное», но рядом с иконкой избранного была только иконка списка.
Первое, что я подумал глядя на нее — эта иконка вызывает какие-нибудь дополнительные характеристики. Вторая мысль была – иконка переключает вид товаров с карточек на список. Но потом понял, что я нахожусь в карточке товара, а не в каталоге, и эту мысль отмёл.
Да, мне пришлось додумывать смысл иконки, потому что, во-первых, она не очевидная, во-вторых, не было поясняющего тултипа.
Окей, кликнул на иконку и у меня на секунду прогрузились «Часики» и сразу исчезли.
Затем иконка загорелась акцентным цветом и на этом всё. Видимо аскона вновь предложила мне додумать, что в итоге произошло в интерфейсе, потому что доходчивой обратной связи я никакой не получил. В интерфейсе не изменилось ровным счетом ничего.
Не поняв, что произошло, я предположил, что должна появится дополнительная информация внизу страницы (ведь была прогрузка с «Часиками», а значит что-то куда-то загрузилось). Но спустившись вниз я ничего нового не обнаружил.
Расстроившись, что функции «Сравнить» на сайте нет, я решил попробовать посравнивать вручную и для этого перешел в другую карточку товара. Но любопытство меня все-таки не отпускало, и в новой карточке снова решил нажать на эту иконку списка.
Процесс повторился. Появились «Часики», но после них, в правом верхнем углу я обнаружил, что рядом с корзиной располагается точно такая же иконка списка и ее счетчик переключился сразу с 0 на 2.
Нажав на неё я провалился в раздел сравнения и там были 2 моих товара. Оказывается иконкой списка я добавлял товары к сравнению.
Выдохнув, что мне все-таки не придется вручную сравнивать матрасы, я успокоился, но, как говорится, неприятный осадок остался.
Кто-то может сказать, что можно было бы сразу понять, что обозначает эта иконка, если бы я взглядом сопоставил иконку списка с такой же иконкой рядом с корзиной и перешёл бы туда. Теоретически, это могло бы случится. Но на практике чуда не произошло :) Причина этому в том, что моя первостепенная цель, как посетителя интернет-магазина матрасов – выбрать себе матрас. Поэтому в первую очередь я обращаю внимание на товары и работаю с ними. Все остальное для меня второстепенно.
Как можно было бы всего этого избежать
Первый и самый простой способ — это поместить иконку, которая уже знакома пользователям. Ведь у пользователей со временем складываются определенные паттерны и привычки, которых они придерживаются на всех похожих ресурсах.
В моём случае, я пытался найти привычную иконку сравнения, но не нашёл и это усложнило мое взаимодействие с интерфейсом.
Второй способ — по нажатию на иконку, выводить снекбар, который бы выступал в роли обратной связи для пользователя и сообщал, что товар добавлен к сравнению. В снекбар можно было бы поместить сразу и кнопку перехода в раздел сравнения.
Третий способ — при добавлении первого товара к сравнению, изменять индикатор количества с 0 на 1. В таком случае микро-анимация индикатора возможно привлекла бы мое внимание к иконке списка рядом с корзиной и я бы перешел туда. Но может быть это просто баг на сайте.
Четвертый способ — повесить поясняющий тултип на иконку, чтобы при наведении было понятно, что произойдет по клику. Но это будет актуально только для десктопных версий, поэтому способ рабочий только на половину.
Идеальным вариантом было бы скомбинировать первые три способа.
Вывод
Я на себе ощутил, как неочевидные элементы и интерфейс без обратной связи может усложнить взаимодействие пользователя с ресурсом. И что в большинстве случаев лучше придерживаться знакомых для пользователей паттернов даже в таких вопросах, как вид иконки.
Здесь можно провести аналогию с иконкой гамбургера. Гамбургер – устоявшаяся и всем привычная иконка, которая служит для открытия меню. Рядовой пользователь, видя иконку гамбургера, в большинстве случаев, сразу понимает о чем она и не задумываясь кликает.
Если мы вместо гамбургера поместим другую, неочевидную иконку (например, такую же, как иконка списка у асконы), то пользователю придётся призадумываться, какую функцию она в себе содержит, прежде чем на неё нажать. Примерно с такой же ситуацией столкнулся и я.
Иногда, стремление сделать «не как у всех» при проектировании интерфейсов может сыграть против вас.
