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.

La arquitectura de la información, el primer pilar de la experiencia de usuario

La experiencia de usuario (UX, por su sigla en inglés) es una de las actividades digitales que mayor atención recibe en la actualidad. Esto se debe a la alta proliferación de dispositivos y a que las empresas están entendiendo que luchar únicamente en el campo de la atracción de nuevos usuarios, sin preocuparse por la retención, atenta contra sus resultados (atraer sin retener es costoso e ineficiente).

¿Qué es la experiencia de usuario? Existen dos ángulos para entenderla: desde la estrategia y desde la analítica. En el primer caso, el estratégico, es la planeación, diseño y seguimiento de los factores y elementos relativos a la interacción de las personas con los productos o servicios a través de los dispositivos; y en el segundo, el analítico, es la revisión y el análisis de la percepción, positiva o negativa, de las personas cuando interactúan con productos o servicios a través de los dispositivo. En pocas palabras, la experiencia de usuario es la actividad digital que sirve para planear y analizar la interacción entre humanos y aparatos.

La experiencia de usuario, en el caso digital, depende de la arquitectura de la información, la usabilidad, la accesibilidad y el diseño de la interacción. Las cuatro áreas de trabajo son igual de importantes y correlacionadas para la experiencia de usuario, tanto que el trabajo que se realice en una se reflejará en la otra (una buena arquitectura de la información aportará en la usabilidad y así sucesivamente).

Ahora bien, un buen punto de partida en el trabajo sobre la experiencia de usuario es la arquitectura de la información.

¿Qué es la arquitectura de información?

La arquitectura de la Información (AI) es un proceso de análisis e investigación que busca organizar, estructurar y clasificar información para que sea fácilmente encontrada, usada y comprendida por quien la necesita. Es decir, el arquitecto de la información es la persona que se encarga de que los usuarios entiendan con facilidad y rapidez la organización y ubicación de los contenidos dentro del sitio web.

Empezó a usarse en el contexto digital en 1959 por la empresa IBM, pero fue en 1975 que Richard Saul Wurman (fundador de TED talks) usó por primera vez el término “Arquitectura de la información” en su libro “Information Arquitects”; sin embargo, solo hasta 1998, Louis Rosenfeld y Peter Morville, publicaron “Information architecture for the world wide web” (el llamado “Libro del oso polar”) en el que adoptaron el término al ámbito del diseño de sitios web.

¿Cuales son los objetivos de la arquitectura de información?

Su principal objetivo es facilitar la comprensión y asimilación de la información y las tareas que ejecutan los usuarios en un espacio de información definido; adicionalmente, la arquitectura de la información busca:

  • Poner la información a disposición del usuario de una manera clara, relevante y significativa (hacer comprensible lo complejo).
  • Reducir las tasas de insatisfacción del usuario causada por no encontrar lo que busca o necesita.

Los 10 pasos de una buena arquitectura de la información

La arquitectura de la información pretende articular un conjunto de técnicas para ayudar al desarrollo y producción de espacios de información; con el fin de que la asimilación de contenidos por parte del usuario sea eficiente y efectiva, y para que el sitio sea accesible y usable. La arquitectura de la información se encarga de definir:

  1. El objetivo general y especifico del sistema de información (o sitio web).
  2. La definición, segmentación y entendimiento de cada una de las audiencias que usará la información.
  3. El diseño de la interacción entre usuario y herramienta.
  4. El diseño de la navegación de los contenidos.
  5. El etiquetado de los contenidos.
  6. La planificación, gestión y desarrollo de cada uno de los contenidos.
  7. La facilidad de búsqueda y el diseño de la interfaz de búsqueda.
  8. La usabilidad.
  9. La accesibilidad.
  10. La retroalimentación del resultado y los procesos de optimización.

Los 4 sistemas de la arquitectura de la información

Los arquitectos de información deberán trabajar al interior de la organización para construir una buena estructura de contenidos; aclarando y eligiendo 4 sistemas básicos:

1. El sistema de organización de la información: Aquí se debe definir como se agrupan (cuales serás las categorías y subcategorias), organizan (para que sea fácil de encontrar) y priorizan los contenidos (para hacer mas visible lo importante). Existen muchos tipos de sistemas de organización, pero los más reconocidos son: alfabético, cronológico, por temáticas, por ubicación geográfica, por solución o necesidad que satisface, por tipo de audiencia a la que va dirigido, por características físicas, entre otros.

2. El sistemas de navegación: La construcción de la forma como se navega tiene un alto impacto en la cantidad de contenidos consumidos por el usuario. De igual manera, las rutas de navegación ayudan a que el transito a través de la información sea natural y simple. Los principales sistemas de navegación son: jerárquico (cuando la información se anida en carpetas y subcarpetas), matricial (cuando se usan múltiples criterios jerárquicos) y contextual (cuando se usa la relevancia entre contenidos para sugerir la navegación).

3. El sistemas de etiquetado: La selección y unificación de rótulos agrega mecanismos de organización y navegación poderosos y versátiles al sitio web (que aportan alternativas de asociación y consumo de contenidos al usuario).

