Catalina Jorquera Kruberg Tarea 3 - Taller de Diseño de Interacción 2020

De Casiopea



TítuloCatalina Jorquera Kruberg 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)Catalina Jorquera Kruberg

Patrón de actualización de información constante (Push to refresh)

Patrón designado dentro del patrón de gestualidad donde el usuario aplica la acción de actualizar datos dentro de una interfaz. Existen multiples formas de ejecutar este patrón, como:

  • Contenido refrescante que es anteponer otra superficie visual sobre los datos de la aplicación.
  • Contenido refrescante que está debajo de otra superficie en el espacio z, la acción de actualización se ejecuta de manera invisible en el sistema.
  • Contenido refrescante generado por una acción sobre un botón en específico de un barra de aplicaciones.


TDI CJK E2 20.6.jpg

La actualización tiene la posibilidad de: eliminar, reordenar, modificar e insertar elementos de forma no secuencial o cambiar solo elementos fuera de la pantalla. Todo funciona dentro de una base de datos que se encarga de juntar la información de un sitio para actualizarla constantemente a pedido del usuario.

Según algunas aplicaciones, existe la posibilidad de configurar el tipo de actualización que el usuario desee, así se puede opta entre una Actualización manual y/o actualización automática:

Actualización manual

El usuario desea actualizar contenido ya disponible en la pantalla y a medida de que despliega el dedo aparece una información visual en la parte superior donde un indicador de actualización confirma la acción mientra el sistema se encarga de la retroalimentación los datos. De modo que la aplicación se centra en la fidelidad del usuario este entrega una retroalimentación visual para no entorpecer la acción de actualización.

actualización automática

Se relaciona con el concepto de sincronización de datos donde el botón de actualizar desaparece de la pantalla y funciona de manera invisible en el sistema. Existen ciertos casos donde es conveniente la actualización automatica, tratandose como una forma de eliminar el desorden de la interfaz de datos y retroalimentar con información de preferencia para el usuario.

Un buen funcionamiento UX en una actualización

“La creación rápida de prototipos es una técnica de fidelidad media basada en la investigación del usuario”.

Ya que existen multiples forma de actualizar un contenido constante, el tipo de actualización resulta adecuada dependiendo del contenido de la interfaz. Ya sean:

  • Listas.
  • Listas de cuadrículas.
  • Colecciones de tarjetas que se ordenan en orden cronológico inverso.
  • Fuentes de contenido como las redes sociales.

Cada uno tiene su objetivo que fidelidad mejorado por el tipo de actualización asignada.

Cuando hablamos de los casos favorables de la actualización manual esta alude a sitios como las aplicaciones de noticia, en donde es conveniente poder actualizar la pantalla cuando el usuario lo desee y así no desorientarse con la retroalimentación de datos que llegan constantemente.

El patrón de extracción para actualizar se ha convertido en un estàndar en aplicaciones moviles. Ya que el usuario se ha gratificado con la necesidad de retroalimentación rápida del sistema. Pero siguen existiendo casos como en las vista con contenido panorámico donde la actualización por parte de un botón se vuelve más conveniente tanto para la fidelidad de la aplicación como para no incomodar la acción permitida por el mapa.

De acuerdo con el orden de la interfaz , es conveniente tener una actualización automática cuando hablamos de aplicaciones que necesiten el orden del interfaz por medio de la retroalimentación rápida de información para aplicaciones como instagram que mantienen un contenido aleatorio por medio de cada publicación.

Errores en la UX de actualización

Se pueden presentar fallas en la acción "push to refresh", ya sea por fallas sistemáticas o por mala implementación en la interfaz.

  • Inhabilitar la opción de cancelar actualización

Ya que existen app con la opción de cancelar refresh, el usuario presenta mayor facilidad de ejecutar en relación a las aplicaciones que no interrumpen el proceso. El hecho de no tener la opción de cancelar refresh puede provocar que al momento de que la actualización se encuentre pegada en el sistema, el usuario no tiene como volver a manipular la app hasta que se termine la acción.

  • Mala administración de la pantalla segmentada

La aplicación presenta un orden especifico definido como la segmentación de pantalla, donde al momento de organizar la información es muy importante coordinar para que ciertos patrones no entorpezcan otras acciones. Es por esto que la opción se actualizar se encuentra en la parte superior de tal manera que el usuario solo actualice la página en puntos que no cercano con otras acciones. Se pueden presentar errores como colocar la barra de cargado encima de una acción, provocando que se entorpezca el proceso sobre otro patrón.

  • Mala administración de tipo de actualizado

