Impulse su UX con estos principios de diseño de interacción exitosos

Hay una línea muy fina entre una interacción que funciona y una que no se puede usar. Los principios de diseño de interacción ayudan a cerrar la brecha.

El diseño de interacción bien ejecutado juega un papel muy importante en la implementación de una gran UX y es, sin duda, uno de los fundamentos de los principios de diseño de UX.

"Inutilizable" significa "Estoy avanzando", y no importa cuán "atractivo" sea el diseño visual, cuán elegante sea la animación, estropee el diseño de interacción y su UX es kaput. Hágalo bien y estará bien encaminado hacia una UX mucho mejor, incluso si la estética se queda corta. El producto tendrá muchas más posibilidades de éxito, lo que a su vez contribuye al resultado final.

El diseño de interacción (IxD) es definido por la Asociación de Diseño de Interacción (IxDA) como “la estructura y el comportamiento de los sistemas interactivos. Los diseñadores de interacción se esfuerzan por crear relaciones significativas entre las personas y los productos y servicios que utilizan, desde computadoras hasta dispositivos móviles, electrodomésticos y más”.

La experiencia es crítica, ya que determina cuán cariñosamente las personas recuerdan sus interacciones. —Don Norman en El diseño de las cosas cotidianas.

Seguir los principios del diseño de interacción contribuye enormemente a un gran diseño de interacción, que a su vez contribuirá a la experiencia.

Es posible que todos los dispositivos y la tecnología de hoy puedan ser reemplazados por algo completamente diferente de la noche a la mañana, sin embargo, debido a sus principios duraderos, aún se podría lograr un gran diseño de interacción. Esos principios constantes se refieren a lo que motiva a las personas, su comportamiento y cómo piensan.

Imagínese si cada manija de cada puerta funcionara de manera diferente. Para uno, primero tendría que empujar la puerta y luego hacia abajo; para otro tendrías que tirar hacia arriba en lugar de presionar hacia abajo, y otro más tendrías que tirar hacia arriba dos veces y luego hacia abajo, un desastre total. De hecho, la frase "girar la manija de la puerta" asume que solo hay una forma de hacerlo.

A nadie le gusta que lo golpeen en la cabeza con gritos de "siga las reglas", pero el diseño de interacción realmente excelente se basa en un conjunto de estándares, mejores prácticas, convenciones y reglas generales (heurística). No es una ciencia blanda, pero forman la base de IxD y hacen posible la interacción con la menor cantidad de fricción. Los estándares de interfaz no sofocan la creatividad: no son reglas estrictas y rápidas, sino pautas fundamentales que ayudan a un diseñador a establecer una base de "diseño útil y familiar" a partir de la cual innovar.

Principios de diseño de interacción y mejores prácticas

El diseño de interacción cae dentro de la disciplina de Interacción humano-computadora (HCI), "Un campo de estudio multidisciplinario que se enfoca en el diseño de tecnología informática y, en particular, la interacción entre humanos (los usuarios) y computadoras". Fundación Diseño.

El gran diseño de la interfaz de usuario logra el deleite del usuario al combinar los principios básicos del diseño de la interfaz de usuario con el diseño de interacción orientado a objetivos.

• El diseño de interacción exitoso emplea objetivos simples y claramente definidos, un propósito sólido y una interfaz de usuario intuitiva.
• En un esfuerzo por mantener las interacciones simples y fáciles, el diseño de interacción basado en objetivos no pone nada más que el mínimo absoluto necesario frente a los usuarios para que puedan completar una tarea.

Profundicemos en algunos de los principios más importantes (no es una lista exhaustiva de ninguna manera):

Visibilidad

Básicamente, si el usuario no puede encontrarlo, no existe. Debe quedar claro como una campana qué acciones son posibles en una interfaz de usuario en menos de un microsegundo, por ejemplo, etiquetar íconos como una mejor práctica. Los íconos sin etiqueta equivalen a lanzar obstáculos en el camino de un usuario porque tendrán que detenerse para descifrar el significado. Estás interrumpiendo el "flujo". Y aquí hay una sorpresa... No están interesados ​​en aprender su interfaz de usuario.

Significantes

