Antonia López 3 - Taller de Diseño de Interacción 2020

De Casiopea



TítuloAntonia López Tarea 3 - Taller de Diseño de Interacción 2020
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2020
CarrerasDiseño
3
Alumno(s)Antonia López

Tarea N°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).

Patrón: Comentar una publicación

Patrón de interacción ente el sistema y el usuario que abarca todo lo relacionado a comentar una publicación, ya sea en cualquier plataforma. Este patrón se califica en una escala cuyos extremos se manifiestan como satisfactorio o insuficiente, los cuales se identifican según qué tan completo es el servicio con el usuario, como por ejemplo que tanta accesibilidad existe en el contenido del comentario, la diversidad de éste, la libertad al publicar el comentario, la capacidad de editar éste, eliminarlo, etc. Mientras más completo sea el servicio, es considerado mejor.


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

Se considera como patrón de interacción a un proceso en que interactúan tanto el usuario como el sistema, por medio de una interfaz. De esta manera, se diversifican en múltiples patrones relacionando diferentes campos de acción e interacción usuario-sistema, siendo este caso en particular el patrón que abarca toda interacción usuario-sistema por medio de comentar una publicación en cualquiera sea la plataforma, el servicio y la interfaz. Mientras se entregue un mejor servicio por parte del sistema, más usuarios se sentirán cómodos haciendo uso de éste, el patrón de interacción será repetido más y más veces en diferentes sitios y plataformas, popularizándose de manera colectiva y beneficiándose ambas partes, sistema y usuario.


¿Qué y Cómo es una buena y mala UX?

La interacción mencionada previamente, es evaluada en niveles de calidad de experiencia para el usuario (UX), siendo la experiencia de mejor calidad una que entrega un servicio completo y que satisface las necesidades del usuario, y por consiguiente su opuesto sería un caso en que el servicio del sistema este entregado de manera confusa, precaria, insatisfactoria en uno o más aspectos para el usuario. En este patrón en particular, se considera un servicio completo en caso de tener la virtud de dar libertad al usuario, ya sea en aspecto temporal de la experiencia en su totalidad y/o bien con respecto al contenido accesible para éste.


¿Qué busca el usuario?

Se debe considerar que ya sea cualquiera el patrón de interacción, se espera un mínimo de criterios como base que debe cumplir para tener una buena impresión para el usuario, en la que éste se sienta a gusto, ubicado constantemente, incitado a navegar en el servicio entregado. Siendo el servicio entregado de forma expedita, armónico visualmente, accesible, señalizada, amigable y claro al referirse al usuario. Éste busca como ideal un servicio que le entregue una sensación de libertad, ya sea de contenido, flujo de navegación y/o accesibilidad, además de la capacidad de interactuar con el comentario en cualquier momento del proceso que conlleva la acción de lo mismo, ya sea en un inicio, una instancia previa al comentario, durante el desarrollo de éste y finalmente una vez ya realizado, busca la flexibilidad de manipular la acción hecha.

Plataformas o servicios Buena UX en patrón de comentar una publicación

Caso nº1: Facebook

  • Nombre del servicio: Facebook
  • Soporte del servicio: Sitio web
  • Escala de hábitos UX: Completo
  • Descripción de experiencia de usuario con el servicio: Se considera un servicio completo, al presentar la posibilidad de realizar un comentario de manera sencilla, clara, rápida. Además de incluir imágenes, stickers, emojis y fotos.

Al analizar diversas plataformas en donde se ejecuta este patrón, se determina que ésta en la más completa y cómoda, hasta ahora, para el usuario. Esto debido a que en un aspecto visual, todo está fácilmente accesible y señalado, existe la posibilidad de agregar diferentes tipos de contenido al comentario, además de poder reaccionar y responder a éstos, sin ninguna limitación (caracteres o tiempo para desarrollar el comentario), además de tener la posibilidad de etiquetar a otros usuarios y editar o eliminar el comentario una vez publicado.

  • Colección de Pantallas secuenciales
