Es la utilidad, no el diseño visual, lo que determina si un sitio web fracasa o tiene éxito. Los visitantes a tu página son las únicas personas que hacen clic, entonces ellos deciden todo. Por eso, un diseño enfocado en los usuarios se ha hecho el método habitual para los sitios web exitosos y orientados a los beneficios. Es decir, si los usuarios no entienden cómo usar tu página, es como si no existiera.

No vamos a discutir los detalles del implemento (por ejemplo, dónde poner la caja de búsqueda) porque ya ha sido discutido en muchos artículos; en vez de eso, nos enfocamos en losprincipios principales, la heurística, y los métodos de diseño eficaces — métodos que, cuando se usan correctamente, puedan ayudarte a tomar decisiones más sofisticadas y simplificar el proceso de entender la información presentada.

Principios de un diseño eficaz

Para entender los principios de la manera más eficaz, primero tenemos que entender cómo los usuarios interactúan con los sitios web, cómo piensan, y cuales son las pautas de sus acciones.

¿Cómo piensan los usuarios?

Básicamente, los hábitos de los usuarios en la Web no so tan diferentes a los hábitos de los clientes en una tienda. Los visitantes echan una mirada general a cada página nueva, escanean algo del texto, y hacen clic en el primer enlace que vagamente se parece a lo que buscan. De hecho, hay partes grandes de cada página que ni siquiera ven.

La mayoría de los usuarios buscan algo interesante (o útil) en que hacer clic; cuando encuentran algo que parece ser lo que buscan, hacen clic. Si la nueva página no tiene lo que esperaban, hacen clic en el botón “Atrás” y siguen buscando.

  • Los usuarios agradecen la calidad y la credibilidad. Si una página provee contenido de un alto nivel de calidad, ellos están dispuestos a aceptar un compromiso de anuncios y el diseño del sitio. Por eso, los sitios web mal diseñados pero con un contenido de alta calidad reciben mucha atención. El contenido es más importante que el diseño que lo apoya.
  • Los usuarios no leen, escanean. Al analizar un sitio web, los usuarios buscan algunas anclas para guiarse por la página.

0_6KR_mE7o1xRYn1ps

  • Los usuarios son impacientes e insisten en una satisfacción instantánea. Es un principio muy sencillo: Si un sitio web no satisface sus demandas, el diseñador se equivocó y la compañía pierde dinero. Si la carga cognitiva es muy alta y la navegación no es intuitiva, es más probable que los usuarios salgan de tu sitio para buscar alternativas.
  • Los usuarios no escogen lo óptimo. Los usuarios no buscan la manera más rápida de encontrar la información que quieren. Tampoco escanean los sitios web de una manera lineal, yendo de una manera secuencial desde una página a la próxima. En vez de eso, los usuarios escogen lo que los satisfaga más rápido; eligen la primera opción que les parece razonable. Al encontrar un enlace que parece correcto, es probable que los usuarios vayan a hacer clic inmediatamente. Optimizar un sitio web es difícil y demanda mucho tiempo. Es más eficaz brindar satisfacción inmediata.

0_JGnkc-_3ed2kz8Xz

0_7P4zurQVrj0rUnPg

  • Los usuarios siguen su intuición. En la mayoría de los casos, los usuarios se enturbian en vez de leer la información proveída por el diseñador. Según Steve Krug, esto es así simplemente porque a los usuarios no les importa. “Si encontramos algo que funciona, lo usamos. No importa si entendemos cómo funcionan las cosas con tal que las podamos usar. Si tu audiencia va a actuar como si diseñaras carteles de publicidad, diseña carteles superlativos.
  • Los usuarios quieren tener control. Los usuarios quieren poder controlar su navegador y contar con la presentación de datos consistente en todo el sitio. Es decir, no quieren que nuevas ventanas sigan apareciendo inesperadamente y quieren volver con un botón de “Volver” al sitio en que estaban antes. Es una buena práctica nunca abrir enlaces en ventanas nuevas.

1. No hagas que los usuarios tengan que pensar

Según la primera ley de utilidad de Krug, el sitio web debe ser obvio y claro. Cuando construyes un sitio, tu trabajo es borrar las preguntas — las decisiones que los usuarios necesitan hacer deliberadamente, considerando positivos, negativos, y alternativos.

