Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

34
Joel on Software Diseño de interfaz de usuario para los programadores por Joel Spolsky Miércoles, 24 de octubre 2001 Capítulo 1: Cómo controlar el Medio Ambiente hace feliz La mayoría de los programadores de C ++ núcleo duro Conozco odio programación interfaz de usuario. Esto me sorprende, porque me parece la programación de interfaz de usuario que es la quintaesencia de fácil, sencillo y divertido. Es fácil porque por lo general no es necesario algoritmos más sofisticados que la forma de centrar un rectángulo en otro. Es sencillo , porque cuando se comete un error, inmediatamente ves y puedes corregirlo. Es divertido , porque los resultados de su trabajo son inmediatamente visibles. Te sientes como si estás esculpiendo directamente el programa. Creo que el miedo la mayoría de los programadores de la programación de la interfaz de usuario viene de su miedo de hacer la interfaz de usuario de diseño . Ellos piensan que el diseño de la interfaz de usuario es como el diseño gráfico: el misterioso proceso por el cual, latte-beber creativo, todo vestido en negro las personas con piercings interesantes producir fresco buscando cosas artística. Los programadores ven a sí mismos como pensadores lógicos analíticos: fuerte en el razonamiento, débil en el juicio artístico. Así que piensan que no pueden hacer el diseño de interfaz de usuario. Diseño de la interfaz de usuario En realidad, yo he encontrado para ser muy fácil y bastante racional. No es una cuestión misteriosa que requiere un grado de una escuela de arte y una afición por el pelo-neón púrpura. Hay una manera racional de pensar acerca de las interfaces de usuario con algunas reglas simples y lógicas que se pueden aplicar en cualquier parte para mejorar las interfaces de los programas con los que trabaja. No voy a darle "Zen y el arte de la interfaz de usuario de diseño". No es arte, no es el budismo, es sólo un conjunto de reglas. Una forma de pensar racional y metódica. Este libro está diseñado para los programadores. Supongo que usted no necesita instrucciones para Se busca: Software Engineer en Klarna (Estocolmo, Suecia). Vea esta y otras grandes ofertas de trabajo en la página de puestos de trabajo .

Transcript of Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Page 1: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Joel on Software

Diseño de interfaz de usuariopara los programadorespor Joel Spolsky

Miércoles, 24 de octubre 2001Capítulo 1: Cómo controlar el Medio Ambiente hacefeliz

La mayoría de los programadores de C ++ núcleo duro Conozco odioprogramación interfaz de usuario. Esto me sorprende, porque meparece la programación de interfaz de usuario que es la quintaesenciade fácil, sencillo y divertido.

Es fácil porque por lo general no es necesario algoritmos mássofisticados que la forma de centrar un rectángulo en otro. Es sencillo ,porque cuando se comete un error, inmediatamente ves y puedescorregirlo. Es divertido , porque los resultados de su trabajo soninmediatamente visibles. Te sientes como si estás esculpiendodirectamente el programa.

Creo que el miedo la mayoría de los programadores de laprogramación de la interfaz de usuario viene de su miedo de hacer lainterfaz de usuario de diseño . Ellos piensan que el diseño de lainterfaz de usuario es como el diseño gráfico: el misterioso proceso porel cual, latte-beber creativo, todo vestido en negro las personas conpiercings interesantes producir fresco buscando cosas artística. Losprogramadores ven a sí mismos como pensadores lógicos analíticos:fuerte en el razonamiento, débil en el juicio artístico. Así que piensanque no pueden hacer el diseño de interfaz de usuario.

Diseño de la interfaz de usuario En realidad, yo he encontrado para sermuy fácil y bastante racional. No es una cuestión misteriosa querequiere un grado de una escuela de arte y una afición por el pelo-neónpúrpura. Hay una manera racional de pensar acerca de las interfacesde usuario con algunas reglas simples y lógicas que se pueden aplicaren cualquier parte para mejorar las interfaces de los programas con losque trabaja.

No voy a darle "Zen y el arte de la interfaz de usuario de diseño". No esarte, no es el budismo, es sólo un conjunto de reglas. Una forma depensar racional y metódica. Este libro está diseñado para losprogramadores. Supongo que usted no necesita instrucciones para

Se busca: SoftwareEngineer en Klarna(Estocolmo, Suecia).

Vea esta y otras grandesofertas de trabajo en lapágina de puestos de trabajo.

Page 2: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

cómo hacer una barra de menú; más bien, es necesario pensar acercade qué poner en la barra de menú (o si se debe tener uno en todos).Hay un axioma primario Te voy a enseñar que guía todo buen diseñode interfaz de usuario, y no es difícil de entender en absoluto.

Mi primer trabajo fue en una gran, una panadería industrial. Lapanadería fue diseñado para tener seis líneas de producción de pan.Por cada dos líneas de producción, se produjo un mezclador de masa,que produjo 180 kg de masa de grumos que podrían desaguar hacia laizquierda o la derecha:

Bueno, este fue el diseño. En realidad, Mixer C no había sidoconstruido todavía, ni tenía las líneas 3 ó 5 Así que el arreglo era:

Alerta lectores se estarán preguntando, "¿cómo la masa de llegar deMixer B a la línea de producción de 6?" Bueno, ahí es donde Wee Joelentró. Mi trabajo, si usted puede creer esto, fue a pararse en laizquierda del Mezclador B, a continuación, coger los gigantes 180bultos kg de masa, ya que salieron volando de la mesa de mezclas enuna gran bañera con -Ruedas, a continuación, gire la bañera a la líneade producción 6, y, usando un dispositivo de malacate como, levantarla masa sobre la línea 6 que tenía que hacer esto una vez cada diezminutos, desde las 10 pm hasta las 4 PM.

Había otras complicaciones. Line 6 no podía manejar 180 kg de masade una sola vez, así que tuve que cortarlo con un cuchillo gigante encerca de 10 piezas. Ni siquiera quiero entrar en lo absurdamente difícilque era.

Los primeros días, por supuesto, que era terrible en este trabajo.Parecía casi imposible. Cada hueso de mi cuerpo me dolía. Mis teníanampollas ampollas. Tenía dolores en lugares donde yo no sabía quetenía lugares.

Al principio yo no podía mantener la línea 6 se suministra con la masa.Cada vez que tuvieron una interrupción en la masa, esto causó unagran brecha en la línea de montaje. Cuando la brecha enrollado en elhorno, el horno (gastar una cantidad constante de energía en unacantidad reducida de la masa) comenzó a calentarse más, que quemael pan. A veces, la línea 6 conseguiría engomado y detener laproducción, pero la mesa de mezclas se fue a la derecha en adelante laproducción de pasta para mí, y yo corría el riesgo de quedarse sinbañeras-con ruedas para almacenar la masa. Cuando esto sucedió, mede hecho, tuvimos que limpiar y aceitar la planta y volcar la masa en el

Page 3: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

suelo para ser raspada hasta más tarde. No es que esto iba a funcionarmuy bien, porque si la masa se hizo mayor de unos 30 minutos quesería fermentar y no hacer buen pan. Si esto sucediera, había quecortarla en pedazos 5 kg y poner una pieza en la mezcla para cada loteen el futuro.

Después de una semana o así, yo tengo bastante bueno en la rutina querealmente lo hubiera hecho, si no recuerdo mal, a 2 minutos gratis porcada ciclo de la masa 10 minutos para descansar. Me di cuenta de uncalendario preciso y aprendí cómo contar el mezclador para saltar unlote cuando la línea de producción se detuvo.

Y empecé a pensar por qué, ya que el anuncio de cerveza pide, algunosdías son mejores que otros .

Un día, pensando en este problema, me di cuenta de que una de lasruedas de bañeras-con-tenían ruedas bastante pésimo que no seconvertirían así. A veces, esta bañera no ir a donde lo empujé, ytropecé con cosas. Este fue un pequeño frustración. A veces, como yoestaba tirando la cadena para izar hasta la bañera, me rasqué mimismo - sólo un poco - en una astilla de metal en la cadena. Otrapequeña frustración. A veces, como me encontré con una bañera vacíapara coger una emisión de masa a punto de volar fuera de la mesa demezclas, me resbalé en un poco de aceite en el suelo. No lo suficientepara caer, eso sí, sólo una pequeña, pequeña frustración.

Otras veces, me tendrían pequeñas victorias. Aprendí en cuando laproducción de masa perfectamente para que la pasta fresca llegaríaapenas unos segundos antes de que el lote anterior se agotó. Estogarantiza que la masa más fresca e hizo el mejor pan. Algunas de lasvictorias fueron aún más pequeño: Me detectar una pequeña gota de lamasa que habían arrojado fuera de la mesa de mezclas y adherido a lapared, y me raspar con una espátula que llevaba en el bolsillo de atrásy tirarlo en la basura. SÍ! Durante el corte la masa en trozos, a vecessólo en rodajas muy bien y fácilmente . Diminuto momentos desatisfacción, cuando me las arreglé para controlar el mundo que merodea, incluso en la forma más pequeña.

Así que eso es lo que los días eran así. Un montón de pequeñasfrustraciones, y un montón de pequeños éxitos. Pero ellos suman .Incluso algo que parece un diminuto, frustración intrascendente afectasu estado de ánimo. Sus emociones no parecen preocuparse por lamagnitud del evento, sólo la calidad.

Y empecé a aprender que los días cuando yo era más feliz fueron losdías con un montón de pequeños éxitos y algunas frustracionespequeñas.

Años más tarde, cuando llegué a la universidad, me enteré de unateoría importante de la psicología llamada indefensión aprendida,desarrollada por el Dr. Martin EP Seligman. Esta teoría, respaldadapor años de investigación, es que una gran parte de la depresión surgede un sentimiento de impotencia : la sensación de que usted no puedecontrolar su entorno.

Cuanto más se siente que usted puede controlar su medio ambiente, yque las cosas que en realidad se está trabajando, más feliz eres.Cuando usted se encuentra frustrado, enojado y molesto,probablemente es debido a algo que sucedió que no se podía controlar:incluso algo pequeño. La barra espaciadora del teclado no estáfuncionando bien. Al escribir, algunas de las palabras pudieran estarpegadas. Esto es frustrante, porque está pulsando la barra de espacio yno pasa nada. La llave a su puerta principal no funciona muy bien.Cuando intenta convertirlo, se pega. Otra pequeña frustración. Estascosas se suman; estas son las cosas que nos hacen infelices sobre unabase del día a día. A pesar de que parecen ser demasiado pequeña parapensar en (quiero decir, hay personas que mueren de hambre en

Page 4: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

África, por amor de Dios, no puedo enojarme sobre barras de espacio), no obstante, que cambian nuestro estado de ánimo.

Hagamos una pausa por un minuto y volver a las computadoras.

Vamos a inventar un típico usuario avanzado de Windows llamadoPete. Cuando usted está pensando en las interfaces de usuario, ayuda amantener a los usuarios imaginarios en mente. El más realista que elusuario imaginario es, mejor se va a hacer pensar en la forma en queutilizan su producto. Pete es un contador para una editorial técnicaque ha utilizado Windows para seis años en la oficina y un poco encasa. Él es bastante competente y técnica. Se instala su propiosoftware; lee la revista PC Magazine, y que incluso ha programadoalgunas macros de Word simples para ayudar a las secretarias en suoficina envían facturas. Se está haciendo un módem de cable en casa.Pete nunca ha usado una computadora Macintosh. "Son demasiadocaro", te lo dirá. "Usted puede obtener una PC de 700 Mhz con 128Meg RAM por el precio de ..." OK, Pete. Lo conseguimos.

Un día, la amiga de Pete Gena le pide un poco de ayuda de lacomputadora. Ahora, Gena tiene un Macintosh iBook, porque leencanta las cajas translúcidas. Cuando Pete se sienta y trata de usar elMacintosh, rápidamente se frustra. "Odio estas cosas", dice. Es,finalmente, capaz de ayudar a Gena, pero está de mal humor e infeliz."El Macintosh cuenta con una interfaz de usuario como torpe."

Clunky? ¿De qué está hablando? Todo el mundo sabe que el Macintoshtiene una interfaz de usuario elegante, ¿no? El mismo paradigma de lafacilidad de uso?

Aquí está mi análisis de este misterio.

En Macintosh, cuando desee mover una ventana, puede tomarcualquiera de los bordes con el ratón y moverlo. En Windows, debeagarrar la barra de título. Si intenta agarrar un borde, se reformará laventana. Cuando Pete estaba ayudando a Gena, trató de ensanchar unaventana arrastrando el borde derecho. Frustrante, toda la ventana semovió, más que el cambio de tamaño como él esperaba.

En Windows, cuando un cuadro de mensaje aparece, puedes pulsaenter o la barra espaciadora para cerrar el cuadro de mensaje. En elMac, el espacio no funciona. Generalmente, usted debe hacer clic conel ratón. Cuando Pete consiguió alertas, trató de despedirlos con labarra espaciadora, como lo ha estado haciendo inconscientementedurante los últimos seis años. La primera vez, no pasó nada. Sin nisiquiera ser consciente de ello, Pete golpeó la barra espaciadora másdifícil, ya que pensaba que el problema debe ser que el Mac no seregistró su pulsando la barra de espacio. En realidad, sí - pero no leimportaba! Finalmente se utiliza el ratón. Otra pequeña frustración.

