¡Errores! ¿Malas decisiones o malos diseños?

Seamos realistas, los errores pasan todo el tiempo. La mayoría de los errores son ocasionados por lo que llamamos “errores humanos” y parecen inevitables, pero voy hacer que el argumento de este artículo presente buenas practicas de diseño que puedan ayudarlos a evitar he incluso eliminar errores que pasan en la web. En cuanto al resto de los errores del mundo, los dejare así hasta que alguien más los resuelva.

Una rápida introducción: Este artículo es uno más de nuestra serie de artículos; “Teoría del Diseño”. Voy a comenzar esto hablando de los principios de diseño en lo abstracto, y luego progresivamente avanzare hacia algunos trabajos manuales de cómo estas ideas pueden aplicarse al diseño web.

Las Causas de los Errores

Ya sea que se derrame un cartón de leche, hacer un giro equivocado, o llenar incorrectamente un formulario web, todos los errores se pueden remontar de nuevo a la psicología humana. Varios estudios psicológicos han sugerido acerca de que los errores pueden reducirse en dos campos:

• Los resbalones, o errores de ejecución.
• Los errores, o errores de intención.

Hablaremos de ambos dentro de poco, y en una forma un poquito más profunda, pero consideremos la siguiente declaración: ¿A qué se debe la mayoría de los errores en el desarrollo web o en el diseño? El origen actual de la mayoría de los errores no es la complejidad, ni dificultad, ni la incapacidad de los usuarios… El origen actual de la mayoría de los errores es “malos diseños”. Como lo puso uno de mis autores de diseño favorito:

“La complejidad no es el problema, SON LOS MALOS DISEÑOS. Los malos diseños complican las cosas innecesariamente y nos confunden. Un buen diseño puede domar la complejidad” - Donald A. Norman

Por lógica, arreglar o evitar errores no es una cuestión de simplificar nuestro diseño o trabajo, en realidad es hacerlos mejor. ¡SUENA FÁCIL! Seguro, pero echemos un vistazo tan solamente a lo que significa “mejor” en términos de diseño, por supuesto.

Evitar errores es fácil, No simple.

Tanto se ha dicho sobre la “simplicidad”, siendo el santo grial del diseño en la última década. Libros enteros han sido escritos sobre los méritos de la simplicidad y cómo “todo lo que necesitamos hacer para arreglar los problemas del mundo es simplificarlos”. Sí me lo preguntas; es “hablar de basura”, y completamente. Pero aquí hay algunos ejemplos de lo que podrías escuchar cerca del enfriador de agua o de la cafetería:

“El iPod revoluciono la industria de los reproductores de música portátil sencillamente porque simplifico la interface”.

“Amazon.com se convirtió en la tienda en línea más dominante al hacer completamente sencillo comprar productos en línea”.

“Facebook venció a MySpace porque fue de uso sencillo”.

Lo más tonto de estas declaraciones es que ninguno realmente piensa sobre lo que está diciendo… Quiero decir, y hablando seriamente para empezar; la interface de iPod no es del todo sencilla sobre todo si tuvieras que describírselo a tu abuela de 85 años de edad o ¿no es así? Por otro lado, Amazon.com no hizo nada nuevo para simplificar las experiencias de compra en línea y Facebook no venció a MySpace porque es más fácil de usar, fue ¡porque el diseño de MySpace apesta!

En ninguno de estos ejemplos la “sencillez” juega un rol importante de por qué la compañía o producto fue exitosa. Entonces ¿quién es el que juega un rol importante? ¡El diseño lo hizo! ¡Completamente seguro! La sencillez siempre es una estrategia bienvenida si estas tratando con un problema de diseño o el diseño es demasiado complicado, pero necesitamos dejar de hablar al respecto como si fuera la respuesta a todos nuestros problemas.

Las personas giran alrededor de la palabra “sencillez” muy a menudo hoy en día. Lo que realmente quieren decir cuando dicen algo como “tan sencillo” es: “esta tan bien diseñado”.

¡Entiendes lo que digo! El primer paso para comprender como arreglar y evitar los errores en la web es tirar la muleta de la sencillez al piso. La sencillez no es una varita mágica, es una sierra para metales y hay muchas más herramientas que vamos a necesitar usar para hacer frente a nuestros problemas de diseño. De acuerdo, empecemos de una vez con la parte práctica de este artículo…

Error Tipo 1: Resbalones

La primera parada en el tren de lo errores es; ¿resbalones? Así es, los resbalones pueden describirse cómo “errores de ejecución”. ¿Qué quiero decir con “errores de ejecución”? Bueno “QUÉ NO SON ERRORES INTENCIONALES”, pero ocurren todo el tiempo porque los humanos somos, la mayor parte del tiempo, torpes. Para que lo aprecies mejor, aquí hay tan solo algunos ejemplos de “resbalones” en términos de diseño web:

• Errores ortográficos en su dirección de correo electrónico, nombre y número telefónico.
• Seleccionar la casilla equivocada.
• Olvidarse completamente de llenar un formulario web.
• Olvidarse completamente de hacer click sobre el botón “Guardar”, antes de cerrar el documento.

