Yahoo! interfaz de usuario de blog (YUIBlog)

Los resultados del estudio de patrones de Acordeón

Hace unos meses que hemos compartido nuestras ideas actuales sobre el componente de navegación "acordeón" , y pidió a la comunidad de desarrolladores y diseñadores web que leen este blog para realizar una encuesta para ayudarnos a determinar por defecto, las prácticas actuales, y otras directrices para incorporar en un Acordeón de patrones y aportaciones a un componente Accordion YUI.

He tenido algún tiempo para revisar y estudiar los resultados y yo quería compartir con la comunidad como se escribe una versión "beta" del patrón y prepárate para compartir, así que sin más vueltas, aquí están los resultados (tenga en cuenta que esta encuesta no debe considerarse estrictamente científico).

Que respondieron

Los encuestados se identificaron las siguientes maneras:

• Diseñador de 21,4%
• Desarrollador del 32,1%
• Híbrido (diseñador y programador) 42,3%
• Ninguna de las anteriores del 4,2%

Distinciones terminología

Una mayoría abrumadora en todos los encuestados coincidieron en que

• Menú acordeón acordeón y significan lo mismo (73%)
• Acordeones y Controles de árbol son dos cosas diferentes (89%)

Muchos comentaristas se describe la diferencia entre los acordeones y los árboles a lo largo de estas líneas: "control de árbol en general, implica una profundidad de jerarquía que generalmente no se presentan con un acordeón".

Una mayoría más pequeños, dijo que los grupos de acordeón y plegables se refieren a lo mismo (60%).

Estas mayorías fueron constantes en los papeles.

Presentación de Acordeones

Una gran mayoría (68%), dijo que el acordeón se pueden colocar tanto horizontal como verticalmente (y, de hecho, el patrón está bien documentado en la web). Personas sugirieron que las etiquetas de un acordeón horizontal debe ser en forma vertical y / o rotación.

Una mayoría aún más amplia (72%) dijo que los acordeones sólo puede tener dos niveles (esto se alinea con la distinción entre acordeones y los árboles):

Una ligera mayoría (53%) dijo que el acordeón se pueden anidar dentro de otros acordeones. Los comentarios escritos sugirió que la redacción de la pregunta llevó a algunos a responder que es ciertamente posible, pero no necesariamente deseable, hacer sugerencias, tales como, "Si usted adecuadamente las cunetas, esto sería posible, pero por lo general una idea terrible - algo así como el uso también muchas fichas y que se envuelven en varias filas. "

Esta fue una de las preguntas que se describe como los diseñadores y desarrolladores tomaron bandos opuestos. 57% de los desarrolladores y los híbridos de acuerdo en que el acordeón se pueden anidar, mientras que el 64% de los diseñadores dijeron que no puede ser. (Ninguno de los aboves 50/50!)

Si tuviera que adivinar, diría que los desarrolladores (e híbridos), más íntimamente relacionado con la forma en que la razón puede haber sido que expresan más de una "que podría hacerlo ..." punto de vista, mientras que los diseñadores pueden haber sido más de expresar un "... pero no se debe" punto de vista.

¿Cómo debe comportarse Acordeones

Una pequeña mayoría (54%) cree que los acordeones debería permitir más de un panel que se abre a la vez. Ambos comportamientos se pueden encontrar en línea, por lo que nuestra impresión es que este comportamiento puede depender más de las limitaciones del espacio de diseño y el propósito del acordeón que en una regla general de una manera u otra.

Esta pregunta también se dividen a lo largo de las líneas de identidad, pero de una manera ambigua. Híbridos preferido el panel-en-un-tiempo de gobierno de una mayoría pequeña, mientras que los diseñadores y desarrolladores, y ninguno de los aboves de acuerdo en que múltiples paneles están bien de las mayorías, un poco más grande.

La mayoría mucho más grande (73%) cree que un acordeón puede tener un estado completamente cerrada (es decir, que no es necesario que haya siempre un panel abierto). El valor extremo sólo es que el Ninguno de los aboves se rompió el 60% de la posición de que debe haber siempre un panel abierto.

Varios comentaristas sugirieron que se trata de una buena práctica tener un panel abierto por defecto, y de ese panel para ser el primero, el más utilizado recientemente.

Otro gran mayoría (76%) cree que el tamaño total de un acordeón puede cambiar según sea necesario, en lugar de estar limitado a un tamaño uniforme. (Por supuesto, hay contextos, como la pantalla de un dispositivo móvil, en la que puede ser una opción válida, o incluso una restricción de diseño que un acordeón mantener un tamaño constante.)

Una mayoría muy leve (51%) sugiere que el acordeón se abrirá al hacer clic (en comparación con el hover) y una minoría tan grande (45%) dijo que depende. Curiosamente, menos del 4% estaba dispuesto a estado de los acordeones debe abrir en vuelo estacionario como una regla.

Los comentarios por escrito sobre esta cuestión ofrece un montón de buena comida para el pensamiento, tales como:

