05/09/2016

El desafío de diseñar interfaces web para wearable gadgets

El desafío de diseñar interfaces web para wearable gadgets

Los wearable gadgets son accesorios o piezas de indumentaria que incorporan tecnologías computacionales o electrónicas avanzadas. Generalmente, se consideran en esta categoría a los dispositivos portátiles (se llevan en el dedo, la muñeca, la cabeza u otra parte del cuerpo) que realizan alguna función específica. El término se hizo popular en la última década, pero también se aplica a desarrollos de muy larga data.

Si la limitamos a dispositivos que tengan algún componente electrónico, podemos decir que la wearable technology se hizo realidad en 1961, cuando Edward Thorp y Claude Shannon inventaron un sistema de bolsillo para predecir los resultados de las ruletas. El truco requería de dos personas: un observador y un jugador. El observador tenía escondido en el zapato un dispositivo de entrada, que se manipulaba con el dedo gordo del pie. Cada vez que la ruleta se ponía a girar, rápidamente el observador ingresaba la velocidad de rotación que había percibido. Este dato se almacenaba en una computadora (del tamaño de un paquete de cigarrillos) que llevaba adosada a su cintura. La computadora aplicaba un algoritmo y, antes de que la bola terminara de girar, determinaba el resultado más probable y se lo transmitía por vía inalámbrica —y en forma de código musical— al jugador, que tenía puesto un auricular. Otros wearable gadgets electrónicos importantes son el Sony Walkman (1979), la «computadora de mochila» de Steve Mann (1981), la «ropa inteligente» (década de 1990), las cámaras portátiles GoPro (2004) y las gafas de realidad aumentada Google Glass (2013).

Sin embargo, muchos autores incluyen en esta categoría a objetos no electrónicos, pero que sean wearable (se pueden vestir) o tengan más de una función (como el «zapatófono» de Maxwell Smart, llevado a la realidad por varios entusiastas). Desde este punto de vista, inventos como las gafas (Italia, siglo XIII) y el curioso «anillo-ábaco» creado por los chinos durante la dinastía Qing serían ejemplos tempranos de wearable technology.

Arriba: publicidad de un clásico reloj-calculadora de Casio, lanzado en 1980 (fuente: Kid of the 80s). Abajo: publicidad del Apple Watch, lanzado en 2015 (fuente: Macworld).

Actualmente, los wearable gadgets más populares son los smartwatches: relojes computarizados que no solo sirven para registrar la hora. Desde sus comienzos en los años 70 esta idea atravesó varias encarnaciones que hoy lucen ridículas, como los recordados relojes-calculadora (¡se siguen produciendo!), los relojes-juego o los relojes-computadora. Pero recién en los últimos años el desarrollo de la comunicación inalámbrica (Bluetooth, Wi-Fi, 4G, etc.) y el constante achicamiento de los componentes digitales permitieron dotar a los relojes de pulsera con muchas de las funciones de cualquier smartphone.

Los smartwatches y otros wearable gadgets permiten navegar por la Web, por lo cual presentan un importante desafío para los diseñadores. Existen muchas normas comunes para garantizar una buena experiencia en smartphones, tablets y televisores, pero ¿cómo diseñar para pantallas que pueden tener apenas 12 centímetros cuadrados de superficie y una forma cuadrada, rectangular o redonda? A continuación ofrecemos algunos consejos.

  • Texto más grande. Como son accesorios que se llevan adheridos al cuerpo, los wearable gadgets se usan en movimiento. Si el usuario utiliza nuestro sitio o aplicación web desde su smartwatch mientras corre, querrá leer el texto en movimiento, y para ello necesitará un tamaño de fuente generoso que le permita comprenderlo a simple vista. Además, debe tenerse en cuenta que la pantalla es más chica que en desktop o mobile y la fuente se verá reducida en consecuencia, por lo cual tendremos que agrandarla para compensar. Por último, la distancia entre los ojos del usuario y la pantalla dependerá del gadget Ver: La importancia del contexto para la experiencia de usuario.
  • Contraste alto. Por las razones mencionadas en el punto anterior, también será necesario garantizar un buen contraste y una generosa separación entre los elementos de interfaz.
  • Minimalismo. El diseño web minimalista es adecuado para los wearable gadgets, ya que el reducido tamaño de la pantalla exige simplicidad y pocos elementos. Ver: Diseñando sitios web minimalistas.
  • Interactividad avanzada. Debido a lo difícil que resulta usar teclado virtual en una pantalla chica, la mayoría de los usuarios preferirá otros métodos de entrada, como hablar o dibujar con el dedo. Nuestro sitio web debe estar preparado para estas modalidades de interacción. Ver: Acceso multimodal: nuevas formas de navegar por la Red, Navegación por voz, una nueva forma de interactuar con la Web.
  • Velocidad. Generalmente, quienes adquieren wearable devices desean acceder a la información aun con mayor velocidad que si estuvieran usando un smartphone. Garantizar una buena velocidad de carga, despojar el diseño de elementos innecesarios y presentar la información más relevante por encima del fold es fundamental para proveer tal instantaneidad.
  • Ausencia de ventanas externas. Los pop-ups y las ventanas integradas a la página son muy difíciles de cerrar desde dispositivos como relojes y gafas inteligentes, y por ello debemos evitar su uso.

Comentarios finales

La wearable technology admite muchas modalidades de interacción, como voz, movimientos oculares, movimientos corporales, tacto y guantes especiales. Y la creciente aparición de dispositivos que se implantan en el cuerpo (algunos de ellos, controlables mediante smartphone) lleva las posibilidades más allá de lo que hoy podemos imaginar.

Sin embargo, lo que actualmente sabemos es que los dos wearable gadgets más promocionados de los últimos tiempos —Google Glass y Apple Watch— no están logrando el éxito comercial que se esperaba. Por esa razón, la inmensa mayoría de los diseñadores web todavía no tiene en cuenta estos dispositivos. Además, para algunos, es probable que la Web nunca se lleve bien con pantallas tan chicas; una señal importante en esa dirección es que el Apple Watch ni siquiera viene con un browser nativo (aunque existen opciones de terceros, como WatchWeb). Sin embargo, quienes decidan instalar un browser en su reloj inteligente (ya sea el de Apple o los de marcas como LG, Asus y Motorola) agradecerán que empleemos las buenas prácticas comentadas en este artículo.

Artículos relacionados

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce