Tentándole (interacción)

francisco tosete | usabilidad, interacción, diseño y arquitectura de información

histórico de posts

July 29, 2009

Opera, Gestos faciales, interacción táctil, diseño de interacción emocional e interfaces orgánicas

Por distintas razones este post no ha podido ver la luz hasta ahora y lo he ido actualizando poco a poco. En estos tres últimos meses es sorprendente la avalancha de novedades y la cantidad de dispositivos, interfaces y patrones de interacción nuevos que he podido ver. Entre otros, os aconsejo echar un vistazo a la web de la compañía sueca The Astonishing Tribe, concretamente a su sección Showroom. Sin más, os dejo con el post.

–O–

No sé quién será la persona a la que se le ha ocurrido la idea pero desde luego creo que ha abierto un campo de investigación en el que hay mucho, mucho por decir, por escribir, por explorar y en el que se pueden hacer muchas cosas.

Opera fue el primer navegador que introdujo los gestos de ratón para interactuar con el mismo a la hora de navegar, una característica competitiva que Firefox debería incorporar de forma nativa dado que tiene una de las mejores extensiones que se han desarrollado hasta la fecha para el navegador: all-in-one-gestures.

Aunque no se ha utilizado casi la interacción mediante gestos del ratón creo que es precursora de las interfaces táctiles y mientras llegan este tipo de dispositivos con la nueva generación de sistemas operativos y se establecen y consolidan unos estándares para la interacción táctil y gestual sobre superficies, las aplicaciones (ya sea Firefox ya sea cualquier otra) y sistemas operativos deberían incorporarla.

Respecto a la interacción táctil no tengo en absoluto claro cómo será porque no veo a la gente manteniendo los brazos levantados durante 8 horas interactuando con una interfaz como la de Minority Report ni veo a la gente tocando constantemente una pantalla que está delante suyo con una inclinación de 120º o de 90º respecto a la vertical.


No es natural. Puntualmente puede que sí pero para una interacción durante un período tan dilatado de tiempo como toda una jornada laboral, la interacción con la interficie se tiene que dar ante todo, pienso, en un área en un plano horizontal.

Creo que todavía tiene que aparecer una nueva gama de periféricos de entrada para interactuar con el ordenador que supere las limitaciones que tiene el ratón. Por ejemplo, ahora mismo estoy escribiendo en una pantalla con una resolución de 1366x768 píxeles. El cursor de mi ratón ocupa aproximadamente 20 píxeles de ancho por 20 píxeles de alto y define un único punto de interacción en su punta igual que un bolígrafo.

Una infrautilización de nuestros principales periféricos de salida por excelencia, las manos y los dedos (en el sector recreativo ya han considerado que sea todo el cuerpo, ahí está el Proyecto Natal de Microsoft).


—- ( paréntesis ) —-

Portátil y prototipo de periférico de entrada de interacción táctil

Visión superior de un portátil y de un posible prototipo de área táctil como periférico de entrada en un plano horizontal.
Al estar situada a los lados del teclado y enfrente del mismo se define una superficie mucho más ergonómica para las dos manos, usable y adecuada que la de cualquier trackpad actual para desarrollar cualquier tipo de interacción táctil. Al ser un área única corrida tiene la ventaja de que las manos se pueden deslizar por toda la superficie táctil hasta unirse lo que podría ser útil para definir algunos tipos de interacción. Por contra presenta el problema de que en las esquinas derecha e izquierda inferiores puede ser un área en la que se sitúen las muñecas de nuestros brazos y antebrazos cuando no se encuentren a ambos lados del trackpad del portátil cuando estemos escribiendo.

Portatil. Periferico con areas tactiles separadas

Otra posible solución teniendo en cuenta el problema de las muñecas es plantear un nuevo prototipo de periférico que conste de tres superficies separadas, dos a ambos lados del portátil y una tercera enfrente. La ventaja de esté tipo de área táctil (y de la anterior) frente a los actuales trackpads es que definen una única superficie de interacción o superficies múltiples de interacción mucho mayores con las ventajas que ello conlleva en cuanto al desarrollo de nuevos módelos de interacción hombre-ordenador. Al tener áreas táctiles específicas para cada mano a izquierda y derecha se pueden definir nuevos patrones de interacción que podrían solucionar algunos de los problemas que existen en los sistemas operativos de hoy día al interactuar con los objetos virtuales. Las manos, en lugar de unirse físicamente pueden “unirse” directamente en la interficie virtual.

