Ресурс для веб-разработчиков и CSS-галерея

CSS, веб-стандарты, javascript

CSS, веб-стандарты, javascript

Полосатые таблицы: действительно ли они помогают? Автор: Джессика Эндерс

тэги Техника Разработка
Попытка оценки эффективности техники «полосатых таблиц». По-мнению автора, они не эффективны.

Перевод: Дмитрий Сальников

Полосатые таблицы (zebra striping) — также известные как «конфетные» или «зебровые» таблицы (candy striping), а также как полутень (half-shadow) — это применение слабого оттенка к чередующимся строкам или рядам в таблицах данных или формах. Примеры веб-сайтов, которые используют полосатые таблицы, включают в себя валютный сайт XE, Всемирную книгу фактов ЦРУ, и Monster.com. Полосатые таблицы в вебе — это, на самом деле, наследие печатных времен: одно из первых упоминаний этой техники появилось в 1961 году [1].

Многие верят, что полосы как у зебры помогают читателю, направляя его глаз вдоль ряда. Однако, несмотря на использование данного приема как в бумажных, так и в электронных средствах информации в течении почти половины столетия, практически нет свидетельств, что полосатые таблицы действительно помогают пользователям. В июне и июле 2007 года, я провела широкий обзор источников, таких как Международная ассоциация бумажных историков (International Association of Paper Historians), Ассоциация управления формами (Business and Forms Management Association), и IEEE Анналы истории вычислений (IEEE Annals of the History of Computing), но совсем не нашла информации по происхождению явления, или обоснованию, которое стоит за полосатой разметкой.

В то же время применение зебровой полосатости в электронном средстве информации является нетривиальной задачей. List Apart, например, является издателем статьи про то как делать полосатую разметку. Как веб-дизайнеры, мы, конечно, не можем себе позволить тратить время, кодируя разметку, которая не помогает! Таким образом, я решила произвести исследование, чтобы увидеть, действительно ли «полосатость» облегчает чтение.

Измеряя «легкость»

Полосатую разметку используют преимущественно в тех случаях, когда данные представлены в табличной форме. Пользователь такой таблицы будет искать один (или более) элемент данных. Цель пользователя — найти нужный элемент как можно быстрее. Следовательно, если мы поставим задачу, которая использует таблицу с полосатой разметкой, то мы можем ожидать улучшения в двух вещах: точность и скорость поиска нужных данных.

Эксперимент

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

Участникам случайно выбирали, какой формат они получают первым, полосатый или без разметки, чтобы устранить любые проявления упорядочивания. Эксперимент описывался только как «изучение табличного форматирования.» Эксперимент проводился через интернет, что, с одной стороны, имело свои проблемы, но с другой — было эффективно в смысле труда и стоимости. Две недели экспериментирования произвели годные для использования данные от 244 человек.

Таблица данных, которая показана ниже, имела 15 рядов (включая заглавный ряд) и девять колонок. Она содержала искусственные данные, которые были примерно основаны на обычных описаниях для винтов. Например, один из вопросов был «доступен ли винт, у которого малый допуск по диаметру равен 6g, в филиале фабрики?»

таблица данных с полосатой разметкой

Полосатая таблица данных с 15 рядами (включая заглавный ряд) и 9 колонками.

Целью являлось построить таблицу, которая:

  • была достаточно велика, чтобы обеспечить познавательную трудность для участников,
  • была не так велика, чтобы требовать прокрутку — как по горизонтали, так и по вертикали — в большинстве случаев,
  • содержала данные, которые были не особо знакомы участникам, уменьшая вероятность того, что они могут просто «знать» ответ без необходимости использовать таблицу, и
  • включала данные в нескольких разных формах, включая числовые и алфавитные, названия, символы, цены и количества.

Кроме присутствия или отсутствия полосатой разметки, таблицу во время эксперимента не меняли.

Результаты

Примечание: за этими результатами очень много статистики, которой я не хотела бы вам наскучить, но вы можете скачать полную, рецензированную статью (PDF, 320K).

Точность

Хотя я старалась сделать задачу поиска данных по возможности трудной, участники получали большинство ответов правильно — уровень ошибки по всем вопросам был 12% или меньше.

Вопросы, которые имели особо низкие уровни ошибок — например, вопрос первый с уровнем ошибки в 2% — были исключены из последующего анализа, потому что результаты, основанные на них, были бы ненадежны. Т.о. осталась одна пара параллельных вопросов: вопрос третий и вопрос шестой. Как показывает график ниже, по существу не было разницы в точности между версиями для полосатой таблицы и таблицы без разметки.

график точности

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

Дальнейший анализ этих данных показал, что, действительно, статистически значимой разницы в точности не было.

Скорость

Даже если не было улучшения в точности, улучшение в скорости было бы весьма благоприятно.

Как показывает схема ниже, среднее наблюдавшееся время, занятое на то, чтобы ответить на вопросы первый и второй, было больше, когда таблица была полосатая как зебра, но для оставшихся четырех вопросов занятое время было меньше, когда таблица была полосатая (смотрите таблицу 5 в рецензированной статье). Однако, статистически значимой оказалось разница только для шестого вопроса. Следовательно, мы не можем быть уверены, что другие результаты не зависели от частного случая данной таблицы, которую мы выбрали для работы.

график скорости

График, показывающий разницу во времени, занятом для ответа на вопросы, между версиями таблицы — полосатой и без разметки.

Предпочтение

После ответа на 6 вопросов участников спрашивали про их персональное предпочтение по поводу полосатой разметки.

В целом, наибольшая часть участников предпочитала полосатые таблицы (46%), но, помимо этого, значительная часть вообще не имела предпочтений (33%).

Таким образом, нет смысла в полосатых таблицах?

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

Однако, есть несколько доводов против полного отбрасывания полос.

Во-первых, в этом изучении было выявлено субъективное предпочтение таблиц полосатых перед таблицами без разметки. Те источники, которые я читала, а также дискуссии с другими людьми, подсказывают, что многие люди находят полосатые как зебра таблицы более приятными в эстетическом плане. Если многим пользователям нравится полосатая разметка (и другая большая группа людей не проявляет предпочтения), то почему бы не применить ее?

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

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

Вам решать

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

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

Участвуйте в последующем изучении

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

Чтобы участвовать в исследовании, посетите http://surveys.formulate.com.au/dtfu/. Чтобы узнать больше, читайте про исследование.

Сноски

[1] Объявление про Philip Hano Company Inc., появившееся в Sadauskas, W.B., Manual of Business Forms. Office Publications Inc., New York, 1967, 187.

Оригинал статьи → http://www.alistapart.com/articles/zebrastripingdoesithelp

Написать комментарий




Ввод HTML запрещен!!Введите текст с изображения:* проверка на работа
* — поля обязательные к заполнению!

Комментарии (2)

04 июня 2008 |

Картинки побились.

04 июня 2008 |

Спасибо, Вадим! Поправили.



Сделано в 127.ru