Principios de Diseño de Interfaces

Imagen de Lukas en Pixabay

Los principios de diseño de interfaces son importantes de considerar cuando se evalúa una interacción con interfaces humano-computador. Es esencial que estas personas puedan poder usar dichas interfaces sin problemas, con el fin de mejorarles su vida según para lo que fueron diseñadas y desarrolladas. Una mala interfaz no logrará transmitir la información de forma correcta. Así como tampoco la forma de interacción que deben tener las personas que la utilicen. Para lograr los objetivos de buenas interfaces, es necesario seguir de forma correcta los seis principios de diseño de interfaces (Norman, 1988; Shneiderman, 1998; Preece, Rogers & Sharp, 2002): Visibilidad, Prestaciones, Topografía, Retroalimentación, Modelo Mental y Modelo Conceptual.

No existe ningún principio de diseño de interfaz más importante que otro. En general, si uno se cumple al 100%, de seguro otros no lo podrán cumplir en el mismo porcentaje. Esto significa que al diseñar una interfaz es importante tratar que todos los principios sean cumplidos de la mejor forma posible (altos porcentajes de logro), teniendo siempre en cuenta que existe un trade off (negociación entre ganancia/pérdida) entre estos principios. Esto es que al cumplirse uno con mayor porcentaje, otro verá reducido su porcentaje de cumplimiento.

Visibilidad (Visibility)

Las partes idóneas deben ser visibles, y deben comunicar el mensaje correcto. Cuando se debe interactuar con una interfaz, ya sea de una máquina, un software o un sitio web, se deben aportar señales naturales que indiquen precisamente cómo se debe hacer dicha interacción y sin vislumbrar posibles errores. Por lo tanto, es necesario hacer visible las partes importantes de la interfaz. Esto significa que lo primordial y necesario para que el usuario pueda interactuar de forma correcta con una interfaz debe estar al alcance inmediato del usuario, y sin dificultad para ser encontrado.

Las partes correctas de la interfaz deben transportar el mensaje correcto. Una buena forma de lograr una correcta visibilidad es por medio de señales naturales, ya que estas son entendidas sin necesidad de que el usuario esté consciente de ellas. Esto conlleva a que siempre se debe buscar un diseño lo más natural posible.

Veamos el caso de las puertas. Cuando una puerta debe ser empujada, el diseñador debe proveer las pistas necesarias que indiquen que se debe empujar y además por dónde empujar. Una placa de empuje y las bisagras son señales naturales, la placa indica dónde empujar y las bisagras cómo gira la puerta.

El usuario necesita de ayuda, hace falta que no se vea más de lo necesario, indicar las partes que funcionan y cómo funcionan, presentando cómo los usuarios deben interactuar con el dispositivo o la interfaz. La visibilidad entrega información relevante del uso, y es la falta de ésta la que hace que tantas interfaces resulten difíciles de manejar. Por otra parte, el exceso de visibilidad también genera problemas, haciendo que muchas interfaces resulten intimidantes.

Un dispositivo es fácil de utilizar cuando existe una cierta visibilidad del conjunto de actos posibles, de modo que los mandos y las imágenes explotan la topografía natural. Los principios son sencillos, pero raras veces se incorporan en el diseño. Un buen diseño exige atención, planificación, reflexión.

A veces resulta imposible hacer que las cosas sean visibles. Para lograrlo es necesario agregar más información que sólo lo visual. El sonido puede aportar información no disponible por otros medios. Nos puede decir qué cosas funcionan bien y cuáles necesitan servicios de mantenimiento o de reparación. Incluso nos puede evitar accidentes. Veamos la información que nos aportan los elementos siguientes: el chasquido cuando una puerta cierra bien, el sonido cuando una puerta no cierra bien, el pitido de una tetera cuando hierve el agua, el golpe cuando sale el pan de la tostadora o la subida del tono cuando se atasca una aspiradora.

Muchos dispositivos utilizan el sonido, pero sólo como señal. Sonidos sencillos, como timbres, campanillas o tonos. Los computadores utilizan sonidos de avisos para alarmas, problemas, errores, éxito, etc. Este empleo del sonido es valioso y desempeña una función importante, pero tiene unas posibilidades muy limitadas; es como si el uso de pistas visibles se limitara a diferentes luces de colores. Podríamos utilizar el sonido más de lo que lo hacemos para transmitir comunicaciones.

Prestaciones (Affordance)

Cuando nos encontramos con un objeto nuevo, ¿cómo podemos saber qué hacer con él? En ocasiones hemos visto algo parecido en el pasado y traspasamos los conocimientos antiguos al nuevo objeto, o nos procuramos instrucciones. En tales casos, la información que necesitamos está en el cerebro grabada de una experiencia previa. Otro enfoque consiste en utilizar la información disponible en el momento de la interacción, en especial si el diseño del nuevo objeto nos ha aportado una información que se puede interpretar.

