Fu­n­da­me­n­tos de diseño web segunda parte: el diseño use­r­frie­n­d­ly

La ma­ne­ja­bi­li­dad de una página web hace parte de la llamada Usability en­gi­nee­ri­ng o in­ge­nie­ría de la usa­bi­li­dad, una rama del diseño web que se ocupa facilitar la usa­bi­li­dad al usuario. Una web se considera “amigable” cuando es fácil de entender y de usar. Para ello, en su diseño son tan im­po­r­ta­n­tes los aspectos técnicos como los formales. La ac­ce­si­bi­li­dad, o en inglés “ac­ce­s­si­bi­li­ty”, también juega un papel fu­n­da­me­n­tal para que una web atienda a las exi­ge­n­cias del usuario. Esta se asegura de que una web sea diseñada de tal forma que pueda ser usada por cualquier usuario in­de­pe­n­die­n­te­me­n­te de sus li­mi­ta­cio­nes –motrices, co­g­ni­ti­vas, visuales, técnicas, etc. Sus pri­n­ci­pios fueron es­ta­ble­ci­dos por el World Wide Web Co­n­so­r­tium (W3C) y han sido recogidos por las le­gi­s­la­cio­nes na­cio­na­les a nivel global. Tales pautas se en­cue­n­tran en la página del Instituto Nacional de Te­c­no­lo­gía y de Formación del Pro­fe­so­ra­do o INTEF del Mi­ni­s­te­rio de Educación español.

La claridad y sencillez también se aplican al uso de una web: Una buena na­ve­ga­ción se define por un uso intuitivo y rápido, lo que significa que el usuario reconoce y comprende enseguida la es­tru­c­tu­ra de los menús. Una sola barra de ca­te­go­rías suele bastar en la mayoría de casos, y esta no debería constar de de­ma­sia­das su­b­di­vi­sio­nes que co­m­pli­quen la na­ve­ga­ción. Si se usa un menú de­s­ple­ga­ble, este no debería ser muy extenso. Una es­tru­c­tu­ra clara y homogénea facilita la na­ve­ga­ción y mantiene siempre la visión de conjunto.

Para ello, las ca­te­go­rías del menú deberían re­co­no­ce­r­se 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 im­po­r­ta­n­te asimismo tener en cuenta la sobriedad a la hora de nombrar las ca­te­go­rías o subpuntos: cuanto más concreto mejor. Estos deberían, además, contener lo que prometen.

La im­ple­me­n­ta­ción técnica de una página web es de crucial im­po­r­ta­n­cia. El fu­n­cio­na­mie­n­to sin mácula de un sitio depende de un ajuste perfecto de sus co­n­te­ni­dos, así que hay que ase­gu­rar­se de in­tro­du­ci­r­los co­rre­c­ta­me­n­te: errores de descarga y de vi­sua­li­za­ción denotan poca pro­fe­sio­na­li­dad y de­ce­p­cio­nan al usuario. Es lo que sucede, por ejemplo, cuando el contenido necesita mucho tiempo para de­s­ca­r­gar­se co­rre­c­ta­me­n­te, 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 re­co­me­n­da­ble revisar pe­rió­di­ca­me­n­te el fu­n­cio­na­mie­n­to de una web en tal aspecto.

Otro factor a tener en cuenta son las exi­ge­n­cias de los di­fe­re­n­tes di­s­po­si­ti­vos móviles. Hoy día es fu­n­da­me­n­tal que una página sea accesible desde cualquier aparato con conexión a Internet y que responda a los actuales es­tá­n­da­res técnicos, in­de­pe­n­die­n­te­me­n­te de la pla­ta­fo­r­ma o del sistema operativo usados. Los co­n­te­ni­dos deberían poder ser vi­sua­li­za­dos con el software di­s­po­ni­ble y no exigir una potencia más alta de la habitual, de lo contrario se estaría limitando el acceso a aquellos usuarios con pro­ce­sa­do­res más pequeños.

