Списки

Системный список
Список представляет собой набор записей, из которого можно выбрать одну или несколько записей. Поэтому время работы пользователя со списком существенно больше, чем с кнопкой.
Список может содержать достаточно много записей, поэтому для удобства работы их необходимо упорядочивать по какому-то критерию, например, строки по алфавиту, числа в порядке возрастания значений, а даты - от настоящего к прошлому.
Достоинства
  • Компактное хранение большого количества записей
  • Возможность выбора одной или нескольких записей из многих
  • Позволяет определить относительное расстояние до искомой записи и увидеть соседние записи относительно искомой, что в ряде случаев помогает произвести их быстрый выбор
Недостатки
  • Блочный элемент, который может занимать большую площадь на странице по сравнению с выпадающим списком
  • Ограниченные возможности в оформлении самого списка и элементов внутри него
Системный список на web-страницах применяется редко. Вместо него используют выпадающий список или рубрицированный каталог ссылок.
Системный выпадающий список
Выпадающий список отличается от обычного списка тем, что занимает на странице существенно меньше места (строчный элемент), при той же функциональности (отсутствие множественного выбора в нем практически не уменьшает данную функциональность). Строчный элемент можно легко поместить рядом с другими.
Недостатком выпадающего списка является его слабая наглядность, поскольку в обычном состоянии он может показать только один элемент списка, да и работать с большим выпадающим списком неудобно по сравнению с обычным.
Поскольку возможности внешнего оформления выпадающего списка имеют ограничения, то он чаще всего используется там, где используются другие системные элементы управления:
  • в формах поиска, когда нужно произвести выбор ключевого поля, по которому будет производиться поиск (название книги, автор)
  • в формах отправки данных для выбора, например, рубрики каталога, месяца и др.
  • в диалоговых окнах и инструментальных панелях
Пользовательские списки
Пользовательские списки создаются самим разработчиком web-страницы в тех случаях, когда необходимо изменить оформление его элементов или привести его внешний вид в соответствие с общим дизайном страницы. Пример изменения оформления - список переключателей.
1 элемент
2 элемент
3 элемент
А можно вместо переключателей поместить пиктограммы и др.
При использовании списка на web-странице нужно учитывать один момент - действие при выборе элемента списка. Предположим, что у нас есть список ссылок на разделы каталога, которые собраны в списке, и нужно осуществить переход по выбранной ссылке. Такой элемент может быть оформлен так:
1 способ 2 способ
1 способ - переход осуществляется при щелчке посетителем на элементе списка, 2 способ - переход осуществляется только при щелчке на кнопке "Перейти". Какой из этих способов определения действия правильный? Второй, поскольку правильно используется функциональность каждого элемента - список - выбор элемента, кнопка - осуществление действия. Если по одному щелчку нужно осуществить выбор и переход, то для этих целей используется список ссылок.
Ссылка на страницу 1
Ссылка на страницу 2
Ссылка на страницу 3
Но существуют ситуации, когда очень удобно наряду с выбором элемента списка производить некоторое действие. Предположим, что нам необходимо сопоставить выбранному месяцу количество дней в нем.

1 способ 2 способ
1 способ - при выборе месяца заполнение списка дней производится сразу, 2 способ - заполнение списка дней производится только после щелчка на кнопке "Выбрать". Какой из этих способов определения реакции правильный? Опять второй (с точки зрения разработчика), но для посетителя удобнее первый способ, поскольку не нужно выполнять дополнительное действие - щелчок на кнопке. Обратите внимание, что посетитель не видит какого-либо действия при выборе месяца 1-м способом. Ему кажется, что он произвел только выбор месяца - заполнение списка дней производится незаметно для него, поэтому с точки зрения посетителя реакция на выбор месяца 1-м способом осуществляется более удобно, чем 2-м.
Обратите внимание, что в данном случае мы не увеличили функциональность самого элемента управления - выпадающего списка, мы увеличили эффективность взаимодействия посетителя с ним. Это говорит о том, что для увеличения эффективности работы не всегда требуется увеличение функциональности элемента управления. Еще один наглядный пример находится на странице http://www.uchmarket.ru/servis/speedorder.php
Область поиска с ярлыками
Сразу бросается в глаза отсутствие кнопки "Найти", которая обычно размещается справа от поля поиска. Это может озадачить посетителя, который в первый раз попал на страницы сервиса, однако постоянный посетитель найдет такой механизм поиска более удобным!
Несколько лет назад я столкнулся с проблемой низкой скорости отображения данных в таблице на web-странице, что не позволяло производить поиск в 2500 записях в реальном времени. Я пробовал разные способы - предварительная загрузка данных, разбиение одной большой таблицы на несколько таблиц, безтабличное формирование данных с помощью javascript-массива - задача не решалась. И тут мне пришла в голову идея использовать для этих целей системный список с моноширинным шрифтом! Осталось добавить к нему предварительную загрузку данных, чтобы получился один из самых быстрых и функциональных способов поиска и заказа товаров, который не уступал реализации его в виде Windows-приложения!
Этот пример я привел для того, чтобы показать - нестандартное использование элементов управления может сильно озадачить посетителя, который впервые сталкивается с этим, но позволяет качественно увеличить эффективность и удобство работы посетителя, который знает, как с этим работать! По этой причине я рекомендую для постоянных посетителей разрабатывать оптимизированный вариант сервиса в дополнение к основному, которым предназначен для всех посетителей сайта.
Оглавление
Copyright © 2016