Pasar al contenido principal
×

¿Cómo crear una página Web para hacer dinero? Parte 4 - Arquitectura de información y experiencia de usuario.

Un adecuado proceso de construcción comienza con la planeación de la arquitectura de información y el diseño de experiencia de usuario.
Mujer trabajando en wireframes
Mujer trabajando en wireframes

Texto Equipo Pixel Foto por Kelly Sikkema | Unsplash

En todo proceso de consolidación de una presencia en Internet hay que generar diversos instrumentos.

Desde una sencilla página Web, hasta un portal o una aplicación, crear un instrumento en la Web exige un proceso que puede ser más o menos complejo de acuerdo con la escala, pero que casi siempre incluye al menos dos etapas: planeación y construcción.

Parte 4. Planeación: Mapa de navegación y experiencia de usuario.

Planear cualquier instrumento parte del objetivo que se definió para éste.

Recordemos el ejemplo que hemos venido trabajando en esta serie de artículos desde el inicio: “entrega de mercados de frutas y verduras a domicilio lavados y desinfectados”.

Para este ejemplo, definimos en la anterior entrega de esta serie de artículos, el siguiente objetivo para nuestra presencia en línea: “Consolidar en 3 años una tienda virtual que reciba un mínimo de 10.000 solicitudes de entrega de mercados lavados y desinfectados por mes, para jefes del hogar de estrato socioeconómico medio en la ciudad de Bogotá”.

Según nuestra “matriz estratégica”, la “cosa” que debemos construir es una tienda virtual.

Con esto claro, hay que empezar planeando la tienda virtual en el papel, como quien traza los planos de un edificio antes de construirlo.

Los “planos” en el caso de un instrumento Web están compuestos por dos elementos: arquitectura de información y experiencia de usuario.

 

Arquitectura de información

Es el “arte - ciencia” de organizar la oferta de contenidos y servicios de un instrumento en Internet para que tenga sentido frente al cliente objetivo.

Para entender la arquitectura de información, hay que aclarar que un instrumento en Internet ofrece dos elementos principales: contenidos y servicios. Un contenido es un texto, una galería de imágenes, un video o cualquier otra pieza de información que se publica, mientras que un servicio es una operación o transacción que se permite a un usuario, por ejemplo: recibir un mensaje de correo electrónico, consultar multas de tránsito, comprar un producto, reservar un vuelo o enviar un mensaje instantáneo.

La idea inicialmente es establecer cuáles contenidos y servicios va a tener un determinado instrumento en Internet para cumplir con su objetivo y cómo sería la forma más lógica de organizarlos para que la estructura resultante sea comprensible para el usuario.

Tanto para hacer la lista como para organizarla existen varias opciones:

  1. Indagar con el usuario. En este caso, se hacen preguntas al cliente objetivo como: ¿qué contenidos o servicios necesita de cierta solución? y ¿cuáles son prioritarios para él? Esto se puede llevar a cabo a través de simples entrevistas directas con apenas un puñado de participantes o mediante complejos estudios, sin embargo, lo importante es lograr un entendimiento de la terminología del cliente objetivo y de la forma en que éste entiende la jerarquía de los contenidos y la lógica de los servicios.
     
  2. Mirarse el ombligo. Otra forma es que quien mejor conoce el modelo de negocio y ha definido entre otros el objetivo central de la presencia en Internet, se aventure haciendo su propia lista organizada de contenidos y servicios. Es una óptica un tanto limitada, pero es una visión que, complementada con otras, resulta determinante.
     
  3. Mirar a la competencia u otras fuentes. Se trata de revisar cómo la competencia directa tanto en Internet como en el mundo análogo ha organizado su propia oferta de contenidos y servicios en canales digitales similares. Si se revisan suficientes fuentes, es posible encontrar patrones e ideas útiles para definir una estructura propia adecuada.
     
  4. Analizar las búsquedas. Una fuente de información cada vez más relevante son las palabras claves presentes en las búsquedas que hacen quienes exploran en Internet los contenidos o servicios relacionados con el modelo de negocio. Esta es una forma muy atractiva y viable de al menos conocer cómo es que las personas denominan, entienden o asocian la información relacionada con un modelo de negocio en particular, sin los sesgos de ningún intermediario o metodología.
     
  5. Una mezcla de todas. No obstante, casi con seguridad, la mejor forma de hacer tanto el listado como su organización, es conciliar una estructura a partir de una mezcla de todas las anteriores fuentes.

