PATRONES DE DISEÑO WEB

Trad. Guillermo Espinosa Ruiz UT Huejotzingo 2010

Contenido

Introducción Formularios Autentificación de usuarios Navegación

Introducción

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

Patrones: formularios 1/7

Aclarar beneficios Explicar los

beneficios de registrarse al sitio.

Explicar los beneficios de usar un formulario.

Patrones: formularios 2/7

Formularios breves Información concisa Dividir formularios

largos en múltiples páginas

Patrones: formularios 3/7

Agrupación lógica Agrupar en bloques

la información que se encuentra relacionada

Patrones: formularios 4/7

Alineación de etiquetas

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.

Patrones: formularios 6/7

Ayuda al ingreso de la información Ejemplos Instrucciones contextuales Limitar (validar) el tamaño

de los campos

Patrones: formularios 7/7

Botones de acción La leyenda debe ser

clara y directa. Borrar, quitar Agregar, nuevo

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

Patrones: autentificación de usuario 2/2

Seguridad Echo sin

caracteres SSL Recuperación de

información Cerrar sesiones

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)

Patrones: navegación 2/4

Navegación secundaria Se debe mostrar la

navegación secundaria que corresponda con la opción primaria elegida

Patrones: navegación 3/4

Caja de herramientas (utility box) Enfatizar los

elementos más usados

Incluir selección de idioma

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

Web Application Design PatternsPawan VoraEd. Morgan Kauffmann

Referencia