5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 1/9

Somos comodidad,eficacia,usabilidad y emoción

xeral[arroba]galinus.com

Artículos de Galinus >

Principios de diseño de interacción de BruceTognazzini

Esta es una traducción del artículo "First Principles of Interaction Design", de BruceTognazzini

Otras traducciones de este artículo.

Italiano: Principi base di Interaction Design.Alemán: Grundsätze des Interaction Designs (Bruce Tognazzini).Holandés: Eerste grondbeginselen van ontwerpen.Bieloruso:Самыя галоўныя прынцыпы інтэрактыўнага дызайнуPolaco:Zasady projektowania interakcjiCheco:Principy interakce design Bruce Tognazzini

Índice

Anticipación Autonomía Daltonismo

Consistencia Valores pordefecto Eficacia del usuario

Interfacesexplorables Objetos humanos Reducción de latencia

Aprendizaje Uso de metáforas Protege el trabajo delusuario

Legibilidad Guardar el estado Navegación visible

Introducción

Los siguientes principios son fundamentales para el diseño e implementación de interfaces

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 2/9

gráficas 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 lossiguientes principios. Estos principios no cambian aunque se trate de una aplicación web;es más, aplicar estos principios se vuelve más importante.

Las interfaces efectivas son visualmente comprensibles y permiten errores por parte delusuario, dándole una sensación de control. Los usuarios ven rápidamente el alcance de lasopciones y comprenden como alcanzar sus metas y realizar su trabajo.

Las interfaces efectivas ocultan al usuario el funcionamiento interno del sistema. El trabajose guarda continuamente y con la opción de deshacer en todo momento cualquier paso quese haya dado.

Las aplicaciones y servicios efectivos realizan el máximo trabajo requiriendo la mínimainformación del usuario.

Anticipación

Las aplicaciones deberían intentar anticiparse a las necesidades y deseos del usuario. Noesperes que el usuario busque o recuerde información o herramientas. Muestra al usuariotoda la información y herramientas necesarias para cada etapa en su trabajo.

Autonomía

El ordenador, la interfaz y el entorno de la tarea pertenecen al usuario, pero esto nosignifica que abandonemos todas las reglas.

Dale al usuario algo de "cancha". Los usuarios aprenden rápido y ganan confianza cuandose 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 niño pequeño que llora cuando se le mantiene muy atado o sele deja en un edificio grande y vacío. Los adultos también se sienten más cómodos en unentorno ni muy restrictivo ni demasiado grande, un entorno explorable pero no peligroso.

Mantén informado al usuario del estado del sistema.

No existe autonomía en ausencia de control; y el control no se puede tener sin informaciónsuficiente. Comunicar el estado es fundamental para que el usuario respondaapropiadamente con la información disponible.

Ejemplo: los trabajadores sin información del estado del sistema, tienden a mantenersebajo presión durante cortos periodos de tiempo hasta que el trabajo se termina. Un estrésy fatiga innecesarios por lo que cuando venga la siguiente carga de trabajo, puede que lostrabajadores no estén en las mejores condiciones físicas y mentales.

Mantén la información de estado fácilmente visible y actualizada.

Los usuarios no tienen que buscar la información de estado. De un vistazo deberían sercapaces de hacerse una idea aproximada del estado del sistema. La información de estadopude ser bastante sutil: el icono de la bandeja de entrada puede mostrarse vacía, medio

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 3/9

llena o hasta los topes, por ejemplo. Sin embargo, no es conveniente abusar: el Macintoshutilizó durante años un icono de la papelera que parecía que iba a estallar en cualquiermomento, aunque sólo tuviese un documento. Los usuarios adquirieron la costumbre devaciar la papelera apenas contuviese un documento, convirtieron un proceso de un paso enuno de dos (primero llevamos el documento a la papelera, luego lo vaciamos). Esto tuvo elefecto negativo de reducir una de las funciones básicas de la papelera: la posibilidad dedeshacer la acción.

Otro ejemplo posible de información de estado sería el de un una caja de búsquedas quecambiase de color para indicar si la búsqueda está todavía en marcha o si ya haterminado, con demasiados resultados, con muy pocos o justos con lo necesario.

Daltonismo

Si utilizas el color para transmitir información debes utilizar otros elementoscomplementarios para la gente con daltonismo.

Aproximadamente un 10% de los hombres adultos sufren daltonismo.

Las pistas secundarias pueden consistir en distintos tonos de gris, gráficoscomplementarios o etiquetas de texto.

Consistencia