Ya que cada actualización se encuentra enfocada según el tipo de funcionamiento que tiene la interfaz, existen aplicaciones donde el funcionamiento se puede dividir en pantalla con actualizado automático y pantalla con actualizado manual. Esto se puede ver en aplicaciones como Instagram donde la barra de inicio se encuentra con un actualizado manual debido a que las publicaciones siguen una linea de orden y un actualizado automático para la pantalla de chat que viene dentro de la aplicación. Un mal funcionamiento seria emplear una actualización en un área incorrecta, teniendo como un ejemplo erróneo seria poner un botón de actualizado manual en una pantalla centrada en la visualización de un mapa. Ya que dicha pantalla permite manipular toda la imagen visual para moverse, el botón de actualizar puede entorpecer la acción.

a continuación se presentaran patrones que hayan funcionado de manera correcta, aportando al margen de éxito de dicha aplicación, seguido de ejemplos que funcionen de manera incorrecta debido a la mala actualización de su servidor.

Reflexión

En base a los tipos de actualización que han ido apareciendo en asistencia de una interfaz, no se puede definir cuál se considera correcta hasta enfocarnos en el objetivo que tiene la base de datos que se esta construyendo. Si bien en cuanto a funcionamientos es muy importante encontrar un punto en que este patrón funcione sin interferir en otras acciones. Hablamos de una buena base de datos al momento de enfocarnos en los tipos de patrones que administramos y como se relacionan entre sí. De acuerdo con sus especificaciones se puede agrupar ciertos patrones para asistir al usuario y brindar una buena práctica UX. resulta primordial permanecer en actualización acerca del arquetipo a que estamos apuntando y como este reacciona en base a nuestra interfaz. Para así ir mejorando y brindarle una experiencia confortable que llame la atención del usuario.

Bien y mal hábito UX

Patrones Efectivos

1.-The new york time

  • Soporte del servicio: Aplicación
  • Escala de Hábitos UX: Buena
  • Descripción de experiencia de usuario con el servicio: Plataforma que tiene como objetivo informar al usuario a través de una plataforma que publica noticias constantemente, estas noticias son escritas por un grupo de trabajo determinado que se encarga de remarcar las noticias de último momento. El modo de actualización puede ser manual o automática ya que presenta la opción de poder programar el tipo de "push to refresh" según lo desee el usuario, junto con la información de la última actualización y la posibilidad de cancelar la función de actualizar.

Colección de Pantallas Secuenciales


TDI CJK E2 11.1.jpg  TDI CJK E2 11.2.jpg  TDI CJK E2 11.3.jpg 
TDI CJK E2 11.4.jpg  TDI CJK E2 11.5.jpg  TDI CJK E2 11.6.jpg


  1. Pantalla de inicio.
  2. Pantalla de inicio, actualización automática con superficie visual.
  3. Pantalla de ajuste, lista de datos.
  4. Pantalla de ajuste, opción de configuración de actualización de datos.
  5. Actualización de segundo plano, actualización manual.
  6. Pantalla de inicio.

2.-Twitter

  • Soporte del servicio:Aplicación
  • Escala de Hábitos UX:Buena
  • Descripción de experiencia de usuario con el servicio: Plataforma que se encarga de informar al usuario a través de publicaciones actualizadas constantemente por otros usuarios. En cuanto al modo de actualización, este posee la actualización manual por medio de la opción de publicaciones nuevas o por el icono de casa que actualiza la información, además de tener la posibilidad de cancelar la opción de actualizar.

Colección de Pantallas Secuenciales

 TDI CJK E2 12.1.jpg  TDI CJK E2 12.2.jpg  TDI CJK E2 12.3.jpg
  1. Pantalla de inicio, publicaciones antiguas con un pop up de actualización manual.
  2. Pantalla de inicio, publicaciones antiguas con un botón de actualización manual.
  3. Pantalla de inicio actualizada.


3.-Instagram

  • Soporte del servicio: Aplicación
  • Escala de Habitos UX: Buena
  • Descripción de experiencia de usuario con el servicio: Plataforma que se encarga de la publicación de información de multimedia, ya sean videos o fotografías a una plataforma que contiene acciones en relación a los archivos. Se efectúa a través de una actualización manual y automática solo en la función de mensajería,ya que al momento en que la retroalimentación de datos encuentra nuevos archivos, la aplicación notifica por un botón la opción de cargar los nuevos archivos. El usuario tiene la posibilidad de actualizar a través de el botón de "nuevas publicaciones" o por el icono de una casa que actualiza automáticamente al momento de apretarlo. Como caso secundario, la aplicación tiene la opción de actualizar la barra de mensajería. Al intentar cancelar la acción de "refresh" la plataforma publica los archivos que alcanzo a retroalimentar hasta que se cancela la opción.