Pete también ha aprendido a usar Alt + F4 para cerrar las ventanas. Enel Mac, esto realmente cambia el volumen . En un momento, Petequería hacer clic en el icono de Internet Explorer en el escritorio, loque fue parcialmente cubierto por otra ventana. Así que él golpeó Alt +F4 para cerrar la ventana e inmediatamente se hace doble clic en elicono-habría sido. El Alt + F4 elevó el volumen en el ordenador y nocerró la ventana, por lo que su doble click en realidad golpeó el botónde ayuda en la barra de herramientas en la ventana que él queríacerrado de todos modos, que de inmediato comenzó a traer unaventana de ayuda, por lo que ahora , tiene dos ventanas abiertas que setiene que cerrar.

Otra pequeña frustración. Pero, muchacho, ¿se suman. Al final del día,Pete es malhumorado y enojado. Cuando se trata de controlar lascosas, ellos no responden. La barra espaciadora y la tecla Alt + F4 "nofuncionan" - para todos los efectos, es como si se rompieron esasllaves. La ventana le desobedece cuando trata de hacer que sea más

Page 5: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

amplia, jugando un poco de broma donde sólo se mueve en vez deensanchamiento. Inadecuado ventana. Incluso si todo el asunto essubconsciente, la sutil sensación de estar fuera de control se traduceen indefensión, lo que se traduce en infelicidad. "Me gusta mi equipo",dice Pete. "Lo tengo todo preparado para que funcione exactamente dela manera que me gusta. Pero estos Macs son torpe y difícil de usar. Esun ejercicio de frustración. Si Apple ha estado trabajando en MacOStodos estos años, en lugar de jugar un poco con Newtons , su sistemaoperativo no sería un desastre ".

Derecha, Pete. Sabemos mejor. Sus sentimientos vienen a pesar delhecho de que el Macintosh es realmente muy fácil de usar - parausuarios de Mac. Es totalmente arbitraria qué tecla se presiona paracerrar una ventana. Los programadores de Microsoft, que eran,presumiblemente, la copia de la interfaz de Mac, probablementepensaron que estaban añadiendo una nueva característica interesante,ya que permite cambiar el tamaño de las ventanas arrastrandocualquier borde. Los MacOS 8.0 programadores probablementepensaron que estaban añadiendo una nueva característica frescacuando le permiten mover las ventanas arrastrando cualquier borde.

La mayoría de las guerras de la llama usted lea acerca de losproblemas de interfaz de usuario se centran en el tema equivocado.Windows es mejor porque le da más maneras de cambiar el tamañode la ventana. Así que lo que? Eso no viene al caso. El punto es, lainterfaz de usuario no responde al usuario en la forma en que elusuario espera a responder? Si no fuera así, el usuario se va a sentirimpotentes y fuera de control, lo mismo que yo sentía cuando lasruedas de la bañera masa no se volvió a mí me empujaron y meencontré con una pared. Bonk.

IU es importante porque afecta a los sentimientos, las emociones y elestado de ánimo de sus usuarios. Si la interfaz de usuario está mal y elusuario se siente como que no pueden controlar su software, que ,literalmente, no serán felices y van a echarle la culpa a su software. Sila interfaz de usuario es inteligente y las cosas funcionan de la maneraque el usuario los espera para trabajar, van a ser alegre como se lasarreglan para lograr metas pequeñas. Hey! Arranqué un CD! Es sólofuncionó! Niza software! Wooooooooooo!

Para hacer feliz a la gente, hay que dejar que ellos sienten que tienen elcontrol de su entorno. Para ello, es necesario correctamenteinterpretar sus acciones. La interfaz tiene que comportarse de lamanera que esperan que se comporte.

Por lo tanto, el axioma cardinal de todo el diseño de interfaz deusuario:

Una interfaz de usuario está bien diseñado cuando elprograma se comporta exactamente como el usuario

pensaba que sería.

Como dijo Hillel, todo lo demás es comentario. Todas las demásnormas del buen diseño de interfaz de usuario son sólo corolarios.

Capítulo 2: Cómo averiguar lo que esperaban

Cuando un nuevo usuario se sienta a usar un programa, que no vienencon una pizarra totalmente limpia. Ellos tienen algunas expectativasde cómo creen que el programa va a funcionar. Si que han utilizado unsoftware similar antes, van a pensar que va a trabajar como el otrosoftware. Si que han utilizado cualquier software antes, van a pensarque el software se ajuste a ciertas convenciones comunes. Puedentener conjeturas inteligentes sobre cómo la interfaz de usuario se va atrabajar. Esto se conoce como el modelo de usuario : es lacomprensión mental de lo que el programa está haciendo por ellos.

Page 6: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

El programa también cuenta con un "modelo mental", sólo que ésta secodifica en los bits y se ejecutará fielmente por la CPU. Esto se llama elmodelo de programa , y es la ley . Como aprendimos en el capítulouno , si el modelo del programa se corresponde con el modelo deusuario, que tiene una interfaz de usuario con éxito.

Veamos un ejemplo. En Microsoft Word (y la mayoría de losprocesadores de texto), cuando se pone una imagen en el documento,la imagen es en realidad incrustada en el mismo archivo que eldocumento en sí. Puede crear la imagen, arrastre en el documento, acontinuación, elimine el archivo de imagen original , pero la imagentodavía permanecerá en el documento.

Ahora, HTML no le permite hacer esto. Documentos HTML debenalmacenar sus imágenes en un archivo separado. Si usted toma unusuario que se utiliza para los procesadores de texto, y no sabe nada deHTML, y sentarse abajo delante de un buen editor WYSIWYG HTMLcomo FrontPage, es casi seguro que pensar que la imagen va a seralmacenada en el archivo. Llame a este usuario modelo de la inercia ,si se quiere.

Así que tenemos un conflicto infeliz del modelo de usuario (la imagense inserta) versus modelo de programa (la imagen debe estar en unarchivo por separado), y la interfaz de usuario está obligado a causarproblemas.

Si usted está diseñando un programa como FrontPage, usted acaba deencontrar su primer problema de interfaz de usuario. Realmente no sepuede cambiar HTML. Algo tiene que dar para que el modelo deprograma de acuerdo con el modelo de usuario.

Tienes dos opciones. Usted puede tratar de cambiar el modelo deusuario. Esto resulta ser muy duro. Usted podría explicar las cosas enel manual, pero todo el mundo sabe que los usuarios no leer losmanuales, y que probablemente no deberían tener que. Puede queaparezca un cuadro de diálogo poco explicando que el archivo deimagen no se integrará, pero esto tiene dos problemas: es molesto paralos usuarios avanzados y los usuarios no leer los cuadros de diálogo, obien (vamos a tomar más de esto en Capítulo Seis).

Así que, si la montaña no va a Mahoma ... su mejor opción es casisiempre va a ser para cambiar el modelo de programa, no el modelo deusuario. Tal vez cuando se inserte la imagen, se puede hacer una copiade la imagen en un subdirectorio bajo el archivo de documento, por loque al menos puede hacer coincidir la idea de que el usuario que laimagen se copia (y el original se puede eliminar de forma segura).

¿Cómo puedo saber cuál es el modelo de usuarioes?Esto resulta ser relativamente fácil. Sólo tienes que preguntar! Escojacinco personas al azar en su oficina, o amigos, o familia, y decirles loque su programa lo hace en términos generales ("es un programa parahacer páginas web"). Luego de describir la situación: "Tienes unapágina web que usted está trabajando, y un archivo de imagen llamadoImagen.JPG Usted inserta la imagen en su página web.". Entoncesellos hacer algunas preguntas para tratar de adivinar su modelo deusuario. "¿Dónde está el cuadro? Si elimina Imagen.JPG, será lapágina web todavía será capaz de mostrar la imagen?"

Un amigo mío está trabajando en una aplicación de álbum de fotos.Después de insertar sus fotos, la aplicación muestra un montón deimágenes en miniatura: pequeñas copias de madrugada de cadaimagen. Ahora, la generación de estas miniaturas tarda mucho tiempo,especialmente si usted tiene una gran cantidad de imágenes, por loque quiere almacenar las imágenes en el disco duro en alguna partepara que sólo se tienen que generar una vez. Hay un montón demaneras que podía hacer esto. Todos podían ser almacenados en un

Page 7: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

archivo grande llamado Miniaturas . Todos podían ser almacenadosen archivos separados, en un subdirectorio llamado Miniaturas .Puede ser que sean marcados como archivos ocultos del sistemaoperativo para que los usuarios no saben acerca de ellos. Mi amigoeligió una forma de hacerlo es que creía que era la mejor solución decompromiso: se almacena la imagen en miniatura de cada imagenPicture.jpg en un nuevo archivo llamado picture_t.JPG en elmismo directorio. Si usted hizo un álbum con 30 fotos, cuandoterminamos, había 60 archivos en el directorio, incluyendo lasimágenes en miniatura.

Se podría argumentar durante semanas acerca de las ventajas ydesventajas de diferentes esquemas de almacenamiento de lasimágenes, pero como resulta que, no hay una manera más científicapara hacerlo. Pregúntale a un grupo de usuarios que piensan lasminiaturas van a almacenar. Por supuesto, muchos de ellos no saben ono quieren cuidar, o que no han pensado sobre esto, pero si lepreguntas a un montón de gente, usted comenzará a ver algún tipo deconsenso. La elección popular es el mejor modelo de usuario, y le tocaa usted para hacer el modelo del programa coincide con ella.

A continuación, usted tiene que probar sus teorías. Construir unmodelo o prototipo de su interfaz de usuario y dar algunas personastareas que cumplir. A medida que trabajan a través de las tareas,preguntarles qué creen que está pasando. Su objetivo es averiguar loque ellos esperan. Si la tarea es "insertar una imagen", y se ve que ellosestán tratando de arrastrar la imagen en el programa, se dará cuentade que es mejor que arrastrar y soltar el apoyo. Si van al menúInsertar, te darás cuenta de que es mejor tener una opción de imagenen el menú Insertar. Si van a la barra de herramientas de fuente ysustituir la palabra "Times New Roman" con las palabras "Insertarimagen", que ha encontrado una reliquia que no se ha introducidopara interfaces gráficas de usuario y todavía está a la espera de unainterfaz de línea de comandos.

¿Cuántos usuarios Qué se necesita para probar su interfaz en? Tuinstinto puede ser "cuanto más, mejor", lo que tiene sentido paraexperimentos científicos. Pero ese instinto es erróneo. Casi todo elmundo que hace las pruebas de usabilidad para ganarse la vida parecepensar que cinco o seis usuarios es suficiente. Después de eso, seempiezan a ver los mismos resultados una y otra vez, y los usuariosadicionales son sólo una pérdida de tiempo.

Usted no necesita un laboratorio de usabilidad formales, y que enrealidad no tiene que traer en los usuarios "de la calle" - se puedehacer "pruebas de usabilidad 50 cent" en la que simplemente agarrarla siguiente persona que ve y pide que intentar una prueba deusabilidad rápida. Asegúrese de no derramar los frijoles y les dicecómo hacer las cosas. Pídales que "pensar en voz alta" y entrevistarlosutilizando preguntas abiertas para tratar de descubrir su modelomental.

Si su modelo de programa es no trivial, queprobablemente no es el modelo de usuario.Cuando tenía 6 años y mi padre trajo a casa una de las primerascalculadoras de bolsillo del mundo, una HP-35, trató de convencermede que tenía una computadora en su interior. Pensé que eso era pocoprobable. Todos los ordenadores de Star Trek eran del tamaño de unahabitación y tenía grandes grabadores de cinta de carrete a carrete.Pensé que sólo había una correlación inteligente entre las teclas delteclado y los elementos individuales de la pantalla LED que le pasó aproducir resultados matemáticamente correctos. (Hey, yo tenía 6años).

Una regla general importante es que los modelos de los usuarios noson muy complejas. Cuando las personas tienen que adivinar cómo unprograma va a funcionar, tienden a adivinar las cosas simples, en lugar

Page 8: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

de las cosas complicadas.

Siéntese en una Macintosh. Abra dos archivos de hojas de cálculo deExcel y archivo de documento de Word. Casi cualquier usuario novatoadivinaría que las ventanas eran independientes. Ellos miranindependiente:

El modelo de usuario dice que al hacer clic en Hoja de cálculo 1 traeríaesa ventana al frente. Lo que realmente sucede es que Hoja de cálculo2 llega a la parte delantera, una sorpresa frustrante para casi todo elmundo:

Pues resulta que, modelo de programa de Microsoft Excel dice que"usted tiene estas hojas invisibles, uno para cada aplicación, y lasventanas se 'pegado' a esas hojas invisibles. Cuando usted trae Excel alprimer plano, todas las demás ventanas de Excel se moverán reenviar,también. "

Riiiight. Hojas invisibles. ¿Cuáles son las posibilidades de que elmodelo de usuario incluido el concepto de hojas invisibles?Probablemente alrededor de cero. Así que los nuevos usuarios sesorprenderán por este comportamiento.

