Título	Javiera Galaz Tarea 3- Taller de Diseño de Interacción 2020
Asignatura	Taller de Diseño de Interacción
Del Curso	Taller de Diseño de Interacción 2020
Carreras	Diseño
Nº	3
Alumno(s)	Javiera Galaz

¿Qué son los Patrones de Interacción?

En el mundo de la web existen diferentes patrones que se relacionan entre si, los cuales resultan necesarios para la navegación e interacción con el usuario. Un patrón de interacción es constantemente una solución a diferentes problemas que se aplican en el diseño de interfaces de servicios en multiplataformas digitales, los cuales tiene como objetivo que la interacción del usuario con el sitio o servicio sea la mejor posible. Los patrones de diseño definen como resulta ser el flujo de procesos de interacción, es decir, el dialogo entre un usuario y el servicio (todo lo que conlleva este, ya sean pasos, movimientos o elecciones) como a los elementos de interfaz que permiten tales acciones. Existen una variedad de patrones en el mundo de la navegación digital, que definen como es el servicio de un sitio, de acuerdo a la experiencia que adquiera el usuario. Para dichos patrones existen múltiples categorías, las cuales rigen diferentes formas de articular los procesos, donde deben resultar eficientes para lograr una buena experiencia con el usuario ,para que logren ser más efectivas y practicas la navegación de este, o por el contrario, estos pueden tener errores debido a que no todos apuntan a la necesidad del usuario volviéndola una mala experiencia durante su navegación , provocando que el sitio de vuelva tedioso y adquiera malas recomendaciones disminuyendo así las visitas al sitio web.

Buenas y Malas practicas

Las buenas y malas prácticas se utilizan como el mecanismo de criterio para poder evaluar que tan bueno o malo puede corresponder la navegación o uso de un sitio desde la perspectiva del usuario. En el mundo del usuario el identificar las buenas y malas practicas inciden en la satisfacción de este, su fidelidad como cliente y recomendaciones del servicio. También en otras ocasiones pueden ser utilizados para mejorar o reemplazar los problemas generados por el diseño, formando así una mejor, cómoda y útil interacción posible con el usuario. Por ende, los patrones de interacción son de gran importancia para el mundo de la navegación web y sus usuarios, ya que son soluciones generales y replicables durante el trayecto de este para un problema de uso común durante la interacción con el usuario. Además, son importantes, ya que, al utilizar buenas prácticas al navegar y cumplir con las necesidades del usuario, logran que el usuario tenga una buena experiencia, pero por el contrario pueden causar molestias en otros, provocando que el usuario probablemente no quiera volver a repetir la experiencia.

Patrón de Interacción :"Cambio y Recuperación de Contraseña"

Actualmente existen un sinfín de aplicaciones móviles en el mercado, desde redes sociales hasta apps de diferentes ámbitos que envuelven la entretención. Sin embargo, pese a que ambas fueron creadas con propósitos distintos, todas coinciden en algo, la creación de un usuario que obligatoriamente implica la creación de una ID de acceso, que la hace propia de cada usuario, y lo más importante: una contraseña. En el ámbito de seguridad existen dos opciones en torno al ajuste de la contraseña. La primera involucra el cambio en sí de esta, por diferentes motivos. Mientras que la segunda tiene el propósito de permitir la recuperación en caso de pérdida u olvido.

Para definir una buena o mala practica de dicho patrón se evaluaron y definieron ciertos puntos y criterios que hacen que una experiencia de usuario sea mejor que otra, dichos elementos que hacen una buena UX son aquellos que poseen los siguientes criterios:

En el caso de "Cambio de contraseña":

Usabilidad
1. Claridad del lenguajes visual-textual
2. Cantidad de pasos
Niveles de Seguridad de acuerdo a los Sistemas de Verificación de Usuario.
Notificación de Cambio (Elemento repetitivo en todas las apps).

Primeramente se encuentra la “Usabilidad”, es decir , que sea eficaz, con lenguaje visual-textual, fácil de descifrar y que cuente con la menor cantidad de procedimientos a realizar. Dentro de esta categoría de procedimientos se encuentran largos (los cuales son seguros y no seguros) y procedimientos cortos (seguros y no seguros).

