Camilo Caroca Tarea 3 - Taller de Diseño de Interacción 2020

De Casiopea



TítuloCamilo Caroca 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, Diseño Gráfico, Diseño Industrial
3
Alumno(s)Camilo Caroca

Patrones de interacción UX

En este ciclo de "Patrones de interacción Ux" nos centramos principalmente en entender el diseño de interfaz, entender al usuario, al sistema que hay detrás y a quienes diseñan esta misma para así poder adentrarnos en el concepto más específico "Patrones de interacción" conociendo el contexto en el cual se desarrolla este. Comenzamos esta etapa estudiando y analizando como 'usuarios' los variados comportamientos existentes en las interfaces, buscando patrones de interacción, buenas y malas prácticas, comparando sitios, describiendo las propias experiencias en los sitios para poder nombrarlas y transmitirlas de la mejor forma a terceras personas, entre otras cosas. Luego de esto profundizamos en el funcionamiento del sistema, viendo referencias de sitios web, esta vez para ver distintas posibilidades de uso, para afinar el ojo en cuanto a los tamaños más óptimos y frecuentes que se utilizan y para conocer mejor los estándares del diseño de interfaz. Este estudio de patrones finalizó con un proyecto de sitio web a modo grupal, realizado en html y Css y publicado en github, donde pusimos en práctica todos los conocimientos adquiridos durante esta etapa; el proyecto contó con variados prototipos de wireframes para llegar al diseño de interfaz y con dos prototipos más del diseño de interfaz, para llegar a la propuesta final. El contenido principal del sitio web son los Patrones de interacción y el propósito de este es servir como repositorio de patrones para que los usuarios puedan consultar información, manifestar su opinión y para que se puedan definir de manera más clara ciertos estándares y buenas prácticas del diseño de interacción en sitios web.

¿Qué son los patrones de interacción?

Un patrón de diseño de interacción (IxD) es una solución general y repetible para un problema de uso común en el diseño de interfaz o diseño de interacción. los patrones de interacción son un puente de comunicación entre el usuario y el sistema, estos sirven para simplificar tanto la tarea del diseñador de interfaz como la del usuario en algunos casos, ya que al dejar en claro un método eficiente de operar en el sistema para suplir una determinada necesidad o problema, el diseñador de interfaz acudirá a este método eficiente para suplir esta necesidad o problema dentro de la interfaz, por otro lado el usuario se va acostumbrando también al funcionamiento de determinados patrones en determinados casos, ya que al tratarse de soluciones repetibles a este le cuesta menos entender de que se trata. El usuario y el sistema están fuertemente vinculados para que un patrón de interacción se torne eficiente o deficiente , de tal manera que si el usuario no entiende el sistema o lo considera muy complejo, el patrón de interacción quedará catalogado como mediocre o inservible.

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

Es importante porque como diseñadores tenemos el deber de promover y estandarizar las buenas prácticas, también entender y mejorar las malas prácticas que circulan frecuentemente por la web, considero que es muy importante acercarnos a la experiencia de ser 'usuarios' para saber por experiencia propia cuales son las fallas y dificultades, ya que muchas veces como diseñadores tenemos pensamientos erróneos, muchas veces creemos que el diseño que nosotros creamos funciona muy bien y que los usuarios están conformes con estos métodos, pero la verdad es que en muchos casos el usuario no tiene otra opción que usar los malos diseños que creamos los diseñadores, o en algunos casos el usuario valora otros detalles de nuestros trabajos y no los que nosotros pensamos, detalles que como diseñadores varias veces no captamos por el solo hecho de no vivir la experiencia del servicio. Por último considero muy importante crear este espacio web para que los usuarios y diseñadores puedan expresar sus opiniones y puedan debatir sobre los diseños de interacción que se utilizan y circulan diariamente por todo el mundo.

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