Inicio de sesión
Página de inicio de la cuenta abierta en Facebook
Publicación en la que se quiere realizar un comentario
Dentro de la publicación, los comentarios presentan distintos tipos de iconos (o botones) que pueden ser utilizados dependiendo del tipo de comentario que se quiere realizar
Si se presiona el icono GIF, se despliega un cuadro-buscador de Gif's
Se introduce la palabra clave (categórica) y se selecciona el Gif escogido
Una vez seleccionado el Gif, se plasma como comentario.
  • Partitura de Interacción

Caso nº2: Instagram

  • Nombre del servicio:Instagram
  • Soporte del servicio:Instagram app.
  • Escala de hábitos UX:Conforme
  • Descripción de experiencia de usuario con el servicio:Se considera una experiencia que deja conforme al usuario, al poder realizar la acción de comentar de manera fácil, sencilla, accesible, además de presentar la posibilidad de comentar como respuesta a un comentario que ya este en la publicación, generando un diálogo. Por otra parte, permite también reaccionar sólo de forma positiva a algún comentario, dándole like (situación que podría extenderse a más de una reacción, demostrando diferentes emociones, como enojo, risa, tristeza, etc)
  • Colección de Pantallas secuenciales
Se abre la publicación que se quiere comentar
Para comentar la publicación, puedes clickear en la burbuja de comentarios, o bien clickear en donde dice "Ver los comentarios", donde se desplegarán los comentarios anteriores y la barra para escribir nuestro comentario.
Se abren los comentarios de la publicación, cada uno con la posibilidad de dar like y responderlos. En el fondo se encuentra la barra en la que se escribe el comentario que queremos realizar.
Si se clickea el icono del corazón situado al costado de cada comentario, se da like a éste.
Se hace click en la barra que dice "Agrega un comentario..."
Se abre el teclado bajo la barra para agregar un comentario.
No se habilita la posibilidad de publicar el comentario hasta que se escribe al menos un carácter en la barra.
Al publicar el comentario, se agrega como el primero o el último en la lista de comentarios realizados
Si se quiere, existe la opción de eliminar el comentario publicado al deslizarlo hacia la izquierda.
  • Partitura de Interacción

Caso nº3: Youtube

  • Nombre del servicio:Youtube
  • Soporte del servicio:youtube sitio web
  • Escala de hábitos UX:Básico
  • Descripción de experiencia de usuario con el servicio:En un inicio, da la impresión de que se puede publicar un comentario sin necesidad de registrarse o ingresar a una cuenta, sin embargo al clickear para escribirlo, te redirecciona al inicio de sesión. Al escribir el comentario y publicarlo solo presenta la posibilidad de dar like, dislike, editar y borrar el comentario, además de interactuar con otros comentarios al darle like o dislike y poder responderlos directamente.
  • Colección de Pantallas secuenciales
Sin haberse registrado o iniciado sesión en Youtube, se abre una publicación (video), y existe el espacio que permite agregar un comentario público
Al clickear el espacio para escribir el comentario, se redirecciona al inicio de sesión, y posteriormente a esto se redirecciona a la publicación en la que se iba a escribir el comentario desde un principio
Ahora la barra para comentar viene con el icono del perfil en que se inició sesión, Identificando al usuario al momento de publicar el comentario.
Desde que se clickea el espacio para escribir, se abre la opción de publicar o bien cancelar la operación.
Al escribir al menos 1 carácter en la barra para comentar, se habilitan las posibilidades de cancelar o comentar
Una vez publicado el comentario, se posiciona como el primero en la columna de comentarios, o bien el primero luego del comentario fijo del artista que subió la publicación en la que se está comentando
Al posicionar el mouse en el comentario publicado, aparece un ícono de 3 puntos en columna, situados en la esquina superior derecha del comentario.
Al clickear el icono, se despliegan dos opciones, editar o eliminar el comentario publicado.
Al presionar el botón para responder un comentario, ya sea el propio o uno publicado por otra persona, se abre una barra similar a la utilizada para escribir nuestro comentario inicial, pero se abre como un sub-comentario, que sale de otro comentario
  • Partitura de Interacción