Aclaración: los contenidos se organizan en un índice, mientras que los servicios se plasman mejor a través de pasos en un flujo de trabajo.

En nuestro ejemplo podríamos haber llegado a un resultado como el siguiente:

  • Contenidos:
    • Frutas (catálogo de todas las frutas disponibles)
      • Banano
      • Fresa
      • Mora
    • Verduras (catálogo de todas las verduras disponibles)
      • Cebolla
      • Tomate
      • Berenjenas
    • Soporte
      • Servicio al cliente
      • Preguntas frecuentes
      • ...
    • Nosotros
      • Nuestro equipo
      • ¿Cómo es nuestro proceso de limpieza?
      • ¿Cómo es nuestro proceso de desinfección?
      • Contacto
      • ...
    • Opciones para un menú adicional
      • Términos y condiciones
      • Política de tratamiento de datos personales
      • ...
  • Servicios:
    • Solicitar pedido
      • Confirmar ítems → Ver cesta de compras → Suministrar datos del envío → Pagar → Confirmar pago.
    • Revisar pedido
      • Revisar entrega
        • Iniciar sesión → ubicar pedido → revisar estado de entrega
      • Revisar empacado y desinfección
        • Iniciar sesión → ubicar pedido → revisar evidencia de desinfección
    • Solicitudes de soporte
      • Crear un tiquete de soporte
        • Iniciar sesión → crear tiquete → revisar confirmación
      • Hacer seguimiento a su tiquete de soporte.
        • Iniciar sesión → ubicar tiquete → crear comentarios o respuestas
    • Cuenta de usuario
      • Iniciar sesión
      • Registrarse
      • Recuperar contraseña

El anterior listado se conoce como mapa de navegación y describe tanto el nombre como la jerarquía y orden de las secciones de contenido y servicios incluidos en el instrumento planificado.

Primer consejo: aunque este mapa de navegación puede ser ajustado con el paso del tiempo, se debe asignar al principio del proyecto de construcción suficiente tiempo como para discutirlo y analizarlo. Tomarlo a la ligera puede ser costoso y frustrante a mediano o largo plazo.

 

Experiencia de usuario

Un instrumento es usualmente un cúmulo o secuencia de pantallas que un usuario utiliza para lograr ciertos resultados.

El diseño de experiencia de usuario tradicional se centra en determinar cómo será el aspecto y funcionalidad de dichas pantallas.

¿De dónde salen las pantallas que se deben considerar?

  • Respuesta corta: del mapa de navegación, pues cada sección de contenido o servicio prevista dentro de éste es una potencial pantalla.

Cada pantalla deberá pensarse para que cumpla con una función y para que la suma de estas funciones permita que se desarrolle el objetivo central del instrumento.

En nuestro ejemplo, la pantalla “frutas (catálogo)” debería permitirle a un usuario ver adecuadamente la oferta de frutas disponible; otra pantalla como la de “confirmar ítems” dentro del servicio “solicitar pedido”, debería ofrecerle al usuario la opción de confirmar que el ítem seleccionado corresponda con la elección efectuada; la pantalla “ver cesta de compras” servirá para que el usuario pueda tener un resumen de todos los ítems seleccionados y así sucesivamente hasta que en su conjunto el instrumento cumpla con su objetivo central.

