Krypton Solid

Adopción de la interfaz impulsada por gestos – Smashing Magazine

Adopción de la interfaz impulsada por gestos – Smashing Magazine

Como diseñador de UI o UX móvil, probablemente recuerde el lanzamiento del primer iPhone de Apple como si fuera ayer. Entre otras cosas, introdujo una interacción completamente centrada en la pantalla táctil para el dispositivo más privado y personal de un individuo. Fue un cambio de juego.

Como diseñador de UI o UX móvil, probablemente recuerde el lanzamiento del primer iPhone de Apple como si fuera ayer. Entre otras cosas, introdujo un interacción centrada en la pantalla táctil al dispositivo más privado y personal de un individuo. Fue un cambio de juego.

Hoy en día, los niños crecen con experiencias de pantalla táctil como si fuera lo más natural. Los padres se sorprenden de lo rápido que sus hijos entienden cómo funciona una tableta o un teléfono inteligente. Esto muestra que las interacciones táctiles y gestuales tienen un gran potencial para hacer que las experiencias móviles sean más fáciles y divertidas de usar.

Otras lecturas en SmashingMag:

Barras y botones desafiantes

La introducción de las «Directrices de interfaz humana» y la Junta de revisión de aplicaciones de Apple tuvo un gran impacto en la calidad de las aplicaciones móviles. Ayudó a muchos diseñadores y desarrolladores a comprender los elementos e interacciones centrales de la interfaz de usuario móvil. Una de las sugerencias populares de Apple, por ejemplo, es utilizar UITabBar y UINavigationBar componentes: una pauta que muchos de nosotros hemos seguido, incluido yo.

De hecho, si puede decir honestamente que la primera aplicación de iPhone que diseñó no tenía ningún elemento de barra superior o inferior, póngase en contacto y envíe una captura de pantalla. Te compraré una cerveza y con mucho gusto tuitearé que te adelantaste a tu tiempo.

Mi problema con las barras superior e inferior es que ocupan casi el 20% de la pantalla. Al diseñar para un lienzo pequeño, deberíamos utilizar todos los píxeles disponibles para centrarse en el contenido. Al final, eso es lo que realmente importa.

En esta industria innovadora, los diseñadores de dispositivos móviles necesitan algo de tiempo para explorar cómo diseñar interfaces más creativas y originales. Agregue a eso el frustrante rechazo de Apple a las aplicaciones que «piensan fuera de la caja», no es de extrañar que los diseños experimentales de UI y UX, como Claro y Aumento Tomó un tiempo para ver la luz del día. Pero están aquí ahora. Y aunque pueden ser bastante extremos y enfocados en usuarios de alto nivel y primeros usuarios, nos muestran el gran potencial creativo de las interfaces impulsadas por gestos.

Levántate y despeja
Tirar para actualizar se siente muy intuitivo.

El poder de las interfaces impulsadas por gestos

Durante más de dos años, he estado explorando las formas en que los gestos agregan valor a la experiencia del usuario de una aplicación móvil. El criterio más importante para mí es que estas interacciones se sienten muy intuitivas. Es por eso que interacciones creativas como Loren Brichter «Tire para actualizar”Se han convertido en un estándar en poco tiempo. La interacción de Brichter, introducida en Tweetie para iPhone, se siente tan intuitiva que innumerables aplicaciones basadas en listas adoptaron repentinamente el gesto al aparecer.

Eliminar el desorden de la interfaz de usuario

Una excelente manera de comenzar a diseñar una interfaz más impulsada por gestos es usar la pantalla principal solo como una ventana para el contenido principal. No se sienta obligado a hacer que la navegación importante esté siempre visible en la pantalla principal. Más bien, considere darle un lugar propio. Hablando en términos de un entorno virtual 2-D o 3-D, puede diseñar la navegación en algún lugar al lado, debajo, detrás, frente, arriba u oculto en la parte superior de la vista principal. Un gesto de arrastrar o deslizar es una excelente manera de llevar al usuario a este elemento de la interfaz de usuario. Depende de usted definir y diseñar la aplicación.

Lo que me gusta de Facebook y Gmail en iOS, por ejemplo, es su implementación de un menú de «deslizamiento lateral». Este concepto de interfaz de usuario de tendencias es muy fácil de usar. Los usuarios deslizan la ventana hacia la derecha para revelar los elementos de navegación. Esto no solo hace que la aplicación esté muy centrada en el contenido, sino que para acceder a cualquier sección de la aplicación solo se necesitan dos o tres interacciones táctiles. ¡A muchas aplicaciones les va mucho peor!

Menú de deslizamiento lateral
Menú de deslizamiento lateral de Facebook y Gmail

Además de la navegación de la interfaz de usuario, es probable que su aplicación también admita interacciones contextuales. ¡Agregar los mismos dos o tres botones debajo de cada elemento de contenido sin duda abarrotará la interfaz de usuario! Si bien los botones pueden parecer desencadenantes útiles, los gestos tienen un gran potencial para hacer que la interacción con el contenido sea más intuitiva y divertida. No dude en integrar gestos simples como tocar, tocar dos veces y mantener presionado para activar interacciones importantes. Instagram admite un simple toque dos veces para realizar una de sus funciones clave, que le gusta y no le gusta un elemento de contenido. No me sorprendería ver que otras aplicaciones integraran este acceso directo en un futuro próximo.

Una interfaz que se adapta

