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.

Diseñando con Design Sprint

Design Sprint es un proceso de cinco días que sirve para resolver las preguntas críticas de un producto utilizando diseño, prototipado y la evaluación de ideas con usuarios finales.

Este proceso fue desarrollado en GV (antes Google Ventures) por Jake Knapp y mejorado por Braden KowitzMichael MargolisJohn Zeratsky y Daniel Burka como una colección de buenas prácticas de design thinking, estrategia de negocios, innovación, análisis de comportamiento y otras, empaquetadas en un proceso que cualquier equipo puede utilizar. En el Vol. XVII de UX Nights en la Cd. México había hablado de este tema, y me pareció que valía la pena retomarlo.

Al trabajar en un design sprint es posible recortar el ciclo de análisis e investigación a unos cuantos días, y el equipo de trabajo puede entender más rápidamente si vale la pena trabajar en una idea antes de comenzar a desarrollar una versión mínima de producto.

Aprender antes de construirDesign sprint le ayuda a un equipo de trabajo a obtener información clara por medio de la validación con prototipos para ver las reacciones de sus futuros usuarios antes de hacer compromisos que costarán tiempo y recursos.

Las sesiones de design sprint son colaborativas e incluyentes, y se anima a invitar a estas sesiones a tantos perfiles como sea posible, incluyendo diseñadores, programadores, expertos en negocio o en procesos. Normalmente hay un facilitador –el sprintmaster– que ayuda a dirigir el proceso y se asegura que el equipo no se desvíe de su objetivo.

Estas son las etapas típicas en la ejecución de un Design Sprint:

Proceso de Design Sprint

  • El día lunes se crea el camino a seguir en los siguientes días por medio de discusiones estructuradas. Al principio, se define un objetivo de largo plazo, y se crea un mapa del reto. En este día se invitan a expertos para que compartan su conocimiento sobre el problema con el equipo. Al final, se elige un objetivo: una parte ambiciosa pero manejable del problema que se puede resolver en una semana.
  • El día martes el equipo se enfocará en buscar soluciones. Después de revisar ideas ya existentes se comienzan a mezclar y a mejorar por medio de bocetos en papel, enfatizando el pensamiento crítico sobre la estética. En este día también se definen los perfiles de los usuarios que probarán la solución al final de la semana.
  • El día miércoles se revisan y critican las propuestas de solución desarrolladas el día anterior y el equipo decide cuáles resuelven mejor el objetivo a largo plazo. Después de elegir, se toman los bocetos ganadores y se combinan para crear un storyboard: un plan paso a paso para la construcción de un prototipo.
  • El día jueves el equipo trabajará para convertir el storyboard del día anterior en un prototipo, una versión simple y rápida de la solución que simule lo que los usuarios verán al final y que se puede construir en un día. También se prepararán los guiones para entrevistas y revisión del prototipo para el día siguiente.
  • El día viernes se realizan entrevistas con usuarios de carne y hueso para que el equipo pueda aprender de ellos al verlos utilizar el prototipo que se construyó el día anterior. Esta prueba es la que hace que el sprint valga la pena, porque al final del día el equipo aprenderá qué tal útil es su propuesta de solución y que hacer después: explorar otra solución, iterar sobre la propuesta actual o enviarla a producción.

Vale la pena aclarar que aunque design sprint toma prestados algunos conceptos de metodologías ágiles, no es sustituto ni equivalente de un sprint de scrum, ya que el proceso, los roles y los entregables son muy diferentes. Design sprint también utiliza conceptos de design thinking pero con límites claros sobre el tiempo y los recursos que se utilizarán en el proceso para mantenerlo ágil y enfocado.

Lo más importante de design sprint es que desde el principio ayuda al equipo a trabajar sobre las necesidades de sus usuarios, además de que enfoca el esfuerzo colectivo en crear cosas tangibles al mismo tiempo que reduce las discusiones.

Libro de SprintUna buena referencia sobre cómo ejecutar un design sprint es el libro que el equipo de GV publicó hace unos meses, titulado “Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days” y en el que se evaluan casos reales de implementación de la metodología, como Slack, Savioke, Blue Bottle Cafe, Foundation Medicine o FitStar, entre otros, además de que sirve como una guía hora por hora para el aspirante a sprintmaster.

Design sprint es una metodología de trabajo muy flexible que se puede aplicar al diseño o mejora de cualquier producto, e incluso se puede utilizar para hacer solo investigación de usuarios (research sprint), diseñar la visión de un nuevo negocio (vision sprint), una campaña de mercadotecnia (communication sprint) o la migración de un sistema a nuevas plataformas (new form factors sprint).

