1

Principios de diseo de interaccin de Bruce Tognazzini

Esta es una traduccin del artculo "First Principles of Interaction Design", de Bruce Tognazzini
Introduccin
Los siguientes principios son fundamentales para el diseo e implementacin de interfaces grficas
efectivas, bien se trate de interfaces GUI de escritorio o de la web.
Muchas de las aplicaciones web reflejan una falta de entendimiento de muchos de los siguientes
principios. Estos principios no cambian aunque se trate de una aplicacin web; es ms, aplicar estos
principios se vuelve ms importante.
Las interfaces efectivas son visualmente comprensibles y permiten errores por parte del usuario,
dndole una sensacin de control. Los usuarios ven rpidamente el alcance de las opciones y
comprenden como alcanzar sus metas y realizar su trabajo.
Las interfaces efectivas ocultan al usuario el funcionamiento interno del sistema. El trabajo se guarda
continuamente y con la opcin de deshacer en todo momento cualquier paso que se haya dado.
Las aplicaciones y servicios efectivos realizan el mximo trabajo requiriendo la mnima informacin
del usuario.
Anticipacin
Las aplicaciones deberan intentar anticiparse a las necesidades y deseos del usuario. No esperes que
el usuario busque o recuerde informacin o herramientas. Muestra al usuario toda la informacin y
herramientas necesarias para cada etapa en su trabajo.
Autonoma
El ordenador, la interfaz y el entorno de la tarea pertenecen al usuario, pero esto no significa que
abandonemos todas las reglas.
Dale al usuario algo de "cancha". Los usuarios aprenden rpido y ganan confianza cuando se sienten
que tienen el control del sistema.
Pese a lo que pueda parecer, sin fronteras o restricciones el usuario no se siente libre (Yallum, 1980);
es como un nio pequeo que llora cuando se le mantiene muy atado o se le deja en un edificio
grande y vaco. Los adultos tambin se sienten ms cmodos en un entorno ni muy restrictivo ni
demasiado grande, un entorno explorable pero no peligroso.
Mantn informado al usuario del estado del sistema.
No existe autonoma en ausencia de control; y el control no se puede tener sin informacin
suficiente. Comunicar el estado es fundamental para que el usuario responda apropiadamente con
la informacin disponible.
Ejemplo: los trabajadores sin informacin del estado del sistema, tienden a mantenerse bajo presin
durante cortos periodos de tiempo hasta que el trabajo se termina. Un estrs y fatiga innecesarios
2

por lo que cuando venga la siguiente carga de trabajo, puede que los trabajadores no estn en las
mejores condiciones fsicas y mentales.
Mantn la informacin de estado fcilmente visible y actualizada.
Los usuarios no tienen que buscar la informacin de estado. De un vistazo deberan ser capaces de
hacerse una idea aproximada del estado del sistema. La informacin de estado pude ser bastante
sutil: el icono de la bandeja de entrada puede mostrarse vaca, medio llena o hasta los topes, por
ejemplo. Sin embargo, no es conveniente abusar: el Macintosh utiliz durante aos un icono de la
papelera que pareca que iba a estallar en cualquier momento, aunque slo tuviese un documento.
Los usuarios adquirieron la costumbre de vaciar la papelera apenas contuviese un documento,
convirtieron un proceso de un paso en uno de dos (primero llevamos el documento a la papelera,
luego lo vaciamos). Esto tuvo el efecto negativo de reducir una de las funciones bsicas de la
papelera: la posibilidad de deshacer la accin.
Otro ejemplo posible de informacin de estado sera el de un una caja de bsquedas que cambiase
de color para indicar si la bsqueda est todava en marcha o si ya ha terminado, con demasiados
resultados, con muy pocos o justos con lo necesario.
Daltonismo
Si utilizas el color para transmitir informacin debes utilizar otros elementos complementarios para
la gente con daltonismo.
Aproximadamente un 10% de los hombres adultos sufren daltonismo.
Las pistas secundarias pueden consistir en distintos tonos de gris, grficos complementarios o
etiquetas de texto.
Consistencia
Los siguientes principios, vistos en su conjunto, dan al diseador de interaccin mucho margen para
la evolucin de un producto sin perjudicar los aspectos ms importantes para el usuario.
Niveles de consistencia: mantener una consistencia estricta depende del caso. En la siguiente lista
aparecen los elementos de la interfaz ordenados por su necesidad de consistencia, de mayor a
menor. Mucha gente asume que el orden de los cinco primeros elementos es justo el contrario,
dando lugar a aplicaciones que se parecen pero que se comportan de forma impredecible y
totalmente distinta.
1. Interpretacin del comportamiento del usuario. Ejemplo: los atajos de teclado deben
funcionar siempre igual.
2. Estructuras invisibles.
3. Estructuras visibles pequeas.
4. El aspecto general de una aplicacin o servicio (presentacin, elementos de diseo).
5. Una suite de productos.
6. Consistencia interna.
3