Muy ligado a la capacidad de descubrimiento, el uso eficaz de los significantes garantiza que las prestaciones, la posibilidad de una acción en un objeto, estén claramente indicadas en la interfaz de usuario. Los significantes proporcionan pistas fuertes como señales o postes indicadores. Indicando una interacción disponible, parpadean luces verdes al usuario que grita: "¡Aquí estoy, puedes tocarme (hacer clic, deslizar, etc.)!" Puede existir una posibilidad en la interfaz de usuario, pero puede permanecer oculta porque si carece de un significante, permanece invisible. Un ejemplo podría ser una "interacción gestual oculta" que no se revela a menos que el usuario deslice accidentalmente hacia la izquierda o hacia la derecha (para eliminar algo, por ejemplo).

Las prestaciones definen qué acciones son posibles. Los significantes especifican cómo la gente descubre esas posibilidades: los significantes son signos, señales perceptibles de lo que se puede hacer. Los significantes son mucho más importantes para los diseñadores que las posibilidades. —Don Norman (Norman, 2013)

Realimentación

Después de los significantes, la siguiente comunicación más importante para el usuario es la retroalimentación. Retroalimentación significa: información explícita sobre el impacto de la acción . También significa una visibilidad constante del estado del sistema, es decir, el sistema debe asegurarse de que:

• Los usuarios se mantienen informados sobre lo que está pasando.
• Hay información continua sobre los resultados de sus acciones y el estado actual del producto (sistema).
• No hay confusión en la mente de un usuario en cuanto al estado del producto, es decir, procesamiento, carga, búsqueda, carga, etc., o algún otro cambio de estado.
• Después de ejecutar una acción, es fácil determinar el nuevo estado.

Modelos Conceptuales y Modelos Mentales

El gran diseño de interacción presenta toda la información que un usuario necesita para crear un buen modelo conceptual del sistema, lo que conduce a su comprensión y una sensación de control. Un modelo conceptual mejora tanto la capacidad de descubrimiento como la evaluación de los resultados cuando se usa el sistema.

Los modelos mentales, o mapas cognitivos, son las imágenes en la mente de un usuario que informan sus expectativas de una determinada interacción y cómo funciona algo en el mundo real. Los mapas cognitivos son representaciones internas de nuestro entorno físico, particularmente asociadas con las relaciones espaciales. Mediante el uso efectivo del modelo mental del usuario, los diseñadores de interacción pueden crear sistemas que se “sienten” intuitivos.

El diseñador inventa un modelo conceptual, el modelo de diseño, y así es como el diseñador pretende que funcione el dispositivo o el software. La única forma de comunicar este modelo a los usuarios es implementarlo a través de una interfaz de usuario. Luego, los usuarios interactúan con el modelo conceptual y crean su propio modelo mental de cómo funciona algo.

Los diseñadores no pueden decirles a los usuarios cómo pretendían que funcionara una aplicación; necesitan diseñar una interfaz de usuario de manera adecuada para comunicar claramente su propósito. En otras palabras, hacer que la interfaz sea fácil de entender y usar. Un mal diseño de interacción corre el riesgo de crear un modelo mental equivocado para el usuario. Esto lleva a la confusión y al error del usuario porque están tratando de operar la aplicación de una manera que el diseñador no pretendía.

Asignaciones

El mapeo es la relación entre los controles y su efecto en el mundo. El principio de retroalimentación es un primo cercano del mapeo porque los dos principios trabajan juntos para crear una experiencia perfecta. Casi todos los artefactos necesitan algún tipo de asignación entre controles y efectos; en el caso del diseño de interfaz, es la relación entre un control y su función resultante.

El mapeo natural, aprovechando las analogías físicas y los estándares culturales, conduce a una comprensión inmediata. Por ejemplo, un diseñador puede usar la analogía espacial en la interfaz de usuario:

• Para aumentar algún valor con un componente de control deslizante, deslice un control deslizante hacia la derecha,
• Para disminuirlo, desliza el dedo hacia la izquierda.

Algunos mapeos naturales son biológicos, como en el estándar universal de que un nivel ascendente representa más, un nivel descendente, menos.

Restricciones

El concepto de diseño de restricciones es una forma de determinar cómo restringir el tipo de interacción del usuario que puede tener lugar en un momento dado. Las restricciones de diseño de interacción ayudan a una interacción eficiente al proporcionar "rieles de guía" para los usuarios, casi como una mano que guía las interacciones que pueden ocurrir.