En el sitio de GV hay varios artículos (en inglés) sobre recomendaciones y técnicas para ejecutar design sprints con diferentes enfoques. El sitio de Google Developers tiene disponibles para descarga un par de ebooks para realizar sesiones de design sprint para diseñadores y programadores.

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.

Validación de sitios para móviles

Los dispositivos móviles, y en particular los smartphones, están dominando la web. Hoy más que nunca es muy importante asegurarnos que nuestros sitios web sean compatibles con estos dispositivos.

En los últimos años hemos visto un cambios importante en las preferencias de navegación de los usuarios de la web, donde se nota una tendencia de migración clara de los equipos de escritorio –workstations, laptops, etc.– hace los equipos móviles, y no parece que vaya a cambiar pronto.

En el estudio de AMIPCI en 2015 sobre hábitos de usuarios en México, el único segmento que registró crecimiento en su uso fue precisamente el de los smartphones, y creció a costillas de los dispositivos de escritorio para colocarse en un 58% de preferencia de los mexicanos al navegar la web:

AMICPI dispositivos de conexion
A nivel mundial también es notable la preferencia de compra de los usuarios finales de dispositivos móviles (smartphones y tabletas) contra los equipos de escritorio, en una razón de casi 3 a 1:

PCs vs smartphones

Desde la perspectiva de experiencia de usuario, es importante revisar que nuestros sitios web estén construidos de forma que puedan verse y navegarse desde dispositivos móviles de manera sencilla y natural. Debemos tener en cuenta que el ecosistema móvil es mucho más diverso que el de las PCs al hablar de tamaño y resolución de pantalla, ancho de banda, capacidad de procesamiento, navegadores web y muchos otros factores.Les comparto algunas herramientas que les pueden servir para validar sus sitios móviles, al menos para comenzar a revisarlos:

Validador para sitios móviles de W3C

W3C Mobile Validator
W3C Mobile Validator

El Worldwide Web Consourtium o W3C es el organismo mundial que crea y mantiene los estándares técnicos de la web. Para ayudar a las personas que crean sitios web creó este validador de páginas web basado en la recomendación de MobileOk que revisa la estructura del código de una página y entrega un reporte donde indica el grado de cumplimiento de estándares en su codificación, el impacto de cada error y guías sobre cómo arreglarlo.

Lo encuentras en: http://validator.w3.org/mobile

Mobile friendly de Google Webmasters

Google Mobile Friendly Tool
Google Mobile Friendly Tool

En abril de 2015 Google anunció que el hecho de que un sitio web no se vea correctamente en dispositivos móviles comenzará a afectar su posicionamiento en los resultados orgánicos (no pagados) de su buscador, en caso que necesitaramos una razón de peso para optimizar y actualizar nuestros sitios web.

Para ayudar a los webmasters, Google agregó una herramienta de validación más cualitativa que la de W3C, que conecta la página validada con una granja de render de móviles de Google para entregar un resultado más enfocado en cómo ve la página el buscador y cómo la vería un usuario en su móvil. También tiene mucha documentación sobre cómo optimizar sitios web para móviles.

Lo encuentras en: https://www.google.com/webmasters/tools/mobile-friendly/

Responsinator

Responsinator
Responsinator

Esta herramienta sirve para simular cómo se vería una página web en diferentes dispositivos con diferentes tamaños, resoluciones y orientaciones. Aunque no es una manera definitiva de revisar el diseño de una página web, es una forma simple y sencilla de probar como se ajusta el diseño de un sitio a móviles si no tienes un teléfono de cada modelo a la mano para probar.

Lo encuentras en: http://www.responsinator.com

Test de velocidad de Rackspace

Prueba de velocidad de carga de Rackspace
Prueba de velocidad de carga de Rackspace

La velocidad cuenta mucho al navegar en un móvil. De acuerdo a Rackspace, actualmente un usuario tiene un rango de tolerancia entre 3 y 5 segundos para que un sitio móvil se visualice en su dispositivo antes de abandonarlo. La velocidad de carga de un sitio tiene que ver con muchos factores que van desde el ancho de banda en el servidor, la latencia de carga, el tiempo de renderizado y la carga del servidor, entre otros.

Rackspace creó una prueba de velocidad para sitios web en el que analiza varios componentes que afectan el tiempo de carga de un sitio y recomendaciones para mejorarla.

