El traductor de este artículo es el ingeniero de desarrollo front-end de 360 Qiwu Troupe
Título original: Detalles invisibles del diseño de interacción
Enlace original: https://rauno.me/craft/interaction-design
Traductor: Dorothy
Parece que el diseño no tiene base científica, solo sentimiento e intuición. Incluso los investigadores tienen dificultades para fundamentar las prácticas de diseño de interacción en la ciencia, esencialmente tratándolas como misteriosas cajas negras. Si bien esto es parcialmente cierto según mi propia experiencia, he estado tratando de deconstruir y descubrir qué hay detrás de un buen diseño de interacción.
Cuando busca en Internet contenido sobre diseño de interacción, puede encontrar una gran cantidad de contenido duplicado. Estos se obsesionan con las personas de los usuarios, los guiones gráficos y los diagramas de Venn etiquetados como "UI" y "UX". Con la excepción de un puñado de excelentes presentaciones, la verdadera sustancia y las percepciones se revelan solo a aquellos dispuestos a profundizar fervientemente. Ya sea estudiando detenidamente largos y oscuros trabajos de investigación o reproduciendo frenéticamente cientos de grabaciones de pantalla a cámara lenta.
Sentarse y meditar no produce descubrimientos valiosos como la magia. La naturaleza misma de la palabra "interacción" implica la relación entre el hombre y su entorno. En mi experiencia, la gran inspiración proviene de la creación, dejando que el espacio de tu cabeza se llene de preguntas, y luego dando un paseo de ensueño sintético para despertar los pensamientos.
Este artículo no es un tutorial, ni es una serie de guías. En cambio, es una observación de algunos detalles de interacción que uso mucho pero en los que rara vez pienso. Además de reinventar las interfaces, he descubierto que este ejercicio reflexivo es otra forma excelente de desarrollar una intuición y un vocabulario de diseño más sólidos.
metáfora
¿Qué es el Diseño de Interacción? Aquí están algunos de mis pensamientos sobre este tema desde una perspectiva técnica. El diseño de interacción es una forma de arte que busca crear experiencias que respondan con fluidez a la intención humana. ¿Cuándo un deslizamiento activa una acción? ¿Los gestos conservan el impulso? ¿Qué sucede si un dedo cubre el contenido? ¿Cómo predecir la intención en función del contexto? Hacerlo tan bien con estos detalles hace que el producto se sienta como una extensión natural de nosotros mismos.
Pero no es una forma de arte como la pintura o la composición musical. El diseño de interacción tiene sus propios factores humanos únicos. ¿por qué? Porque en el análisis final, las personas usan productos para completar tareas, y la belleza en forma y composición no es suficiente. Hay una satisfacción inherente en lograr un equilibrio general entre forma y función.
Un buen diseño de interacción premia el aprendizaje mediante el uso repetido de metáforas. La mayoría de las interfaces táctiles solo requieren dos gestos para funcionar: tocar y deslizar. Por ejemplo, en iOS, el único gesto que te enseña explícitamente cómo hacerlo es deslizar hacia arriba para abrir:
Ahora ha aprendido que deslizar puede controlar muchas otras partes de la interfaz. La acción de deslizar también te dice que la interfaz se compone de capas, como una baraja de cartas. Sabiendo esto, es posible que sienta la tentación de deslizar hacia abajo para descubrir aún más controles. Conceptualmente, la interfaz le dice implícitamente que deslizar hacia abajo revela capa tras capa de funcionalidad del sistema. Esta comprensión continuará profundizándose a medida que obtenga una comprensión más profunda del ecosistema de Apple.
Podemos extender aún más la metáfora del diseño de interacción. ¿Por qué funciona el deslizamiento horizontal para navegar entre páginas? Porque esa es la forma intuitiva en que hemos interactuado con los libros durante miles de años.
Las grandes interacciones se modelan en propiedades del mundo real, como la interrumpibilidad. Esto suena un poco tonto, ya que los flipbooks son obviamente interrumpibles. Pero imagina si fuera una animación que tuvieras que esperar, ¿qué harías?
Pellizcar es otro gesto que asociamos intuitivamente con el zoom. En resumen, escalar es un acto preciso: ajustar la cantidad de detalles visibles.
Podemos pensar que la acción de pellizcar los dedos es similar a acciones que requieren habilidades motoras complejas, como recoger objetos pequeños o usar especias. Eso sí, nos pellizcamos los dedos para mayor precisión:
En una pantalla táctil, primero debe establecer un punto de anclaje en la interfaz y comenzar a hacer zoom desde este punto de anclaje, y es mucho más fácil y preciso juntar los dedos para seleccionar un punto de anclaje:
Técnicamente, el punto de anclaje también debe calcularse cuando los dedos comienzan a separarse. Pero por lo general esto significa acercar el zoom, y la precisión del origen no es tan importante. La precisión deliberada requiere dos dedos para comenzar muy cerca, como agarrar un objeto.
Hay cientos de decisiones de diseño, tanto científicas como intuitivas, tomadas por alguien obsesionado con los flecos más pequeños para que nadie tenga que pensar en ellos mientras trabajan. Mucho de esto es nuestro comportamiento instintivo.
dinámica
Esencialmente, cuando se desliza hacia arriba la pantalla de bloqueo, es solo una superposición que se puede desbloquear deslizando hacia arriba. Y dentro de este marco, también lo hacen las aplicaciones. Eso significa que ahora también sabe cómo desbloquear aplicaciones.
Echemos un vistazo a cómo el desbloqueo de aplicaciones se ha convertido en "islas dinámicas". Observe cómo el gesto mantiene el impulso y el ángulo del lanzamiento, nunca está perfectamente centrado o alineado en el tiempo.
Este movimiento se basa en nuestra percepción física natural del mundo real, como pasar una carta de póquer. Aunque el movimiento del naipe presenta una menor fuerza de rebote porque es conceptualmente más ligero y no se deforma por las fuerzas magnéticas.
gesto de deslizar
¿Cuándo un deslizamiento activa una acción? Esto parece trivial: presiona, se mueve un poco y se activa una acción después de soltar el dedo. Después de crear algunas interacciones táctiles con SwiftUI, me di cuenta de que no siempre es así. A veces, queremos activar una acción mientras deslizamos.
La forma en que las acciones ligeras (como mostrar una superposición) se sienten más naturales se activa durante un deslizamiento de cualquier distancia. Por ejemplo, con solo un gesto, puedo buscar instantáneamente la superficie superpuesta, comprender que me proporciona una entrada de búsqueda y luego descartarla si no es lo que quiero. Aquí, esperar a que termine el gesto puede parecer una postergación.
Este es un ejemplo de un prototipo de MercuryOS SwiftUI en el que estoy trabajando. Activar una acción cuando un elemento movido en un gesto alcanza su posición final lógica se siente como una anticipación. Observe cómo la pantalla se desbloquea después de que ambos títulos encajan en sus lugares y luego se bloquea con un solo gesto sin levantar el dedo. Del mismo modo, esperar a que finalice el gesto antes de desbloquear hace que la interfaz se sienta incompleta y ofrece menos asequibilidad.
Ahora, veamos un ejemplo en el que se requiere una intención explícita para desencadenar una acción. El selector de aplicaciones de iOS nunca desbloquea la aplicación hasta que finaliza el gesto. Independientemente de la distancia y de si la aplicación está parcialmente fuera de la pantalla:
Creo que esto tiene sentido, ya que descartar una aplicación es destructivo y no se siente bien si la aplicación se descarta a la mitad. ¿Qué pasa si cambio de opinión a mitad de camino y accidentalmente llego al umbral de desbloqueo? ¡Podría perder algún progreso importante en mi aplicación! Para garantizar que la interfaz responda a la intención del usuario, disparar al final del gesto, sin importar qué tan lejos, se siente bien.
Aquí hay otro ejemplo en el que, a pesar de deslizar el dedo lo suficiente como para que la vista sea completamente visible y se capture, no se capta hasta que finaliza el gesto. Esto lo hace portátil para mirar brevemente a otra pantalla cuando no está ocupado mientras escanea aplicaciones, y para interrumpir rápidamente los gestos cambiando la orientación.
Gestos de respuesta
Los gestos realmente fluidos requieren una respuesta inmediata. Como se mencionó anteriormente, los gestos pueden tener un umbral de activación claro, pero eso no significa que simplemente realizar una animación 0 → 1 se sienta bien.
Por ejemplo, una implementación simple de encogimiento de tarjetas aumenta exponencialmente después de cierto umbral:
En este caso, es posible que la animación con una contracción moderada no se sienta fluida. Pero la interfaz no proporciona ningún indicio de que esta tarjeta se pueda reducir a un ritmo más lento. Esto tampoco lo convierte en una experiencia satisfactoria.
En cambio, sería mucho mejor responder de inmediato cuando se detecta una diferencia de zoom y realizar una animación después de alcanzar un umbral determinado:
Por alguna razón, navegar a través de la configuración de iOS no se siente tan receptivo como el selector de aplicaciones. Una capa se desliza desde la derecha, diciéndome que puedo descartarla deslizando el dedo hacia la izquierda. Sin embargo, si accidentalmente desliza mal, deslizar hacia atrás inmediatamente no interrumpe la animación, debe esperar a que finalice la animación.
consistencia espacial
Las islas dinámicas tienen una interacción agradable en la que, al tocar, la aplicación se desliza desde debajo de la isla para cubrir la pantalla:
Pero si la isla se expande (conceptualmente, esto le dice a la interfaz de usuario que quiero más detalles), la aplicación no se deslizará fuera de la isla. En su lugar, se iniciará desde el icono si está visible. Alternativamente, la aplicación se desliza desde la derecha:
Solo puedo pensar que iniciar Spotify desde el ícono muestra más claramente dónde se está reproduciendo el audio. Supongamos que hay tres aplicaciones de música en la misma fila. A través del movimiento, esto ayuda a establecer una relación entre el reproductor de audio y su fuente.
De manera similar, si una aplicación se desliza desde la derecha, comunica su posición espacial en el selector de aplicaciones. Al deslizar el dedo desde la derecha en lugar de la izquierda, también indica que la aplicación ahora es la primera en la pila de aplicaciones en el conmutador.
Sin embargo, la aplicación de reloj nativa nunca se abre desde su icono. Siempre salta fuera de la "isla", incluso cuando se expande:
Esto parece apoyar la teoría anterior. Debido a que el módulo del temporizador de la isla es solo para una aplicación y no puede haber otra aplicación con la misma isla, no es necesario ser explícito acerca de su procedencia.
cambio de forma suave
Todos estamos familiarizados con los ingeniosos gestos fluidos e interrumpibles en iOS para navegar rápidamente a través de las aplicaciones. Al deslizar hacia arriba, se transforma una aplicación de pantalla completa en su ícono:
Un detalle interesante es que el ícono se extiende intencionalmente desde la parte inferior para llenar el marco, mientras cambia su forma de forma fluida de un rectángulo vertical a un cuadrado uniforme. Esto es aún más evidente cuando se observa el icono de GitHub no estándar:
Esta técnica asume que el ícono de la aplicación sigue las pautas establecidas por Apple. El ícono de Bluesky, por otro lado, ignora el área segura recomendada, lo que hace que los ~10 puntos inferiores del ícono se recorten, repitan y estiren, lo que da como resultado este extraño efecto de imagen repetitiva:
En aplicaciones prácticas, este efecto no es muy antinatural, pero definitivamente no es una muy buena experiencia:
Frecuencia y Novedad
Como diseñador, me encanta animar todo. La persistencia de los objetos, la creación de enfoque y el placer son todas buenas razones para animar. Sin embargo, no todo es adecuado para la animación.
A veces podemos desanimar las interacciones del mouse o el teclado sin sentirnos forzados. Hay una desconexión inherente entre la entrada de los periféricos y lo que sucede en la pantalla. Los botones se sienten menos intuitivos y mecánicos que tocar la pantalla.
Un buen ejemplo es el menú de comandos. Es fácil agregar opacidad y efectos de desvanecimiento de zoom a las superposiciones. Sin embargo, si tenemos en cuenta que la frecuencia de las interacciones es de cientos de veces al día, ver la misma animación por centésima vez comienza a sentirse más como una carga cognitiva.
Cuando las interacciones son tan frecuentes, la novedad de las interacciones también disminuye. No sentirás que estás haciendo algo especial que merece un efecto de glamour especial.
Caso en cuestión: estoy trabajando en un bookmarklet (bmrks.com) y el indicador de actividad visual y las animaciones para agregar y eliminar elementos de la lista funcionan muy bien:
Después de unos días, comienzan a sentirse lentos. Aunque hice que las animaciones respondieran mejor, mi rendimiento percibido se sintió como si tuviera que esperar demasiado cuando usaba el teclado para interactuar con la interfaz. Después de eliminar el efecto de animación en la interacción central, de repente sentí que la velocidad de movimiento era mucho más rápida:
El menú contextual (clic con el botón derecho) en macOS tampoco se anima. Usado miles de veces al día con poca novedad y alta frecuencia. El menú que aparece sin animación se siente correcto a pesar de la interacción del mouse:
Curiosamente, el menú se desvanecerá sutilmente. Mire de cerca, el elemento seleccionado parpadeará brevemente con el color de énfasis (rosa) para asegurarse de que el elemento se haya seleccionado correctamente. Solo puedo pensar que el desvanecimiento del menú es más elegante e intencional que desaparecer repentinamente después de parpadear:
Otro gran ejemplo es el conmutador de aplicaciones en macOS, que es excelente para los usuarios que usan mucho el teclado. Las superposiciones no se animan, lo que hace que cambiar entre aplicaciones sea rápido:
Además, si la diferencia de tiempo entre presionar las teclas Comando y Tabulador es lo suficientemente pequeña, la ventana previamente activa se enfoca inmediatamente sin mostrar el menú:
Juguetón
Las grandes interacciones no tienen que ser perfectas. Todos nos mordimos los labios o golpeamos nuestros lápices en la clase de matemáticas, o mientras hacíamos cálculos numéricos. Tal comportamiento se llama alegría. En otras palabras, los movimientos repetitivos aparentemente ayudan a liberar el estrés situacional e incluso mejoran el enfoque. Aunque no hay estudios científicos que respalden esta afirmación, no se puede negar que el juego parece ser una parte intencional del diseño de interacción.
La alegría también puede ser una ocurrencia tardía o un efecto secundario agradable. Sin embargo, el estuche AirPods es muy satisfactorio para jugar. Si crees que esto es una coincidencia, estás muy equivocado.
El Apple Pencil es un candidato más obvio diseñado para ser divertido. La punta del lápiz es desmontable, lo que significa que eventualmente se puede reemplazar. Por extraño que parezca, torcer la punta y girar el cuerpo del lápiz proporciona una cantidad satisfactoria de fricción para jugar mientras piensas.
Ahora aquí hay un ejemplo realmente loco, y no apostaría que fue intencional. Aún así, es genial.
hito rodante
En MacOS, puede encontrar el puntero agitando el mouse. La interacción se siente genial porque captura la frustración y la reacción natural que tienen las personas cuando pierden su puntero.
En dispositivos móviles, a menudo encuentro situaciones similares cuando navego por contenido de formato largo. Estoy a la mitad del pergamino, y mientras leo, quiero recapitular rápidamente lo anterior. Sin embargo, me siento incómodo porque si me desplazo hacia arriba, pierdo una posición de desplazamiento preciosa y progreso de lectura.
Hice un pequeño prototipo en el que hacer doble clic en la barra de desplazamiento establecerá un punto de referencia para la posición de desplazamiento actual. Ahora puedo navegar libremente en la página, hacer doble clic en una marca de posición me lleva de vuelta a donde estaba.
Dado que las barras de desplazamiento ya son interactivas cuando se tocan, se siente muy familiar de usar. En caso de que no lo supiera, presionar prolongadamente la barra de desplazamiento hace que se arrastre, lo que hace que el desplazamiento sea cada vez más rápido.
Esto me recuerda a un prototipo de minimapa que hice hace un tiempo. Se inspiró en los juegos en los que siempre tienes una vista panorámica de tu entorno. ¿Por qué no usar una pantalla de visualización frontal similar para navegar por las páginas?
Visibilidad del contenido táctil
En las interfaces táctiles, los dedos a veces pueden ocultar el contenido de la pantalla, lo que dificulta la realización de gestos con precisión a nivel de píxeles. Por lo general, la interfaz representa una representación temporal de lo que hay debajo del dedo.
Por ejemplo, al presionar y mover el cursor de texto en iOS, aparece una lupa sobre el punto de contacto. Sin embargo, tan pronto como el dedo se mueve hacia abajo y ya no cubre la marca, la lupa desaparece.
También se utilizan detalles similares para el teclado. Aparece una tecla ampliada cuando presiona una tecla, lo que le asegura que la interfaz comprende su intención.
Duplicar regiones ofuscadas no siempre tiene sentido. Por ejemplo, un control deslizante puede ser pequeño y desaparecer con el toque de un pulgar. Esto ayuda a garantizar que el gesto de arrastrar no se cancele al alejarse del control deslizante pero seguir presionándolo:
Si bien encontrar un video es principalmente una interacción visual, existe una inexplicable sensación de incomodidad al interactuar con elementos que no se pueden ver.
Aquí hay un ejemplo más obvio donde la comprensión del contenido del menú es crucial:
entrada implícita
Durante mucho tiempo, hemos estado eliminando las capas de la relación entre humanos y computadoras. La entrada táctil promueve esta relación mediante la introducción de gestos y un sentido del tacto. Pronto, las aplicaciones ya no estarán limitadas por una pantalla fija.
El teclado, el mouse, el toque, la voz son todos métodos de entrada claros. Cuando están perfectamente afinados, se sienten como una extensión natural de nosotros mismos. Pero, ¿no es el mejor de todos los métodos de entrada el no tener ninguna entrada? Realmente se siente mágico cuando una interfaz toma el contexto como entrada e infiere lo que quieres hacer sin preguntar.
Por ejemplo, al mirar la pantalla, Apple Maps muestra direcciones paso a paso activas cuando está desbloqueado. Apple Wallet aumenta el brillo al presentar un pase para escanear. Spotify está modificando la interfaz para que sea más accesible mientras se conduce.
Algunas aplicaciones de iOS personalizadas desenfocan el contenido de la aplicación al abrir el selector de aplicaciones. Al principio, pensé que era solo una optimización del rendimiento. Pero resulta que esto oculta intencionalmente datos potencialmente confidenciales, como registros médicos o extractos bancarios.
se ajusta a la ley
La ley de Fitts establece que el tiempo que se tarda en hacer clic en algo depende de la distancia y el tamaño. Cuanto más grande sea el objetivo y más cerca esté del puntero, mejor será el efecto.
El sistema operativo aprovecha las "esquinas mágicas" en los bordes de la pantalla porque el área de destino es infinita. Por ejemplo, en macOS puede configurar lo que sucede cuando el puntero se mueve hacia una esquina. Puede mostrar la plataforma de lanzamiento en la esquina superior izquierda:
El tamaño del objetivo es infinito, ya que el puntero no puede pasar por las esquinas, la precisión requerida para este tipo de interacción es muy baja y se puede llegar a cualquier esquina con solo un clic del mouse. Esta es también la razón por la cual el sistema operativo coloca los menús de uso común (como el menú de Apple) en la esquina.
Los menús radiales son un caso clásico de la Ley de Fitt. Se generan alrededor de punteros de modo que todas las operaciones tienen el mismo tamaño y distancia objetivo. La memoria muscular se activa con el tiempo, e incluso es posible elegir una acción basada únicamente en la distancia y la dirección.
Desplazarse
En la mayoría de los sistemas operativos, puede desplazarse por cualquier área desplazable, incluso si la ventana en sí no está activa. Esto está perfectamente bien a menos que otra ventana se desplace inesperadamente.
Usando el mouse mágico, puedo desplazarme en una ventana, luego mover el puntero para hacer clic o encontrar algo en la segunda ventana, el evento de desplazamiento no está registrado en la segunda ventana. Me hace sentir genial.
Sin embargo, con cualquier mouse tradicional, como Logitech MX Master 3, el desplazamiento en la primera ventana se cancela y la segunda ventana lo reemplaza. Es realmente frustrante cuando esto sucede todos los días:
Con el Magic Mouse, el desplazamiento se puede cancelar explícitamente cambiando el enfoque a otra ventana:
Los dispositivos señaladores como el Magic Trackpad y el Magic Mouse también brindan capacidades de manipulación directa para la informática de escritorio. Además del cambio de aplicación común, los controles deslizantes también se pueden manipular directamente desplazándose, todo con una sola interacción:
conclusión
Para mí, comprender y expresar por qué algo se siente bien no es tan intuitivo como diseñar algo para que se sienta bien. Pero son dos caras de la misma moneda. Debe haber una razón. Puede ser una curva primaveral específica, o algo más visceral, como una metáfora. Analizar y comprender los detalles de diseño que van más allá del simple "sentirse bien" puede ayudar a desarrollar el gusto, elevar la ejecución y desarrollar una apreciación más profunda de la búsqueda minuciosa de la excelencia.
gracias
Gracias a Paco, Alasdair, Emil y Thomas por leer el primer borrador y proporcionar ideas y comentarios.
Referencias
E. Goodman, E. Stolterman, R. Wakkary. Comprender las prácticas de diseño de interacción (2011)
C. Karunamuni, N. Vries, M. Alonso. Diseño de interfaces fluidas (2018)
Brandur. Aprendiendo de las terminales para diseñar el futuro de las interfaces de usuario (2017)
SL Kriescher. Los efectos de los fidgets en la atención y el aprendizaje de los estudiantes universitarios (2020)
Paul Morris Fitts. La capacidad de información del sistema motor humano en el control de la amplitud del movimiento (1954)
Kevin Hal. Visualización de la ley de Fitts (2010)
Pautas de interfaz humana de Apple (1987)
Rasmus Anderson. El curioso caso de las interfaces de usuario (2023)
Metamusa. Repensar el sistema operativo con Jason Yuan (2020)
Jason Yuan. Mercury OS (2019)
Pablo Graham. Cómo hacer un gran trabajo (2023)
Disección de aplicaciones. Brian Lovin
- FIN -
Acerca de Qi Wu Troupe
Qi Wu Troupe es el equipo front-end más grande de 360 Group y participa en el trabajo de los miembros de W3C y ECMA (TC39) en nombre del grupo. Qi Wu Troupe otorga gran importancia a la capacitación de talentos y tiene varias direcciones de desarrollo, como ingenieros, profesores, traductores, personas de interfaz comercial y líderes de equipo para que los empleados elijan, y brinda el curso de capacitación técnica, profesional, general y de liderazgo correspondiente. Qi Dance Troupe da la bienvenida a todo tipo de talentos destacados para que presten atención y se unan a Qi Dance Troupe con una actitud abierta y de búsqueda de talentos.