¿Cómo puede señalar el diseño los actos posibles? Un conjunto importante de señales procede de las limitaciones naturales de los objetos, limitaciones físicas que reducen el número de cosas que es posible hacer. Otro conjunto de señales procede de las prestaciones de los objetos, que comunican mensajes acerca de sus posibles usos, actos y funciones. Las prestaciones pueden señalar cómo se puede mover un objeto, lo que soportará y si hay algo que encaje en sus huecos, por encima de él o por debajo de él. ¿Por dónde lo agarramos, qué partes son movibles y qué partes son fijas? Las prestaciones sugieren la gama de posibilidades y las limitaciones reducen el número de opciones. El empleo bien pensado de las prestaciones y las limitaciones conjuntamente en el diseño permite al usuario determinar fácilmente el rumbo adecuado de acción, incluso en una situación nueva.

Las prestaciones deben proveer pistas correctas para poder operar las interfaces, así se logra indicar cómo las interfaces pueden ser utilizadas. Una silla presta apoyo, y en consecuencia puede prestar un asiento. Una silla también se puede transportar. El vidrio es para ver a través de él, así también para romperlo. La madera se utiliza normalmente por su solidez, opacidad, su capacidad de sustentación o para hacer incisiones en ella. Las superficies lisas, porosas y blandas son para escribir en ellas. La madera también es para escribir en ella. Las placas son para empujar, las ranuras para insertar cosas en ellas, las pelotas para lanzar o botar, los botones para presionar. La idea de una prestación es aprovechar su propiedad con sólo mirar, es decir, que no sea necesario un mayor análisis del objeto o interfaz con la que se está enfrentando el usuario, sólo con una mirada darse cuenta de diversas pistas. Cuando una interfaz sencilla necesita imágenes, etiquetas o instrucciones, claramente el diseño ha fallado.

Topografía (Mapping)

Topografía es la relación entre dos cosas, en el caso de las interfaces es la relación entre los mandos y sus desplazamientos y los resultados en el mundo exterior. La topografía siempre se aprende con facilidad y se recuerda siempre. Las preguntas que permiten representar mejor una topografía son las relacionadas con ¿qué es lo que se desea hacer? y ¿qué es posible hacer?

Topografía Natural

Dentro de la topografía existe la topografía natural. Esta topografía natural se refiere a aprovechar las analogías físicas y las normas culturales, las que llevan a una comprensión inmediata. La topografía natural aprovecha la forma en que las personas perciben las cosas, por lo que dependiendo de la percepción que tengan de algún control, será la acción que asocien a dicho control. Por ejemplo, un diseñador de interfaces puede utilizar la analogía espacial: para elevar un objeto, llevar el mando hacia arriba. A fin de controlar unas luces, organizar los mandos con la misma pauta que las luces. Algunas topografías naturales son culturales o biológicas, como en la norma universal de que un nivel que sube representa más y un nivel que baja, menos. De la misma forma, un sonido más alto puede significar una cantidad mayor.

La cantidad y el volumen (como el peso, la longitud de una línea y la brillantez) son dimensiones acumulativas: se añade más para mostrar unos aumentos incrementales. No sería natural ocupar tonos musicales, por ejemplo un tono más alto, ¿qué significa? ¿más de algo?, ¿menos de algo? Sin embargo, el tono puede ser útil para mostrar alturas, en que tonos altos representan mayor altura y tonos bajos menor altura. Otras topografías naturales se desprenden de los principios de la percepción y permiten la agrupación o la pauta natural de mandos y retroalimentación.

Si un diseño depende de textos, es posible que sea malo. Los textos son importantes y a menudo necesarios, pero un buen uso de las topografías naturales puede reducir al mínimo la necesidad de ellos. Siempre que parecen necesarios textos, hay que considerar la posibilidad de diseñar de otra forma.

Retroalimentación (Feedback)

Retroalimentación corresponde a la información que la interfaz le entrega al usuario sobre las acciones que éste realiza y sus resultados. La retroalimentación se puede entregar de diversas formas, y no necesariamente por medio del uso de texto. En los sistemas digitales, de hoy en día, la retroalimentación está presente en prácticamente todas las acciones que hacemos. Al momento de escribir un texto, este aparece en pantalla (retroalimentación de la acción de presionar una tecla determinada del teclado) y en pantalla aparece un cursor indicando donde está el usuario posicionado, dentro del documento. Las modificaciones del cursor para diferentes acciones son una retroalimentación que entrega la interfaz frente a diversos modos de interacción. Las barras de carga o descarga web (barras de progreso) y de instalación de programas son retroalimentación para que el usuario sepa en qué parte de la ejecución está el computador y no piense que el proceso se quedó estancado. Imagínese no hubiese retroalimentación, al tratar de hablar con alguien por teléfono no existirían tonos de marcado, y ni siquiera se podría oír la voz, o bien al dibujar el lápiz no marcaría ninguna línea.

