Buenas prácticas de usabilidad en el diseño de formularios web
-
Upload
intergraphicdesigns -
Category
Technology
-
view
2.658 -
download
2
Transcript of Buenas prácticas de usabilidad en el diseño de formularios web
Buenas prácticas de usabilidad en diseño de formularios web
• Mantenerlos los más simples y cortos posibles (KISS)
• No hacer que los usuarios tengan que pensar más delo estrictamente necesario
• Hacerlos lo más standard posible
• Hacerle saber a los usuarios qué esperar
Form design
• Si son muy grandes, cortarlos en pedacitos
• Mostrar el progreso del usuario
• Hacerlos fáciles de scannear con el ojo
• Utilizar “progressive diclosure”
Form layout
• Usar los términos y nombres que usa su usuario meta
• Nombres directos, muy claros
• Usar los labels al lado o arriba del input
• Distinguir los campos requeridos de los opcionales
Labels
• Usar los inputs apropiados
• Ordenarlos de una forma lógica
• Usar defaults inteligentes
• Agruparlos “usar fieldsets”
• Usar “tab indexes”
Inputs
• Usar tooltips, en los lugares y con los textos adecuados
Ayuda
• Validar todos los campos de una vez y hacer highlight de todos los errores y desplegarlos en el lugar adecuado
• Usar mensajes de error claros
• Usar real-time validation
Manejo de errores
• El nombre del botón es importantísimo
• Páginas de confirmación exitosas, claras, inteligentes a nivel comercial/objetivos.
• No usar botón “Reset” ni “Cancel” al menos que sea de vida o muerte
Acciones
• http://www.tripwiremagazine.com/2011/06/jquery-forms-plugins.html
• http://www.sitepoint.com/steps-useable-forms/
• http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/
• http://www.reynoldsftw.com/2009/01/top-10-jquery-plugins-for-form-usability/
• http://www.alistapart.com/articles/sensibleforms
• http://www.uxforthemasses.com/forms-usability/
• http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/
• http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
Links para profundizar en el tema
Diseñar Boceto para comprar un anillo de compromiso...
Diamante
- Por forma: Circulares, Ovalo, Corazón, Rectangular, etc...
- Por precio
- Por carat (peso)
- Por corte
- Por color... DEF, GHIJ
- Por claridad, FL, IF, VVS1, VVS2, VS1, VS2, SI1, SI2, I1, I2
Anillo
- Por material: Platinum, 18K oro blanco, 18K oro amarillo, 14k blanco, 14k amarillo
- Diamante embedido o diamante salido
- Talla: 4, 4.25, 4.5, 4.75, 5, 5.25.... 10
Ejercicio
Ejercicio