Título	Pablo Chicano 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, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Nº	3
Alumno(s)	Pablo Chicano

Tarea 3:

Seguir definiendo y profundizando el patrón y los 10 ejemplos estudiados, considerando las correcciones realizadas en la reunión anterior. También desarrollar descripción del estudio, identificando bajo el carácter del patrón elegido, qué es considerado una buena practica de Experiencia de Usuario (UX).

¿Qué se refiere a patrones de interacción?

Los patrones de interacción son elementos diseñados para jerarquizar la relación de un servicio con el usuario, su buen uso permite convertir la experiencia de este en una experiencia positiva, o por el contrario, un mal patrón creara una experiencia negativa o engañosa para el usuario.

Estos elementos consisten en el diseño de soluciones para problemas que pudiese experimentar el usuario intentando realizar ciertas tareas, como por ejemplo llenado de formularios extensos, suscripción y des-suscripción de cuentas o contenidos, pagos seguros, etc... Es decir, cualquier tarea que sin un patrón de interacción seria mucho más larga y tediosa.

Los patrones de interacción nacen desde el concepto de patrones de diseño, acuñado por el arquitecto Christopher Alexander en 1979, no dirigidos al software, sino, teniendo su origen en la búsqueda de la construcción de edificios de mayor calidad siguiendo una serie de patrones creados por este.
No fue hasta 1987 que fueron incluidos al lenguaje de la informática por Ward Cunningham y Kent Beck, para luego popularizarse a principios de 1990, publicados en el libro "Design Patterns" escrito por el grupo Gang of Four (GoF).
Desde esto, podemos ver que los patrones de interacción van más allá de la informática y el diseño de interfaz, teniendo su origen en la idea de completar tareas de forma más eficiente.

¿Por qué es importante como comunidad de diseñadores identificar estos criterios?

La importancia como comunidad de diseñadores de identificar estos criterios es el poder aprender de ellos y de cómo estos afectan la experiencia del usuario positiva o negativamente, al saber esto se pueden proponer y diseñar soluciones ante los problemas que puede causar el mal uso de un patrón, o por el contrario mejorar uno que no funcione correctamente. Así también aprendiendo a identificar cuando nos encontramos como usuarios ante una mala práctica y poder evitar caer en ella.

¿Cómo identificamos y a que se refiere cuando hablamos de una mala y buena práctica?

Para identificar una buena o mala práctica debemos basarnos en la tarea que debiese cumplir un patrón de interacción, una buena práctica debiese ayudar al usuario en las tareas que desea realizar, haciendo su experiencia amena y facilitándola lo máximo posible.

Se debe tener en cuenta también el dialogo que el servicio mantiene con el usuario, y que este lo dirija correctamente en su navegación. En cambio, una mala práctica se caracteriza por impedir el correcto desarrollo de dicha tarea, o buscar de forma intencional que el usuario no la logre o dirigirlo de manera errónea hacia otras tareas o contenidos que este no desea realizar.

Una mala práctica puede ser incidental, esto ocurre cuando lo que debiese ser un buen patrón de interacción es mal implementado, pudiendo estar mal diseñado o funcionando erróneamente, por otro lado estos también pueden ser intencionales, a modo de dificultar o incluso impedir que el usuario realice la tarea deseada, o también buscando directamente que este se dirija hacia otras tareas o contenidos que no está buscando, por medio también de información intencionalmente errónea.

Se puede hacer la tarea de identificar esto por medio de pasos:

Identificar el tipo de sitio o servicio en el que el usuario se encuentra.
Identificar la tarea que el usuario desea realizar.
Dependiendo de si las practicas implementadas para realizar la tarea deseada la vuelven fácil y amena o difícil y tediosa, podremos saber si la práctica utilizada es buena o mala.

Patron: Wizard

Un wizard es el dividir una tarea en una serie de pasos o condiciones que debe cumplir el usuario para completar una tarea mayor, por ejemplo, la instalación de un software, la creación de una cuenta de usuario, el pago por Internet, etc... Para que este patrón sea una buena práctica UX, debe cumplir su función de facilitar la tarea que se está realizando, dividiéndola en pasos para simplificarla, cuidando que sea la menor cantidad de pasos posibles, es decir, que si estos pasos fallan, hacen mas complicada la tarea, redirigen erróneamente de forma accidental o intencional al usuario, o no ayudan al usuario en su experiencia, este patrón pasa a ser una mala práctica UX.

