Krypton Solid

Cómo diseñar un tutorial exitoso de una aplicación web

Cómo diseñar un tutorial exitoso de una aplicación web

Todos hemos interactuado con un tutorial de la aplicación en algún momento u otro. Diablos, algunos de nosotros los diseñamos.

Pero cuando eche un vistazo a la literatura de diseño que existe, notará que hay muy poco que se ocupe específicamente de los tutoriales de las aplicaciones. Son un aspecto tan importante de la experiencia general de una aplicación porque, después de todo, son la primera interacción que un usuario tiene con una aplicación (si el tutorial está presente).

En esta publicación, he recopilado algunos consejos para usted al observar las aplicaciones actuales para ver qué hacen con sus tutoriales de aplicaciones y qué podemos aprender de ellas.

¿Tu aplicación debería tener un tutorial?

Quería comenzar esta publicación señalando que hay algunas aplicaciones que deberían tener tutoriales, pero no las tienen, y algunas aplicaciones que las tienen pero no deberían.

El propósito de un tutorial es brindar información sobre lo que puede hacer su aplicación. Si su aplicación es lo suficientemente simple o lo suficientemente autoexplicativa, es posible que no necesite un tutorial, en cuyo caso ahorre tiempo para algo más vital.

Pero, si su aplicación tiene una funcionalidad oculta, un tutorial es un gran lugar para hacer una demostración, para que los usuarios no se lo pierdan.

Tomemos a Litely por ejemplo. Litely es una aplicación de edición de fotos y tiene un montón de gestos ocultos que pueden mejorar la experiencia de la aplicación en general. Le permite ver la imagen, antes de agregar filtros, simplemente pegando la foto con dos dedos. Instagram también te permite hacer esto, pero solo usa un dedo. Nadie conoce esta funcionalidad porque Litely no te lo dice; si descubre esta funcionalidad en Litely, lo hace por accidente.

Por otro lado tenemos una aplicación como SoundCloud, que tiene un tutorial de aspecto encantador al comienzo de la experiencia de la aplicación. Sin embargo, una de las pantallas te explica algo muy obvio: cómo seguir a otro usuario y qué esperar del icono de búsqueda. Sería difícil encontrar un usuario de la aplicación que no entienda el ícono de la lupa, por lo que cuando se trata de esta pantalla específica de SoundCloud, hay poco que ganar con perder el tiempo de un usuario. El recorrido habría tenido el mismo éxito sin él.

Presta atención al diseño

Es difícil crear un recorrido si no ha creado la aplicación, por lo que los recorridos a menudo se crean al final. Con frecuencia, esto conduce a muchas inconsistencias.

Si va a tener un tutorial, asegúrese de que el diseño sea tan sólido como el resto de su aplicación. Un tutorial atractivo es importante porque, de hecho, es lo primero que verán los usuarios. Es fundamental que el tutorial se implemente en el estilo de su marca para no confundir a los usuarios.

Aprovecha gráficos y animaciones

Los tutoriales son mucho más atractivos cuando utilizan imágenes o fotografías fantásticas. Mejor aún, los tutoriales que usan animaciones son excelentes para captar la atención de los usuarios. El mejor ejemplo de esto es Caja. Box es una aplicación de almacenamiento de archivos basada en la nube; cuando usa su aplicación por primera vez, tienen un tutorial rápido en el que le muestran cómo la aplicación es versátil y admite muchos formatos de archivo diferentes en varios dispositivos.

caja

Mejor aún, el tutorial usa un solo archivo y lo anima a medida que el archivo salta de una diapositiva a otra. La experiencia es muy agradable porque es inteligente y parece muy bien pensada. El diseño visual del tutorial también es bueno, ya que las diapositivas / páginas tienen un diseño limpio.

Hágalo interactivo