¿Cómo podemos evitar “los Resbalones”?

Como diseñador web, hacer frente a los resbalones es difícil debido a que ocurren como resultado de los procesos inconscientes de errores repentinos de la mente humana. NO podrás evitar que alguien resbale el 100% de las veces, pero igual que en una tienda de comestibles puedes enviar una señal de “CUIDADO, Piso Húmedo”, cuando empiezan por convertirse en un desastre, sin embargo, hay cosas que puedes hacer para que los usuarios estén más conscientes de sus acciones

Usando el mismo ejemplo de los “resbalones” que aparecen arriba, aquí hay unas soluciones simples:

• Errores ortográficos en su dirección de correo electrónico. : Validar los formularios vitales en tiempo real para comprobar si hay errores.
• Seleccionar la casilla equivocada. Solución: Limitar, razonablemente, el numero de opciones, y mostrarle a los usuarios una lista clara de sus opciones antes de hacer el envió final del formulario.
• Olvidarse completamente de llenar el formulario web. Solución: Indique inmediatamente a los usuarios cuando se hayan saltado un campo obligatorio, ¿cómo? ¡RESALTÁNDOLO!.
• • Olvidarse completamente de presionar el botón “Guardar”, antes de cerrar el documento. Solución: Guardar automáticamente el documento o el campo para ellos (los usuarios) o pedirles que guarden antes de que a ellos se les haya permitido cerrar la página o la ventana.

Como puedes ver desde estos ejemplos, la sencillez es solamente una herramienta que puede ser usada para ayudarte a resolver algunos errores. En la mayoría de estos casos, no estamos simplificando el diseño, actualmente estamos agregando otro diseño de complejidad mediante la adición de una capa interactiva de “dirección”. Evitar resbalones no significa inventar “una nueva forma de caminar”, significa agregar señales de advertencia y mejores pisos de tracción.

Error tipo 2: Errores

Los “errores” son una “RAZA DIFERENTE DE ERRORES”. Ocurren cuando alguien, intencionalmente, hizo algo malo. Vamos a ver algunos ejemplos de errores tal y cómo ocurren en el diseño web:

• Un usuario intenta romper un sistema de votación ¿cómo? Votando varias veces.
• Alguien introduce un código en formato Javascript dentro de un campo de texto para insertar una función maliciosa.
• Los usuarios accidentalmente clasificaron erróneamente su industria en un sitio de trabajos (Por ejemplo; moster.com).
• Los miembros del sitio están intentando subir muchas imágenes de alta resolución a Facebook.

Antes de seguir, es muy importante destacar que los errores NO son siempre maliciosos, incluso sí son intencionales. Mi propia madre, por ejemplo, podría intentar el último paso de la lista (tratando de subir fotos grandísimas a Facebook), pero no esta cometiendo el error a propósito… a ella tan solamente le falta el conocimiento que es probable que le tome días subir sus fotos con una conexión a internet baja.

Y… ¿Cómo evitar los “Errores”?

Evitar los errores, al igual que los resbalones es fácil de hacer, pero solamente una vez que haz identificado el tipo de error que estas tratando de resolver. Regresemos a nuestros ejemplos originales y veamos de qué manera podemos arreglarlos o solucionarlos:

• Un usuario intenta romper un sistema de votación votando varias veces. Solución: Implementar una función que límite los votos solamente a uno por dirección de IP.
• Alguien introduce un código en formato Javascript dentro de un campo de texto para insertar una función maliciosa. Solución: Hacer el campo de texto en una forma que solamente pueda ser usado para texto simple en el campo de texto.
• Los usuarios accidentalmente clasificaron erróneamente su industria en un sitio de trabajos (Por ejemplo; moster.com). Solución: Enviar a las personas a través de una serie de decisiones para que ellos puedan encontrar la clasificación apropiada que estaban buscando.
• Los miembros del sitio están intentando subir muchas imágenes de alta resolución a Facebook. Solución: Tener la función para comprobar el tamaño de subida de los archivos antes de que empiecen a subir los archivos, y dejarles saber a los usuarios el tiempo estimado que tardarán en subir las fotos.

Cómo al principio, las soluciones son relativamente fáciles en términos de diseño. En la mayoría de los casos, un simple mensaje de texto o rediseño del flujo de trabajo será suficiente ya sea para informar a los usuarios de los errores potenciales, o de evitarlos todos juntos. De nuevo, la solución aquí NO se trata de reducir la “simplicidad”, significa añadir otra capa de diseño que inteligentemente guíe a las personas en torno a las acciones propensas a errar.

La Tercer Capa: Soluciones prácticas para evitar errores.

Los siguientes pares de consejos, nada más son algunos ejemplos prácticos de prácticas de diseño que deberán ayudarte a eliminar la ocurrencia de errores. Y no son tan sólo para arreglar los formularios web… El principio fundamental es qué…