Existen diversas formas de entregar retroalimentación para una misma acción. Por ejemplo, al momento en que el computador está procesando una acción, éste cambia el cursor de una flecha a un reloj de arena. Para una acción de corto tiempo, esta retroalimentación puede ser suficiente, sin embargo si la acción toma minutos o incluso horas, el usuario podría pensar que el trabajo se encuentra estancado y sin ningún avance. Entonces para el caso de tareas de largo procesamiento puede ser mejor entregar una retroalimentación por medio del uso de barras de progreso. Obviamente, la suma de ambas retroalimentaciones puede entregar una sensación aún mejor al usuario.

Una anécdota interesante de la retroalimentación es el caso de los teléfonos, en que todos los tonos de marcado, ocupado o de red son heredados del mundo análogo en que era necesario tener dichos tonos para la comunicación por la red. En el mundo digital estas marcas no son necesarias, pero se mantuvieron para entregar una retroalimentación acorde a las necesidades de los usuarios.

Modelo Mental (Mental Model)

Los modelos mentales se forman en base a los modelos que tiene la gente de sí misma, de los demás, del medio ambiente y de las cosas con las que interactúa. La gente forma modelos mentales mediante la experiencia, la formación y la instrucción. El modelo mental de un dispositivo se forma en gran parte mediante la interpretación de sus actos percibidos y de su estructura visible. La parte visible del dispositivo es lo que se conoce como la imagen del sistema. Esta imagen del sistema puede llegar a ser incoherente o inadecuada, al pasar esto ocurre que el usuario no puede utilizar el mecanismo con facilidad y por ende podrá cometer errores que pueden traer implicancias catastróficas dependiendo de con qué está interactuando.

No existe un modelo mental idéntico a otro. Esto se debe principalmente a que todas las personas tienen experiencias de vida diferentes y por ende formas de ver el mundo diferentes. Si bien pueden ser similares en experiencias, sus estudios, capacitaciones, género, nacionalidad, formas de vida y cada momento de vivencia que puedan experimentar harán que se formen modelos distintos. El caso más cercano de experiencias puede ser el de dos hermanos gemelos, en cuyo caso también generan modelos mentales distintos, incluso dada la cercanía que estos pueden poseer de muchos momentos de su vida. Sus modos de estudios, su forma de ver la vida hacen que generen en su cerebro modelos mentales diferentes entre sí. Estos modelos son esenciales para entender nuestra propia experiencia, poder anteponer los resultados de las tareas que hacemos y hacer frete a posibles imprevistos.

En una cantidad elevada de tareas cotidianas, la dificultad está en establecer las relaciones entre las intenciones y las interpretaciones mentales, y los actos y los estados físicos. Existen varias lagunas que separa lo que se tiene en mente con lo que se hace, finalmente, físicamente. Cada laguna existente puede generar graves problemas a los usuarios en sus modos de operar e interactuar frente a los objetos.

Modelo Conceptual (Conceptual Model)

Modelo conceptual es lo que los usuarios tienen almacenados en su cerebro, que les permite identificar y simular mentalmente la operatividad de las interfaces. Mientras las partes importantes de una interfaz sean visibles, serán claras las implicancias de las diferentes partes de la interfaz. Otras pistas de cómo funcionan las cosas proceden de su estructura visible, considerando su topografía, visibilidad y prestaciones. Por ejemplo, un par de tijeras, aunque no las conozcamos y no sepamos cómo se utilizan, comprendemos que el número de actos posibles es limitado. Los agujeros están ahí evidentemente para meter algo en ellos, y lo único lógico que puede encajar son los dedos. Los agujeros de una tijera constituyen prestaciones: insertar dedos. Por otra parte, el tamaño de los agujeros establece las restricciones para limitar los posibles dedos, el pequeño sólo coincide con un dedo, el otro entrega más opciones. Acá es donde entra en juego la topografía, y que hace que sepamos cual es el dedo que va junto con el otro pequeño. De todas formas, el funcionamiento de la tijera viene dado por el movimiento de las hojas, independiente de si este movimiento se hace con los dedos acordes. Encontrar los dedos acordes tiene relación con la comodidad en que trabajamos con dichas tijeras.

Para los objetos cotidianos no es necesario contar con modelos operacionales complejos. Por ejemplo, para las tijeras o los interruptores de luz el mecanismo de uso es muy sencillo y no se necesita tener mayores conocimientos físicos de estos objetos. Lo que si resulta necesario es tener claridad sobre la relación entre los mandos y sus resultados y sobre esto generar un modelo conceptual sencillo pero funcional. Cuando el modelo expuesto es insuficiente o equívoco se producen las dificultades y aumentan las probabilidades de error. Imagínense lo que sucedería si un piloto o un operario de una fábrica tienen un modelo operacional erróneo, en casos como este los resultados pueden ser devastadores.

Referencias

  • Norman, D. (1988). The Psychology of Everyday Things. New York: Basic Books.

  • Shneiderman B, (1998). Designing the user interface (3rd. Edition). New York. Addison-Wesley.

  • Preece, J., Rogers, Y., & Sharp, H. (2002). Interaction design: beyond human-computer interaction. New York, NY: J. Wiley & Sons.

Skip to content