Diseño de Interfaz de Usuario para Programadores ... - Willy .Net
Diseño de Interfaz de Usuario para Programadores ... - Willy .Net
Diseño de Interfaz de Usuario para Programadores ... - Willy .Net
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Diseño <strong>de</strong> <strong>Interfaz</strong> <strong>de</strong> <strong>Usuario</strong> <strong>para</strong> <strong>Programadores</strong><br />
Capítulo 5: Consistencia y Otros Duen<strong>de</strong>s<br />
Por Joel Spolsky<br />
Traducido por Angel García Cuartero<br />
22. 4. 2000<br />
Los principales programas en la suite Microsoft Office, Word y Excel, se<br />
<strong>de</strong>sarrollaron <strong>de</strong>s<strong>de</strong> cero en Microsoft, pero otros se compraron <strong>de</strong> compañías<br />
externas, <strong>de</strong>stacando FrontPage (comprada a Vermeer) y Visio, comprada a<br />
Visio. ¿Qué tienen en común estos programas? Originalmente fueron<br />
diseñados <strong>para</strong> tener el aspecto y comportamiento que tenían las aplicaciones<br />
<strong>de</strong> Microsoft Office.<br />
La <strong>de</strong>cisión <strong>de</strong> emular la IU <strong>de</strong> Office no fue meramente "copiar" a Microsoft ni<br />
disponer a las empresas en una posición favorable <strong>para</strong> su compra; en<br />
realidad, Charles Ferguson, que <strong>de</strong>sarrolló FrontPage, no dudó en admitir su<br />
antipatía por Microsoft; repetidamente suplicó al <strong>de</strong>partamento <strong>de</strong> Justicia que<br />
hiciera algo respecto a las Bestias <strong>de</strong> Redmond (hasta que les vendió su<br />
compañía, tras lo cual su posición se hico algo más complicada). De hecho,<br />
Vermeer y Visio parecían haber copiado la IU <strong>de</strong> Office principalmente porque<br />
era conveniente: era más fácil y rápido que reinventar la rueda.<br />
Cuando Mike Mathieu, un director <strong>de</strong> grupos <strong>de</strong> programas <strong>de</strong> Microsoft,<br />
<strong>de</strong>scargó FrontPage <strong>de</strong>l sitio web <strong>de</strong> Vermeer y lo probó, resulta que<br />
funcionaba casi todo como en Word. Dado que funcionaba <strong>de</strong> la manera que él<br />
esperaba que un programa fuera a funcionar, era más fácil <strong>de</strong> usar. Y esta<br />
facilidad <strong>de</strong> uso le dio una impresión favorable <strong>de</strong>l programa <strong>de</strong>s<strong>de</strong> la casilla <strong>de</strong><br />
salida.<br />
Bien, cuando Microsoft tiene una impresión favorable <strong>de</strong> un programa <strong>de</strong>s<strong>de</strong> la<br />
casilla <strong>de</strong> salida, resulta que ven<strong>de</strong>n unos 150 millones <strong>de</strong> dólares, más o<br />
menos. Tu objetivo es un poco más mo<strong>de</strong>sto; quieres que tus programas<br />
causen una impresión favorable y por ello ven<strong>de</strong>r tal vez 39 millones <strong>de</strong><br />
dólares. Pero es la misma i<strong>de</strong>a: la consistencia da lugar a facilidad <strong>de</strong> uso, que<br />
a su vez, da lugar a buenas sensaciones, que tienen como resultado más<br />
dinero <strong>para</strong> ti.<br />
Es difícil hacer una estimación <strong>de</strong> cuánta consistencia ayuda a la gente a<br />
apren<strong>de</strong>r y a usar una gran variedad <strong>de</strong> programas. Antes <strong>de</strong> las interfaces<br />
gráficas, cada programa reinventaba los fundamentos <strong>de</strong> interfaz <strong>de</strong> usuario.<br />
Incluso una simple operación como "salir" que todos los programas <strong>de</strong>bían<br />
tener, era completamente inconsistente. En aquellos días la gente memorizaba,<br />
al menos, el comando salir <strong>de</strong> los programas comunes, <strong>de</strong> manera que podían
usarlos y salir. Los fanáticos <strong>de</strong> Emacs memorizaban ":q!" (y nada más) en<br />
caso <strong>de</strong> que se encontraran atascados por error usando vi, mientras que los<br />
usuarios <strong>de</strong> vi memorizaban "C-x C-c" (Emacs incluso tiene su propia manera<br />
<strong>de</strong> representar los caracteres <strong>de</strong> control). En la tierra <strong>de</strong> DOS, ni siquiera<br />
podías usar Wordperfect a menos que tuvieras una <strong>de</strong> esas lamentables<br />
plantillas <strong>de</strong> plástico que te recordaban lo que hacía Alt+Ctrl+F3. Yo sólo<br />
memoricé F7, que te sacaba <strong>de</strong> todo aquello.<br />
No sólo eso, sino que pequeñas inconsistencias en cosas como el modo <strong>de</strong><br />
tecleado por <strong>de</strong>fecto (sobreescribir o insertar) pue<strong>de</strong> volverte loco. Me<br />
acostumbrado tanto a Ctrl+Z <strong>para</strong> "<strong>de</strong>shacer" en aplicaciones Windows que<br />
cuando uso Emacs constantemente me encuentro minimizando la ventana<br />
(Ctrl+Z) por error (Lo divertido es que la auténtica razón por la que Emacs<br />
interpreta Ctrl+Z como minimizar es por consistencia con esa terrible interfaz <strong>de</strong><br />
usuario, csh, la C shell <strong>de</strong> UNIX). Esta es una <strong>de</strong> esas frustraciones menores<br />
que se van sumando a ese sentimiento general <strong>de</strong> infelicidad.<br />
Para coger un ejemplo incluso más pequeño, Pico y Emacs usan ambos Ctrl+K<br />
<strong>para</strong> borrar líneas, pero con una ligera diferencia <strong>de</strong> comportamiento que<br />
habitualmente maltrata mis documentos cuando me encuentro trabajando en<br />
Pico. Estoy seguro <strong>de</strong> que tú mismo tienes una docena <strong>de</strong> ejemplos <strong>de</strong> tu<br />
propia cosecha.<br />
En los primeros días <strong>de</strong>l Macintosh, antes <strong>de</strong> Microsoft Windows, los<br />
evangelistas <strong>de</strong> Apple <strong>de</strong>cían a todo el mundo que el usuario medio <strong>de</strong> Mac<br />
usaba más variedad <strong>de</strong> programas <strong>para</strong> hacer su trabajo que el usuario medio<br />
<strong>de</strong> DOS. No recuerdo los números exactos, pero creo que era algo así como<br />
uno o dos programas <strong>para</strong> el usuario medio <strong>de</strong> DOS, contra doce programas<br />
<strong>para</strong> un usuario <strong>de</strong> Mac. El motivo por el que era tan fácil apren<strong>de</strong>r un nuevo<br />
programa <strong>de</strong> Mac era porque generalmente funcionaban <strong>de</strong> la misma manera.<br />
La consistencia es el principio fundamental <strong>de</strong> un buen diseño <strong>de</strong> IU, pero es<br />
tan sólo un corolario <strong>de</strong>l axioma "haz que el mo<strong>de</strong>lo <strong>de</strong> programa se ajuste al<br />
mo<strong>de</strong>lo <strong>de</strong> usuario", porque el mo<strong>de</strong>lo <strong>de</strong> usuario va a reflejar la manera en que<br />
los usuarios ven cómo se comportan otros programas. Si el usuario ha<br />
aprendido que hacer doble clic en un texto significa seleccionar palabra,<br />
pue<strong>de</strong>s enseñarle un programa que no hayan visto nunca antes y adivinarán<br />
que la manera <strong>de</strong> seleccionar una palabra es haciendo doble clic. Ahora bien,<br />
será mejor que se seleccione la palabra cuando se hace clic (en oposición,<br />
digamos, a buscar la palabra en el diccionario), o <strong>de</strong> lo contrario tienes un<br />
problema <strong>de</strong> usabilidad.<br />
Si la consistencia es tan obviamente beneficiosa, ¿por qué estoy<br />
<strong>de</strong>sperdiciando el tiempo evangelizando al personal? Desafortunadamente, hay<br />
una fuerza oscura ahí fuera luchando contra la consistencia, y es esa ten<strong>de</strong>ncia<br />
natural <strong>de</strong> los diseñadores y programadores a ser creativos.<br />
Mira, odio ser el que diga "no seas creativo", pero <strong>de</strong>safortunadamente, <strong>para</strong><br />
hacer una interfaz <strong>de</strong> usuario fácil <strong>de</strong> usar, tienes que canalizar tu creatividad<br />
en otra área. En la mayoría <strong>de</strong> las <strong>de</strong>cisiones <strong>de</strong> IU, antes <strong>de</strong> diseñar algo
<strong>de</strong>s<strong>de</strong> cero, tienes que mirar qué están haciendo otros programas conocidos y<br />
emularlos <strong>de</strong> una manera tan parecida como te sea posible. Si estas creando<br />
un editor <strong>de</strong> documentos <strong>de</strong>l tipo que sea, mejor que se parezca un montón a<br />
Microsoft Word, hasta los atajos <strong>de</strong> teclado <strong>de</strong> los menúes que tengas en<br />
común. Algunos <strong>de</strong> tus usuarios usarán Ctrl+G <strong>para</strong> guardar; algunos estarán<br />
habituados a Alt+F, G <strong>para</strong> guardar y otros todavía usarán Alt, F, S (Soltando la<br />
tecla Alt). Otro grupo buscará el icono <strong>de</strong>l disco en la parte superior y lo<br />
pulsarán. O funcionan los cuatro, o tus usuarios van a tener algo que no<br />
quieren.<br />
He visto empresas don<strong>de</strong> la dirección se enorgullece <strong>de</strong> hacer las cosas<br />
<strong>de</strong>liberadamente <strong>de</strong> manera distinta a Microsoft. "Sólo porque lo haga<br />
Microsoft, no significa que esté bien", proclaman, y entonces van y se crean<br />
gratuitamente una interfaz diferente <strong>de</strong> lo que la gente está acostostumbrada a<br />
usar. Antes <strong>de</strong> que empieces a repetir el mantra <strong>de</strong> "sólo porque lo haga<br />
Microsoft, no significa que esté bien", por favor, consi<strong>de</strong>ra estas dos cositas:<br />
1. Aún si no es correcto, si Microsoft lo hace en un programa conocido<br />
como Word, Excel, Windows o Internet Explorer, entonces hay millones<br />
<strong>de</strong> personas que van a pensar que está bien, o al menos, que conforma<br />
un cierto estándar, y van a asumir que tu programa funciona igual.<br />
Incluso si piensas (como los ingenieros <strong>de</strong> <strong>Net</strong>scape 6.0 claramente<br />
hicieron) que Alt+Izquierda no es un buen atajo <strong>de</strong> teclado <strong>para</strong> "Atrás",<br />
hay literalmente millones <strong>de</strong> personas que intentarán usar Alt+Izquierda<br />
<strong>para</strong> ir atrás, y si rehusas a hacerlo así basándote en alguna norma <strong>de</strong><br />
tipo religioso que diga que Bill Gates es el malvado enemigo <strong>de</strong> los<br />
pitufos Gargamel, entonces lo que estás haciendo es arruinar tu<br />
programa <strong>de</strong> manera que tú te sentirás satisfecho y tus usuarios no te lo<br />
van a agra<strong>de</strong>cer.<br />
2. No estés tan seguro <strong>de</strong> que no está bien. Microsoft se gasta muchísimo<br />
más dinero en usabilidad <strong>de</strong> lo que tú haces, mantienen estadísticas<br />
<strong>de</strong>talladas basadas en millones <strong>de</strong> llamadas <strong>de</strong> soporte técnico y vamos,<br />
tienen una buenísima oportunidad <strong>de</strong> que lo hayan hecho <strong>de</strong> esa<br />
manera porque hay mucha gente que se imagina que aquello funciona<br />
<strong>de</strong> esa manera.<br />
Para crear un buen programa con una interfaz <strong>de</strong> usuario <strong>de</strong>cente, te vas a<br />
tener que <strong>de</strong>jar tu religión en la puerta antes <strong>de</strong> empezar, gracias. Pue<strong>de</strong> que<br />
Microsoft no sea la única empresa a copiar: si vas a montar una tienda <strong>de</strong><br />
libros, <strong>de</strong>berías asegurarte <strong>de</strong> tu sitio web es, al menos semánticamente, igual<br />
a Amazon. Amazon mantiene tu carrito <strong>de</strong> la compra durante 90 días. Tal vez<br />
puedas pensar que eres super-listo y vacíes el carrito al pasar 24 horas. Si<br />
haces esto, habrá algún cliente <strong>de</strong> Amazon que haya puesto cosas en su<br />
carrito <strong>de</strong> la compra y vuelva dos semanas más tar<strong>de</strong> esperando encontrarlas<br />
allí. Cuando vea que no están, has perdido un cliente.<br />
Si estás pensando en hacer un editor <strong>de</strong> alta gama <strong>para</strong> gráficos profesionales,<br />
te aseguro <strong>de</strong> que el 90% <strong>de</strong> tus usuarios sabrán usar Adobe Photoshop, así<br />
que será mejor que tu programa se parezca un huevo a Photoshop en las<br />
áreas en las que coincidan. Si no lo hace, la gente dirá que tu programa es
difícil <strong>de</strong> usar, incluso si tú piensas que es más fácil <strong>de</strong> usar que Photoshop,<br />
porque no se comporta <strong>de</strong> la manera que ellos esperan que lo haga.<br />
Hay otra ten<strong>de</strong>ncia popular a reinventar los controles comunes que vienen con<br />
Windows. Ni siquiera voy a comentar lo <strong>de</strong> <strong>Net</strong>scape 6. Había un tiempo en el<br />
que podías <strong>de</strong>cir cuándo un programa estaba compilado con Borland C++<br />
porque tenían unos botones <strong>de</strong> "Aceptar" gran<strong>de</strong>s y anchos con una marca <strong>de</strong><br />
verificación gigante y ver<strong>de</strong>. Eso no era ni la mitad <strong>de</strong> malo que Kai's Photo<br />
Soap:<br />
Bueno, la verdad es que guapo, pero la O con una línea atravesada (que <strong>de</strong><br />
hecho significa "no") me recuerda al "OK", y el estándar en Windows es tener el<br />
OK en la izquierda, así que me encontraba pulsando el botón equivocado un<br />
montón <strong>de</strong> veces. El único beneficio que tenía el hecho <strong>de</strong> mostrar unos<br />
botones extraños, en lugar <strong>de</strong> "Aceptar" y "Cancelar" como todo el mundo, era<br />
vacilar <strong>de</strong> lo creativo que eras. Si la gente se equivoca <strong>de</strong>bido a la creatividad<br />
<strong>de</strong> Kai, bueno, es sólo el precio que hay que pagar por estar en presencia <strong>de</strong><br />
un artista. (Otro problema con este diálogo es que no tiene una barra <strong>de</strong> título<br />
estándar que se pueda usar <strong>para</strong> moverlo por la pantalla. Así que si el diálogo<br />
se interpone en medio <strong>de</strong> algo que quieras ver <strong>para</strong> respon<strong>de</strong>r a la pregunta<br />
que el propio diálogo te hace, lo llevas claro).<br />
Ahora bien, hay un montón que ganar si tienes una interfaz <strong>de</strong> usuario que<br />
mola y que está logrado. Un buen diseño gráfico como el <strong>de</strong> Kai es agradable y<br />
hará que tu programa atraiga a la gente. El truco es hacerlo sin romper las<br />
reglas. Pue<strong>de</strong>s cambiar el aspecto visual <strong>de</strong> los diálogos, un poquito, pero no la<br />
funcionalidad.<br />
Cuando se escribió la primera versión <strong>de</strong> Juno, tenía el diálogo inicial estándar<br />
<strong>de</strong> acceso que te pedía un usuario y una contraseña. Después <strong>de</strong> haber<br />
introducido el nombre, se supone que <strong>de</strong>bías pulsar TAB <strong>para</strong> ir al campo <strong>de</strong><br />
contraseña y teclearla.<br />
Bueno, pues esto distrajo a uno <strong>de</strong> los jefes <strong>de</strong> programación <strong>de</strong> Juno, que<br />
tenía muchísima más experiencia en UNIX que en Windows, así que él estaba<br />
acostumbrado a teclear el nombre, pulsar luego la tecla ENTER <strong>para</strong> saltar al<br />
campo <strong>de</strong> contraseña (en lugar <strong>de</strong> TAB). Vale, pues cuando estás escribiendo<br />
un programa orientado a usuarios no expertos <strong>de</strong> Windows, un programador <strong>de</strong><br />
UNIX no es probablemente el ejemplo i<strong>de</strong>al <strong>de</strong> un usuario típico, pero este jefe<br />
insistía mucho en que la tecla intro <strong>de</strong>bería mover el cursor al siguiente campo,<br />
en lugar <strong>de</strong> hacer lo habitual en Windows, "Aceptar". "Sólo porque Microsoft lo<br />
haga, no significa que esté bien", parloteaba.
Así que los programadores perdieron una consi<strong>de</strong>rable cantidad <strong>de</strong> tiempo<br />
escribiendo código asombrosamente complicado <strong>para</strong> que un diálogo no se<br />
comportara <strong>de</strong> la manera habitual en Windows. (Ser inconsistente es casi<br />
siempre más trabajo que simplemente comportarse <strong>de</strong> la manera que tu<br />
plataforma espera que lo hagas). Este código es una pesadilla <strong>de</strong><br />
mantenimiento enorme; no se tradujo muy bien cuando nos mudamos <strong>de</strong><br />
Windows 16 bits a 32 bits. No hacía lo que la gente esperaba. Y según se iban<br />
uniendo programadores nuevos al proyecto, no entendían por qué las cosas<br />
estaban hechas <strong>de</strong> una manera tan rara con este diálogo.<br />
Una gran cantidad <strong>de</strong> programadores han intentado reimplementar varios <strong>de</strong><br />
los controles comunes <strong>de</strong> Windows, <strong>de</strong>s<strong>de</strong> botones, barras <strong>de</strong> <strong>de</strong>splazamiento<br />
y barras <strong>de</strong> herramientas hasta barras <strong>de</strong> menú (la favorita <strong>para</strong> reimplementar<br />
<strong>de</strong>l equipo <strong>de</strong> Microsoft Office). <strong>Net</strong>scape 6.0 fue tan lejos como <strong>para</strong><br />
reimplementar todos y cada uno <strong>de</strong> los controles comunes <strong>de</strong> Windows. Esto<br />
usualmente tiene efectos imprevistos. El mejor ejemplo es el campo <strong>de</strong> edición.<br />
Si reimplementas el campo <strong>de</strong> edición, hay un montón <strong>de</strong> características <strong>de</strong> las<br />
que ni siquiera sabes nada (como los añadidos <strong>para</strong> el lenguaje chino y las<br />
versiones bidireccionales <strong>de</strong> Windows que soportan texto <strong>de</strong> <strong>de</strong>recha a<br />
izquierda) que van a <strong>de</strong>jar <strong>de</strong> funcionar porque no reconocen tu campo <strong>de</strong><br />
edición no estándar. Algunos <strong>de</strong> los críticos <strong>de</strong> la versión previa <strong>de</strong> <strong>Net</strong>scape<br />
6.0 se dieron cuenta <strong>de</strong> que la barra <strong>de</strong> direcciones, que usaba un control no<br />
estándar <strong>de</strong> edición, no soportaba características <strong>de</strong> edición comunes como<br />
hacer clic con el botón <strong>de</strong>recho <strong>para</strong> sacar el menú contextual.<br />
Cuando te encuentras discutiendo con un fundamentalista anti-Microsoft o con<br />
un diseñador gráfico creativo acerca <strong>de</strong> la consistencia, son propensos a citar a<br />
Emerson incorrectamente: "La consistencia es el duen<strong>de</strong> <strong>de</strong> las pequeñas<br />
mentes...". La cita real es "Una consistencia estúpida es el duen<strong>de</strong> <strong>de</strong> las<br />
pequeñas mentes". Los buenos diseñadores <strong>de</strong> IU utilizan la consistencia <strong>de</strong><br />
manera inteligente, y aunque con ello no puedan chulearse <strong>de</strong> su creatividad, a<br />
largo plazo hace que los usuarios sean más felices.<br />
Joel Spolsky es el fundador <strong>de</strong> Fog Creek Software, una pequeña empresa <strong>de</strong> software en<br />
Nueva York. Es titulado por la Universidad <strong>de</strong> Yale y ha trabajado como programador y gerente<br />
en Microsoft, Viacom, y Juno.<br />
Esté articulo apareció originalmente en Inglés con el nombre User Interface Design for<br />
Programmers Chapter 4: Affordances and Metaphors