Los 7 pecados capitales de la usabilidad web

Ilústrese en los errores de usabilidad web que cometen las personas y empresas con mayor frecuencia y que tienen un impacto crítico en los resultados digitales.

La usabilidad, por definición, es un valor para representar qué tan fácil de usar es un sitio o una aplicación web, independiente de las capacidades técnicas y de conocimiento del usuario. Su importancia radica en el alto nivel de influencia que tiene en la consecución de objetivos digitales para una organización. Wikipedia la define de la siguiente forma:

«El neologismo usabilidad —del inglés: usability— es una medida empírica y relativa que muestra la facilidad con la que las personas pueden utilizar una herramienta u objeto particular fabricado por humanos para obtener un objetivo concreto. La usabilidad, además, se refiere a la claridad y elegancia con la que se diseña la interacción entre un individuo y un programa de computador o sitio web. Se dice que es una medición empírica porque no se basa en opiniones sino en pruebas y relativa porque los resultados no son ni buenos ni malos, sino que dependen de las metas planteadas o de una comparación con otros sistemas similares». (1)

Para resumir, un sitio o aplicación web tendrá una alta usabilidad si, y solo si, alguien la puede usar sabiendo poco de computadores y usando una conexión a Internet y un computador promedio (en términos tecnológicos).

Jakob Nielsen —ingeniero Danés, mundialmente respetado en temas de usabilidad— definió la usabilidad como: «El atributo de calidad que mide lo fáciles que son de usar las interfaces web».

Entendido el concepto de usabilidad web, presentamos los que a nuestro juicio son los pecados capitales de la usabilidad web agrupados en 7 grandes áreas:

1. Arquitectura de la información

La organización y disposición del contenido son piezas fundamentales de la usabilidad. Facilitar el consumo a través de la construcción de rutas claras de navegación, ayudará al usuario a entender, de forma simple, la manera correcta de interacturar con los contenidos. Los pecados más comunes que se comenten en esta área son:

  • La ausencia de estructura (cualquier sitio web necesita un principio claro de organización para los contenidos).
  • No contar con una jerarquía evidente en la información.
  • Tener opciones de navegación invisibles (lo que no está disponible y accesible en un sitio web, no existe).
  • Construir una navegación inconsistente (la navegación de un sitio web no puede plantearse como un rompecabezas que necesita ser descifrado).

2. Layout

La buena disposición de los elementos garantizará una excelente experiencia de usuario. Encontrar la ubicación correcta para cada pieza dentro del sitio web es una tarea que necesita trabajo constante. Los errores frecuentes en el layout son:

  • No ubicar el logotipo de la compañía en la parte superior izquierda del sitio web y vincularlo a la página de inicio (el cerebro de las personas está acostumbrado a esto, ¿porqué cambiarlo?).
  • No contar con un menú que se ate al navegador cuando se hace scroll.

3. Diseño gráfico

La apariencia gráfico de un sitio web tiene alta incidencia en la usabilidad. Llevar la atención del visitante hacia lo importante y darle mayor visibilidad a los caminos prioritarios son tareas del diseño gráfico. Nuestras recomendaciones para no pecar en el lock & feel son:

  • Establecer una paleta limitada de colores (máximo 4).
  • Seleccionar una buena tipografía que facilite la lectura (se recomienda el uso de serif para encabezados o títulos y sans serif para cuerpos de texto).
  • Concentrar esfuerzos para lograr una diagramación espaciada de los contenidos y de esta forma mejorar el consumo.
  • Diferenciar los enlaces visitados (es importante dar a los usuarios una pista visual de los lugares en donde ha estado).
  • Indicar el campo activo de los formularios (identificar con facilidad el campo en el que se encuentran las personas es muy útil para quien está diligenciando la información).
  • Evite subrayar textos sin enlace (hay un concepto ampliamente interiorizado en el mundo digital: «Todo aquello que esté subrayado o tenga color, es probable que sea un link»). En caso tal de que necesite destacar alguna parte de un texto lo sugerido es usar la negrita, itálica o un color opuesto al de los vínculos.

