Еще кое-что о «зебре»

23 Июль 2010 | Разделы: Юзабилити, Дизайн

Перевод статьи Zebra Striping: More Data for the Case, автор Jessica Enders
Translated with the permission of A List Apart Magazine and the author[s].

Недавно я проводила исследования по эффективности (а точнее, по нехватке эффективности) «зебры» - чередующегося раскрашивания строк в таблице или форме. Исследование позволило оценить степень результативности работы после того, как участники выполнили серию заданий, не продемонстрировав статистически значимых улучшений в точности и показав лишь небольшое улучшение в скорости при применении «зебры».

Результаты стали сюрпризом для многих читателей соответствующей статьи, опубликованной в A List Apart в мае 2008 года. Думаю, справедливо будет сказать, что подавляющее большинство нас, включая меня, ожидало увидеть, что «зебра» сильно поможет.

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

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

Так ли уж необходимо изучение «зебры»?

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

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

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

Координация исследовательских усилий

Экспериментальные данные, полученные из первого исследования, не предоставили серьезных доводов в пользу применения «зебры». Однако одного единственного эксперимента недостаточно, чтобы опровергнуть теорию: может быть, «зебра» имела мало эффекта только из-за именного того дизайна. Безусловно, «зебра» не особо поможет, когда нужно представить таблицу, похожую на одну из использованных в исследовании – что, фактически, тоже стоит знать, - но что, если бы таблица была длиннее, строки были бы разного цвета, или задание было бы труднее? Вот что беспокоило и меня, и моих читателей.

Будь мир идеален, я бы провела исследование каждого из возможных свойств дизайна, которые могут повлиять на результат – помогла «зебра» или нет. Как минимум, в эти свойства будут включаться следующие:

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

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

Второе исследование: альтернативное изучение результативности

В сущности, я чувствовала, что очень важно провести еще одно исследование – такое, которое бы ограничило участников во времени для дачи ответов и создало бы некоторый прессинг во время выполнения задания. Кроме того, я чувствовала, что важно сделать и само задание труднее. Эти принципы легли в основу дизайна следующего исследования, ссылка на которое была дана в конце первой статьи в ALA (или где бы она там не находилась).

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

Таймер в правом верхнем углу экрана помог создать чувство прессинга. У участников было 15 секунд, чтобы ответить на каждый вопрос: когда время выходило, появлялось сообщение, и участник переходил к следующему вопросу. Каждый ответ, введенный ко времени истечения 15 секунд, регистрировался, даже если был неполным. Участники также могли дать ответ до истечения времени, используя кнопку «отправить».

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

Для последующего исследования, проходившего с 29 апреля по 15 июня 2008 г., было проведено колоссальное число сессий - 3,674. Из них всех я отобрала те, в которых были даны ответы на плюс-минус восемь вопросов. Кроме того, если с одного IP проводилось несколько сессий, я оставляла только одну (выбирая ее произвольно). Такой жесткий подход был единственной возможностью исключить дублирующиеся данные. Это также означало и потерю некоторого количества достоверной информации, но мы хотели предотвратить любые искажения от повторного участия. В результате этих мер осталось 2,276 достоверных анкет, которые могли быть использованы для анализа.

Ответы были систематизированы по принципу «правильный - неправильный», чтобы проанализировать точность. Ответ считался правильным, если был правильным, по крайней мере, частично (например, «филли» или «Филипины» вместо «Филиппины»). Это было сделано, чтобы люди не оказывались в неудобном положении из-за своей скорости печатания, если они нашли правильный ответ, но не успели ввести его полностью до окончания срока.

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

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

Ниже, однако, показаны основные результаты. Желтым цветом выделены ячейки, показывающие наилучший результат при раскрашенной версии таблицы, статистическая значимость которого основана на критерии Пирсона. (Этот критерий регулирует различный объем выборки, который имел каждый из стилей таблицы). Оранжевым цветом выделены ячейки, данные в которых максимально близки к тому, чтобы быть статистически значимыми (p=0.0545). 

Таблица 2. Результаты второго исследования показали, что «зебра» улучшила точность в трех из восьми заданных вопросах.

Таблица показывает, что в трех из восьми вопросов раскрашенная версия способствовала к более точным ответам, чем в случае чистой и разлинованной версии. Четвертый вопрос очень близок к тому, чтобы считаться статистически значимым. Что касается остальных четырех вопросов, то разница в точности между тремя стилями настолько мала, что не может быть статистически отделена от случайного шума. В таких случаях, результаты по «зебре» были просто такими же хорошими – и уж точно не хуже, - как при чистой и разлинованной версии.

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

Третье исследование: предпочтения пользователей

Другой вопрос, поднятый некоторыми читателями, заключался в том, что ценность «зебры» связана с эстетическими и/или субъективными предпочтениями в той же мере, как и с фактическим улучшением в результативности работы. Это веский довод, один из тех, к которым я прибегла в конце первоначальной статьи: если пользователям нравится «зебра», тогда это уже спорный вопрос, помогает ли она им в самом деле читать таблицы с большей легкостью (если только она не делает чтение более затруднительным).