las buenas y malas prácticas de este patrón están vinculadas al aspecto de fluidez que tiene el usuario al momento de navegar por un sitio, ya que al tener mucho contenido recomendado que no se vincula con la información principal y además este contenido se muestra de forma obligatoria, de gran tamaño y reiteradas veces en una misma página la fluidez de navegación por el sitio se va a ver fuertemente perjudicada; por el contrario si las recomendaciones sí están vinculadas con el contenido principal del sitio, son pequeñas y no se muestran interrumpiendo la información más relevante, la fluidez de navegación no se va a ver perjudicada, sino que se verá beneficiada.

¿Qué son los wireframes?

Un wireframe es un boceto o estructura de alambre donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web, su objetivo es poder experimentar la futura experiencia de un usuario, definir el contenido y la posición de los diversos bloques dentro de un sitio web. Los wireframe incluyen menús de navegación, bloques de contenido, imágenes, iconos, etc. Te permiten ver como interactuarán estos elementos entre sí y además te permiten visualizar el comportamiento de sitios web en distintas plataformas.

Patrón: Contenido recomendado no solicitado por el usuario

Descripción

Este patrón ofrece contenido distinto al contenido principal que el usuario busca o utiliza dentro de las distintas plataformas y sitios web, en ocasiones el contenido recomendado no solicitado por el usuario puede tener una cierta relación con el contenido que le interesa y utiliza principalmente el usuario dentro de un sitio web, ya que ambos contenidos pueden estar asociados a través de las estructuras similares que poseen o porque ambos pertenecen a una misma categoría, género o temática. Por lo general el contenido recomendado se muestra acompañando en los extremos de la pantalla o se muestra entremedio del contenido. Este patrón intenta persuadir y motivar al usuario con recomendaciones para que este permanezca el mayor tiempo posible navegando en una interfaz o para que este acceda a otro sitio donde pueda informarse sobre algún producto o servicio determinado (en este caso el contenido recomendado es poco relevante para el usuario, ya que no tiene ninguna relación con el contenido principal que le interesa ver a este). En este patrón se encuentran variadas formas para recomendar contenido, por ejemplo: Banners, pop ups, recomendaciones personalizadas, recomendaciones por categorías, géneros o temáticas, recomendaciones con marcadores de éxito, recomendaciones por correos electrónicos, entre otros casos.

Los Banners son unos espacios que se colocan estratégicamente en los sitios web, los cuales pueden ser de distintos tamaños y formas y por lo general sirven para mostrar productos o servicios de otros sitios web; el banner lo que busca es llamar la atención de los usuarios para que estos hagan clic y obtengan mayor información sobre el breve contenido que se alcanza a mostrar en un banner. Los banner pueden tener múltiples elementos, como por ejemplo: botones interactivos, videos, imágenes, logos, movimientos al modo de diapositivas, entre otras cosas. Existen los banners horizontales y los banners verticales ¿Cuales molestan más a la hora de acceder a algún sitio? Considero que ambos molestan de formas distintas, ya que el horizontal cuando se encuentra puesto entremedio de la página interrumpe bruscamente el contenido de esta y cuando el banner es vertical no interrumpe el contenido del sitio pero permanece más tiempo en la página ya que al ser extenso y vertical requiere de más scroll para desaparecer de la pantalla, además esta forma le quita espacio al ancho de la pantalla, lo cual genera que esta se vea mucho más comprimida. En esta forma de banner el usuario descansa menos de ver contenido recomendado o anuncios, pero puede acceder de modo más fluido al contenido de la página, también existen banners verticales que se mueven a la par con el scroll los cuales no desaparecen en ningún momento de la pantalla y que considero que son la peor práctica de banner que existe; Desde mi punto de vista el mejor banner es el que se muestra en un acotado espacio y en los margenes laterales, ya que de esta forma no interrumpe y tampoco permanece presente en todo momento quitándote espacio al ancho de la pantalla.

Los Pop ups son ventanas emergentes que aparecen al abrir un sitio web, estas son especialmente molestas debido a que invaden mucho el espacio de la pantalla y en ocasiones son muy difíciles de cerrar, también porque en algunos casos aparecen cada vez que se abre una nueva página dentro del mismo sitio. Las recomendaciones personalizadas son categorías que utilizan los datos previos de los usuarios (como por ejemplo los contenidos visitados anteriormente, los contenidos más visitados, los contenidos que le gustaron al usuario, etc) para poder hacer recomendaciones mas acertadas, por lo general estas prácticas se dan en los servicios de streaming y redes sociales y son bien recibidas por los usuarios.

