Resumen
Este artículo presenta un sistema de gesto de perilla virtual que reproduce la experiencia de una perilla física. A partir de entradas multitáctiles calcula perillas virtuales y sus ángulos de giro, aprovecha la posición y el tamaño de la perilla como dimensiones extendidas y aplica principios de diseño de interfaz para lograr ajustes rápidos y precisos de valores de amplio rango con alta resistencia a interferencias. Implementado con éxito en el reproductor de video YAP, demuestra una experiencia de usuario sobresaliente y un gran potencial de aplicación en escritorio, móvil, automoción, VR y futuros entornos de interacción.
TLDR
Perillas virtuales que se sienten como físicas, con gestos robustos y precisos, que reducen la dependencia visual y mejoran la seguridad y la eficiencia en escenarios con vibración o distracción, desde el coche hasta VR.
Físico vs digital: el debate interfaz humano máquina
Todo comenzó con una charla informal a inicios de 2024 al ver que los coches eléctricos recuperaban perillas físicas. ¿Por qué siguen vigentes en plena era de pantallas táctiles? Tras investigar, la respuesta es clara: la pantalla táctil y la perilla física son fuertes en contextos distintos.
Paradigma táctil más GUI
Fortalezas: interacción intuitiva con manipulación directa; enorme versatilidad para múltiples escenarios; funciones ricas y flujos complejos. Limitaciones: alta dependencia visual bajo el modelo localizar y luego operar; carga cognitiva elevada por patrones de interacción inconsistentes entre apps; ausencia de feedback táctil; baja resistencia a interferencias al no considerar vibración o movimiento.
Perillas físicas: la ventaja analógica
Operación sencilla ideal para valores continuos; memoria muscular gracias a posiciones fijas y operación sin mirar; límites físicos claros con fricción y muescas; pero con un coste por unidad significativo, complejidad de instalación, mantenimiento y espacio, mayor probabilidad de fallo mecánico y un límite cognitivo cuando hay demasiadas perillas.
Automoción: requisitos que se potencian
Un vehículo exige operación simple, mínima distracción, feedback táctil y resistencia a interferencias. Las GUI de escritorio o móvil no alcanzan ese estándar, las perillas físicas sí, pero no se pueden multiplicar sin coste. El reto es capturar la intuición de una perilla sin su coste y sin ocupar espacio.
Estrategia
Diseñar perillas virtuales que simulen la experiencia física y rediseñar la UI para reducir la dependencia visual.
Diseño inicial: imitando perillas físicas
Modelo matemático
Una perilla virtual se describe por cuatro parámetros: centro c, radio r, ángulo de rotación y valor v, representados como c, r, angulo, v. Cálculo de ángulo: delta_angulo = angulo1 menos angulo0. Mapeo de valor: v1 = v0 + a * delta_angulo, donde a regula la sensibilidad entre ángulo y valor.
Algoritmo para pantalla táctil
1 calcular distancias entre todos los puntos de toque y elegir los dos más distantes p1 y p2 para definir el vector principal y reducir ruido; 2 el centro es la media de p1 y p2; 3 el radio es la mitad de la distancia entre p1 y p2; 4 el cambio de ángulo se obtiene comparando la orientación del vector principal entre muestras consecutivas y se acumula.
Repensar la interacción
El modelo clásico localizar y luego operar obliga a mirar, buscar y tocar, elevando la carga cognitiva. En automoción, este paradigma visual es una desventaja. Con perillas virtuales, el gesto es la interfaz y la pantalla deja de ser el único ancla espacial.
Principios de diseño para perillas virtuales
Sin posiciones fijas: la perilla sigue al dedo para reducir esfuerzo de puntería. Área de operación grande y distinguible a nivel visual, auditivo y háptico, con tolerancia para baches. Activación contextual por voz o gestos específicos con ventanas flotantes que se ocultan solas. Sistema multiperilla: diferentes activaciones muestran controles distintos claramente diferenciados por diseño, sonido o vibración. Refuerzo háptico para aumentar realismo.
Resultados del prototipo
En Android, el prototipo se completó en dos semanas y se percibe natural, fluido y preciso incluso en teléfonos modestos. Frente a un deslizador, que es rápido pero impreciso, o un stepper, preciso pero lento, la perilla virtual permite ajustes rápidos y exactos. Al basarse en ángulo, resiste muy bien sacudidas verticales y horizontales, ideal para automoción u otros entornos inestables.
Más allá de lo físico: extender dimensiones
El prototipo inicial solo usaba el ángulo, pero el modelo incluye centro c y radio r. ¿Podemos aprovecharlos? Con pruebas bajo atención ligera, la rotación es lo más preciso y con mayor resistencia a interferencias; la escala es lo menos preciso en pantallas pequeñas; la traslación es moderada y sufre en entornos con vibración. Conclusión: en alta interferencia conviene rotación, evitando gestos de traslación o escala. En escenarios normales, la rotación sigue superando a steppers y sliders en eficiencia.
Sin embargo, ningún gesto único cubre rangos gigantes con alta precisión. En un temporizador, 24 horas suman 86400 segundos. Un gesto rotatorio preciso controla decenas de posiciones, no decenas de miles. Inspiración: dividir la variable en subdimensiones manejables, como hacen los selectores de hora, minuto y segundo. Extender dimensiones con c y r multiplica la capacidad expresiva de la perilla virtual.
Caso 1: temporizador mejorado
Usar el radio para elegir horas, minutos o segundos zonas concéntricas, y el ángulo para fijar el valor. Un pellizco suave cambia de anillo y una sola rotación deja el tiempo listo con rapidez y precisión.
Caso 2: edición y navegación de video
Para velocidades y unidades de tiempo variables, puede definirse una función simple como unidad_de_tiempo_por_grado = b * r, donde b es un coeficiente proporcional y r el radio. Así, el propio tamaño de la perilla ajusta la granularidad de navegación.
Caso 3: reproductor YAP
En YAP, posición y tamaño del gesto seleccionan variables a la vez. En el lado izquierdo, perillas grandes controlan volumen y pequeñas el brillo. En el lado derecho, perillas grande mediana pequeña equivalen a saltos de 1 segundo 30 segundos 10 minutos, logrando llegar a cualquier instante de forma rápida y exacta.
Demostración en YouTube ver video
Descarga YAP en iOS y Android App Store y Google Play
Extensiones para VR y AR
Las perillas virtuales dependen solo de posiciones de dedos. Con visión por computador u otros métodos de seguimiento, se calculan rotaciones en tiempo real. Añadiendo activación y desactivación contextuales, la operación en VR AR se vuelve fluida y natural.
Mirando al futuro
El gesto de perilla se ha presentado para patente y tiene potencial transversal en escritorio, móvil, automoción y VR. En Q2BSTUDIO, empresa de desarrollo de software con foco en aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud AWS y Azure, servicios de inteligencia de negocio y power BI, ya exploramos estas interacciones para integrarlas en productos reales, combinándolas con agentes IA y estrategias de ia para empresas que aceleran la toma de decisiones y elevan la experiencia de usuario.
Cómo te ayudamos desde Q2BSTUDIO
Diseñamos experiencias tangibles con perillas virtuales, desde prototipos hasta producto, integrándolas con backends escalables y analítica avanzada. Si necesitas un proyecto llave en mano, nuestro equipo puede crear software a medida y aplicaciones a medida totalmente adaptadas a tu proceso y a tus dispositivos. Y si buscas potenciar decisiones con modelos y automatización, te acompañamos con inteligencia artificial e ia para empresas incluyendo agentes IA, integración con servicios cloud AWS y Azure, y gobierno de datos seguro con prácticas de ciberseguridad y pentesting.
Reflexión sobre la innovación
El relato aquí es lineal, pero la innovación real es salto, ensayo y serendipia. La dificultad es alta, pero la chispa de una idea y la satisfacción de verla convertida en producto hacen que el camino valga la pena.
Video de introducción a la perilla virtual buscando el gesto perdido
Artículo original Virtual Knobs Making human machine interaction more intuitive and efficient contenido técnico original, por favor citar al compartir