martes, 17 de febrero de 2009

Flecha a ninguna parte

Imagen extraída de stock.xchng

stock.xchng es una página web que contiene imágenes de todo tipo, libre de royalties para uso de diseñadores gráficos.

Presenta un error de diseño a la hora de la navegación paginada de las imágenes ( que seguramente podrían solucionar utilizando alguna de las millones de imagenes que almacenan ). Observemos:

Click para agrandar

En la parte inferior se puede ver un botón naranja, que por su silueta y sus formas interiores da la sensación de señalar a la derecha. Uno puede pensar que su funcionalidad es la de pasar a la página siguiente, sin embargo, lo que hace en realidad es saltar a la página que hayamos introducido en el campo de texto de la izquierda.

Y así fue como tras quince minutos buscando una foto en concreto, me di cuenta de que estaba mirando la misma página una y otra vez.

Se trata de un error en diseño en base a las metáforas. Una flecha que señala a la derecha que no va a la derecha.

"Cuando el sabio señala al cielo, el tonto mira al dedo" - Amélie

"Cuando una flecha señala a la derecha, va a la página que has introducido en el campo de texto que hay al lado" - stock.xchng

Solución #1 - Google

La solución adoptada por Google fue la de no incluir el salto a una página determinada. El usuario realmente no sabe lo que se va a encontrar en ella así que la utilidad de un botón de estas caracterísiticas es bastante reducida.

Solución #2 - Foro vBulletin


En los foros vBulletin, se mantiene la inclusión del salto de página utilizando una solución más elegante y que no interfiere con la compresión que el usuario pueda tener. Se trata de un diminuto menú desplegable a la derecha que permite introducir el número de la página que queremos acceder, de manera muy intuitiva.

Las alertas invasivas de Microsoft llevadas a un extremo

CacharraBand '08

GarageBand es una aplicación de edición de audio(*), diseñada por Apple e incluida en una suite de aplicaciones multimedia conocida como iLife. El análisis que viene a continuación se centra en la versión '08, así que puede que los errores hayan sido subsanados en la actual versión '09. De todas formas dudo que esto haya ocurrido, ya que los colegas de California estaban demasiado ocupados añadiendo contenidos de pago que se olvidaron de mejorar la usabilidad Una verdadera revolución, Apple pioneros, siempre en la vanguardia, totalmente punteros. A nulo.

Hecha la introducción, pasemos a los errores de diseño. El primero:

En la imagen vemos tres pistas de audio y otra de instrumento MIDI. La primera pista de arriba tiene el piloto de REC encendido, por lo que está lista para grabar. Pongamos una situación hipotética en la que solo tenemos una sola entrada de audio y una guitarra conectada a la misma. Supongamos que en la primera pista ya hemos grabado unos cuantos acordes, y ahora en la segunda pista queremos tocar un punteo, estamos inspirados. ¿Que haría Steven Seagal para grabar un solo en la pista número 2?

"Yo le daría a donde señala la flechita"

Muy bien Steve. Pero... ¡Espera un momento! GarageBand está diciendo algo:


Observemos la reacción de Mr. Seagal:

"Quiero grabar en la pista dos y quiero hacerlo AHORA"

Si, Steven Seagal está cabreado, y ningún diseñador de interfaces quiere a Steven Seagal cabreado. ¿Tan dificil era deducir que quería grabar en la pista 2? ¿No puedes desactivar la grabación de la pista uno automáticamente? ¿Tengo que hacerlo yo? ¿Tiene que hacerlo STEVEN SEAGAL?

Desde el punto de vista de la asignatura, esto supone un sobreesfuerzo para el usuario ( y para S.S. ), ya que obliga a desactivar una pista para grabar en otra.

lunes, 26 de enero de 2009

"Jebi metal" en la Frontera de Ejecución

R.I.P. Randy Rhoads (1956-1982)

Hoy la cosa va de guitarras, en concreto: la Randy Rhoads de Jackson. Este modelo recibe su nombre del virtuoso guitarrista del mismo nombre, célebre por tocar con Ozzy Osbourne en la década de los ochenta y por su estrambótica muerte ( un avión se estrelló encima de él ).

