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

Tras una primera parte enfocada a la planificación del diseño de una página web, esta segunda parte de la serie dedicada al diseño web se concentra en cómo diseñar una página web para que sea fácil de usar por el usuario.

Existen incontables maneras de diseñar una página web, pero no todos los diseños se caracterizan por la facilidad de navegación. A la hora de diseñar un proyecto online, es necesario considerar los estándares que han sido establecidos en cuanto a la estructura de una web. La correcta visualización de una página en diferentes pantallas repercute también de forma decisiva en la experiencia del usuario –hay que tener en cuenta el uso creciente de dispositivos móviles para acceder a Internet. Para facilitarle a los usuarios la navegación por tu web, deberías tener en cuenta estos conceptos básicos.

Crea tu página web con IONOS

Con asesor personal incluido, IONOS MyWebsite es la solución completa para una página web profesional.

Certificado SSL
Dominio gratis
Asistencia 24/7

Diseño amigable y convenciones en Internet

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.

1. El layout

El diseño de una página web está estrechamente relacionado con el sector en que se inscribe o el tema que trata –sin embargo, existen ciertas tendencias y estilos generales. Mientras que una gran empresa suele recurrir al portal convencional con las pestañas de navegación en la parte superior y un contenido ordenado en columnas, en proyectos más modestos es frecuente encontrarse con un diseño tipo blog.

La regla de oro del layout es la claridad. Una página sobrecargada puede desorientar al usuario, por lo que conviene prestar atención tanto a una distribución equilibrada como a una presentación estructurada de los contenidos, que deberían ser concisos, legibles y no muy largos. Si lo fueran, los textos deberían contar con párrafos y subtítulos. Y en lo referente a imágenes y videos, es importante que su inclusión tenga sentido y que se mantenga una cierta homogeneidad en su emplazamiento formal. El tiempo que un usuario permanece en una web es directamente proporcional a su facilidad de orientación en ella.

Con el tiempo se han ido estableciendo convenciones que definen el diseño web contemporáneo. Es así como muchas webs toman elementos formales de redes sociales como Facebook o de blogs populares. Esta orientación a páginas establecidas tiene sentido, en la medida en que la mayoría de usuarios ya conocen su estructura y están familiarizados con ella. Por su parte, las animaciones que hace algún tiempo se consideraban modernas, han dado paso a un aspecto sencillo y ordenado que proporciona al usuario una rápida visión general. Importante sigue siendo, sin duda, que el diseño de toda página web tenga siempre un toque personal.

2. La navegación

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.

3. Aspectos técnicos inevitables

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.

4 Diseño web responsivo

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.

Los errores más comunes del diseño web

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.


¡No te vayas! ¡Tenemos algo para ti!
Consigue tu dominio .es un año gratis.

Introduce el dominio que deseas en la barra de búsqueda para comprobar su disponibilidad.
12 meses desde 0€/año IVA incl.
después 12,10 €/año IVA incl.