Caso N°1

  • Nombre de la plataforma: La Tercera
  • Descripción del servicio: Periódico chileno de circulación diaria
  • Escala de habitos UX: Bueno
  • Descripción de experiencia de usuario: Ofrece contenido recomendado que se asemeja al contenido que accedió anteriormente el usuario.
  • Colección de Pantallas:
Abrir buscador  Buscar sitio web Página de inicio  Selección de noticia Página de la noticia  Contenido de la noticia  Contenido de la noticia  Recomendación de noticias 


  • Partitura de interacción

Caso N°2

  • Nombre del servicio: Tele 13
  • Descripción del servicio: Noticiero chileno transmitido por televisión
  • Escala de habitos UX: Bueno
  • Descripción de experiencia de usuario: Ofrece contenido recomendado que está dentro de la misma categoría que el contenido que accedió anteriormente el usuario.
  • Colección de Pantallas:
Abrir buscador Buscar sitio web Selección de video Página del video Reproducción del video Etiquetas del video Noticias relacionadas


  • Partitura de interacción

Caso N°3

  • Nombre del servicio: Repelis
  • Descripción del servicio: Página cuyo principal objetivo es la distribución de películas cinematográficas
  • Escala de habitos UX: Bueno
  • Descripción de experiencia de usuario: Ofrece películas recomendadas del mismo género que la película que se reprodujo anteriormente.
  • Colección de Pantallas:
 Abrir buscador  Buscar sitio web Página de inicio  Categoría de películas recientes  Página de la película  Pantalla de la película  Película reproducida  Comentarios sobre la película  Recomendaciones de películas  Recomendaciones de películas
  • Partitura de interacción

Caso N°4

  • Nombre de la plataforma: Instagram
  • Descripción del servicio: Red social y aplicación, cuya principal función es subir fotos y vídeos.
  • Escala de habitos UX: Bueno
  • Descripción de experiencia de usuario: Servicio posee barra de recomendaciones con diversas temáticas, lo cual se torna interesante y variado para el usuario.
  • Colección de Pantallas:
 Página de inicio  Galería de contenido recomendado  Desplazamiento de la barra de recomendaciones  Desplazamiento de la barra de recomendaciones  Desplazamiento de la barra de recomendaciones  Selección en la opción Deportes  Reproducción de contenido
  • Partitura de interacción

Caso N°5

  • Nombre de la plataforma: Netflix
  • Descripción del servicio: Aplicación multiplataforma, empleada para la reproducción de música vía streaming.
  • Escala de habitos UX: Bueno
  • Descripción de experiencia de usuario: Ofrece recomendación por categorías (categorías personalizadas)
  • Colección de Pantallas:
 Página de bienvenida  Página principal de netflix muestra película reciente  categorías recomendadas en la página principal  Net-4404.PNG  Net-4405.PNG  Net-4406.PNG  1IMG-4407.png   Net-4408.PNG
  • Partitura de interacción

Caso N°6

  • Nombre del servicio: Aliexpress
  • Descripción del servicio: Tienda en línea que ofrece productos para compradores internacionales
  • Escala de habitos UX: Bueno
  • Descripción de experiencia de usuario: Ofrece recomendación por categorías (categorías con ofertas y con marcadores de éxito, entre otras)
  • Colección de Pantallas:
 Abrir buscador  Buscar sitio web  Página de bienvenida  Página de bienvenida  Página con categorías  Página con categorías  Página de smartphones y accesorios  Ventana de cables telefónicos 
  • Partitura de interacción

Caso N°7

  • Nombre del servicio: Appstore
  • Descripción del servicio: Aplicación que permite a los usuarios buscar y descargar aplicaciones
  • Escala de habitos UX: Bueno
  • Descripción de experiencia de usuario: Ofrece contenido Top recomendado por categoría (categoría de fotografía y video, de Entretenimiento, de Niños, etc)
  • Colección de Pantallas:
 Apps-1427.png  Apps-4428.PNG  Apss-4429.PNG  Apps-1431.png  Apps-4432.PNG  Apps-4433.PNG  Apps-4434.PNG  Apps-4435.PNG  Apps-4436.PNG
  • Partitura de interacción