Debido a que se supone que un tutorial debe educar a su usuario sobre cómo funciona su aplicación, es posible que desee considerar hacerla interactiva. La mejor manera de hacer que las personas vean la excelente funcionalidad de su aplicación es hacer que la usen. La versión actual de Buzón, una aplicación de cliente de correo electrónico, tiene un tutorial ingenioso que le informa sobre la funcionalidad oculta de ordenar el correo electrónico deslizándolo hacia la izquierda o hacia la derecha. Le dice que si desliza el dedo hacia la derecha, el correo electrónico se archivará; a continuación, te obliga a hacerlo. Puede ser una decisión peligrosa hacer que los usuarios interactúen con su tutorial, pero en el caso de Mailbox, la solicitud es simple, ¡todo lo que el usuario tiene que hacer es deslizar el dedo! Es una idea brillante mostrarle al usuario exactamente lo que puede esperar de la aplicación.

Si se hace correctamente, un recorrido interactivo puede ser una forma divertida de hacer que la gente se entusiasme con el uso de su producto.

buzón

Proporcionar una manera fácil de omitir

Me entristece decir que a algunos usuarios no les gustará tu tutorial, sin importar lo bien que se vea, lo bien pensado o lo informativo que sea.

Es una buena idea no bloquear a las personas para que no usen su aplicación, y no quiere que los usuarios que no están interesados ​​en el tutorial se vean obligados a completarlo. Una solución fácil es tener un botón de salto simple, ya sea que diga literalmente «Omitir esto» o que sea una gran X en la esquina superior derecha de la pantalla. Si va con un botón, tiene algo de espacio para jugar con la copia; puedes decir algo como «¡Ya tengo esto!» o un poco más atrevido como «Lo tengo, déjame usarlo». Diviértete con él y quizás puedas convencer a tu usuario de que se mantenga firme.

Precioso es una aplicación que lo hace bien. Cuando abre la aplicación por primera vez, hay un tutorial, pero siempre puede omitirlo presionando el botón naranja grande que dice «Comenzar». Siempre está ahí, desde el principio y no solo hacia el final.

Hay otras opciones disponibles para ti. Lo que puede hacer simplemente es permitir que los usuarios se deslicen libremente por el tutorial. En el caso de Box, todo lo que un usuario tiene que hacer es limpiar la izquierda unas cuantas veces para llegar al final y usar la aplicación. No hay trucos implementados por la aplicación que le impidan hacer precisamente eso.

Clima auténtico es otro ejemplo. Cuando descargas la aplicación, todo lo que obtienes es un simple recorrido por la pantalla de la página, que desaparece cuando la tocas en cualquier lugar. A continuación, se realiza el recorrido y el usuario puede disfrutar de la aplicación. Si alguien se preocupa por leer lo que dice la pantalla, ¡genial! Si no, ya están en la aplicación de todos modos.

precioso + aw

Tutoriales e incorporación

A veces, los tutoriales incorporan la incorporación o en realidad no son tutoriales y el usuario tiene que crear una cuenta para usar la aplicación. Si esto es lo correcto o no es una discusión completamente diferente. Lo señalaré hacia este artículo, que habla sobre por qué es posible que no desee hacer eso: Dos razones para dejar de registrarse y dejar que las personas usen su producto primero. Si está haciendo que las personas sigan un registro estricto desde el principio, considere estos dos escenarios.

Escriba es una aplicación que te permite compartir información entre tu iPhone y tu Mac, como números de teléfono o imágenes. Para utilizar la aplicación, debe conectar los dos. Cuando abre la aplicación por primera vez, le brinda instrucciones específicas y claras sobre cómo proceder. Le dice exactamente qué hacer y si algo sale mal, incluso proporciona soluciones. La aplicación hace todo lo posible para ayudar a los usuarios a completar la incorporación con facilidad.

Crazy Blind Date fue una aplicación de citas de OKCupid que encontró a los usuarios citas a ciegas, como su nombre indica. Para crear una cuenta, el usuario tenía que subir una foto primero. La experiencia de hacerlo podría ser terriblemente difícil. En realidad, la copia era incorrecta, también podía cargar una foto, pero no podía cargar una foto si su teléfono estaba desconectado, no pudo tomar una y el ícono en sí no es lo suficientemente prominente. Esta mala usabilidad es probablemente la razón por la que Crazy Blind Date ya no está disponible.

escriba + CBD

Imagen destacada / miniatura, usos maqueta de iPhone 5c por Ben Lee

Deja un comentario