Otro ejemplo del mundo de Microsoft Windows es la combinación deteclas Alt + Tab que cambia a la "próxima" ventana. La mayoría de losusuarios probablemente asumir que simplemente rota entre todas lasventanas disponibles. Si usted tiene ventana A, B, y C, con un activo,Alt + Tab debería llevarte a B. Alt + Tab de nuevo le llevará a C. Enrealidad, lo que pasa es que la segunda Alt + Tab te lleva de vuelta a A .La única manera de llegar a C es mantener pulsada la tecla Alt y pulsela tecla Tab dos veces . Es una buena manera de alternar entre dosaplicaciones, pero casi nadie se lo imagina, porque es un modelo unpoco más complicado que el modelo de rotación-entre-disponibles-windows.

Page 9: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Ya es bastante difícil para que el modelo de programa se ajusta almodelo de usuario cuando los modelos son simples. Cuando losmodelos se vuelven complejas, es aún más improbable. Así que elige elmodelo más simple posible.

Capítulo 3: Opciones

Cuando usted va a un restaurante y ves un cartel que dice "No seadmiten perros", se podría pensar que la muestra es puramenteprescriptivo: Mr. restaurante no le gustan los perros alrededor, así quecuando se construyó el restaurante le pones ese signo.

Si eso era todo lo que estaba pasando, habría también una señal de"No hay serpientes"; después de todo, a nadie le gusta las serpientes. Yuna señal de "No hay elefantes", porque rompen las sillas cuando sesientan.

La verdadera razón por la que es signo no es histórico: es un marcadorhistórico que indica que las personas utilizan para tratar de traer a susperros en el restaurante.

La mayoría de las señales de prohibición están ahí porque lospropietarios de un establecimiento estaban enfermos y cansados de lagente que hace X, por lo que hicieron un cartel pidiendo que por favorno . Si usted entra en uno de esos cincuenta años comensales ma-y-pa,al igual que el Doodle del yanqui en New Haven, las paredes estáncubiertas con carteles que decían cosas como "Por favor, no ponga sumochila sobre el mostrador," la evidencia más antropológica que laspersonas utilizan para poner sus mochilas en el mostrador mucho. Porla edad de la señal se puede averiguar cuando mochilas eran popularesentre los estudiantes locales.

A veces son más difíciles de averiguar. "Por favor no traiga botellas devidrio en el parque" debe significar que alguien cortó a sí mismos pisarvidrios rotos al caminar descalzo por el césped una vez, y es una buenaapuesta que demandaron a la ciudad.

El software tiene un registro arqueológico similares, también: se llamael cuadro de diálogo Opciones. Tire hacia arriba de la Herramientas |cuadro de diálogo Opciones y verá una historia de los argumentos deque los diseñadores de software tenían sobre el diseño del producto.¿Hay que abrir automáticamente el último archivo que el usuarioestaba trabajando? ¡Sí! ¡No! Hay un debate dos semanas nadie quiereherir los sentimientos de nadie, el programador pone en una #ifdef endefensa propia, mientras que los diseñadores se pelean. Finalmentesólo deciden hacer que sea una opción.

Ni siquiera tiene que ser un debate entre dos personas: puede ser undilema interno. Yo sólo no puedo decidir si debemos optimizar la basede datos de tamaño o velocidad. De cualquier manera, terminan concosas como lo que es inequívocamente el diálogo más idiota "asistente"en la historia del sistema operativo Windows. Este diálogo es tanestúpido que se merece algún tipo de premio. Un nuevo conjunto de lacategoría de premio. Es el cuadro de diálogo que aparece cuando seintenta encontrar algo en Ayuda:

Page 10: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

El primer problema con este diálogo es que es una distracción. Ustedestá tratando de encontrar ayuda en el archivo de ayuda. Usted no, enese momento, les importa un comino si la base de datos es pequeña,grande, personalizado, o cubiertas de chocolate. Mientras tanto, estecuadro de diálogo perverso, malvado le está dando conferencias pocopedantes que debe crear una lista (o base de datos). Hay cerca de trespárrafos allí, la mayoría de los cuales son completamente confuso. Ahíestá la frase dolorosamente incómodo "el archivo de ayuda (s)". Ustedve, usted puede tener uno o más archivos. Como si importara en estepunto que no puede haber más de uno. Como si se hizo la más mínimacantidad de diferencia. Pero el programador que trabajaba en esediálogo estaba obviamente angustiada de no creer en la posibilidad deque podría haber más de un archivo de ayuda (s) y sería incorrectodecir archivo de ayuda, ahora, ¿no?

Ni siquiera voy a comentar cómo la mayoría de la gente que quiereayuda no son el tipo de gente que entiende este tipo de arcana. O queincluso los usuarios avanzados, los programadores con doctorado enCiencias de la Computación que saben todo acerca de los índices detexto completo, no sería capaz de averiguar lo que realmente se estápidiendo a elegir.

Para colmo de males, esto no es ni siquiera un diálogo ... es unasistente (la segunda página de la que sólo dice algo así como "graciaspor la presentación de ti mismo a este desperdicio innecesario de sutiempo", para parafrasear). Y es bastante obvio que los diseñadorestenían alguna idea de cuál opción es la mejor; después de todo, elloshan tomado la molestia de recomendar una de las opciones.

Lo que nos lleva a nuestra segunda regla importante de diseño de lainterfaz de usuario:

Cada vez que usted proporciona una opción, te estáspreguntando al usuario para tomar una decisión.

Preguntar al usuario a tomar una decisión no es en sí mismo algomalo. La libertad de elección puede ser maravillosa. Las personasaman a pedir bebidas a base de espresso de Starbucks porqueconsiguen hacer tantas opciones . Grande-media-caf descremada-mocha-Valencia-con forma de látigo. Extra caliente!

El problema viene cuando se les pregunta a tomar una decisión que nose preocupan . En el caso de los archivos de ayuda, la gente estábuscando en el archivo de ayuda porque están teniendo problemaspara lograr algo que realmente quieren lograr , como hacer unainvitación de cumpleaños. Su tarea invitación de cumpleaños ha sidolamentablemente interrumpido porque no pueden averiguar cómoimprimir al revés globos, o lo que sea, por lo que están pasando en elfichero de ayuda. Ahora, un poco de ayuda-index-motor-programador

Page 11: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

molesto a Microsoft con una idea exagerada de su propia importanciapara todo el esquema de las cosas tiene la audacia , el descaro , parainterrumpir al usuario , una vez más y empezar a enseñar las cosas delos usuarios acerca de hacer listas ( o bases de datos). Este segundonivel de interrupción tiene relación alguna con las invitaciones decumpleaños, y es simplemente garantizado para dejar perplejo yfinalmente mear fuera el usuario.

Y cree que yo, los usuarios se preocupan por muchas menos cosas queusted podría pensar. Están utilizando su software para realizar unatarea. Ellos se preocupan por la tarea. Si se trata de un programa degráficos, es probable que quieran ser capaz de controlar cada pixelhasta el más mínimo nivel de detalle. Si se trata de una herramientapara construir un sitio web, usted puede apostar que son obsesivoacerca de cómo obtener el sitio web para ver exactamente de la maneraque ellos quieren que se vea.

Ellos no , sin embargo, les importa un ápice si propia barra deherramientas del programa se encuentra en la parte superior o la parteinferior de la ventana. No les importa cómo se indexa el archivo deayuda. Ellos no se preocupan por muchas cosas, y es responsabilidadde los diseñadores a tomar estas decisiones por ellos para que ellos notengan que hacerlo. Es el colmo de la arrogancia de un diseñador desoftware para infligir una elección de este tipo en el usuariosimplemente porque el diseñador no podía pensar lo suficiente paradecidir qué opción es realmente mejor. (Es aún peor cuando intentaencubrir el hecho de que usted está dando al usuario una eleccióndifícil mediante la conversión a un asistente, al igual que las personasWinHelp. Como si el usuario era un tarado que necesitaba tomar unpoco de dos pasos mini-curso en la elección que se les ofrece para quepuedan hacer una educada decisión.)

Se ha dicho que el diseño es el arte de tomar decisiones . Cuando sediseña un bote de basura de la esquina, lo que tienes que hacerelecciones entre exigencias contradictorias. Tiene que ser fuerte paraque no sople. Tiene que ser la luz por lo que el recolector de basurapuede volcar hacia fuera. Tiene que ser grande, por lo que puedecontener una gran cantidad de basura. Tiene que ser pequeño para queno moleste pueblos en la acera. Cuando usted está diseñando, y tratasde abdicar su responsabilidad al obligar al usuario a decidir algo, ustedestá probablemente no está haciendo su trabajo. Alguien más va ahacer un programa más fácil que realiza la misma tarea con menosintrusiones, y la mayoría de los usuarios les va a encantar.

Cuando Microsoft Excel 3.0 salió en 1990, fue la primera aplicación aldeporte una nueva característica llamada una barra de herramientas.Era una característica sensible, la gente le gustó, y todo el mundo locopió - hasta el punto de que es raro ver a una aplicación sin que nadiemás.

La barra de herramientas tuvo tanto éxito que el equipo de Excel hizoinvestigación de campo utilizando una versión especial de Excel que sedistribuyen a unas pocas personas; esta versión mantiene estadísticassobre cuáles eran los comandos más utilizados y les informó de nuevoa Microsoft. Para la próxima versión, añadieron otra fila de botones dela barra, esta vez contiene los comandos más utilizados. Gran.

El problema era, que nunca llegó a disolver el equipo de la barra deherramientas, que no parecía saber cuándo dejar suficientementebueno solo. Querían que seas capaz de personalizar la barra deherramientas. Querían que usted sea capaz de arrastrar la barra deherramientas en cualquier lugar de la pantalla. Entonces, empezaron apensar en cómo la barra de menú es realmente sólo una barra deherramientas glorificado con palabras en lugar de iconos, por lo quepermiten que arrastre el barra de menú en cualquier lugar que queríaen la pantalla, también. Personalización en los esteroides. Problema: anadie le importa! Nunca he conocido a nadie que quisiera que su barra

Page 12: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

de menú en cualquier lugar excepto en la parte superior de la ventana.Pero aquí está la (mala) broma: si intenta desplegar el menú Archivo yagarrar accidentalmente el menú del bar un poco demasiado a laizquierda, que da un tirón de toda la barra de menú, arrastrándolohasta el único lugar donde podía posiblemente no quiero que sea: elbloqueo del documento que está trabajando.

¿Cuántas veces has visto que ? Y una vez que hayas hecho esto, porerror, no está claro lo que hiciste o cómo solucionarlo. Así que aquítenemos una opción (que se mueve la barra de menú) que nadie quiere(ok, tal vez 0,1% de todos los humanos lo quiere), pero que seinterpone en el camino para que casi todo el mundo.

Un día un amigo me llamó. Ella estaba teniendo problemas paraenviar correo electrónico. La mitad de la pantalla era gris, dijo.

La mitad de la pantalla era de color gris?

Me tomó cinco minutos a fuego el teléfono para averiguar lo que habíasucedido. Ella había arrastrado accidentalmente la barra deherramientas de Windows para el lado derecho de la pantalla, luegoampliado accidentalmente:

Este es el tipo de cosa que nadie hace a propósito . Y hay una grancantidad de usuarios de computadoras por ahí que no puedenconseguir por sí mismos de este tipo de desastre; por definición,cuando accidentalmente cambias una de las opciones en el programa,usted no sabe cómo volver a reconfigurarlo. Es una especie de

Page 13: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

chocante cuántas personas desinstalar y volver a instalar su softwarecuando las cosas empiezan a comportarse mal, porque al menos sabencómo hacerlo. (Han aprendido a desinstalar en primer lugar, porquede lo contrario todas las personalizaciones rotos es probable que acabade regresar).

"¡Pero espera!" que usted dice. "Es importante contar con opcionespara avanzados los usuarios que deseen modificar su entorno! " Enrealidad, no es tan importante como usted piensa. Esto me recuerda acuando traté de cambiar a un teclado Dvorak. El problema era que yono uso una computadora. Yo uso todo tipo de ordenadores. Yo uso lascomputadoras de otras personas. Utilizo tres ordenadores conbastante regularidad en casa y tres en el trabajo. Yo uso lascomputadoras en el laboratorio de pruebas en el trabajo. El problemacon la personalización de su entorno es que simplemente no sepropague , por lo que es ni siquiera vale la pena.

La mayoría de los usuarios avanzados utilizan varios ordenadores conregularidad; actualizan su equipo cada dos años, se vuelva a instalar susistema operativo cada tres semanas. Es cierto que la primera vez quese dieron cuenta de que podría volver a asignar por completo elteclado en Word, que cambió todo a su alrededor sea más de suagrado, pero tan pronto como se actualizan a Windows 95 esos ajustesse perdió, y no eran los mismos en trabajan, y, finalmente, sólodejaron de reconfigurar las cosas. Le he pedido a muchos de misamigos "power user" acerca de esto; casi ninguno de ellos hacercualquier personalización que no sea el mínimo necesario para que susistema se comporten razonablemente.