Los siguientes principios, vistos en su conjunto, dan al diseñador de interacción muchomargen para la evolución de un producto sin perjudicar los aspectos más importantes parael usuario.

Niveles de consistencia: mantener una consistencia estricta depende del caso. En lasiguiente lista aparecen los elementos de la interfaz ordenados por su necesidad deconsistencia, de mayor a menor. Mucha gente asume que el orden de los cinco primeroselementos es justo el contrario, dando lugar a aplicaciones que se parecen pero que secomportan de forma impredecible y totalmente distinta.

1. Interpretación del comportamiento del usuario. Ejemplo: los atajos de teclado debenfuncionar siempre igual.

2. Estructuras invisibles.3. Estructuras visibles pequeñas.4. El aspecto general de una aplicación o servicio (presentación, elementos de diseño).5. Una suite de productos.6. Consistencia interna.7. Consistencia con la plataforma.

Las estructuras invisibles se refieren a objetos como al botón izquierdo de Word, que tienetoda clase de propiedades y comportamientos, si es que alguna vez los descubres. A vecesaparece y otras no, depende de tu versión de Windows; y si no aparece, nunca estarásseguro de si está o no, dado que es invisible. Por eso es tan importante la consistencia enlos objetos invisibles.

Otros objetos en la interfaz se consideran visibles, pero muchas veces no parecen

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 4/9

controles: es posible que el usuario nunca descubra que se pueden interactuar con ellos.Su significado, si decides utilizarlos, debería ser muy claro. "Por ejemplo, podemos hacerclic y arrastrar en una esquina de un ventana activa para cambiar su tamaño" pero no "aveces podemos hacer clic y arrastrar pero otras veces no".

Las pequeñas estructuras visibles se refiere a iconos, flechas de desplazamiento, etc. Esnecesario mantener su consistencia si no queremos que la gente se pase el díaaveriguando cómo se hace qué con estos objetos. Su posición en pantalla es ligeramentemenos importante. Si tiene sentido estandarizar la posición, hazlo.

Inconsistencia: es tan importante ser visualmente incosistente con los objetos que secomportan de forma distinta, como ser consistente con los que se comportan de igualmanera.

Evita la uniformidad. Haz que los objetos que se comportan distinto parezcan distintos.

La consistencia más importante es aquella que espera el usuario. La única manera decomprobar las expectativas del usuario es hacer pruebas con ellos.

Valores por defecto

Los valores por defecto deberían ser poder descartados con facilidad y rapidez. Loscampos de texto con valores por defecto deben aparecer seleccionados, para que elusuario sólo 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 aplicación o servicio. Utiliza "estándar", "Usarvalores habituales", "Restablecer valores iniciales" o términos más específicos quedescriban lo que sucederá.

Eficacia del usuario

Busca la productividad del usuario, no del ordenador

La gente cuesta mucho más dinero que los ordenadores, y aunque parezca queaumentando la productividad de la máquina aumentamos la del humano, lo habitual sueleser lo contrario. Cuando juzgues la eficacia de un sistema, vete más allá de la simpleeficacia de la máquina.

Por ejemplo ¿qué lleva menos tiempo, calentar agua en un microondas durante un minutoy diez segundos o durante un minuto y once segundos?

Desde el punto de vista del microondas, la primera opción es la respuesta obvia. Perodesde el punto de vista del usuario es más rápida la segunda: sólo tiene que pulsar tresveces la tecla con el 1; de la otra forma tiene que cambiar de tecla, pulsando un cero, quesuele quedar al otro lado del teclado. ¡El agua se calienta antes si la cocinamos unsegundo más!

El usuario que decide repetir dígitos en el microoondas tiene que tomar menos decisiones.Dejan de decidir si las lentejas tiene que calentarse durante 2 minutos o 2 minutos 20

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 5/9

segundos. Hacen una estimación rápida y acaban con un resultado satisfactorio sin tantadecisión, incrementando la eficacia humana.

Mantén ocupado al usuario

El gasto más alto en un negocio es el trabajo humano. Cada vez que el usuario tiene queesperar la respuesta del sistema, es dinero perdido.

Para maximizar la eficacia de un negocio u organización debes maximizar laeficacia de todos y no sólo de un grupo

Las grandes organizaciones tienden a estar segmentadas, con cada grupo mirando por susintereses, a veces en detrimento de la organización.

Los saltos cualitativos en eficacia se encuentran en la arquitectura del sistema, noen su superficie, en el diseño visual de la interfaz.

