Elementos del diseño de interfaces

3,466 views

Published on

El usuario conoce los elementos de interacción estándar y sabe cómo usarlos. No es adecuado hacerle aprender a usar elementos propios. Aquí mostramos el uso adecuado de estos elementos de interacción y su aporte a una mejor experiencia de uso.

En esta presentación podrá encontrar:

- El texto.
- Pestañas o tabs.
- Paginación.
- Carruseles.
- Menús.
- Elementos de interacción en táctiles
- Usabilidad para formularios
- Acción primaria y secundaria.
- Mensajes de ayuda
- Consejos útiles en la elaboración de formularios

Fuente: www.blog.pucp.edu.pe/ux

Published in: Education

Elementos del diseño de interfaces

  1. 1. Elementos del diseño deinterfaces
  2. 2. El texto
  3. 3. Las pestañas No me hagas pensar de Steve Krug 2007
  4. 4. La paginaciónGaleríasResultadosFiltro alfanumérico Yahoo! design Stencil
  5. 5. Carruseles Yahoo! design Stencil
  6. 6. Menús Yahoo! design Stencil
  7. 7. Elementos de interacción de un Iphone
  8. 8. Formularios
  9. 9. Formularios Yahoo! design Stencil
  10. 10. FormulariosRelación entre títulos y camposTí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. 11. FormulariosLuke Wroblewski, Best practices for form design
  12. 12. FormulariosRelación entre títulos y camposTí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. 13. FormulariosLuke Wroblewski, Best practices for form design
  14. 14. FormulariosRelación entre títulos y camposTí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. 15. FormulariosLuke Wroblewski, Best practices for form design
  16. 16. FormulariosRuido visualEfecto 1 + 1 = 3 Luke Wroblewski, Best practices for form design
  17. 17. FormulariosRuido visualSecciones agrupadas visualmente Desplegable Luke Wroblewski, Best practices for form design
  18. 18. FormulariosRuido visualSecciones agrupadas visualmente Pestañas Luke Wroblewski, Best practices for form design
  19. 19. FormulariosRuido visualSecciones agrupadas visualmente Campos deshabilitados Luke Wroblewski, Best practices for form design
  20. 20. FormulariosAcciones diferenciadasAcción primaria vs. Acción secundariaGuardar , Registrar y Enviar son acciones primariasCancelar, Salir y Volver son acciones secundarias: rara vez necesariasDistinguir visualmente las acciones primarias de las secundarias Luke Wroblewski, Best practices for form design
  21. 21. FormulariosAcciones diferenciadasAcción primaria vs. Acción secundaria Luke Wroblewski, Best practices for form design
  22. 22. FormulariosMensajes de ayuda Tipo1 Tipo3 Tipo2 Luke Wroblewski, Best practices for form design
  23. 23. FormulariosFácil trayectoria visual Mejora la experiencia usuaria Luke Wroblewski, Best practices for form design
  24. 24. Concejos útiles en la elaboración de FormulariosRedacte 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ógicosDistinga 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 mismoorden que el visual.
  25. 25. El usuario conoce loselementos de interacciónestándar y sabe comousarlos. No es adecuadohacerle aprender a usarelementos propios.
  26. 26. Esta presentación tiene una licencia Creative Commons de: Atribución No comercial Compartir igual Percy Negrete @percynegretepercy.negrete@pucp.edu.pe

×