Principios de diseño de interfaz de usuario

En este artículo vamos a ver cuales son los principios a seguir para el buen diseño de interfaces de usuario. Seguro que hay muchos más principios pero os dejamos esta pequeña guía que os servirá de mucha ayuda en vuestro proceso de diseño.

"Diseñar es mucho más que construir, ordenar o incluso editar, es agregar valor y significado, iluminar, simplificar, aclarar, modificar, dignificar, dramatizar, persuadir, incluso divertirse".

Paul Rand

 

1. La claridad es el trabajo

La claridad es el trabajo primero y más importante de cualquier interfaz. Para ser eficaz con una interfaz que ha diseñado, la gente debe ser capaz de reconocer lo que es, se preocupan por la razón por la que lo utilizan, entender lo que la interfaz está ayudando a interactuar con, predecir lo que sucederá cuando lo utilizan, y luego interactuar con éxito con él. Si bien hay espacio para el misterio y la gratificación retrasada en las interfaces, no hay lugar para la confusión. La claridad inspira confianza y conduce a un uso posterior. Cien pantallas claras es preferible a un solo desorden.

2. Interfaces existen para permitir la interacción

Interfaces existen para permitir la interacción entre los seres humanos y nuestro mundo. Pueden ayudar a aclarar, iluminar, habilitar, mostrar relaciones, reunirnos, separarnos, manejar nuestras expectativas y darnos acceso a servicios. El acto de diseñar interfaces no es el arte. Las interfaces no son piezas creativas en sí mismas. Las interfaces hacen un trabajo y su eficacia puede ser medida. Sin embargo, no son sólo funcionales. Las mejores interfaces pueden inspirar, evocar, mitigar e intensificar nuestra relación con el mundo.

3. Conserve la atención a toda costa

Vivimos en un mundo de interrupciones. Es difícil leer tranquilamente y en paz sin distraernos y dirigir nuestra atención a un solo punto. La atención es una prioridad. Como por el caso de ella publicidad que no debería ensuciar los espacios laterales de las aplicaciones con material que distraiga… hay que recordar el porqué de existencia de esta pantalla en primer lugar. Si alguien está leyendo, hay que dejarlos terminar de leer antes de mostrar un anuncio. De esta manera la atención cumplirá su misión y no sólo sus lectores estarán más felices, sino que los resultados serán óptimos. La usabilidad o el uso debe ser el objetivo principal, la atención se convierte en el requisito previo. Así que hay que conservarla a toda costa.

4. Mantener a los usuarios bajo control

Los seres humanos se encuentran más cómodos de sí mismos y de su entorno cuando se sienten bajo control. El software con un diseño que no está bien definido resta esa comodidad forzando a los usuario a interacciones no planeadas, rutas confusas y resultados sorprendentes. Hay que mantenga a los usuarios bajo control mediante la aparición periódica del estado del sistema, describiendo la causalidad (si usted hace esto que va a suceder) y dando una idea de lo que debe esperar en cada vuelta. No hay que preocuparse por decir lo obvio ... lo obvio casi nunca lo es para una mayoría.

5. La manipulación directa es la mejor

No existe la mejor interfaz en absoluto, cuando cada uno de nosotros somos capaces de manipular directamente los objetos físicos en nuestro entorno. Como esto no siempre es posible, y los objetos son cada vez más complejos, creamos interfaces para ayudarnos a interactuar con ellos. Es fácil caer en el error de agregar más capas de lo necesario a una interfaz, crear botones excesivamente forjados, cromados, gráficos, opciones, preferencias, ventanas, archivos adjuntos y otros elementos para que acabemos manipulando elementos de interfaz de usuario en lugar de lo que es importante. En su lugar, esforzarse por diseñar una interfaz con la menor huella posible, del objetivo original de la manipulación, reconociendo los gestos humanos tanto como sea posible. Idealmente, el diseño de la interfaz debe ser tan leve que el usuario debe tener la sensación de una manipulación directa con el objeto, sin intermediarios.

6. Una acción primaria por pantalla

