La arquitectura de la información es la base de la experiencia de usuario

Interioricemos la forma de crear una excelente arquitectura de la información para poder diseñar sitios web fáciles de consumir, entender y navegar.

la-arquitectura-de-la-informacion-es-la-base-de-la-experiencia-de-usuarioLa experiencia de usuario —UX, acrónimo en inglés de User Experience— es una de las actividades digitales que mayor atención recibe en la actualidad. Esto se debe a la proliferación de dispositivos que hoy tiene el mercado y a que los negocios han entendido que luchar únicamente en el campo de la atracción de nuevos usuarios, sin preocuparse por la retención, atenta contra sus resultados futuros; porque atraer sin retener es costoso e ineficiente.

Continuar leyendo

Las principales tendencias de diseño web de la actualidad

Asimilemos los patrones que hoy son comunes en el diseño de sitios web que podrían impactar de forma positiva una estrategia digital.

las-principales-tendencias-de-diseno-web-de-la-actualidadA lo largo de los últimos años, hemos participado de incontables reuniones en las que se planifica un esfuerzo digital. Con líderes y empresas de muchos sectores de la economía, hemos tenido discusiones sobre cómo debe ser la estrategia digital de una compañía, cómo se debe confeccionar su ecosistema digital y cuáles son las buenas y malas prácticas en estos entornos. Esta circunstancia nos ha permitido tipificar esas reuniones. ¿Cómo son? Por lo general, comienzan con un diagnóstico interno, en el que se examinan las capacidades y se definen los recursos. Luego, se revisan los competidores, se estudian sus fortalezas y debilidades. Por último, se establecen unos objetivos. Ese ejercicio simple de planificación, que se repite en la mayoría de las reuniones, desemboca en la selección de un ecosistema digital —que no es otra cosa que la determinación de las plataformas, herramientas y acciones en las que se desarrollará la actividad—. Y ese ecosistema digital, en casi la totalidad de los casos, incluye el diseño de un sitio web.

Continuar leyendo

Los 10 temas críticos en la optimización para buscadores

Instrúyase en los conceptos que mayor impacto tienen en la optimización de un sitio web para motores de búsqueda.

what-SMEs-can-expect-from-value-creating-innovation-management-consulting¿La optimización para motores de búsqueda ha muerto? No, definitivamente no. El SEO —sigla de search engine optimization— sigue vivo y aportando mucho a los ecosistemas digitales, sobretodo a aquellos que se cimientan en acciones diversas y consistentes. Aclaramos esto porque tristemente muchos líderes de negocios han cometido el error de abandonar su trabajo en el sitio web corporativo, para concentrarse exclusivamente en la presencia social de sus negocios.

Continuar leyendo

Los 6 consejos que los profesionales del marketing tienen para los diseñadores web

Presentamos las más relevantes sugerencias que los profesionales del marketing le pueden ofrecer a los diseñadores de sitios web para que la relación entre estas dos áreas fluya con tranquilidad.

los-6-consejos-que-los-profesionales-del-marketing-tienen-para-los-disenadores-webHacer coincidir a los encargados del marketing con los responsables de diseño web es, hoy por hoy, una labor titánica para las empresas. Esto sucede porque cada uno de los implicados en la creación de herramientas digitales —profesionales del marketing y diseñadores— empujarán para su lado y se concentrarán en buscar el resultado que beneficia a su área específica. El resultado de esta división es una confrontación, que no necesariamente es negativa para la organización, pero puede serlo si una de las dos áreas se impone, si no se llega al consenso con inteligencia y voluntad.

Continuar leyendo

Un experimento sencillo que ayuda a optimizar los sitios web

Aprenda a hacer un prueba casera de uso para encontrar los aspectos mejorables en un sitio web y dar un paso adelante en la estrategia digital.

un-experimento-sencillo-que-ayuda-a-optimizar-los-sitios-web

Cada que alguien nos cuestiona sobre cuáles son los componentes básicos y prioritarios de un ecosistema digital para un negocio decimos que el sitio web es imprescindible. El sitio web es el punto de partida y la pieza crítica de cualquier estrategia digital, nos cuesta concebir un plan sin esta importante herramienta. Esta línea de pensamiento, la refuerza otro argumento: creemos también que resulta difícil consolidar una presencia sólida en los escenarios digitales realizando acciones únicamente en plataformas de terceros. ¿Por qué? Simple, porque allí, en esas plataformas, no se tiene el control —algo que impide la planificación a largo plazo— y obliga a adaptar el accionar a las leyes y normas impuestas por ese tercero. Por lo tanto, basar la estabilidad y proyección de una estrategia digital en un lugar con limitaciones, así las reglas sean las mismas para todos, no es una buena idea.

Continuar leyendo

¿Qué es lo que quiere el consumidor digital en la actualidad?

Entienda algunas de las características trascendentales de los actuales usuarios digitales, para poder acercase a ellos de la forma correcta.

segmentacionLa clave, hoy y siempre, para construir una estrategia exitosa en el mundo digital es alcanzar una estrecha cercanía con los clientes. Dicho de otra manera, para triunfar en el actual mercado es necesario conocer profundamente las características, intereses y expectativas de las audiencias. No es posible lograr buenos resultados si no se conoce bien al interlocutor y, mucho menos, si no se le entiende. Es por esto que, el estudio y análisis del consumidor digital —que en el presente es el principal tipo de consumidor para los negocios— es una asignatura obligatoria para todos los profesionales del marketing.

Continuar leyendo

Los 12 errores de usabilidad más comunes en un sitio web

Identifique los fallos más recurrentes que cometen las empresas en usabilidad cuando construyen una plataforma web.

errores-de-usabilidadUna de las disciplinas más volátiles y cambiantes del mundo digital es el diseño de interfaces y sitios web. Las tendencias y modas en la creación de plataformas digitales evoluciona al mismo ritmo frenético de los dispositivos. Por esta razón, los sitios web se han convertido en activos que deben ser renovados frecuentemente, que deben ser refrescados casi que anualmente para poder cumplir con las exigencias en usabilidad y experiencia que exigen los usuarios de hoy. Las organizaciones que no interioricen esta realidad verán afectados sus resultados y serán castigadas por los consumidores.

Continuar leyendo

Cómo mejorar la confianza: pequeños trucos para generar credibilidad desde el sitio web

Repase los mejores consejos para lograr que el sitio web le aporte a una compañía en la generación de confianza y en la construcción de credibilidad.

confianzaPor definición, confianza es una palabra que se asocia con la esperanza que un individuo u organización es capaz de depositar en alguien o algo. Es decir que la confianza es un concepto que está estrechamente ligado a la credibilidad, la familiaridad y la fe. Pero la confianza no es un activo que se restringe a las relaciones sociales o personales, sino que es algo que hoy tiene una vital importancia en el mundo de los negocios.

La generación de confianza es una de las preocupaciones más recurrentes para los profesionales del marketing y directivos corporativos en general. Aportar a la credibilidad de la empresa y, como consecuencia de esto obtener mejores resultados comerciales, es una tarea fundamental que debe afrontarse con decisión en el diseño del plan estratégico de la compañía.

Ante la evidente obligatoriedad de construir confianza, los entornos digitales no pueden ser eximidos de responsabilidades; por el contrario, deben ser vistos —por la organización— como herramientas eficaces para lograr avances significativos en este aspecto.

Continuar leyendo

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.

12