Con respecto al segundo punto hace referencia a los “Niveles de seguridad de acuerdo a los sistemas de verificación de usuario”, es decir, que cuente con elementos o métodos de seguridad confiables y únicos, tales como:

Pregunta Personalizada
Llamada telefónica
Envió de códigos verificadores, ya sean iguales o diferentes a correo electrónico y número telefónico.
Envío de códigos verificadores al número telefónico.
Envío de códigos verificadores a correo electrónico

Y por Ultimo, respecto a la “Notificación de Cambios”, sé refiere al respaldo y aviso sobre el proceso realizado. La cual cuente con notificación de cambios realizados dentro de la misma plataforma y envió de mensaje a correo electrónico asociado.

Por consiguiente, una Buena UX en relación al proceso de “cambio de contraseña” debe componerse de procedimientos cortos y preciso que vayan de la mano con la utilización de un método seguro de verificación de usuario, junto con la notificación sobre el cambio realizado de esta. Es decir, procedimiento corto y confiable, con un sistema de verificación seguro y de notificación activa y rápida

En el caso de "Recuperar contraseña":

Comodidad
Sistemas de Verificación de Usuario:
1. Pregunta Personalizada
2. Llamada telefónica
3. Envió de códigos verificadores, ya sean iguales o diferentes a correo electrónico y número telefónico.
4. Envío de códigos verificadores al número telefónico.
5. Envío de códigos verificadores a correo electrónico
Notificación de Cambio
Requisitos para la creación de nueva contraseña

Ejemplos de Buenas UX

A continuación se expondrán 8 ejemplos de patrones que aluden al cambio y recuperación de contraseña , de los cuales afectan de buena manera la experiencia del usuario al navegar por un sitio o plataforma web.

Ejemplo n°1

Nombre del Servicio: Gmail
Soporte del Servicio: Multiplataforma , se puede utilizar en sitio web y como aplicación
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio:Al realizar el proceso de "Recuperar contraseña" resulto ser corto y eficaz.Este daba la posibilidad de realizar el proceso por medio de 3 opciones diferentes , las cuales eran a elección.

La opción A : Una de las mas seguras , ya que poseía varios pasos diferentes de verificación de usuario,primeramente crea un sistema de conexión de dispositivos paralela entre el celular y pantalla, ya que hace envió de preguntas para acceso, verificación mediante Touch ID y de identificación de números simultaneos. Finalmente una vez realizados todos los pasos anteriores te permite el ingreso de nueva contraseña y envió de un mensaje de aviso sobre el cambio realizado al correo electrónico.

La opción B : Te hace un envió directo de código verificador al numero telefónico asociado o por medio de una llamada telefónica, una vez ingresado el código te permite ingresar la nueva contraseña y finalmente envió de un mensaje de aviso sobre el cambio realizado al correo electrónico.

La Opción C : Te hace un envió directo de código verificador al correo electrónico alternativo asociado a la cuenta ,una vez ingresado el código te permite ingresar la nueva contraseña y finalmente envió de un mensaje de aviso sobre el cambio realizado al correo electrónico.

Colección de Pantallas Secuenciales: Opción A

1.Pagina Principal.

2.Ingreso de correo electrónico

3.Click en "¿Has olvidado tu contraseña?"

4.Ingreso de ultima contraseña y siguiente

5.Envió de notificación a celular para verificar identidad,click "si"

6.Instrucciones para verificación de identidad.

7.Ingreso a celular ,permiso para el acceso

8.Verificador de identidad mediante Touch ID para continuar

9.Sistema de verificación , click en mismo numero que aparece en la pantalla del computador

10.Ingreso de nueva contraseña

11.Mensaje de aviso al correo electrónico sobre cambio realizado

Colección de Pantallas Secuenciales: Opción B

             Archivo:GF OP4.png

1.Pagina Principal.

2.Ingreso de correo electrónico

3.Click en "¿Has olvidado tu contraseña?"

4.Ingreso de ultima contraseña y siguiente

5.Opciones sobre envió de código verificador .Opción 1 , Mensaje de texto

6. Código verificador

7.Ingreso de código

8.Ingreso de nueva contraseña

9.Mensaje de aviso al correo electrónico sobre cambio realizado

Colección de Pantallas Secuenciales: Opción C

1.Pagina Principal.

2.Ingreso de correo electrónico

3.Click en "¿Has olvidado tu contraseña?"