Por ejemplo, en un patrón de interacción como el de arrastrar y soltar sólo tenemos de una única herramienta para relacionarnos o interactuar con en el escritorio virtual, el cursor o puntero del ratón, que en el actual modelo de interacción hombre-ordenador, para microinteracciones puede tener un funcionamiento confuso o poco usable dado que tiene que servir para realizar diferentes acciones. En el mundo físico utilizamos las dos manos para realizar cualquier acción, disponiendo además de diez posibles herramientas para realizar microinteracciones, los diez dedos con sus correspondientes “punteros” las yemas de los dedos.

Cuando seleccionamos un objeto del escritorio de nuestro ordenador posicionamos el cursor sobre el mismo, presionamos el botón izquierdo y desplazamos el objeto. Existen diversas soluciones para dar un feedback al usuario e informarle de la acción que realiza. En Windows Vista por ejemplo, según desplazamos el cursor del ratón debajo arrastramos una réplica o thumbnail del objeto semitransparente que posicionamos sobre el área de destino sobre la que queremos soltarlo.

El problema que se presenta es que a veces el área de destino queda oculta bajo otras ventanas que tenemos abiertas. Así, antes de realizar dicha interacción tenemos que preparar la superficie de nuestro escritorio virtual de tal forma que podamos ver tanto el objeto que vamos a desplazar como el área de destino sobre la que queremos soltar el objeto a trasladar. En el mundo físico si queremos situar un objeto sobre una superficie que está ocupada por otros objetos, cogemos lo que queremos mover con una mano, mientras que con la otra, o con la misma que sostiene el objeto, apartamos los objetos que molestan -despejamos el área de destino- y finalmente posamos el objeto que estamos trasladando. En el mundo virtual y en el modelo de interacción actual no tenemos dos manos ni dos punteros, y aunque hay algún patrón de interacción similar que permite “apartar” objetos y posicionar otros como por ejemplo los módulos de Netvibes, el modelo de interacción es claramente inferior.

Disponiendo de un periférico como el reseñado tenemos la ventaja de que podríamos interactuar con las dos manos, así, podríamos tener dos focos de interacción (foco = puntero más o menos dado que un foco viene definido por el área espacial que abarcan los cinco dedos de una mano) Uno de estos focos o “punteros” podríamos utilizarlo para seleccionar el objeto e irlo arrastrando mientras con el otro foco “puntero”, podríamos ir apartando de enmedio las ventanas virtuales que nos molestasen.

Windows Vista. Arrastrar y soltar un objeto virtual como por ejemplo, un icono
Si quisiéramos desplazar el icono de Firefox desde su posición actual en el escritorio hasta otro punto situado debajo de las ventanas, la interacción nos resultaría imposible si previamente no apartamos éstas y dejamos despejada (visible) el área sobre la que vamos a actuar. Aunque algunos sistemas operativos como por ejemplo Leopard (Mac OS X) tienen atajos para despejar el escritorio o visualizar e intercambiar dinámicamente entre ventanas (exposé y dashboard) y aunque la próxima versión de Windows implementará algo similar (posicionando el cursor en la esquina inferior derecha de la pantalla todas las ventanas que tenemos abiertas se volverán transparentes para visualizar las superficies ocluidas) sería mucho más rico e interesante el modelo de interacción con el nuevo periférico propuesto, una mano para arrastrar el objeto virtual y otra para apartar las ventanas virtuales

El mundo real es mucho más rico (de momento) en cuanto a lo que a interacción física se refiere. Llevamos demasiado tiempo anclados en el paradigma de interacción de un único punto o herramienta para interactuar con los espacios virtuales -escritorios, World Wide Web, etc- el puntero o cursor del ratón. Ya va siendo hora de que comencemos a investigar y desarrollar nuevos modelos y perífericos, de que extendamos la máquina y la posibilidad de interactuar con ella más allá del ratón para superar estas graves carencias. Es hora de reclamar una interacción hombre-ordenador mucho más humana y natural y menos artificial. La tecnología actual ya puede permitir realizarlo con creces.

— ( /paréntesis ) —