Debido a la extrema expansión de di­s­po­si­ti­vos móviles con acceso a Internet, el hecho de que una página pueda abrirse y vi­sua­li­zar­se co­rre­c­ta­me­n­te con cualquier tipo de di­s­po­si­ti­vo (portátil, tableta, sma­r­t­pho­ne, etc.) es cada vez más im­po­r­ta­n­te. An­te­rio­r­me­n­te, lo más habitual era un layout estático, pero este tipo de diseño no responde a los di­fe­re­n­tes 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 di­fe­re­n­tes versiones para una misma página, por ejemplo, para sma­r­t­pho­ne, tablet o ordenador de mesa. Pero estos formatos solo aceptan los tamaños de pantalla más ha­bi­tua­les y solo de ciertos modelos, por lo que, con fre­cue­n­cia, se de­s­pe­r­di­cia espacio de pantalla al no poder adaptarse a todos los formatos posibles.

En cambio, el diseño re­s­po­n­si­vo o Re­s­po­n­si­ve Web Design (RWD) es mucho más flexible, pues la co­n­s­tru­c­ción de la página se adapta siempre al tipo de pantalla que se use para vi­sua­li­zar­la: 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 di­s­po­ni­ble. Es así como se ha co­n­ve­r­ti­do 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 es­tru­c­tu­ra en malla variable, grid en inglés, que no solo se adapta au­to­má­ti­ca­me­n­te al formato de la pantalla, sino que pone siempre en un primer plano las in­fo­r­ma­cio­nes más im­po­r­ta­n­tes y los elementos de na­ve­ga­ción de una página, lo que repercute en la usa­bi­li­dad de la página in­de­pe­n­die­n­te­me­n­te del di­s­po­si­ti­vo que se use.

De los errores se aprende, pero hay algunos que se deberían evitar si se aspira a superar a la co­m­pe­te­n­cia:

• Ventanas pop-up: Mientras hace re­la­ti­va­me­n­te poco tiempo eran modernas, las ventanas que se abren al hacer clic en algún elemento son hoy día de­te­s­ta­das por la mayoría de in­te­r­nau­tas, que incluso pueden blo­quear­las gracias a ex­te­n­sio­nes de los na­ve­ga­do­res.

• No mostrar los datos de contacto: Deja que tus visitas te contacten si lo desean. Toda web debería ofrecer di­fe­re­n­tes opciones de contacto; estas deben ser fáciles y ac­ce­si­bles.

• 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 fu­n­cio­na­mie­n­to, revisa re­gu­la­r­me­n­te el buen estado de los enlaces.

• Contenido anticuado: Cuida la ac­tua­li­dad de tus co­n­te­ni­dos para ase­gu­rar­te siempre nuevas visitas y que tu contenido sea co­m­pa­r­ti­do.

• Mala na­ve­ga­ción: El in­te­r­nau­ta espera velocidad de Internet. Si no encuentra rá­pi­da­me­n­te lo que busca o dónde puede ir a buscarlo, se irá a otro sitio –pro­ba­ble­me­n­te, a la co­m­pe­te­n­cia. Para evitarlo asegúrate de disponer una barra de na­ve­ga­ción en cada subpágina de tu sitio para facilitar el camino al usuario.

• Diseño excesivo: Un error de pri­n­ci­pia­n­te bastante habitual es el uso de muchos tamaños de fuente y colores di­fe­re­n­tes. 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 ob­se­r­va­n­do las reglas básicas de usa­bi­li­dad que hemos descrito, tu página web tiene una base sólida para co­n­ve­r­ti­r­se en un proyecto serio que responda a los es­tá­n­da­res actuales. En la última parte de nuestra serie dedicada al diseño web obtendrás una visión general sobre los aspectos formales, ne­ce­sa­rios para completar un proyecto web, ce­n­trá­n­do­nos en el efecto que tienen de­te­r­mi­na­dos diseños y colores sobre el usuario.