10 Principios para un Diseño Web Efectivo

Artículo Original: 10 Principles of Effective Web Design
Author: Smashing Magazine
Fecha: 31 de enero de 2008
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para ver ejemplos de cada principio.

La Usabilidad y la utilidad, y no el diseño visual, son los que determinan el éxito o el fracaso de un sitio Web. Puesto que el visitante de una página es la única persona que hace clic en el mouse y, por consiguiente, decide lo que quiere hacer, el diseño centrado en el usuario se ha establecido como un método estándar hacia el diseño Web comercial y exitoso.

No vamos a discutir los detalles de implementación (por ejemplo dónde debe colocarse la caja de búsqueda), como ya lo hemos hecho en otros artículos, sino que nos centraremos en los principios, heurísticas y estrategias para un diseño web efectivo – métodos que, usados apropiadamente, pueden guiarnos a decisiones de diseño más sofisticadas y a simplificar el proceso de percepción de la información presentada.

¿CÓMO PIENSAN LOS USUARIOS?
Básicamente, los hábitos de los usuarios de un sitio Web son diferentes de los hábitos de los compradores de una tienda. Los visitantes dan un vistazo a cada nueva página, examinan rápidamente algo del texto y hacen clic en el primer vínculo que les llama su atención o se asemeja vagamente a los que están buscando. De hecho, hay muchas partes de la página que ni siquiera miran.

La mayoría de los usuarios buscan algo de su interés (o que les sea útil) y que tenga un vínculo. Tan pronto lo encuentran le hacen clic. Y si en la nueva página no encuentran lo que estaban buscando, hacen clic en el botón Atrás y el proceso de búsqueda continua.

• Los usuarios aprecian la calidad y la credibilidad. El contenido es más importante que el diseño. Es por eso que sitios con muy buen contenido y no tan bien diseños obtienen gran cantidad de tráfico.
• Los usuarios no leen, sino que ojean rápidamente. Buscan puntos fijos que los guíen hacia lo que están buscando.
• Los usuarios son impacientes y quieren resultados instantáneos. Un principio simple: Si un diseño no hace que el usuario encuentre lo que busca, el diseñador falla y hace perder dinero a la empresa. Entre más tenga que pensar el usuario y la navegación sea menos intuitiva, más fácil será que los usuarios busquen otras alternativas.
• Los usuarios no seleccionan lo más óptimo. No examinan la página linealmente ni van de sección en sección buscando lo que necesitan. Por el contrario buscan rápidamente y toman la primera opción que encuentren, en lugar de buscar la mejor de todas las opciones.
• Los usuarios siguen su intuición. La mayoría de las veces los usuarios se las arreglan como puedan, sin siquiera leer la información que el diseñador ha puesto.
• Los usuarios quieren tener el control. Sobre su navegador y esperan que todo el sitio sea consistente. Es por eso que no les gustan los pop-ups ni que el botón Atrás les deje de funcionar. Así que es una buena práctica nunca abrir vínculos en nuevas ventanas.

LOS PRINCIPIOS

1. No hagas pensar a los usuarios
   
   De acuerdo a la primera ley de la usabilidad de Krug, la página web debe ser obvia y auto-explicativa. Tu trabajo al diseñar una página es que el usuario no tenga ninguna pregunta. Debes tener una navegación y una arquitectura intuitiva, una estructura clara, ayudas visuales moderadas y vínculos fácilmente identificables. El visitante debe entender qué hace la página, cómo funciona y cómo puede ir a otro lado. De eso se trata que no tenga ninguna pregunta.
   
   Una vez que tus visitantes entiendan de qué se trata tu sitio, les puedes explicar por qué es útil y cómo se pueden beneficiar de él.


2. No desperdicies el tiempo de los usuarios
   
   Si vas a ofrecer algún servicio o herramienta, trata de tener unos requisitos mínimos. Entre menos necesiten los usuarios para probar un servicio, más fácil lo harán. Ellos quieren “jugar” con él, en lugar de registrarse porque tal vez nunca vuelvan. Déjalos explorar y descubrir cuáles son tus servicios sin pedirles ni el correo.
   
   Un solo registro es suficiente para evitar que tus visitantes naveguen en tu sitio y reducir tu tráfico.


3. Haz que los usuarios enfoquen su atención
   
   Algunas partes de la interfaz de usuario atraen la atención más que otras. Obviamente las imágenes son más atractivas que el texto y la negrita atrae más que el texto plano. El ojo humano no es para nada lineal y los usuarios pueden identificar instantáneamente bordes, patrones y movimiento.
   
   Así que enfocar la atención del usuario a áreas específicas del sitio mediante el uso moderado de elementos visuales puede ayudar a que fácilmente vaya de un lugar a otro sin siquiera pensarlo. Este visitante estará más orientado y desarrollará más confianza en el sitio, y por ende en la compañía que visita. Entre menos tenga que pensar el usuario, mejor será su experiencia.


4. Esfuérzate por mostrarte
   
   Los diseños Web modernos son normalmente criticados por guiar a sus usuarios con unos procesos 1-2-3 muy atrayentes y por tener botones grandes con efectos visuales Pero precisamente estas guías son extremadamente útiles, porque guían al usuario de una manera muy amigable y simple.
   
   Dejar ver al usuario claramente las funciones disponibles es un principio fundamental del diseño de interfaces de usuario. No importa cómo se logre, lo que importa es que el contenido sea entendible.


