1 PATRONES DE DISEÑO WEB Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010

2 Contenido  Introducción Introducción  Formularios Formularios  Autentificación de usuarios Autentificación de usuarios  Navegación Navegación

3 Introducción  Diseño de soluciones probadas  Proceso de diseño mejorado  Interfaces consistentes y reusabilidad  Lenguaje compartido y común

4 Patrones: formularios 1/7  Aclarar beneficios  Explicar los beneficios de registrarse al sitio.  Explicar los beneficios de usar un formulario.

5 Patrones: formularios 2/7  Formularios breves  Información concisa  Dividir formularios largos en múltiples páginas

6 Patrones: formularios 3/7  Agrupación lógica  Agrupar en bloques la información que se encuentra relacionada

7 Patrones: formularios 4/7  Alineación de etiquetas

8 Patrones: formularios 5/7  Indicaciones de información obligatoria  Mostrar el indicador de información obligatoria  El indicador debe ser consistente en todos los formularios  No es necesario indicar los campos opcionales  Ofrecer instrucciones para la información sensible.

9 Patrones: formularios 6/7  Ayuda al ingreso de la información  Ejemplos  Instrucciones contextuales  Limitar (validar) el tamaño de los campos

10 Patrones: formularios 7/7  Botones de acción  La leyenda debe ser clara y directa.  Borrar, quitar  Agregar, nuevo

11 Patrones: autentificación de usuario 1/2  Registro  Considerar correo electrónico como username  Utilizar Captcha para asegurar registro por humanos  Enfoque registro lazy  Considerar eliminar registro

12 Patrones: autentificación de usuario 2/2  Seguridad  Echo sin caracteres  SSL  Recuperación de información  Cerrar sesiones

13 Patrones: navegación 1/4  Navegación primaria  Destacar el menú de navegación  Indicar que en qué sección nos encontramos actualmente  Eliminar la navegación en elementos auto contenidos (wizard, mini sitio)

14 Patrones: navegación 2/4  Navegación secundaria  Se debe mostrar la navegación secundaria que corresponda con la opción primaria elegida

15 Patrones: navegación 3/4  Caja de herramientas (utility box)  Enfatizar los elementos más usados  Incluir selección de idioma

16 Patrones: navegación 4/4  Breadcrumbs  Separa los elementos con “>”  Se deben ubicar debajo del encabezado  Cada elemento debe estar enlazado  Tienen un nivel visual bajo

17 Web Application Design Patterns Pawan Vora Ed. Morgan Kauffmann Referencia