La silueta y forma de esta guitarra goza de cierta popularidad en el mundillo, por su forma de flecha y bordes asimétricos puntiagudos. Analizándola desde un punto de vista meramente funcional, nos encontramos con dos importantes errores de diseño que comentamos a continuación. Como siempre, la eterna lucha entre la estética y la funcionalidad.

El primero, viene a la hora de tocar de pie. Dada la forma del cuerpo y la manera en la que se distribuye el peso la guitarra se inclina con el clavijero apuntando hacia el suelo al menor movimiento, por lo que hay que sujetarla con las manos en todo momento. Otras guitarras de corte mas tradicional mantienen su posición mientras cuelgan de la correa en perfecto equilibrio, permitiendo mayor movilidad al músico.

El segundo viene a la hora de tocar sentado ( visto lo visto uno puede pensar que no hay manera de tocar con este bicho ). Como vemos en la foto más abajo, el conector jack queda justamente a la altura del muslo del músico, y lo peor es que esa es la única postura que permite tocar con la guitarra sentado sin que ésta balancee.

Las soldaduras internas del cable se partirán al cabo de unos pocos meses de uso.

Tenemos aquí un claro ejemplo de fallo de diseño en la frontera de ejecución, en la efectividad. Ese conector simplemente no debe estar ahí.

La solución consistiría en colocar la entrada en otro lugar donde estorbe menos, como ilustra la siguiente imagen:

miércoles, 21 de enero de 2009

Introducing Pitufoshop™


=)

Niños dibujando cosas II : Diseño

Imagen extraída del archivo de fotos de la revista LIFE de Google

Llega la hora del diseño de la aplicación. Basándose en el análisis previo ha de ser una interfaz sencilla, intuitiva, y llamativa para el niño ( pero lo justo para que no desvíe la atención de su obra ). Tampoco incluirá texto, y los botones tratarán de ser representaciones a modo de dibujo animado en lugar de símbolos con trazos simplificados.

Antes de explicar las herramientas de dibujo de la aplicación, vamos a mostrar la pantalla de inicio:

Pantalla de Inicio

Tenemos una ventana sencilla que presenta tres filas de folios con dibujos en miniatura. En la primera, dibujos previos, el usuario podrá navegar por los dibujos en los que haya trabajado previamente ( no hay botón de guardar, pero eso se explicará posteriormente ). En la segunda fila, plantillas, se podrá navegar por una serie de dibujos para colorear o pintar encima. Por último, en la parte inferior del recuadro aparecerá un folio en blanco, que con suerte será lo suficientemente sugerente para que el pequeño empiece a hacer un dibujo nuevo.

Una vez se haga clic en alguno de los folios se nos mostrará la pantalla de dibujo y nos pondremos manos a la obra. Aquí está:

Pantalla de Dibujo

Como vemos, una interfaz bastante sencilla e intuitiva.

En la parte inferior tenemos una serie de lápices de bastante de grosor ( hay que recordar que nos enfrentamos a un pitufín con poco pulso ) que servirán para elegir el color.

La parte derecha alojará un espacio que variará en función de la herramienta que tengamos seleccionada, por ejemplo: si tenemos seleccionado el pincel nos mostrará una serie de siluetas que determinarán la forma y grosor del trazo, con el relleno una serie de patrones de relleno.

A la izquierda nos encontramos con un conjunto constituído por cinco herramientas básicas. De arriba a abajo son: pincel, goma de borrar, cubo de relleno, formas predeterminadas, y deshacer.

¿Por qué una estrella? Simplemente hacía falta un icono que se diferenciase de los demás, que llamase la atención del niño, y que además seafácil de recordar. En la mente del niño debería estar pasando algo así: "Estrella ==> Cosas raras y divertidas".

Pero la verdadera pregunta es... ¿Por qué Macaulay Culkin? ( aka. maculi kurkin ) Esta decisión ha sido tomada tras un largo periodo de investigación. Comunmente, para la herramienta de se suele utilizar una flecha que señala hacia atrás, hacia el pasado. Sin embargo, esta flecha en mi opinión sería demasiado críptica para el niño. Ahora observemos a Macauly:

"CTRL+Z!"

Esa expresión, ese rostro, habla por si mismo. Al verlo el niño se sentirá identificado y leerá en la cara del rubio un "¡Me equivoqué!", o si se trata de un usuario canario verá "¡YIAS!". Además, al tratarse de una foto en lugar de un dibujo, el botón será asociado y recordado con un tipo de acción distinta: "si me equivoco hago clic aquí". Cuando te equivoques, "makuli" estará ahí.