4. El sistemas de búsqueda: La fácil exploración, búsqueda y recuperación de los contenidos por parte del usuario es una de las principales tareas que debe realizar quien construye la arquitectura de información de un sitio web. Lo que no se encuentra no se puede utilizar.

6 consejos para mejorar la arquitectura de la información

1. Que sea lógico: Cuando construya la arquitectura de la información tome como ejemplo plataformas exitosas y usadas con frecuencia por su audiencia objetivo. El fin de esto es tratar de darle al usuario lo que ya entiende y lo que sabe usar.

2. Que sea escalable: Su sitio web y sus contenidos crecerán. Diseñe una arquitectura flexible que pueda escalar con el tiempo para incorporar nuevos contenidos, secciones o métodos de navegación.

3. Proteja los detalles: Muchas veces los pequeños detalles entorpecen la arquitectura de la información. Sea claro con la elección de las etiquetas, con el nombrado de los contenidos, con las palabras y las formas que usa para comunicar.

4. Limite las opciones: Ofrecer muchas alternativas puede causar confusión en los usuarios. Es preferible esforzarse para comunicar y educar al usuario a hacerlo para generar variantes de navegación o formas creativas de organización (No queremos decir que sea un error buscar formas creativas de organizar o navegar, sino que excederse en alternativas puede ser contraproducente).

5. Trabaje en su buscador: Un buscador robusto, intuitivo y que ofrezca siempre un resultado soluciona cualquier pequeño error en la arquitectura de la información.

6. Agregue herramientas: Existen muchas herramientas tecnológicas que apoyan la arquitectura de la información, úselas y promueva su uso. Un ejemplo de estas herramientas son: los mapas de sitio, la miga de pan, entre otras.

Bibliografía

Algunas definiciones fueron tomadas de Wikipedia.
CLAUDIA CHITIVA. Arquitectura de la Información (para sitios web profesionales). Oct, 2013. Slideshare.
DANI REGUERA BAKHACHE. Arquitectura de información de mi web. Ene, 2014. Slideshare.
VERONICA TRAYNOR. ¿Qué es la arquitectura de la información (AI)?. Abr, 2012. Blog.

¿Cómo deben las empresas enfrentar el marketing móvil?

El marketing móvil es una realidad ineludible para las empresas; esten o no involucradas en el mundo digital, las organizaciones deben estar sintiendo los efectos de la movilidad en los mercados locales y globales. Es evidente que los consumidores hoy están usando, cada vez más, sus dispositivos para conectarse con las marcas, para consultar información de productos o servicios y para tomar acciones de compra; igualmente es claro que la velocidad de apropiación de la movilidad, por parte de las audiencias, no muestra ningún síntoma de desaceleración para el futuro inmediato.

Esta realidad hace que las compañías, de cualquier tamaño y en cualquier sector, dirijan su atención hacia el marketing móvil; de lo contrario estarán dando a sus competidores una gigantesca oportunidad de construir una ventaja competitiva. Esto se convierte en un gran reto para las pequeñas empresas (y para algunas grandes que se rehusan a aceptar el presente digital) porque, mantenerse a la vanguardia de la constante evolución de la tecnología, no es fácil ni barato.

La proliferación de dispositivos diferentes en el mercado y la variedad controlada de sistemas operativos, es algo con lo que deben vivir y para lo que se tienen que preparar las organizaciones, asumiendo con inteligencia las dificultades en planeación e inversión a largo plazo que esto genera (porque cada una de las tecnologías tiene unas características únicas y especificas). Adicionalmente, esta volatilidad tecnológica, obliga una revisión periódica de la estrategia móvil, y en consecuencia de la digital, para evitar cometer errores o desperdiciar recursos.

Es que el marketing móvil va mucho más allá de la implementación de un diseño adaptativo (responsive design); la movilidad es una sumatoria de oportunidades que trasciende el acceso a las plataformas desde los dispositivos. La movilidad agrupa oportunidades que las empresas deben entender, apropiarse de ellas e implementarlas en su accionar de marketing para, de esta forma, lograr beneficios reales.

¿De qué tamaño es el mercado móvil global?

Entendamos primero la madurez del mercado móvil a nivel mundial. Aquí les presentamos algunos datos relevantes de la movilidad:

Y, ¿cómo está el mercado colombiano?

El mercado nacional es un mercado en desarrollo pero con muy buena proyección. Según el estudio Ericsson ConsumerLab publicado en Portafolio.co a finales de agosto de este año, Colombia tiene un poco más de 51 millones de líneas celulares activas (el 94% de la población cuenta con, al menos, un teléfono móvil).

Ese estudio nos entrega interesantes datos acerca de los teléfonos inteligentes en el mercado colombiano:

  • A finales de 2013 el 29% de los teléfonos eran inteligentes.
  • El 71% de las personas investigadas, que contaban con un teléfono básico, aseguró que su próximo teléfono sería inteligente.
  • El 65% de los teléfonos vendidos en el primer semestre de 2014 en Colombia fueron smartphones.

Complementemos esa información con una corta investigación, sin rigurosidad estadística en la toma de la muestra, que realizamos con nuestros amigos y seguidores en los medios sociales:

