Tag Archives: Diseño de Interfaces

Señalización en Guanajuato

Guanajuato es una ciudad mexicana patrimonio de la humanidad, la cual es muy particular debido a su topografía. A grandes rasgos la ciudad parece estar asentada en un bol, por lo que quedan casas prácticamente unas encima de otras, lo cual deriva en muchos callejones y aún más, existen túneles para movilizarse en carro.

Guanajuato Capital desde el funicular y Pípila

Ciudad de Guanajuato México

Vistas de la ciudad de Guanajuato.

Aunque los sitios turísticos son fáciles de encontrar, el municipio dispuso de un conjunto de páneles a lo largo de ciudad para orientar a sus visitantes. Me interesó y gustó mucho como está presentada la información, ya que de primera mano, al existir tanto recoveco, los turistas podrían pensar que es muy complicado caminar en la ciudad.

Señalización de Guanajuato Capital.

Señal turística en Guanajuato.

La primera característica que se me hizo muy acertada fue el contraste. Las señales tienen un color terracota (chedrón o copper redad hoc a la ciudad pero que además hace un buen contraste cromático con los textos, los cuales se presentan en color blanco y usando una fuente tipográfica de palo seco, muy limpia y legible. Los demás colores empleados (en el mapa y esquemas) también facilitan la lectura de la señal.

Cada panel está divido en cuatro partes claramente identificables. La primera corresponde al nombre del lugar donde se encuentra la persona. La alineación a la izquierda,  jerarquía tipográfica y el aire alrededor ayudan determinar que "ese texto" (el título) corresponde al nombre del lugar.

Señal en Guanajuato Capital

Lista de lugares importantes cercanos al sitio actual.

Debajo del texto correspondiente al nombre del lugar, se encuentra una lista de los lugares más cercanos. Su alineación a la izquierda resulta más conveniente que emplear una alineación centrada, ya que se arma una línea vertical imaginaria que agiliza la lectura de dicha lista. Esta lista ocupa una columna central en el panel, de forma que quedan dos pequeñas columnas, una a la izquierda y otra a la derecha. Dependiendo si se tiene que caminar hacia la izquierda o hacia la derecha, se coloca en la columna correspondiente una flecha de dirección (←,→,↑ ,↓) para cada elemento de la lista.

Se que suena bastante intuitivo, pero este tipo de detalles simples reafirman el sentido de orientación espacial.

Mapa topográfico en la señalización de Guanajuato Capital

Mapa de tipo topográfico en la señalización en Guanajuato.

Ya debajo se presenta un mapa, cuya intención es situar al usuario en el espacio físico. En español, francés e inglés, se le indica con etiquetas como "Frente a ti" y "Detrás de ti" la relación entre lo que observa en el mapa y el entorno que lo rodea. El camino principal se resalta con color amarillo, dando evidencia a las formas de éste; muy útil para entender "cuando dar la vuelta". También se muestran, mediante contraste cromático, los sitios importantes en el área incluyendo los de la lista. Además se marca el norte como símbolo estándar de orientación.

Tube map o Pipe map tipo Beck's London en Guanajuato Capital

Mapa tipo Beck's London Underground

Mapa esquemático a la Henry Beck de un recorrido en la ciudad de Guanajuato.

La cuarta y última sección de cada panel corresponde a un esquema conocido también como mapa de tubo,  idea formidable presentada por Henry Beck en los 30s. En éste también el usuario se orienta en cuatro direcciones (←,→,↑ ,↓), pero le brinda la ventaja de identificar rápidamente que lugares se encuentran conectados con respecto al camino principal y mediante qué calles. La legibilidad para ir del punto A al punto B sin duda se incrementa con este tipo de mapas. De nuevo, lo importante se contrasta mediante el color, tanto para el camino principal como los lugares importantes. Los textos tienen su mayor contraste en este sentido con la aplicación del color blanco.

Este tipo de iniciativas me gusta mucho en los casos en los que uno no desea tomar recorridos y la ciudad, como Guanajuato, es adecuada para caminarse. Así vas tomando en cuenta qué lugares vas vistando y cuáles han llamado tu atención, previa investigación en la red o bien con una guía en mano. Sólo espero que no acaben destruidos o bien, que no se les de mantenimiento y acaben siendo un elemento deteriorado y visualmente desagradable al paso de los visitantes de esta colonial y especial ciudad.

TAT: The Astonishing Tribe

Gracias a Hugo de Bluku.tv me entero de The Astonishing Tribe, o TAT, quienes se definen como un grupo sueco que ha agregado el efecto wow a las interfaces de usuario en más de 270 millones de dispositivos móviles alrededor del mundo. Dejo aquí un par de video de sus últimos prototipos, aunque en general su showroom es de por sí interesante.

También están en facebook por si alguien los quiere agregar.

Me encantó su tagline:

Design loves technology.

Escenarios en video

Los escenarios son muy útiles en el diseño de interacción. Aunque tradicionalmente son escritos, tomar la opción de presentarlos en video o a través de bosquejos también puede ser muy conveniente ya que se explota el factor visual-narrativo. Como muestra, tenemos estos videos del canal en Vimeo que tiene el Mobile Experience Lab, parte del Design Lab del MIT.

Problema con los speakers en Mac

Actualización:

a) Wow. Gracias por sacarme de mi ignorancia, muchas gracias por explicarme la verdadera razón :D Que bueno que escribí este post o hubiera muerto engañado; mejor evidenciar que uno se equivoca a vivir en la ignorancia. ¡¡¡Gracias por los comentarios!!!