Como artefacto cognitivo o herramienta que amplifica nuestras capacidades humanas el bolígrafo es mucho menos eficiente que un teclado en cuanto a la generación de escritura se refiere por varias razones:

  • gracias a éste último utilizamos los diez dedos de la mano asignando a cada uno de ellos un conjunto finito de teclas en un área espacialmente próxima. La superficie total cubierta por ambas manos sobre la que se puede interactuar simultáneamente es mucho mayor por ende que con la punta de un bolígrafo.
  • Frente al bolígrafo, la usabilidad de un teclado depende de factores ergonómicos tales como el tamaño de las teclas, la separación espacial de las mismas la elevación del teclado respecto de la superficie, la textura y el material de las teclas que define su adherencia, la resistencia frente a las pulsaciones.
  • Un teclado, al igual que una arquitectura de información es un mapa. Uno muy particular, pero al fin y al cabo un mapa que muestra a la vez todos los componentes de un espacio cognitivo, abstracto que podemos visualizar, y lo más importante, interiorizar y cuya explotación podemos mecanizar mediante una formación previa, un curso de mecanografía.

Un bolígrafo no muestra en su superficie el alfabeto. Éste lo tenemos interiorizado gracias también a una formación previa (educación) y gracias a la que formalizamos la escritura según dibujamos los trazos de las letras.

El gesto necesario para escribir una “a” es mucho más costoso y difícil de ejecutar físicamente que el realizar una pulsación sobre una pequeña superficie física definida, una tecla, que ofrece como resultado inmediato dicho carácter en un lapso de tiempo mucho menor y que, gracias a que existe en un espacio digital, en una interfaz líquida que puede ser dinámicamente alterada y reescrita puede ser editada en un brevísimo espacio de tiempo.

Por contra, frente a la especialización del teclado para un tipo concreto de tarea, la escritura, el bolígrafo es mucho más versátil funcionalmente ya que podemos ejecutar otras tareas que con el teclado es imposible como por ejemplo dibujar cualquier tipo de trazo.

Versatilidad versus especialización.

Eso es lo que hacen los artefactos y para eso utilizamos las herramientas. Para potenciar determinadas capacidades físicas y cognitivas frente a otras.

Ahora, después de la interacción por voz y de las interfaces táctiles, los ingenieros de Opera proponen un nuevo tipo de interacción basada en gestos de la cara y emociones:


Lo más sorprendente quizá, del concepto, es su faceta emocional. Toda la nueva investigación en cuanto al diseño de interacción emocional y de interfaces que se puede derivar de ella. O lo que es lo mismo, la pregunta que cabría plantearse es cómo podría o debería reaccionar una interfaz en cuanto al estado emocional de una persona en un momento determinado.

Opera. Gestos faciales para interactuar con el navegador
Captura de imagen de la web de los Labs de Opera. Gestos faciales para interactuar con el ordenador.

Algunos posibles escenarios que podrían imaginarse (al fin y al cabo las ideas son las que mueven a la innovación y al desarrollo):



Nota: los vídeos pueden verse con mucha mejor calidad en los Labs de Microsoft Office

Si el sistema operativo detectase que tenemos ojeras marcadas podría reaccionar aumentando el tamaño de las fuentes o de los componentes para facilitar la lectura (se podría presuponer que la persona ha pasado una noche de fiesta o ha dormido mal porque su hijo recién nacido no le ha dejado descansar mucho). Desde un punto de vista psicológico podría alterar el fondo de pantalla mostrando uno acorde con nuestro estado de ánimo, comenzando con tonos oscuros e imágenes del universo y cambiándolo paulatinamente hacia tonos claros como azules e imágenes del mar o de alguna playa caribeña. Al tiempo podría escoger y reproducir automáticamente una selección escogida de canciones de entre las almacenadas en nuestra biblioteca musical personal en nuestro disco duro o en línea. De forma paulatina el sistema operativo variaría la música que estuviésemos escuchando desde ritmos lentos (música clásica, jazz…) a ritmos vivos (pop, rock, punk) con el fin de mejorar nuestro estado anímico y emocional y nuestra productividad.

