Да, борьба с батареей — это сложное и увлекательное дело.

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

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

На Амазоне кнопка «Добавить в корзину» не появляется в списке. Там прекрасно знают, что навязчивая кнопка не повышает продажи.

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

На Амазоне кнопка «Добавить в корзину» не появляется в списке. Там прекрасно знают, что навязчивая кнопка не повышает продажи.

Этот прием помогает избавиться от батареи во многих ситуациях.

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

Даже если мы хотим сделать список функциональным, можно просто вынести общий множитель за скобки:

Блок с кнопкой остается на месте при прокрутке

Другой прием, позволяющий избавиться от повтора визуальных регалий всех управляющих элементов, носит название edit‑in‑place. Элемент управления появляется в том месте, где он нужен. Так устроены, например, переименование файлов и интерфейс электронных таблиц: поле ввода появляется там, где щелкнули мышью.

Ничто не мешает нам использовать этот прием и в вебе:

Калькулятор единиц измерения для сайта ТНК‑BP
Борьба с батареейИнтерфейсФормат: текстФормат: пиктограммаНоситель: сайт
Отправить
Поделиться
Запинить

Комментарии

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

Смущает пронумерованный список страниц — совершенно плохой заменитель поиска. А ссылка на троеточие в конце не дает понять, есть ли потенциально марка провода КС‑50 (хотя было бы интересней ввести ее в поле поиска).

И о специальных предложениях: куда полезней написать в двух словах, в чем состоит предложение, чем дать ссылку на еще одну страницу, куда лениво ходить (скидка 30%; 13‑й провод в подарок; самовывоз бесплатен; доставка в полцены).

4 июня 2007

Как раз недавно мы сталкивались с подобной задачей.

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

С другой стороны, не вполне понятно, что вообще должно происходить в ответ на клик этой самой кнопки? Переход в корзину с перезагрузкой страницы, как делают некоторые — моветон. Если же где‑то в другом краю страницы просто изменится одно число, половина людей — гарантию даю! — этого даже не заметит и будет щелкать еще и еще в ожидании хоть какого‑то эффекта. Тут уж недалеко до другой крайности — выдавать после каждого выбора алерт, что, конечно же, совсем ни в какие ворота.

Так что я поддерживаю вариант с полным отсутствием этих раздражающих факторов в общем списке и развернутым и понятным функционалом в описании конкретного товара.

4 июня 2007

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

4 июня 2007

Блок с кнопкой очень привлекателен. Возможно, не лишним будет добавить туда же состояние корзины: «В вашей корзине 16 товаров на сумму 1138 рублей». Слова «вашей корзине» — ссылочкой, естественно. В зависимости от визуального решения в тот же блок можно добавить несколько элементов: строку‑оповещение о последнем действии, как на почте Яндекса последней версии («В корзину добавлены 3 самовара СР‑115»), и ссылку «Оформить заказ». Если блок станет перегруженным, что‑то нужно будет убрать.

Если пользователь решить закрыть блок (если предусмотреть такое), тогда в дело должен вступить edit‑in‑place: тыкаем в поле «Заказать», появляется «Количество» и «Добавить в корзину» с ценой. Пример — форма быстрого ответа на той же почте того же Яндекса.

Не лишним будет также рядом с названием товара, находящегося в корзине, писать об этом: «В корзине 1 бухта».

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

4 июня 2007

А почему бы не попробовать группировать названия разных марок кабелей? Например, сначала идут все А: A‑16, А‑25,…, потом АС‑25,АС‑35,…

Название (код) марки («А», «АС») можно сделать еще и как позаголовок. Это, с одной стороны, будет видным названием для группы товаров, а с другой, немного разорвет монотонность таблицы, что здесь явно напрягает глаз.

5 июня 2007

А что если сделать форму добавления товара, совмещенную с корзиной?

По клику на название товара открывается новое окно.

В верхнем поле находится изображение товара, описание, поле ввода кол‑ва и кнопка «добавить в корзину».

После того как указали кол‑во, нажали на кнопку «добавить…», товар перемещается в нижнюю часть — в раздел «Уже в корзине» к товарам, добавленным ранее. Вместо описания товара наверху появляется надпись «Спасибо, 20 проводов успешно добавлены».

Если захотели отредактировать тот или иной товар, нажимаем на него — он открывается в верхней части, редактируем, сохраняем изменения.

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

5 июня 2007

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

И еще. Дмитрий, на сайте http://www.intelimpex.ru/ товар буквально залетает в корзину, при этом перезагрузки страницы не происходит. Веб 2.0!

5 июня 2007

А если помечтать: на странице находятся список товаров и изображение корзины. Мышью перетягиваем название или иконку товара на корзину — добавляется одна единица товара. Перетягиваем с зажатым Ctrl, и появляется окошко с предложением выбрать количество единиц. Возможно ли реализовать это сейчас или в ближайшем будущем на сайтах?

7 июня 2007

Степан, сайт с перетягиванием в корзину я видел намедни. http://boomboomroom.ru/catalog/sitting-room.aspx
Осталось только количество на Ctrl повесить =)

Но я не уверен, что это удобно. Особенно для пользователей ноутбуков, КПК, телефонов.

7 июня 2007

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

Думаю, интересно было‑бы после «вкидывания» в корзину тут‑же выдавать инпут с количеством. М?

18 июня 2007

Юджин, перетаскивание прекрасно своей немодальностью и естественностью. Модальное поле ввода, непременно всплывающее после перетаскивания товара в корзину, сделает затею бессмысленной.

18 июня 2007

Если честно, я не в теме проектирования интерфейсов, прощу меня извинить за безграмотность.

Подобное решение модально?

Есть три критических положения (примерное):
1 = 1
2 = 10
3 = 30

Ползунок выдает кол‑во айтемов с некоторой постоянной прогрессией. Т.е., между 1 и 2 шаг относительно большой, между 29‑30 самый минимальный. Как мне кажется, такое решение оптимально по удобству как для заказа небольшого объема, так и очень большого при незначительных размерах самого ползунка.

Все остальное вроде не нуждается в комментариях.

18 июня 2007

Если перетаскиваем одну картинку с вешалкой, значит, мы берем одну вешалку. Если надо две, перетасикаваем два раза.

Если нам надо двадцать вешалок, но нужно не перетаскивать их все по одной, а надо сначало 20 вешалок собрать с полки в кучу. Например, с помощью кнопки с полем ввода «Заверните мне [20] вешалок»

22 июня 2007

А что если количество задавать не во время перетаскивания, а после того как товар положен в корзину? Перетащили одну штуку, если надо — кликаем и вбиваем свою цифру.

9 июля 2007

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

2. Для варианта с перетягиванием в корзину, который заслуживает, на мой взгляд, более пристального внимания и широкого внедрения, можно применить такой способ управления количеством: только что перетянутый товар остается подсвеченным или выделенным каким‑то другим образом, а под корзиной появляется поле, в котором можно изменить количество товара и тут же увидеть стоимость заказанного количества. Если выделить другой товар, то поле отображает и позволяет редактировать его состояние.

30 авг 2007

Рекомендуем другие советы