“Para hacer frente a situaciones dónde los errores son frecuentes y los usuarios ya están frustrados, el primer paso es considerar añadir una “tercer capa” a su diseño”

Pero… ¿Qué significa todo eso de lo que estamos hablando sobre una “tercera capa”? Primero, echemos un vistazo de cómo la mayoría de los diseñadores plantean el diseño web:

En éste modelo, la capa Funcionalidad Principal es lo qué podrías llamar la estructura del sitio. Incluye el diseño general así como el contenido principal y la funcionalidad del sitio.

La capa de Diseño Visual representa la piel, o los estilos. Esto puede ser cualquiera cosa; desde color, tipos de fuentes, imágenes, etc. Es la capa Visual la que se coloca sobre el contenido para hacerlo ver bonito… pero si se hace correctamente por supuesto. Esto también debería ayudar a tu sitio a que sea más fácil de usar, haciéndolo fácil de leer y navegar.

Bueno, pero ahora veamos el modelo con la “tercera capa”:

Ahora, el mismo modelo incluye una tercera capa “Dirección”. Esta capa representa “los elementos de ayuda” dentro de su sitio.

La Tercera Capa puede incluir elementos tales como:

• Información sobre herramientas y ventanas modales: ¿para qué sirve? Le permite a los usuarios obtener más información sin salir de la página.
• Validación de formularios: ideal, esto deberá ser de inmediato. (Ver el artículo: Experiencia del Usuario. Diseñando Validación de Formularios de la Manera Correcta —NO dejes de leerlo—).
• Indicadores Visuales y Señales de Estado: déjales saber a los usuarios en dónde se encuentran en un proceso paso a paso o cuando hay un error.
• Recordatorios simples de texto: simplemente les dejas saber a las personas lo que pueden hacer y lo que no pueden hacer
• Simplificación inteligente y Restructuración: elimina elementos redundantes y confusos de tu diseño.
• Árbol de opciones: ayuda a las personas a encontrar lo que están buscando.
• Lista de verificación: ayuda a los usuarios a entender lo que tienen para escoger y lo que no tienen.
• Presentaciones históricas: ayuda a los usuarios a ver los cambios más allá de un período de tiempo para mejorar su percepción.
• Preguntas frecuentes: esto es más una estrategia de contenido que una estrategia de diseño, pero es lo suficientemente útil para incluirlo en nuestra lista (especialmente sí se combina con un sistema de búsqueda de opciones).

Es muy importante notar que esta tercer capa no significa necesariamente que tu diseño necesita llegar a ser más complicado… es decir; añadir toneladas de elementos nuevos no es la solución a menos, por supuesto, que puedas hacerlo en una forma limpia y discreta. Recuerda, estos dispositivos de ayuda tiene por objeto: ayudar a las personas a evitar errores, pero si todo lo que estamos haciendo es llenar completamente una página de diseño con basura extra, en realidad estas aumentando las probabilidades de error confundiendo a los usuarios. La clave: añadir lo que se necesita para ayudar a los usuarios en la forma menos impactante. Si estuvieras hablándoles en voz real, habla con calma —gritando no se soluciona nada—.

Forgiveness

La prevención de los errores desde antes que se produzcan tiene mucho que ver con la creciente conciencia situacional de lo que esta pasándoles y reduciendo el ruido visual en la página. Muy a menudo el diseñador asume que un usuario de un sitio web tendrá el mismo nivel de conocimiento que ellos tienen… Lo que no está mal si verdaderamente conoces y confías en tu público objetivo, pero en la amplia, por no decir; vasta, mayoría de los proyectos webs, esta es una suposición peligrosa de hacer.

Building in forgiveness into a design is an easy way to lessen the blow when users do make mistakes and slip-ups. Forgiveness, in this context, refers to the elements that will ease the severity of an error when it happens.

Por ejemplo: esto podría significar no permitir a los usuarios completar un formulario de pedido a menos que hayan introducido y también verificado la dirección de correo.

Pero eso no es todo, la prevención viene en la forma de dejar que los usuarios arreglen sus propios errores cuando estos ocurran. Cómo funcione en las aplicaciones prácticas dependerá únicamente de ti… pero como un principio de diseño abstracto, esto significa construir en formas para que los usuarios editen la información y corrijan los errores que cometieron.

Estas son cosas que tendemos a tomar para garantizar en el mundo de los editores de Facebook, sistemas de CMS (Sistemas de Administración de Contenido), por ejemplo como; WordPress y similares, pero cuando estas creando un diseño desde el boceto, es particularmente importante considerar dónde la prevención necesitará arreglar su proyecto.

Conclusión

¡Eso es todo por este artículo! Si alguno de ustedes está interesado en más artículos como este dirigido a la Teoría y Principios de Diseño, por favor, déjanos saber tu opinión y estaremos encantados de traerte más. Personalmente, pienso que la teoría detrás del diseño es fácil y tan útil y práctica como los tutoriales de cómo crear un elemento en específico, sin embargo, como este es un sitio para el público, estaré esperando y atento a sus comentarios!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!