Acaba de terminar la tercera edicion de MadinSpain, que tuvo lugar en el Palacio de Congresos de Madrid. Se trata de un evento de escala internacional sobre diseño y comunicación interactiva al que he tenido la oportunidad de ir.

Entre los ponentes contamos con profesionales nacionales de la talla de Lamosca, Albert Folch, Zinkia (Pajarotooo!!), Carlos Ulloa y muchos otros. Y por supuesto ponentes internacionales  como Apple, Adobe, Farfar, Waskman, Brand new school, Joshua Davis...

El evento esta orientado a Diseño, Comunicacion publicitaria y Arte Editorial. Lo que permite hacerse una idea de la vanguardia del diseño tanto en nuestro pais como en el extranjero.

Me impresiono ver trabajos de la talla de los de Brand New School que siendo solo 12 personas hacen cosas muy buenas. Como una gran pantalla interactiva de metro y medio por 3 metros (!!!) desarrollada integramente con productos de adobe (y programada en flash claro esta) que reconocía el movimientos de la gente al pasar y creaba aleatoria pero estudiadamente bellas formas en la pantalla. El proyecto lo realizaron en 3 semanas solamente y la verdad es que era un gran trabajo. (Es verdad es que iba un poco petadillo, pero era flash, que le vamos a hacer! xD)

El genial Joshua Davis con su peculiar manera de dar charlas nos motivo un poco a todos con su trabajo y su filosofía. ("El arte esta en todas partes! fijaos en él!") Este Skater-man (a sus 37 añazos) es una persona muy particular y por ello hace algo muy particular. Hace arte a partir de números aleatorios y posicionar formas en la pantalla de una manera entre medida y randomizadamente (existe esa palabra?, espero que si). El resultado son una imagenes muy completas aunque muy estéticas, y la verdad es que verlas en movimiento es todo un placer para la vista. Además desde su punto de vista el hecho de que sean "puramente" aleatorias es un gran valor añadido al asunto, ya que es el universo la que las ha puesto ahi. Eso si, aprovechó para dar a conocer su nueva gama de productos a ver si el universo ponía de paso unos dolares en su bolsillo.

He de decir que quizás esperaba mas de diseño de interacción en el evento y mas Flasheros sueltos por el  lugar. Todo el mundo lucía su mac hasta el punto que te daba vergüenza sacar tu PC con su Vista instalado, pero bueno esto no es mas que otra muestra de que entre toda esa supuesta creatividad se esconden personalidades estereotipadas e inseguras, como un rebaño para-creativo que flutua según lo que dicta una manzana blanca luminosa.

Me sorprendio muchisimo como,  los diseñadores de interfaces de usuario, somos absolutamente ajenos a este mundo. Paradojicamente aunque nuestra profesion es también una rama del diseño, parece que estamos mas pegados al desarrollo que al arte. Si que habia desde luego toneladas de diseñadores de interfaces para web, pero al ser su target la publicidad, no jugamos al mismo juego.Quizas sea esta desconexión con el mundo del diseño el motivo del bajo nivel que tenemos en UX en españa. Los diseñadores no están apostando por esto, no ven como se le puede aplicar arte a algo tan supuestamente estático y formado como la interfaz de un programa. Y al final, tenemos a los programadores haciendo nuestro trabajo, con lo que conseguimos un nivel muy bajo y el desprestigio de el mismo, ya que parece que cualquiera que se instale photoshop y blend es diseñador.

La exploración del interfaz de usuario es el nuevo boom de la informática y lo que mas revuelo causará de aqui a unos años (y de hecho ya esta causando). Esto es una tarea difícil y artística y nos hace falta mucho talento para sacarla a flote.  Un mar inexplorado en el que nos han dado una magnifica carabela para descubrirlo, modelarlo y surcarlo. ¿Vas a dejar pasar la oportunidad de ser un pionero? 

El Diseño emocional es un termino muy vanguardista en la actualidad. La verdad es que es un termino muy pedante para decir una cosa tan sencilla y campechana como: Los usuarios no son maquinas, son humanos.