¿Cómo se diseña la experiencia de usuario de cada pantalla?

  • Respuesta corta: una a la vez, aunque todas parten de un mismo molde.

Cada pantalla se diseña con el fin de que sea lo más simple de usar posible.

Un usuario debería poder ejecutar la función principal prevista para una pantalla, en nuestro ejemplo: presentar adecuadamente la oferta de frutas disponible o ver un resumen de todos los ítems seleccionados, en el menor tiempo posible, sin obstáculos, ni barreras.

Y es que de eso se trata, de hacer que el usuario entienda sin necesidad de explicárselo, cuál es la función de cada pantalla.

Ejemplo de la interfaz de usuario de una tienda en línea. Para ello, al menos considere:

  1. Que todo es más fácil, si ya se sabe usar. Hay que emular experiencias de usuario comunes en vez de inventar siempre algo nuevo. Si, por ejemplo, se sabe que el catálogo de productos en una tienda virtual se parece a la siguienteanterior imagen, no se debería intentar una interfaz radicalmente diferente solo con el fin de ser original.
     
  2. Analizar qué hace y qué valora el usuario. Si la pantalla representa una sección o servicio que no tiene antecedentes -lo cual es raro-, se sugiere indagar con el usuario para obtener un diseño de experiencia adecuado. Esto se puede lograr, tratando de poner a prueba diversos diseños y viendo cuál de estos tiene mejor aceptación que otro.
     
  3. Más es menos. Hay que diseñar pantallas que cumplan con una sola función principal a la vez, asegurándose de poner en éstas aquello que realmente se necesita. Existe la tentación de llenar las pantallas con mucha información, pero esto en vez de atraer, confunde y disuade al usuario de ejecutar la función principal.
     
  4. Lo más importante primero. La acción central de cada pantalla deberá ser lo que primero que vea un usuario y en lo posible también lo único.
     
  5. La navegación es un mal necesario, como rezaban los cánones, por lo que se debe considerar que sea lo más sutil posible, especialmente en pantallas que permiten transacciones.
     
  6. La experiencia de uso varia. Un error muy común es considerar que una pantalla va a ser utilizada por un único tipo de usuario. Cada persona tiene condiciones, dispositivos y situaciones particulares. Una experiencia de usuario exitosa se centra en considerar esas diferencias y en consecuencia intenta ser lo más universal y accesible posible.
    1. Universal: Un usuario puede usar una determinada pantalla en su móvil, tablet o equipo de escritorio, por lo que hay que pensar en las implicaciones de ello. Si el cliente objetivo prioriza mayoritariamente el acceso a través de alguno de estos dispositivos, hay que enfocarse en éste, sin dejar de adaptar dicha pantalla a los demás formatos.
    2. Accesible: Un usuario puede tener barreras propias o adquiridas para usar una pantalla en particular, por ejemplo, un acceso muy lento a Internet o una condición visual específica. Para conocer cómo la accesibilidad interviene en la experiencia de usuario, lo invitamos a conocer los lineamientos básicos de ésta a través de una serie de artículos enfocados en una explicación resumida de sus principios básicos.

Al final de este proceso, lo que se obtiene usualmente es un boceto de cada pantalla, es decir algo similar a esto:

Ejemplo de un modelo de alambre o boceto de una pantalla.

La suma de todas las pantallas diseñadas configurará la experiencia de usuario de un determinado instrumento para Internet.

Segundo consejo: enfoque el trabajo en las “pantallas críticas” que le permitan cumplir con su objetivo central.

En nuestro ejemplo, todas las pantallas que intervienen en el proceso de selección, elaboración, despacho y pago del pedido son las más críticas para lograr el objetivo central. Otras pantallas como la de la sección de términos y condiciones o la de inicio de sesión, son mucho menos trascendentales y por lo tanto pueden resolverse de una manera mucho más obvia.

Este grupo de “pantallas críticas” debe ser el centro del trabajo de aquí en adelante.

