Capítulo 4: Invitaciones y metáforas

From The Joel on Software Translation Project

Revision as of 08:39, 7 October 2008 by Anhelido (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Diseño de Interfaz de Usuario para Programadores
Capítulo 4: Invitaciones y Metáforas

Por Joel Spolsky
18 de Abril de 2000
Traducido originalmente por: Angel García Cuartero
Editado por JM
Artículo original


Desarrollar una interfaz de usuario donde el modelo del programa coincida con el modelo de usuario no es fácil. A veces, puede que tus usuarios no tengan una expectativa concreta de cómo funciona el programa y qué se supone que debe hacer. En este caso, vas a tener que darle pistas de cómo funciona. Con las interfaces gráficas, una forma muy común de resolver el problema es mediante metáforas. Pero no todas las metáforas se crean de la misma manera y es importante comprender por qué las metáforas funcionan, de manera que sepas si has conseguido una buena.

La más famosa metáfora es la "metáfora de escritorio" usada en Windows y en Macintosh. Tienes estas pequeñas carpetas con ficheros en ellas, las cuales puedes arrastrar por ahí. Puedes arrastrar un fichero de una carpeta a otra para moverlo. La razón por la que esta metáfora funciona es porque las pequeñas imágenes de carpetas realmente recuerdan carpetas a la gente, lo que les hace darse cuenta de que pueden poner documentos en ellas.

Aquí hay una captura de pantalla de Kai's Photo Soap. ¿Sabes cómo ampliar la imagen?


Kai Is Cool.jpg


No es muy difícil. La lupa es una metáfora del mundo real. La gente sabe qué se supone que hace. Y no hay peligro de que esta operación de ampliación modifique la imagen, ya que no es lo que las lupas hacen.

Una metáfora, incluso una imperfecta, funciona mejor que si no tienes ninguna. ¿Adivinas cómo ampliar con Microsoft Word?


Legalese.gif


Word tiene dos pequeñas lupas en su interfaz, pero una de ellas está en el botón "Vista preliminar" (por alguna razón), y la otra está en el botón "Mapa del documento", sea lo que sea eso. La manera real de cambiar el nivel de zoom es con el campo desplegable en el que ahora pone "100%". Ni siquiera es un intento de metáfora, con lo que es incluso más difícil para los usuarios averiguar como hacer zoom. Esto no es necesariamente malo; hacer zoom probablemente no es lo suficientemente importante en un procesador de textos como para justificar tanto espacio de pantalla como hace Kai. Pero es una apuesta segura que serán capaces de usar el zoom más usuarios de Kai que de Word.


My Briefcase Es.gif Una metáfora mal elegida es peor que ninguna metáfora en absoluto. ¿Recordáis el maletín de Windows 95? Este iconito tan mono ocupó más o menos unos 3 centímetros cuadrados en el escritorio de todo el mundo durante unos cuantos años hasta que Microsoft se dio cuenta de que nadie lo quería. Y nadie lo quería porque era una metáfora rota. Se supone que era un "maletín", donde ponías tus ficheros para llevarte a casa. Pero cuando te ibas a llevar los ficheros a casa, resulta que todavía los tenías que poner en un disco. Así que, ¿los pongo en el maletín o en el disco? Ni idea. No entiendo el maletín. Nunca llegué a usarlo.


Invitaciones

Los objetos bien diseñados dejan claro cómo funcionan sólo con verlos. Algunas puertas tienen grandes placas de metal a la altura del brazo. Lo único que puedes a una placa de metal es empujarla. En palabras de Donald Norman, la placa te invita a empujar. Otras puertas tiene asas grandes y redondeadas que hacen que quieras tirar de ellas. Incluso sugieren cómo quieren que pongas la mano en el asa. El asa te invita a tirar. Hace que quieras tirar de ella. Otros objetos no están tan bien diseñados y no se puede averiguar qué hacen. La quintaesencia de esto que digo es la caja de CD, que requiere que pongas los pulgares de cierta manera y tires en cierta dirección. Nada en el diseño de la caja indica cómo se supone que tienes que abrirla. Si no conoces el truco, es muy frustrante, porque la caja no se abre.

La mejor manera de proponer una invitación es hacer eco de la mano humana en un "espacio negativo". Mira de cerca a la (excelente) cámara digital Kodak DC-290, mostrada aquí por delante y por detrás.


Kodak DC290 por delanteKodak DC290 por detrás


De frente, puedes ver una gran empuñadura de goma en la que parece que encajan tus dedos. Aún más inteligente, por detrás, en la esquina inferior izquierda, puedes ver una depresión que se parece familiarmente a la huella de un pulgar. Cuando pones tu pulgar izquierdo ahí, tu dedo índice izquierdo se enrosca de manera muy cómoda en la parte frontal de la cámara, entre las lentes y otro asidero de goma. Es como una sensación agradable que no habías sentido desde que te chupabas el dedo (y enroscabas tu índice alrededor de tu nariz). Los ingenieros de Kodak sólo intentan persuadirte de que cojas la cámara con ambas manos en una posición que asegure que la cámara sea más estable, e incluso apartar algún dedo descarriado de tapar el objetivo por error. Toda esta goma no es funcional, su único propósito es incitarte a que cojas la cámara correctamente.

Las buenas IU informáticas también proponen invitaciones. Hace unos diez años, la mayoría de los botones se hicieron "3D". Usando sombras de gris, parecía que se salían de la pantalla. Esto sólo no es para que parezcan chulos: es importante porque los botones 3D invitan a ser pulsados. Parece que sobresalen y que la manera de usarlos es pulsando en ellos. Desafortunadamente, estos días, muchos sitios web (desconocedores del valor de las invitaciones) tienen botones que parecen chulos, mas que botones que parecen pulsables; como resultado, a veces tienes a la caza del sitio donde pulsar. Mira este anuncio:

Barra de E*Trade

Los botones "Go" y "Login" sobresalen y parece que quieran que los pulses. Los botones "Site Map" y "Help" no parecen tan pulsables, de hecho, parecen exactamente lo mismo que la etiqueta QUOTES que no es pulsable.

Hace cerca de cuatro años, en muchas ventanas empezaron a brotar tres pequeñas muescas en la esquina inferior izquierda que parecen un asidero. Parece esa clase de cosas que alguien pone en un interruptor que desliza para aumentar la fricción. Invita a arrastrar. Está pidiendo a gritos que la arrastren para estirar la ventana.

Para redimensionar las ventanas

Finalmente, uno de los mejores ejemplos de invitación es es famoso "diálogo con pestañas". ¿Te acuerdas del viejo panel de control de los Mac?

Antiguo Panel de Control de Mac

La idea era que elegías uno de los iconos de la lista (deslizante) de la izquierda. Según pulsas el icono, la parte derecha de la pantalla cambia. Por alguna oscura razón, este tipo de indirección les resultaba increíblemente lógicas a los programadores que lo diseñaron, pero muchos usuarios no lo comprendían. Entre otras cosas, la gente raramente averiguaba cómo deslizar la lista para sacar más de los primeros 4 paneles. Pero más críticamente, la mayoría de la gente ni siquiera comprendía que hubiera una conexión entre los iconos y el cuadro de diálogo. Los iconos realmente parecían que eran una de las opciones.

Desde más o menos 1992, estas interfaces empezaron a desaparecer, para ser reemplazados con un invento llamado diálogo con pestañas:

Panel de Control de Mac

Los diálogos con pestañas son una gran invitación. Es realmente obvio en esta imagen que tienes seis pestañas; es realmente obvio en qué pestaña estás, y es realmente obvio cómo cambiar a otra pestaña. Cuando Microsoft hizo las primeras pruebas de usabilidad de la interfaz con diálogos de pestañas, la usabilidad subió de un 30% (la antigua manera de Mac) al 100%. Literalmente, cada uno de los usuarios de pruebas averiguaba cómo funcionaban los diálogos de pestañas. Dado el destacable éxito de esta metáfora, y el hecho de que el código para estos diálogos está incluido en Windows y está disponible prácticamente gratis, es una incógnita ver aplicaciones que todavía no saquen partido de ella. Estas aplicaciones sufren de hecho de problemas mensurables del mundo real porque rehusan a ponerlas en el programa.


<< Capítulo 3: Decisiones

>> Capítulo 5: Consistencia y otros duendes


The Joel on Software Translation Project - Español

Personal tools