Si la navegación y arquitectura del sitio no son intuitivos, crece el numero de preguntas y es más difícil comprender cómo funciona el sistema y cómo ir del punto A a punto B. En una estructura clara, algunas pistas visuales, y enlaces reconocibles pueden ayudar que los usuarios encuentren lo que buscan.

0_L73Ii95zeYBERr7r

Aquí hay un ejemplo: Beyondis.co.uk afirma que esta “más allá de los canales, más allá de los productos, más allá de la distribución.” ¿Qué significa eso? Debido a que los usuarios tienden a explorar los sitios web usando el “F-Pattern,” estas tres declaraciones serán los primeros elementos que los usuarios verán en la página.

Aunque el diseño es sencillo e intuitivo, un usuario tiene que buscar para entender de que se trata la página. Eso es una pregunta innecesaria. Es el trabajo del diseñador hacer que el numero de preguntas sea casi cero. La explicación visual está por la derecha. Cambiar los dos bloques hará que sea más útil.

0_ge0G7aPChQi455pJ

ExpressionEngine usa la misma estructura que Beyondis, pero evita las preguntas innecesarias. En este caso el eslogan tiene una función — los usuarios tienen opciones para probar el servicio y descargar la versión gratis.

Reduciendo la carga cognitiva, haces que sea más fácil entender la idea que apoya el sistema. Al lograr esto, puedes comunicar por qué el sistema es útil y cómo los usuarios pueden beneficiarse de ello. La gente no va a usar tu sitio web si no puede navegarlo.

2. No malgastes la paciencia de los usuarios

En cada proyecto cuando vas a ofrecer algún servicio o herramienta a tus visitantes, haz que los requisitos sean mínimos. Una persona que visita tu sitio al azar es más probable que quiera probar tus servicios si no hay muchos requisitos. Los que visitan por primera vez un sitio quieren probar el servicio, no llenar formularios largos para una cuenta que posiblemente nunca usen en el futuro. Deja que los usuarios puedan explorar tu sitio y descubrir tus servicios sin forzarlos a compartir información privada. No es razonable forzarlos a ingresar su email sólo para probar un servicio.

Según Ryan Singer — el promotor de 37Signals — los usuarios estarían dispuestos a ingresar su email después de haber visto el producto, y sabiendo que es lo que recibirán a cambio.

0_l7USOxk9VZkbOHSh

Stikkit es un ejemplo perfecto de un servicio fácil para los usuarios que requiere casi nada de los visitantes y es discreto y reconfortante. Esa es la experiencia que quieres para tu sitio web.

0_rG26UMpnOG7c5VDL

Parece que Mite requiere más. Pero se puede completar la registración en menos que 30 segundos — al tener una orientación horizontal, el usuario ni siquiera tiene que desplazar el cursor.

Idealmente, debes borrar todas las barreras — no requieras suscripciones ni registraciones. Tener que registrarse incide bastante en el tráfico que tu sitio recibirá.

3. Concentra la atención de los usuarios

Por tener contenido estático y dinámico, algunos aspectos de los sitios web atraen más atención que otros. Obviamente, las imágenes son más llamativas que el texto — como las frases acentuadas son más atractivas que las frases normales.

El ojo humano es un aparato no lineal, y los usuarios instantáneamente pueden reconocer margenes, pautas, y mociones. Por eso, los anuncios que usan vídeo son extremadamente molestos y distraen mucho. Pero, desde la perspectiva del marketing, son buenos para capturar la atención de los usuarios.

0_KLh6_2M5DdE_USKy

Humanized.com usa el principio de foco perfectamente. El único elemento que está directamente visible a los usuarios es la palabra “gratis,” la cual es atractiva y estimulante, pero a la vez tranquila e informativa. Pistas sutiles proveen a los usuarios con suficiente información como para aprender más sobre el producto que se anuncia gratis.

Concentrar la atención de los usuarios a áreas especificas del sitio con el uso moderado de elementos visuales puede ayudar a que ellos vayan del punto A al punto B sin pensar en cómo deben hacerlo en realidad. Con menos preguntas, los usuarios tienen un mejor sentimiento de orientación y pueden confiar más en la compañía representada por el sitio. Es decir, la experiencia de los usuarios es mejor cuando no tienen que pensar mucho en cómo funciona el sitio.