Aclaración: Una experiencia de usuario tampoco necesita cubrir obligatoriamente muchos detalles visuales. Aunque puede llegar hasta bocetos muy elaborados con un diseño finalizado, lo más importante es lograr una adecuada organización de los elementos dentro de las pantallas.

¿Cómo ejecutar esta tarea?

Parece mucho trabajo y de hecho puede serlo, sin embargo, hay al menos tres opciones para abordarlo:

Hágalo usted mismo.

Un emprendedor puede aventurarse a crear la experiencia de usuario por su cuenta, sin embargo, esto requiere de una profundización acerca de lo que significa diseñar la apariencia y funcionalidad de una pantalla o interfaz de usuario. En otras palabras, hay que estudiar y aprender a partir del error.

Es de las tres alternativas la más costosa en términos de tiempo, sin embargo, puede ser un ejercicio interesante para hacerlo por primera vez y de esa manera adquirir criterios para que en el futuro se pueda gestionar a través de un contratista con mayor solvencia y criterio.

Portada del cuaderno WebTercer consejo: en Pixel creamos como parte de nuestros programas de formación un cuaderno Web que apoya el proceso de creación de las experiencias de usuario para quienes se aventuran en esa disciplina por primera vez.

Contratarlo

Es quizás la opción más común, sin embargo, no exime a quien hace el encargo de comprender todo lo que significa y por ello esta sección actúa como línea de base para que tenga elementos conceptuales suficientes como para interactuar con los profesionales a quienes encargue su producción.

Cuarto consejo: Aún en este escenario, es importante que quienes conciben el instrumento hagan el ejercicio de pensar y analizar la función de cada pantalla, para crear una mejor sinergia con el proveedor y evitar así que éste imponga su voluntad sin vigilancia.

No obstante, el papel del empresario o emprendedor deberá sumar en vez de restar evitando sesgos innecesarios en el proyecto.

Ayudándose de una Inteligencia artificial

Hoy por hoy, la experiencia de usuario puede ser resuelta sin mayores “angustias” gracias a herramientas que facilitan su ejecución o simplemente la automatizan. Esta alternativa está disponible a través de algunas soluciones en la nube que permiten la auto construcción de los instrumentos ofreciendo cada vez mayores capacidades para resolver la experiencia de usuario satisfactoriamente.

Más adelante, cuando se aborde la construcción en sí misma, se mencionarán cuáles.

¿Cómo evaluar una buena experiencia?

Más adelante en esta serie, se abordará el tema de la analítica Web, en donde se darán sugerencias específicas para medir la efectividad del instrumento en conjunto, incluida la experiencia de usuario.

Sin embargo, más allá de ese método, se sugiere hacer revisiones cuando la experiencia de usuario apenas está siendo modelada:

  1. Concepto. Una validación posible consiste en tomar los bocetos de las “pantallas críticas” y preguntarles a los clientes objetivo: ¿para qué creen que sirve cada pantalla? Si mayoritariamente aciertan, se podrá asumir que “funciona”, si no, hay que revisar aquellas que no pasen la prueba y validarlas de nuevo hasta que lo consigan.
     
  2. Barreras y detalle. De nuevo, se puede consultar a los clientes objetivo para preguntarles: ¿qué elementos sobran o son confusos en determinada pantalla?, siempre y cuando hayan acertado en su función. Si un grupo importante de personas reporta un elemento como excesivo o confuso, hay que revisar tan solo ese detalle, hasta que el problema sea superado.

Quinto consejo: nunca implemente un instrumento para Internet sin haber validado al menos de forma inicial la experiencia de usuario. Dice la sabiduría popular: “mejor una vez colorado, que cien descolorido”.

Finalmente, siempre hay que documentar este proceso, pues tendrá que ser revisado en el futuro en la medida en que el proyecto crezca, madure o se transforme.


 

Siguiente parte: la construcción o implementación.