Roberta Durán Tarea 3 - Taller de Diseño de Interacción 2020

De Casiopea



TítuloRoberta Durán Tarea 3 - Taller Diseño de Interacción 2020
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2020
CarrerasDiseño, Diseño Gráfico, Diseño Industrial
3
Alumno(s)Roberta Durán

¿Qué es un patrón de interacción?

Patrón: Del lat. patrōnus; modelo que sirve de muestra para sacar otra cosa igual.

Interacción: acción que se ejerce recíprocamente entre dos o más objetos, personas, agentes, fuerzas, funciones, etc.

Un patrón de diseño es una formalidad de documentar una solución a un problema de diseño común. Éstos son una forma de describir soluciones a problemas comunes de usabilidad o accesibilidad en un contexto específico. Documentan modelos de interacción que facilitan a los usuarios comprender una interfaz y realizar sus tareas.

En éste caso específico, más que a una manera de reproducir una forma, se identifica según la forma en la que opera, ya que si bien de por sí tiene una estructura definida, la manera en cómo procede con el y para el usuario varía y es ahí donde cae el énfasis de la identificación de su comportamiento.

¿Porqué es importante identificarlos?

Es importante identificar cómo se comportan las interacciones de un sitio ya que esto puede (o no) facilitar los procesos a los cuáles el usuario se ve enfrentado y todo lo que eso conlleva, en el fondo de la materia, corresponde a un problema no sólo de interfaz sino qué a la experiencia de usuario.

La experiencia de usuario es el conjunto de factores y elementos relativos a la interacción del usuario con un entorno o dispositivo concretos, dando como resultado una percepción positiva o negativa de dicho servicio, producto o dispositivo. Dicha percepción depende, no solo de los factores relativos al diseño (hardware, software, usabilidad, diseño de interacción, accesibilidad, diseño gráfico y visual, calidad de los contenidos, buscabilidad o encontrabilidad, utilidad, etc) sino de aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, confiabilidad del producto, etc.

¿Cómo identificar una buena o mala práctica?

Es relevante para la definición de los casos establecer un criterio para la identificación del comportamiento de los patrones ya que éstos están compuestos de diversos puntos que hay que tener en cuenta, como por ejemplo:

  • ¿Para qué es el sitio?
  • ¿Cuál es el contenido o información que entrega?

y a partir de eso

  • ¿Cuáles son las posibles interacciones que existen dentro de él?

De ésta forma es más claro establecer cuál es el público objetivo y en base a nuestra propia experiencia determinar si aquella interacción es congruente con su propósito o va por camino equivocado. Según ésto podemos determinarlo como buena o mala práctica.

Patrón de Interacción: Recuperar Cuenta

La acción de recuperación de cuenta está completamente relacionado a el "log in" y a la "recuperación de contraseñas", que podrían considerarse otros patrones de interacción que se unen bajo el concepto de Seguridad de datos y consecuentemente a la sensación de confianza al ingresar a un sitio o app. Ahora, para entender mejor esta sección, he establecido algunas "leyes o características" para comprender si este patrón se cumple o no.

  1. Debe cumplir con el patrón de acceso, es decir, debe estar relacionado a la recuperación o creación de un usuario.
  2. Debe dar libertad al usuario, es decir, la plataforma debe ofrecer diversas maneras de poder ingresar/recuperar (agotar recursos) y garantizar su seguridad.
  3. Debe ser accesible, osea, que aquellas maneras de ingresar no sean discriminatorias, por tanto no tiene acciones limitadas a pagos.

Buenas prácticas

Se consideran buenas prácticas aquellas que permiten que el proceso de recuperación de cuenta pierda el sesgo de logeo, es decir, cuente con más de una opción para que el usuario pueda de manera efectiva y segura, validar y confirmar su cuenta. Eso como base, ya que los "mejores" casos son aquellos donde este criterio de opciones de recuperación, se ve anulado debido a que el logeo ofrece más de 3 opciones para poder ingresar, haciendo que el proceso de recuperación de cuenta no exista, porque obvia que el usuario de una u otra forma podrá hacer el ingreso.

