Tag Archives: UI

Tutorial rápido para sketchnoting

Como parte del curso INFO-I300: Diseño de Interacción Humano-Computadora en la Universidad de Indiana en Bloomington, he creado un pequeño tutorial sobre sketchnoting. Esta es la primera vez que escribo mi razonamiento detrás de la manera en la que tomo notas. Fue una experiencia interesante. Mis insights derivados de este ejercicio sonÑ

  • Sketchnoting ayuda a organizarsintetizar información.
  • Sketchnoting ayuda a desarrollar pensamiento metafórico.
  • Sketchnoting ayuda a desarrollar un código visual personal para la información.
  • Las herramientas son importantes (e.g., marcador de punta de aguja, marcador de punta de pincel y libreta de bocetos de buena calidad).
  • Saber dibujar no es tan relevante. Las anotaciones tienen que tener sentido para ti primeramente.
  • Consistencia es un aspecto clave para sketchnoting.

Y con base a mi experiencia, los pasos para un buen sketchnoting son:

  1. Escuchar
  2. Filtrar
  3. Anotar
  4. Codificar visualmente
  5. Relacionar el contenido

Espero que la presentación de abajo sea de utilidad para los interesados en sketchnoting.

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. :)