Colección de Pantallas Secuenciales


 TDI CJK E2 13.1.jpg  TDI CJK E2 13.2.jpg  TDI CJK E2 13.3.jpg
 TDI CJK E2 13.4.jpg 


  1. Pantalla de inicio, publicaciones antiguas con un pop up de actualización manual
  2. Pantalla de inicio actualizada.
  3. Pantalla de inicio, actualización manual deslizando la barra de inicio.
  4. Pantalla de inicio actualizada.

4.-Pedidos ya

  • Soporte del servicio: Aplicación
  • Escala de Habitos UX: Buena
  • Descripción de experiencia de usuario con el servicio: Plataforma que reúne información acerca de locales que vendan comida en la zona y así brindar una opción de delivery a través de la aplicación. El modo de actualización de la plataforma es automática y al no recopilar mayor información su actualización es a través de retroalimentación de contenido refrescante en un plano z, con una imagen visual en relación con la aplicación.

Colección de Pantallas Secuenciales


 TDI CJK E2 14.1.jpg  TDI CJK E2 14.2.jpg  TDI CJK E2 14.3.jpg
 TDI CJK E2 14.4.jpg  TDI CJK E2 14.1.jpg


  1. Pantalla de inicio
  2. Pantalla de inicio, actualización manual con superficie visual.
  3. Pantalla de actualización en el plano z, superficie visual.
  4. Pantalla de actualización en el plano z, superficie visual.
  5. Pantalla de inicio.

5.-Whatsapp

  • Soporte del servicio:Aplicación
  • Escala de Habitos UX: Buena
  • Descripción de experiencia de usuario con el servicio: Plataforma que se encarga de efectuar acciones de mensajería a través de una plataforma que brinda un chat para un usuario que adjunta su número de teléfono y agrega a sus contactos de la misma forma. La plataforma presenta una actualización automática de la llegada de los mensajes, además de una opción de actualizado manual en la sección de contactos.

Colección de Pantallas Secuenciales


 TDI CJK E2 15.1.jpg  TDI CJK E2 15.2.jpg  TDI CJK E2 15.3.jpg
 TDI CJK E2 15.4.jpg


  1. Pantalla de inicio, actualización automática.
  2. Listado de contactos, lista sin actualizar.
  3. Listado de contactos, opción de actualizar datos.
  4. Listado de contactos, lista actualizada.

6.-Tumblr

  • Soporte del servicio:Aplicación
  • Escala de Habitos UX: Buena
  • Descripción de experiencia de usuario con el servicio: Plataforma que se encarga de la retroalimentación de multimedia publicada por usuarios inscritos a la plataforma vía correo electrónico. la plataforma presenta acciones externar en relación con las publicaciones y tiene un modo de actualización manual donde la plataforma entrega ciertas facilidades como darle la función de llegar al inicio con el icono de "la casita", para así actualizar la plataforma. Además de presentar la opción de volver a bajar a la publicación en la que el usuario se encontraba con solo apretar un botón que se sobrepone donde estaba el icono de la casita. Los usuarios que frecuentan esta plataforma entenderán que existe muchas publicaciones donde al momento de volver a la pagina de inicio resulta tedioso arrastrar por tanto tiempo la barra de publicaciones.

Colección de Pantallas Secuenciales


 TDI CJK E2 14.5.jpg  TDI CJK E2 14.6.jpg  TDI CJK E2 14.7.jpg
 TDI CJK E2 14.8.jpg


  1. Pantalla de inicio.
  2. Pantalla de inicio, actualización manual.
  3. Pantalla de inicio, publicaciones antiguas con la opción de subir al inicio con el icono de la casa.
  4. Pantalla de inicio, inicio con la posibilidad de volver a la publicación antigua con el icono sobrepuesto sobre la casa.

Patrón negativo

1.-Uber

  • Soporte del servicio: Aplicación
  • Escala de Hábitos UX: Mediocre
  • Descripción de experiencia de usuario con el servicio: Plataforma que se encarga de encontrar la información geográfica del usuario para así brindar un servicio de viaje por medio de conductores que contrata la empresa Uber. Su modo de actualización es automática al trabajar con una pantalla Tipo mapa. Pero presenta fallos debido a que además se extiende un listado de tipos de viajes con distintos precios donde van variando según el tiempo y la demanda. De esta forma resulta conveniente tener un botón de actualizado, el cual la aplicación no presenta, para que el usuario pueda revisar bien la tarifa de precios y así no vayan cambiando de manera improvista.

Colección de Pantallas Secuenciales


 TDI CJK E2 16.2.jpg  TDI CJK E2 16.1.jpg  TDI CJK E2 16.3.jpg


  1. Pantalla de inicio, indicar el destino seguido de actualización automática sin botón de confirmación.
  2. Pantalla de inicio, actualización de datos
  3. Selección de tipo de viaje, listado sin posibilidad de actualizar.