4.Ingreso de ultima contraseña y siguiente

5. Click en "No tengo mi teléfono"

6.Envió de código verificador a correo electrónico alternativo asociado

7. Código verificador

8.Ingreso de código

9.Ingreso de nueva contraseña

10.Mensaje de aviso al correo electrónico sobre cambio realizado

Ejemplo n°2

Nombre del Servicio: ICloud
Soporte del Servicio: Multiplataforma , se puede utilizar en sitio web y como aplicación
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio: El usuario al olvidar la contraseña de la cuenta de la aplicación , se somete a un procedimiento corto y seguro.Para realizar dicho cambio , se requiere del envió de dos códigos verificadores diferentes entre si para continuar el procedimiento , primero uno al numero telefónico asociado a la cuenta y el otro al correo electrónico .Al momento de ingresar ambos códigos , permite ingresar la nueva contraseña , en donde solo te permite continuar si cumple con los niveles de seguridad que requiere esta.Una vez completados los datos con dichos niveles permite actualizar e ingresar a la cuenta.Finalmente una vez realizado el cambio de contraseña te notifica inmediatamente en la pantalla y envía un mensaje al correo electrónico asociado.

Colección de Pantallas Secuenciales:

1.Ingreso a pagina principal y click en "¿Ha olvidado la contraseña?"

2.Ingreso de correo electrónico asociado a la cuenta

3.Ingreso de numero telefónico asociado

4.Aviso de notificación al celular , el cual no llega por lo que se hace click en "¿no tienes acceso a tu Iphone?"

5.Envió de código de verificación a numero telefónico asociado

6.Mensaje al teléfono recibido

7.Ingreso de código verificador

8.Envió de código de verificación a correo electrónico asociado

9.Mensaje al correo electrónico recibido

10.Ingreso de código verificador

11.Ingreso de nueva contraseña , la cual no permite continuar , ya que no cumple los niveles de seguridad

12.Por segunda vez ingreso de nueva contraseña permitiendo continuar el proceso

13.Contraseña Cambiada

14.Mensaje de aviso sobre el cambio de contraseña al correo electrónico asociado

Ejemplo n°3

Nombre del Servicio: Mercado Libre
Soporte del Servicio: Multiplataforma , se puede ingresar por sitio web y a través de la aplicación
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio: El usuario al olvidar la contraseña de la cuenta se somete a un procedimiento muy eficaz y seguro , ya que para verificar la identidad de quien esta detrás de la pantalla te ofrece dos opciones de verificación: 1.SMS al teléfono asociado o 2.Llamada telefónica. Finalmente una vez ingresado el código , te deja entrar automáticamente al perfil de usuario y te hace un envió de mensaje al correo electrónico asociado sobre el cambio de contraseña realizado.

Colección de Pantallas Secuenciales:

1.Ingreso a pagina principal y click en "No se mi clave"

2.Dos opciones de verificación , opción 1 "SMS al celular asociado" y opción 2 "llamada telefónica" .Clic en opción 1

3.Mensaje a numero telefónico con código de verificación

4.Ingreso de código

5.Perfil de Usuario

6.Mensaje de aviso sobre cambio realizado a correo electrónico asociado

Ejemplo n°4

Nombre del Servicio: Servicio de impuestos internos (SII)
Soporte del Servicio: Sitio Web
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio: El usuario al olvidar la contraseña de la cuenta se somete a un procedimiento muy eficaz y seguro , ya que para verificar la identidad de quien esta detrás de la pantalla te ofrece dos opciones de verificación:1.Pregunta Personalizada y 2. Correo electrónico. Una vez ingresado la respuesta a la opción 1 y el ingreso de un código captcha, te permite hacer el ingreso de un nueva clave con requisitos de seguridad.Finalmente una vez realizado el cambio de contraseña te notifica inmediatamente en la pantalla y envía un mensaje al correo electrónico asociado.

Colección de Pantallas Secuenciales:

1.Pagina Principal

2.Recuperar Clave

3.Ingreso de rut y aceptar clausura

4.Dos opciones a.Pregunta personalizada y b. Correo Electrónico .Click en opción A

5.Ingreso de respuesta y código captcha

6.Ingreso de nueva contraseña

7.Proceso Finalizado con éxito

8.Mensaje de aviso a correo electrónico

