Estas comprobaciones se pueden realizar en cualquier momento del proceso de diseño y desarrollo del sitio web, aunque cuanto más temprano detectemos los problemas antes podremos solucionar la situación y menores serán los costes asociados a este trabajo.

Idealmente antes de la finalización del proyecto debemos asegurarnos el cumplimiento de estas convenciones. Para ello debemos revisar:

• La jerarquía visual, para que a simple vista se distingan claramente el título de la página, los titulares y los textos.
• La estructura de la información, con las áreas de las páginas claramente definidas para que la información de diferentes apartados no se mezcle, haciendo uso del espacio en blanco y llevando especial cuidado en la ubicación de las imágenes.
• El lenguaje utilizado, empleando términos comprensibles que se entiendan en el “mundo real” y redactando textos concretos y breves, sin información irrelevante.
• Los elementos estándares, haciendo uso de los estándares como que los iconos utilizados sean fácilmente reconocibles, que los menús se sitúen arriba o en los laterales y que el identificar los enlaces resulte obvio.
• La persistencia de la navegación, manteniendo algunos elementos comunes que aparecerán en el mismo sitio en todas las páginas: el identificador del sitio, un enlace a la página principal, los enlaces a las secciones principales, un buscador y las migas de pan que indican la ruta de navegación.
• El buscador, que sea fácil de utilizar y sobre todo que sea efectivo. Los resultados que proporcione deberán ser lógicos y fáciles de interpretar.
• El cross-browsing, para la correcta visualización y uso del sitio web en diferentes navegadores, en diferentes dispositivos y en diferentes resoluciones de pantalla.
• Los errores en la navegación, eliminando pasos intermedios y suprimiendo enlaces erróneos y/o enlaces rotos.
• La mejora de los tiempos de carga, con la optimización de código, imágenes y vídeos.

Si encontramos dificultades en alguno de los elementos debemos solucionar los problemas antes de dar por concluida esta fase y proceder con los denominados “tests de usuario”.

Álex Tavera

Se permite la reproducción de este artículo manteniendo la integridad del mismo, y siempre que se incluya el enlace a esta página como fuente de referencia.

A la hora de desarrollar para la web, si bien no existe como para la accesibilidad web un conjunto de pautas y niveles, sí que tenemos una serie de convenciones a seguir para facilitar la navegación al usuario.

El hecho de no seguir estas convenciones provoca, en la mayoría de los casos, páginas pesadas, poco intuitivas y de ingrata experiencia para el usuario.

Para evitarlo y conseguir sitios rápidos e intuitivos de usar, tenemos que seguirlas en la mayor medida posible. En todo momento tendremos en cuenta que son recomendaciones y que no perseguimos que todas las convenciones estén presentes en nuestro sitio para mejorar su usabilidad. Dependiendo del sitio puede que sean fundamentales o innecesarias. Lo que debe primar, entonces, es el sentido común y la experiencia previa, ya que muchas de las cuestiones que se nos planteen pueden haber sido contempladas anteriormente.

Por último, un punto importante de cualquier proyecto web, debe ser la realización de un test de usuarios. Puede que en las últimas fases del desarrollo creamos que hemos conseguido plasmar lo que queríamos, pero no vamos a quedar convencidos hasta que los usuarios se pongan a utilizar nuestro sitio y veamos cómo se desenvuelven.

Por mucho esfuerzo que hayamos invertido, en este momento vamos a darnos cuenta de muchos detalles que pasaron desapercibidos. Encontraremos lo que molesta al usuario, dónde se atasca o qué echa en falta y entonces podremos solucionarlo.

La usabilidad web no termina con la publicación del sitio web, conforme vayamos ampliando y modificando el sitio web debemos seguir prestando atención para cumplir las convenciones utilizadas y, periódicamente, realizar pruebas con usuarios para detectar nuevos problemas.

Álex Tavera

Se permite la reproducción de este artículo manteniendo la integridad del mismo, y siempre que se incluya el enlace a esta página como fuente de referencia.

1. Una palabra vale más que mil imágenes. Una imagen complementa, pero en ningún caso sustituye. Juegue con la arquitectura tipográfica de su sede web, combine tipos, tamaños y estilos, y use color para atraer y ser identificado. El color es una herramienta, un elemento diferenciador, una pincelada de arte en el arte de construir nuestra sede web. Utilícelo como recurso y sea coherente con su uso. Que las imágenes de su sede web complementen y añadan valor, no lo resten.
2. «3,2,1, acción». El movimiento distrae, atenúa nuestra percepción, y distorsiona el mensaje, creando serias dificultades de visibilidad. El movimiento debe ser inducido al usuario a través de una buena arquitectura de la información.
3. Estructure y construya de forma ordenada. Piense que lo que usted haga debe ser fácilmente utilizable por otras personas. Modelice su sede web a través de plantillas que guarden coherencia con el contenido, y no cree una estructura laberíntica. Recuerde, 2 click, excelente, tres, bueno, cuatro, mejor me voy a tomar algo, y cinco, ¡NO SE VE NADA! Empiece su sede web de arriba abajo y de forma ordenada. En su homesite debe aparecer toda la información prioritaria. Deje que la información se expanda ordenadamente por el resto de páginas que compongan su sede web. Tenga en cuenta los diferentes niveles de lectura y los puntos de máxima visibilidad para situar en ellos elementos calientes que atraerán la atención de nuestros usuarios. Solo lo muy importante se destaca, el resto se diluye.
4. Lo que haga hoy no le servirá mañana. La clave del éxito es la renovación constante. Tenga en cuenta esta premisa a la hora de diseñar su sede web. Cambie elementos, nunca la estructura. Los cambios estructurales hacen que lo aprendido no sirva. No dramatice, los resultados no son inmediatos, la fidelización es costosa, pero si invierte en ella, el retorno se producirá, garantizado 100%.
5. Accesibilidad, navegabilidad, usabilidad, interactividad, arquitectura de la información, integración… ¿mande? Un diseñador de sedes web es un profesional formado y con experiencia, y una sede web de calidad tiene un precio. Nunca confíe en aficionados ni en superofertas.