4. Expón tus servicios

Los diseños modernos de la Web usualmente se critican por tratar de guiar a los usuarios con pasos 1–2–3, atractivos botones grandes con efectos visuales, y más. Pero desde la perspectiva de los diseñadores, estos elementos no son malos. Al contrario, estas directrices son muy eficaces porque guían a los visitantes de una manera sencilla y fácil de usar.

0_mAhkBMX_hVPRBDxk

Dibusoft.com combina atractivos visuales con una estructura clara. El sitio tiene nueve opciones primarias de navegación que son visibles inmediatamente. Aunque los colores elegidos pueden ser demasiados claros.

Dejar que los usuarios vean claramente cuales funciones están disponibles es un principio fundamental del diseño exitoso. No importa cómo logras esto. Lo que importa es que el contenido sea fácil de entender y que los visitantes se sientan cómodos de interactuar con el sistema.

5. Escribe eficazmente

Por ser diferente a las medios gráficos/impresos, en la Web es necesario cambiar el estilo de escritura a lo que prefieren los usuarios. La escritura promocional no es leída. Los bloques largos de texto sin imágenes y palabras claves acentuadas no son leídos. El lenguaje exagerado no es leído.

Habla sobre negocios. Evita nombres bonitos o ingeniosos, nombres específicos para una compañía, y nombres técnicos que nadie entiende. Por ejemplo, si describes un servicio y quieres que los usuarios creen una cuenta, “registráte” es mejor que “empieza ahora,” la cual es mejor que “explora nuestros servicios.”

0_bQUIx4ZHKTjmfd4_

Eleven2.com habla directamente. No palabras bonitas, no frases exageradas. En vez de eso, un precio: lo que buscan los visitantes.

Una solución óptima para la escritura eficaz es

  • usar frases cortas y concisas (llegar al punto rápidamente)
  • usar un esquema escaneable (pon el contenido en categorías, usa muchos niveles de contenido, usa elementos visuales y listas claras para que no haya bloques uniformes de texto)
  • usar lenguaje sencillo y objetivo (una promoción no tiene que sonar como un anuncio; otorga a los usuarios alguna razón por la que quieran usar tus servicios).

6. Busca la sencillez

El principio de “mantener todo sencillo” debe ser la meta primaria del diseño. Es raro que los usuarios vayan a un sitio para disfrutar del diseño. En muchos casos, buscan información a pesar del diseño. Busca la sencillez, no la complejidad.

0_a7GRl87xvHJwH43D

Crcbus provee a los visitantes un diseño claro y sencillo. Aunque el sitio es en Italiano, puedes reconocer la navegación, el título, el área del contenido, y más. Enfócate en cómo las imágenes pueden comunicar información claramente. Al poner el cursor sobre las imágenes, estas proveen más información.

Como visitante, el mejor diseño es texto puro, sin anuncios ni bloques de contenido que ha estado buscando. Por eso, una versión fácil de imprimir de sitios web es esencial para una buena experiencia.

0_DR2HLlwBEGR44hLI

Finch presenta información sobre el sitio claramente y da a los visitantes alternativas sin tener contenido ni opciones innecesarias.

7. No tengas miedo del espacio en blanco

En realidad, es muy difícil sobrestimar la importancia del espacio en blanco. No sólo ayuda a reducir la carga cognitiva por los visitantes, sino que hace posible percibir la información presentada. Cuando un visitante nuevo ve un diseño nuevo, la primera cosa que él tratará de hacer es escanear la página y separar el contenido en bloques digeribles.

Las estructuras complejas son más difíciles de leer, escanear, analizar, y trabajar. Si tienes la opción entre separar dos elementos de diseño con una línea visible o espacio blanco, usualmente es mejor escoger el espacio blanco. Las estructuras jerárquicas reducen la complejidad (el ley de Simon): tu contenido será más fácil de percibir si provees a los usuarios una jerarquía visual.

0_zWHfhYraLRgpj_2Y

El espacio en blanco es bueno. Cameron.io usa el espacio en blanco como el elemento primario de su diseño. El resultado es un esquema escaneable, lo cual da al contenido la posición dominante que merece.