Ejemplo n°5

Nombre del Servicio: Club Movistar
Soporte del Servicio: Aplicación de Movistar
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio:El procedimiento para resolver esta situación al comienzo es eficaz y segura , ya que pide el ingreso de rut del usuario y te hacen envió de un código verificador al numero telefónico y correo electrónico asociado a la cuenta, por lo que una vez recibido el código e ingresado , te permite el acceso para crear una nueva contraseña.Finalmente luego de realizar el cambio de contraseña , hace envió de dos códigos verificadores diferentes , uno al numero telefónico y otro al correo electrónico .Una vez ingresados los códigos permite el cambio e ingresar a la cuenta.

Colección de Pantallas Secuenciales:

1.Ingreso a pagina principal y click en "olvido de contraseña"

2.Ingreso de rut

3.Envió de código a correo electrónico y numero telefónico

4.Mensaje a Correo electrónico

5.Mensaje a numero telefónico

6.Ingreso de código

7.Ingreso de nueva contraseña y click en "actualizar contraseña"

8.Envió de código a numero telefónico

9.Mensaje con código

10.Ingreso de código

11.Ingreso de Datos

12.Código de verificación a correo electrónico

13.Ingreso de código y fin del procedimiento

Ejemplo n°6

Nombre del Servicio: Spotify
Soporte del Servicio: Multiplataforma , se puede utilizar por sitio web y aplicación
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio: Fue un procedimiento corto y eficaz ,el cual para verificar al usuario te hace envió de un link al correo electrónico asociado y una vez dentro de este te permite ingresar la nueva contraseña. Finalmente una vez realizado el cambio de contraseña te notifica inmediatamente en la pantalla y envía un mensaje al correo electrónico asociado.

Colección de Pantallas Secuenciales:

1.Pagina Principal

2.Inicio de sesión y click en "¿Se te ha olvidado la contraseña?"

3.Ingreso de correo electrónico

4.Mensaje de Gmail y click en "Volver a establecer contraseña"

5.Ingreso de nueva contraseña

6.Contraseña actualizada

7.Mensaje de aviso a correo sobre cambio realizado

Ejemplo n°7

Nombre del Servicio: Tik Tok
Soporte del Servicio: Aplicación móvil
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio:Al realizar el cambio de contraseña en la aplicación de TikTok se requirió de un procedimiento fácil , corto y seguro , ya que a diferencia de otras aplicaciones esta en vez de pedir el ingreso de la contraseña actual , te envía un código de verificación al correo electrónico asociado y una vez de ingresar el código , te permite crear una nueva contraseña .Finalmente una vez realizado el cambio de contraseña te notifica inmediatamente en la pantalla y envía un mensaje al correo electrónico asociado.

Colección de Pantallas Secuenciales:

1.Ingreso a la App

2.Perfil se usuario

3.Click en la barra superior izquierda del celular y click en administrar cuenta

4.Ingresar a "contraseña"

5.Envió de código de verificación a correo electrónico

6.Mensaje con código

7.Introducir código

8.Crear nueva contraseña

9.Notificación de contraseña actualizada arriba de la pantalla

10.Regreso al perfil

Ejemplo n°8

Nombre del Servicio: Twitter
Soporte del Servicio: Multiplataforma, se puede utilizar en sitio web y a través de la aplicación
Escala de Hábitos UX: Buena
Descripción de experiencia de usuario con el servicio: Al realizar el cambio de contraseña , este requirió de un procedimiento corto y fácil , ya que solo pedía el ingreso de la actual y nueva contraseña .Finalmente una vez realizado el cambio de contraseña te notifica inmediatamente en la pantalla y envía un mensaje al correo electrónico asociado.

Colección de Pantallas Secuenciales:

1.Ingreso a la App de Twitter

2.Perfil de usuario

3.Configuración y privacidad

4.Ingreso a "cuenta" y click en "contraseña"

5.Completar datos de actual y nueva contraseña

6.Actualización de contraseña

7.Mensaje de aviso sobre cambio de contraseña a corre electrónico asociado a la cuenta

8.Regreso a Perfil de usuario

Partituras de Interacción

Ejemplos de Mala UX

A continuación se expondrán 5 ejemplos de patrones que aluden al cambio y recuperación de contraseña , de los cuales afectan de mala manera la experiencia del usuario al navegar por un sitio o plataforma web.