Ejemplo 1

  • Nombre del Servicio: Latam
  • Soporte del Servicio : Sitio web y aplicación móvil
  • Escala de Habitos UX : Aceptable
  • Descripción de experiencia de usuario con el servicio: Es bastante útil que hagan el distingo de recuperación por Usuario y Contraseña, ya que no necesariamente uno lleva a lo otro. En primera lugar, la recuperación de usuario deriba en 2 vías, rut y mail, el primero con un resultado de información parcial y el segundo con una mayor cantidad de información, donde finalizan redireccionando al home. En segundo lugar, la recuperación de clave se ve truncada ya que el rut de socio no está asociado a una dirección de email (por donde se envían los siguientes pasos para crear una nueva clave), solicitando así actualizar los datos. Mientras se ingresan la información en los campos requeridos se va haciendo check de que la información proporcionada coincide con los datos de la cuenta, ingresando asi el correo y finalmente pide una foto de la cédula de identidad, asegurando la veracidad de el usuario que requiere la actualización de datos. La acción resulta satisfactoria, hasta que lees que la respuesta a esa solicitud la tendrás dentro de las próximas 72 hrs, además de luego redirigirte al home de LatamPass, que tiene una interfaz muy parecida a la de Latam, confundiendo al usuario si es que su propósito era realizar alguna otra acción dentro del sitio, como compra, etc.
  • Colección de Pantallas Secuenciales
 Latam1.jpg  Latam2.jpg  Latamdos3.png  Latam3.2.jpg Latamdos4.jpg  Latam4.2.jpg  Latam5.jpg  Latam6.jpg Latam7.jpg  Latam8.jpg  Latam9.jpg  Latam10.jpg Latam11.jpg
  • Partitura de Interacción

Ejemplo 2

  • Nombre del Servicio: Rappi
  • Soporte del Servicio : Aplicación móvil
  • Escala de Habitos UX : Bueno
  • Descripción de experiencia de usuario con el servicio: Ya que el patrón de recuperar cuenta está completamente asociado a "logearse" en una app o sitio web, este ejemplo es bastante claro respecto a las diversas maneras desde donde se puede realizar esta acción. Ésta app de servicio delivery claramente está interesada en que el usuario pueda tener fácil acceso a este servicio, ya que ofrece 4 maneras distintas de ingresar, haciendo casi "imposible" que exista el patrón de recuperación de cuenta, ya que el ingreso puede estar asociado a cualquiera de las opciones (sincronizadas a través de los datos), además ofrece ingresar como invitado, sin obligarlo necesariamente a crear una cuenta, sólo para que el usuario pueda ver de qué se trata.
  • Colección de Pantallas Secuenciales
  IMG 9117.PNG  Rappi2.PNG  Rappi3.PNG Rappi4.PNG  Rappi5.PNG  Rappi6.PNG  Rappi7.PNG Rappi8.PNG  
  • Partitura de Interacción

Ejemplo 3

  • Nombre del Servicio: Google
  • Soporte del Servicio : Sitio web y aplicación móvil
  • Escala de Habitos UX : Bueno
  • Descripción de experiencia de usuario con el servicio: Este método de acceder a la recuperación de la cuenta procede bajo el método de autenticación de dos factores (2-factor authentication), procediendo a través de datos que conoces y un dispositivo sincronizado a tu cuenta. Además de esto, cabe destacar que al igual que el ejemplo anterior, también realiza distingo entre nombre de usuario y contraseña. Al recuperar el nombre de usuario a través de la sincronización con un dispositivo móvil, que no pareciera ser difícil , luego se "libera" la opción de "olvidé contraseña" donde literal agota todos los recursos posibles para la recuperación de esta, dando 5 opciones distintas para ese propósito, hasta que después te devuelve al punto de partida.
  • Colección de Pantallas Secuenciales
 Gugul1.jpg  Gugul2.jpg  Gugul3.jpg  Gugul4.jpg Gugul5.jpg  Gugul6.jpg  Gugul7.jpg  Gugul8.jpg Gugul9.jpg  Gugul11.jpg  Gugul12.jpg  Gugul13.jpg Gugul14.jpg  Gugul15.jpg
  • Partitura de Interacción

Ejemplo 4

  • Nombre del Servicio: Tiktok
  • Soporte del Servicio : Aplicación móvil
  • Escala de Habitos UX : Bueno
  • Descripción de experiencia de usuario con el servicio: Siguiendo el ejemplo de Rappi, Tiktok (la aplicación de moda) no se queda atrás. El ingreso al contenido de la app es completamente abierto, como si estuvieras en modo invitado, puedes hacer scroll, incluso dar like, buscar hashtags y ver comentarios de las publicaciones. También puedes hacer tu propio video, probar efectos, agregar una descripción e incluso ver la configuración de privacidad, hasta que deseas publicar, ahí es donde te ofrece nada más ni nada menos que 5 opciones de registro para crear una cuenta. Mismo procedimiento para las secciones bandeja de entrada y yo.
  • Colección de Pantallas Secuenciales
  Tiktok1.jpg  Tiktok2.PNG  Tiktok3.PNG Tiktok4.PNG  Tiktok4.1.PNG  Tiktok4.2.1.PNG Tiktok4.2busqueda.png  Tiktok5.2.PNG  Tiktok5.PNG  Tiktok6.PNG  Tiktok7.PNG Tiktok8.PNG  Tiktok9.PNG  Tiktok10anterior.PNG Tiktok11.PNG Tiktok10.2.png Tiktok12.PNG  Tiktok13.PNG  Tiktok14.PNGTiktok15.PNG  Tiktok16.PNG  Tiktok17.PNG
  • Partitura de Interacción

