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

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

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

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

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

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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