Diseñando la web física

La Internet de las Cosas –Internet of Things, o IoT– es la promesa de que en algún momento los objetos cotidianos que nos rodean estarán conectados a la red mundial de datos. Aunque esta visión aún no llega por completo, la Web Física –Physical Web– es un paso importante para volverla tangible.

La Web Física (Physical Web)  podría sonar como un intento de darle un nombre distinto al Internet de las Cosas, aunque es realidad es una parte de ésta. Internet y la Web no son lo mismo, son diferentes entidades donde la primera se refiere a la tecnología e infraestructura que hace posible la red mundial de comunicación; la segunda se refiere a un servicio de transmisión de datos con la que se puede interactuar a través de un navegador web, o browser.

De  manera análoga, Internet de las Cosas es una colección de objetos inteligentes que se están conectando rapidamente a Internet, y la Web Física nos permite tener acceso e interactuar con esos objetos a través de un navegador web de una manera simple e intuitiva.

Web física en un iPhone  Web física en Android

Una solución de Web Física se basa en tres componentes:

1. Objetos inteligentes

El primer componente de la Web Física son esos objetos inteligentes que mencioné antes, que son pequeños dispositivos capaces de emitir una señal de corto alcance usando Bluetooth a otros dispositivos que se encuentren cerca, como smarthphones, para interactuar con ellos con información que obtienen de Internet.

Beacon comunicándose con una app
Un beacon comunicándose con una app

Los beacons son un buen ejemplo de estos objetos, además de que son baratos y sencillos de instalar. Algunos beacons tienen sensores que les permiten detectar su ubicación geográfica, medir la temperatura ambiente donde están instalados o detectar si otros dispositivos alrededor suyo se están acercando o alejando de ellos.

Tal vez el principal problema de los beacons es que para proveer una experiencia de usuario enriquecida dependen de que los usuarios tengan instalada un app en su móvil con capacidades para reconocerlos y comunicarse con ellos. Si el usuario no tiene la app o no puede instalarla, el beacon es invisible para él.

2. Direcciones web

URLPara resolver este problema, la Web Física utiliza como segundo componente una dirección web o URL. Los objetos inteligentes en la Web Física envían constantemente una dirección web que cualquier dispositivo cercano al objeto puede recibir; la idea es replantear los sitios web móviles para que muestren información relevante a un usuario en una ubicación física, por ejemplo: junto a una máquina expendedora, un poster, una parada de autobús o una cafetería, sin necesidad de que los usuarios descarguen una app primero sino que utilicen una app que ya está en su dispositivo: su browser.

3. El navegador web

Navegadores web para móvilEl tercer elemento de la Web Física es el navegador web del smartphone, que toma el lugar de la app en esa conexión con un beacon e interpreta la dirección que se le envía para abrir una página móvil específica para el contexto del usuario.

El navegador es capaz de detectar los beacons de Web Física alrededor suyo y mostrar su información ordenada por una combinación de factores como proximidad, intensidad de su señal, las preferencias del usuario, su historial de búsqueda y de navegación.

Al seleccionar un enlace de Web Física en una parada de autobús podría mostrar los horarios de los autobuses y un mapa con sus rutas. Una máquina expendedora podría ofrecer una página web para seleccionar y comprar un producto, o un parquímetro puede dirigir a su usuario a una página para pagar por tiempo de estacionamiento:

A donde sea que cada dirección web dirija, toda la interacción ocurrirá dentro del navegador web sin necesidad de que el usuario descargue una app especial para cada experiencia.

* * *

Comenzar a experimentar con la Web Física es muy sencillo: toda la información técnica está disponible en GitHub y hay una guía para comenzar desde cero en ese mismo sitio. Muchos beacons comerciales como BKON, Estimote y GemTot ya son compatibles con sus protocolos.

Aunque el planteamiento de la Web Física suena simple, aún se tienen que resolver los problemas que ya existen con la web móvil como privacidad, SPAM, problemas de usabilidad y de conectividad antes de que el concepto despegue del todo.

La idea de la Web Física es crear un estándar abierto que eventualmente pueda integrarse en cada dispositivo y navegador, y así comenzar a conectar la web con el mundo allá afuera.

 

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

Aplicaciones web progresivas, el retorno de la web al móvil

Durante años los sitios web ha sido relegados en los dispositivos móviles sobre las apps nativas debido a problemas de rendimiento, compatibilidad y, sobre todo, de conectividad. Las aplicaciones web progresivas (progressive web apps) prometen resolver estos problemas.

