Estrategias > Composición > Interfaces > Principios del diseño de interfaces

Principios del diseño de interfaces

septiembre 22, 2013

características del diseño, color, Interfaz gráfica de usuario, navegación, usabilidad

La práctica del diseño de interfaces y los diversos estudios sobre el tema, han generado numerosas listas de principios que deben aplicarse. Algunos de estos principios son:

Familiaridad
Uniformidad
Mínima sorpresa
Recuperabilidad
Asistencia al usuario

El principio de familiaridad del usuario sugiere que los usuarios no deben ser obligados a adaptarse a una interfaz sólo porque sea inconveniente implementarla. La interfaz debe utilizar términos familiares para los usuarios, y los objetos que el sistema manipula deben estar directamente relacionados con el entorno de trabajo del usuario.
El principio de uniformidad de la interfaz de usuario significa que los comandos y menus del sistema deben tener el mismo formato, los parámetros deben pasarse a todos los comandos de la misma forma, y la puntuación de los comandos debe ser similar. Las interfaces uniformes reducen el tiempo de aprendizaje del usuario. Por lo tanto, el conocimiento aprendido en un comando o aplicación es aplicable en otras partes del sistema o en aplicaciones relacionadas. La uniformidad de la interfaz a lo largo de las aplicaciones también es importante. En lo posible, los comandos con significados similares en aplicaciones diferentes se deben expresar de la misma forma.
El principio de mínima sorpresa es apropiado debido a que las personas se irritan demasiado cuando el sistema se comporta de forma inesperada. Cuando se utiliza un sistema, los usuarios construyen un modelo mental de la forma en que trabaja dicho sistema. Si una acción en algún contexto provoca un tipo de cambio particular, es razonable pensar que la misma acción en un contexto diferente cause un cambio comparable. Si sucede algo completamente diferente, el usuario se sorprende y confunde.
El principio de recuperabilidad es importante debido a que los usuarios inevitablemente cometen errores cuando utilizan un sistema. El diseño de la interfaz puede minimizar estos errores, pero los errores nunca pueden eliminarse completamente. Por consiguiente, se deben incluir recursos que permitan a los usuarios recuperarse de sus errores. Estos ueden ser de tres tipos:
- Confirmación de acciones destructivas
- Proporcionar un recurso para deshacer
- Generar puntos de control
Un principio relacionado es el de asistencia al usuario o características de ayuda. Éstas se deben integrar en el sistema y proporcionar diferentes niveles de ayuda y asesoramiento. El principio de diversidad de usuarios ajustandose a los diferentes tipos de usuarios del sistema.

La perspectiva desde la que se elaboran estos principios es el llamado Diseño Centrado en el Usuario (UCD). La base de todo el proceso es cómo la gente usará el producto; se centra en el usuario a través de las diferentes fases. En la siguiente figura se ilustra el proceso de diseño general de la UI (user interface)

el_proceso_de_diseño_de_la_UI.jpg

También es recomendable tener muy presente otras características para diseñar una interfaz profesionalmente adecuada:

Color
Equilibrio
Intuición
Claridad

Una decisión importante a tener en cuenta es el color. Muchas personas no le prestan la menor atención, pero el diseñador debe tener cuidado con él.
Al hablar de color hay que distinguir entre el color como fenómeno físico, donde intervienen la luz y la visión, y el color como fenómenos sensorial, que es el que nos ocupa.

Como fenómeno que percibimos a través de los sentidos, el color está sometido a criterios de análisis subjetivos. Depende de las preferencias personales, la relación que mantenga con otros colores dentro del campo visual, el estado de ánimo, etc.

A grandes rasgos podemos distinguir entre colores fríos y cálidos. Los primeros son los violetas, azules y verdes y dan la impresión de frescor, tristeza, reducción del espacio… Los segundos son los amarillos, naranjas, rojos, etc., que producen una sensación de alegría y de amplitud del espacio. Por ejemplo: un botón amarillo sobre fondo azul se ve como si fluyera hacia fuera tomando así el primer plano para el espectador.

El color en la Web se convierte en una herramienta de comunicación, además de llamar la atención: por un lado transmiten información, y por otro, establecen el tono del sitio. Una mala elección del color puede conllevar una errónea interpretación del significado. Por este motivo hay que tener en cuenta el factor cultural y climático de algunos países porque afectará a la percepción que se pueda tener de los mismo. Estas son algunas de las asociaciones más básicas por colores individuales:

– Blanco: inocencia, limpieza, bueno
– Negro: miedo, muerte, malo, oscuridad
– Marrón: sucio, tierra
– Amarillo: precaución, agobio
– Rojo: pasión, prohibido, calor
– Verde: naturaleza, campo, tranquilidad
– Azul: frío, tristeza, relajación

Otra de las opciones que tienen que ver con el color es retocar una de sus cualidades: el contraste. Variando esta propiedad se puede crear un patrón jerárquico que el usuario identifique a simple vista.

El objetivo del color en el sitio web, como el de otros elementos, es garantizar la mayor usabilidad del mismo. Por esta razón debe de adecuarse a la finalidad que persiga el diseñador.
Como las páginas Web pueden incluir texto, botones, iconos, fotografía, etc. , es necesario organizarla de forma eficaz y diseñarla de modo que quede equilibrada.

El equilibrio hace referencia, al igual que ocurre en composición fotográfica, a la distribución del peso óptico en la disposición, es decir, a un correcto reparto de los elementos de la composición. El peso óptico es la capacidad de un elemento de atraer la mirada del usuario. Este viene determinado por el color, el aspecto o el tamaño del elemento.