4. Desarrollo e ingeniería

Son muchos los potenciales errores que se pueden cometer en el proceso de desarrollo e ingeniería que podrían terminar afectando la usabilidad. Los que debe evitar a toda costa son:

  • Forzar una preferencia de navegador al visitante.
  • Desarrollar la plataforma en una tecnología obsoleta.
  • No optimizar los tiempos de carga (Google y Bing han sido enfáticos en que un sitio con altos tiempos de carga conlleva a un aumento en la distracción y la deserción).

5. Contenidos

El contenido es la mejor herramienta para darle al usuario una experiencia de navegación satisfactoria, por ende debemos usarlo para nuestro beneficio. Apoyarse en el contenido para explicar lo complejo y para simplificar lo sencillo es un buen ejercicio de apropiación de la información con objetivos de usabilidad. Los pecados recurrentes en el contenido de un sitio web son:

  • No describir —brevemente— el destino, en el campo «alt», cuando una imagen contenga un enlace (conocer a dónde conduce el vínculo de una imagen incita a que las personas hagan clic).
  • Usar el texto «haga clic aquí» para los enlaces (esta frase ha existido desde que nació Internet y pasó de ser un buen llamado a la acción a un paisaje común; además, obliga a leer el párrafo previo para entender hacia donde lo dirigirá el vínculo).
  • No brindar un mecanismo de contacto y retroalimentación visible y simple.

6. Funcionalidades

Agregar funcionalidades, para reducir potenciales brechas o problemas de uso, es una estrategia ganadora. Dentro de los errores más comunes en temas de funcionalidad de un sitio web encontramos:

  • No tener un mecanismo de búsqueda eficiente (o no tener ningún mecanismo de búsqueda).
  • No disponer de una miga de pan —breadcrumb, en inglés— que ayude a ubicarse.

7. Dispositivos

La movilidad es un pilar fundamental del éxito de una plataforma o aplicación web. Los pecados que se cometen con mayor frecuencia en este tema son:

  • No separar el diseño de la experiencia en dispositivos de la de computadores de escritorio o portátiles.
  • No perfeccionar el sitio web a medida que avanzan los dispositivos y la tecnología en móviles.
  • No simplificar la navegación y contenidos disponibles en la versión móvil del sitio web.

Bibliografía

(1) Definición tomada de Wikipedia.

TORRES BURRIEL, Daniel. Los diez errores de arquitectura de información más comunes. Artículo publicado en TorresBurriel.com en mayo de 2009.

Los mejores consejos para hacer Responsive Design en su sitio web

Entienda el concepto de diseño adaptativo y su importancia para el desempeño del sitio web en su estrategia digital en dispositivos móviles.

Antes de la proliferación de dispositivos móviles con capacidad de navegación, los diseñadores de sitios web únicamente se enfrentaban al reto de mantener la apariencia gráfica de sus creaciones en los diferentes navegadores de computadores con resoluciones de pantalla no muy disimiles. Hoy, con la masificación de tabletas, teléfonos inteligentes, libros electrónicos, computadores portátiles y de escritorio (cada uno de ellos con resoluciones de pantalla particulares), los diseñadores web se enfrentan a una realidad compleja. Un escenario de diseño que obliga la adaptación de los sitios web a cualquier pantalla o dispositivo (con el objetivo de producir una experiencia satisfactoria al usuario).

Pero el desafío no se reduce a la disposición y los aspectos gráficos de los elementos, sino a la interacción, consumo y navegación de estos. El clic táctil y las pequeñas resoluciones de pantalla son solo dos retos a enfrentar de los muchos que se encontrarán las organizaciones, y el responsive web design probablemente el camino a seguir.

¿Qué es el responsive design?

El responsive web design o diseño web adaptativo —RWD por sus siglas en inglés— es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla (Ethan Marcotte, diseñador norteamericano, fue el creador y difusor de esta técnica) (1). El diseño adaptativo es en esencia un enfoque que busca que la presentación y codificación de un sitio web ofrezca una experiencia visual óptima para el usuario sin importar el origen de la visita y su finalidad es facilitar la lectura y la navegación con un mínimo cambio en la experiencia de uso.