Ejemplo 5

  • Nombre del Servicio: Aliexpress
  • Soporte del Servicio : Aplicación móvil
  • Escala de Habitos UX : Bueno
  • Descripción de experiencia de usuario con el servicio: Este ejemplo creo que hasta el momento es el más representativo del caso. Al ingresar en la app, tienes libre acceso a toda la información y secciones, pero a diferencia de los dos ejemplos anteriores, este utiliza métodos más insistentes de persuasión. Recién abierta la app solicita enviarte notificaciones, en la sección de búsqueda cuenta con la opción de cámara para juegos, búsqueda por foto entre otros para lo cual también solicita acceso, eres capaz de filtrar la búsqueda, al seleccionar un producto y hacer una captura de pantalla por defecto hace un "swipe up" para compartir en una amplia variedad de redes sociales. Al ir al carrito de compra, seleccionar especificaciones del producto, finalmente al llegar a la sección de pago ofrece ofertas a nuevos usuarios, al pinchar comprar, automáticamente te exige registrarte con alguna red social (6 opciones de logeo). Lo mismo ocurre al "dar like" a un producto. Mientras se explora las otras secciones te notifica de cupones por primera compra.
  • Colección de Pantallas Secuenciales
  Aliespres1.PNG  Aliespres2.PNG  Aliespres3.PNG Aliespres4.PNG  Aliespres6.2.PNG  Aliespres6filtros.PNG Aliespres7.2.PNG  Aliespres7sugerencia.PNG  Aliespres8.PNG  Aliespres9.PNG  Aliespres10.PNG Aliespres11.PNG  Aliespres12.PNG  Aliespres13.PNG Aliespres14.2.PNG Aliespres14antes.PNG Aliespres15.PNG 
  • Partitura de Interacción

Malas prácticas

Se consideran malas prácticas aquellas que tienen un sesgo de seguridad que predomina dentro del proceso de recuperación, haciendo que éste sea muy cerrado, no dando mayores posibilidades al usuario de poder ingresar en caso de olvidar su cuenta. También cuentan aquellos en donde el proceso se ve frustrado por ser demasiado extenso o incompleto, dejando a la deriva al usuario, sin ofrecer una ayuda significativa.

Ejemplo 1

  • Nombre del Servicio: Spotify
  • Soporte del Servicio : Sitio web y aplicación móvil
  • Escala de Habitos UX : Malo
  • Descripción de experiencia de usuario con el servicio: Al ingresar al sitio e intentar logearme, sólo admite la recuperación de contraseña a través del email, dando la opción de ponerse en contacto con el "Soporte de Spotify". Al ingresar al sitio de soporte, comienza de manera poco esperanzadora un mensaje poniéndo énfasis en que la respuesta del equipo será lenta debido a la situación Covid-19. Al pulsar en la categoría "inicio de sesión" se va realizando un filtro hacia opciones mas específicas, donde además se notifica de avance de la situación con una barra de avance en la parte superior. Al seleccionar la opción "mi cuenta ha sido vulnerada" se despliega un extenso texto con los pasos a seguir, en la primera opción reiterando la misma recuperación de contraseña y la segunda opción anteponiendo que necesitarás de un recibo de pago o un estado de cuenta bancario para acceder al servicio de formulario de contacto, el cual al hacer click te devuelve al mismo punto de partida. Muy segregador y frustrante.
  • Colección de Pantallas Secuenciales
 Espotifai1.jpg  Espotifai2.jpg  Espotifai3.jpgEspotifai4.jpg Espotifai5.jpg  Espotifai6.jpg Espotifai7.jpg  Espotifai8.jpg Espotifai9.jpg Espotifai10.jpg Espotifai11.jpg
  • Partitura de Interacción