Cada pantalla que diseñemos debe soportar una sola acción de valor real para la persona que la usa. Esto hará que sea más fácil de aprender, más fácil de usar y más fácil de agregar o construir cuando sea necesario. Las pantallas que soportan dos o más acciones primarias se vuelven rápidamente confusas. Al igual que un artículo escrito debe tener una única y fuerte tesis, cada pantalla que diseñamos debe apoyar una única y fuerte acción que será su razón de ser.

7. Mantener las acciones secundarias secundarias

Las pantallas con una sola acción primaria pueden tener múltiples acciones secundarias pero deben mantenerse secundarias. La razón de la existencia de un artículo no es para que la gente pueda compartirlo en Twitter… se realizó para que la gente lo lea y lo entienda, y luego si lo desea lo comparta. Mantener las acciones secundarias secundarias haciéndolas más livianas visualmente o mostradas después de que se haya logrado la acción primaria.

8. Proporcionar un paso siguiente natural

Muy pocas interacciones están destinadas a ser la última, así que hay que diseñar cuidadosamente el próximo paso para cada interacción que una persona tiene que realizar con su interfaz. Anticipar y diseñar para apoyarla, lo que la próxima interacción debería ser y/o suceder. Así como hacemos en la conversación entre dos personas, proporcionar una apertura para una mayor interacción. Y no dejar a una persona colgada cuando han hecho lo que nosotros deseábamos que hicieran … hay que darles el siguiente paso de manera natural que les ayude a alcanzar e ir más lejos en sus metas.

9. La apariencia sigue el comportamiento

Los usuarios estamos más cómodos con las cosas que se comportan de la manera que esperamos. Otras personas, animales, objetos, software. Cuando alguien o algo se comporta de manera consistente con nuestras expectativas, sentimos que tenemos una buena relación con ella. Para ello, los elementos diseñados deben parecerse a cómo se comportan. La forma sigue a la función. En la práctica esto significa que alguien debería ser capaz de predecir cómo un elemento de interfaz se comportará simplemente mirándolo. Si parece un botón debe actuar como un botón. No se debe innovar con los conceptos básicos de la interacción ... mantener la creatividad para las preocupaciones de orden superior.

10. Asuntos de consistencia

Siguiendo el principio anterior, los elementos de pantalla no deben aparecer coherentes entre sí a menos que se comporten consistentemente entre sí. Los elementos que se comportan de la misma deben ser iguales. Pero es tan importante que aparezcan elementos distintos a los que no son coherentes, ya que son similares. En un esfuerzo por ser coherente, los diseñadores principiantes a menudo confunden estas las diferencias importantes usando el mismo tratamiento visual (a menudo para volver a usar el código) cuando solo es necesario un tratamiento visual diferente.

11. Las jerarquías visuales fuertes funcionan mejor

Una jerarquía visual fuerte se logra cuando hay un orden de visualización claro a los elementos visuales en una pantalla. Es decir, cuando los usuarios visualizan los mismos elementos en el mismo orden cada vez. Las jerarquías visuales débiles no dan poca pistas sobre dónde descansar la mirada y terminan por percibirse como desorden y confusión. En entornos donde hay grandes cambios es difícil mantener una jerarquía visual fuerte porque el peso visual es relativo: cuando todo es audaz, nada es audaz. Si se agrega un solo elemento visualmente pesado a una pantalla, es posible que el diseñador necesite restablecer el peso visual de todos y cada uno de los elementos para lograr de nuevo una jerarquía fuerte. La mayoría de las personas no se dan cuenta de la jerarquía visual, pero es una de las maneras más fáciles de fortalecer (o debilitar) un diseño.

12. Organización inteligente reduce la carga cognitiva

Como dice John Maeda en su libro “Las leyes de la Simplicidad” una organización inteligente de los elementos de pantalla puede hacer que los muchos aparezcan como los pocos.Esto ayudará a los usuarios a entender nuestra interfaz más fácil y más rápidamente, ya que se ha ilustrado las relaciones inherentes de contenido en su diseño. Agrupar como elementos, mostrar las relaciones naturales por la colocación y la orientación. Mediante una organización inteligente de su contenido que hará que tenga menos carga cognitiva en el usuario ... que no tiene que pensar en cómo los elementos están relacionados porque lo has hecho a conciencia para ellos. No hay que forzar al usuario a averiguar las cosas … hay que mostrarlas diseñando esas relaciones en sus pantallas.