Las restricciones en el diseño aseguran que solo ciertas cosas estén habilitadas, o incluso visibles, para guiar al usuario hacia ciertas interacciones. Considera el tamaño, la escala, la proporción, el énfasis y el estado, y cómo estos, trabajando juntos en armonía, ayudan a crear jerarquía y, en consecuencia, influyen en el usuario. Las restricciones establecidas correctamente también ayudan a reducir la posibilidad de error del usuario.

Lo opuesto a la restricción es cuando se ofrecen todas las opciones al usuario, lo que dificulta que decidan qué hacer a continuación. Es el principio de elección . Cuantas más opciones, más difícil es elegir cualquiera de ellas: nos sentimos abrumados por todas las posibilidades.

El gran diseño de interacción no pone todas las opciones disponibles en la interfaz, sino que las restringe a lo que es más importante en un momento dado.

Coherencia, estándares y heurística

Todos estos están relacionados: hermanos de patrones (abajo), por así decirlo. Para evitar errores de usuario y hacer que una aplicación sea fácil de aprender, es esencial que un modelo de interacción sea consistente. La consistencia mejora la UX, la usabilidad general y la eficiencia con la que los usuarios pueden usar los productos digitales.

La consistencia significa usar elementos similares para lograr tareas similares y tener funciones y comportamientos similares en todo momento: una interfaz consistente es aquella que sigue reglas, como usar la misma operación para hacer algo.

Los productos que se esfuerzan por ser altamente utilizables siguen convenciones, estándares, mejores prácticas y heurísticas de usabilidad bien establecidas (reglas generales generales, no pautas de usabilidad específicas).

La conformidad con una convención , por ejemplo, puede estar en la forma en que se presenta una página. Los usuarios de la web pasan el 69% de su tiempo viendo la mitad izquierda de la página y el 30% viendo la mitad derecha. Por lo tanto, es más probable que un sitio sea rentable si sigue un diseño convencional.

Un estándar podría ser un rastro de migas de pan (un dispositivo de orientación y navegación que se reconoce inmediatamente) o un menú de navegación global en la parte superior de la página como en el sitio de BCC.

Patrones y capacidad de aprendizaje

¿Con qué facilidad puede un nuevo usuario aprender a navegar por una interfaz? Nadie quiere aprender una nueva forma de hacer las cosas a menos que brinde un beneficio significativo sobre lo que vino antes; sin embargo, estamos constantemente inundados de interacciones no convencionales y no probadas.

Los componentes o patrones comunes proporcionan una capacidad de aprendizaje instantánea. Una vez que haya aprendido a usar una cuchara, siempre sabrá cómo usar una cuchara. Lo mismo ocurre con andar en bicicleta, patinar... la misma construcción se aplica a los componentes de la interfaz de usuario que usamos todos los días: botones, campos de texto, menús desplegables, casillas de verificación, botones de radio, botones giratorios, controles deslizantes, íconos, acordeones, cuadros de búsqueda, etc.

Los mejores diseños de interacción no tratan de reinventar la rueda, sino que hacen un uso eficiente y eficaz de los patrones de una forma nueva.

Los patrones no solo fomentan la capacidad de aprendizaje, sino que también brindan consistencia (otro principio, discutido anteriormente) y lo alinean con las expectativas del usuario sobre cómo deberían funcionar las cosas.

Jerarquía visual y énfasis

Durante su interacción con un sitio o una aplicación, las personas buscan la información más relevante para su búsqueda. La jerarquía visual se refiere a la disposición de los elementos de una manera que implica importancia. La jerarquía visual en el diseño influye en el orden en que el ojo humano percibe lo que ve. No todo tiene el mismo “peso”; el orden se crea mediante el contraste visual entre objetos en un campo de percepción. El contraste visual (énfasis) se puede lograr mediante el tamaño, la proximidad, el color, la opacidad y el contraste tonal real entre los elementos.

No subestimes el poder de la jerarquía visual. Se ha utilizado con mucha eficacia en todo tipo de diseño durante eones, en arquitectura y diseño industrial, así como en diseño de impresión. Echa un vistazo a algunos grandes diseños de carteles. Usando bien esta técnica en el diseño de interacción, las cosas correctas parecen aparecer en el momento correcto de la manera correcta.

