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.

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.