La experiencia es un grado, y de los errores se aprende, siempre y cuando se cometan.

Ángel Clar García

Se permite la reproducción de este artículo manteniendo la integridad del mismo, y siempre que se incluya el enlace a esta página como fuente de referencia.

Algunas de las características que poseen los dispositivos móviles que dificultan el diseño de páginas web son:

• Pantallas pequeñas.
• Conexiones lentas, con poco ancho de banda y alta latencia.
• Interfaces de usuario heterogéneas y dependientes de cada dispositivo.
• Los botones y teclas son pequeños.

El W3C, con el objetivo de ayudar a los desarrolladores web a diseñar y publicar contenido web que funcione adecuadamente en dispositivos móviles, creó el estándar «Mobile Web Best Practices 1.0«.

Desde la Mobile Web initiative (MWI) de la W3C han creado las llamadas «flips cards«. En estas tarjetas se resumen en 10 puntos clave, las pautas descritas en el estándar. Para los que estén trabajando con las Pautas de accesibilidad al contenido web (WCAG 1.0) les serán muy familiares, de forma resumida se trata de:

1. Diseñar para una web única: Si se diseña el contenido teniendo en cuenta los diferentes dispositivos se minimizan los costes, la página web será más flexible y se satisfarán las necesidades de más personas.
2. Confiar en los estándares web: En un mercado tan segmentado como el de dispositivos y navegadores, los estándares son la mejor garantía de interoperatibilidad, por ello entre otras cosas el desarrollador ha de tener en cuenta que el documento generado ha de ser válido según las gramáticas formales y ha de poseer una estructura lógica, los formatos de los contenidos han de ser compatibles con los dispositivos y hay que usar de forma correcta las hojas de estilo.
3. Evitar los riesgos conocidos: No usar ventanas emergentes y no cambiar de ventana sin avisar previamente al usuario, no usar tablas anidadas y no emplear tablas para maquetar, no utilizar marcos, no usar imágenes para espaciar contenidos y evitar los mapas de imágenes.
4. Ser prudente con las limitaciones de los dispositivos: Hay que tener en cuenta que los dispositivos móviles tienen funciones muy diversas, para ello siempre hay que desarrollar con independencia de dispositivo y nunca depender de objetos o scripts integrados, buscar alternativas a las tablas para la presentación tabular, organizar los documentos para que puedan ser leídos sin las hojas de estilo, asegurarse de que la información transmitida a través de los colores esté disponible también sin color y no confiar en la compatibilidad con los tipos de letra.
5. Optimizar la navegación: Es importante que la barra de navegación sea lo más corta posible y se encuentre en la parte superior de la página, que el mecanismo de navegación sea coherente en todas las páginas, identificar claramente el destino de cada enlace, asignar teclas de acceso rápido a las opciones de menú y a las funciones más utilizadas.
6. Comprobar gráficos y colores: Redimensionar las imágenes, evitar gráficos grandes, proporcionar alternativas a los elementos no textuales, asegurarse de que exista un contraste de color suficiente entre el color de fondo y el de primer plano, no usar medidas en píxeles ni en valores absolutos.
7. Hacerlo en pequeño: Minimizar el etiquetado, el tamaño total de la página ha de ser el apropiado para las limitaciones de memoria del dispositivo, las hojas de estilo han de ser pequeñas, limitar el desplazamiento de la página a una sola dirección.
8. Economizar el uso de la red: Evitar las actualizaciones periódicas automáticas, no redirigir los contenidos a través del etiquetado, reducir el número de enlaces externos.
9. Facilitar la entrada de datos: En los dispositivos móviles, los teclados y otros métodos de introducción de datos pueden resultar tediosos para el usuario; para ello conviene reducir el uso del teclado al mínimo, evitar la introducción de textos por parte del usuario, establecer valores por defecto, crear un orden lógico de tabulación, asociar explícitamente e implícitamente las etiquetas con los controles de formulario.
10. Pensar en los usuarios de la web móvil: Los usuarios al disponer de poco tiempo, prefieren la información lo más esquematizada posible, para ello el título de la página ha de ser corto y significativo, el lenguaje usado ha de ser claro y sencillo, el contenido más importante ha de estar localizado al principio de la página, dividir las páginas en secciones manejables.

El beneficio obtenido principalmente es el aumento del acceso a los contenidos de nuestro sitio web desde un mayor número de dispositivos sin tener que disponer de dos sitios webs diferentes.

La web móvil llega a lugares donde el cable no puede llegar, lugares que anteriormente era impensables, como está ocurriendo en los países en vías de desarrollo. Esto trae consigo nuevas oportunidades para realizar negocios, para trabajar, para gestionar nuestro tiempo de ocio, y para muchas otras cosas, lo que nos permite incrementar nuestra capacidad de movimiento.

Ester Serna Berná

Se permite la reproducción de este artículo manteniendo la integridad del mismo, y siempre que se incluya el enlace a esta página como fuente de referencia.