Elementos del diseño de interfaces
•
6 recomendaciones•3,894 vistas
Este documento resume los principales elementos de diseño de interfaces y formularios. Describe elementos comunes como el texto, pestañas, paginación y menús. Luego se enfoca en los formularios, comparando diferentes formas de relacionar títulos y campos, y recomendando agrupar visualmente secciones, diferenciar acciones primarias de secundarias, y proveer mensajes de ayuda breves. El objetivo es mejorar la experiencia del usuario a través de interfaces claras y fáciles de usar.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Más de Percy Negrete
Más de Percy Negrete (20)
Último
Último (20)
Elementos del diseño de interfaces
- 1. Elementos del diseño de interfaces
- 2. El texto
- 3. Las pestañas No me hagas pensar de Steve Krug 2007
- 4. La paginación Galerías Resultados Filtro alfanumérico Yahoo! design Stencil
- 5. Carruseles Yahoo! design Stencil
- 6. Menús Yahoo! design Stencil
- 7. Elementos de interacción de un Iphone
- 8. Formularios
- 9. Formularios Yahoo! design Stencil
- 10. Formularios Relación entre títulos y campos Títulos sobre los campos Cuando los datos solicitados son habituales Menor tiempo de operación Más espacio vertical Flexibilidad para localización y campos complejos Luke Wroblewski, Best practices for form design
- 11. Formularios Luke Wroblewski, Best practices for form design
- 12. Formularios Relación entre títulos y campos Títulos justificados a la izquierda Cuando los datos solicitados no son habituales Permite barrer los títulos con la vista Menor espacio vertical Cambio en la extensión de títulos puede afectar el diseño Luke Wroblewski, Best practices for form design
- 13. Formularios Luke Wroblewski, Best practices for form design
- 14. Formularios Relación entre títulos y campos Títulos justificados a la derecha Asociación clara entre título y campo, mejorando la estética en su conjunto Requiere menor espacio vertical Más difícil de barrer los títulos con la vista Buen tiempo de operación Luke Wroblewski, Best practices for form design
- 15. Formularios Luke Wroblewski, Best practices for form design
- 16. Formularios Ruido visual Efecto 1 + 1 = 3 Luke Wroblewski, Best practices for form design
- 17. Formularios Ruido visual Secciones agrupadas visualmente Desplegable Luke Wroblewski, Best practices for form design
- 18. Formularios Ruido visual Secciones agrupadas visualmente Pestañas Luke Wroblewski, Best practices for form design
- 19. Formularios Ruido visual Secciones agrupadas visualmente Campos deshabilitados Luke Wroblewski, Best practices for form design
- 20. Formularios Acciones diferenciadas Acción primaria vs. Acción secundaria Guardar , Registrar y Enviar son acciones primarias Cancelar, Salir y Volver son acciones secundarias: rara vez necesarias Distinguir visualmente las acciones primarias de las secundarias Luke Wroblewski, Best practices for form design
- 21. Formularios Acciones diferenciadas Acción primaria vs. Acción secundaria Luke Wroblewski, Best practices for form design
- 22. Formularios Mensajes de ayuda Tipo1 Tipo3 Tipo2 Luke Wroblewski, Best practices for form design
- 23. Formularios Fácil trayectoria visual Mejora la experiencia usuaria Luke Wroblewski, Best practices for form design
- 24. Concejos útiles en la elaboración de Formularios Redacte siempre las opciones de forma afirmativa. Ej. “Deseo recibir el boletín" en vez de "No deseo recibir el boletín". Las instrucciones o mensajes de ayuda deben ser breves y comprensibles. Organice los campos en grupos lógicos Distinga visualmente los campos deshabilitados poniéndolos en gris claro. Homogenice los anchos de los campos de texto. Si se utilizan combos seleccione siempre una opción por defecto (la mas usada). Indique los campos obligatorios cuando sean menos que los opcionales. Indique los campos opcionales cuando sean menos que los obligatorios. Destaqué los campos que han dado error. Compruebe que el tabulador (tecla Tab) permite acceder a todos los campos en el mismo orden que el visual.
- 25. El usuario conoce los elementos de interacción estándar y sabe como usarlos. No es adecuado hacerle aprender a usar elementos propios.
- 26. Esta presentación tiene una licencia Creative Commons de: Atribución No comercial Compartir igual Percy Negrete @percynegrete percy.negrete@pucp.edu.pe