b) Mi colega Omar V. me manda una liga donde parece estar la información pertinente: http://en.wikipedia.org/wiki/TOSLINK

Post original:

Primero, quisiera compartir tres puntos:

  1. A los que estamos involucrados en diseño, hemos escuchado alguna vez la frase "Un buen diseño es aquel que es invisible ante sus usuarios".
  2. Por otro lado, está el enfoque de Mark Weiser y su Calm Technology, del cual he comentado, y creo que muy importante: tu diseño debe disponer de todo al usuario, pero sólo lo necesario para realizar una tarea debe estar en el centro de su atencion y lo demás en la periferia.
  3. El diseño de información se encuentra en muchos objetos de todos los días, en su mayoría con instrucciones o etiquetas (textuales, verbales o visuales), y es un hecho que estamos bien adaptados a códigos cromáticos, como sucede con los semáforos o señales de peligro.

Recientemente me topé con una situación que parece conjuntar los tres puntos: el desajuste de los speakers en la lap. Tenía enchufado los audífonos; parece que al sacar el conector, moví algo por dentro y la lap se quedó como si tuviera los audífonos aún conectados; por lo tanto, los speakers no se oían.

Es primera vez que me sucede esto, pero parece que es un problema más común en las Mac de lo que pensaba. Para solucionarlo, enchufas  los audífonos de nuevo y vas girando suavemente el conector, luego los desenchufas y ¡voilá!, tus speakers suenan de nuevo. Lo comento por si alguien ocupa esta info algún día. ;)

speakers-redlight

Para indicarme que algo iba mal y dónde estaba el problema, el hueco para enchufar los speakers se puso rojo. Realmente me sorprendió y encantó este hecho, porque no tenía ni idea de que ese orificio se podría iluminar en ese color. Además fue un warning que me señalaba el lugar y no hacía tanto alarde en la pantalla o se ponía en un lugar de ésta que a lo mejor ni veía. Además, está la simple idea de manejar el color rojo para decir que algo está mal empleando una convención occidental.

Me causó el mismo impacto que cuando ví "dormir" a mi iBook G4 por primera vez: la luz se prendía y apagaba lentamente como si estuviera respirando y lo mejor aún, no pensé que hubiera una luz en la orilla de mi laptop.

Una duda que me surge con este tipo de detalles, que van más con lo funcional que con caprichos decorativos, es: si a la gente de Apple se le ocurre incorporar este tipo de características, ¿por qué en otras compañías no se toman decisiones similares? ¿será realmente algo diseñístico o cuestiones de mercadotecnia según delimitan segmentos de mercado y ofrecen lo que creen ad hoc a los diferentes nichos?

En fin...

Affordances everywhere

De acuerdo con D. Norman:

“... the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used... Affordances provide strong cues to the operation of things.”

Esto es, que veamos y entendamos rápidamente con qué y cómo operar el objeto (como herramienta) para cumplir una tarea.