Ejemplo n°1

Nombre del Servicio: SkyAirline
Soporte del Servicio: Multiplataforma
Escala de Hábitos UX: Mala
Descripción de experiencia de usuario con el servicio: Mala , ya que al realizar el proceso de "recuperar contraseña" de un principio fue claro y fácil el acceso a esta , pero al momento de ingresar la nueva contraseña , no se pudo realizar el cambio, sin motivos , solo se hizo aparición de un mensaje solicitando que el cambio se hiciera mas tarde.Luego de un tiempo se realizo nuevamente el mismo procedimiento anterior , pero al ingresar la nueva contraseña y terminar el procedimiento , nuevamente apareció el mensaje de error y no se pudo terminar el objetivo deseado.

Colección de Pantallas Secuenciales:

1.Pagina Principal

2.Ingreso/Registro y click en "Recuperar contraseña"

3.Ingreso de Correo electrónico

4.Aviso sobre mensaje a correo electrónico para continuar el proceso

5.Bandeja de entrada de gmail

6.Mensaje de Sky y click en "Recuperar Contraseña"

7.Ingreso de Nueva contraseña

8.Aviso de error , El proceso no se puede realizar

Partituras de Interacción

Ejemplo n°2

Nombre del Servicio: Cinemark
Soporte del Servicio: Sitio Web
Escala de Hábitos UX: Mala
Descripción de experiencia de usuario con el servicio: Al realizar el proceso de "Recuperar contraseña" solo se pudo llegar al ingreso de correo electrónico asociado , ya que luego de este no se pudo continuar el procedimiento.Finalmente tras intentar varias veces mas tarde el mismo procedimiento ,de igual forma nuevamente no se pudo concluir el proceso.

Colección de Pantallas Secuenciales:

1.Pagina Principal

2.Inicio de Sesión y Click en "Recuperar Contraseña"

3.Ingreso de Correo electrónico asociado

4.No se puede realizar el proceso

Ejemplo n°3

Nombre del Servicio: PedidosYa
Soporte del Servicio: Aplicación de Delivery
Escala de Hábitos UX: Mala
Descripción de experiencia de usuario con el servicio: Se desea realizar un pedido de comida , pero al momento de ingresar los datos en la aplicación de PedidosYa no es posible ,ya que la contraseña de ingreso a sido olvidada.Al momento de querer cambiar la contraseña , te hacen envió de un mensaje al correo electrónico asociado a la cuenta para continuar el proceso , una vez abierto el mensaje te da dos opciones de cambio , en la primera solo debes hacer click en "cambiar contraseña" y la segunda es ingresar un link .Ambas opciones abren ventanas diferentes, las cuales están vacías y no permiten realizar el cambio , por lo que no se puede realizar el pedido.

Colección de Pantallas Secuenciales:

1.Ingreso a la aplicación

2.Pagina de ingreso a cuenta y click en "¿Olvidaste tu contraseña?"

3.Ingreso de correo electrónico para cambio de contraseña

4.Aviso sobre envió de mensaje a correo electrónico

5.Bandeja de entrada de Gmail

6.Mensaje para cambiar contraseña y click en opción 1 "cambiar contraseña"

7.Nueva ventada que no se logra cargar quedando vacía sin información

8.Regreso atrás para utilizar la opción 2 y clik en el link señalado

9.Se abre una nueva ventana con el link señalado y nuevamente aparece vació sin información

Partituras de Interacción:

Ejemplo n°4

Nombre del Servicio: Facebook
Soporte del Servicio: Multiplataforma , se puede utilizar a través de Sitio Web y al descargar la aplicación en diferente dispositivos.
Escala de Hábitos UX: Neutral
Descripción de experiencia de usuario con el servicio: Se quiere entrar a la plataforma para realizar un cambio de contraseña ,ya que no se a cambiado por un largo tiempo ,el cual requirió de un procedimiento claro y preciso , ya que el lenguaje visual era de fácil lectura , haciendo que fuera mas rápido el cambio de contraseña ,en donde al momento de realizar esta solicitud , pedía volver a ingresar la contraseña actual junto con la nueva por motivos de seguridad y al momento de realizarse el cambio , esta te avisaba rápidamente con una notificación y mensaje al correo electrónico asociado a la cuenta.