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