Caso nº4: Tiktok

  • Nombre del servicio:Tiktok
  • Soporte del servicio:Tiktok app
  • Escala de hábitos UX:Básico
  • Descripción de experiencia de usuario con el servicio:Suficiente. El servicio es presentado con buena accesibilidad desde un inicio, permitiendo reaccionar a la publicación de manera directa, mediante los iconos que se encuentran en un costado de las publicaciones, se puede reaccionar tanto a una publicación como a un comentario, dando like, dislike, o respondiendo. Respecto a la diversidad posibilitada en el contenido del comentario, solo existe la posibilidad de incluir emojis y etiquetar a otro usuario, además de estar limitado a solo 150 caracteres.
  • Colección de Pantallas secuenciales
Pantalla inicio de Tiktok
Al clickear la burbuja de comentarios, se despliegan los comentarios en una columna
Al clickear en "Añadir comentario" se habilita el teclado.
Al clickear en el icono de carita, se despliegan los emojis disponibles para agregar al comentario.
CapturaPantallaTiktokAL04.JPG
CapturaPantallaTiktokAL05.JPG
Al clickear el icono de @ se despliega un listado de usuarios de la app para etiquetar en la publicación.
  • Partitura de Interacción

Caso nº5: Twitter

  • Nombre del servicio:Twitter
  • Soporte del servicio:Sitio web Twitter
  • Escala de hábitos UX:Complejo
  • Descripción de experiencia de usuario con el servicio:El servicio se desarrolla de manera particular, puesto que al comentar una publicación, también se retwittea ésta, agregando el contenido de la publicación que se comentó junto con el comentario hecho al perfil de la persona que comenta, pasando a ser una publicación en el perfil del usuario. Sin embargo, aparte de esa particularidad el servicio es bastante completo al momento de ingresar el contenido que se quiere comentar, puesto que presenta la posibilidad de agregar emojis, GIF's, imágenes e incluso encuestas. Lo único negativo de este servicio es que se limita la cantidad de caracteres para escribir el comentario, con un total de 280.

Dentro de todas las plataformas analizadas previamente, ésta es la que entrega un servicio muy completo, pero a la vez de manera particular, o compleja para un usuario inexperto en éste sitio. Esto por el hecho de que para "comentar" la publicación, el usuario realiza una segunda publicación, que incluye la original y el comentario a escribir. Además, esto queda plasmado en el perfil del usuario, no en la publicación original. Finalmente, si al usar la plataforma pasas una cierta cantidad de tiempo congelado en una acción, el sistema redirecciona tu pantalla a un test para comprobar si el usuario es realmente eso, y no un robot. Por lo que además de la complejidad anterior, se le agrega el límite de tiempo al utilizar la plataforma.

  • Colección de Pantallas secuenciales
Pantalla inicio Twitter
Se busca la publicación que se desea comentar
Se click la burbuja de comentarios
Al clickear la burbuja de comentarios se despliega este cuadro con la publicación que se desea comentar, y en la parte inferior un espacio donde se sitúa el contenido del comentario que se quiere realizar
Al comenzar a escribir, aparece un ícono circular en la parte inferior del recuadro
A medida que el comentario se va llenando, el ícono anteriormente mencionado se va llenando con otro color, por lo que cuenta los caracteres disponibles a medida que se escribe.
Al clickear el icono de carita, se despliegan los emojis disponibles para el comentario.
Al clickear el icono situado en la izquierda del ícono de emojis, se abre un formulario para incluir una encuesta en el comentario.
Al clickear en "Remove poll" se elimina el formulario para agregar una encuesta, dejando el comentario escrito.
Al clickear el icono "GIF" se abre un cuadro buscador de GIF'S
Al clickear el icono situado a la izquierda del ícono GIF, se posibilita el agregar imágenes al comentario, por lo que se abre directamente la carpeta de escritorio del usuario.
Al clickear el botón de "Reply" se publica el comentario, volviendo a la pantalla la publicación que se quería comentar en un principio. No deja indicios del accionar recién hecho
Se busca en dónde queda el comentario recientemente hecho, en el perfil del usuario.
CapturaPantallaTwitterAL13.jpg
Al entrar a "Tweets & replies" se encuentra el comentario que se hizo recientemente, agregado al perfil del usuario que comentó, como si fuera una nueva publicación, editada de tal forma que el comentario se ve agregado a ella.
  • Partitura de Interacción