En el mundo del desarrollo de aplicaciones, normalmente, se trata a los usuarios como si no tuvieran sentimientos, emociones o alguna capacidad cognitiva que no sea interpretar datos. Esto es, evidentemente, un gran error. Los seres humanos somos seres complejos, muchisimo mas que un ordenador. (es curioso que haya que recordar esto!) Tenemos una enorme capacidad para interactuar y sentir el mundo. Somos seres sensoriales, nuestro cuerpo se diseñó (o evolucionó, mejor dicho) para reconocer e identificar magnitudes de muchas maneras. Y las procesamos de muchas formas distintas. Una de estas, son las Emociones.

¿Quiere decir esto que tenemos que llevar gafas de pasta y decir que hemos estudiado antropología para usar este concepto en nuestro trabajo? ...No.

Sin entrar mucho en divagaciones, el diseño emocional nos recuerda que nuestro objetivo consiste en comunicarnos con el usuario final. Y que a pesar de que nuestro trabajo parece totalmente ajeno a esto, provocará en él reacciones emocionales.

La mas evidente de todas ellas, y nuestro mayor objetivo a evitar, es la frustracion.  Cuando un usuario no sabe como continuar su próximo movimiento en nuestro interfaz se sentirá frustrado. Al sentirse frustrado su felicidad bajará (si, como los sims) y le provocaremos estres. Y esta no es nuestra intención. (por norma general)

Por supuesto podéis evocar cualquier emoción mediante un simple interfaz de usuario. Debéis elegir, medir y programar, las emociones necesarias para work-flow de la aplicacion. Por ejemplo, si tenéis una web con un preloader interesante y divertido, el usuario no se aburrirá y se quedará a ver lo que tenéis que decir. Como veis son todos emociones!

Un aspecto muy importante del diseño emocional, es la Arquitectura de la información. Los flujos de información (tanto estructural como formal) deben estar dispuestos de una manera acorde a como la mente del usuario espera encontrarlos. Es decir, si tengo una base de datos con una tabla con 10 campos. ¿Que es lo habitual? pues paso toda la informacion a un grid y punto. Que el usuario lea, edite y maneje la información desde ahí. 

NO!

Que debemos hacer? o mejor dicho, que debemos hacer según este nuevo paradigma de diseño emocional? Fácil, leer y investigar acerca de la información contenida en la base de datos. Los datos no son solo "el relleno" de una estructura de datos. Los datos son (o suelen ser) magnitudes con un significado real o cognitivo. Y como tales, debemos buscar la mejor dimension para representarlos. Además debemos diseñar un flujo de trabajo "humano". No hacerlo de la manera que nos resulte mas sencilla de programar. El usuario es el objetivo, la meta, el cliente, el fin, debemos tratarlo como si fuéramos nosotros mismos. De hecho, lo somos.

Hay una Relato muy curioso en el libro “El hombre que confundio a su mujer con un sombrero” (del Dr. Oliver Sacks) que cuenta la historia de un profesor de Musica con una extraña enfermedad cerebral degenerativa, la cual le atrofió el pensamiento abstacto y otras capacidades cognitivas.

El Profesor P. (este curioso profesor de musica aleman) presentaba un extraño comportamiento a la hora de reconocer objetos visualmente. Él poseia una vista de lince. Podia ver incluso un alfiler al otro lado de la habitación. Siembargo, el profesor P. no era capaz de reconocer algunos objetos o incluso personas.

Mirando retratos de su familia solo conseguía reconocer a aquellos que tenían rasgos faciales o corporales notables; – Ah sí, Paul!- decia al ver una foto de su hermano. Esa mandibula cuadra, esos dientes tan grandes.. Reconoceria a Paul en cualquier parte!.

Desgraciadamente no podia reconocerse a si mismo o a su mujer. Cuenta Sacks en el libro, que no solo no la reconocia, si no que la llego a confundir con un sombrero e intento ponersela en la cabeza.