¿Por qué es importante?

  • Por tiempo y dinero: Crear un sitio web con responsive design es más barato y rápido que hacer una versión móvil o una aplicación.
  • Por alcance: El tráfico procedente de dispositivos móviles está aumentando exponencialmente (ignorar esta tendencia es una temeridad).
  • Por la experiencia de usuario: el contenido y su visibilidad son la piedra angular de una estrategia digital actual; pero estos dos pilares están soportados en uno intrínseco: la experiencia de usuario (si su sitio web no la ofrece, los usuarios difícilmente consumirán los contenidos).
  • Por la indiferencia a los sistemas operativos: el responsive design asegura que los usuarios obtengan la mejor experiencia independientemente de su sistema operativo (Android, iOS, Windows y otros).
  • Por la centralización del esfuerzo: Hacer que su sitio se adapte al usuario simplifica la memorización de las rutas para acceder a las plataformas digitales de la organización.
  • Por la optimización para buscadores: Google ha sido reiterativo —sobretodo recientemente— en su posición de darle prioridad en los resultados de búsqueda a los sitios que entreguen una buena experiencia para los usuarios de dispositivos.

¿Cómo hacer responsive web design correctamente?

1. Cuide los tiempos de carga

Entendemos que las conexiones móviles cada día son más potentes y que el cubrimiento de la señal mejora constantemente gracias a los avances en infraestructura; pero esto no lo exime de preocuparse por los tiempos de carga del sitio web en dispositivos; por el contrario, siempre es recomendable diseñar y validar la navegación desde conexiones lentas (revise el desempeño de su diseño en conexiones 2G y 3G).

2. Más imágenes y menos texto

La gestión de imágenes es un apartado crítico en el diseño adaptativo. Los usuarios esperan una experiencia más visual que textual en los dispositivos (adapte y transforme sus contenidos para los visitantes móviles). Responsive design no es adaptar literalmente un sitio web, sino transformarlo.

3. Vigile los menús de navegación

Nunca pierda de vista las dimensiones de pantalla de los dispositivos que podrían usar los visitantes. Los menús son componentes diseñados para computadores portátiles y de escritorio; destine tiempo en la modificación de los menús para que sean navegables de forma táctil (iconos y botones de acceso rápido son alternativas válidas en la metamorfosis de los menús hacia la movilidad).

4. Simplifique la navegación

Identifique los destinos prioritarios de los usuarios móviles y construya su navegación basándose en esa información. Un sitio web adaptado para dispositivos debe ser una simplificación fundamentada en el uso (no es necesario que todo esté disponible en la versión móvil, pero si es obligatorio mantener la lógica con la que se construyó la arquitectura de la información).

5. Cuide los tamaños de la tipografía

No es lo mismo leer en la pantalla de un computador un texto con tipografía de 12pt a hacerlo en un dispositivo. Por más sencillo que sea ampliar el texto en una pantalla táctil, no es buena idea obligar a sus lectores a acercar y alejar para leer una determinada pieza de texto. Como regla general, asegúrese de mantener el tamaño del texto lo suficientemente grande como para que sea legible incluso cuando se ve en un dispositivo con pantalla más pequeña (un tamaño de texto ideal es 16 px, 12 pt o 1 em).

6. Tenga presente la orientación de la pantalla

Según las estadísticas, la orientación vertical de pantalla es utilizada por el 41% de las personas cuando navega en internet; esto significa que la orientación horizontal es la preferida por el 59% (es necesario tener presente en el diseño de su sitio web ambas orientaciones, haciendo que el diseño responda correctamente a las dos, especialmente la horizontal).

Análisis del diseño adaptativo de los sitios web colombianos frente a los referentes internacionales

Queremos terminar esta publicación compartiendo algunos ejemplos y apreciaciones respecto al desempeño de los sitios web de reconocidas compañías de origen colombiano enfrentadas a empresas internacionales referentes de la categoría (aclarando que para este ejercicio usamos como dispositivo de visualización un iPhone 6 en posición vertical).

