Школа
Интерфейс

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

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

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

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

Денис Лаврентьев
3 июня 2007
👁 4301   🗩15
Интерфейс

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

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

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

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

Денис Лаврентьев
3 июня 2007
👁 4301   🗩15
А. Г.
Арт‑директор и автор учебных программ бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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