Cada vez que usted proporciona una opción, te estáspreguntando al usuario para tomar una decisión. Eso significaque tendrán que pensar en algo y decidir al respecto. No esnecesariamente una mala cosa, pero, en general, siempre se debetratar de minimizar el número de decisiones que las personas tienenque hacer.

Esto no significa eliminar toda elección. Hay suficientes opciones quelos usuarios tendrán que hacer de todos modos: la manera en que sudocumento se verá, la manera en que su sitio web se comportará, ocualquier otra cosa que es parte integral de la labor que está haciendoel usuario. En estas áreas, se vuelven locos: es genial para dar opcionesa la gente: por supuesto, cuantos más mejor. Y hay otra categoría deelección que la gente le gusta: la capacidad de cambiar el aspectovisual de las cosas, sin cambiar realmente el comportamiento. Todo elmundo ama las pieles de Winamp; todo el mundo pone su fondo deescritorio a una imagen. Desde la elección afecta el aspecto visual sinafectar las funciones de cualquier cosa así, y ya que los usuarios estáncompletamente libres de ignorar la elección y hacer su trabajo de todosmodos, este es un buen uso de las opciones.

Capítulo 4: Affordances y metáforas

El desarrollo de una interfaz de usuario en el modelo del programacoincide con el modelo de usuario no es fácil. A veces, los usuarios nopueden tener una expectativa concreta de cómo funciona el programay lo que se supone que debe hacer. En estos casos, usted va a tener queencontrar maneras de dar las claves de los usuarios acerca de cómofunciona algo. Con las interfaces gráficas, una forma común pararesolver este problema es con metáforas . Pero no todas las metáforasson creados iguales, y es importante para entender por qué lasmetáforas funcionan por lo que saben que si tienes una buena.

La más famosa metáfora es la "metáfora de escritorio" que se utiliza enWindows y Macintosh. Usted tiene estas pequeñas carpetas conarchivos pequeños en ellos, que se pueden arrastrar alrededor. Puedearrastrar un archivo de una carpeta a otra para moverlo. En la medidaen que funciona esta metáfora, que es porque los pequeños cuadros de

Page 14: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

carpetas realmente recuerdan a la gente de las carpetas, lo que les hacedarse cuenta de que ellos pueden poner los documentos en ellos.

Aquí hay una captura de pantalla de fotos Jabón de Kai. ¿Puedesadivinar cómo hacer un zoom?

No es muy difícil. La lupa es una verdadera metáfora mundo. La gentesabe lo que se supone que deben hacer. Y no hay temor de que laoperación de zoom está realmente cambiando el tamaño de la imagensubyacente, ya que eso no es lo lupas hacen.

Una metáfora, aunque imperfecta, funciona mucho mejor que cuandousted no tiene uno en absoluto. ¿Puedes encontrar la manera de hacerun zoom con Microsoft Word?

Word tiene dos pequeñas lentes de aumento en su interfaz, pero unode ellos está en el botón "Vista preliminar" (por alguna razón), y elotro está en el botón "Mapa del documento", sea lo que sea. La formareal de cambiar el nivel de zoom aquí es con el menú desplegable quese muestra actualmente "100%". No hay ningún intento de unametáfora, por lo que es más difícil para los usuarios de adivinar cómozoom. Esto no es necesariamente algo malo; zoom probablemente noes lo suficientemente importante en una aplicación de procesamientode textos para justificar el mayor espacio de pantalla como Kai le da.Pero es una apuesta segura que más usuarios Kai será capaz de acercara los usuarios de Word.

Una metáfora, mal elegido, es peor que ninguna metáfora enabsoluto. Recuerde el maletín de Windows 95? Este pequeñoicono lindo ocupaba un centímetro cuadrado más o menos

en el escritorio de todo el mundo por algunos años hasta que Microsoftse dio cuenta de que nadie lo quería. Y nadie lo quería, porque era unametáfora roto. Se suponía que iba a ser un "maletín", donde puso losficheros para llevar a casa. Pero al tomar la casa archivos, que todavíatenía que ponerlos en un disquete. Así que, ¿te los pones en el maletíno en un disquete? No estoy seguro. No entiendo el maletín. Nuncapude conseguir que funcione.

Affordances

Page 15: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Objetos bien diseñados dejan claro cómo funcionan sólo con mirarlos.Algunas puertas tienen grandes placas de metal a nivel del brazo. Laúnica cosa que usted puede hacer para una placa de metal esempujarlo. En palabras de Donald Norman, la placa permite empujar.Otras puertas tienen grandes, manijas redondeadas que sólo danganas de tirar de ellos. Incluso implican cómo quieren que ustedcoloque su mano en la manija. El mango proporciona tracción. Haceque te quieres tirar de ella.

Otros objetos no están diseñados tan bien y no se puede decir lo que sesupone que debes hacer. El ejemplo por excelencia es la caja de CD, loque requiere que usted coloque sus pulgares tan y tirar en unadirección determinada. Nada sobre el diseño de la caja indicaría cómose supone para abrirlo. Si usted no sabe el truco, es muy frustrante,porque la caja no se abrirá.

La mejor manera de crear un affordance es hacerse eco de la forma dela mano humana en el "espacio negativo". Fíjate bien en el (excelente)cámara digital Kodak DC-290, que se muestra aquí delante y detrás:

En el frente, se puede ver un agarre de goma grande que sólo se parecea sus dedos derechos encajan ahí. Incluso más inteligente, en la parteposterior, en la esquina inferior izquierda, se puede ver una sangríaque se asemeja misteriosamente a una huella digital. Cuando ustedpone su pulgar izquierdo allí, sus rizos dedo índice izquierdocómodamente en la parte frontal de la cámara, entre la lente y otranubbin goma. Proporciona una especie de sensación reconfortanteusted no ha sentido desde que chupó el pulgar (y se acurrucó su dedoíndice alrededor de su nariz).

Los ingenieros de Kodak están tratando de persuadirlo para que sujetela cámara con ambas manos, en una posición que se asegura de que lacámara será más estable e incluso mantiene los dedos perdidos desdeel bloqueo de la lente por error. Todo este caucho no es funcional, suúnico propósito es animar a sostener la cámara correctamente.

Bueno UI equipo utiliza affordances, también. Hace unos diez años, lamayoría de los botones se fueron "3D". El uso de tonos de gris, queparecen salirse de la pantalla. Esto no es sólo ir a la moda: esimportante ya que los botones 3D permitirse empujar. Parecen quesobresalen y se ven como la manera de manejarlos es haciendo clicsobre ellos. Desafortunadamente, muchos sitios web en estos días (quedesconocen el valor de affordances) preferirían tener botones queparecen frescos en lugar de botones que parecen ser empujado ; comoresultado, a veces tienes que buscar alrededor para averiguar dóndehacer clic. Mira esta web banner:

El "Go" y los botones "Iniciar sesión" estallar hacia fuera y mirancomo puede hacer clic en ellos. El mapa del sitio y los botones deAyuda no se ven tan puede hacer clic, de hecho, se ven exactamentecomo la etiqueta COTIZACIONES que no es seleccionable.

Page 16: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Hace unos cuatro años, muchas ventanas comenzaron abrotar tres pequeñas crestas en la esquina inferiorderecha que se parece a un agarre. Parece que el tipo decosa que alguien pondría en un interruptor deslizantepara aumentar la fricción. Se ofrece arrastrando.Simplemente pide que ser arrastrado a estirar la ventana.

Por último, uno de los mejores ejemplos de affordances es el famoso"diálogo con fichas". Recuerde el viejo panel de control de Mac?

La idea era que elija uno de los iconos de la (desplazamiento) lista dela izquierda. Al hacer clic en el icono, el lado derecho de la pantallacambia. Por alguna razón, este tipo de direccionamiento indirecto eraincreíblemente lógica a los programadores que lo diseñaron, peromuchos usuarios no lo entendía. Entre otras cosas, la gente rara vezencontraron la manera de desplazarse por la lista para obtener más delos primeros paneles de control 4. Pero de manera más crítica, lamayoría de la gente simplemente no entendían que había unaconexión entre los iconos y el diálogo. Los iconos en realidad pareceque son una de las opciones.

A partir de 1992 aproximadamente, estas interfaces empezaron adesaparecer, para ser reemplazado por un nuevo invento llamadodiálogos con pestañas:

Los diálogos con pestañas son una gran potencialidad. Es muyevidente en esta imagen que usted tiene seis fichas; es muy obvio quela ficha que te encuentres, y es muy obvio cómo cambiar a una fichadiferente. Cuando Microsoft usabilidad primera prueba de la interfazde diálogo con pestañas, usabilidad subió de alrededor del 30% (elantiguo camino Mac) y el 100%. Literalmente cada testee era capaz deaveriguar los diálogos con pestañas. Dado el notable éxito de estametáfora, y el hecho de que el código de diálogos con pestañas estáintegrado en Windows y disponible prácticamente gratis, es unmilagro que todavía ve las aplicaciones que no se aprovechan de ellos.Estas aplicaciones sufren,, problemas de usabilidad en el mundo realmedibles reales porque se niegan a conseguir con el programa.

Page 17: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Capítulo 5: Coherencia y Otros Hobgoblins

Los principales programas de la suite Microsoft Office, Word y Excel,se desarrollaron a partir de cero en Microsoft, pero otros fueroncomprados a empresas externas, en particular FrontPage (comprado aVermeer) y Visio, comprados de Visio. La cosa estos dos programastienen en común? Ellos fueron originalmente diseñados para verse ysentirse como aplicaciones de Microsoft Office.

La decisión de emular la interfaz de usuario de Office no erasimplemente para "aspirar" a Microsoft o para posicionar a lasempresas para la adquisición; de hecho, Charles Ferguson, quedesarrolló FrontPage, no vacila en admitir su antipatía por Microsoft;él repetidamente suplicó el Departamento de Justicia para hacer algoacerca de los Beasties Redmond (hasta que vendió su compañía a ellos,después de lo cual su posición se volvió mucho más complicado). Dehecho Vermeer y Visio parecen haber copiado la interfaz de usuario deOffice principalmente porque era conveniente: era más fácil y másrápido que reinventar la rueda.

Cuando Mike Mathieu, gerente de programa de grupo en Microsoft,descargó FrontPage desde el sitio web de Vermeer y lo probó, funcionómucho como Word. Desde que trabajó tanto como él espera unprograma para trabajar, era más fácil de usar. Y esta facilidad de uso ledio una impresión favorable del programa de la derecha del palo.

Ahora, cuando Microsoft obtiene una impresión favorable de unprograma de buenas a primeras, que desembolsar $ 150 millonesaproximadamente. Su objetivo es, probablemente, más modesto; ustedquiere que sus clientes obtengan una impresión favorable ydesembolsar tal vez de $ 39. Pero es la misma idea: la consistenciahace que la facilidad de uso que a su vez hace que los buenossentimientos que resultan en más dinero para usted.

Es difícil sobreestimar cuánto consistencia ayuda a las personas aaprender y utilizar una amplia variedad de programas. Antes deinterfaces gráficas de usuario, cada programa se reinventó losfundamentos mismos de la interfaz de usuario. Incluso una operacióntan simple como "salida" que cada programa tenía que tener eracompletamente inconsistente. En aquellos días, la gente hizo un puntode memorización, por lo menos, el comando exit de programascomunes para que pudieran salir y ejecutar un programa queentendían. Fanáticos de Emacs memorizan ": q!" (Y nada más) en casode que alguna vez se vieron atrapados en vi por error, mientras que via los usuarios memorizados "Cx Cc" (Emacs, incluso tiene su propiamanera de representar los caracteres de control). Allá en la tierra DOS,ni siquiera se podía utilizar WordPerfect a menos que tuvieras una deesas dorky modelos de teclado de plástico que recordaban lo que Alt +Ctrl + F3 hizo. Yo sólo memoricé F7 que tienes demonios salir de allí.

No sólo eso, sino que las pequeñas inconsistencias en cosas como elcomportamiento escritura predeterminado (sobrescribir o insertar)puede volverte loco . He acostumbrado tanto a Ctrl + Z que significa"deshacer" en las aplicaciones de Windows que cuando uso Emacsconstantemente estoy minimizando la ventana (Ctrl + Z) por error. (Locurioso es que la misma razón Emacs interpreta Ctrl + Z comominimizar es por "coherencia" con la interfaz de usuario excelente,csh , el shell C de UNIX.) Esta es una de esas pequeñas frustracionesque se suma a una sensación general de infelicidad.

Para tomar un ejemplo aún más pequeño, Pico y Emacs tanto usar Ctrl+ K para borrar líneas, pero con un poco diferente comportamientoque habitualmente maltrata mi documento cada vez que me encuentroen Pico. Estoy seguro de que tiene una docena de ejemplos de supropia.

En los primeros días de Macintosh, antes de Microsoft Windows, los

Page 18: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