Los programas de videoconferencia podrían modificar dinámicamente su apariencia, tonos y colores, de acuerdo a nuestros gestos faciales que manifestarían nuestra respuesta emocional. Lo curioso (o lo preocupante) es que el que nos observa, si estamos realizando una videoconferencia, también podría valorar nuestra respuesta emocional de acuerdo a nuestras expresiones corporales simplemente viendo de qué color se vuelve la interfaz de su herramienta de mensajería.

En cuanto a la telefonía móvil y los nuevos dispositivos móviles, ahora que estamos entrando en la era de las pantallas táctiles y que tienen incorporados cámaras que podrían visualizar nuestra expresión facial mientras llevamos a cabo cualquier tipo de interacción con el dispositivo (escribir un mensaje de texto, consultar la agenda, etc) la posiblidad de que la interfaz respondiese de forma “orgánica” a nuestro estado anímico podría ser francamente interesante.

Hay está por ejemplo el espectacular y particular modelo de interacción emocional, gestual y natural sobre el que está trabajando Nokia. Besamos el teléfono para mandar un mensaje a nuestra persona favorita:


Para los cajeros bancarios, además de las posibilidades que ofrece en cuanto a seguridad biométrica, podría ser interesante su aplicación para personalizar la experiencia de usuario (hilo musical o efectos sonoros por ejemplo) y los colores de la interfaz en función del estado anímico del cliente. Sería una experiencia mucho más “amable” y cercana.

Por último, en cuanto a las personas con algún tipo de discapacidad física este tipo de interacción supone un avance que ha de ser investigado con mayor profundidad.

Interacción, emociones, diseño… lo importante, es soñar. Imaginemos hoy el futuro de mañana:



Vídeo hecho para Microsoft por Invivia para explorar cómo podríamos relacionarnos en entornos físicos y de Realidad Aumentada



Vídeo hecho para Microsoft por Invivia para explorar cómo podríamos relacionarnos en entornos físicos y de Realidad Aumentada



Un sueño en un entorno de Realidad Aumentada

Llama la atención cómo en el vídeo el hombre crea los objetos e interacciona con ellos con las yemas de los dedos. Exactamente igual que en el vídeo del prototipo del Sexto Sentido.

Video de el Sexto Sentido. Interaccion con los dedos de la mano

Diseño de interacción natural, diseño gestual y diseño emocional.

Excitante la investigación en los nuevos límites de nuestras disciplinas.

July 19, 2009

Enriqueciendo la navegación horizontal y mejorando el SEO en secciones de los periódicos digitales

Me gustan los periódicos digitales. Me encantan y creo que cuando uno se mete un poco a fondo a analizar lo que hay detrás de sus interfaces es realmente sorprendente lo que se puede aprender sobre sus arquitecturas de información y sobre el tremendo trabajo SEO que hay debajo de muchos de ellos del cual, normalmente, es dificil ser consciente.

Curiosísimo el módulo que presenta el Wall Street Journal. Cuando el usuario entra en un artículo de una sección se observa en la parte superior, inmediatamente debajo de la cabecera una minigalería con las noticias destacadas de la sección. Cada minimódulo de noticia dentro de la misma consta de: pequeña foto escalada de la foto principal de la noticia que funciona como enlace al artículo final, título, que es asimismo un enlace a la noticia, número de la noticia destacada y número total de noticias destacadas en la minigalería (que no número total de noticias en la sección correspondiente -¿en base a qué seleccionarán las noticias más populares? ¿aquellas más leídas por los usuarios? ¿las que seleccione manualmente el editor? ¿las más votadas? ¿enviadas? ¿?).

Wall Street Journal. Minigalería de noticias destacadas en subsección
Wall Street Journal. Minigalería de noticias destacadas en subsección

