Experiencias de un programador curioso del SEO
Usabilidad
Articulos sobre diseño de interficie de usuario usables.
Usabilidad: prevención y recuperación de errores
26 dic
Prevención y recuperación de errores , un tema extenso que intentare sintetizar de forma amena y como siempre en formato “resumen”.
Los errores son inevitables
Los errores ocurren por muy bien que este diseñado un sitio web, debemos tener claro que además los usuarios siempre cometerán errores , ya sea por lapsus accidentales o por no comprender la funcionalidad de la aplicación. Debemos pues seguir dos estrategias claras :
- Intentar prevenirlos y minizarlos.
- Corregir los errores y recuperarse de ellos.
Prevención y minificación
A nivel general podemos seguir estos consejos para preveenir y minificar los errores:
- Ofrecer una organización clara de la estructura del sitio y de
la página. - Mantener la consistencia en el sitio.
- Distinguir claramente enlaces (páginas visitadas /no
visitadas). - Escribir etiquetas descriptivas.
- Utilizar una lenguaje claro para nuestra audiencia.
- Utilizar botones intuitivos.
- Descripciones e instrucciones precisas.
- Seguir convenciones. Ej: Asterisco en los campos obligatorios.
- Ofrecer feedback de lo que está pasando.
- Ofrecer una salida clara:
- Enlace a página de inicio
- Funcionamiento correcto del botón “Atrás”.
Los formularios suelen ser el mayor input de errores , es por ello que debemos tratarlos de forma especial. A continuación os enumero unas cuantas tácticas a seguir:
Tácticas de prevención aplicadas a formularios
- Indicar campos obligatorios , para ello podemos utilizar un asterisco en los campos obligatorios o utilizar alguna de estas alternativas:
- Situar el literal “opcional” junto a los campos no obligatorios.
- Color destacado junto al control.
- Utilizar las negritas en las etiquetas de los campos obligatorios.
- Ofrecer ayuda, pistas y modelos.
Ejemplo de ayuda de introducción
- Ajustar el tamaño visual de las cajas de los formularios a las respuestas esperadas,como os comente en el articulo Usabilidad y diseño de formularios.
- Desactivación de botones de acción hasta que el usuario no haya cumplimentado los campos necesarios.
- Desactivación del botón de acción cuando el usuario haya hecho click en él para evitar la duplicidad de envio y los engorrosos registros duplicados mostrando la acción que se esta realizando (FeedBack).
Desactivar al enviar , mostrando que acción se esta realizando.
.
Recuperación de errores
Hemos intentando preveenir los errores , pero como ya he comentado esta tarea utopica , nos encontramos con que se ha producido un error. ¿Como debemos afrontarlo? En primer lugar nos vamos a centrar en como comunicamos al usuario que se ha producido un error.
Mensaje de error
Un mensaje de error debe:
- Comunicar que se ha producido un error.
- Informar de qué error se trata.
- Indicar dónde se ha producido.
- Proponer soluciones a los usuarios para resolver el problema.
- Integrar el mensaje de error en la página , pero que a su vez se muestre de forma clara.
Ejemplo de un mal mensaje de error
Buena práctica en mensaje de errores
Mensajes de error del servidor
No hemos de olvidar que una página web no deja de ser una aplicación y esta puede devolver errores del lado del servidor. Debemos tratar estos errores y no dejar que el control de errores de la aplicación o servidor de páginas web se encarge de ellos , devolviendo mensajes de error incomprensibles para el usuario. Al igual que con los errores de usuario debemos seguir unas “buenas prácticas”:
- Indicar claramente que se ha producido un error.
- Describir el problema de forma precisa.
- Proponer alternativas o soluciones a los usuarios para resolver el problema.
- Utilizar el lenguaje de los usuarios: no utilizar términos técnicos, códigos oscuros, estilo administrativo o interno de la entidad..
Ejemplo de mensaje incomprensible para el usuario
Buena práctica de mensaje de error del servidor
Beneficios de la usabilidad
26 nov
Cuando hablamos de los beneficios de la usabilidad debemos tener en cuenta que estos beneficies repercuten tanto en el usuario como en la empresa. Veamos cuales son estos beneficios:
Ventajas de la usabilidad de cara al usuario
- Menos tiempo requerido para
aprender a manejarse por el sistema. - Mayor rapidez en la ejecución de las
tareas. - Experiencia de uso más satisfactoria.
- Más posibilidades de conseguir los
objetivos marcados, es decir, mayor
productividad.
Ventajas de la usabilidad de cara a la empresa
- Mayor rapidez en el diseño y producción (ayuda a determinar la
buena dirección del diseño e identificar los problemas). - Reducción del coste de trabajos de rediseño posterior, centrándose en
los usuarios durante las fases iniciales de desarrollo. - Aumento de la tasa de conversión,en el caso de los sitios de ecommerce,
con el consiguienteaumento de las ventas. - Aumento de la satisfacción de los
usuarios
Disminución de costes en la atención
al cliente/ayuda. - Ventaja competitiva apoyándose en la calidad, mayor número de
retención de usuarios y lealtad de clientes. - Refuerzo de imagen de marca.
Uno de los pilares de la usabilidad es el Diseño centrado en el usuario, el DCU es un enfoque metodológico de diseño que sitúa al usuario al que se dirige el producto dentro del proceso de desarrollo, incorporando su participación durante la toma de requisitos, el diseño, la evaluación y la construcción de la interficie de usuario.
Modelo DCU: iterativo dentro de cada fase
Ventajas del DCU
- Reduce los costes de uso.
- Incrementa la productividad del desarrollo.
- Aumenta las ventas y los ingresos.
- Reduce los tiempos de desarrollo y los costes de producción.
- Reduce el coste de soporte y de mantenimiento.
- Reduce el coste de formación y de documentación.
- Aumenta la eficiencia y productividad de los usuarios.
- Atrae a más usuarios y amplía la potencial audiencia, al reducir la “intimidación”.
- Aumenta la satisfacción de los usuarios y los ratios de retención.
- Incrementa la facilidad de uso y de aprendizaje.
- Incrementa la confianza en el producto.
- Incrementa la tasa de éxito y reduce el error en el usuario.
Usabilidad y diseño de formularios
21 nov
Hola en este articulo os hablare de usabilidad y diseño de formularios. Cuando diseñamos un formulario debemos partir de la premisa que el usuario detesta rellenar formularios y que debemos facilitar en la medida de lo posible su compresión , introducción y limitar los posibles errores con el objetivo de obtener:
- Menor número de abandonos.
- Mayor número de registros obtenidos
- Calidad de los registros obtenidos.
Para conseguir esto debemos seguir una serie de normas:
- Una presentación visual clara.
- Un etiquetado descriptivo e intuitivo.
- Eligir los controles adecuados para cada tipo de información solicitada
- Mostrar al usuario de forma clara las acciones que va a relizar.
Presentación visual clara
Debemos crear el formulario con una presentación que inspire al usuario facilidad. Para ello debemos diseñar un formulario simple,limpio e ordenado.Con ello conseguiremos un formulario que:
- Facilita su lectura
- Dirige la atención a los aspectos esenciales
- Aumenta la efectividad, ya que favorece que cumplan sus objetivos.
- Mejora la eficacia al reducir el esfuerzo y los errores
Técnicas a seguir para lograr un formulario claro, ordernado y simple
- Reducir el número de elementos de la página a los necesarios
- Eliminar repeticiones innecesarias
- Minimizar el uso de cajas, bordes y líneas.
- Aumentar los espacios blancos, para favorecer el descanso de los ojos y facilitar la visualización.
- Reducir elementos de distracción
- Limitar las instrucciones al mínimo necesario.
Ejemplo de un formulario claro
Etiquetado descriptivo e intuitivo
Un correcto etiquetado nos permitira:
- Conseguir registros con la información adecuada.
- Menor número de errores y por lo tanto mejor número de abandonos.
Técnicas a seguir para lograr un correcto etiquetado
- Nombres de etiquetas decriptivas.
- Aportar información acerca del contenido.
- Mostrar que elementos son obligatorios.
Eligir los controles adecuados
A la hora de elegir el control más adecuado debemos tener en cuenta:
- ¿Es más natural para los usuarios teclear la respuesta
que seleccionarla? - ¿Es fácil escribir mal las respuestas?
- ¿Necesita el usuario ver antes las opciones para
entender claramente la pregunta? - ¿Cuántas opciones hay?
- ¿Puede el usuario seleccionar más de una opción?
- ¿Están las opciones visualmente destacadas?
- Permitir introducir datos en el formato en que están acostumbrados
Una vez elegido el control debemos seguir unas sencillas normas:
- Ajustar el tamaño del campo de texto al dato esperado.
- Ofrecer pistas, modelos o ejemplos en las preguntas
Ejemplo de formulario con controles usables
Acciones claras
A llegado la hora de la verdad , nuestro usuario ha rellenado todo el formulario ¿y ahora que?; eso mismo se esta preguntando nuestro usuario. Para resolver esta pregunta y conseguir mayor número de registros debemos:
- Mostrar al usuario en que punto del proceso se encuentra
- Mostrar claramente que tipo de acción se va a efectuar en el botón de envio, no vale un OK
Para lograr esto podemos usar las siguientes técnicas:
- Diferencia la acción principal de las secundarias
- Migas de pan que muestren al usuario en que paso se encuentra.
- Bloqueo del boton de envio despues de ser pulsado con texto descriptivo . Ej: “Enviando información…”
Ejemplo de buena práctica
Espero que este articulo os haya sido util si estais interesados en este tema os dejo un par de enlaces muy interesante de la gente de usolab acerca del diseño de formulario usables:
