Usabilidad en Formularios

Leyendo en olgacarreras me encuentro con 60 directrices al momento de elaborar un formulario usables:

Generales

1. Pida sólo la información absolutamente necesaria.
2. Infiera información a partir de otra disponible.
Por ejemplo, la provincia se puede inferir del C.P.
3. Reutilice los campos cuando sea posible.
Por ejemplo, el email puede servirnos en ocasiones como nombre de usuario.
4. No pida la información dos veces.
Por ejemplo, si el usuario ha rellenado la dirección de facturación, no le obligue a volver a rellenar la dirección de envío si no es necesario, pregúntele si quiere que sea la misma.

Textos

5. Proporcione un título al formulario que exprese claramente su función.
6. Si necesita instrucciones, que sean breves y comprensibles.
7. Utilice una nomenclatura clara y familiar, sin tecnicismos ni extranjerismos.
8. Sea consistente en el uso de los términos.
Es decir, use siempre las mismas palabras para los mismos conceptos.
9. No utilice preguntas complejas ni haga pensar al usuario.
10. Redacte siempre las opciones de forma afirmativa.
Por ejemplo, junto a un check escriba “Deseo recibir el boletín" en vez de "No deseo recibir el boletín".

Organización

11. Organice los campos en una sola columna de datos.
12. Organice los campos en grupos lógicos, utilizando para ello la mínima cantidad de elementos visuales (evitando así ruido visual).
13. Agrupe, si es posible, los campos obligatorios al comienzo del formulario.
14. Evite fragmentar la petición de información.
Por ejemplo, no pida por separado el tipo de vía, la calle, el número, etc. si no es estrictamente necesario.
15. Proporcione un diseño ordenado, alineando verticalmente todas las etiquetas y todos los campos entre si.
16. Sitúe las respuestas de los campos radio buttons y check box después de los mismos.
De esta manera se favorece la alineación vertical de todos los controles.
17. Utilice etiquetas estándar para agrupar campos y hacer más manejable la información(OPTGROUP, FIELDSET)
18. Si se utilizan radio buttons o checks box agrupe visualmente de forma clara y unívoca los distintos grupos de opciones.
19. Distinga visualmente los campos deshabilitados siguiendo las normas de facto (poniéndolos en gris claro)

Tipos de campos

20. El tamaño visible de los campos de texto debe corresponderse con la longitud del contenido que ha de introducir el usuario.
21. Homogeneice los anchos de los campos de texto cuando estos sean similares (evitando así ruido visual).
22. Dote a los campos de texto de flexibilidad para que admitan los datos en cualquier formato.
Por ejemplo, un campo para introducir el número teléfono debería admitir paréntesis, guiones, espacios; un campo para introducir importes debería admitir decimales con punto o con coma, etc.
23. Evite el uso de combos.
No las use por ejemplo para seleccionar el país, fecha o profesión a no ser que sea estrictamente necesario, en cuyo caso incluya una opción del tipo “Otros” que pueda englobar casos no recogidos en las opciones proporcionadas.
24. Evite que las combos recarguen la página para rellenar otros campos, pero cuando así sea, asegúrese de que el formulario conserva el mismo estado que tenía antes de recargar la página: con los mismos campos visibles o activos, y con todos los campos rellenos con los mismos datos que antes de la recarga.
25. Si se utilizan combos o radio buttons seleccione siempre una opción por defecto, asegurándose de que sea la más probable.
De lo contrario, el usuario no puede volver al estado inicial del formulario; si es necesario incluya una opción "Ninguna".
26. Si se utiliza un check box para presentar una única opción que no es obligatoria (recibir publicidad, aceptar unas cláusulas) no la marque por defecto.
27. Si se utilizan radio buttons asegúrese de que todas las opciones son claramente excluyentes.
28. Si un radio button tiene más de dos respuestas, colóquelas en vertical, unas debajo de otras alineadas a la izquierda.

Funcionamiento

29. Valore la posibilidad de evitar, mediante JavaScript, que en determinados campos se pueda introducir determinados caracteres.
30. No implemente saltos automáticos del foco del formulario.
Por ejemplo, en los campos de cuenta, no haga que el foco se mueva sólo al siguiente campo cuando se ha rellenado el anterior.
31. Asegúrese de que la tecla "Intro" realiza la acción principal.
32. Evite, mediante JavaScript, que el usuario pueda impacientarse y enviar dos veces el formulario.
33. Al implementar la validación de los formularios (o al limitar el tamaño de los campos) piense si su formulario puede ser utilizado por usuarios de otros países.
Por ejemplo, el C.P. o el teléfono no tienen la misma longitud en unos países que en otros; por ejemplo, en España hay usuarios que no tienen DNI sino tarjeta de residencia.

