Interfaz táctil, amor a primera vista

Hace dos o tres meses a mis padres les regalaron dos móviles táctiles. Mis padres nunca han tenido mucho trato con las tecnologías, aunque ahora se están adentrando en el mundo de Internet (de lo cuál estoy muy orgulloso). Siempre me han ido consultando dudas que tenían con el móvil sobre cómo enviar sms, cómo agregar contactos...

Cuándo supe que los nuevos móviles eran táctiles lo primero que pensé fue "esperemos que les sea sencillo". Fue impresionante. Con una sola explicación ya sabían agregar un contacto, sabían desbloquear el móvil. ¿Por qué este aprendizaje tan rápido, si con los móviles antiguos (teclado) necesité explicárselo varias veces?

Natura

Hasta antes de las pantallas táctiles nuestro contacto con el móvil era puramente visual y sonoro. A través de teclas accedíamos a los menús y marcábamos. También podríamos decir que utilizamos el tacto con las teclas, pero era algo indirecto, las teclas son herramientas con una acción-reacción.

Sólo tenemos que pensar en una habitación, ¿por qué pulsamos un interruptor para encender la luz?. Porque desde hace muchos años se tomó un interruptor como la interfaz que pulsándola (acción) conseguíamos que se encendiera la luz (reacción).

Se que esto es difícil, pero ¡olvidad los interruptores!, no sabéis qué es un interruptor, no existen en vuestra mente. Ahora entráis en una habitación llena de muebles, con un interruptor y una lámpara y queréis encender la luz, ¿qué haríais? ¿cómo pensaríais que se enciende?

[caption id="attachment_242" align="aligncenter" width="400"]Ilustración de una habitación (<a href="http://iker-comics.blogspot.com.es/2009/11/5perspectiva.html">Por Iker comics</a>) Ilustración de una habitación (Por Iker comics)[/caption]

Podríamos pensar mil formas, tocándola, tocando las palmas... pero lo que es casi seguro es que nadie tocaría primero el interruptor porque no es natural.

Esto es lo que les ha ocurrido a mis padres con el móvil táctil. Es mucho más natural tocar algo que quieres abrir directamente con el dedo que moverte con unas teclas para acceder a él. Esto último es aprendido por nosotros con el uso, lo primero es mucho más natural (tocar algo que quieres coger).

Hay una distancia mental entre una acción y una reacción mas grande con una tecla que con una pulsación directa con el dedo o un gesto.

Aprendemos poco a poco

Los seres humanos estamos en constante aprendizaje con el medio, y los ordenadores, móviles... son otro objetivo más de aprendizaje. Yo mismo creé este blog para aprender más sobre UX.

Las interfaces actuales son el resultado de años de aprendizaje, quién iba a decir a los trabajadores de Xerox que lo que ellos llamaron interfaz gráfica en 1973 fuera a llegar tan lejos (Xerox Alto). Tenemos un ejemplo muy claro el la siguiente generación de computadores de esta empresa, Xerox Star. Xerox incluyó las famosas barras de scroll en su interfaz. Había que documentarlas muy bien, pues era algo nuevo y aún teníamos que aprender para que servía.

[caption id="attachment_232" align="aligncenter" width="615"]Interfaz Xerox Star Interfaz Xerox Star[/caption]

Lo mismo ha ocurrido con los botones a lo largo de la historia. En la web pasamos de los botones tipo "Pulsa aquí para acceder a la web" a "Accede a la web". Al principio eran muy explícitos con degradados para asemejarse a botones reales. Ahora sólo tenemos que mirar la interfaz nueva de Skype (que no digo ni que sea buena ni mala):

[caption id="attachment_234" align="aligncenter" width="344"]Interfaz de Skype 2013 Interfaz de Skype 2013[/caption]

Ningún degradado, no hace falta, ya hemos aprendido qué es un botón y qué no.

Todo aprendizaje tiene un camino, pero hoy tenemos la ventaja de qué la tecnología está en nuestra vida y necesitamos utilizarla. El aprendizaje es mucho más rápido que hace unos años. Además, la interfaz táctil es mucho más natural que un ratón y un teclado, por lo que el aprendizaje es aún más rápido que el de una barra o un botón.

La web, esa gran olvidada

Cuando creamos una aplicación para móviles, ¿quién no incluye un deslizamiento para actualizar o cambiar entre pantallas? ¿quién no ha escuchado de un cliente "y quiero que al deslizar hacía abajo se actualice como Twitter"?. En las aplicaciones están completamente integrados los gestos táctiles, ¿y por qué no incluímos esto en el desarrollo de nuestras webs?.

[caption id="attachment_235" align="aligncenter" width="200"]Acciones mediante gestos (<a href="http://www.matthewmooredesign.com/branded-interactions/">Branded Interactions</a>) Acciones mediante gestos (Branded Interactions)[/caption]

Es un gran avance y mejora en gran medida la interacción de nuestros usuarios en nuestra web. Como una barra de scroll en sus inicios necesitamos aportar a usuario un gran "feedback" de qué está haciendo en cada momento y qué puede hacer con gestos. No estamos acostumbrados, necesitamos aprender, y para esto estamos los desarrolladores web, de UI y de UX.

Tenemos diversos recursos para conseguir este feedback como textos descriptivos o iconos:

Y librerías de Javascript que nos permiten un desarrollo rápido e intuitivo. Aquí tenéis un artículo de Queness con varias librerías: 11 Multi-touch and Touch events Javascript libraries. Personalmente estoy utilizando Hammer.js en un proyecto, y funciona perfectamente.

Ya no hay excusa

Sabemos que la naturalidad en las interfaces mejora la interacción y la experiencia del usuario al navegar. Lo táctil es más natural, un deslizamiento es más natural que pulsar en un link, y pulsar en un link con el dedo es más natural que hacerlo con un una tecla.

Debemos de aprovechar este potencial para nuestras aplicaciones y webs. El diseño móvil no es solo "Responsive Web Design", es toda la potencia que tenemos detrás, y no debemos olvidar que la gran mayoría de dispositivos que acceden a Internet son smartphones táctiles (el 100% de dispositivos móviles que han accedido a este blog son táctiles).

Al principio puede ser un poco engorroso el hecho de tener que pensar en como asesorar al usuario con los gestos, pero poco a poco podremos ir agregando "display:none" a esas capas, porque aprender sobre la web, ahora, conlleva poco tiempo.