Entre las malas prácticas mas comunes utilizadas con este patrón, están, el mal diseño de la herramienta, la cual genera errores, corta el proceso de forma inesperada, posee "timeouts" mal calculados o directamente sus pasos no responden. El uso de esta para redirigir al usuario a otros sitios o contenidos, no logrando realizar la tarea requerida. La descarga o instalación de contenido agregado que puede no ser del gusto del usuario, pero no se le informa de manera correcta para que sirve este. Wizard que no advierten que el proceso no sera automático y dan el aviso al "finalizar" este, quedando el usuario en la incertidumbre de la realización de su tarea. O directamente Wizards que no permiten la realización de la tarea que suponen hacer. Este es un patrón que debe ser diseñado con sumo cuidado, ya que es muy fácil que falle aunque se intente realizar una buena práctica si no se hace correctamente, consta de muchos elementos y su diseño de interfaz también debe poder mantener un dialogo que no sea tedioso con el usuario.

Buenas prácticas:

1. Crear cuenta en Amazon.com

Nombre del Servicio: Amazon.com
Soporte del Servicio: Sitio web (con versión app) de ventas internacionales de productos y contenido multimedia.
Descripción de experiencia de usuario con el servicio: Buena UX. El servicio cumple con que el patrón permita facilitar la tarea que se hace, presenta una interfaz bastante intuitiva, lo que facilita la navegación del usuario, los pasos a seguir están bien explicados y no crean confusión en el usuario, así logrando que el proceso por pasos sea poco engorroso y bastante sencillo.
Colección de Pantallas:

Página principal, aparece pop up para "identificarse" si no hay una sesión iniciada.
Bajo el "botón" para iniciar sesión aparece la opción de registrarse, aunque no subrayada como la anterior.
Input de correo electrónico y contraseña, con verificación de coincidencia de contraseña y la seguridad de esta. Aceptar los términos y condiciones no requiere leer estos y se alojan en una página anexa.
Condiciones de Uso (Página anexa a la de creacíon de cuenta).
Aviso de privacidad de Amazon (Página anexa a la creación de cuenta).
Verificación de correo electrónico con código de seguridad.
Correo electrónico con el código de seguridad.
Ya con el código introducido se puede proseguir a crear la cuenta.
Cuenta creada e interfaz lista para usarse.

Partituras de Interacción:

2. Borrar cuenta en Mercadolibre.cl

Nombre del Servicio: Mercadolibre.cl
Soporte del Servicio: Sitio para vender productos online (con versión app).
Descripción de experiencia de usuario con el servicio: Buena Ux. Aunque el proceso no es intuitivo en un principio, al ir al apartado de "ayuda" se encuentran directamente los pasos de eliminación de cuenta, los cuales dividen esta tarea en secciones sencillas, sin necesidad de engorrosos y extensos formularios, también cumpliendo su función de seguridad verificando vía correo electrónico la identidad del usuario para evitar que la cuenta sea borrada por terceros.
Colección de Pantallas:

Página principal de Mercadolibre, al no estar directamente la opción de eliminar cuenta, se accede al menú de "ayuda".
Entre las opciones se encuentra "Configuración de mi cuenta", se selecciona esta para continuar.
Se despliegan nuevas opciones, entre ellas siendo este solo el tercer paso esta "quiero cancelar mi cuenta".
Por seguridad la página pide una verificación con código por correo electrónico.
Correo electrónico con código de verificación.
Al introducir el código recibido se puede continuar con el proceso.
Se pregunta breve mente el por qué del cierre de la cuenta, en este caso no se deben rellenar largos formularios ni textos como en otros sitios o servicios.
Se da a conocer lo que se perderá si se borra la cuenta y pide el consentimiento del dueño de esta para proceder.
En un recuadro verde se anuncia la cancelación de la cuenta, mas abajo se explica que se puede usar nuevamente el correo electrónico pero la cuenta creada sera una nueva cuenta.
Al proceder se salta nuevamente a la página de inicio de Mercadolibre, donde se puede navegar sin necesidad de tener cuenta.