La apertura de un panel debe requerir una acción explícita. Si un acordeón tiene múltiples paneles, apertura al activar podría ser una experiencia desagradable. Por el contrario, utilizar un texto de ayuda para transmitir datos de resumen de lo que está en el panel, y que el usuario explícitamente "clic" para abrir ese panel.

Depende de la configuración de cada uno de acordeón.

Pongo estos ejemplos juntos [ múltiples , rollover ], por lo que el desarrollador puede utilizar realmente el "mejor ajuste" para cada caso de uso.

Además, debe existir la opción de usar rollover con reglas diferentes: (más abierta) o (los elementos se han de abrir sólo pasar el ratón).

Para usos avanzados, un acordeón debe abrir al activar durante las operaciones de arrastrar y soltar. En cualquier otra circunstancia, no se puede confiar en que el elemento emergente es intencional.

Accesibilidad

Por último, pidió a un pesquero pregunta abierta para cualquier problema de accesibilidad se conoce con acordeones y tiene un montón de grandes respuestas. (Por ejemplo, nuestro problema, la mayoría de la gente de acuerdo en que hacer toda la etiqueta y no sólo hacer clic en el icono de un pequeño es importante.)

He aquí una muestra de comprensión acerca de la accesibilidad con otros acordeones:

Creo que es seguro asumir que la interacción del acordeón es una interacción avanzada. Muchos de los problemas de accesibilidad pueden surgir.

1. El contenido está oculto detrás de los paneles para que la gente no puede encontrar.
2. Dependiendo del tamaño de la zona se puede hacer clic o el gatillo para abrir / cerrar los paneles que podría haber problemas con la destreza manual necesaria.

Acordeones debe abrir todos los paneles si javascript está disponible (aunque eso puede producir un "parpadeo" para las personas con javascript).

Depende de si el contenido de los paneles ocultos se encuentra en el DOM o se recuperan al abrir el panel. Si se recupera, el enfoque tiene que ser colocado en el panel de reciente apertura.

Bueno, yo realmente creo que el título debe ser seleccionable, especialmente si el contenido del elemento se cargará el uso de AJAX (al igual que un enfoque TabView), pero la realidad es que a veces el desarrollador (debería ser) / (quiero) que el control personalizar esa conducta. Aquí está la lista de ejemplos que he creado para una aplicación widget de acordeón sobre la base de YUI 2.x, que es probablemente uno de los componentes más utilizados de la extensión de burbujas YUI.

Hemos tenido un caso en que la "etiqueta" del acordeón era un enlace a un post completo, y por lo tanto no podía ser de acordeón puede hacer clic. En ese caso, escribimos un icono en la fuente con js para hacer el trabajo. Siempre y cuando el icono es lo suficientemente grande y / o viene con una tecla de acceso, no veo una gran dificultad ...

Acordeón controles de servidor con el fin de los lotes de colocación de contenido en menos espacio. Dado que este es un problema visual, que estaría bien para un lector de pantalla para leer, simplemente todo el contenido e ignorar el hecho de que se muestra como un acordeón visual. Es suficiente que el icono que se puede hacer clic para ampliar un panel. No podría ser una opción de configuración para permitir toda la etiqueta para expandir un panel, o puede dejarse en manos de los desarrolladores de aplicación para conectar un receptor en la etiqueta que llama a un público "abierto" o "ampliar" la función de añadir esa funcionalidad.

Basta pensar en un acordeón como un punto de vista con pestañas. El área del panel de toda la etiqueta se debe hacer clic, pero si contiene otros controles (por ejemplo, un "despido" o el botón de "cerrar") que sugieren que sólo la etiqueta (texto) se puede hacer clic, o al menos la zona clikable sólo ampliar hasta el interactivo controles (es decir, un título que contiene un botón, el área de arriba, abajo y "después" en el botón que se puede hacer clic).

Al soltar el patrón Proyecto

Un comentarista cuestionó las limitaciones artificiales de la encuesta (un policía justo, si usted me pregunta):

No me gusta esta encuesta. Las preguntas no eran lo suficientemente flexibles. Como desarrollador de diseño /, creo que todos los elementos de la interfaz deben adaptarse a determinado sitio o aplicación web. Hacer preguntas en blanco y negro no deja espacio para las diferencias obvias entre los proyectos. Algunos proyectos necesitan una regla dura y rápida, mientras que la misma regla podría ser totalmente inadecuado para otro uso. En su mayor parte, de que podía responder a cada pregunta con un "depende" de resultados.

Estar seguro de que el patrón sólo se recomienda cuidado y el código de YUI será flexible y potente. La encuesta no fue diseñada para limitar las opciones de la gente, sino más bien recoger las opiniones y preferencias, por lo que incluso información acerca de no tener duro y rápido normas es útil.

Hemos publicado una versión beta del modelo de acordeón en la Biblioteca Yahoo! patrón de diseño. Si desea dar información sobre el patrón, de manera de forma libre, por favor, pasar por, o visite el relacionado con el foro de discusión.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!