7. Consistencia con la plataforma.
Las estructuras invisibles se refieren a objetos como al botn izquierdo de Word, que tiene toda clase
de propiedades y comportamientos, si es que alguna vez los descubres. A veces aparece y otras no,
depende de tu versin de Windows; y si no aparece, nunca estars seguro de si est o no, dado que
es invisible. Por eso es tan importante la consistencia en los objetos invisibles.
Otros objetos en la interfaz se consideran visibles, pero muchas veces no parecen controles: es
posible que el usuario nunca descubra que se pueden interactuar con ellos. Su significado, si decides
utilizarlos, debera ser muy claro. "Por ejemplo, podemos hacer clic y arrastrar en una esquina de un
ventana activa para cambiar su tamao" pero no "a veces podemos hacer clic y arrastrar pero otras
veces no".
Las pequeas estructuras visibles se refiere a iconos, flechas de desplazamiento, etc. Es necesario
mantener su consistencia si no queremos que la gente se pase el da averiguando cmo se hace qu
con estos objetos. Su posicin en pantalla es ligeramente menos importante. Si tiene sentido
estandarizar la posicin, hazlo.
Inconsistencia: es tan importante ser visualmente incosistente con los objetos que se comportan de
forma distinta, como ser consistente con los que se comportan de igual manera.
Evita la uniformidad. Haz que los objetos que se comportan distinto parezcan distintos.
La consistencia ms importante es aquella que espera el usuario. La nica manera de comprobar las
expectativas del usuario es hacer pruebas con ellos.
Valores por defecto
Los valores por defecto deberan ser poder descartados con facilidad y rapidez. Los campos de texto
con valores por defecto deben aparecer seleccionados, para que el usuario slo tenga que teclear y
no seleccionar todo, borrar y escribir.
Los valores por defecto deben tener sentido.
No uses la palabra "por defecto" en una aplicacin o servicio. Utiliza "estndar", "Usar valores
habituales", "Restablecer valores iniciales" o trminos ms especficos que describan lo que
suceder.
Eficacia del usuario
Busca la productividad del usuario, no del ordenador
La gente cuesta mucho ms dinero que los ordenadores, y aunque parezca que aumentando la
productividad de la mquina aumentamos la del humano, lo habitual suele ser lo contrario. Cuando
juzgues la eficacia de un sistema, vete ms all de la simple eficacia de la mquina.
Por ejemplo qu lleva menos tiempo, calentar agua en un microondas durante un minuto y diez
segundos o durante un minuto y once segundos?
Desde el punto de vista del microondas, la primera opcin es la respuesta obvia. Pero desde el punto
de vista del usuario es ms rpida la segunda: slo tiene que pulsar tres veces la tecla con el 1; de la
4

otra forma tiene que cambiar de tecla, pulsando un cero, que suele quedar al otro lado del teclado.
El agua se calienta antes si la cocinamos un segundo ms!
El usuario que decide repetir dgitos en el microoondas tiene que tomar menos decisiones. Dejan de
decidir si las lentejas tiene que calentarse durante 2 minutos o 2 minutos 20 segundos. Hacen una
estimacin rpida y acaban con un resultado satisfactorio sin tanta decisin, incrementando la
eficacia humana.
Mantn ocupado al usuario
El gasto ms alto en un negocio es el trabajo humano. Cada vez que el usuario tiene que esperar la
respuesta del sistema, es dinero perdido.
Para maximizar la eficacia de un negocio u organizacin debes maximizar la eficacia de todos y no
slo de un grupo
Las grandes organizaciones tienden a estar segmentadas, con cada grupo mirando por sus intereses,
a veces en detrimento de la organizacin.
Los saltos cualitativos en eficacia se encuentran en la arquitectura del sistema, no en su superficie,
en el diseo visual de la interfaz.
Esta es la razn por la que es tan importante que todo el mundo involucrado en un proyecto de
software aprecie la importancia de hacer de la productividad del usuario el objetivo principal y
entender la diferencia entre disear un sistema eficaz o potenciar la productividad del usuario. Esto
implica que es fundamental la colaboracin, comunicacin y complicidad entre ingenieros y
diseadores de interaccin si se quiere conseguir este objetivo.
Escribe mensajes de ayuda concisos y que ayuden a resolver el problema: un buen texto ayuda
mucho en comprensin y eficacia.
Mens y etiquetas de botones deben comenzar con la palabra ms importante.
Ejemplo de un procesador de texto ficticio:
Mal:
Insertar salto de pgina
Aadir nota al pie de pgina
Actualizar ndice
Bien:
insertar:
Salto de pgina
Nota al pie de pgina
ndice
5