Cuando una affordance es buena, hace que pasemos de ser usuarios novatos a usuarios expertos con una transición suave. ¿Por qué podría ser esto? La respuesta, aunque parece tonta, tiene que ver con el hecho de que las cosas funcionen como esperamos.

Recuerdo que mi primer celular, un LG muy sencillo y bastante compacto, tenía su teclado alfanumérico distribuido en 4 filas de 3 botones cada una (como la mayoría de los celulares). La forma de los botones es tal que si lo pones de lado se ve "adentado", lo cual ayuda a identificar cada fila y visualmente brinda la sensación de que los botones son apretables. Llegó un momento después de tanto uso que ya podía escribir mensajes de texto si ver las teclas. Esta característica generó un aspecto emocional positivo con este aparato.

Justo con este ejemplo, tuve una breve pero interesante discusión con un colega de sistemas computacionales sobre los pros y contras de un teclado equivalente en una interfaz táctil, como en el iPhone. Sin duda otro tipo de affordances son necesarias.

celular-viejito

Celuar LG jubilado después de múltiples caídas.

Un ejemplo típico sobre las affordances corresponde a la puerta giratoria, donde empujamos hacia la izquierda o derecha un panel dependiendo de qué nos "dice" la puerta; es decir, si notamos algo "para empujar" o no. Es simple, pero a mi ha resultado chistoso comprobarlo. En el lugar donde trabajo hay una puerta de vidrio cuya manija es igual en ambos lados. Cuando la gente llega, tiende a "empujar" la puerta, similarmente cuando sale. El problema está en que el techo está desnivelado: cuando la gente entra no hay problema, pero cuando sale, la parte superior de la puerta "raspa" el techo, terminando la puerta "colgada" y a punto de caerse completamente. La pobre, ya va en su tercera reparación. Con frecuencia, a la gente que nos visita hay que comentarle "hacia adentro, por favor".

puerta-oficina1

El diseño da la oportunidad de jalar la puerta, pero su forma triangular (colocar tu mano en un vértice no es muy agradable) influye en que las personas prefieran empujarla.

Así, en una affordance, la forma influye y está supeditada a la función u operación a realizar, más que a un capricho estilístico. En la imagen de abajo hay un dispensador de papel y otro de jabón. El primero, aunque estilizado, no muestra con claridad cómo hacer que salga mas papel, sobretodo si lo vemos de frente (es practicamente un rectángulo). En el segundo, se ve un componente que resalta y demuestra su caracter de "apretable". Podemos pensar entonces que el contraste de forma es un factor de diseño importante entre los diferentes elementos de un objeto, especialmente en aquellos que son necesarios para la interacción con éste.

papelera-jabonera-banio

Los usuarios no son tontos, sólo desean hacer lo que quieren hacer casi de forma instantánea e intuitivamente.

garrafon-de-agua

Ejemplo de contraste para evidenciar con qué se puede interactuar.

asa-camioneta

Las hendiduras bien marcadas permiten identificar cuántos componentes hay antes de intentar manipularlos.

En los objetos físicos (derivados del diseño industrial), la affordance también se vincula con la ergonomía. Por ejemplo, cuando identificamos algo apretable, podemos saber si es factible la acción con la llema del dedo, con dos dedos o incluso con la palma de la mano. Esto además, nos brinda información subyacente sobre la accesibilidad de esa función: si podemos apretar es porque está permitido y la consecuencia no será perjudicial. Cuando no se piensa en términos de "medidas humanas" quizá no sólo es por el tamaño del producto mismo, sino porque resulta inconveniente que accedamos a esa función tan fácilmente: por ejemplo, cuando tenemos que "resetear" algo metiendo un alambre o una ajuga porque el botón es prácticamente minúsculo y se encuentra hacia dentro.

regulador-ac

Sin importar si somos diestros o zurdos, se pueden colocar los dedos cómodamente.

manija-camioneta

El tamaño del hueco evidencía que es una asa para jalar la puerta.

Las affordances están presentes tanto en objetos de diseño físcos como intangibles (como son las páginas web). Pensar que los elementos interactivos de interfaz son intuitivos/evidentes para los usaurios es una buena práctica de diseño, la cual a veces se pasa por alto y sin embargo, no sólo conlleva un resolución diseñística centrada en el usuario, sino afecta también la experiencia de uso misma y los factores emocionales asociados al objeto.