Чтобы использовать предпочтения в качестве аргумента для применения «зебры», нам понадобится статистика, доказывающая, что большинство аудитории предпочитает ее. Для этого третьего исследования я отобрала широкий круг пользователей, чтобы результаты получились настолько широко применимы, насколько это возможно (т.е. я не выбирала  людей только из круга веб-разработчиков). При великодушной поддержке компании Newspoll я получила возможность провести анкетирование о предпочтениях при помощи Национального он-лайн опроса (National Online Omnibus studies). Национальный он-лайн опрос представляет собой анкетирование на базе интернет-технологий, которое задействует  более 1200 австралийцев в возрасте от 18 до 64. Каждые две недели в опроснике обновляются вопросы – организации покупают один вопрос или более для включения в анкету. Участники опроса являются постоянными членами тщательно осуществляемого компанией Newspoll исследования рынка, а результаты могут дать оценку мнения австралийского населения. Следовательно, мы можем быть уверены в репрезентативности результатов как минимум по Австралии (а также, возможно, по подобным странам таким, как США, Канада, Новая Зеландия и Британия)

Участникам были показаны следующее изображение[1], которое представляло собой одну и ту же таблицу в шести различных стилях форматирования, и текст:

Таблица 3. Информационные таблицы использовались, чтобы определить, каким таблицам пользователи отдают предпочтение: чистым, разлинованным или раскрашенным «зеброй» разными способами.

Таблицы сопровождались следующими инструкциями:

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

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

• Желание получить окончательный ответ на вопрос: «Предпочитают ли пользователи таблицы с «зеброй» при сравнении с чистыми и разлинованными таблицами?»
• Определенные альтернативы чистым, разлинованным или выполненным по схеме один цвет – один ряд, казалось, были популярны среди читателей первой статьи в ALA (например, схема два цвета – один ряд).
• Серый цвет является нейтральным, поэтому может быть использован для «зебры» в большинстве случаев, поскольку, не зависит от, например, ограничений корпоративного брендинга или типа монитора.
• Зеленый цвет легко воспринимается глазом (у нас больше зеленых рецепторов, чем красных или синих) и часто рассматривается как успокаивающий. Необходимо избегать стилей, создающих слишком много визуального шума, который затрудняет чтение.   

Чтобы минимизировать эффект порядка, был бы предпочтительно, чтобы таблицы возникали на изображении в произвольном порядке, но, к сожалению, это было невозможно. Лучшее, что мы могли сделать, это обособить схожие стили, чтобы порядок хотя бы казался произвольным. Таким образом, стиль, который по предположению должен был стать наименее популярным (чистый), мы разместили на позиции, привлекающей, согласно исследованиям движения глаз, больше всего внимания (левый верхний угол). Теперь, если предпочтения были далеки от данного стиля, то результаты исследования не могли быть искажены за счет неудачного размещения таблицы.           Результаты третьего исследования показаны ниже. Наиболее предпочтительной стала типичная «зебра» (один цвет – один ряд): 31% участников оценил ее как таблицу, помогающую в наибольшей мере, и только 4% - как таблицу, помогающую в наименьшей мере. (Примите во внимание, что максимальный предел погрешности в данных вычислениях составляет 2,8%).

Таблица 4. Третье исследование показало, что участники предпочитают таблицы раскрашенные «зеброй» по схеме один цвет – один ряд.

Насчет «зебры», выполненной по схеме два цвета – один ряд, мнения разделились. 23%  опрошенных выбрали ее лучшим, а 15% - худшим вариантом. Такой результат вполне логичен: можно представить себе, что два разных цвета одним людям будут создавать дополнительные визуальные зацепки, но другим – дополнительный визуальный шум.

Интересно, что 20% предпочли разлинованную версию, что практически равняется проценту проголосовавших за схему два цвета – один ряд. Доля участников, которым она не понравилась, такая же, как и у версии один цвет – один ряд, а именно 4%. Еще один интересный результат заключается в низком показателе по двойному и тройному раскрашиванию, каждый из которого предпочло менее 10%. Тройное раскрашивание еще и оказалось наименее предпочтительным для почти трети опрашиваемых (28%).  Однако  возможно, что это не просто отражение действительного негативного мнения, а результат размера таблицы, использованной для опроса. Из-за ограничений в пространстве таблицы могли содержать только по семь строк, что потенциально делало менее читабельными двойные и тройные «зебры», поскольку такая модель должна повторяться на протяжении всей таблицы. Лично я думаю, что использование такой зебры весьма рационально потому, что дает больше визуальной информации, чем «зебра» в один ряд, создавая блоки данных. Хотя, может быть, людям просто больше нравятся другие стили.

Рекомендации 

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

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

Если «зебра» такого типа не может быть легко применима, тогда лучшим решением будет провести линии между всеми строками.

Одна дверь закрывается, другая – открывается.    

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

Так что же нам делать? Думаю, есть два ответа.

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

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

Примечания

[1] Примите во внимание, что изображение было в 749 пикселей в высоту и 403 пикселя в ширину.

←

Регистрация и вход в систему: 16 ошибок в дизайне