evangelistas de Apple dijo a todos que el usuario medio de Mac utilizamás diferentes programas para hacer su trabajo que el usuario mediode DOS. No recuerdo el número exacto, pero creo que fue algo asícomo 1 o 2 programas para el usuario medio de DOS contra doceprogramas para un usuario de Mac. La razón fue que era tan fácil deaprender un nuevo programa en el Mac, ya que generalmentetrabajaban de la misma manera.

La consistencia es un principio fundamental de un buen diseño deinterfaz de usuario, pero no deja de ser un corolario del axioma de"hacer que el modelo de programa que coincida con el modelo deusuario", ya que el modelo de usuario es probable que refleje la formaen que los usuarios ven otros programas de comportarse. Si el usuarioha aprendido que el texto haciendo doble clic significa selecto palabra, se les puede mostrar un programa que nunca han visto antes y que vaa suponer que la forma de seleccionar una palabra es hacer doble clicen él. Y ahora, ese programa mejor selectas palabras cuando hagadoble clic en (a diferencia de, por ejemplo, buscar la palabra en eldiccionario), o bien usted tiene un problema de usabilidad.

Si la consistencia es tan obviamente beneficioso, ¿por qué estoyperdiendo tu tiempo y el mío es evangelizar? Por desgracia, hay unafuerza oscura ahí fuera que lucha contra la consistencia, y que es latendencia natural de los diseñadores y programadores para sercreativo.

Ahora, me gusta ser el que le diga que "no ser creativo", pero, pordesgracia, para hacer una interfaz de usuario fácil de usar, usted va atener que canalizar su creatividad en alguna otra área. En la mayoríade las decisiones de la interfaz de usuario, antes de diseñar algo desdecero, a pesar de todo tiene que ver lo que otros programas popularesestán haciendo y que emular lo más fielmente posible. Si va a crear unprograma de edición de documentos de algún tipo, es mejor quebusque un montón, como Microsoft Word, a los aceleradores en loselementos de menú que tienen en común. Algunos de los usuarios seutilizarán para Ctrl + S para guardar; algunos de ellos se utilizará paraAlt + F, S para guardar, y aún otros se utilizarán para Alt, F, S (soltar latecla Alt). Otro grupo buscará el disquete en la zona superior izquierdadel programa y haga clic en él. Los cuatro mejores trabajos, o sususuarios van a conseguir algo que no querían.

He visto empresas donde la gestión se enorgullece de hacer las cosasdeliberadamente diferente de Microsoft. "El hecho de que Microsoft lohace, no significa que sea correcto", se jactan, y luego proceder a crearuna interfaz de usuario gratuitamente distinta a la que la gente estáacostumbrada. Antes de empezar a cantar el mantra de que "sóloporque Microsoft lo hace, no significa que sea correcto", por favor,considere dos cosas:

1. Incluso si no está bien, si Microsoft lo está haciendo en unpopular programa como Word, Excel, Windows o InternetExplorer, entonces, millones de personas van a pensar que es locorrecto, o al menos, bastante estándar, y que van a suponga quesu programa funciona de la misma manera. Incluso si ustedpiensa (como los ingenieros de Netscape 6.0 claramente lohacen) que Alt + Izquierda no es un buen atajo para "Volver",hay literalmente millones de personas ahí fuera que intentaránusar Alt + Izquierda para volver, y si usted se niega a hacerlo enalgún principio religioso general de que Bill Gates es el pitufomalvado archienemigo Gargamel, entonces usted está reciéngratuitamente arruinando su programa de modo que ustedpuede sentirse engreído y satisfecho de sí mismo, y tus usuariosno se le agradecerá por él .

2. Y no seas tan seguro de que no está bien. Microsoft gasta másdinero en pruebas de usabilidad que tú, mantienen estadísticasdetalladas en base a millones de asistencia técnica de llamadastelefónicas, y hay una buena probabilidad de maldito que lo

Page 19: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

hicieron de esa manera debido a que más personas puedanencontrar la manera de usarlo de esa manera.

Para crear un buen programa con una interfaz de usuario usable, vas atener que dejar su religión en la puerta, gracias. Microsoft no puedeser la única empresa a copiar: si estás haciendo una librería en línea,usted probablemente debe asegurarse de que su sitio web es de almenos semánticamente lo mismo que Amazon. Amazon mantiene sucarrito de compras alrededor de 90 días. Se podría pensar que sonextra-inteligente y vaciar la cesta después de 24 horas. Si usted haceesto, habrá clientes de Amazon que ponen cosas en su carrito decompras y volver dos semanas más tarde esperando que todavía estéallí. Cuando se ha ido, que ha perdido un cliente.

Si estás haciendo un editor de fotos de gama alta para los profesionalesgráficos, le aseguro que el 90% de sus usuarios se va a saber AdobePhotoshop, así que mejor se comporta una diablos de un lote comoPhotoshop en las áreas donde su programa se superpone. Si no lohace, la gente va a decir que su programa es difícil de usar, incluso siusted piensa que es más fácil de usar que Photoshop, ya que no secomporta de la manera que esperamos.

Hay otra tendencia popular a reinventar los controles comunes quevienen con Windows. Ni siquiera me empezó a Netscape 6 Hubo untiempo en que usted podría decir a los programas que se compilan conel compilador C de Borland ++ porque usaron grasa grandes botonesOK con casillas verdes gigantes. Esto no fue tan malo como Foto Jabónde Kai:

Bien, entonces, es increíblemente hermosa, pero la O con una línea através de él (que en realidad significa "no") me recuerda a "OK", y elestándar en Windows es tener bien a la izquierda, así que terminangolpeando la botón equivocado mucho. El único beneficio de tenersímbolos divertidos en vez de "Aceptar" y "Cancelar" como todo elmundo es que se llega a demostrar lo creativo que eres. Si la gentecomete errores debido a la creatividad de Kai, bueno, eso es sólo elprecio que tienen que pagar por estar en presencia de un artista .(Otro problema de este "diálogo" es que no tiene una barra de títuloestándar que se puede utilizar para mover el diálogo alrededor de lapantalla. Así que si el diálogo se interpone en el camino de algo quedesea ver el fin de responder la pregunta en el cuadro de diálogo, ustedestá fuera de suerte.)

Ahora, hay mucho que ganar con una elegante interfaz de usuario, deapariencia fresca. Un buen diseño gráfico como Kai es agradable yatraerá a la gente a su programa. El truco está en hacerlo sin romperlas reglas. Puede cambiar el aspecto visual de los cuadros de diálogo,un poco, pero no romper la funcionalidad.

Cuando se escribió la primera versión de Juno, tenía el registro deserie en diálogo que le solicita un nombre de usuario y una contraseña.Después de haber introducido el nombre de usuario, que se suponíaque presione TAB para ir al campo de contraseña y escriba unacontraseña.

Ahora, esto distrajo a uno de los gerentes de programación de Juno,que tenía mucha más experiencia con UNIX que con Windows, por loque él estaba acostumbrado a escribir el nombre de usuario, acontinuación, pulsar ENTER para saltar al campo de contraseña (en

Page 20: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

lugar de TAB). Ahora, cuando estás escribiendo un programa dirigidoa los usuarios de Windows no expertos, un programador de UNIX esprobablemente no el ejemplo ideal de un usuario típico, pero estedirector fue muy insistente en que la tecla enter debe moverse alsiguiente campo en lugar de hacer la cosa estándar de Windows "OK"."El hecho de que Microsoft lo hace, no significa que sea correcto",trinó.

Así que los programadores gastan una cantidad muy notable detiempo a escribir algo de código manejo cuadro de diálogoincreíblemente complicado para evitar el comportamientopredeterminado de Windows. (Ser inconsistente es casi siempre mástrabajo de lo que acaba de actuar como su plataforma espera queactúes). Este código fue una gran pesadilla para el mantenimiento; nolo hizo puerto tan bien cuando nos mudamos de 16 bits a 32 bits deWindows. No hizo lo que la gente espera. Y a medida que los nuevosprogramadores se unieron al equipo, que no entendían por qué habíaesta extraña subclase para los diálogos.

Una gran cantidad de programadores han intentado reimplementarvarios controles comunes de Windows, desde los botones a las barrasde desplazamiento de las barras de herramientas y barras de menús(cosa favorita del equipo de Microsoft Office para reimplementar).Netscape 6.0 va tan lejos como para reimplementar cada control deWindows común. Esto por lo general tiene algunos efectos negativosimprevistos. El mejor ejemplo es con la caja de edición. Sireimplementar el cuadro de edición, hay una gran cantidad deutilidades que usted ni siquiera sabía sobre (como la edición en chinode complementos y versiones bidireccionales de Windows queadmitan de derecha a izquierda de texto) que se va a detener trabajarporque no reconocen su cuadro de edición no estándar. Algunos de loscríticos de la versión preliminar de Netscape 6.0 se dio cuenta de quela casilla URL, utilizando un control de edición no estándar Netscape,no es compatible con las características comunes de control de edicióncomo botón derecho del ratón para obtener un menú contextual.

Cuando usted se encuentra discutiendo con un fundamentalista anti-Microsoft o un diseñador gráfico creativo acerca de la consistencia,que son propensos a citar a Emerson incorrectamente: "Laconsistencia es el duende de las mentes pequeñas ..." La cita real es"Un tonto consistencia es la duende de las mentes pequeñas ". Losbuenos diseñadores de interfaz de usuario utilizan coherencia coninteligencia, y, aunque no puede mostrar su creatividad, así, a la largahace que los usuarios más felices.

Capítulo 6: Diseño para las personas que tienenmejores cosas que hacer con sus vidas

Al diseñar interfaces de usuario, que es una buena idea para mantenerdos principios en mente:

1. Los usuarios no tienen el manual, y si lo hicieran, no podríanleerlo.

2. De hecho, los usuarios no pueden leer cualquier cosa, y sipudieran, no querrían.

Estos no son, estrictamente hablando, hechos , sino que debe actuarcomo si fueran hechos, porque hará que su programa sea más fácil ymás amable. Diseñar con estas ideas en mente se llama respeto alusuario , lo que significa, no tener mucho respeto por el usuario.¿Confundido? Me explico.

¿Qué significa hacer algo fácil de usar ? Una forma de medir esto esver qué porcentaje de usuarios en el mundo real son capaces decompletar tareas en una determinada cantidad de tiempo. Porejemplo, supongamos que el objetivo de su programa es permitir a lagente a convertir fotos de cámaras digitales en un álbum de fotos web.

Page 21: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Si usted se sienta un grupo de usuarios medios con su programa y pidea todos para completar esta tarea, entonces el más usable su programaes, mayor es el porcentaje de usuarios que serán capaces de crear conéxito un álbum de fotos web. Para ser científica al respecto, imagina100 usuarios del mundo real. No son necesariamente familiarizadoscon los ordenadores. Ellos tienen diferentes experiencias ycapacidades, pero algunos de ellos no claramente no tienen talentos enel área de computación. Algunos de ellos están siendo distraídosmientras tratan de utilizar su programa. El teléfono está sonando.¿Qué? El bebé está llorando. ¿Qué? Y el gato sigue saltando sobre lamesa y bateo alrededor del ratón. I No te oigo!

Ahora, incluso sin ir a través de este experimento, puedo afirmar concierta seguridad que algunos de los usuarios simplemente no puedeterminar la tarea, o van a tener una extraordinaria cantidad de tiempoen hacerlo. Yo no quiero decir que estos usuarios son estúpidos . Muypor el contrario, son probablemente muy inteligente, o tal vez songrandes atletas, pero vis-à-vis su programa , no son más que noaplican la totalidad de sus habilidades motoras y las células cerebralespara el uso de su programa. Usted está consiguiendo solamente el 30%de su atención, por lo que tiene que conformarse con un usuario que,desde el interior del equipo, no parece estar jugando con una cubiertallena.

Los usuarios no leen el manual.

En primer lugar, que en realidad no tienen el manual. Puede que nosea un manual. Si hay uno, el usuario no puede tenerlo, para todo tipode razones lógicas: son en el avión; que están utilizando una versión dedemostración descargado de su sitio web; están en casa y el manual esen el trabajo; su departamento de SI nunca dio ellos el manual. Inclusosi tienen el manual, francamente, que simplemente no van a leerlo amenos que absolutamente no tienen otra opción. Con muy pocasexcepciones, los usuarios no acurrucarse con su manual y leerlo através antes de comenzar a utilizar el software. En general, losusuarios están tratando de conseguir algo hecho , y que ven la lecturadel manual como una pérdida de tiempo, o por lo menos, como unadistracción que les impide conseguir su tarea hecha.

El mismo hecho de que usted está leyendo este libro te pone en unselecto grupo de personas altamente alfabetizadas. Sí, lo sé, laspersonas que usan computadoras son en general capaces de leer, perole garantizo que un buen porcentaje de ellos se encuentra la lectura seauna tarea. El idioma en que está escrito el manual puede no ser sulengua materna, y pueden no ser totalmente fluido. Pueden ser niños!Pueden descifrar el manual si realmente debe , pero seguro que no vana leerlo si no tienen que hacerlo. Los usuarios hacen la lectura manualjust-in-time, sobre una base estrictamente necesario-a-saber.