Saludos. :)

2019 según Microsoft

Este video me lo mostraron en una conferencia y me encanta porque es fantasía, imaginación y el esfuerzo real  (que ponen en su promesa - como en este corto) de las personas que ahora trabajan/investigan en Interacción Humano Computadora.

También disponible en una versión extendida en Bluku Blog.

Taller de Diseño de Interacción con Joe Fletcher en Códice 8

Este jueves 26 fue el primero de dos días del taller "Diseño de Interacción para el Mundo Real" con Joe Fletcher en el congreso Códice 8, diseñador que participó en el desarrollo de la Surface de Microsoft.

En esta sesión nos comentó qué es y qué no es diseño, y qué se entiende por diseño de interacción y de experiencias. Aquí unas citas:

El diseño no es un evento, no es un producto y no es una experiencia. El diseño es acerca del proceso.

Si asumimos que el diseño es el proceso, el producto no importa.

El diseño de experiencias es concentrarse en momentos que se comprometen la gente y las marcas y en los recuerdos que esos momentos crean.

Cada vez que diseñes, el diseño debe decirte una historia.

La sesión tuvo dos ejercicios, ambos en grupo. El primero consistió en darle órdenes a Joe para hacer un sandwich de mantequilla de maní y mermelada de fresa.

Un ejercicio de cómo hacer un taco hubiera funcionado mejor. El original: muy gringo a mi gusto. ;)

Según entendí, el objetivo era demostrar lo complicado que es pensar tanto narrativamente como algoritmicamente: como entender qué y/o quiénes se hacen partícipes en una interacción (una tarea) de principio a fin y cómo cada uno de esos elementos tiene ciertos comportamientos (lo que puede hacer, sus funciones). 

Explicación de los bocetos para la cocina de Steve Jobs (foto de celular)

Explicación de los bocetos para la cocina de Steve Jobs (foto de celular)

En el segundo ejercicio, el problema fue diseñar una cocina para Steve Jobs. Nos dispusimos a pensar un poco en Steve, luego definir el problema, de ahí hacer una lista de las restricciones de diseño y por último, elaborar bocetos de esta cocina. Me agradó que hicimos el ejercicio sin usar los términos y/o nombres de los métodos o herramientas que empleamos, qué basicamente era diseñar en términos de Personas, el método de diseño inventado por Alan Cooper, para después hacer un sketching muy a la Bill Buxton.

Como profesor, es similar a lo que veo con mis alumnos, pero me sentí muy raro al estar del otro lado: yo haciendo el ejercicio. No es tan fácil sentarse en grupo y comenzar a discutir y proponer, evitar protagonismos o llegar todos a un consenso. Aquí fue rápido por cuestiones de tiempo y además estábamos en un ambiente amigable; pero el mismo Joe comenta que así es un día de trabajo: sentarse con programadores, creativos y hombres de negocio; lo cual, no es fácil. 

El taller terminó con una ronda de preguntas y respuestas en la que Joe nos dio su opiniones sobre el diseño en México, cómo está el diseño de interacción en Estados Unidos y la realidad laboral de los diseñadores en general, cómo llegó a Microsoft, la importancia de tener un design thinking, entre otras.

Avances del programa piloto en diseño de interacción del CIID

Ya tiempo atrás me topé con el sitio del CIID, siglas en inglés del Instituto para el Diseño de Interacción en Copenhague, quienes pensaban abrir una versión piloto durante un año de lo que sería una futura maestría en diseño de interacción. Ahora, regreso y encuentro con gran delicia, e incluso envidia, una muestra de los proyectos que se han estado realizando en los cursos ofrecidos.

ciid interaction design pilot year website

El pilot year tiene su propio subsitio dentro del sitio del CIID, el cual está a su vez dividido por cursos. Interesantes sin duda los resultados obtenidos. Abajo dejo videos de proyectos de diferentes cursos.

 

MacBook Wheel

Feliz año 2009. Mucha salud, paz y sabiduría en los días de este año nuevo y en los que vengan.

Alguna vez un colega me comentó que si las leyes de la simplicidad de John Maeda se llevaran al extremo sobre una interfaz física, al final esta sería un gran botón. Este video lo dice todo:


