Fundamentos de diseño web segunda parte: el diseño userfriendly

La manejabilidad de una página web hace parte de la llamada Usability engineering o ingeniería de la usabilidad, una rama del diseño web que se ocupa facilitar la usabilidad al usuario. Una web se considera “amigable” cuando es fácil de entender y de usar. Para ello, en su diseño son tan importantes los aspectos técnicos como los formales. La accesibilidad, o en inglés “accessibility”, también juega un papel fundamental para que una web atienda a las exigencias del usuario. Esta se asegura de que una web sea diseñada de tal forma que pueda ser usada por cualquier usuario independientemente de sus limitaciones –motrices, cognitivas, visuales, técnicas, etc. Sus principios fueron establecidos por el World Wide Web Consortium (W3C) y han sido recogidos por las legislaciones nacionales a nivel global. Tales pautas se encuentran en la página del Instituto Nacional de Tecnología y de Formación del Profesorado o INTEF del Ministerio de Educación español.

La claridad y sencillez también se aplican al uso de una web: Una buena navegación se define por un uso intuitivo y rápido, lo que significa que el usuario reconoce y comprende enseguida la estructura de los menús. Una sola barra de categorías suele bastar en la mayoría de casos, y esta no debería constar de demasiadas subdivisiones que compliquen la navegación. Si se usa un menú desplegable, este no debería ser muy extenso. Una estructura clara y homogénea facilita la navegación y mantiene siempre la visión de conjunto.

Para ello, las categorías del menú deberían reconocerse como tales: para el diseño de los enlaces se pueden utilizar iconos o el efecto Hover, por el cual un enlace o una categoría cambia de aspecto cuando el ratón pasa por encima. Es importante asimismo tener en cuenta la sobriedad a la hora de nombrar las categorías o subpuntos: cuanto más concreto mejor. Estos deberían, además, contener lo que prometen.

La implementación técnica de una página web es de crucial importancia. El funcionamiento sin mácula de un sitio depende de un ajuste perfecto de sus contenidos, así que hay que asegurarse de introducirlos correctamente: errores de descarga y de visualización denotan poca profesionalidad y decepcionan al usuario. Es lo que sucede, por ejemplo, cuando el contenido necesita mucho tiempo para descargarse correctamente, lo cual provoca que la espera sea larga e incómoda. Contar con la paciencia del usuario es algo que se debe evitar a toda costa, por lo que es recomendable revisar periódicamente el funcionamiento de una web en tal aspecto.

Otro factor a tener en cuenta son las exigencias de los diferentes dispositivos móviles. Hoy día es fundamental que una página sea accesible desde cualquier aparato con conexión a Internet y que responda a los actuales estándares técnicos, independientemente de la plataforma o del sistema operativo usados. Los contenidos deberían poder ser visualizados con el software disponible y no exigir una potencia más alta de la habitual, de lo contrario se estaría limitando el acceso a aquellos usuarios con procesadores más pequeños.

Debido a la extrema expansión de dispositivos móviles con acceso a Internet, el hecho de que una página pueda abrirse y visualizarse correctamente con cualquier tipo de dispositivo (portátil, tableta, smartphone, etc.) es cada vez más importante. Anteriormente, lo más habitual era un layout estático, pero este tipo de diseño no responde a los diferentes tamaños de display del mercado, por lo que, en pantallas pequeñas como las de los móviles, el usuario solo puede ver un pequeño fragmento de la pantalla.

Un diseño adaptable resulta más flexible, ya que ofrece diferentes versiones para una misma página, por ejemplo, para smartphone, tablet o ordenador de mesa. Pero estos formatos solo aceptan los tamaños de pantalla más habituales y solo de ciertos modelos, por lo que, con frecuencia, se desperdicia espacio de pantalla al no poder adaptarse a todos los formatos posibles.

En cambio, el diseño responsivo o Responsive Web Design (RWD) es mucho más flexible, pues la construcción de la página se adapta siempre al tipo de pantalla que se use para visualizarla: se trata en este caso de un diseño con capacidad de reacción, de ahí su nombre, que saca el máximo partido del espacio disponible. Es así como se ha convertido en el estándar del actual diseño web.

Al contrario que el diseño estático, el diseño flexible o adaptable usa una estructura en malla variable, grid en inglés, que no solo se adapta automáticamente al formato de la pantalla, sino que pone siempre en un primer plano las informaciones más importantes y los elementos de navegación de una página, lo que repercute en la usabilidad de la página independientemente del dispositivo que se use.

De los errores se aprende, pero hay algunos que se deberían evitar si se aspira a superar a la competencia:

• Ventanas pop-up: Mientras hace relativamente poco tiempo eran modernas, las ventanas que se abren al hacer clic en algún elemento son hoy día detestadas por la mayoría de internautas, que incluso pueden bloquearlas gracias a extensiones de los navegadores.

• No mostrar los datos de contacto: Deja que tus visitas te contacten si lo desean. Toda web debería ofrecer diferentes opciones de contacto; estas deben ser fáciles y accesibles.

• Enlaces rotos: Seguir un enlace que no lleve a ninguna parte es irritante y conlleva la pérdida de visitas. Una vez que tu página esté en funcionamiento, revisa regularmente el buen estado de los enlaces.

• Contenido anticuado: Cuida la actualidad de tus contenidos para asegurarte siempre nuevas visitas y que tu contenido sea compartido.

• Mala navegación: El internauta espera velocidad de Internet. Si no encuentra rápidamente lo que busca o dónde puede ir a buscarlo, se irá a otro sitio –probablemente, a la competencia. Para evitarlo asegúrate de disponer una barra de navegación en cada subpágina de tu sitio para facilitar el camino al usuario.

• Diseño excesivo: Un error de principiante bastante habitual es el uso de muchos tamaños de fuente y colores diferentes. Pero menos es más: el aspecto de un sitio ha de ser armónico y homogéneo, así que evita los excesos y limítate en lo posible a tres tipos de fuente que combinen bien entre sí. Y lo mismo en cuanto a los colores.

Evitando estos errores tan típicos y observando las reglas básicas de usabilidad que hemos descrito, tu página web tiene una base sólida para convertirse en un proyecto serio que responda a los estándares actuales. En la última parte de nuestra serie dedicada al diseño web obtendrás una visión general sobre los aspectos formales, necesarios para completar un proyecto web, centrándonos en el efecto que tienen determinados diseños y colores sobre el usuario.