1. Moda

En esta categoría enfrentamos a Arturo Calle y H&M.

La empresa local (Arturo Calle) no cuenta con diseño adaptativo ni con una versión móvil de su sitio web. Por su parte H&M es una muestra clara de buenas practicas (navegación por botones, imágenes de buen tamaño y pocos textos).

2. Comercio o retail

En la categoría de comercio o retail confrontamos al Éxito y Amazon.

Nuevamente nos encontramos con la ausencia de diseño adaptativo en la empresa local y la reiteración de las buenas prácticas descritas anteriormente por el referente internacional (aclarando que Éxito cuenta con una aplicación; por lo tanto, los usuarios que la descarguen podrán mejorar su experiencia de consumo).

3. Grupo empresarial o conglomerado

Para la comparación de grupos empresariales seleccionamos Bavaria y 3M.

La tendencia se mantiene, Bavaria (conglomerado de origen colombiano) no cuenta con responsive web design (inclusive dentro del sitio tiene componentes desarrollados en Adobe Flash que no se pueden visualizar en dispositivos), por su parte 3M tiene diseño adaptativo pero con una experiencia de usuario deficiente (baja optimización de tamaños e imágenes).

4. Aerolíneas

Para el segmento de aerolíneas analizamos Avianca y Fly Emirates.

En nuestro ejercicio Avianca es la primera de las compañías de origen colombiano que está preparada para los usuarios de dispositivos (su sitio web cuenta con una versión móvil muy optimizada y coherente con las actividades más recurrentes). Fly Emirates también tiene un excelente desempeño en dispositivos (muy gráfico y de arquitectura simple).

5. Gubernamental

En la categoría gubernamental enfrentamos el sitio web de la Gobernación de Antioquia con el de la ciudad de Nueva York.

La ausencia de diseño adaptativo y la complicación de uso en la presencia web de la Gobernación es evidente, por su parte la ciudad de Nueva York ofrece un sitio web de fácil uso desde el teléfonos.

6. Bebidas

Para el caso de bebidas confrontamos Postobón y Red Bull Internacional.

La compañía colombiana de bebidas cuenta con un sitio web adaptado para dispositivos (a nuestro juicio de buen desempeño) y Red Bull —por el contrario— queda debiendo, pues aunque cuenta con responsive design la experiencia de uso en dispositivos no se compara con la que se vive en el mismo sitio accediendo desde un computador.

7. Comunicaciones

En el segmento de empresas del sector telecomunicaciones comparamos a Claro Colombia con Verizon.

Al igual que en la categoría de aerolíneas, aquí las diferencias son mínimas. Ambas compañías, la local y el referente internacional, cuentan con un buen diseño adaptativo.

8. Bancos

En la categoría de bancos analizamos Bancolombia y Bank Of America.

Ambos pasan el examen. Buen desempeño y fácil uso. En el caso de Bancolombia invita inclusive a descargar su aplicación para vivir una mejor experiencia.

Bibliografía

(1) Definición tomada de Wikipedia.

Why Is Responsive Web Design Important For Your Website. Artículo publicado en knowledge.ridivi.com.

BALHARA, Hariom. Top 10 Tips on Designing Outstanding Responsive Websites. Artículo publicado en webdesignflip.com.

11 cosas que debe saber antes de diseñar un sitio web

Los conceptos y actitudes que usted necesita asimilar, antes de crear un sitio web, para lograr un resultado exitoso.

Tener un título de diseñador no es una garantía para desarrollar un sitio web funcional y usable. El diseño web es una actividad en la que deben integrarse 3 áreas del conocimiento: la ingeniería (el aspecto lógico del desarrollo de la plataforma), la comunicación (la construcción de textos y contenidos multimedia que ofrecerá la plataforma) y el diseño gráfico (la creación de una apariencia que enriquezca la plataforma, facilite su uso e invite a permanecer en ella). No existe uno que tenga más importancia que los otros, los 3 aportan a la consecución de los objetivos digitales de la organización desde diferentes frentes.