Caso N°8

  • Nombre del servicio: Cuevana3
  • Descripción del servicio: Aplicación multiplataforma, empleada para la reproducción de música vía streaming.
  • Escala de habitos UX: Malo
  • Descripción de experiencia de usuario: Ofrece contenido recomendado que no está dentro del mismo género que el contenido visitado anteriormente por el usuario.
  • Colección de Pantallas:
 1IMG-4336.png  Cuev-4330.PNG  Cuev-4331.PNG  Cuev-4332.PNG  Cuev-4333.PNG  Cuev-4334.PNG  Cuev-4335.PNG
  • Partitura de interacción

Caso N°9

  • Nombre del servicio: Publimetro
  • Descripción del servicio: Periódico chileno de circulación diaria
  • Escala de habitos UX: Mediocre
  • Descripción de experiencia de usuario: El servicio muestra contenido recomendado obligatorio y ofrece contenido recomendado que no se vincula con el que visitó anteriormente el usuario.
  • Colección de Pantallas:
 1publimetro.png  1IMG-4251.png  Publi-4253.PNG  Publi-4254.PNG  Publi-4255.PNG  Publi-4256.PNG  Publi-4257.PNG  Publi-4258.PNG
  • Partitura de interacción

Caso N°10

  • Nombre del servicio: El Día
  • Descripción del servicio: Periódico chileno de circulación diaria
  • Escala de habitos UX: Malo
  • Descripción de experiencia de usuario: Contenido recomendado obligatorio cada vez que se carga nueva página y además contenido recomendado obligatorio en menor tamaño que el anterior y que no tiene relación con el contenido del sitio.
  • Colección de Pantallas:
 Eldia-4364.PNG  1IMG-4365.png  1IMG-4366.png  Eldia-4368.PNG  Eldia-4369.PNG  1IMG-4370.png  1IMG-4378.png  Eldia-4379.PNG  Eldia-4380.PNG  Eldia-4381.PNG Eldia-4382.PNG  Eldia-4383.PNG


  • Partitura de interacción

Caso N°11

  • Nombre del servicio: La Cuarta
  • Descripción del servicio: Aplicación que permite a los usuarios buscar y descargar aplicaciones
  • Escala de habitos UX: Malo
  • Descripción de experiencia de usuario: Ofrece contenido recomendado obligatorio que se repite en todas las páginas y contenido recomendado que no tiene relación con el contenido de la página visitada, de menor tamaño y que varía en cada página del sitio.
  • Colección de Pantallas:
 Lacuarta-4528.PNG  Lacuartab-4529.PNG  Lacuarta-4530.PNG  Archivo:Lacuarta-4535.PNG  Lacuarta-4536.PNG  Lacuartab-4538.PNG  Lacuarta-4539.PNG  Lacuarta-4542.PNG  Lacuarta-4547.PNG  Lacuarta-4548.PNG  Lacuarta-4551.PNG  Lacuarta-4552.PNG
  • Partitura de interacción

Caso N°12

  • Nombre del servicio: Reydekish
  • Descripción del servicio: Blog que documenta y relata historias de la antigüedad
  • Escala de habitos UX: Malo
  • Descripción de experiencia de usuario: Ofrece contenido recomendado obligatorio que se muestra tres veces en una misma página, el cual no tiene relación con el contenido principal del sitio.
  • Colección de Pantallas:
 Reydekish-5175.PNG  Reydekish-5176.PNG  Reydekish-5177.PNG  Reydekish-5178.PNG  Reydekish-5179.PNG  Reydekish-5180.PNG  Reydekish-5181.PNG  Reydekish-5182.PNG  Reydekish-5183.PNG   Reydekish-5184.PNG   Reydekish-5186.PNG   Reydekish-5187.PNG
  • Partitura de interacción