Partituras de Interacción:

3. Recuperar cuenta en Uber eats

Nombre del Servicio: Uber eats
Soporte del Servicio: Aplicación para pedir comida rápida con servicio de entrega.
Descripción de experiencia de usuario con el servicio: Buena UX. El servicio aprovecha la existencia de datos pre existentes del usuario para acortar los pasos de este wizard, así creando pasos cortos y sencillos para recuperar la cuenta anterior del usuario.
Colección de Pantallas:

Pantalla de Carga de la aplicación.
Da la posibilidad automáticamente de recuperar cuenta, estando los datos requeridos en el teléfono (cuenta google vinculada).
Al no tener permisos de utilizar la ubicación muestra la ultima dirección utilizada en la cuenta anterior.
Pantalla popup para pedir permiso para utilizar la ubicación, requerida para el uso de la aplicación.
Input de datos e indicaciones especiales, solo la dirección y el modo de entrega son necesarios, indicado con un "*required" sobre estos. Mientras no se ingresen estos datos no se puede continuar utilizando el botón de "guardar".
Ingresados los datos de desbloquea la función de "guardar".
Cuenta recuperada y app lista para usarse.

Partituras de Interacción:

4. Instalar MediBang Paint Pro

Nombre del Servicio: MediBang Paint Pro
Soporte del Servicio: Software de dibujo digital (con versión app).
Descripción de experiencia de usuario con el servicio: Buena UX. El servicio de descarga e instalación del programa es acertado, bastante sencillo y bien indicado con instrucciones y pop ups, no instala programas extra dentro del paquete y permite al usuario configurar la instalación a gusto, ofreciendo también variedad de idiomas. Es gratuito y no requiere la creación de una cuenta para usarse, esta última solo ofrece servicios en la nube y variedad de pinceles y adiciones para el programa.

Esto permite que los pasos a seguir sean cortos y ofrezcan ayuda y contenido de interés para el usuario, sin ser invasivos o instalar programas fantasma.

Colección de Pantallas:

Página web del programa para su descarga, botón notorio con instrucciones claras.
Redirección a página de descargas, donde se debe seleccionar el OS y si el sistema es de 32 o 64 bits, en este caso de 64, también ofrece la posibilidad de ver tutoriales, los requerimientos del sistema y el historial de actualizaciones del programa.
Inicia la descarga en el browser, no utiliza servicios externos de descarga.
Primera pantalla del servicio de instalación, selección de idiomas.
Advertencia para usuarios de versiones antiguas del programa, se debe aceptar para poder continuar con la instalación.
Selección de dirección de instalación del programa.
Selección de carpeta.
Carpeta en el menú de inicio, también permite devolverse a la selección anterior.
Crear ícono en escritorio (opcional).
Dar permiso para la instalación.
Proceso de instalación con detalle y barra de progreso.
Fin de la instalación con opción de ver tutoriales.
Ventana de Publicidad (Se puede cerrar).
Ventana de tutoriales variados (Se puede cerrar).
Sub ventana de error por no estar iniciada una sesión, lo cual no es necesario para utilizar el programa, también se puede ignorar y cerrar.
Programa listo para usarse.

Partituras de Interacción:

5. Pagar cuenta Esval via Webpay

Nombre del Servicio: Webpay
Soporte del Servicio: Servicio de pago seguro en línea desde cuenta bancaria.
Descripción de experiencia de usuario con el servicio: UX aceptable. El servicio ofrece pasos bastante sencillos para realizar el pago, son pocos pasos pero está medianamente explicado (siendo un servicio que debiese estar pensado para todo tipo de usuarios, quienes pueden tener poco conocimiento informático), y bloquea ciertas opciones como la descarga del comprobante de pago al seleccionar otras, junto a timout muy cortos de la página.
Colección de Pantallas:

Pantalla principal de Esval.cl, se debe ingresar el número de socio y rut para poder acceder a las opciones de conocer saldo, pagar cuenta u obtener boleta. En este caso se selecciona la de pagar cuenta.
Pantalla de selección de método de pago, se debe seleccionar el saldo a pagar para obtener las opciones de pago, esto no está indicado en la página.
Al seleccionar el saldo se despliegan las opciones de pago, en este caso se utilizará webpay, luego de esto se puede dar al "botón" "pagar en línea" para proceder.
Pantalla de selección de tipo de cuenta bancaria, la cual muestra cuatro opciones, en este caso "tarjeta de débito".
Pantalla de selección de banco e ingreso de datos, en este caso el rut, mientras no se ingrese uno válido, no se puede pulsar el "botón" de "Continuar", necesario para proceder con la operación.
Ingresados correctamente los datos se puede continuar.
Pantalla de carga "Esta transacción se realiza bajo un sistema seguro".
Ingreso a cuenta Banco Estado vía Webpay.
Ingreso de tercera clave de seguridad, junto a informaciones varias de la cuenta.
Nuevamente pantalla de carga "Esta transacción se realiza bajo un sistema seguro".
Pantalla de carga "Estamos autorizando su transacción".
Verificación de pago y opción de descargar el comprobante de pago.
Comprobante de pago. (luego de esto la página salta nuevamente a la página principal de esval.cl).

Partituras de Interacción:

Malas prácticas:

1. Crear cuenta en Habbo.es

Nombre del Servicio: Habbo.es
Soporte del Servicio: Red social y comunidad en línea (web y móvil).
Descripción de experiencia de usuario con el servicio: Ux Mediocre. Al momento de la creación de la cuenta la página no verifica la lectura de los términos y condiciones como otras verificando el scroll del texto, luego de esto, no indica la necesidad de autenticar la cuenta para que la interfaz funcione al momento de crear un personaje, ya que el botón para continuar no responde y no indica el por qué, por lo cual se debe intuir que el problema es la autenticación del correo.

A partir de esto, al bloquearse pasos que debiesen permitir la continuidad del proceso, este wizard pasa a ser una mala práctica UX ya que no logra cumplir con su función básica de dividir para conquistar.

Colección de Pantallas:

Página principal, botón "Únete" para registrarse, totalmente visible.
Input de correo y contraseña, con indicador de seguridad de esta.
Términos y condiciones en página anexa, no verifica su lectura.
Verificación de edad y captcha para poder continuar con el proceso.
Aviso para ejecutar complemento flash player.
Permiso de ejecución complemento flash player.
Creación de personaje.
Botón "Estoy listo" no responde y no indica el por qué.
Se intuye que es la verificación del correo electrónico, no indicada por la página anterior.
ventana popup con nuevo captcha.
Página parece funcionar normalmente, Se debe hacer click en "Hotel".
Interfaz funciona normalmente luego de resolver el problema de autenticación.

Partituras de Interacción:

2. Crear cuenta en Mercadolibre.cl

Nombre del Servicio: Mercadolibre.cl
Soporte del Servicio: Sitio para vender productos online (con versión app).
Descripción de experiencia de usuario con el servicio: UX Mediocre. Aunque el wizard consiste en dividir para simplificar el proceso realizado, el proceso en este caso de creación de cuenta es demasiado sencillo, no verifica la veracidad de los datos como el correo electrónico y esto hace que la página se preste a la presencia de cuentas falsas y bots, lo que daña la calidad de la experiencia de usuario, por lo cuál, aquí falla el patrón no por sus características primarias, sino a lo que conllevan la toma de decisiones que se hacen al implementarlo.
Colección de Pantallas:

Página principal de mercadolibre, creación de cuenta señalada en la parte superior derecha de la página.
Input de nombres, correo y contraseña, pero no verifica la existencia del correo ni es necesaria una verificación posterior.
Seleccionar "Crear cuenta"
Recuadro verde anuncia la cuenta ya lista para usarse.
Único correo recibido es publicidad de la página, sin opciones de seguridad.
correo electrónico.
correo electrónico.

Partituras de Interacción:

3. Obtener datos personales en Spotify.cl