Este hombre no era capaz de relacionar las formas que veian sus ojos con objetos de la realidad. Cuando el Doctor Sacks le enseña una rosa, esta fue su reaccion:

“La cogió como un botánico o un morfologo al que le dan un especimen, no como una persona a la que le dan una flor.

-Unos quince centrimetros de longitud – comentó- una forma roja enrollada con un añadido lineal verde.

– Exacto - ¿Y que cree que es?

-No es facil de decir.. Carece de la simetria simple de los solidos platonicos, aunque quizas tenga una simetría superior propia.. creo que podria ser una inflorescencia o una flor. 

- ¿Prodria ser? – inquirí. Huélala. Y de nuevo pareció sorprenderse un poco, como si le hubiese pedido que oliese una “simetria superior”. Pero accedió y cortés se la acerco a la nariz. Entonces bruscamente exclamo:

-Que maravilla, una rosa temprana! “

(extracto del libro)

La verdad es que al leer esto supe que aunque el doctor Sacks no lo supiera, habia dado con el principal problema del interfaz de usuario. – La abstraccion -

Seguramente habeis visto iconos y aplicaciones las cuales al mirarlas os habeis quedado como el Profesor P. al ver la rosa, traspuestos. Y el problema es que el interfaz (o el icono) no es capaz de comunicaros con una parte de vuesta realidad. Vemos formas, colores incluso sonidos. pero no somos capaces de extraer la información o el significado. Con lo cual estamos, literalmente, perdidos.

Los colores, las formas, las animaciones y sonidos no son solo recursos esteticos, de hecho esto debe ser (desde un punto de vista funcionalista) el ultimo de nuestros requisitos. Son en su lugar poderosas herramientas de comunicación. Son el vinculo entre la “utilidad” de la aplicacion y el cerebro del usuario.

Debemos saber comunicarnos con él. Para eso debemos dar un significado “real” a nuestro interfaz. Por real no me refiero a que tengamos que evocar objetos en todos nuestros iconos. Si no que debemos conectar con el usuario, y disparar en él un recuerdo, un significado en su mente, que él pueda asociar a algo cognitivo.

El un futuro post, abordaremos una de las mejores maneras de llegar a esto: La metafora como herramienta sinestesica.

En esta pagina se recojen los crimenes mas bestias que se pueden cometer (y de hecho se cometen) en la experiencia de usuario de web. La web esta realizada por expertos, asi que todo lo que podeis encontrar esta hecho aposta para que entendamos en nuestras propias carnes los problemas de hacer las cosas mal.

Un fondo demasiado contrastado, animaciones repetitivas, musica que empieza directamente al entrar en la web, sobredosis de contenido o la falta de él, son algunos de los ejemplos que nos ponen los chicos de angelfire.

Que lo disfruteis.

foto : Designing interaction de Bill Moggridge.

En un espacio vectorial los vectores se definen mediante coordenadas en cada una de las dimensiones previamente concretadas, cada dimensión es una característica propia del universo. Cuantas mas dimensiones tiene un vector, mas información contiene y mas complejo és.

En el universo del UX también tenemos dimensiones que definen nuestro espacio. Jugar con ellas será nuestra tarea. Al igual que es imposible comprender los vectores sin entender que son sus dimensiones (ancho (x), alto (y) y profundo (z)) jamas entenderemos la interacción si no conocemos las suyas.

 Al igual que el universo macroscopico (el que vemos a simple vista), los interfaces tienen 4 Dimensiones importantes. Estas dimensiones definen estructuras de información (y no estructuras espaciales como es el caso de los vectores) A medida que un elemento tiene mas dimensiones proporciona mas información al usuario, pero también se hace mas complejo y dificil de abstraer.

Pero expliquemos un poco el tema antes de meternos mas en vereda.

Interfaces de 1D de interacción o 1uxD

Son elementos de comunicación directa, sin ningún tipo de abstracción, es decir, todo el mundo lo va a interpretar de la misma manera. y no hacen falta metáforas, ni sinestesia para hacer referencia a su significado. Son las palabras. Tanto escritas como habladas.