Esta es la razón por la que es tan importante que todo el mundo involucrado en unproyecto de software aprecie la importancia de hacer de la productividad del usuario elobjetivo principal y entender la diferencia entre diseñar un sistema eficaz o potenciar laproductividad del usuario. Esto implica que es fundamental la colaboración, comunicacióny complicidad entre ingenieros y diseñadores de interacción si se quiere conseguir esteobjetivo.

Escribe mensajes de ayuda concisos y que ayuden a resolver el problema: un buentexto ayuda mucho en comprensión y eficacia.

Menús y etiquetas de botones deben comenzar con la palabra más importante.

Ejemplo de un procesador de texto ficticio:

Mal:

Insertar salto de páginaAñadir nota al pie de páginaActualizar índice

Bien:

insertar:

Salto de páginaNota al pie de páginaÍndice

Este ejemplo puede parecer contradictorio. El primero ofrece información más precisa: unono inserta un índice si ya existe uno, o no inserta una nota a pie de página. Aún así, en elsegundo ejemplo será mucho más efectivo. La razón es que la información extra del primerejemplo no compensa la rapidez con que se escanea las palabras más importantes delsegundo.

Interfaces explorables

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 6/9

Dale al usuario caminos bien señalizados; luego deja que se metanmonte a través.

Imita la seguridad, suavidad y consistencia del medio natural. No encierres al usuario enun único camino, pero ofrécele la ruta de menos resistencia. Esto facilita a los nuevosusuarios o a aquellos que sólo quieren hacer acabar la tarea, hacerlo rápidamente y sinesfuerzo; pero también hay que dejar posibilidades abiertas a aquellos que quieranexplorar.

A veces es necesario ofrecer caminos bien profundos y marcados.

Una interaz para una tarea poco habitual y desconocida tiene que ser mucho más directaque las interfaces para usuarios habituales.

Da a los usuarios nociones estables para saber como llegar al inicio

Los elementos visuales estables no sólo ayudan a navegar más rápido, si no que tambiénactúan como una referencia necesaria para sentirse seguro.

Haz que las acciones sean reversibles

La gente explora. A veces quieren saber que pasaría si hiciesen una acción potencialmentepeligrosa; otras veces lo hacen por accidente.

Si las acciones son reversibles, los usuarios pueden experimentar o equivocarse sinproblemas.

Siempre permite el "deshacer"

Si no lo haces, tendrás que recurrir a los inevitables cuadros de diálogo "¿Estás realmente,pero realmente seguro de que quieres hacer esto?". Esto ralentiza el trabajo de losusuarios.

Sin estos cuadros de diálogo, la gente se ralentiza incluso más. Un estudio de hace unosaños demostró que la gente trabajando en un entorno peligroso no comete más errores queen un entorno cómodo y que permita errores, pero si que disminuyen mucho el ritmo paraevitar 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 fácil quedarse.

Al principio era difícil salir de los programas, pero con la aparición de la web ahoratenemos software en el que es difícil quedarse.

Los navegadores están abarrotados de menús con elementos que poco tienen que ver connuestro trabajo. Por ejemplo, sería muy difícil diseñar un procesador de texto con el menúde Photoshop.

Tener muchas opciones que llevan directamente a la destrucción del trabajo del usuariojunto con algunas que también lo hacen un poco más fácil es una interfaz.

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 7/9

Si trabajas con transacciones delicadas, inhabilita la barra de menús y ofrece una formaclara de salir de ella.

Ley de Fitt

El tiempo necesario para alcanzar un objeto es función de la distancia y del tamaño delobjeto.

Aunque a primera vista pueda parecer obvio, es uno de los principios a los que menoscaso se le hace. Como ejemplo, esta ley nos dice que los menús del Mac sonaproximadamente 5 veces más rápidos de accionar que los de Windows, como así resulta.También nos dice las zonas de la pantalla más fácilmente accesibles son las cuatroesquinas, y siguen estando infrautilizadas por la mayoría de diseñadores.

Utiliza objetos grandes para las funciones importantes.

Utiliza las esquinas y bordes de la pantalla. Una lista de iconos en los que hacer clic quecuelguen de los bordes será mucho más efectiva que una paleta con una doble fila deiconos separados cuidadosamente por borde de píxeles no "clicables".

Objetos humanos

Los objetos humanos de la interfaz se pueden ver, escuchar, tocar o percibir de otramanera.

Los objetos humanos visibles de la interfaz son bastante familiares. Aquellos que utilizanotros sentidos lo son menos.

Los objetos humanos de la interfaz se comportan de manera estándar.

Los objetos humanos de la interfaz deben ser comprensibles, consistentes y estables.

Reducción de latencia