Ayudas

34. Identifique claramente los campos obligatorios y los opcionales mediante el literal (Obligatorio) u (Opcional), según si se van a marcar los obligatorios o los opcionales, colocando dicho literal detrás de la etiqueta del campo y por tanto antes del campo.
35. Incluir ayudas breves o ejemplos junto a los campos, pero sólo cuando sea realmente necesario para saber cómo ingresar un dato.

Botones

36. No incluya un botón "Reset" (es decir, de Limpiar o Borrar el formulario)
37. En los formularios de un sólo paso evite tener un botón "Cancelar" cuya función sea en realidad volver a la página anterior.
38. Distinga entre las acciones primarias y secundarias (volver, imprimir etc.) de su formulario.
Evite las secundarias, pero si ha de incluirlas distíngalas visualmente de forma inequívoca, destacando visualmente las primarias.
Por ejemplo, poniendo las acciones primarias como botones y las secundarias como enlaces.
39. Coloque los botones o enlaces que realizan las acciones primarias (por ejemplo el botón "Enviar") lo más cerca posible del último campo del formulario. No los separé del formulario mediante, por ejemplo, una línea.
40. Dé un nombre adecuado a los botones del formulario, relacionado con su acción y no de carácter general.
Por ejemplo, use "Buscar" en vez de un genérico "Aceptar".

Errores

41. Cuando se produzca un error al rellenar el formulario proporcione en la parte superior del mismo, y con suficiente contraste, un listado de los errores. Por cada error indique qué campo lo ha provocado, por qué motivo, cómo solucionarlo y un enlace al campo.
42. Destaqué los campos que han dado error pero no se base para ello únicamente en el color.
Acompáñelos de un icono de error que aparezca también en el resumen del comienzo de la página.
43. Cuando se produzca un error, el formulario no debe resetearse, es decir, los campos no erróneos deben seguir manteniendo la información en ellos introducida.
44. Redactar claramente los textos de error mediante términos claros, sencillos y no técnicos.
No utilizar mensajes genéricos del tipo “No se ha podido enviar el formulario”.
45. Evite validar los campos uno a uno, cuando pierden el foco, mostrando inmediatamente un mensaje de error al usuario. A los usuarios les incomoda esta práctica.

Feedback

46. Cuando el usuario envíe el formulario, infórmele del resultado de su acción: indíquele si se ha realizado correctamente, qué datos se han enviado, cómo puede ponerse en contacto con los responsables del sitio si ha habido problemas o para hacer un seguimiento del mismo, o cómo puede modificar los datos enviados.
47. Si el proceso de envío es lento, incluya en la página un mensaje de "enviando datos".

Respuesta

48. Informe a los usuarios de por qué deben rellenar el formulario y cuándo y a través de que medio recibirán una respuesta.
49. Si es un formulario de contacto envíe un email automático confirmado que se ha recibido.
50. Si es un formulario de contacto, asegúrese de que la empresa tenga los mecanismos necesarios para responder de forma rápida y adecuada al mismo.

Legalidad

51. Incluya las cláusulas de protección de datos cuando sea pertinente.

Accesibilidad

52. Asocie explícitamente las etiquetas con sus controles mediante LABEL y su atributo "for".
53. Compruebe que el tabulador permite acceder a todos los campos en el mismo orden que el visual.
54. Mejore la experiencia del usuario mediante JavaScript y AJAX pero asegúrese que el formulario funcione correctamente sin ellos.
55. No establezca un límite de tiempo ajustado para complementar el formulario.

Formularios extensos

56. Si los formularios son muy extensos la solución no son las columnas, sino la división en páginas bien rotuladas que indiquen al usuario en que paso está del proceso (por ejemplo Paso 3 de 4).
57. Si el formulario se presenta en varias páginas hay que seguir el lema 1 tema = 1 página.
58. El usuario debe poder volver a los pasos anteriores.
59. No solicite información externa en medio del proceso mediante la abertura de una ventana nueva del navegador.
60. Evite la utilización de pestañas para crear formularios de varias páginas.


Extraido de: olgacarreras

Sifr - Utiliza la tipografia que quieras en la Web