El resultado de todo esto es que es probable que tenga más remedioque diseñar su software de modo que no necesita un manual en elprimer lugar. La única excepción que se me ocurre es si los usuarios notienen ningún conocimiento del dominio - que no entienden realmentelo que el programa está destinado a hacer, pero ellos saben que mejoraprenden. Un gran ejemplo de esto es inmensamente popularesQuickBooks programa de contabilidad de pequeñas empresas deIntuit. Muchas de las personas que usan este programa sonpropietarios de pequeñas empresas que simplemente no tienen idea delo que está involucrado en la contabilidad. El manual para QuickBooksasume esto y asume que tendrá que enseñar a la gente los principiosbásicos de contabilidad. No hay otra manera de hacerlo. Sin embargo,si lo hace saber contabilidad, QuickBooks es fácil de usar y sin elmanual.

De hecho, los usuarios no leen nada .

Page 22: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Esto puede sonar un poco duro, pero ya verás, cuando haces pruebasde usabilidad, que hay un buen número de usuarios que simplementeno leen las palabras que usted pone en la pantalla. Si usted haceestallar una casilla de error de cualquier tipo, simplemente no loleerán. Esto puede ser desconcertante para usted como programador,porque usted se imagina a sí mismo como la realización de un diálogocon el usuario. Hey, usuario! No puede abrir ese archivo, no apoyamosese formato de archivo! Sin embargo, la experiencia demuestra quemientras más palabras que pones en ese cuadro de diálogo, menosgente en realidad lo leerán.

El hecho de que los usuarios no leen el manual lleva a muchosdiseñadores de software a asumir que van a tener que educar a losusuarios mediante la descripción de las cosas sobre la marcha. Ustedve esto todo el lugar en los programas. En principio, está bien, pero enrealidad, la aversión de la gente a la lectura significa que esto casisiempre se va a meter en problemas. Diseñadores de interfaz deusuario con experiencia, literalmente, tratan de minimizar el númerode palabras en los diálogos para aumentar las posibilidades de que sushijos recibirán leer. Cuando trabajé en Juno, la gente de IU entiendeneste principio y trataron de escribir corto, claro, de texto simple.Tristemente, el CEO de la compañía había sido un importante Inglésen una universidad de la Ivy League; él no tenía ninguna formación enla interfaz de usuario de diseño o ingeniería de software, pero seguroque pensó que era un buen editor de la prosa. Así que él vetó el textorealizado por los diseñadores profesionales de interfaz de usuario yañade un montón de su propia verborrea. Un diálogo típico de Juno seve así:

Compare esto con el diálogo equivalente desde Windows:

Intuitivamente, se puede suponer que la versión de Juno, con 80palabras de instrucciones, sería "superior" (es decir, más fácil de usar)que la versión de Windows, con 5 palabras de instrucciones. Enrealidad, cuando se ejecuta un test de usabilidad en este tipo de cosas,

Page 23: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

usted encontrará que

los usuarios avanzados se saltan las instrucciones. Ellos asumenque saben cómo usar las cosas y no tienen tiempo para leer lasinstrucciones complicadasla mayoría de los usuarios novatos se saltan las instrucciones. Noles gusta leer mucho y esperan que los valores por defecto va aestar bienlos usuarios novatos restantes que no, sinceramente, intentanleer las instrucciones (algunos de los cuales sólo están leyendoellos porque es un test de usabilidad y se sienten obligados) amenudo se confunden por el gran número de palabras yconceptos. Así que incluso si estaban bastante seguros de queserían capaces de utilizar el diálogo cuando llegó por primeravez, las instrucciones realmente los confundieron aún más .

Ahora, Juno era obviamente micro gestionados allá de toda razón. Másal punto, si usted es un gran Inglés de Columbia, entonces usted estáen un todo diferente de la liga de la alfabetización a la media Joe, yusted debe tener mucho cuidado con los diálogos de redacción paraque se parezcan útiles para usted. Acortarlo, mudo hacia abajo,simplificar, deshacerse de las cláusulas complicadas entre paréntesis, ytest de usabilidad. Pero no escribir cosas que se parecen a las notas dela facultad de la Ivy League. Incluso la adición de la palabra "porfavor" a un diálogo, que puede parecer amable y cortés, que va aretrasar la gente hacia abajo: el aumento de la masa de la redacción seva a reducir, por un porcentaje medible, el número de personas queleen el texto.

Otro punto importante es que muchas personas se sientenintimidados por las computadoras . Usted probablemente sabeesto, ¿verdad? Pero es posible que no se dan cuenta de lasimplicaciones de esto. Yo estaba viendo un amigo intenta salir deJuno. Por alguna razón, ella estaba teniendo un poco de problemas.Me di cuenta que cuando intenta salir de Juno, el siguiente cuadro dediálogo aparece:

Ella estaba golpeando No , y entonces ella estaba un poco sorprendidode que Juno no había salido. El mismo hecho de que Juno estabacuestionando su elección la hizo de inmediato asumir que ella estabahaciendo algo mal. Por lo general, cuando los programas piden queconfirme un comando, es porque estás a punto de hacer algo que tepuedas arrepentir. Ella había asumido que si el equipo estabacuestionando su juicio, entonces el equipo debe haber estado en locierto, porque, después de todo, las computadoras son computadorasdonde como ella era meramente un humano , por lo que ella golpeó"No."

¿Es demasiado pedir a la gente a leer 11 palabras piojosos? Bueno, alparecer. En primer lugar, ya que salir de Juno no tiene efectosdeletéreos, Juno debería haber salido solo y sin pedir confirmación,como cualquier otro programa de interfaz gráfica de usuario de laexistencia. Pero incluso si usted está convencido de que esfundamental que las personas confirman antes de salir, puede hacerlode dos palabras en lugar de 11:

Page 24: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Sin el completamente innecesario "gracias" y el remordimientoinspirador "¿estás seguro? ", este diálogo es mucho menos probableque cause problemas. Los usuarios tendrán sin duda leer las dospalabras, decir "um, duh?" para el programa, y libra la tecla Sí.

Claro, el cuadro de diálogo de confirmación Juno Exit hace tropezar auna pocas personas, que usted dice, pero ¿es que la gran cosa? Todo elmundo finalmente logran salir del programa. Pero aquí radica ladiferencia entre un programa que es posible utilizar en comparacióncon un programa que es fácil de usar. Incluso los experimentadosusuarios inteligentes avanzados apreciarán las cosas que usted hacepara hacer más fácil para los usuarios principiantes,, inexpertosdistraídos. Bañeras del hotel tienen grandes barras de apoyo. Ellosestán ahí para ayudar a las personas con discapacidad, pero todo elmundo los usa de todos modos para salir de la bañera. Ellos hacen lavida más fácil, incluso para el buen estado físico.

En el próximo capítulo, voy a hablar un poco sobre el ratón. Al igualque los usuarios no / no se / no pueden leer, algunos no son muybuenos en el uso del ratón, así que hay que adaptarse a ellos.

Capítulo 7: Diseñando para personas que tienenmejores cosas que hacer con sus vidas, segunda parte

Cuando el Macintosh era nuevo, Bruce "Tog" Tognazzini escribió unacolumna en la revista de desarrolladores de Apple en la interfaz deusuario. En su columna, la gente escribió en con un montón deinteresantes problemas de diseño de interfaz de usuario, que sediscute. Estas columnas continúan hasta hoy en su sitio web. Tambiénhan sido recogidos y adornados en un par de grandes libros, como Togen Diseño de Software , que es muy divertido y una gran introducciónal diseño de la interfaz de usuario. (Tog en Interface fue aún mejor,pero es fuera de impresión.)

Tog inventó el concepto de la barra de menú de alta millas de explicarpor qué la barra de menú en la Macintosh, que siempre está pegado ala parte superior de la pantalla física, es mucho más fácil de usar quelas barras de menús en Windows, que aparecen dentro de cadaventana de la aplicación . Cuando usted quiere señalar al menúArchivo en Windows, usted tiene una meta de aproximadamentemedia pulgada de ancho y un cuarto de una pulgada de alto paraadquirir. Debe mover y posicionar el ratón con bastante precisión,tanto en la vertical y las dimensiones horizontales.

Pero en un Macintosh, se puede cerrar de golpe el ratón hasta la partesuperior de la pantalla, sin tener en cuenta lo alto que se cierra degolpe, y haremos una parada en el borde físico de la pantalla - laposición vertical correcta para utilizar el menú. Así que, efectivamente,tiene un objetivo que sigue siendo la mitad de una pulgada de ancho,pero una milla de altura. Ahora sólo tiene que preocuparse por elposicionamiento del cursor horizontalmente, no verticalmente, por loque la tarea de hacer clic en un elemento de menú es mucho más fácil.

Basándose en este principio, Tog tiene una prueba sorpresa: ¿cuálesson los cinco puntos en la pantalla que son más fáciles de adquirir(punto a) con el ratón? La respuesta: las cuatro esquinas de la pantalla(en el que, literalmente, puede cerrar de golpe el ratón allá de una solavez sin que apunta en absoluto), además, la posición actual del ratón,porque ya está allí.

El principio de la barra de menú de una milla de altura es bastante

Page 25: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

conocida, pero no debe ser del todo evidente, porque el equipo deWindows 95 se perdió el punto por completo con el pulsador dearranque, sentado casi en la esquina inferior izquierda de la pantalla,pero no exactamente . De hecho, es cerca de 2 píxeles de distancia dela parte inferior y 2 píxeles desde la izquierda de la pantalla. Así que,por el bien de un par de píxeles, Microsoft literalmente "arrebata laderrota de las fauces de la victoria" , Tog escribe, y hace que seamucho más difícil de adquirir el botón de inicio. Podría haber sido unamilla cuadrada, absolutamente trivial para golpear con el ratón. Por elbien de algo, no sé qué, no lo es. Que Dios nos ayude.

En el capítulo anterior, hablamos sobre cómo los usuarios odian leer, ylo evitarán a menos que absolutamente no pueden cumplir su tarea.Del mismo modo:

Los usuarios no pueden controlar el ratón muy bien.

No quiero decir esto literalmente. Lo que quiero decir es, debe diseñarel programa de modo que no se requiere una enorme cantidad deratón agilidad para usarlo bien. Top seis razones:

1. A veces las personas están utilizando dispositivos señaladoressubóptimas, como trackballs, trackpad y la cosita roja en unThinkPad, que son más difíciles de controlar que los ratonesverdaderos.

2. A veces la gente está utilizando ratones en malas condiciones: unescritorio lleno de gente; un trackball sucio lo que el ratónomitir; o el propio ratón es un clon de 5 dólares que simplementeno camino correcto.

3. Algunas personas son nuevas en las computadoras y todavía nohan desarrollado las habilidades motoras para utilizar ratonescon precisión.

4. Algunas personas literalmente nunca tendrán las habilidadesmotoras para utilizar ratones con precisión, y nunca lo harán.Ellos pueden tener artritis, temblores, túnel carpiano; que seanmuy jóvenes o muy viejos; o cualquier otro número dediscapacidades.

5. Muchas personas encuentran que es muy difícil para hacer dobleclic sin mover ligeramente el ratón. Como resultado, a menudoarrastran las cosas en su pantalla cuando quieren decir con ellanzamiento de aplicaciones. Se puede decir que estas personasporque sus escritorios son un desastre, porque la mitad deltiempo que tratan de poner en marcha algo, ellos terminanmoviéndose en su lugar.

6. Incluso en la mejor de las situaciones, el uso del ratón mucho sesiente lento a la gente. Si se obliga a la gente a realizar unaoperación de múltiples pasos con el ratón, se puede sentir comoque están siendo estancadas que a su vez hace que la interfaz deusuario siente que no responde, que, como usted debe saber aestas alturas, les hace infelices.

En vosotros viejos tiempos cuando trabajé en Excel, las computadorasportátiles no vienen con dispositivos señaladores incorporados, por loque Microsoft hizo una bola de seguimiento con clip que recorta allado del teclado. Ahora, un ratón se controla con la muñeca y la mayorparte de los dedos. Esto es muy parecido a la escritura, y queprobablemente se desarrolló habilidades motoras muy precisos para laescritura en la escuela primaria. Sin embargo, una rueda dedesplazamiento se controla por completo con el pulgar. Comoresultado, es mucho más difícil de controlar una bola de seguimientopara el mismo grado de precisión que un ratón. La mayoría de laspersonas encuentran que pueden controlar un ratón para dentro deuno o dos píxeles, pero sólo puede controlar una bola de seguimientopara dentro de 3 o 4 píxeles. En el equipo de Excel, siempre insté a lagente a probar sus nuevas interfaces de usuario con la rueda dedesplazamiento, en lugar de sólo con un ratón, para ver cómo sesentiría a personas que no son capaces de conseguir el ratón para ir

Page 26: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

exactamente donde lo quieren.

Uno de los elementos de la interfaz que más me molesta es la listacombinada desplegable. Esa es la única que tiene este aspecto:

Al hacer clic en la flecha hacia abajo, se expande:

Piense en cuántas detallada clics del ratón que va a tener que elegir,por ejemplo, Times New Roman. En primer lugar, usted tiene quehacer clic en la flecha hacia abajo. Luego, utilizando la barra dedesplazamiento, usted tiene que desplazarse con cuidado hasta TimesNew Roman está a la vista. Muchos de estos menús desplegables estándescuidadamente diseñado para mostrar sólo dos o tres elementos a lavez, por lo que este desplazamiento es nada fácil, especialmente siusted tiene una gran cantidad de fuentes. Implica ya sea arrastrandocuidadosamente el pulgar (con un pequeño rango de movimiento tal,es probable que sea poco probable que esto va a funcionar), o haciendoclic repetidamente en la segunda flecha hacia abajo, o tratando dehacer clic en el área entre el pulgar y el área de abajo - que con eltiempo dejará de funcionar cuando el pulgar se lo suficientementebajo, le molesta aún más. Por último, si usted se las arregla paraconseguir Times New Roman a la vista, lo que tienes que hacer clic enél. Si se olvida, se llega a empezar todo de nuevo. Ahora multipliquepor 10, si, por ejemplo, desea utilizar una fuente de lujo de la primeraletra de cada uno de sus capítulos, y eres muy infeliz.

El control desplegable combo poxy es aún más molesto porque no hayuna solución tan fácil: basta con hacer el desplegable el tiemposuficiente como para contener todas las opciones. 90% de los cuadroscombinados por ahí ni siquiera utilizar todo el espacio disponible paracaer abajo, que es un pecado . Si no hay suficiente espacio entre elcuadro de edición principal y la parte inferior de la pantalla, en elmenú desplegable debe crecer hasta hasta que se adapta a todos losartículos, incluso si tiene que recorrer todo el camino desde la partesuperior de la pantalla física a la parte inferior de la pantalla física. Yluego, si todavía hay más elementos que en forma, dejar que eldesplazamiento combinado de forma automática cuando el ratón seacerca al borde, en lugar de exigir a los pobres usuarios que metersecon una barra de desplazamiento weensy teensy.

Por otra parte, no me hagas clic en la pequeña flecha pequeña a laderecha del cuadro de edición antes de que el pop hasta el combo:déjame clic en cualquier lugar en el cuadro combinado. Esto expandeel objetivo click sobre diez veces y hace que sea mucho más fácil paraadquirir el blanco con el puntero del ratón.

Echemos un vistazo a otro problema con pasar el ratón: cuadros deedición. Usted puede haber notado que casi todos los cuadro deedición en el Macintosh usa un gordo, ancho de fuente, negritallamada Chicago que se parece un poco feo y angustia diseñadoresgráficos que no tiene fin. Los diseñadores gráficos (a diferencia de losdiseñadores de interfaz de usuario) se les ha enseñado que las fuentesespaciadas delgadas, variables son más amables, se ven mejor y sonmás fáciles de leer. Todo esto es cierto. Pero los diseñadores gráficosaprendieron sus habilidades en el papel , no en la pantalla. Cuandousted necesita para editar texto, espacio sencillo tiene una granventaja sobre las fuentes espaciamiento variable: es más fácil de ver yseleccionar letras estrechas como "l" y la "i". Aprendí esta lección

Page 27: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

después de ver a un hombre de sesenta años en un test de usabilidaddolorosamente tratando de modificar el nombre de su calle, que eraalgo así como Fillmore Street. Estábamos usando 8 puntos Arial, porlo que el cuadro de edición se veía así:

Observe que el yo y los Ls son literalmente un píxel de ancho . Ladiferencia entre una minúscula I y una minúscula L es, literalmente,un píxel. (Del mismo modo, es casi imposible ver la diferencia entreeste cuadro de edición en realidad podría decir Fillrnore "RN" y "M"en minúsculas, por lo que.)

Hay muy pocas personas que se daría cuenta si lo escrito mal Flilmoreo Fiilmore o Fillrnore, e incluso si lo hicieran, tendrían una diablos deun tiempo tratando de usar el ratón para seleccionar la letra infractor ycorregirlo. De hecho, ellos incluso tienen dificultades para usar elcursor parpadeante, que es de dos píxeles de ancho, para seleccionaruna sola letra. Mira lo fácil que habría sido si se hubiera utilizado unafuente de grasa (que se muestra aquí con Courier Negrita)

Bien, bien, por lo que ocupa más espacio y no se ve tan fresco a susdiseñadores gráficos. Tratar con él! Es mucho más fácil de usar; queincluso se siente mejor utilizar porque mientras el usuario escribe, quereciben, texto clara y nítida, y es mucho más fácil de editar.

Aquí hay un patrón de pensamiento programador común: sólo hay tresnúmeros: 0, 1, y n . Si n es permitido, todos los n s 'son igualmenteprobables. Este patrón de pensamiento viene de la creencia(probablemente cierto) que no debería tener ningún constantesnuméricas en el código de excepción de 0 y 1. (Constantes distintos de0 y 1 se les conoce como "números mágicos". Yo no hago inclusoquiero entrar en la gestalt de que .)

Así, por ejemplo, los programadores tienden a pensar que si suprograma le permite abrir varios documentos, debe permitir que abrasinfinitamente muchos documentos (como la memoria lo permite), opor lo menos 2 ^ 32, los únicos programadores de números mágicosconceden. Un programador tendería a mirar con desdén a unprograma que te limita a 20 documentos abiertos. ¿Qué es el 20? ¿Porqué 20? Ni siquiera es una potencia de 2!

Otra implicación de todos los n de son igualmente probable es que losprogramadores han tendido a pensar que si los usuarios puedencambiar el tamaño y mover ventanas, deben tener completaflexibilidad sobre donde estas ventanas van, hasta el último píxel.Después de todo, la colocación de una ventana de 2 píxeles desde laparte superior de la pantalla es "igualmente probable", como lacolocación de una ventana exactamente en la parte superior de lapantalla.

Pero no es cierto. Como resultado, hay un montón de buenas razonespor las que usted puede ser que desee una ventana exactamente en laparte superior de la pantalla (que maximiza el espacio de la pantalla),pero no hay ninguna razón para dejar 2 píxeles entre la parte superiorde la pantalla y la parte superior de la ventana. Así que, en realidad, 0es mucho más probable que 2.

Los programadores más de Nullsoft, creadores de WinAmp , de algunamanera lograron evitar el programador piensa que ha encarcelado elresto de nosotros durante una década. WinAmp tiene una grancaracterística. Cuando usted comienza a arrastrar la ventana cerca delborde de la pantalla, que no superen unos pocos píxeles, queautomáticamente se ajusta al borde de la pantalla perfectamente. Quees probablemente exactamente lo que quería, ya que 0 es mucho más

Page 28: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

probable que 2. (La ventana principal de Juno tiene una característicasimilar: es la única aplicación que he visto en mi vida que es"encerrado en una caja" en la pantalla y no puedo ser arrastrado másallá del borde.)

Se pierde un poco de flexibilidad, pero a cambio, se obtiene unainterfaz de usuario que reconoce que el control del ratón con precisiónes difícil, así que ¿por qué debería hacerlo? Esta innovación (que cadaprograma puede utilizar) alivia la carga de la gestión de ventanas deuna manera inteligente. Mira de cerca a su interfaz de usuario, ydarnos a todos un descanso. Haga de cuenta que somos gorilas,orangutanes o tal vez inteligentes, y realmente tenemos problemas conel ratón.

Capítulo 8: Diseñando para personas que tienenmejores cosas que hacer con sus vidas, Tercera parte

Uno de los primeros principios de interfaces GUI era que no se debepedir a la gente a recordar las cosas que la computadora podíarecordar. El ejemplo clásico es el cuadro de diálogo Abrir archivo, quemuestra a la gente una lista de archivos en lugar de pedirles querecordar y escriba el nombre exacto del archivo. La gente recuerda lascosas mucho mejor cuando se les da algunas pistas, y que habíansiempre en lugar de elegir algo de una lista que tiene que recuperarlode la memoria.

Otro ejemplo son los propios menús. Históricamente, proporcionandoun completo menú de comandos disponibles sustituido a los antiguosinterfaces de línea de comandos, en el que tuvo que memorizar loscomandos que quería usar. Y esto es, fundamentalmente, la razón porla interfaz de línea de comandos sólo son no mejores que las interfacesGUI, no importa lo que tus amigos te dicen UNIX. Utilizando unainterfaz de línea de comandos es como tener que aprender coreanopara pedir comida en una sucursal de Seúl de McDonalds. Utilizandouna interfaz de menú basado es como ser capaz de apuntar a la comidaque quieras y asiente con la cabeza vigorosamente: transmite la mismainformación con ninguna curva de aprendizaje.

Considere el proceso de selección de archivos en un programa degráficos típicos:

Por suerte, Windows 98 introdujo el soporte de miniaturas, para quepueda ver los archivos como este:

Page 29: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Esto hace que sea mucho más fácil para abrir el archivo que desea; queni siquiera toma el esfuerzo mental para asignar palabras en imágenes.

Usted puede ver el principio de mínima de memoria en el trabajo encaracterísticas como la finalización automática, también. Incluso siusted tiene que escribir algo, algunos programas hacen conjeturasacerca de lo que estás a punto de tipo educados:

En este ejemplo, tan pronto como se escribe "M", Excel estima que esprobable que sea tecleando Hombre, porque usted ha escritoMasculino antes en esta columna, y propone que, como la finalizaciónautomática. Pero la "ale" se preselecciona de manera que si no terefieres al tipo masculino, puede seguir escribiendo (quizás "ystery") ysobrescribir conjetura de Excel sin ningún esfuerzo perdido.

Microsoft Word se vuelva un poco arrastrados adivinar lo que vas aescribir, como cualquiera que haya usado alguna vez ese productodurante el mes de mayo merry ha descubierto:

Diseñar para la gente que tiene mejores cosas quehacer con sus vidas, ReduxEn los capítulos anteriores, he criado tres principios:

Los usuarios no leen cosas ( capítulo 6 )

Page 30: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

Los usuarios no pueden utilizar el ratón ( capítulo 7 )

Los usuarios no pueden recordar nada

Usted podría estar empezando a tener la impresión de que yo creo quelos usuarios son idiotas. No es cierto. Faltar el respeto a sus usuarioses cómo el software arrogante como Microsoft Bob se crea (y tirado enla basura), y nadie está muy contento.

Por otra parte, hay una especie mucho peor de arrogancia en el diseñode software: la arrogante presunción de que "mi software es tanmaldito frío, la gente va a tener que deformar sus cerebros a sualrededor." Este tipo de descaro es bastante común en el mundo delsoftware libre. Hey, Linux es gratis! Si no eres lo suficientementeinteligente como para descifrarlo, no te mereces a utilizarlo!

Aptitud humana tiende hacia la curva de campana. Tal vez el 98% desus clientes son lo suficientemente inteligentes como para usar unaparato de televisión. Alrededor del 70% de ellos puede utilizarWindows. 15% puede utilizar Linux. 1% puede programar. Pero sólo el0,1% de ellos se puede programar en un lenguaje como C ++. Y sólo el0,01% de ellos puede averiguar programación Microsoft ATL. (Y todosellos, sin excepción, tienen barbas y anteojos .)

El efecto de esta fuerte caída es que cada vez que "baja la barra", deincluso una pequeña cantidad, por lo que su programa, por ejemplo,un 10% más fácil de usar, que dramáticamente aumenta el número depersonas que pueden utilizarlo, por ejemplo, por 50%.

Así que, yo realmente no creo que la gente es idiotas, pero creo que siconstantemente intenta diseñar el programa de modo que es bastantefácil para los imbéciles a utilizar, usted va a hacer un programapopular, fácil de usar que la gente como . Y usted se sorprenderá por laforma en lo que parecen ser pequeñas mejoras de usabilidad setraduce en mucho más clientes.

Una buena manera de evaluar la usabilidad de un programa o dediálogo que nunca has visto antes es actuar un poco estúpido. No lealas palabras en el cuadro de diálogo. Hacer suposiciones aleatoriasacerca de lo que hacen las cosas sin verificar. Trate de usar el ratón conun solo dedo. Hacer un montón de errores, y en general retorcerse. Aver si el programa hace lo que quiere, o al menos, le guía con cuidadoen lugar de la voladura. Sé impaciente. Si usted no puede hacer lo quequiere de inmediato, darse por vencido. Si la interfaz de usuario nopuede soportar su actuación en general, inmaduro y estúpido, sepodría utilizar un cierto trabajo.

Capítulo 9: El proceso de diseño de un producto

Hemos hablado de los principios de un buen diseño, pero losprincipios solamente le dan una forma de evaluar y mejorar un diseñoexistente. Pero ... ¿cómo averiguar lo que el diseño del dang debe estaren el primer lugar? Mucha gente escribe grandes esquemasfuncionales de todas las características que pensaban hasta. Luego dediseñar cada uno, y cuelgan fuera de un elemento de menú (o páginaweb). Cuando hayan terminado, el programa (o sitio web) tiene toda lafuncionalidad que querían, pero no fluya bien. Las personas se sienteny no saben lo que hace, y no saben cómo lograr lo que quieren.

