Usability: "Table -> Card -> Table"

Jul 16, 2007 10:15

Дано:
Типичная реализация редактирования таблицы из БД (со справочными выпадающими списками) с возможностью установки фильтра по некоторым из полей.

Надо:
Необходимо отображать в табличном виде результатов фильтра только самые важные поля/столбцы (могут быть необязательными), остальное заполнять в карточке.
Реализовать добавление новой записи и редактирование имеющихся.

Решение:
Фильтр, размещенный над таблицей результатов в своем footer'е будет содержать кнопки "Добавить запись" и "Установить фильтр" (Поскольку если не найдено ни одного отфильтрованного значения, то не выводим и заголовки таблицы).

Быстрое добавление:
Если нам не важны значения остальных столбцов в БД (разрешается NULL),
то при нажатии на кнопку "Добавить запись" в верху таблицы результатов добавится строка с TextBox'ами и прочими элементами управления в соответствии со столбцами. Если в таблице результатов присутствуют столбцы для необязательных полей (NULL) и они заполняются при помощи справочников, то добавить в список "значение не указано", которое устанавливается по умолчанию.

Создание новой записи с указанием всех значений полей:
Cамым простым решением является карточка записи, в которой и будут отображаться выпадающие списки. Пользователю под кнопкой "Добавить запись" дать возможность задавать CheckBox "При помощи карточки", по умолчанию он выключен (работает вышеописанный вариант добавления).

Редактирование записи:
будем производить только в карточке, никакого "Быстрого редактирования" не будет, чтобы не усложнять код. Соответственно, должна быть визуально представлена возможность перейти к записи в режиме карточки (например самый первый столбец содержащий гиперссылку вида [...]).

Сама карточка:
Должна состоять из двух колонок - названия поля и его значения. Первое поле выравнять по правому краю (и указать звездочкой поля обязательные для заполнения), а второе по левому.

Под карточкой должны быть кнопки "Редактирование" (если мы перешли к имеющейся записи, соответственно в режиме просмотра), "Сохранить" и "Удалить". Доступность (Enable/Disable) этих кнопок зависит от прав пользователя и режима карточки (Просмотр/Редактирование/Добавление).
Кнопка "Сохранить" появляется в режиме редактирования/добавления замещая собой кнопку "Редактировать". Кнопка "Удалить" не должна быть визуально отображена в режиме добавления новой записи.

Под кнопкой "Сохранить" разместить checkbox "с переходом к таблице результатов" по умолччанию unchecked. Это позволит при массовом добавлении или редактировании записи сократить время на кликах.

Значения вышеперечисленных checkbox'ов необходимо иметь ввиду как настройки пользователя (сохранять в куках/viewstate/реестре). Еще для удобства пользователя при массовом добавлении записей - каждая типовая карточка, для полей-выпадающих списков, должна по умолчанию выбирать предыдущее выбранное пользователем значение. Поскольку скорее всего каждая новая запись в одном или нескольких полях будут совпадать с предыдущей.

webdev, usability, ui, ux, web, it

Previous post Next post
Up