Sifr es un Script que remplaza un texto por un flash en forma de texto. Esto nos permite utilizar la tipografía que querramos en una web.

La principal característica, es que los buscadores como Google, pueden leer el texto. Esto nos beneficia a la hora de realizar las etiquetas H1, H2 y H3 con tipografias utilizando Sifr.

Funcionamiento:
* Tenemos una página con Css (normal)
* Nos bajamos el archivo comprimido. Ir al sitio de descarga
* Definimos la tipografía
* Editamos el archivo flash que bajamos (solo tipografía), y exportamos en swf.
* Tenemos un archivo de javascript.
* Al momento de cargar la página, el javascript checa si el usuario tiene flash instalado, encuentra los elementos que hemos señalado que queremos reemplazar, e inserta en su lugar el archivo flash, con el contenido de los elementos (respetando las dimensiones del elemento original), y esconde los elementos originales.

No es recomendable utilizar esta herramienta en textos largos, ya que pueden surgir problemas.


Explicación paso a paso: Diseñorama

Web de descarga de Sifr

Falla de usabilidad.

Esto no es usabilidad

Si tienes imágenes en donde se muestra lo que es usabilidad, o en donde falle la usabilidad puedes mandarnos asi las publicamos en el blog:
info@proyecciondigital.com.ar

Tres preguntas para evaluar usabilidad.

En la usabilidad de un sitio web podemos distinguir tres tipos de preguntas para el sitio:

¿El sitio tiene clara la temática y lo expresa a través de los contenidos y la gráfica?

¿El sitio habla sobre la empresa?, ¿Tiene fotografías o algún otro medio para hacerse conocer con el visitante? (Direcciones, teléfonos, etc)

¿Tiene un diseño o colores adecuados según la temática e imagen corporativa?

Estas son tres preguntas que debemos tener presenta para evaluar el sitio web usable.
Obviamente existen más puntos a tener en cuenta. Pero hoy les dejo estas tres.


Usabilidad: Hacer las cosas fáciles para el usuario.

En Proyeccion Digital, nos especializamos en diseño web teniendo en cuenta la usabilidad y accesibilidad web.

Dia de la Usabilidad en Argentina

Primer Día de la Usabilidad en Argentina

El 14 de noviembre se celebra el Día Internacional de la Usabilidad cuyo principal objetivo es "hacer tu vida más fácil".

La Usabilidad es un acercamiento al desarrollo de productos y servicios, incorporando el feedback directo de los usuarios, técnicas y estándares durante el ciclo de desarrollo en orden de reducir costos y crear productos y servicios que cumplan con las necesidades del usuario.

Para especificar o medir la usabilidad es necesario identificar las metas y descomponer la Efectividad, Eficiencia y Satisfacción.

• Eficacia: definida en términos de la exactitud y completitud con que un usuario puede lograr metas específicas en ambientes particulares.
• Eficiencia: referida a los recursos gastados en relación con la precisión y completitud de la meta lograda, es decir recursos de tiempo, financieros y humanos.
• Satisfacción: evalúa el confort o comodidad y la aceptabilidad del trabajo del sistema para sus usuarios y otras personas afectadas por su uso.

Objetivo

Actualmente, la tecnología juega un papel preponderante en todos los aspectos de la vida. El enfoque de desarrollo de productos y servicios ha cambiado, y también el concepto de usuario.

Refiriéndonos específicamente a las tecnologías de la información, millones de usuarios acceden actualmente a información a través de sistemas y aplicaciones de todo tipo y características con diferentes objetivos y niveles de conocimiento.

Aquí, la Usabilidad como un método de desarrollo de aplicaciones, sistemas y productos orientados al usuario, cumpliendo un rol más importante que la propia arquitectura de información o la gestión de la misma. Esto permite un mayor grado de integración del ser humano con la aplicación, así como en el proceso de diseño e implementación de la misma.

Fuente: http://www.diausabilidad.com.ar/

Eso es Usabilidad?

Eso es usabilidad!

Pensando en los usuarios!

Problemas de usabilidad?

Buscando en internet, sobre problemas de usabilidad, me encontré con imágenes que nos muestran que estos problemas no solo ocurren en la famosa INTERNET sino también en productos cotidianos.

Este es un claro ejemplo de no haber pensado en la usabilidad.

(Como Diría el director de la empresa, "Tano",
Usabilidad es en pocas palabras, hacer las cosas fácil para el
usuario)...

Si tienes imagenes y quieres publicarlas, por favor escribenos a: info@proyecciondigital.com.ar