Построение списка

Interaction Design Patterns (Web)
автор: 2002 Martijn van Welie
перевод: Александр Качанов

(назад к списку)

С сайта www.bol.com

Задача

Предоставить пользователю создать список и дать возможность его менять

Условия

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

Решение

Выведите сам список, а функции работы со список представьте в самом же списке.

Прежде всего, пользователь должен увидеть, сколько всего предметов находится в списке. Если список пуст, выводится соответствующее сообщение, например, "список пуст". Если все операции могут выполняться со всеми предметами в списке, разместите функции работы со списком под самим списком так, как показано в варианте "А". В противном случае, используйте вариант "В". Если число предметов в списке в варианте "А" будет больше 10, расположите функции работы со списком предметов над списком. Вариант "В" подходит для тех случаев, когда используется функция "Edit/Правка", с помощью которой меняются свойства выбранного предмета.

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

Почему

Выводя сначала информацию о списке, вы показываете пользователю, в каком состоянии находится список. Функции правки позволяют пользователю менять список по желанию.

Еще примеры

Данный пример взят с сайта Hotmail и демонстрирует использование варианта "А"

Используют

www.hotmail.com;www.amazon.com;

Другие шаблоны

Если список становится слишком большим (содержит более 10-15 предметов), подумайте об использовании шаблона "Постраничный просмотр"

(назад к списку)


Rambler's Top100
Rating All.BY
Akavita
Valid XHTML 1.0!