La noticia que se está visualizando de la minigalería tiene el fondo blanco para centrar la atención (indicación de qué está viendo el usuario) mientras que las demás presentan un fondo con una sutil variación en gris para distinguirlas de la anterior. Cuando el usuario hace clic en una noticia no consecutiva a la que se está visualizando se recarga la minigalería y se posiciona en primer lugar. La forma en ángulo de “Top stories in [nombre de sección]” y el ángulo en la parte inferior del rectángulo refuerza la idea de movimiento y de que esa y no otra es la noticia seleccionada por el usuario y la que está visualizando. Los controles azules para realizar scroll horizontal situados uno al lado del otro en lugar de a los extremos de la minigalería, como suele ser usual, y posicionados a la derecha del todo de la pantalla al mismo margen o borde del periódico mejoran la usabilidad al facilitar el scroll tanto hacia adelante como hacia atrás y al reducir el desplazamiento del cursor una vez el usuario lo ha posicionado en su área (normalmente para los diestros el cursor suele permanecer en el área derecha de la pantalla más que en la izquierda con lo cual y desde hace ya algún tiempo, se observa una fuerte tendencia en todos los nuevos diseños de webs e incluso en algunas aplicaciones de software a posicionar componentes esenciales o que deban tener una gran importancia desde un punto de vista de ejecución de interacción por parte del usuario en las esquinas superiores derechas o en la mitad superior derecha de la pantalla, un área que está ganando por momentos relevancia entre los diseñadores de interacción).

Con este componente se mejora el SEO, la navegación por la sección y se hace “emerger” la información de la misma incitando al usuario a seguir navegando. En definitiva, un componente francamente elegante. Me gusta. Lástima no haberlo visto antes.

Se me ocurre que, variándolo, es perfectamente extrapolable a otros webs, por ejemplo, tiendas de comercio electrónico, librerías, mercados online, etc.

July 13, 2009

Estimulando la creatividad: Produciendo ideas

Lo dicho, si alguna vez monto una empresa muy posiblemente tenga un área dedicada a la producción de ideas y a la innovación en Experiencia de Usuario. Esto es tan sólo un ejemplo y parte de lo que me gustaría hacer:

How to Produce Ideas Industrially - BrainStore’s method

May 16, 2009

Nokia, nanotecnología, interfaces hápticas, plegado de información y estética

“La forma de la superficie es dependiente del contexto” (minuto 5:08)

como la forma de la interfaz depende de la forma de la superficie, las implicaciones que tiene dicha afirmación son profundas en lo que al Diseño de Interacción se refiere.


The Morph concept de Nokia. Cosas como estas parecen ciencia ficción y sin embargo, la nanotecnología está ahí y en algún momento llegará a nuestras manos. Ya lo decía Steve Ballmer:

“…Steve [Ballmer] se sentía como Houdini y en un momento cogió una servilleta de color amarillo y la sacudió delante de nuestras narices. «¿Ven esto? Así será el dispositivo del futuro, una mezcla de pantalla de ordenador y de televisor. Será tan flexible que lo plegaremos y lo arrugaremos para meterlo en el bolsillo». Ballmer anunció que ese dispositivo, sea lo que sea, nos permitirá leer periódicos en el futuro, buscar teléfonos, mirar documentos, en fin, de todo”

Por cierto, en cuanto a las baterías de los dispositivos del futuro, además de la energía solar, se me antoja que posiblemente habrá al menos otras dos fuentes energéticas habituales: la cinética (movimiento, durante el día generamos -y desperdiciamos- una gran cantidad de energía sólo en nuestros desplazamientos cotidianos) y la térmica (gracias a la termodinámica) a partir del intercambio de calor entre nuestro cuerpo y la superficie del dispositivo.

Vía: Physical interface: Touching considerate design

April 25, 2009

Propuestas, ideas e inspiración para Firefox 4.0

Automatic text translation to english

Actualización (*)

Algunas propuestas de esas que se te ocurren medio dormido para el futuro Firefox 4.0.

Abajo, la idea original (se nota que estaba dormido):

Firefox 4.0, propuesta original de diseno para su interfaz

Estas son otras propuestas un poco más trabajadas y algunas ideas sobre cómo podría ser el modelo de interacción de la barra de tabs. Lo dicho, veo Firefox y los futuros navegadores más como sistemas operativos en la nube que como simples navegadores. En los Labs de Mozilla ya hace tiempo que están trabajando en ello:

Firefox 4.0, tres propuestas más evolucionadas, modelo de interacción de las tabs

¿Ideas? ¿Críticas? ¿Sugerencias? ¿Cómo lo véis?

(*) Algunas capturas que acabo de descubrir con propuestas para la implementación de nuevas interfaces de Firefox:

Firefox, propuestas de interfaz

Firefox, propuestas para el rediseño de su interfaz

Firefox, nuevas propuestas para las pestañas

y los correspondientes posts:

« Artículos anteriores





















Get free blog up and running in minutes with Blogsome
Theme designed by Hadley Wickham