Paola Chicano Tarea 4 - Taller de Diseño de Interacción 2020

De Casiopea


Paola Chicano - Taller de Diseño de Interacción - Tarea 4 (1).jpg


TítuloPaola Chicano Tarea 4 - 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, Diseño Gráfico, Diseño Industrial
4
Alumno(s)Paola Chicano

Etapa 1:

Utilizar la herramienta de Arquitectura de Información (AI) CardSorting, de caracter abierto y de manera grupal donde organizaremos los patrones que hemos estudiado, tomando en cuenta dos acciones:


Cardsorting de categorías de patrones:

patrones de seguridad:

  • Captchas o elementos de seguridad
  • Cambio de contraseña
  • Solicitar permisos del usuario
  • Trackeo de envíos
  • Aplicaciones codependientes

Patrones de cuentas de usuario:

  • Creación de cuenta
  • Autenticación de usuario (ingreso o login)
  • Recuperar cuenta
  • Eliminar cuenta
  • Cuentas verificadas (normalmente de celebridades) en rrss
  • Definir preferencias de mensajería

Patrones de suscripción:

  • Eliminar suscripcion
  • Des-suscripcion de lista de correo

Patrones de transacción monetaria:

  • Cambiar de cuenta de pago a cuenta gratuita
  • Acceder a contenido de pago (carnada)
  • Desbloquear características (compras dentro de la App)
  • Carros de compra
  • Formas de pago

Patrones de interacción del servicio con el usuario:

  • Notificaciones
  • Contenido recomendado no solicitado por el usuario
  • Wizard o tunneling (pop ups u otros elementos de interfaz que guían al usuario)
  • Chatbots
  • Segmentación del contenido (desde la paginación al scroll infinito)
  • Predicción de búsqueda
  • Actualización de información constante

Patrones de interacción con el contenido:

  • Comentar una publicación
  • Patrones de evaluación (evaluación de producto o servicio y calificación de post (upvote, downvotem luke, etc))
  • Definición de preferencias para entregar servicio personalizado
  • Comparación de productos
  • Compartir
  • Eliminar contenido en RRSS


Etapa 2:

Comenzar a diseñar el modo de como se va a visualizar esta información mediante WireFrames, tomando en cuenta dos etapas de la navegación:


Proponer un nombre para el sitio web - repositorio de patrones UX:

Título propuesto: "Patrones UX y su influencia en la relacion entre usuario y servicio."

Pantallas de inicio a la materia:

Paola Chicano - Taller de Diseño de Interacción - Tarea 4 (7).jpg

Versión Móvil: La página principal tiene en su parte superior una toolbar con opciones desplegables, luego el título junto a una leve introducción, abajo lleva las tres preguntas planteadas en el encargo también desplegables para cuidar el espacio de la pantalla y finalmente en su parte posterior tiene las categorías de patrones con hipervínculos a las listas de patrones en una página anexa.

Versión Web: La página principal, a diferencia de la versión móvil, posee una toolbar más completa gráficamente, no tiene menús desplegables de las preguntas sino los textos completos en virtud del espacio y las categorías de patrones se encuentran a la derecha de esta.

Pantallas que muestren un patrón:

Página principal del patrón

Paola Chicano - Taller de Diseño de Interacción - Tarea 4 (8).jpg

Versión Móvil: La toolbar es visible, El título es el nombre del patrón, mas abajo acompañado por su descripción, luego un índice desplegable, y alcanza a mostrar la primera lista de patrones, para continuar se debe hacer scroll o utilizar el índice.

Versión Web: La toolbar es visible, El título es el nombre del patrón, divididas en dos columnas están la descripción y el índice, tambien desplegable y alcanza a mostrar la primera lista de patrones y el título del primer ejemplo, para continuar se debe hacer scroll o utilizar el índice.

Al hacer Scroll

Paola Chicano - Taller de Diseño de Interacción - Tarea 4 (9).jpg

Versión Móvil: La toolbar deja de ser visible, El título pasa a ser el tipo de patrón, que solo será visible sobre el primer ejemplo, luego a modo de subtítulo el nombre del ejemplo dentro de un recuadro mas pequeño, mas abajo acompañado por la información de este, luego un slideshow de imágenes con pie de página descriptivo y finalmente la partitura de interacción.

Versión Web: La toolbar deja de ser visible, El título pasa a ser el tipo de patrón, que solo será visible sobre el primer ejemplo, luego a modo de subtítulo el nombre del ejemplo dentro de un recuadro mas pequeño, se divide la página en dos columnas, a la izquierda la información del patrón y a la derecha el slideshow de colección de pantallas con su pie de página respectivo, y finalmente la partitura de interacción.