Yahoo! User Interface блог (YUIBlog)

Результаты опроса Pattern Аккордеон

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

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

Кто откликнулся

Респонденты считают себя следующими способами:

• Конструктор 21,4%
• Разработчик 32,1%
• Гибридные (Оба дизайнера и разработчика) 42,3%
• Ни один из выше 4,2%

Терминология Различия

Подавляющее большинство всех респондентов согласились, что

• Аккордеон Аккордеон Меню и означает одно и то же (73%)
• Аккордеоны и дерево управления это две разные вещи (89%)

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

Меньше большинства сказал, что аккордеон и складной панели относятся к одно и то же (60%).

Подобное правительственное большинство согласуются между ролями.

Презентация Аккордеоны

Твердое большинство (68%), сказал, что аккордеоны можно выложить как по горизонтали, так и по вертикали (а на самом деле картина также свидетельствует в Интернете). Люди предположили, что этикетки на горизонтальной аккордеон должны быть написаны по вертикали и / или поворачивать.

Еще большее большинство (72%) говорит, что аккордеон может иметь только два уровня (это выравнивает различия между аккордеоны и деревьев):

Незначительное большинство (53%) говорит, что аккордеоны могут быть вложены в другие аккордеонов. Письменные комментарии предположил, что формулировка вопроса привело некоторых ответить, что это, безусловно, возможны, но не всегда желательно, внесение предложений, таких как: "Если вы адекватно желоба них, это было бы возможно, но в целом ужасная идея - вроде как использование слишком много вкладок и наличие их обернуть в несколько строк. "

Это был один из вопросов, где называет себя дизайнеры и разработчики взяли противостоящих сторон. 57% разработчиков и гибриды согласились, что аккордеоны могут быть вложенными, тогда как 64% Дизайнеры заявили, что не может быть. (Ни один из Aboves раскол 50/50!)

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

Как должен вести себя Аккордеоны

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

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

Намного больше, большинство (73%) считает, что аккордеон может быть полностью закрытом состоянии (то есть, что это не обязательно, что всегда будет одна панель открыта). Только выброс в том, что ни один из Aboves сломал 60% для той позиции, что всегда должна быть одна панель открыта.

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

Другое значительное большинство (76%) считает, общий размер аккордеон может измениться по мере необходимости, а не вынужден соответствует размеру. (Конечно, Есть контекстах, например, экран мобильного устройства, в которых оно может быть правильным выбором или даже ограничение проектирования, что аккордеон поддерживать постоянный размер.)

Очень незначительное большинство (51%) полагает, что аккордеонов должны открыть на кнопку (в отличие от при наведении) и почти столь же значительное меньшинство (45%) говорит, что это зависит. Интересно, что меньше чем на 4% были готовы состояние аккордеонов должны открываться при наведении курсора, как правило.

Письменные замечания по этому вопросу предлагается много хороших пищу для размышлений, таких как:

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

В зависимости от конфигурации каждого аккордеона.

Я положил эти примеры вместе [ несколько , опрокидывание ], поэтому разработчик может реально использовать "наилучшее соответствие" для каждого использования.

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

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

Доступность

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

Вот примеры других представление о доступности с аккордеонов:

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

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

Аккордеоны должны открыть все панели, если JavaScript недоступен (хотя это может привести к "мерцание" для тех, JavaScript).

Это зависит от того, содержание в скрытые панели присутствует в DOM или извлекается при открытии панели. Если он в настоящее время восстановлена, фокус должен быть сделан на недавно открывшийся панели.

Ну, я действительно верю, название должно быть интерактивными, особенно если содержание элемента будут загружены с помощью AJAX (так же, как подход tabview), но реальность такова, что иногда разработчик (должны иметь) / (хотите) управление настроить такое поведение. Вот список примеров , который я создал для реализации аккордеон виджет на основе YUI 2.x, вероятно, это одна из наиболее часто используемых компонентов расширение восходящей YUI.

У нас был случай, когда "ярлык" на аккордеоне ссылаются на полное сообщение в блоге, и поэтому не может быть аккордеон, заблокированы. В таком случае, мы написали икону в источник с JS, чтобы сделать работу. При условии, иконки достаточно крупные и / или поставляется с Accesskey, я не вижу, главная трудность ...

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

Только подумайте, как аккордеон вкладками. Всей площади этикетки панели должны быть интерактивными, но если он содержит другие элементы управления (например, "уволить" или кнопку "Закрыть"), я предлагаю только метки (текст) быть интерактивными, или по крайней мере clikable области только расширить до интерактивных управления (например, для заголовка, содержащую кнопку, площадь сверху, снизу и "после" кнопки должны быть интерактивными).

Освобождение Проект Pattern

Один из выступающих под сомнение искусственных ограничений опроса (поимка на месте преступления, если вы спросите меня):

Я не любил этого опроса. Вопросы не были достаточно гибкими. Как дизайнер / разработчик, я считаю, что все элементы интерфейса должны быть адаптированы к определенным сайтам или веб-приложения. Запрашиваемая черно-белые вопросов не оставляют места для очевидные различия между проектами. Некоторые проекты требуют жестких правил, в то время как то же правило может быть абсолютно неприемлемо для другого приложения. По большей части, я мог ответить на каждый вопрос с "это зависит" результат.

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

Мы опубликовали бета-версию Аккордеон шаблон в шаблон дизайна библиотеки Yahoo!. Если вы хотите, чтобы дать дальнейшие отзывы о модели, в свободной форме способом, пожалуйста, напишите на или посетите связанных форум обсуждения.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!