Las aplicaciones web progresivas (progressive web apps) son un acercamiento al desarrollo de apps para móviles que combinan lo mejor de la web y lo mejor de las apps nativas. Estas nuevas web apps son útiles para sus usuarios desde la primera visita en un navegador web, sin necesidad de instalar nada más.

A medida que el usuario crea una relación con la app de manera progresiva, ésta se vuelve más poderosa y útil: carga rápidamente, incluso en redes lentas o cuando el dispositivo está desconectado, puede enviar notificaciones, tiene un icono en la pantalla del móvil y funciona a pantalla completa.

Funcionamiento de una app web progresiva

Una aplicación web progresiva es:

  • Estándar – utiliza la misma plataforma y tecnología que se utiliza para crear páginas web: HTML, CSS y Javascript.
  • Progresiva (¡obvio!) – funciona para todos los usuarios, independientemente de cuál navegador web o sistema operativo utilice, porque está construída para mejorar progresivamente desde el principio.
  • Responsiva – se ajusta a cualquier resolución y formato de pantalla: escritorio, móviles, tabletas, televisiones o lo que sea.
  • Independiente de la conexión – está mejorada con service workers para funcionar sin conexión o en redes lentas con conexiones intermitentes.
  • Como una app nativa – el usuario la usará como una app, con soporte para navegación e interacción con gestos.
  • Fresca – siempre estará actualizada gracias al proceso automático de actualización del service worker.
  • Segura – trabaja sobre HTTPS para prevenir que alguien intercepte datos y para asegurarse de que el contenido no ha sido manipulado por otros.
  • Descubrible – es identificable como una “aplicación” gracias al manifiesto de la W3C y al registro de funciones del service worker, permitiendo a los buscadores web encontrarlas.
  • Interactiva – hace fácil interactuar con ella incluso cuando está cerrada con características como notificaciones tipo push.
  • Instalable – le permite a sus usuarios crear accesos directos en la pantalla de su teléfono sin necesidad de una tienda de apps.
  • Enlazable – se pueden compartir fácilmente usando su dirección en la web (URL) y no requiere procesos de instalación complejos.

Ya existen casos de empresas que han comenzado a implementar apps web progresivas, como AirBerlin o Flipkart con resultados bien documentados en mejoras de experiencia de usuario, retención y conversión.

Apps web progresivas

Google creó un taller para aprender a crear aplicaciones web progresivas desde cero, incluyendo consideraciones de diseño y detalles de implementación para asegurar que tus web apps cumplan todos los principios que mencioné arriba.

Las aplicaciones web progresivas son una oportunidad para regresar a la web su importancia dentro de dispositivos móviles -o en cualquier otro dispositivo-, y de romper los problemas y  dependencias de compatibilidad que tienen las apps nativas.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

La flojera es adaptativa

Un principio básico que he aprendido al practicar diseño de experiencia de usuario es comprender que los humanos, por lo general, escogeremos lo que sentimos como el camino de menor resistencia.

Este simple hecho es responsable de varias de las fallas más frustrantes en nuestros diseños: usuarios que no leen las instrucciones, que no completan los tutoriales, que no llenan formas correctamente hasta casos más complejos en los que los usuarios pasan por alto alguna funcionalidad clave o no utilizan todas las herramientas a su disposición.

El camino de menor resistencia”, no tiene una definición absoluta porque depende del contexto. No todos los usuarios o casos de uso se benefician de una simpleza absoluta. El camino de menor resistencia, o en otras palabras, nuestro nivel de pereza, depende de la tarea que estemos buscando lograr, nuestras expectativas de cuánto esfuerzo estamos dispuestos a aplicar en lograrla y las opciones que tenemos disponibles para hacerlo.

Photoshop es un buen ejemplo. Adobe, la empresa que desarrolló el programa, podría determinar sin problema alguno las 50 o 100 acciones más comunes y simplificarlas, pero en este caso los usuarios que dependen de la flexibilidad y complejidad de la misma herramienta, creo yo que no se beneficiarían de una reducción en las herramientas disponibles ya que cada herramienta tiene un uso para alguna tarea específica y aún cuando no usen todas todo el tiempo, su popularidad y liderazgo como software de diseño gráfico ha definido sus funcionalidades como el estándar a seguir.

Herramientas disponibles en Photoshop
Herramientas disponibles en Photoshop

En el otro extremo tenemos Instagram, cuyo éxito y rápida adopción se debe, entre otros factores, a su simpleza de uso y que hace sentir hasta al usuario más novato como un fotógrafo profesional. Teru Kuwayama, fotógrafo profesional dijo para The Telegraph : “Obviamente es horrible ser un fotógrafo profesional y enfrentar la inconveniencia de perder tu pedestal y tu modo de vida ante una aplicación de $2, pero eso no significa que sea malo para la fotografía en general.”