Por último, en la derecha tenemos un tocho de folios, que nos llevará a la pantalla de inicio. El único lugar donde se habían visto folios es la pantalla de inicio así que debería ser recordado fácilmente. Además, está colocado en una posición donde no existe nada más parecido a su alrededor. Así que si no es recordad por su forma lo será por su posición.

Como habíamos mencionado antes, no hay botón de guardar. Principalmente se ha hecho para librar al niño de esta tarea, así no se tendrá que preocupar por donde tener que guardarlo, o recordar donde metió su Mona Lisa particular. Cada documento será guardado periódicamente y se colocará automáticamente en la sección de Dibujos Previos.

Por otro lado, también sería interesante incluir algunas características que no pueden ser plasmadas en una imagen. Como sería la animación y emisión de algún sonido cuando se sitúe el ratón encima de algún botón, facilitando así la diferenciación entre todos ellos mientras que se divierte y estimula al usuario. Algo muy interesante, a la hora de seleccionar un color, sería la pronunciación del nombre del nombre del mismo ( de ésta forma conseguiremos enseñarle los colores al niño ).

En definitiva, ésta es la interfaz planteada. Como se ha dicho: sencilla e intuitiva. Aunque no tan sencilla e intuitiva ( y económica ) como un lápiz y un papel.

Imagen extraída del archivo de fotos de la revista LIFE de Google

miércoles, 10 de diciembre de 2008

Niños dibujando cosas I : análisis

Foto del usuario de Flickr mitikusa

La tarea que nos toca ahora es realizar un diseño de un programa de dibujos para niños. Para enfocar dicho diseño deberíamos ponernos en la piel de estos pequeños seres, retroceder en el tiempo y recordar como pensábamos siendo unos pitufines.

También hay que tener en cuenta una serie de consideraciones, en lo que respecta a la diferencia de perfiles entre un adulto y un niño. No sería lógico plantear una interfaz de un programa de diseño gráfico serio estilo Adobe Photoshop o GIMP, ya que el objetivo de estos programas es realizar imágenes de calidad profesional.

En un programa de dibujo para niños lo que se persigue es potenciar su imaginación mediante estímulos visuales y actividades que potencien sus capacidades psicomotrices. Por lo tanto, herramientas como la pluma para dibujo vectorial, filtros, máscaras y todo lo que requiera un poco de maña queda automáticamente descartado.

Si incluímos dibujos para colorear, habría que discutir si se incluye la herramienta de relleno o no. Colorear un dibujo con 5 clics no tiene ninguna dificultad pero tampoco podemos pretender que se coloree a mano utilizando el ratón a modo de cera o rotulador: no es el dispositivo más adecuado para esto y puede resultar frustrante.

Básicamente diferenciaremos entre tres tipos de herramientas: seleccionar la forma en que dibujamos ( brocha, lápiz, pincel, relleno, formas predefinidas de objetos/animales ... ), seleccionar el color, y borrar/deshacer.

Hay que profundizar en la forma en que planteamos este tipo de herramientas al enano:
  • Selección del color: No hace falta poner una paleta de colores de más de 4.294.967.256 colores, aparte de que probablemente el ojo humano no detectaría la diferencia entre algunos de ellos, a un niño realmente le da igual. Con poner 7 u 8 colores básicos el niño estará contento.
  • Forma del trazo: La forma del trazo debe ser algo vistoso y no simples círculos o cuadrados. Estrellas, animales, corazoncitos y cosas por el estilo serán mas divertidas para el niño.

Otro factor a tener a cuenta, es la forma en que trataremos de comunicarnos con el niño. No podremos utilizar texto ya que probablemente no sepan leer, pero tampoco podremos utilizar imágenes y botones demasiado simbólicos porque probablemente no los comprendan ( de hecho, hay botones en algunas aplicaciones que ni siquiera nosotros los adultos sabemos como funcionan ). Lo ideal sería utilizar un conjunto de imágenes que sean fáciles de comprender, diferenciar y recordar.

En definitiva, hay que enfocar el programa más como un juego que como una aplicación seria y tratar de estimular al niño y tratar entrenar y mejorar sus capacidades psicomotrices.