10 tácticas para enfrentar la movilidad

Conociendo ahora el tamaño del mercado y su importancia, les compartimos algunas tácticas que ayudarán a las empresas a incorporar el marketing móvil en su estrategia digital:

1. Evalúe su preparación

Si su empresa lleva recorrido en el mundo digital, inicie de inmediato el trabajo móvil; pero si apenas está empezando, es recomendable que primero resuelva lo básico, ubicando la movilidad como una segunda etapa. Parra arrancar su inmersión en la movilidad haga una revisión exhaustiva de sus capacidades y competencias, revise que tan preparado está usted y su organización para abordar a los usuarios móviles y desarrollar acciones de marketing en ellos.

2. Diseñe acciones específicas

Mezclar a todos sus usuarios digitales, sin segmentar su origen (smartphone, tablet, laptop p desktop), no evidencia una buena planeación de marketing digital. Es clave, si quiere atraer y cautivar al usuario móvil, construir acciones específicas para el, que se activen cuando este esté usando el dispositivo. Entregar beneficios puntuales a esos usuarios le ayudará a obtener viralidad.

3. Simplifique los contenidos

Quienes acceden a las plataformas desde dispositivos tienen algo en común: cuentan con poco tiempo para consumir información y generan una alta tasa de rebote si no encuentran rápidamente lo que buscan. Revise con detenimiento cuales de sus contenidos son cruciales y optimicelos en la versión móvil de su presencia digital. Verifique cuales son las funciones básicas y más requeridas por los visitantes desde dispositivos para adaptar sus menús y mejorar sus accesos rápidos.

4. Sea extremadamente astuto para crear mensajes

Tenga siempre presente que solo debe interrumpir a una persona, en su celular, cuando tenga algo realmente importante para comunicarle u ofrecerle. Cuide los mecanismos, las frecuencias y los momentos elegidos para ponerse en contacto con sus audiencias móviles y varíe las formas (alterne entre SMS, emails y mensajes desde redes sociales).

5. Complemente su accionar

Sumar alternativas de comunicación y contacto reduce la posibilidad de fatigar a las audiencias. Diseñar acciones de marketing en las apps móviles de las redes sociales más usadas por su audiencia o contratar publicidad y remarketing en dispositivos, puede servirle para no abusar de los mecanismos orgánicos. La publicidad y el remarketing, bien ejecutado en dispositivos, facilitará el proceso de persuasión y elevará las tasas de conversión de su estrategia digital.

6. Defina objetivos específicos

Cualquier esfuerzo de marketing, por simple que sea, consume recursos; y todo lo que gasta debe producir. Diseñar objetivos a mediano y largo plazo le ayudará a mantener un control sobre las inversiones. Igualmente, una analítica rigurosa le servirá para entender el comportamiento, intereses y necesidades de los usuarios móviles (lo cual le permitirá optimizar sus esfuerzos).

7. Sume herramientas

La movilidad ofrece un sinnúmero de alternativas interesantes para crear interacción e involucramiento; la georeferenciación, la realidad aumentada y los códigos QR son algunos ejemplos. Entenderlas, y agregarlas a los procesos de construcción creativa de las acciones de marketing, aportará ventajas competitivas muy poderosas.

8. Monitorice a sus clientes

La retención y fidelización de clientes en dispositivos es una tarea que exige mucho. Construya mecanismos para hacer seguimiento de los usuarios móviles, para diseñar tácticas que le ayuden a traer, a través de la viralidad, nuevos visitantes desde dispositivos.

9. Reglamente su accionar

El crear cercanía con las personas a través de los dispositivos abre para las empresas oportunidades 24/7 de contacto. Estas oportunidades debe ser reglamentada, al interior de la organización, para evitar la intromisión en momentos inoportunos (hecho que podría afectar la reputación de la empresa y generar el rechazo del usuario). Tener la capacidad no lo habilita para que entre en contacto con sus clientes en cualquier momento.

10. Piense en llamados a la acción atractivos

Uno de los principales beneficios de la movilidad es que permite la inserción de llamados a la acción digitales que pueden desembocar en resultados análogos (como una visita o una llamada telefónica). No pierda de vista que desde su smartphone, puede conseguir que los usuarios visiten una tienda cercana (usando la geolocalización) o inducir una llamada inmediata. Posibilite este tipo de actividades y agregue sensación de urgencia para mejorar la eficiencia de sus tácticas móviles.

Consejos finales

Cuando esté diseñando sus planes y actividades en dispositivos móviles tenga en cuenta:

  • Compórtese como usuario para evaluar su presencia.
  • Pídale a un desconocido que navegue su sitio móvil (hágalo como una prueba de usabilidad casera para optimizarlo y para validar su funcionalidad).
  • Pruebe su plataforma móvil desde la mayor cantidad de dispositivos y tipos de conexiones posibles (compruebe el desempeño en diferentes pantallas y velocidades de navegación).
  • Manténgase al tanto de los avances tecnológicos en movilidad (explore los nuevos dispositivos e investigue cada nueva versión de los sistemas operativos).
  • Estudie casos de éxito y fracaso en movilidad.