2.-Waze

  • Soporte del servicio: Aplicación
  • Escala de Habitos UX: Mediocre
  • Descripción de experiencia de usuario con el servicio: Plataforma que trabaja de asistente del usuario al momento de conducir. Brinda un sistema de mapa con una ubicación actual por medio de GPS donde el usuario puede fijar un punto de inicio y de destino para que la plataforma le recomiende vías de circulación factibles. Tiene un modo de actualización automática al tratarse de una pantalla con un mapa que predomina. Pero de acuerdo con el modo de actualización la aplicación tiene ciertas fallas ya que no tiene la opción de cancelar actualización, de esta forma cuando la aplicación se demora en cargar, el usuario no puede cancelar la acción y al momento de querer apretar la opción de atrás la aplicación da la opción de apagar el programa.

Colección de Pantallas Secuenciales

 TDI CJK E2 17.1.jpg  TDI CJK E2 17.2.jpg  TDI CJK E2 17.3.jpg
  1. Pantalla de inicio, luego de ingresar un punto de destino se actualiza automáticamente el sistema y busca una ruta
  2. Pantalla de inicio, Actualización del sistema sin posibilidad de cancelar la actualización
  3. Pop up, alternativa de cerrar la aplicación al apretar el botón de deshacer.


3.-Facebook

  • Soporte del servicio: Aplicación
  • Escala de Habitos UX: Mala
  • Descripción de experiencia de usuario con el servicio: Plataforma que se encarga de la retroalimentación de publicaciones hechas por usuarios inscritos vía correo electrónico. Tiene un modo de actualización automática que no permite configuraciones y no cancela la opción de actualizar, por lo que resulta una acción obligatoria en la que puede entorpecer la actividad del usuario. A pesar de tener múltiples opciones de configuración, no tiene una forma de actualizar el modo de "push to refresh". De esta forma se presenta un desorden de la interfaz donde el usuario se adapta a ver contenido fugaz de publicaciones que se pierden en la barra de inicio.

Colección de Pantallas Secuenciales

 TDI CJK E2 18.1.jpg  TDI CJK E2 18.2.jpg
  1. Pantalla de inicio, actualización automatica.
  2. Pantalla de inicio, pantalla actualizada.

4.Uber eats

  • Soporte del servicio: Aplicación
  • Escala de Habitos UX: Mala
  • Descripción de experiencia de usuario con el servicio: Plataforma que reúne información acerca de locales que vendan comida en la zona y así brindar una opción de delivery a través de la aplicación. El modo funcionamiento de la plataforma es por una actualización automática, ya que no concentra una gran cantidad de información. Presenta dificultades debido a la segmentación de la plataforma que dificulta la opción de actualizar. En casos en que se introduzca otra dirección aparecen pops invadidos que ocultan el modo de actualización que provoca que el usuario no tenga la claridad de si la barra de inicio se actualizó del todo.

Colección de Pantallas Secuenciales

 TDI CJK E2 19.1.jpg  TDI CJK E2 19.2.jpg  TDI CJK E2 19.3.jpg
  1. Pantalla de inicio, pop up que vuelve a aparecer.
  2. Pantalla de inicio, actualización manual.
  3. Pantalla de inicio, actualización manual con un pop up que sobrepone a la superficie visual.


5.-Junaeb

  • Soporte del servicio: Aplicación
  • Escala de Habitos UX: Mala
  • Descripción de experiencia de usuario con el servicio: Plataforma que se encarga de la asistencia de pago para facilitar la acción del usuario al hacer una compra. Su modo de funcionamiento es a través de una Actualización automática. Pero la aplicación presenta múltiples fallas que provocan que sea una plataforma que entorpece la acción del usuario, ya que tiene problemas de acuerdo a la actualización de datos como el saldo y el tiempo de retroalimentación de datos es demasiado largo. De acuerdo con su imagen de actualización la aplicación presenta una función de doble retroalimentación por medio de dos visuales al momento de buscar locales cercanos que nunca llega a una barra final de búsqueda no encontrada.

Colección de Pantallas Secuenciales


 TDI CJK E2 20.1.jpg  TDI CJK E2 20.2.jpg  TDI CJK E2 20.3.jpg  
 TDI CJK E2 20.4.jpg  TDI CJK E2 20.5.jpg


  1. Pantalla de inicio
  2. Actualización automática, saldo de tarjeta.
  3. Saldo de la tarjeta.
  4. Actualización automática, consulta de local.
  5. Actualización automática, consulta de local.