La encuentras en: http://www.rackspace.co.uk/ecommerce-hosting/page-speed-checker

* * *

Por supuesto, estas herramientas solo cubren una parte del análisis que se debe hacer a un sitio móvil y están enfocadas a la implementación técnica, no a la perspectiva del usuario, pero nos dan un punto de partida para poder analizar y mejorar de manera cuantitativa varios aspectos que sí afectan la experiencia de navegación de un usuario final.

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 conexión entre SEO y UX

A pesar de que durante años “expertos” han pregonado soluciones mágicas para mejorar el posicionamiento de sitios web en los primeros lugares de los buscadores, actualmente el buen SEO es una consecuencia de un buena implementación de UX.

En mi artículo anterior expuse algunos temas que curiosamente coincidieron con  los que se abarcaron en el Vol. 9 de UX Nights sobre cómo el considerar las necesidades del cliente y sus objetivos de negocio en el diseño de UX y no únicamente centrarnos en los usuarios. También se discutieron en el evento los tres roles más prominentes en nuestra industria: el que paga, el que desarrolla y el que lo usa, así como su respectiva aportación al flujo de trabajo.

Apelar a las necesidades de la persona que nos paga y adaptándolas a la persona que las va a usar es, en mi experiencia, el método más eficiente para justificar la inversión en las diferentes disciplinas que abarca UX, pero hay varios beneficios adicionales para el bolsillo del que paga que puede ayudarnos a ponerle “la cereza al pastel”.

Muchos clientes han mencionando mucho en fechas recientes el término “SEO”.  Con los recientes cambios al algoritmo de Google (de los cuales advertí en una plática que hice de Mobile Advertising a finales del año pasado) el gigante de Mountain View advierte que penalizará con lugares desfavorables en sus rankings de resultados de búsqueda orgánica a las páginas web que no sean usables en dispositivos móviles. Súbitamente han comenzado a aparecer los “expertos” y “consultores” que aportan soluciones equivalentes a remedios mágicos para no descender en los resultados.

La manera en que Google ordena a las páginas en los resultados de su buscador es un misterio muy bien guardado. Sin embargo, la compañía ha brindado toda la información que se necesita saber y en ningún lado hablan de meta-etiquetas, de que tu página necesita tener un blog con cientos de artículos que intentan mencionar una palabra clave repetidamente o mucho menos se sugiere que hay alguna manera de engañar a los “robots” al analizar nuestro sitio para determinar a cuál query (petición) de búsqueda responde mejor.

Un buen SEO es simplemente una mezcla de una excelente experiencia de usuario y buenas prácticas de programación.

¿Qué es lo que Google califica realmente para determinar si un sitio pertenece a los primeros lugares de un ranking? Coloquémonos en la perspectiva del servicio: Google vive de mostrar anuncios, y para que Google sea rentable necesita un  tráfico enorme todos los días. Para recibir un tráfico enorme a pesar de tener anuncios, el buscador debe ser impecablemente eficaz en cada ocasión que se usa, y debe entender perfectamente lo que los usuarios están buscando sin importar la redacción, gramática, idioma o subtexto que ellos usen.

Google no se puede arriesgarse a mostrar como el “mejor resultado” de una búsqueda a un sitio tramposo que haya decidido spammear una sola palabra clave con la intención de atrapar a usuarios incautos. Google va a ofrecer como mejor resultado de búsqueda al sitio que conteste de mejor manera la necesidad del usuario. Ese sitio debe ser rápido, eficiente, ligero y fácil de usar para calificar en estos criterios,  para que el usuario termine satisfecho con su resultado y siga considerando a Google como algo impecable, que parece que viene de otro planeta.

Google menciona en sus manuales de buenas prácticas de manera muy específica que en la “vieja escuela” el SEO era para las máquinas, pero esta es una idea obsoleta; los desarrolladores web tienen que preocuparse actualmente de una sola cosa: sus usuarios.

Es con este argumento -aunque no es que los argumentos escaseen- que podemos reforzar la necesidad de hacer con un sitio impecable desde la perspectiva de los usuarios para que nuestros clientes puedan ofrecer beneficios a sus usuarios que se traduzcan en ganancias, como es en este caso un mejor posicionamiento en buscadores y una mayor relevancia con las palabras relacionadas a su negocio. De esta manera podemos argumentar en favor de que nuestros proyectos se realicen y concreten de manera exitosa.

Referencias:

Para saber más de SEO pueden consultar la guía introductoria del tema elaborada por el mismo Google.

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