Antes, los creadores de sitios web cometían el mismo error: lanzarse al desarrollo, creación de contenidos y diseño sin elaborar un plan y sin ahondar en los conocimientos necesarios para lograr un buen resultado. Hoy, el proceso de diseño, obliga conocer en detalle las necesidades de la empresa y los usuarios y entender algunos aspectos básicos para luego decidir la mejor manera de hacerlo (evitando reprocesos y errores que se pudieron prever).

En esta publicación queremos compartirle 10 conceptos importantes que usted debe comprender antes de aventurarse al diseño web. Obviamente existen otros, pero entendiendo estos estará más cerca de triunfar en la construcción del sitio web:

1. Es un recorrido de largo aliento

Dominar el diseño web es utópico. Diseñar para la web debe ser visto como un viaje que requiere exploración, prueba y aprendizaje constante. Un buen diseñador siempre partirá del entendimiento de la marca, los objetivos, las audiencias y la tecnología antes de crear una plataforma (que será usada como punto de partida). Una vez establece esa posición inicial comienza un recorrido de optimización largo que, probablemente, nunca concluirá (con el pasar de los días y la evolución de la tecnología los diseñadores entienden que el sitio nunca está terminado).

2. No existe una única verdad

La meta siempre será construir una plataforma para lograr unos objetivos en unas audiencias específicas; pero existen muchos caminos para llegar a esa meta. Es difícil hablar de lo correcto y lo incorrecto; lo que si podemos es diferenciar los trayectos largos de los cortos (aclarando que los atajos no existen). Es perfectamente probable que se escuchen opiniones contradictorias entre los diseñadores web; en el camino se encontrará quienes defienden a capa y espada algunas ideas, tecnologías y tendencias, y ataquen las de los otros. No existe una única verdad, ni mucho menos un método infalible; nadie tiene la fórmula perfecta. Analice, explore, aprenda y ejecute sin temores (eso si, evalué y optimice sobre la marcha sin atarse a las ideas).

3. Se necesita entender el contexto

Es importante que entendamos que el «look & feel» es un resultado y no un objetivo. Quienes se obsesionan con el aspecto gráfico terminan diseñando para ganar premios y no para conseguir conversiones (son muchos los diseñadores web que se centran en el pixel y abandonan las necesidades de la marca o empresa). Tómese el tiempo para entender el contexto y la audiencia para cual va a diseñar, entienda su comportamiento y adapte su diseño a ellos. Crear la solución adecuada es la principal tarea del diseñador (se busca solucionar sin dejar de deleitar).

4. Menos siempre será más

Una de las tentaciones frecuentes de los diseñadores y clientes es llenar los sitios web con la mayor cantidad de información y componentes gráficos posibles. Si partimos de la premisa, ampliamente demostrada y explicada, de que el recurso escaso de las personas en la actualidad es el tiempo y no la información, usted esta atentando contra sus propios intereses (hacer que las personas consuman su información y permanezcan la mayor cantidad de tiempo en su plataforma). Facilite las cosas, simplifique la «puesta en escena» de sus productos o servicios y de su mensaje. Para tener un diseño eficaz, menos siempre será más.

5. Simplificar siempre será complejo

Como lo he dicho muchas veces, simple no significa carente de ingenio. Simplificar es un ejercicio difícil y requiere ser sumamente crítico. Haga un esfuerzo por retirar del diseño las cosas innecesarias o que poco aportan a la consecución de los objetivos. Jerarquizar sus objetivos y asignar prioridades dentro de lo que se necesita comunicar puede ser el camino correcto para empezar a desprenderse de los elementos que suman poco en su diseño. Hacer brillar lo importante sin intentar que todo brille y retirar lo que no se necesita es una de las lecciones principales que debe aprender un diseñador web.

6. La tipografía es un elemento crítico