El  selector de filtros de Instagram permite editar fotos con un tap.
El selector de filtros de Instagram permite editar fotos con un tap.

Pensando en otro ejemplo (tomado de un artículo de Paul Boag), últimamente muchos vehículos, como los de BMW, cuentan con una aplicación con la que pueden encender el auto. El proceso para hacerlo, usando la aplicación es:

  1. Sacar el teléfono del bolsillo.
  2. Encender la pantalla.
  3. Desbloquear el teléfono.
  4. Encontrar la aplicación del auto.
  5. Iniciar la aplicación del auto.
  6. Buscar la función de abrir el auto.
  7. Seleccionar la opción.

La alternativa es:

  1. Sacar la llave de mi bolsillo.
  2. Presionar el botón de “abrir”.

O aún mejor:

  1. Si el vehículo tiene apertura por proximidad, el usuario sólo necesita acercarse al auto con la llave en la bolsa para desbloquearlo.
Aplicación de BMW ConnectedDrive
Aplicación de BMW ConnectedDrive

La primera opción es mucho más compleja que la segunda, lo que puede afectar el volumen de usuarios que la consideran conveniente. Y los usuarios que sí la utilizan puede que olviden la novedad al poco tiempo y eventualmente optar por la solución más simple. Y es que eso es exactamente el punto: en mi ejemplo de Photoshop vs Instagram la tarea es aparentemente la misma: obtener una imagen, pero también afectan los otros factores que mencioné: cuánto esfuerzo estamos dispuestos a invertir en lograr nuestro objetivo y las opciones que tenemos disponibles para lograrlo.

Un diseñador profesional que utiliza Photoshop como herramienta de trabajo está mucho más dispuesto a invertir tiempo, esfuerzo y hasta dinero con tal de tener una imagen de mayor calidad que un usuario en Instagram, el conflicto viene cuando le damos un nivel de complejidad nivel Instagram a un usuario que en realidad está buscando en Photoshop.

En UX, a veces se menciona que “menos es más”. Para mi, el minimalismo en las interfaces y experiencias que desarrollo es una cualidad fundamental, pero también es importante recordar que menos, en algunas situaciones puede simplemente ser menos. No todas las interfaces son iguales para todos los usuarios.

Otro ejemplo me viene a la mente: Snapchat. Uno de los elementos que más me gusta de esta aplicación es cómo han logrado un filtro “natural” para solo ser usable por usuarios que entienden de qué va, generalmente usuarios jóvenes. El UX de Snapchat es muy sencillo, hay una pantalla de Snap y una pantalla de Chat, la principal barrera de uso no es su interfaz, sino el hecho de que si los usuarios no piensan “en hablar con imágenes” simplemente no le encuentran propósito ni valor.

Los creadores de Snapchat entienden que, para usuarios de cierta edad, las imágenes existen para “conservar” un momento o “recordarlo”, porque ese fue el uso que aprendieron en un mundo en que las cámaras tenían una cantidad limitada de exposiciones o que hacían complejo el proceso de capturar una imagen. Estos usuarios de hecho esperan un mayor nivel de complejidad en Snapchat, esperan que el proceso de capturar una imagen sea más especial, más memorable y que haya alguna manera de conservarlas (aunque nunca las vuelvan a ver) y por lo tanto “no le agarran la onda” y no utilizan la aplicación.

La base de usuarios real de Snapchat son usuarios que aprendieron que tienen un acceso tan fácil y cercano a tomar fotos que las pueden usar para tareas tan burdas como simple comunicación cotidiana. A ellos no les importa conservar cada imagen y cada momento porque es el equivalente a querer conservar cada conversación por más irrelevante que sea. Para estos usuarios Snapchat es el camino de menor resistencia para comunicarse, no tienen que escribir, solo deben tomar una foto y listo.

Estos son algunos ejemplos sencillos, pero la lección es vital para entender de fondo lo que significa hacer diseño de UX: tenemos que trascender los mantras de “menos es más” y “simplifica” para revelar el verdadero foco de lo que hacemos, que es entender exactamente qué tanto “menos” o qué tan “simples” desarrollar las experiencias, ya que ésta es información que solo nuestros usuarios y la investigación que hagamos de sus necesidades nos pueden enseñar. Nunca subestimemos la pereza de nuestros usuarios pero tampoco sobre-estimemos el camino de menor resistencia, porque los caminos no son iguales para todos.

Trabaja como Planner en SCLBITS. Es curador de UX Mexico y parte del equipo de UX Nights.