Hola Natalia! Creo que faltan detalles para poder darte una opinión fundada, pero ahí van unas cuantas ideas que me vienen a la cabeza:
Tal y como se ven en tu mock, las flechas hacia arriba para colapsar me resultan confusas. Creo que una posible mejora sería mover la flecha junto con el contenido al expandirlo. Otra opcion que puedes explorar es utilizar símbolos '+' y '-' (zippies) que representan mejor la acción a realizar: expandir / colpasar. (Las flechas indican movimiento) Como referencia, en las interfaces de Google se ha usado tradicionalmente '+' y '-' (como en gmail o Google calendar, por ejemplo), sin embargo en la versión actual del panel de filtros en Google search se utilizan flechas ariba y abajo (observa cómo aquí si mueven las flechas hacia abajo al expandir el contenido). En la librería de patrones de diseño de Yahoo tienen un patrón de acordeón (http://developer.yahoo.com/ypatterns/navigation/accordion.html) en el que utilizan simbolos '+' y '-' para ampliar información. Si bien en el menú de acordeón jerárquico que muestran a la derecha en esa misma página (layout, navigation,... social) utilizan flechas hacia la derecha y hacia abajo En Mac OS se utilizan los llamados 'Disclosure triangles' (http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGControls/XHIGControls.html#//apple_ref/doc/uid/TP30000359-TPXREF141) que son muy comunes en interfaces para mac y se utilizan tanto para mostrar jerarquías como para ampliar detalles sobre un concepto. En resumen, lo importante es utilizar el patrón adecuadamente: no es lo mismo utilizar botones + / - en una UI muy cargada de elementos donde la finalidad es permitir ganar espacio o personalizar la UI, que utilizar triangulos para indicar jerarquia / navegacion por un arbol, etc. Algunas cuestiones que yo consideraría antes de meterme al detalle de que icono usar o dónde colocarlo: - Cual es el objetivo de ocultar parte del contenido? * Si quieres dar detalles sobre un concepto, o ampliar un tema, apostaría por símbolos + / - . (a tener en cuenta que si por ejemplo quieres dar detalles sobre un concepto, un tooltip seria mejor solución?) * Es un menú jerárquico de navegación? Cuantos niveles quieres mostrar? Para menús o navegaciones por jerarquías prefiero las flechas indicando estado. (Actúan además como bullet points). - Consideraciones técnicas y/o de plataforma: * Es una aplicación web? Si la latencia es clave, quizás debas apostar por soluciones que no requieran efectos de transiciones o utilizar símbolos unicode que te ahorren carga de imágenes, etc. * Es una aplicación para Windows? Mac? En este caso seguir las guías puede ser más relevante si existe un estandar establecido (caso de Mac) Bueno, espero que te sea de ayuda! Saludos Jose 2010/11/29 Natalia Vivas <[email protected]>: > Hola a todos! > > Me encuentro en una discusión en mi oficina sobre el diseño de los controles > de expandir y colapsar en una acordeón de información, pese a lo que piensen > de los acordeones, la pregunta es: ¿La flechas en una acordeón deberían > indicar la acción o el estado? > > En este dibujo lo explico mejor: http://bit.ly/flechas > > Desde mi punto de vista las flechas deberían indicar la acción a realizar, > si están hacia abajo indica que al hacer click sobre la flecha el contenido > va a expanderse y si la flecha está hacia arriba el contenido se contraerá. > > Los ingenieros y los de UI dicen: que no, que "se ve muy raro".... que en > Mac y Fireworks y en algunos sitios web cuando algo está expandido la flecha > es hacia abajo y cuando no hacia el lado izquierdo... > > ¿Saben si existe un estándar para expandir y colapsar?¿Hay alguna > convención? > > Mi decisión fue reemplazar las flechas por un texto "expand" y "collapse" ;) > > ¿Qué piensan ustedes? > > > Saludos! > > Natalia Vivas Velasco > www.usarte.org > Bogotá, Colombia > _______________________________________________ > altas, bajas y modificaciones: > http://www.cadius.org/lista/opciones.html > _______________________________________________ altas, bajas y modificaciones: http://www.cadius.org/lista/opciones.html