8. Comunica efectivamente con un “Lenguaje Visible”

En sus papeles sobre la comunicación visual, Aaron Marcus dice que hay tres principios fundamentales involucrados en el uso del “lenguaje visible” — el contenido que los usuarios ven por la pantalla.

  • Organiza: Provee al usuario con una estructura conceptual clara y consistente. La consistencia, esquema de pantalla, relaciones, y navegabilidad son conceptos de organización importantes. Las mismas convenciones y reglas se deben aplicar a todos los elementos.
  • Economiza: Haz mucho con un mínimo de pistas y elementos visuales. Hay que considerar la sencillez, la claridad, las características distintas, y el énfasis. La sencillez incluye sólo los elementos más importantes para la comunicación. La claridad: todos los componentes se deben diseñar para que su función no sea ambigua. Características distintas: las partes importantes de los elementos necesarios se deben distinguir. Énfasis: Los elementos más importantes son los que se deben percibir fácilmente.
  • Comunica: Haz que el diseño iguale las habilidades del usuario. La interfaz tiene que ser legible, fácil de leer, tener tipografía clara, tener simbolismo, o tener más de una vista, color, o textura para comunicar eficazmente. Usa, como máximo, tres tipos de imprenta y tres tamaños de texto — con 18 palabras cada línea de texto.

9. Las convenciones son nuestros amigos

Un diseño convencional de los elementos del sitio no significa que el mismo sea aburrido. De hecho, las convenciones son muy útiles porque reducen el tiempo de enterarse de cómo las cosas funcionan. Por ejemplo, sería una pesadilla si todos los sitios web tuvieran sus propias presentaciones visuales de las noticias RSS. Es parecido a nuestras vida diaria, en que nos acostumbramos a los principios de organización, usando carpetas, o los lugares en que se ponen productos cuando vamos de compras.

Con convenciones, puedes lograr la confianza de tus usuarios y demostrar que eres fiable y creíble. Haz lo que el usuario espera — entiende lo que los usuarios esperan de un sitio web y haz que tu sitio siga esas convenciones (para más información, lee el Usability Alertbox de Nielsen).

0_RiY_J9zbrnZhBEIh

Si quieres averiguar si tu sitio es fácil de navegar, traduce la página al japonés con Babelfish y pide a alguien que logre la meta de encontrar algo especifico en ese idioma. Si has usado las convenciones, los usuarios deberían lograr ese objetivo sencillo aunque no entiendan ni una palabra.

Según Steve Krug, es mejor innovar sólo cuando sabes que tienes una idea mejor. Si no, usa las convenciones.

10. Prueba temprano, prueba mucho

Este principio se debe aplicar a cada proyecto de diseño porque muchas veces, las pruebas de utilización proveen **revelaciones cruciales **sobre los problemas de un esquema.

No pruebes demasiado tarde, no suficientemente, ni por las razones incorrectas. Es necesario entender que muchas decisiones del diseño son locales — por eso, no hay un “mejor esquema” para cada situación. Hay que analizarlo desde un punto de vista especifico, considerando requisitos, dinero, y más.

Hay algunas cosas importantes que recordar.

  • Según Steve Krug, es mejor probar con un usuario que con ningún usuarios, y es mejor probar con un usuario temprano que con 50 al final. Los errores son más frecuentes durante las actividades de diseño y son más caros de corregir en el futuro.
  • Probar es un proceso iterativo. Es decir, diseñas algo, lo pruebas, lo corriges, y lo pruebas otra vez. Es posible que haya otros problemas que no encontraste al probarlo la primera vez.
  • Pruebas de utilización siempre proveen resultados útiles. Puede ser que te enteres de los problemas que tienes o que te enteres de la falta de problemas — en los dos casos, es una revelación útil.
  • Según la ley de Weinberg, un desarrollador no debe probar su propio código. Esto es aplicable para los diseñadores también. Después de haber trabajado en un sitio por algunas semanas, no puedes verlo de una perspectiva nueva. Sabes cómo se construye y, por eso, sabes exactamente cómo funciona — información que los probadores independientes y los visitantes a tu sitio no tendrían.

Si quieres un buen sitio, tienes que probarlo.

Referencias

El articulo original* en inglés viene de* Smashing Magazine,* escrito por Vitaly Friedman*.