Un ejemplo de esto serían interfaces de linea de comandos ó bien la típica azafata electrónica cuando llamamos al servicio técnico de nuestro operador telefónico.Lo bueno de estos interfaces es que nunca dan lugar a dudas, solo leyendo toda la información de la pantalla sé que me dice la aplicación.

Para comunicarme con ella puedo usar un comando, tal que así:

mount -t ntfs-3g /dev/sda2 /media/windows

Rápido, conciso, directo. pero...  Claro, el problema es simple, tienes que saber de que este están hablando. Necesitas mucho aprendizaje para poder utilizarlo. Por no mencionar que debes saber leer. Estos interfaces no nos dan mucha información de un solo vistazo y evidentemente el factor estético brilla por su ausencia.

No obstante elementos de 1uxD se usan hoy en muchos muchos interfaces. Son tales como los Labels, TextBlocks, TextBox, Combobox, Hyperenlaces  etc..  Son muy recomendables pero se deben usar siempre y cuando no podamos usar uno de dimensión superior.

Interfaces de 2D de interacción o 2uxD

Son los Interfaces estrella en el ordenador. Son exponencialmente mas difíciles de abstraer que los anteriores, puesto que soportan una interpretación subjetiva del usuario. Dan muchísima información de un solo vistazo, ya que juegan con uno de nuestros sentidos mas desarrollados, la vista.

Nuestra capacidad de reconocimiento de patrones y formas es de las evolucionadas de todo el reino animal. Es una cualidad que concierne a toda la raza humana (excepto los ciegos, claro está) y además con la que mas rápidamente accedemos a la memoria. Se trata realmente de un entorno muy favorable para la interacción, pero también es un arma de doble filo.

Al ser subjetiva podemos darle una interpretación ambigua o incluso equivocada. Esto depende de la calidad de la metáfora que hayamos usado al crear el elemento, pero también de la educción, cultura y estado físico del usuario.

Un buen ejemplo de estos elementos de interfaz, son los Iconos, pero también lo son los botones, checkboxes y demas.

Lo mas importante a la hora de realizar estos elementos es crear una buena metáfora de lo que representan, como por ejemplo la papelera de reciclaje. Es una idea abstraída de su funcionamiento. Un sitio donde puedo tirar archivos (que también son otra abstracción) y puedo recuperarlos después si no la he vaciado primero. Obviamente, en ordenador no funciona así, no hay una papelera pequeña en el disco duro donde se tiran trocitos del disco. Pero abstraemos la idea y usamos esta metáfora para que cualquiera pueda entenderla.

Como os decía, el usuario es quien va a interpretar vuestra metáfora, y por desgracia, a lo mejor un aborigen no entiende muy bien el concepto. Las abstracciones de las metáforas SIEMPRE deben responder al publico-usuario o al menos a la mayoría. Esto hará que el usuario dedique mucho menos tiempo a aprender a usar la aplicación. Cosa que a veces es esencial, como en los sitios Web.

Interfaces de 3D de interacción o 3uxD

Aquellos que nos permiten interactuar con las maquinas, son objetos reales, tridimensionales, de plástico, metal ,madera o cualquier material moldeable. heredan las cualidades de los interfaces 1D y 2D y tienen alguna característica importante más, como la ergonomia y la ingenieria (calidad y coste de los materiales, procesos de fabricación etc..). El diseño industrial es la disciplina que se encarga de estos menesteres.

Los botones, manivelas, pulsadores, tiradores, interruptores, volantes etc son buenos ejemplos de elementos que podemos encontrar en estos interfaces. Ratones, Coches, Reproductores de DvD, Mandos a distancia, consolas, paneles de control son ejemplos de interfaces 3uxD en si.