Ejemplo 2

  • Nombre del Servicio: Wiki Casiopea Escuela de Arquitectura y Diseño PUCV
  • Soporte del Servicio : Sitio web
  • Escala de Habitos UX : Mediocre
  • Descripción de experiencia de usuario con el servicio: Al ingresar al sitio, es difícil identificar donde acceder o crear un usuario. Al llegar a la sección "Acceder" pide dos campos de llenado, simulando que olvidé mis datos, hay una única opción de "olvidé contraseña", cuando al acceder al link, aparecer nuevamente dos campos solicitando información y no se comprende mediante la interfaz que se debe rellenar sólo 1 de los dos campos para poder proseguir. Falta información del proceso, no especifica de que manera procederá el siguiente paso, ya que pareciera que podría poner cualquier usuario o cualquier mail para recuperar o adulterar la cuenta.
  • Colección de Pantallas Secuenciales
 Wiki1casiopea.png  Wiki2casiopea.png  Wiki3casiopea.png  Wiki4casiopea.png Wiki5casiopea.png
  • Partitura de Interacción

Ejemplo 3

  • Nombre del Servicio: App Store de Apple
  • Soporte del Servicio : Aplicación móvil
  • Escala de Habitos UX : Mediocre
  • Descripción de experiencia de usuario con el servicio: La forma en que procede appstore para recuperar la cuenta o contraseña no es muy amable ni eficaz. En primer lugar, se intenta recuperar la contraseña, en el cual la acción se habilita digitando el patrón numérico de desbloqueo. En segundo lugar, se intenta recuperar el ID de Apple, el cual extrañamente al ingresar los datos responde con que no hay ningun ID asociado a esos datos, lo que resulta un poco confuso. En tercer lugar, al llegar al paso de ingresar patrón, poniéndonos en el caso de que estubiera olvidado, se despliega información de la demora que puede llegar a tener la solicitud y para continuar se solicita introducir los datos de la tarjeta de crédito asociada. Al no tener los datos, llegas al último paso, con un mensaje que confirma tu petición y que serás ubicado vía llamada telefónica, lo cual resulta incómodo siendo la única opción.
  • Colección de Pantallas Secuenciales
Apstor1.PNG  Apstor2.PNG  Apstor3.PNG Apstor4.PNG  Apstor5.PNG  Apstor6.PNG  Apstor7.PNG Apstor2.PNG Apstor8.PNG  Apstor9.PNG Apstor2.PNG  Apstor3.PNG Apstor10.PNG Apstor11.PNG Apstor12.PNGApstor13.PNG Apstor14.PNG Apstor15.PNG
  • Partitura de Interacción

Ejemplo 4

  • Nombre del Servicio: Facebook
  • Soporte del Servicio : Sitio web y aplicación móvil
  • Escala de Habitos UX : Malo
  • Descripción de experiencia de usuario con el servicio: Al ser un sitio que tubo bastante auge y aún hay bastante gente que lo utiliza, la recuperación de cuenta es insuficiente ya que sólo lo asocia a datos del usuario, cuando podría utilizar el método de datos y dispositivos sincronizados, considerando que además es una app muy utilizada. Por lo que al seleccionar la opción "no tengo acceso a mi correo" se despliega un mensaje que informar que lamentablemente no se puede autenticar tu cuenta, sólo dándote la opción de ir a la sección e preguntas frecuentes.
  • Colección de Pantallas Secuenciales:
 Feisbuk1.png  Feisbuk2.png  Feisbuk3.png  Feisbuk4.png Feisbuk5.png  Feisbuk6.png
  • Partitura de Interacción

Ejemplo 5

  • Nombre del Servicio: Outlook (hotmail)
  • Soporte del Servicio : Sitio web y aplicación móvil
  • Escala de Habitos UX : Malo
  • Descripción de experiencia de usuario con el servicio: Al ingresar al sitio se observa una interfaz simple, lo que permite encontrar rápidamente el botón de inicio de sesión, luego, lleva al logeo, y selecciono "opciones de inicio de sesión", en donde se despliega una serie de maneras de entrar que son bastante poco convencionales, como github, llave de seguridad y google. Luego al clickear en "he olvidado mi nombre de usuario" te lleva a ingresar un correo alternativo u otro teléfono que ya esté asociado como alternativo a la dirección de outlook, al ingresar siguiente debes esperar a la confirmación vía mensaje de texto con un código de verificación, que al ingresarlo lo único que produce es decirte que aquel número utilizado ya se encuentra sincronizado al correo, por lo que debes iniciar sesión y básicamente te deja a la deriva, si es que no existe un correo alternativo, te lleva a iniciar sesión de manera normal, no dando una mayor solución al ingreso.
  • Colección de Pantallas Secuenciales:
 Autluk1.png  Autluk2.png  Autluk3.png  Autluk4.png Autluk5.png  Autluk6.png  Autluk7.png
  • Partitura de Interacción