Cuando sea posible, utiliza el multihilo para dejar la latencia en un segundo plano.

Reduca la percepción de latencia con:

Comunica el clic de los botones mediante un feedback visual en los primeros 50milisegundos.Muestra un reloj de arena para cualquier acción 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 duración estimada para cualquier proceso quepueda durar más de 2 segundos.Comunica el tamaño y el progreso con un barra de estado.Muestra mensajes de textos agradables y procura mantener entretenido al usuariomientras espera a que el ordenador termine.Indica con pitidos e indicaciones visuales muy claras cuando el usuario puede volveral trabajo con el sistema.Indentifica los múltiples clics en un mismo objeto.Haz que vaya más rápido. Elimina de la aplicación cualquier cosa que no esté

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 8/9

ayudando.

Aprendizaje

Lo ideal sería que no hubiese periodo de aprendizaje: los usuarios se sentarían delante delsistema por primera vez y sabrían cómo utilizarlo. Esto, sin embargo, nunca pasa.

Limita las limitaciones

La usabilidad y la facilidad de uso no son mutuamente excluyentes. Primero decide cuál esla más importante y luego aborda ambas con decisión. Es un mito que la facilidad de usose consiga a costa de la facilidad de aprendizaje.

Uso de metáforasEscoge aquellas metáforas que permitan al usuario comprender losdetalles del modelo conceptual.

Las buenas metáforas son historias que crean imágenes mentales.

Dale vida a las metáforas apoyándote en su percepción -vista, sonido, tacto,kinestesia- y en sus recuerdos.

Las metáforas evocan lo familiar, pero generalmente con un nuevo punto de vista.Ejemplo, en Windows 95 existe un objeto que se llama Mi Maletín. Sirve para llevarseconsigo todos los archivos que se coloquen en el. Sin embargo, no actúa comotransportador si no como sincronizador.

Protege el trabajo del usuario

Asegúrate de que el usuario nunca pierde su trabajo como resultado de un errorsuyo, los problemas de internet u otro tipo de problemas inevitables, como unapagón.

Legibilidad

Utiliza texto con alto contraste. Procura utilizar negro sobre blanco o amarillo pálido. Evitafondos grises cuando haya texto.

Utiliza tamaños de letra que se lean bien en los monitores más comunes. Da mayorimportancia a los datos e información que quieres presentar, más que a instrucciones yetiquetas.

Ten en cuenta a los mayores, cuya visión suele ser peor que la de los jóvenes.

Guardar el estado

Debido a que la web utiliza un protocolo sin estado, nosotros debemos guardarlo en sulugar.

Probablemente necesitemos saber:

5/5/13 Principios del diseño de interacción, de Bruce Tognazzini. Artículos de Galinus

galinus.com/es/articulos/principios-diseno-de-interaccion.html 9/9

Si es la primera vez que un usuario utiliza el sistema.Dónde está el usuario.A dónde quiere ir el usuario.En dónde ha estado el usuario en su sesión.Dónde abandonó el usuario la última sesión.

Además de saber en dónde han estado, podemos aprovechar saber qué han hecho.

La información de estado debe almacenarse en una cookie durante la sesión en elordenador cliente. Luego se almacena en un servidor.

Los usuarios deberían ser capaces de desconectar, volver a conectarse desde cualquierotro sitio y seguir con su trabajo en donde lo dejaron.

Navegación Visible

Evita la navegación invisible

La mayoría de los usuarios no pueden mantener mapas mentales complejos. Si tienen quehacerlo, se cansarán o se perderán.

La web es, de hecho, un espacio de navegación invisible. Nunca puedes ver del vastísimopanorama entre páginas. Una vez que el usuario llega a tu página, debemos procurarreducir la navegación al máximo y ofrecer la mínima imprescindible de forma clara ynatural. Procura que parezca que el usuario está siempre en el mismo sitio, con el trabajoapareciéndosele a medida que avanza. Esto, además de evitar el uso de mapas yherramientas para la navegación, da una sensación de seguridad y control.

Lo mismo que con la web es no guardar el estado, nuestro trabajo no es aceptar a ciegaslo que dictan los arquitectos, si no añadir una capa que proteja al usuario y haga sunavegación más cómoda. Que la navegación en la web sea invisible es un reto, no unacaracterística.

Ver más artículos

Esta es una traducción del artículo "First Principles of Interaction Design", de Bruce Tognazzini

Artículo bajo licencia de Creative Commons.

En Galinus somos profesionales de la comunicación en internet.

Si quieres aprovechar al máximo las posibilidades de las tecnologías de la comunicación, contactacon nosotros.