Caso nº6: App Store

  • Nombre del servicio:App Store
  • Soporte del servicio:App Store versión móvil
  • Escala de hábitos UX:Básico, confuso
  • Descripción de experiencia de usuario con el servicio: La experiencia del usuario ante este caso se ve muy ligada a la evaluación del servicio que entrega la app en la publicación que se quiere comentar, puesto que en esta plataforma se exponen como productos aplicaciones que finalmente entregan un servicio el cual puede ser evaluado y comentado por el usuario. Para comenzar, no se habilita la posibilidad de generar y plasmar un juicio o comentario si no se haya descargada la aplicación de la publicación. En cuanto a contenido, se encuentra limitado a expresarse por medio de caracteres y emojis.
  • Colección de Pantallas secuenciales
CapturaPantallaAppStoreAL06.jpg
CapturaPantallaAppStoreAL05.jpg
CapturaPantallaAppStoreAL04.jpg
CapturaPantallaAppStoreAL03.jpg
CapturaPantallaAppStoreAL02.jpg
CapturaPantallaAppStoreAL01.jpg
  • Partitura de Interacción

Caso nº7: Emol.

  • Nombre del servicio: Emol
  • Soporte del servicio: Sitio web Emol.com
  • Escala de hábitos UX: Básico
  • Descripción de experiencia de usuario con el servicio: Desde un inicio, y como en todos los casos previos, se debe iniciar sesión en el sitio web para habilitar la posibilidad de que el usuario pueda comentar cualquier publicación que encuentre, de manera que una vez hecho esto, se habilita el cuadro de comentarios para realizar uno. Respecto a la posibilidad del contenido del comentario, se considera un servicio básico al incluír como contenido visual agregable solo los determinados GIF's y/o algún archivo propio del dispositivo usuario, fuera de lo anteriormente mencionado no se posibilita añadir nada más como contenido, ni encuestas, ni emojis, etc. Una vez listo el contenido, se realiza el comentario, pero éste se pierde de la vista del usuario una vez publicado, perdiéndose en una columna con los comentarios realizados por otros usuarios previamente. Al pasar esto, se pierde la posibilidad de interactuar con el comentario realizado, editándolo o eliminándolo. Por otro lado, con respecto a la interacción entre el usuario y comentarios previos de otros usuarios, se puede interactuar de manera en que se responda a cada comentario de forma individual, posibilitándole al usuario responder cada respuesta a un comentario, o responder directamente al comentario inicial. Además se pueden denunciar los comentarios de otros usuarios, dar me gusta y no me gusta.
  • Colección de Pantallas secuenciales
CapturaPantallaEmolAL01.jpg
CapturaPantallaEmolAL02.jpg
CapturaPantallaEmolAL03.jpg
CapturaPantallaEmolAL04.jpg
CapturaPantallaEmolAL05.jpg
CapturaPantallaEmolAL06.jpg
CapturaPantallaEmolAL07.jpg
CapturaPantallaEmolAL08.jpg
CapturaPantallaEmolAL09.jpg
  • Partitura de Interacción