El equilibrio puede ser simétrico o asimétrico, aunque también puede no disponer de tal característica. Es simétrico cuando lo elementos se organizan horizontal o verticalmente a ambos lados de una línea central. Esto causa una sensación de rigor, fuerza y equilibrio. Un ejemplo:

Una composición asimétrica no presenta esta estructura regular, pero sí está ordenada por el juego de volúmenes, colores, etc., y el conjunto queda equilibrado en el formato. Este tipo de diseño es dinámico e informal. Utilizado sobre todo para sitios lúdicos o de entretenimiento.

En el diseño sin equilibrio hay elementos organizado en la página, pero sin tener en cuenta su peso visual.
Según el diccionario de la RAE, ‘intuición’ es la “percepción clara e inmediata de una idea o situación, sin necesidad de razonamiento lógico” y, por tanto, cuando decimos que una interfaz es intuitiva hacemos referencia a su capacidad para que un nuevo usuario consiga de un simple vistazo entender su estructura, captar sus contenidos e interactuar con ella con casi la misma familiaridad que si ya la conociera de antes. Lograr que la interfaz diseñada sea intuitiva a la vez que novedosa y creativa es un reto que, en muchas ocasiones, obliga a sacrificar en alguna medida una u otra característica.

Daniel Mordecki, profesor universitario y director de Concreta -empresa uruguaya especializada en la usabilidad y estrategia en internet- apunta algunas indicaciones que es conveniente tener presentes en la búsqueda de un diseño intuitivo para la interfaz. Partiendo de la base de que toda interacción de un usuario con un sitio web se desarrolla simultáneamente (y de manera inconsciente) en los niveles de ‘mirar’, ‘leer’ y ‘pensar’, en Concreta han desarrollado un modelo denominado, precisamente, “Miro, Leo, Pienso” que se divide en varios niveles de interacción de menor a mayor complejidad.

En esta imagen intuimos fácilmente que los objetos están relacionados dos a dos
El más básico sería el nivel de “Miro y entiendo” que supone un escaso esfuerzo por parte del usuario de la web. De un solo vistazo, y en base a la experiencia de navegación acumulada, la interfaz debe poder trasmitir su estructura casi de manera inconsciente. Por ejemplo, en la imagen de la derecha se intuye fácilmente que los cuadrados están relacionados de dos en dos.
Si el diseño tuvo en cuenta este nivel, entonces “la agrupación visual, los efectos cromáticos, los espacios, la ubicación, los tamaños, entre otros elementos, permiten al visitante comprender múltiples aspectos de la página que ve sin esfuerzo alguno y de forma prácticamente inmediata, aumentando enormemente la facilidad de uso” (Mordecki: “Interfaces e Intuición”, nº 1 revista Faz 2007).

El segundo nivel requiere más esfuerzo y Mordecki lo denomina “Leo y entiendo”. Aquí el usuario debe leer los textos y etiquetas y, si responde a un buen diseño, ese texto debería ser suficientemente autoexplicativo para no requerir ninguna información complementaria acerca de su uso o utilidad: “Es muy importante NO asumir que los visitantes tienen más conocimientos o background que los que realmente tienen, en particular con respecto al propio sitio” (Mordecki, op.cit.). “Pienso y entiendo” sería el nivel superior al que solo se debería acudir si el contenido que se ofrece y para el que se requiere ese esfuerzo complementario, al final debe merecer la pena al usuario ya que, en caso contrario, se puede sentir defraudado. Según Mordecki: “Si estoy dentro del público objetivo, se supone que cualquier contenido publicado por un sitio debiera ser para mí comprensible en el nivel ‘Pienso y entiendo’.
Además de poseer un diseño equilibrado e intuitivo, una interfaz debe tener un diseño claro, ya que debe evitar la ambigüedad y dejar lo suficientemente claro los distintos elementos a través del lenguaje, la jerarquía y las metáforas para los elementos visuales. También debe ser concisa, ya que a veces se crea una interfaz con demasiadas etiquetas y especificaciones, sobrecargándola de manera que el usuario no encuentra fácilmente aquello que busca, así como familiar, con elementos que le resulten conocidos al usuario, empleando, por ejemplo, metáforas de la vida real.
Debe tener capacidad de respuesta, ser veloz y no hacer esperar al usuario además de proporcionar un buen feedback al usuario, y ser consistente para permitir al usuario reconocer determinados patrones de uso y así evitar confusiones.
Sin ser un objetivo principal, una interfaz debe tener un diseño estético, ya que eso ayudará a que la experiencia de los usuarios sea más positiva, pero también debe ser eficiente y permitir realizar un mayor número de tareas en menos tiempo y gestionar los errores de manera que sea posible deshacer acciones o poder recuperar archivos borrados.

Crear una interfaz con todas estas características es complicado, pero Alfred Astort, diseñador de interfaces de Microsoft, afirma en una entrevista a infonomía.com que “el siguiente paso deben ser los interfaces que podríamos llamar fluidos, donde podremos movernos de una aplicación a otra sin darnos cuenta; el escritorio tampoco será como lo conocemos ahora, será un espacio sin límite donde accederemos a la información «zambulléndonos» en ella. No más carpetas con ficheros dentro, el ordenador deberá superar estos anacronismos del pasado y crear un lenguaje visual propio.”