En estos interfaces jugamos con mas sentidos del usuario, como el tacto (y la capacidad motriz), el odio, la vista, el olfato y estoy seguro de que aunque ahora no se me ocurre ningún ejemplo gusto.

 El caso del tacto es sencillo ya que es el más explotado; los mas evidentes, botones, tiradores etc. Pero alguno menos evidente como las losas granuladas en los pasos de cebra las cuales comunican (a ti o a un invidente) que hay un paso de cebra cerca. La ergonomía da especial importancia a este sentido. ya que un mal diseño puede hacer que su uso resulte incomodo o incluso que provoque lesiones en el usuario con mayor facilidad que en los otros sentidos.

 El oido también tiene fáciles ejemplos, como los sonidos de alerta de tu sistema operativo, el sonido del claxon de los coches, el pitido de los semáforos cuando están en verde para peatones o incluso el sonido de las "bandas sonoras" de la carretera. Como podéis ver los sonidos suelen usarse para alertar de algo, y no debe abusarse de ellos. Especialmente en la informática y mas especialmente en las webs. Usar sonidos SOLO cuando sea necesario.

Jamas presupongais que un usuario quiere escuchar vuestros sonidos, ni vuestra musica (como es muy habitual en las webs). No olvideis que el sonido tiene interfaz mas usado de todos los tiempos, El Habla.

Un ejemplo curioso de interacción Olfativa, sería el del Gas butano. Sabéis a que huele el gas butano? A nada en absoluto. El famoso olor a gas es en realidad un gas que se mete también en la bombona, el Mercaptano. El cual nos avisa de hay un escape y podemos salir por piernas.

Se os ocurre alguno con el gusto? Comentad si se os ocurre algo!

Interfaces de 4D de interacción o 4uxD

No temáis, no vamos a ponernos a hablar de la Relatividad en la UX :) Simplemente vamos a añadir una ultima dimensión muy muy importante, El tiempo.

Si os fijáis en la vida real, relacionamos las cosas estáticas con aquellas con las que no se puede interactuar demasiado. Como por ejemplo las Piedras, las montañas.. Entes sin movimiento con los que poco se puede hacer, exceptuando apedrear a alguien, y aunque mas de uno se lo merece, no es muy interactivo. ;)

Si existe una verdad en el universo, es que las cosas se mueven, cambian de estado, se transforman. Los seres vivos y como tal el ser humano esta diseñado para vivir en un ambiente en movimiento. Somos capaces de recordar formas, colores, olores, etc.. pero también Movimientos.

La animación y el movimiento nos da mucha información que no debemos desaprovechar. Por ejemplo, cuando minimizamos una ventana (tanto en windows o como en mac) la ventana se anima mientras se minimiza hacia el icono o la barra de tareas. De esta forma sabemos que la ventana sigue ahí, esperándonos. Y cuando queramos restaurarla recordaremos donde esta. De otra forma tendríamos que leer cada icono.

Os dais cuenta del potencial?  Animaciones, si, si, si y si. Pero solo cuando añadiendo esta dimensión al interfaz ganemos información para el usuario. Es preferible no abusar, hacerlas mas rápidas y ligeras. Cuanto más familiarizado esté el usuariom menos uso podremos hacer de ellas, llegando incluso a eliminar algunas cuando el usuario sea un experto. (El concepto del interfaz adaptable del que hablare en un post mas adelante)

Conclusiones.

1. En el diseño de interacción es vital jugar con los sentidos del usuario, ya que es la manera con la que el usuario percibe y interactua con el mundo.  

2. Hay que expresar los elementos del interfaz lo mas cerca posible de su verdadera dimensión. De esta manera condensaremos la información sin saturar el interfaz ni al usuario.

3. No debemos sobre sobrecargar jamás el interfaz, si tenemos mucha información que mostrar, debemos preguntarnos si se podría sustituir por un elemento de dimensión superior o en caso contrario, estudiar el quitarlo de cuajo! Simpleza al poder! 

4. Debemos crear buenas metáforas para abstraer los conceptos. 

5. Debemos pensar en el usuario, por encima de todo (Diseño orientado a usuario) ya que es el quien nos da de comer. 

Comeos el coco! Investigad! haced que vuestra abuela pruebe vuestros IU y si no lo entiende, mordeos la lengua y cambiadlo! Ale! a disfrutar!