Los grandes diseñadores de interacción usan el poder del énfasis para lograr con éxito diseños de interfaz "delgados y sencillos" que parecen funcionar como magia.

Ley de Fitts

Lo crea o no, esta ley proviene de los primeros estudios que analizan el movimiento de los músculos humanos y la orientación del operador de telégrafo y el desempeño de las tareas de la línea de producción, y luego se adaptó a HCI (interacción humano-computadora). Básicamente dice: "El tiempo para adquirir un objetivo es una función de la distancia y el tamaño del objetivo".

En términos más simples, se trata de qué tan lejos y qué tan grande es un objetivo, y qué tan cerca está en relación con otros objetivos. Los movimientos de mouse o toques más cortos son mejores: siempre es más rápido hacer clic o deslizar un objetivo si está más cerca de su posición inicial. Las tareas relacionadas también deben estar muy cerca unas de otras para que los usuarios no tengan que moverse rápidamente por la pantalla interactuando con la interfaz de usuario.

La ley de Fitt puede predecir con precisión la cantidad de tiempo que lleva moverse y seleccionar un objetivo. Un objetivo puede ser un botón, un menú desplegable o algún otro elemento interactivo en una pantalla. Si está demasiado lejos, demasiado pequeño o si los elementos en los que se puede hacer clic están demasiado juntos, la eficiencia y la facilidad de uso de la interfaz de usuario se reducen considerablemente.

Diagrama de Gutenberg, diseños de patrón Z y F

Estos patrones son aplicables en diferentes situaciones según el contenido, y son mayoritariamente utilizados por audiencias occidentales. El diagrama de Gutenberg describe un patrón general por el que se mueven los ojos cuando miran información homogénea distribuida uniformemente, en su mayoría sitios con mucho texto, como blogs o sitios de noticias. El diagrama de Gutenberg sugiere que las áreas de barbecho fuertes y débiles quedan fuera de la trayectoria de lectura de la gravedad y reciben una atención mínima a menos que se destaquen visualmente de alguna manera.

El patrón Z sigue la forma de la letra Z. En ciertos casos, este patrón también se conoce como patrón Zig-Zag. La principal diferencia con el diagrama de Gutenberg es que el patrón Z sugiere que los espectadores pasarán por las dos áreas en barbecho. De lo contrario, todavía comienzan y terminan en los mismos lugares, y aún pasan por el medio. Al igual que con Gutenberg, un diseñador colocaría la información más importante a lo largo del camino del patrón Z.

F es rápido y se refiere a cómo los usuarios leen el contenido. El patrón F fue popularizado por un estudio de seguimiento ocular de NNGroup que registró a más de 200 usuarios leyendo contenido en la web. Descubrió que los patrones de escaneo de las personas eran bastante consistentes en muchos tipos diferentes de sitios.

¿Porque es esto importante? En un sitio de comercio electrónico, por ejemplo, para maximizar el escaneo, es posible que desee organizar el contenido más importante de manera que siga el patrón F.

Reconocimiento en lugar de recuerdo

El reconocimiento se refiere a nuestra capacidad de "reconocer" un evento o información como familiar, mientras que el recuerdo es mucho más una "carga cognitiva" que implica extraer detalles relacionados de la memoria. Mostrar a los usuarios cosas que pueden reconocer mejora la usabilidad sobre la necesidad de recuperar elementos desde cero.

Por ejemplo, el uso de íconos en una interfaz de usuario es poderoso porque permite el reconocimiento instantáneo de un símbolo. Nuestro cerebro procesa (reconoce) los símbolos unas 1000 veces más rápido que leer un texto. Si un diseñador muestra un ícono de señal de advertencia estándar en un cuadro de diálogo, inmediatamente hace que el usuario se concentre y preste atención porque la siguiente acción puede ser destructiva. Pero si un ícono está diseñado de tal manera que obliga a los usuarios a recordar y descifrar el significado, por ejemplo, una mano levantada en lugar del ícono de advertencia, disminuye la eficiencia y la facilidad de uso de la interfaz de usuario.

Diseño Estético y Minimalista

Tienes que entender profundamente la esencia de un producto para poder deshacerte de las partes que no son esenciales. —Jonathan Ive.