13. Resaltar, no determinar, con el color

El color de las cosas físicas cambia a medida que la luz cambia. A plena luz del día vemos un árbol muy diferente del que se esboza contra una puesta de sol. Al igual que en el mundo físico, donde el color es muy subjetivo, el color no debe determinar mucho en una interfaz. Puede ayudar, ser utilizado para destacar, ser utilizado para guiar la atención, pero no debe ser el único diferenciador de las cosas. Para largas horas de lectura o de pantalla extendida, se debe utilizar colores de fondo claros o neutros, ahorrando tonos más brillantes. Por supuesto, hay un tiempo para colores de fondo vibrantes, así, sólo hay que asegurarse de que es apropiado para su audiencia.

14. Divulgación progresiva

Mostrar sólo lo que es necesario en cada pantalla. Si los usuarios están haciendo una elección, se debe mostrar suficiente información para permitirles la elección, luego se entrará en detalles en una pantalla posterior. Hay que evitar la tendencia a sobre-explicar o mostrar todo a la vez. Cuando sea posible, aplazar las decisiones a las pantallas subsiguientes divulgando progresivamente la información según sea necesario. Esto mantendrá nuestras interacciones más claras.

15. Ayuda a las personas en línea.

En interfaces ideales, la ayuda no es necesaria porque la interfaz es aprendible y utilizable. El paso por debajo de esto, en la realidad, es proporcionar la ayuda es en línea y contextual, disponible sólo cuando y donde se necesita, oculta de la vista en todos los otros tiempos. Solicitar. Los usuario que vayan a la ayuda para encontrar una respuesta a su pregunta pone la responsabilidad en ellos para saber lo que necesitan. En lugar de colocar la ayuda donde se necesita … si este es su caso, al menos, debemos asegurarnos de que estará fuera del camino de las personas que ya saben cómo utilizar nuestra interfaz.

16. Un momento crucial: el estado cero

La primera experiencia con una interfaz es crucial, pero a menudo es pasada por alto por los diseñadores. Con el fin de ayudar mejorar a nuestros usuarios a ponerse al día con nuestros diseños, lo mejor es diseñar para el estado cero, el estado en el que nada ha ocurrido todavía. Este estado no debe ser un lienzo en blanco ... debe proporcionar dirección y orientación para estar al día. Gran parte de la fricción de la interacción es en ese contexto inicial ... una vez que los usuarios entienden las reglas se tienen una probabilidad mucho mayor de éxito.

17. El gran diseño es invisible

Una curiosa propiedad de un gran diseño es que por lo general pasa desapercibido por las personas que lo utilizan. Una razón para esto es que si el diseño es exitoso el usuario puede centrarse en sus propios objetivos y no en la interfaz … y cuando completan su objetivo están satisfechos y no necesitan reflexionar sobre la situación. Como diseñador esto puede ser difícil ... ya que recibimos menos adulación cuando nuestros diseños son buenos. Pero los grandes diseñadores se contentan con un diseño bien utilizado ... y saben que los usuarios felices son a menudo silenciosos.

18. Construir en otras disciplinas de diseño

Diseño visual y gráfico, tipografía, copywriting, arquitectura de información y visualización ... todas estas disciplinas forman parte del diseño de interfaces. Pueden ser tocadas o especializadas. Hay que agarrar de ellas los aspectos que nos ayuden a hacer nuestro trabajo. Aprovechar las ideas de las disciplinas que aparentemente no están relacionadas ... ¿qué podemos aprender de la publicación, la escritura de código, encuadernación, skate, firefighting, karate?

19. Interfaces disponibles para ser usadas

Como en la mayoría de las disciplinas de diseño, el diseño de la interfaz es exitoso cuando las personas usan lo que se ha diseñado. Si ocurre como en el caso del diseño hermoso de una silla pero que es incómoda para sentarse, entonces el diseño ha fallado y la gente elige no utilizarla. Por lo tanto, el diseño de la interfaz es lo mismo para la creación de un entorno y para su uso al igual que la creación de un artefacto que vale la pena usar. No basta con que una interfaz satisfaga el ego del diseñador: ¡Debe usarse!