Al diseñar un producto móvil innovador, predecir el comportamiento del usuario puede resultar muy difícil. Cuando trabajamos con la radio pública de Bélgica, mi equipo realmente luchó con el equilibrio de la interfaz de usuario entre la visualización de música y las noticias en tiempo real. La gran cantidad de escenarios contextuales y preferencias hizo que fuera muy difícil encontrar la interfaz de usuario perfecta. Entonces, decidimos integrar un simple gesto de arrastre para permitir a los usuarios ajustar el equilibrio ellos mismos.

Radio +
Al arrastrar, los usuarios pueden equilibrar el contenido relacionado con la música y las noticias en vivo.

Este gesto agrega una dimensión contextual creativa a la aplicación. El gesto de arrastrar no lleva al usuario de una sección (noticias o música) a otra. Más bien, permite al usuario centrarse en el tipo de contenido que más le interesa, sin perderse el otro.

Piense en términos de tiempo, dimensión y animación

¿Qué acción se activa cuando el usuario toca un elemento? ¿Y cómo visualiza que ha sucedido realmente? ¿Qué tan rápido se anima un elemento particular de la interfaz de usuario en la ventana gráfica? ¿Se apaga automáticamente después de cinco segundos sin interacción?

El auge de los dispositivos táctiles y controlados por gestos de forma espectacular cambia la forma en que diseñamos la interacción. En lugar de pensar en términos de pantallas y páginas, pensamos más en términos de tiempo, dimensión y animación. Probablemente haya notado que ajustar las interacciones del usuario y mostrárselas a colegas y clientes con capturas de pantalla de estructura alámbrica estática no es fácil. No ve, comprende ni siente completamente lo que sucederá cuando toque, mantenga presionado, arrastre y deslice elementos.

Ciertas herramientas de creación de prototipos, incluidas Música pop y Invision, puede ayudar a dar vida a los wireframes. Son muy útiles para probar el flujo de una aplicación y para señalar dónde y cuándo un usuario podría quedarse atascado. Su aplicación tiene mucho más en marcha que una simple navegación de ida y vuelta, por lo que debe detectar errores de interfaz y posibles fuentes de confusión lo antes posible. No querría que su equipo de desarrollo se los señale ahora, ¿verdad?

InvisionApp
Invision le permite importar y vincular sus wireframes digitales.

Para ser más innovador y experimental, reúnase con su cliente primero y explíquele que un wireframe tradicional no es el producto UX que necesita. Muestre el valor de los wireframes interactivos y anímelos a que lo incluyan en el proceso. Podría aumentar el cronograma y el presupuesto, pero si esperan que haga un esfuerzo adicional, no debería ser un problema.

Incluso ofrezco producir un video de interfaz conceptual para mis clientes también, porque una vez que hayan trabajado con los wireframes interactivos y hayan resuelto los detalles, mis clientes a menudo necesitarán algo más sexy para presentar a sus partes interesadas internas.

La curva de aprendizaje

Al diseñar interacciones basadas en gestos, tenga en cuenta que cada vez que elimina el desorden de la interfaz de usuario, la curva de aprendizaje de la aplicación aumenta. Sin señales visuales, los usuarios podrían confundirse acerca de cómo interactuar con la aplicación. Un poco de exploración no es un problema, pero los usuarios deben saber por dónde empezar. Muchas aplicaciones muestran un tutorial de IU cuando se inician por primera vez, y yo de acuerdo con Max Rudberg que Los tutoriales deben explicar solo las interacciones más importantes.. No explique todo de una vez. Si es demasiado explícito y extenso, los usuarios lo omitirán.

¿Por qué no desafiarse a sí mismo e introducir gradualmente sugerencias creativas de IU a medida que el usuario usa la aplicación? Este patrón a menudo se conoce como divulgación progresiva y es una excelente manera de mostrar solo la información que es relevante para la actividad actual del usuario. La aplicación de captura de YouTube, por ejemplo, le dice al usuario que gire el dispositivo a la orientación horizontal justo cuando el usuario está a punto de abrir la cámara por primera vez.

Sugerencias visuales
Luche contra la curva de aprendizaje con un tutorial de la interfaz de usuario y / o sugerencias visuales.

Agregar señales visuales a la interfaz de usuario no es la única opción. En la aplicación Sparrow, la barra de búsqueda aparece durante unos segundos, antes de animarse hacia arriba y desaparecer de la pantalla, una forma sutil de decir que está esperando a que la bajen.

Deja de hablar, empieza a hacer

El iPhone marcó el comienzo de una revolución en la comunicación interactiva. Solo cinco años después, los dispositivos de pantalla táctil están a nuestro alrededor y los diseñadores de interacción están redefiniendo las formas en que las personas usan el contenido digital.

Necesitamos explorar y comprender el potencial de las interfaces táctiles y basadas en gestos y Empiece a pensar más en términos de tiempo, dimensión y animación. Como lo demuestran varias aplicaciones innovadoras, los gestos son una excelente manera de hacer una aplicación más centrada en el contenido, original y divertida. Y muchas interacciones basadas en gestos que parecen demasiado experimentales al principio llegan a verse como muy intuitivas.

Para obtener una descripción general completa de las oportunidades para los gestos en las principales plataformas móviles, consulte el libro de Luke Wroblewski «Descripción general de la referencia de gestos táctiles. » Espero que esté inspirado para explorar la interacción basada en gestos e intensificar sus aventuras en interfaces móviles. No tenga miedo de hacer un esfuerzo adicional. Con wireframes interactivos, puede iterar hasta obtener la mejor experiencia posible. Entonces, dejemos de hablar y comencemos a hacer.

(un poco)

Deja un comentario