Nombre del Servicio: Spotify.cl
Soporte del Servicio: Servicio de streaming de contenido musical y podcast.
Descripción de experiencia de usuario con el servicio: Mala UX. Los pasos del proceso son engorrosos y poco claros, difíciles de encontrar, y finalmente no se da la seguridad de que los datos se vayan a entregar ya que el proceso dura 30 días, lo cual no se advierte cuando se realiza el proceso. En este caso falla el patrón ya que los pasos no llevan al fin esperado, por lo cual este no se cumple, o no en el momento deseado.
Colección de Pantallas:

Página de Login de Spotify.cl
Se selecciona "Configuración de privacidad" en búsqueda de los datos que se quieren descargar.
Se accede a "descarga de datos" donde se muestran tres pasos simples (lo cual posteriormente se puede ver que no es así).
Pop up con un captcha para confirmar que quien accede no es un bot.
Ventana pop up avisa que se ha enviado un correo electrónico de confirmación para poder continuar con el proceso.
Se confirma desde el correo electrónico para poder continuar.
El proceso, aunque se mostraba corto, queda en espera de hasta 30 días para poder completarse, lo cual no se advierte anteriormente en el mismo.

Partituras de Interacción:

4.Desinstalar Pokémon TCG online

Nombre del Servicio: Pokémon TCG online
Soporte del Servicio: Juego en línea basado en el juego de cartas Pokémon Trading Card Game.
Descripción de experiencia de usuario con el servicio: UX Mediocre. Al intentar desinstalar el juego desde el apartado para quitar programas de windows, ya que desde el mismo juego o la carpeta de archivos de este no es posible, el proceso da error, por lo cual se debe seleccionar "modificar" y desde ahí desinstalar el programa, dentro de esta nueva ventana, se presentan errores gráficos en la interfaz. En este caso el wizard no cumple con sus funciones ya que sus pasos no ayudan a la realización de la tarea, la necesidad de realizar la instalación de forma no intuitiva y presentando errores varios no permite el correcto desarrollo de la tarea requerida.
Colección de Pantallas:

Aplicaciones y características en windows, ya que desde el programa no puede desinstalarse este mismo.
Se selecciona la opcion de "desinstalar".
Se confirma la opcion de "desinstalar".
Ventana de error, se selecciona reintentar y nuevamente da error, quedando en un loop.
Advertencia de que no puede realizarse el proceso de desinstalación con un mensaje de error.
Al no poder desinstalarse directamente se selecciona la opción de "modificar".
Esto abre el servicio de instalación del programa.
Al pulsar "siguiente" se muestran tres opciones, modificar, reparar y eliminar, se escoge la última opción.
La interfaz presenta errores gráficos que no permiten leer con claridad la opción demarcada.
Al pulsar eliminar aparece una barra de progreso.
Finalmente se logra eliminar el programa, aunque con un proceso engorroso y poco claro.

Partituras de Interacción:

5. Instalar Oracle VM VirtualBox

Nombre del Servicio: Oracle VM VirtualBox
Soporte del Servicio: Software para crear máquinas virtuales de OS.
Descripción de experiencia de usuario con el servicio: Ux Neutral. Aunque este wizard cumple con facilitar la tarea dividiéndola, se instalan múltiples complementos que no le son descritos al usuario, lo que puede causarle a este desconfianza en la seguridad de la instalación, también considerando que este programa no está orientado a cualquier tipo de usuario.
Colección de Pantallas:

Página principal de virtualbox.org con botón de descarga.
Página de descarga con opciones multiples para distintos OS, en este caso windows.
Se inicia la descarga vía descarga directa.
Inicia el programa de instalación, se da click a "next".
Selección de carpetas de archivos de instalación.
Opciones de accesos directos y asociación de archivos con casillas desmarcables.
Alerta de reinicio de conección a la red.
Inicio de instalación, se clickea "Install".
Ventana con barra de progreso.
Primer Ventana pop up de complemento no explicado.
Segunda Ventana pop up de complemento no explicado.
Tercera Ventana pop up de complemento no explicado.
Fin de la instalación, opción de iniciar el programa con casilla desmarcable.
Programa listo para usarse.