Caso nº8: SoyChile

  • Nombre del servicio: Soychile
  • Soporte del servicio: Sitio web soychile.cl
  • Escala de hábitos UX: Básico
  • Descripción de experiencia de usuario con el servicio: Este sitio presenta la particularidad de vincular la cuenta del usuario con la de otro sitio, "Emol.", lo cual permite o bien habilita las interacciones del usuario al comentar en el sitio web, además de vincularse a la cuenta de ese sitio, el cuadro de comentarios es exactamente el mismo que utiliza el sitio al cual se vincula la cuenta del usuario. Por lo que utiliza su estructura determinada en el sitio. Con la única diferencia de que en éste sitio (Soychile) se limita incluso aún más el contenido que se puede agregar al comentario, siendo esta vez solo algún archivo agregado por el usuario desde sus propios archivos. Además, cabe mencionar que debido a que en la publicación comentada en este sitio se encuentra un número bajo de comentarios totales hacia la publicación, obteniendo un total de tres comentarios, una vez realizado el comentario del usuario se sitúa bajo el cuadro para escribir el comentario antes de ser publicado, pasando a estar a la vista del usuario, permitiendo la interacción de éste una vez ya realizado el comentario, pudiendo editarlo, eliminarlo, denunciarlo y evaluarlo con "me gusta" o bien "no me gusta".
  • Colección de Pantallas secuenciales
CapturaPantallaSoychileAL01.jpg
CapturaPantallaSoychileAL02.jpg
CapturaPantallaSoychileAL03.jpg
CapturaPantallaSoychileAL04.jpg
  • Partitura de Interacción

Caso nº9: Tumblr

  • Nombre del servicio: Tumblr
  • Soporte del servicio: Sitio web tumblr
  • Escala de hábitos UX: Completa
  • Descripción de experiencia de usuario con el servicio: Se considera un servicio que entrega una experiencia bastante completa, aunque particular. Presenta una estructura similar a la de Twitter, ya que al comentar una publicación esta se agrega como contenido en el perfil del usuario, plasmando el comentario como parte de la nueva publicación añadida al perfil, esto se denomina "rebloguear" una publicación. En este sitio web, se presentan dos formas de comentar una misma publicación, diferenciándose en que una es más directa y básica que la otra. El proceso más largo se presenta por medio del "reblogueo", en el cual se clickea el símbolo de flechas en ciclo y se abre la posibilidad de comentar la publicación a la vez que se despliega un cuadro de contenido, donde se puede desarrollar el comentario e insertarle ya sean videos, fotos, GIF's e incluso está la posibilidad de añadir un enlace externo además del contenido del comentario (texto). Cada comentario tiene la posibilidad de ser etiquetado con el concepto que quiera el usuario. El contenido no presenta ningún límite, ya sea temporal o de los caracteres que componen el contenido del comentario. Una vez realizado el comentario, se genera esto de añadir la publicación al perfil del usuario, el cual puede interactuar con el comentario de manera posterior a su realización solo para eliminarlo, no existe la posibilidad de editar de cualquier forma el contenido del comentario ya realizado. El otro proceso posible para comentar una publicación en este sitio web es mucho más directo e incluso básico si se puede decir, esto porque (por medio de otro ícono de burbuja) se despliega un pequeño cuadro casi como una especie de chat, en donde se muestran comentarios anteriores y recientemente hechos, generando una especie de diálogo entre los comentarios de los usuarios, posibilitando una respuesta directa por parte del usuario al comentario anterior (o último comentario). Puesto que es mucho más directo y sencillo, este cuadro de comentarios presenta menos posibilidades para agregar contenido, limitándose solo a los caracteres y emojis.
  • Colección de Pantallas secuenciales
Captura pantalla inicio, con el scroll infinito de publicaciones posiblemente comentables.
Captura pantalla al clickear la puclicación que se desea comentar, desplegandose el cuadro de texto y contenido.
Captura pantalla al momento en que el usuario realiza el comentario.
Captura pantalla una vez realizado el comentario, se vuelve a la publicación, la cual esta vex presenta un ícono de otro color, lo cual indica la acción recientemente realizada (el comentario)
Captura pantalla cuadro de comentarios directos, más accesibles, rápidos y precisos.
  • Partitura de Interacción

Caso nº10

  • Nombre del servicio:
  • Soporte del servicio:
  • Escala de hábitos UX:
  • Descripción de experiencia de usuario con el servicio:
  • Colección de Pantallas secuenciales
  • Partitura de Interacción