Este es uno de los principios más desafiantes porque es difícil. La tendencia es que los diseñadores y gerentes de productos agreguen todas las opciones disponibles bajo el sol y dejen que el usuario decida el camino que desea tomar. Ese es realmente el enfoque perezoso y conduce a productos llenos de desorden no esencial.

Las interfaces deben eliminarse de los elementos y contenidos innecesarios que no son compatibles con los objetivos y tareas del usuario. Los diseñadores no solo deben diseñar interfaces de usuario estéticamente agradables, sino también priorizar la información de pantalla a pantalla en el flujo de usuarios. Usando la jerarquía visual y la magia del énfasis, solo se debe presentar el mínimo esencial y absoluto de información necesaria para que el usuario complete una tarea.

Miguel Ángel dijo de su obra: “Vi el ángel en el mármol y tallé hasta que lo liberé”.

Diseñar una interacción que sea minimalista, estéticamente agradable y simple requiere que el diseñador comprenda lo que sucede precisamente en el momento en que las personas usarán el producto y deshacerse de todo lo que no es necesario. Realizar una investigación y pruebas profundas de los usuarios para comprender cómo los usuarios usarán el producto suele ser el mejor enfoque.

Prevención de errores

Los usuarios a menudo se distraen cuando realizan una tarea, por lo que es clave evitar errores inconscientes mediante el énfasis visual, ofrecer sugerencias y el uso de restricciones cuidadosamente diseñadas. Una forma de prueba de errores, también conocida como Poka-Yoke, se refiere a la implementación de mecanismos a prueba de fallas para evitar que un proceso produzca errores.

Una de las mejores formas de prevenir errores es diseñar un mejor modelo mental. Muchos errores de los usuarios ocurren cuando el modelo del diseñador y la interpretación de cómo debería funcionar el sistema no coincide con el modelo mental del usuario.

Las convenciones de diseño estándar ayudan (uno de los principios mencionados anteriormente) porque ayudan a los usuarios a comprender qué acciones pueden tomar. Los usuarios que interactúan con su sitio web o aplicación han utilizado miles de otros sitios y aplicaciones, y esperan que los elementos interactivos comunes se vean y funcionen de cierta manera. Pueden surgir situaciones propensas a errores cuando su producto se desvía de esas convenciones.

Avisar antes de cometer errores y confirmar antes de acciones destructivas. Incluso mejor que los mensajes de error bien implementados es un diseño cuidadoso que evita que ocurra un problema en primer lugar. Trate de eliminar las circunstancias propensas a errores y siga revisándolas.

El futuro del diseño de interacción

Los nuevos dispositivos, entornos e interfaces seguirán avanzando con nuevas posibilidades de interacción. Los controladores de videojuegos están en constante evolución y brindan una amplia gama de controles de entrada, así como retroalimentación háptica. Las interfaces gestuales madurarán desde pantallas táctiles que admiten gestos 2D y 3D, por ejemplo, gestos en dispositivos iOS y Android, hasta el uso de gestos manuales en espacios 3D para interactuar con espacios de realidad virtual, consolas de juegos y dispositivos IoT que nos permiten controlar nuestro entorno. .

Como en el caso del Proyecto Soli de Google, podemos decir sayonara al mouse, los trackpads y los joysticks, y cambiar a interacciones gestuales más naturales usando nuestras manos y dedos para controlar los dispositivos. En ciertos casos, en las IU conversacionales, por ejemplo, los métodos de entrada pueden cambiar de teclado a voz. Sin embargo, el principio de retroalimentación inmediata y continua en alguna forma (voz, háptica y visual) seguirá siendo necesario.

Los principios fundamentales del diseño de interacción siempre jugarán un papel central en el diseño de sistemas futuros y es importante que los diseñadores de UX/UI los tengan en cuenta. No son reglas estrictas y rápidas, pero generarán productos y servicios mejores y más atractivos. Así como las películas exitosas usan técnicas antiguas de narración que siguen una estructura comprobada y verdadera, hay principios de diseño de interacción que existen por una buena razón. Seguirlos beneficiará a cualquier diseñador de productos al mejorar la usabilidad e impulsar una adopción más amplia de sus productos.

Lectura adicional en el blog de diseño de Toptal:

• Principios de diseño: Introducción a la jerarquía
• Mejores prácticas de diseño de interfaz de usuario y errores comunes
• Explorando los Principios Gestalt del Diseño
• La guía completa de arquitectura de la información