patrones de diseÑo web trad. guillermo espinosa ruiz ut huejotzingo 2010
TRANSCRIPT
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