La solución de Microsoft a esto es algo que se llama actividad deplanificación basado. (Por lo que yo puedo decir, este concepto fueinventado por Mike Conte en el equipo de Excel, que se aburrió de esoy pasó a una segunda carrera como piloto de carreras). La idea clave esaveriguar la actividad que el usuario está haciendo, y se centran en loque es fácil para llevar a cabo esa actividad. Esto se ilustra mejor conun ejemplo.

Usted ha decidido hacer un sitio web que permite a las personas a

Page 31: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

crear tarjetas de felicitación. Utilizando un enfoque un tanto ingenuo,es posible llegar a una lista de características como este:

1. Añadir texto a la tarjeta 2. Añadir foto a la tarjeta 3. Obtener la tarjeta prediseñado de la biblioteca 4. Enviar tarjeta: a. Uso del correo electrónico b. Por imprimirlo

Por falta de una mejor forma de pensar sobre el problema, esto podríaconducir a una misma interfaz de usuario típico de Macintosh, circa-1984: un programa que comienza con una tarjeta en blanco, conelementos de menú para añadir texto, imágenes, tarjetas de carga deun biblioteca, y enviar tarjetas. Y entonces lo que el usuario va a tenerque hacer es sentarse y navegar por los menús, tratando de averiguartodos los comandos disponibles, y luego hacer su propia síntesis decómo poner estos comandos atómicos juntos para crear una tarjeta.

Ahora, la actividad basada en la planificación, dice que usted necesitapara llegar a una lista de actividades que los usuarios pueden hacer.Por lo tanto, hable con sus usuarios potenciales, y que llegar a estalista "top tres":

1. Saludo de cumpleaños2. Invitación de la fiesta3. Aniversario de felicitación

Ahora, en lugar de pensar acerca de su programa como unprogramador (en términos de las características que usted necesitatener para hacer una tarjeta ), si está pensando en ello como elusuario, en términos de, ¿qué actividades está haciendo el usuario, enconcreto:

1. El envío de una tarjeta de cumpleaños2. Planificación de una fiesta e invitar a la gente a que3. Envío de una tarjeta de aniversario

De repente, todos los tipos de ideas se apresure en la cabeza. En lugarde comenzar con una tarjeta en blanco, es posible comenzar con unmenú como este:

Qué es lo que quieres hacer?Enviar una tarjeta de cumpleañosEnviar una tarjeta de aniversarioEnviar una invitación del partidoComience con una tarjeta en blanco

De pronto, los usuarios encontrarán mucho más fácil para empezarcon su programa, sin tener que navegar alrededor de los menús, yaque el programa será prácticamente guiarlos a través de los pasos paracompletar la actividad. (Existe el riesgo de que si usted no eligió lasactividades correctamente, enajenar o confundir a los usuarios quepodrían haber sido capaces de utilizar su programa, por ejemplo, paraenviar una tarjeta de Janucá, pero no veo que como una opción. Asíque tenga cuidado en la selección de las actividades que cubren lamayor parte del mercado que desea orientar la campaña.)

La sola observación de nuestra lista de tres actividades sugiere algunasfunciones muy útiles que es posible que desee agregar. Por ejemplo, siva a enviar una tarjeta de cumpleaños o un aniversario, es posible quedesee que se le recuerde el próximo año para enviar una tarjeta a lamisma persona ... así que usted puede agregar una casilla deverificación que dice "me recuerdan el año que viene". Y una invitacióndel partido necesita una forma de confirmar su asistencia, por lo quepodría añadir una característica que le recoja Reservas de lugar depersonas por vía electrónica. Ambas ideas cuentan casi se le salieron

Page 32: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

de ver la actividad que los usuarios estaban realizando en lugar de lascaracterísticas de la aplicación.

Este ejemplo es trivial; para cualquier aplicación seria, lasrecompensas de la actividad basada en la planificación son aúnmayores. Cuando usted está diseñando un programa desde cero, yatiene una visión de lo que las actividades de los usuarios van a estarhaciendo. Averiguar esta visión no es difícil en absoluto, se necesitacasi ningún esfuerzo en absoluto para hacer un poco de lluvia de ideascon los compañeros de trabajo, escriba una lista de actividadesposibles, y luego decidir cuáles desea enfocar. Pero obligar a usted a lalista de estas actividades en el papel le ayudará a su diseño generalenormemente.

Planificación basada en la actividad es aún más importante cuando seestá trabajando en la versión dos de un producto que la gente ya seestán utilizando. Aquí, puede ser una cuestión de la observación deuna muestra de clientes para ver lo que están utilizando su programapara.

En los días de Excel 1.0 hasta la 4.0, la mayoría de la gente enMicrosoft cree que la actividad de los usuarios más común estabahaciendo financiera qué pasaría si los escenarios, donde se hacencosas como cambiar la tasa de inflación y ver cómo esto afecta surentabilidad.

Cuando estábamos diseñando Excel 5.0, la primera versión importanteutilizar seria planificación basado en la actividad, sólo tuvimos que verunos cinco clientes de utilizar el producto antes de que nos dimoscuenta de que un enorme número de personas sólo tiene que utilizarExcel para mantener listas . Ellos no están entrando en las fórmulas orealizar cualquier cálculo en absoluto! Ni siquiera habíamosconsiderado antes. Mantener listas resultó ser mucho más popular quecualquier otra actividad con Excel. Y esto nos llevó a inventar toda unagran cantidad de características que hacen que sea más fácil mantenerlas listas de clasificación: fácil, entrada de datos automática, lacaracterística Autofiltro que le ayuda a ver un trozo de su lista, ycaracterísticas multiusuario que permiten a varias personas trabajanen la misma lista al mismo tiempo, mientras que Excelautomáticamente reconcilia todo.

Aunque Excel 5 se estaba diseñando, Lotus había enviado una hoja decálculo "nuevo paradigma" llamado Improv. De acuerdo con las notasde prensa, Improv era toda una nueva generación de hoja de cálculo,que iba a volar lejos de todo lo que existía antes de él. Por diversasrazones extrañas, Improv disponible por primera vez en el NeXT, queciertamente no ayudar a sus ventas, pero un montón de genteinteligente cree que Improv sería a NeXT como VisiCalc fue la AppleII: sería la aplicación asesina que la gente hizo salir a comprar todo elhardware nuevo sólo para ejecutar un programa.

Por supuesto, Improv es ahora una nota al pie en la historia. Buscar enla web, y los únicos enlaces que encontrará son de gerentes trasteromuy sobre-organizados que han, por alguna razón, hechas de un sitioweb con un inventario de todas las cosas que han de recoger el polvo.

¿Por qué? Porque en Improv, era casi imposible simplemente hacerlistas. Los diseñadores Improv pensaban que las personas estabanusando hojas de cálculo para crear modelos financierosmultidimensionales complicados. Resulta que, si se pregunta a lagente, ellos descubren que hacer listas era mucho más común de loque los modelos financieros multi-dimensionales, y en Improv, hacerlistas era una francamente tarea, si no imposible.

Así que la actividad basada en la planificación es útil en la versióninicial de la aplicación, donde usted tiene que hacer conjeturas acercade lo que la gente quiere hacer, pero es aún más útil cuando usted está

Page 33: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

planeando la actualización, ya que entiende lo que sus clientes estánhaciendo.

Otro ejemplo, desde la web, es la evolución de deja.com , que comenzócomo un enorme índice de búsqueda de Usenet llamado DejaNews. Lainterfaz original, básicamente, tenía un cuadro de edición y dijo"buscar Usenet para bla , "y eso fue todo. En 1999, un poco deplanificación basado en la actividad mostró que una actividad comúnde usuario estaba haciendo una investigación sobre un producto oservicio, de la naturaleza ", que coche debo comprar". Deja fuecompletamente reorganizada, y hoy en día, es más de un servicio deinvestigación de la opinión del producto: la capacidad de buscarUsenet es casi completamente oculto. Esto molestó al pequeñonúmero de usuarios que utilizaban el sitio para buscar si su tarjeta devídeo Matrox trabajó con Redhat Linux 5.1, pero deleitó a la poblaciónmucho mayor de usuarios que sólo quería comprar la mejor cámaradigital.

La otra gran cosa acerca de la planificación basada en la actividad esque le permite crear una lista de lo que cuenta no hacer. Al crearcualquier tipo de software, la realidad es que va a llegar a tres vecestantas características como usted tiene tiempo para hacerlo. Y una delas mejores maneras de decidir que cuenta hacer, y que cuenta sequede fuera, es la evaluación que cuenta con apoyo a las actividadesde los usuarios más importantes .

Usuarios imaginarios.Los mejores diseñadores de interfaz de usuario en la industria están deacuerdo en una cosa: hay que inventar y describir algunos usuariosimaginarios antes de poder diseñar la interfaz de usuario. Usted puederecordar de nuevo en la introducción de este libro , introduje unusuario imaginario Pete:

Pete es un contador para una editorial técnica que ha utilizadoWindows para seis años en la oficina y un poco en casa. Él esbastante competente y técnica. Se instala su propio software; leela revista PC Magazine, y que incluso ha programado algunasmacros de Word simples para ayudar a las secretarias en suoficina envían facturas. Se está haciendo un módem de cable encasa. Pete nunca ha usado una computadora Macintosh. "Sondemasiado caro", te lo dirá. "Usted puede obtener una PC de 700Mhz con 128 Meg RAM por el precio de ..." OK, Pete. Loconseguimos.

Cuando usted lea esto, casi se puede imaginar un usuario. Tambiénpodría haber inventado otra muy diferente tipo de usuario:

Patricia es un profesor de Inglés que ha escrito varios libros bienrecibidos-de la poesía. Ella ha sido el uso de computadoras parael procesamiento de textos a partir de 1980, aunque los dosúnicos programas que nunca usa son Nota Bene (un antiguoprocesador de textos académicos) y Microsoft Word. Ella noquiere dedicar tiempo a aprender la teoría de cómo funciona elequipo, y ella tiende a almacenar todos sus documentos en eldirectorio que irían si no sabías acerca de los directorios.

Obviamente, el diseño de software para Pete es muy diferente dediseño de software para Patricia, quien a su vez es muy diferente deMike, un joven de 16 años que corre Linux en casa, habla en IRCdurante horas, y no utiliza ningún software "Micro $ oft".

Cuando inventas estos usuarios, pensando en si su diseño esapropiado se vuelve mucho más fácil. Por ejemplo, una gran cantidadde programadores tienden a sobreestimar la capacidad del usuariotípico de entender las cosas. Cada vez que escribo algo sobre lasinterfaces de línea de comandos que son difíciles de usar, me sale elaluvión de correo electrónico inevitable decir que las interfaces delínea de comandos son ultra-potente porque puede hacer cosas como

Page 34: Diseño de Interfaz de Usuario Para Los Programadores - Joel on Software

'gunzip foo.tar.gz | tar xvf -'. Pero tan pronto como usted tiene quepensar en conseguir Patricia escribir "gunzip ..." se hace evidente queese tipo de interfaz no va a servir a sus necesidades, siempre.Pensando en una persona "real" le da la empatía que necesita parahacer una función que sirve las necesidades de esa persona. (Porsupuesto, si usted está haciendo el software de copia de seguridad deLinux para administradores de sistemas avanzados, es necesarioinventar un personaje como "Frank" que se niega a tocar Windows,que sólo se refiere como un "sistema operativo" entre comillas, utilizasu propia versión de tcsh personalmente modificado, y se ejecuta X11con cuatro xterms baldosa durante todo el día. Y cerca de 11 xperfs.)

En resumen , el diseño de un buen software tarda alrededor de seispasos:

1. Inventa algunos usuarios

2. Averiguar las actividades importantes

3. Averiguar el modelo de usuario - cómo el usuario esperará pararealizar aquellas actividades

4. Esbozar el primer borrador del diseño

5. Iterar sobre su diseño una y otra vez, por lo que es más fácil ymás fácil hasta que esté dentro de las capacidades de sususuarios imaginarios

6. Vea los seres humanos reales que tratan de utilizar su software.Tenga en cuenta las áreas donde la gente tiene problemas, queprobablemente muestran áreas donde el modelo de programa nose adapta a cada tipo de usuario.

Bueno UI vende software, sino que también hace que la gente feliz ,porque la gente es feliz cuando logran la tarea que querían lograr.Razón por la cual el diseño de interfaz de usuario es un campo tansatisfactorio estar en. ¿Dónde más vas a tener la oportunidad de hacerque millones de personas en apenas un poco más felices?

¿Quieres saber más? Usted está leyendo Joel on Software , rellenocon años y años de delirar completamente locos artículos sobredesarrollo de software, gestión de equipos de software, diseño deinterfaces de usuario, corriendo las empresas de software de éxito, ypatitos de goma.

Sobre el autor. Soy Joel Spolsky, co-fundador de Trello y Fog CreekSoftware , y director general de Pila Intercambio . Más acerca de mí.

© 2000-2014 Joel Spolsky

¿Ha estado preguntando acercade Distributed Control de

versiones? Ha sidouna bendiciónenorme productividadpara nosotros, así queescribí Hg Init, untutorial Mercurial -check unvistazo!