Oliver Reichenstein escribió, en 2006, sobre la importancia de las tipografías en el diseño web. En su controversial artículo se atrevió a afirmar que el 95% del éxito de un diseño web recae sobre las tipografías (aclarando que esto lo dijo en una época en la que las opciones de fuentes tipográficas eran reducidas y el diseño web estaba dominado por el uso de imágenes). Hoy, con la creciente importancia del diseño adaptativo (responsive design) y el marketing de contenidos la utilización de una buena tipografía es fundamental. Entender la necesidad, el propósito y el comportamiento de las audiencias en un sitio web (leer, aprender, etc) lo ayudará a escoger la tipografía acertada.

7. Se debe crear una paleta de colores

La teoría del color está compuesta por un grupo de reglas básicas que lo ayudarán a mezclar correctamente los colores para conseguir el efecto deseado (1); dominarla es complejo y necesita años de experimentación, pero esto no lo exime de estudiarla y analizarla antes de comenzar un diseño web. La selección de la paleta de colores es una de las primeras tareas del diseñador; generalmente la elección de colores está determinada por el logotipo de la marca, una imagen que represente su personalidad o simplemente por una búsqueda arbitraria (usando herramientas como Kuler o EyeDrop.me). Independientemente de la tendencia de diseño que piense seguir, vale la pena establecer sus colores primarios y secundarios, las gamas que piensa usar y la lógica de uso para cada uno de ellos; todo esto para conseguir, desde el inicio, un diseño coherente, planeado y ajustado a los objetivos.

8. Se requiere estar atento a la arquitectura del contenido

Un diseñador nunca debe perder de vista que cuando diseña para la web lo que está creando es un contenedor atractivo y enriquecedor para la información. A no ser que su producto sea el arte digital, los sitios web son pensados para transmitir información individual o corporativa de productos, servicio y marcas; es decir que el diseño simplemente acompaña y enaltece el contenido. Dicho lo anterior, es evidente que quien construye la apariencia gráfica no se debe desentender del contenido, su estructura y sus fines. Conocer y apropiarse de la arquitectura de información es prioritario para el diseñador (si necesita profundizar en este concepto, puede leer un post que escribí del tema hace poco sobre arquitectura de la información).

9. El layout es el punto de partida

Cualquier creación física requiere de unos planos detallados; de la misma forma, diseñar un sitio web necesita de ellos. La construcción de un layout, en computación, es el proceso mediante el cual se calcula y se planea la ubicación en el espacio de cada uno de los objetos y componentes de una plataforma tecnológica (en diseño, el layout, es también conocido como mock-up o maqueta). Con una maquetación previa del diseño web se reducirán los errores; debido a que permitirá a los usuarios evaluar con anterioridad el diseño y sus funcionalidades (es más fácil corregir sobre un mock-up que corregir sobre un diseño construido).

10. Se diseña para la audiencia

Es muy difícil, lo reconozco, pero quienes diseñan sitios web deben entender y defender que el único juez de un diseño es la audiencia (no el que contrató al diseñador). Obviamente escuchar opiniones y retroalimentarse con amigos y colegas es importante para optimizar un diseño, pero si se presta atención a todos los conceptos y se les incorpora en el sitio web el resultado será un «Frankenstein». Explicar el diseño y educar es tarea de quien diseña.

11. Nunca se debe dejar de aprender y optimizar

Como se dijo en el primer punto, es utópico dominar y saber todo sobre diseño. Los diseñadores (y quienes contratan el diseño) deben hacer que el sitio web nunca deje de evolucionar. Aprender de cada tendencia, estudiar cada moda, analizar cada nuevo desarrollo y entender el comportamiento particular de las audiencias es una responsabilidad ineludible de quien diseña plataformas web (de la misma forma, mantener actualizado cada uno de los diseños y optimizarlos usando como fuente de enseñanza los resultados obtenidos).

Bibliografía

(1) Definición de Teoria Del Color tomada de Wikipedia.

LONG, Josh. 10 Things to Know Before Designing for the Web. Marzo, 2013. Publicado en Treehouse Blog.

CHAFFEY, Dave y ELLIS-CHADWICK, Fiona. Marketing Digital: Estrategia, implementación y práctica. México, 2014. Pearson Educación.

12