Este ejemplo puede parecer contradictorio. El primero ofrece informacin ms precisa: uno no
inserta un ndice si ya existe uno, o no inserta una nota a pie de pgina. An as, en el segundo
ejemplo ser mucho ms efectivo. La razn es que la informacin extra del primer ejemplo no
compensa la rapidez con que se escanea las palabras ms importantes del segundo.
Interfaces explorables
Dale al usuario caminos bien sealizados; luego deja que se metan monte a travs.
Imita la seguridad, suavidad y consistencia del medio natural. No encierres al usuario en un nico
camino, pero ofrcele la ruta de menos resistencia. Esto facilita a los nuevos usuarios o a aquellos
que slo quieren hacer acabar la tarea, hacerlo rpidamente y sin esfuerzo; pero tambin hay que
dejar posibilidades abiertas a aquellos que quieran explorar.
A veces es necesario ofrecer caminos bien profundos y marcados.
Una interaz para una tarea poco habitual y desconocida tiene que ser mucho ms directa que las
interfaces para usuarios habituales.
Da a los usuarios nociones estables para saber como llegar al inicio
Los elementos visuales estables no slo ayudan a navegar ms rpido, si no que tambin actan
como una referencia necesaria para sentirse seguro.
Haz que las acciones sean reversibles
La gente explora. A veces quieren saber que pasara si hiciesen una accin potencialmente peligrosa;
otras veces lo hacen por accidente.
Si las acciones son reversibles, los usuarios pueden experimentar o equivocarse sin problemas.
Siempre permite el "deshacer"
Si no lo haces, tendrs que recurrir a los inevitables cuadros de dilogo "Ests realmente, pero
realmente seguro de que quieres hacer esto?". Esto ralentiza el trabajo de los usuarios.
Sin estos cuadros de dilogo, la gente se ralentiza incluso ms. Un estudio de hace unos aos
demostr que la gente trabajando en un entorno peligroso no comete ms errores que en un
entorno cmodo y que permita errores, pero si que disminuyen mucho el ritmo para evitar errores.
Siempre deja una salida abierta
Los usuarios nunca deben sentirse atrapados. Siempre hay que tener una salida clara.
De todas formas, haz que sea fcil quedarse.
Al principio era difcil salir de los programas, pero con la aparicin de la web ahora tenemos software
en el que es difcil quedarse.
Los navegadores estn abarrotados de mens con elementos que poco tienen que ver con nuestro
trabajo. Por ejemplo, sera muy difcil disear un procesador de texto con el men de Photoshop.
6

Tener muchas opciones que llevan directamente a la destruccin del trabajo del usuario junto con
algunas que tambin lo hacen un poco ms fcil es una interfaz.
Si trabajas con transacciones delicadas, inhabilita la barra de mens y ofrece una forma clara de salir
de ella.
Ley de Fitt
El tiempo necesario para alcanzar un objeto es funcin de la distancia y del tamao del objeto.
Aunque a primera vista pueda parecer obvio, es uno de los principios a los que menos caso se le
hace. Como ejemplo, esta ley nos dice que los mens del Mac son aproximadamente 5 veces ms
rpidos de accionar que los de Windows, como as resulta. Tambin nos dice las zonas de la pantalla
ms fcilmente accesibles son las cuatro esquinas, y siguen estando infrautilizadas por la mayora de
diseadores.
Utiliza objetos grandes para las funciones importantes.
Utiliza las esquinas y bordes de la pantalla. Una lista de iconos en los que hacer clic que cuelguen de
los bordes ser mucho ms efectiva que una paleta con una doble fila de iconos separados
cuidadosamente por borde de pxeles no "clicables".
Objetos humanos
Los objetos humanos de la interfaz se pueden ver, escuchar, tocar o percibir de otra manera.
Los objetos humanos visibles de la interfaz son bastante familiares. Aquellos que utilizan otros
sentidos lo son menos.
Los objetos humanos de la interfaz se comportan de manera estndar.
Los objetos humanos de la interfaz deben ser comprensibles, consistentes y estables.
Reduccin de latencia
Cuando sea posible, utiliza el multihilo para dejar la latencia en un segundo plano.
Reduca la percepcin de latencia con:
Comunica el clic de los botones mediante un feedback visual en los primeros 50
milisegundos.
Muestra un reloj de arena para cualquier accin que dure entre 1/2 y 2 segundos. Que est
animado, para que el usuario sepa que el sistema sigue trabajando.
Muestra un mensaje comunicando la duracin estimada para cualquier proceso que pueda
durar ms de 2 segundos.
Comunica el tamao y el progreso con un barra de estado.
Muestra mensajes de textos agradables y procura mantener entretenido al usuario mientras
espera a que el ordenador termine.
7

