x
 
Денис Лаврентьев
4 июня 2007

У меня к вам вопрос относительно каталога продукции с возможностью заказа. Пользователь может добавить заказ в список, который затем отправляется менеджеру компании вместе с реквизитами заказчика. Ссылка на кабель переводит на страницу с подробной информацией о кабеле. Помимо всего прочего, есть специальные предложения для зарегистрированных пользователей (например, скидки). Что не нравится самому: назначение «добавить» — очень смутное. Возможно, я туда поставлю иконку «+», которая будет меняться на «-» для добавленных товаров. Остается «батарея» из иконок — сверху до низу ряд одинаковых элементов.

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

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



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

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

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

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

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

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

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

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

Ничто не мешает нам использовать этот прием и в вебе:
Калькулятор единиц измерения для сайта ТНК-BP

Поделиться
Отправить

Комментарии

Влад Скалдин
4 июня 2007

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

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

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

Дмитрий Кравчик
4 июня 2007

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

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

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

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

Константин Горский
4 июня 2007

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

Олег Подчашинский
4 июня 2007

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

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

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

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

Ларченков Алексей
5 июня 2007

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

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

Роман Солодовников
5 июня 2007

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

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

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

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

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

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

Матвей Андриенко
5 июня 2007

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

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

Аксенов Степан
7 июня 2007

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

Андрей
7 июня 2007

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

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

Юджин Джилагин
18 июня 2007

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

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


18 июня 2007

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

Юджин Джилагин
18 июня 2007

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

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

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

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

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

Руслан Гроховецкий
22 июня 2007

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

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

Petru Strimbeanu
9 июля 2007

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

Антон Вернигор
30 августа 2007

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

4 Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 Год назад запустил личный проект «Либретто опер» 2