5. Haz uso de una buena escritura
   
   Como la web es diferente de los medios impresos, es necesario ajustar el estilo de escritura a los gustos y hábitos de los usuarios.
   
   Evita nombres lindos, rebuscados, de mercadeo, específicos de la compañía, técnicos o no familiares. Si quieres que los usuarios creen una cuenta, usa “Regístrate” en lugar de “Comienza ahora”, que es aún mejor que “Explora nuestros servicios”.
   Una solución óptima para una escritura efectiva es:
   
   • Usa frases cortas y concisas.
   • Usa una diagramación que se ojee fácilmente (categoriza el contenido, usa múltiples niveles en los encabezados, usa elementos visuales y listas).
   • Usa un lenguaje objetivo y plano.


6. Esfuérzate por la simplicidad
   
   El principio “Hazlo Simple” (KIS: Keep It Simple) debería ser el objetivo principal del diseño de un sitio. Los usuarios raramente visitan un sitio por su diseño. Lo que buscan es información o servicios.
   
   Desde el punto de vista del visitante el mejor diseño es uno en sólo texto, sin publicidades. Es por eso que una versión para imprimir de las páginas es esencial para una buena experiencia de usuario.


7. No le tengas miedo al espacio en blanco
   
   Actualmente es difícil valorar la importancia de los espacios en blanco. No sólo ayudan a reducir la carga cognoscitiva, sino que también mejoran la percepción de la información. Cuando un visitante llega a una página lo primero que intenta hacer es examinar la página y dividirla en secciones y los espacios en blanco son esenciales en esta tarea.
   
   Las estructuras complejas son más difíciles de leer, examinar, analizar y de trabajar con ellas. Las estructuras jerárquicas reducen la complejidad (Ley de Simon): entre mejor logres que tus usuarios encuentren un sentido de jerarquía, tu contenido será más fácilmente percibido.


8. Comunícate efectivamente con un lenguaje visual
   
   En sus artículos de comunicación visual efectiva, Aaron Marcus declara tres principios fundamentales [en] implicados en el llamado lenguaje visual:
   
   • Organiza: dale al usuario una estructura conceptual consistente y clara. Conceptos importantes dentro de la organización son: la consistencia, la diagramación, las relaciones y la navegación.
   • Ahorra: haz lo que más puedas con tus elementos visuales. Los cuatro puntos principales a tener en cuenta son: simplicidad (sólo incluye los elementos importantes), claridad (ningún elemento debería presentar ambigüedad), individualidad (debe ser distinguible lo que realmente importa) y énfasis (los elementos más importantes deben ser los que más fácilmente se perciban).
   • Comunica: La interfaz del usuario debe mantener un balance en legibilidad, tipografía, simbolismos, visualización y color, para poder comunicarse efectivamente. Usa máximo 3 tipos de letras en cómo máximo 3 tamaños y un máximo de 18 palabras o 50-80 caracteres por línea.


9. Las convenciones son nuestras amigas
   
   Las convenciones son muy útiles para reducir la curva de aprendizaje y el tener que pensar cómo funcionan las cosas. Imagínate cómo sería si todos los sitios usaran un icono diferente para sus RSSs. ¡Toda una pesadilla para la usabilidad!
   
   Con ellas ganas la confianza y credibilidad de tus usuarios. Entiende qué es lo que esperan los usuarios de la navegación de un sitio, de la estructura del texto, del lugar de la búsqueda, etc.
   
   Por ejemplo traduce tu página a otro lenguaje como el japonés y pon a prueba el sitio con algunos usuarios. Si las convenciones están bien aplicadas, aunque la página esté en otro idioma, estos usuarios podrán ubicarse en ella.


10. Prueba temprano, prueba a menudo
    
    Este principio llamado TETO (Test Early, Test Often) debería ser aplicado en todo proyecto, debido a que estas pruebas de usabilidad a menudo dan gran conocimiento sobre problemas y situaciones.
    
    Sólo podrás saber con certeza que un diseño es mejor que otro analizándolo desde un punto específico, es decir: probando con un usuario.
    
    Algunos puntos importantes para que tengas en cuenta:
    
    • De acuerdo a Steve Krug, probar con un solo usuario, es 100% mejor que probar con ninguno y probar con uno al principio del proyecto es mucho mejor que probar con 50 al final. De acuerdo a la primera ley de Boehm, los errores son más frecuentes en la etapa de requisitos y diseño y entre más se demoren en removerse serán más costosos.
    • Las pruebas son un proceso iterativo, lo que significa que cuando diseñas algo, lo pruebas, lo arreglas y lo vuelves a probar.
    • Las pruebas de usabilidad siempre producen resultados útiles. Ya sea porque encuentres problemas que tienes o para ver que no tienes grandes fallas en tu diseño.
    • De acuerdo a la ley de Weinberg, un desarrollador no es el apropiado para probar su propio código. Lo que aplica también para los diseñadores. Ya has trabajado mucho en un diseño, lo conoces, lo que hace que no tengas una perspectiva diferente sobre él. Ya sabes cómo se hizo y cómo funciona, así que busca otras personas para que lo prueben.

REFERENCIAS

• Designing Effective User Interfaces por Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” por Gerald Weinberg
• “Designing Web Usability” por Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” por Jakob Nielsen
• “Don’t Make Me Think” por Steve Krug
• “Usability for the Web: Designing Web Sites that Work” por Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Design