Indica con pitidos e indicaciones visuales muy claras cuando el usuario puede volver al
trabajo con el sistema.
Indentifica los mltiples clics en un mismo objeto.
Haz que vaya ms rpido. Elimina de la aplicacin cualquier cosa que no est ayudando.
Aprendizaje
Lo ideal sera que no hubiese periodo de aprendizaje: los usuarios se sentaran delante del sistema
por primera vez y sabran cmo utilizarlo. Esto, sin embargo, nunca pasa.
Limita las limitaciones
La usabilidad y la facilidad de uso no son mutuamente excluyentes. Primero decide cul es la ms
importante y luego aborda ambas con decisin. Es un mito que la facilidad de uso se consiga a costa
de la facilidad de aprendizaje.
Uso de metforas
Escoge aquellas metforas que permitan al usuario comprender los detalles del modelo
conceptual.
Las buenas metforas son historias que crean imgenes mentales.
Dale vida a las metforas apoyndote en su percepcin -vista, sonido, tacto, kinestesia- y en sus
recuerdos.
Las metforas evocan lo familiar, pero generalmente con un nuevo punto de vista. Ejemplo, en
Windows 95 existe un objeto que se llama Mi Maletn. Sirve para llevarse consigo todos los archivos
que se coloquen en el. Sin embargo, no acta como transportador si no como sincronizador.
Protege el trabajo del usuario
Asegrate de que el usuario nunca pierde su trabajo como resultado de un error suyo, los
problemas de internet u otro tipo de problemas inevitables, como un apagn.
Legibilidad
Utiliza texto con alto contraste. Procura utilizar negro sobre blanco o amarillo plido. Evita fondos
grises cuando haya texto.
Utiliza tamaos de letra que se lean bien en los monitores ms comunes. Da mayor importancia a los
datos e informacin que quieres presentar, ms que a instrucciones y etiquetas.
Ten en cuenta a los mayores, cuya visin suele ser peor que la de los jvenes.
Guardar el estado
Debido a que la web utiliza un protocolo sin estado, nosotros debemos guardarlo en su lugar.
Probablemente necesitemos saber:
8

Si es la primera vez que un usuario utiliza el sistema.
Dnde est el usuario.
A dnde quiere ir el usuario.
En dnde ha estado el usuario en su sesin.
Dnde abandon el usuario la ltima sesin.
Adems de saber en dnde han estado, podemos aprovechar saber qu han hecho.
La informacin de estado debe almacenarse en una cookie durante la sesin en el ordenador
cliente. Luego se almacena en un servidor.
Los usuarios deberan ser capaces de desconectar, volver a conectarse desde cualquier otro sitio y
seguir con su trabajo en donde lo dejaron.
Navegacin Visible
Evita la navegacin invisible
La mayora de los usuarios no pueden mantener mapas mentales complejos. Si tienen que hacerlo, se
cansarn o se perdern.
La web es, de hecho, un espacio de navegacin invisible. Nunca puedes ver del vastsimo panorama
entre pginas. Una vez que el usuario llega a tu pgina, debemos procurar reducir la navegacin al
mximo y ofrecer la mnima imprescindible de forma clara y natural. Procura que parezca que el
usuario est siempre en el mismo sitio, con el trabajo aparecindosele a medida que avanza. Esto,
adems de evitar el uso de mapas y herramientas para la navegacin, da una sensacin de seguridad
y control.
Lo mismo que con la web es no guardar el estado, nuestro trabajo no es aceptar a ciegas lo que
dictan los arquitectos, si no aadir una capa que proteja al usuario y haga su navegacin ms
cmoda. Que la navegacin en la web sea invisible es un reto, no una caracterstica.