Apple Introduces Revolutionary New Laptop With No Keyboard

[Voz de párroco en misa domiguera] 

Y es por eso, como diría John Maeda: "In simplicity we trust".

:p

 

P.D. Creo que este post quedaba mejor en el día de santos inocentes.

 

Adaptación a una nueva interfaz

Una interfaz simple no necesariamente implica que sea fácil de usar. Por el contrario, una interfaz compleja no implica que, a mediano plazo, no se pueda dominar. Ya sea una aspiradora, un control de televisión o una aplicación web, interactuar con las interfaces de todos estos productos involucran un proceso de adaptación.

Bajo una reflexión rápida, se puede notar que estas adaptaciones y re-adaptaciones son más frecuentes en productos tecnológicos: por ejemplo el Nokia 3310, que podría decirse innovador en su tiempo, no podría competir con el hoy tan mercadeado iPhone de Apple en cuanto a diseño e interfaz, claro, en un sentido subjetivo. Una diferencia notable es cómo llevar a cabo su tarea básica: hacer una llamada. En el primer producto se "aprietan" botones mientras que en el segundo se "toca" una pantalla sensible. De cualquier forma, ambos casos requieren por parte del usuario un esfuerzo físico (mover brazos, manos y al menos un dedo) y mental (entender y mandar la señal para ejecutar la acción).

Apple Mighty Mouse

El Mighty Mouse de Apple

Es posible que una persona de 40 años en adelante posea un nivel de alfabetización informática menor a la de un joven adulto en sus 30s; a diferencia de este último, una persona que no "creció" con el paradigma WIMP (siglas en inglés para "ventana-icono-menú-apuntador") le cuesta trabajo conectar el movimiento del brazo y mano sobre algo voluminoso (el mouse) en una superficie horizontal para manipular algo diminuto (el apuntador) en una superficie cuasi-vertical (el monitor). Al no estar adaptados a la interfaz (mouse-apuntador), en algunas ocasiones se puede observar como a este tipo de usuarios se les "acaba" el pad y tienen que estar levantando constantemente el mouse.

Mario Galaxy para Nintendo Wii

Mario Galaxy para Nintendo Wii

Por otro lado, alguien que es "hijo del mouse" también se enfrenta a otro tipo de adaptaciones que alguien de 10 años podría obviar. El videojuego Super Mario Galaxy quizá no sea el más sofisticado, pero si el usuario está acostumbrado a trabajar en 2D, resulta un verdadero reto coordinar ambas manos (una para el control y otra para el nunchuck) para manipular a Mario en un espacio tridimensional sin dirección y sentido fijos emulado en la pantalla de televisión. Casos similares se presentan en el interfaces relacionadas con el diseño, como manipular una tableta Wacom, donde la adaptación implica pasar de un 2D-2D del mouse-pantalla a un 3D-2D porque la pluma se mueve en el "aire" y el clic significa "bajarla" y presionar la tableta.

Cuando los usuarios se sienten cómodos con los productos de diseño como herramientas, es porque ciertamente los encuentran fáciles de usar. ¿Podría decirse que esa facilidad es porque existe una "analogía" de aprendizaje previo con otros productos o herramientas? Sino, ¿por qué la metáfora sigue siendo reina en el diseño de las interfaces de usuario?

Una conjetura rápida es afirmar que el resultado que tienen los infantes del contacto con la tecnología durante su etapa de aprendizaje, derivarán en un cúmulo de estructuras mentales que los prepararán para aprender a usar nuevas herramientas tecnológicas en su futuro, todo a través una constante propagación de "analogías". 

Aunque los usuarios no quieran, así como pasa el tiempo, la tecnología va cambiando. Sin embargo, el re-adaptarse a nuevas interfaces quizá fuerce a los usuarios a aceptar estructuras mentales y/o esfuerzos físicos muy extraños para ellos, y aunque al final podría ser que acaben aprendiendo a usar la herramienta tecnológica, la perspectiva no será igual a alguien que aprendió con paradigmas más recientes. Al final, es un ciclo que continúa y continúa, resultando curioso que algunos de los problemas que resuelven la ingeniería y el diseño prácticamente son los mismos.