T1: Feedly - Catalina López Guerra

De Casiopea
Estudio y Rediseño de Feedly - Catalina López Guerra
TítuloEstudio y Rediseño de Feedly - Catalina López Guerra
Palabras Claverediseño
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2024
CarrerasDiseño
Alumno(s)Catalina López Guerra
ProfesorHerbert Spencer
URLhttps://apps.apple.com/cl/app/feedly-smart-news-reader/id396069556

Entrega 1 - 15.03.24

Encargo Solicitado

  • Se solicita seleccionar y analizar una aplicación de agregación de contenido. Tomando en consideración la presentación y el propósito de la aplicación, estilo general, etiquetado y lenguaje. Realizando observaciones, dibujos y esquemas dentro de una lámina de estudio.


LargoswikiCLG1.png



¿Cómo funciona?

Feedly hace que sea más fácil tanto leer como seguir el contenido en línea al consolidar múltiples fuentes de información en una sola plataforma y proporcionar herramientas para personalizar y gestionar esas fuentes según las especificaciones del usuario.



1200x630wa.png


FEEDLY

  • La aplicación funciona con su propia infraestructura de sincronización de datos llamada ”Feedly Cloud”.
  • Feedly introdujo aspectos personales, incluyendo la habilidad de seguir fuentes de redes sociales además de sus feeds RSS o Atom regulares.

1200x600wa.png


FEEDLY CLASSIC

  • El proyecto comenzó como una extensión de navegador que funcionaba con Google Reader.
  • Google Reader era un servicio de agregación de noticias que fue eliminado abruptamente en 2013.
  • Feedly Classic ofrecía una experiencia de usuario más básica en comparación con la versión actual de Feedly.



Comparativa

Pruebawiki1CLG.png


PÁGINA WEB

  1. La versión web está distribuida de tal forma que aprovecha mejor el espacio de la pantalla.
  2. Se utilizan las funcionalidades principales en las dos versiones.

Pruebawiki2Entrega1CLG.png


APLICACIÓN

  1. La aplicación móvil está optimizada para pantallas pequeñas y táctiles.
  2. Presenta las funcionalidades principales, pero al ser en formato móvil se le incorporan funcionalidades específicas para la portabilidad.
  3. Acceso sin conexión y sincronización.
  4. Integración con el sistema operativo.



Largoswiki2CLG.png



Look and Feel



Largoswiki3CLG.png

Lenguaje Visual La app presenta como tipografía base la Helvetica. Pero al momento de leer artículos y publicaciones, está la posibilidad de cambiar tanto el tamaño, el color de texto y fondo y la tipografía haciéndola adaptable para el gusto de su respectivo usuario.



Screenshots / Pantallazos

Pruebawiki3CLGENCARGO1.pngPruebawiki4clgencargo2.pngPruebawiki5CLGENTREGA1.pngPruebawiki6CLGENCARGO1.png


Etiquetado y Lenguaje

Pruebawiki7CLGENCARGO1.png


ETIQUETADO

  • Los puntos de despliegue dentro de la página de lectura. En sí, los contenidos se visualizan en en el borde superior e inferior dando opciones para uso externo. También proporcionando solo uno a más fragmentos claves del artículo, dando la opción de ir a la fuente oficial.

Pruebawiki8CLGENTREGA1.png


LENGUAJE

  1. Se visualizan metáforas donde se expresa sin la necesidad de ser literal, el artículo se categoriza en el área del diseño y artes donde se implementan estos versos con mayor regularidad.
  2. Se ve un lenguaje más formal y directo. Preciso, para un público que va enfocado a leer lo que se informa en el enunciado.



Análisis

¿Por qué FEEDLY se puede considerar una aplicación de agregación de contenido?


  • Recopilación de fuentes
  • Organización personalizada
  • Consolidación de contenido
  • Opción de personalizar y recibir recomendaciones
  • Acceso a multiplataformas


PODRÍAMOS DECIR QUE... La app FEEDLY, posee un orden sencillo y directo. Sin necesidad de poseer tantos colores ni una gran cantidad de opciones de uso, Feedly mantiene la opción de personalizar el contenido a partir de las necesidades e intereses del usuario. Dando así una gran variedad de información actualizada y verídica con su respectivo orden adaptable a las indicaciones del usuario.



Comparativa a partir de 2 usuarios

Se plantea la idea de visualizar dos objetivos de usuario que interactúen con la app. Uno enfocado en el estudio del Diseño de la app y el otro desconociendo totalmente la app y con intención de probarla.



1200x630wa.png


PRIMER USUARIO

  • No está en español, pero no se expresa una gran cantidad de texto, solo palabras claves.
  • Al hacer uso de palabras claves es fácil de entender sin necesidad de tutorial.
  • La gráfica es simple pero al ser categorizada resulta fácil de comprender y adaptable a su respectivo público.

1200x600wa.png


SEGUNDO USUARIO

  • No se encuentra el cambio de idioma.
  • Le pareció agradable el orden de la página principal y su modo de uso.
  • Es un método directo de visualizar las noticias y artículos de su interés, sin necesidad de tanta búsqueda.




Entrega 2 - 19.03.24

Encargo Solicitado

  • Luego de la corrección realizada por la profesora ayudante Javiera, se toma en consideración bastantes puntos de la lamina realizada donde entre conversaciones y comparativas entre compañeros se logra crear un enfoque en lo que se quiere profundizar a continuación.
  • El encargo a realizar tiene presente el análisis de pantallas y de navegación. Tomando en consideración la consistencia, la organización de contenidos, la adaptabilidad y el uso del espacio. Además de tres ejemplos/situaciones dentro de la aplicación presentadas en wireflow.


Portadawikiencargo2CLG.jpg

Comparativa entre las versiones de la aplicación



Materialgraficoentrega2TDiX2CLG.jpg

Caracteristicas de las aplicaciones

FEEDLY CLASSIC: Permite a los usuarios organizar sus feeds RSS y fuentes de noticias en categorías personalizadas para una mejor gestión y acceso. Feedly Classic brinda una experiencia de lectura centrada en las noticias y los artículos sin distracciones. Además permite cierta personalización en la apariencia de la interfaz y la disposición de los elementos, pero no tan amplia como en las versiones más recientes. Ya sea a través de la web o a través de aplicaciones móviles, los usuarios pueden acceder a sus feeds y preferencias desde una variedad de dispositivos. La suscripción a fuentes RSS es compatible con Feedly Classic, lo que facilita a los usuarios seguir blogs, sitios web y otras fuentes de noticias.

FEEDLY: En esta versión es posible acceder a todas sus fuentes de información desde una sola plataforma, además de organizar tus fuentes en categorías personalizadas y ajustar la apariencia de la interfaz según tus preferencias. Se presenta un sistema de lectura sencillo y selectivo en lo que te interesa. Puedes marcar artículos interesantes para leer más tarde o guardarlos para usar en Evernote o Pocket. Esto le permite mantener sus preferencias y marcadores sincronizados y acceder a su contenido desde cualquier dispositivo. Compartir contenido interesante en tus redes sociales favoritas, como Twitter, Facebook y LinkedIn. Además, para brindar una experiencia de usuario más completa, se puede integrar con servicios de terceros como Pocket, Evernote y Buffer.



Materialgraficoentrega2TDiX6corte1CLG.jpg


PÁGINA DE INICIO

  • En la página principal, se nos presentan las actualizaciones diarias, o las más recientes. Dichos artículos se categorizan e clasifican en carpetas donde sutilmente se ordena en el inicio. No posee una gran cantidad de colores, se mantiene en el blanco y negro junto a un azul para indicar el titulo de la carpeta, el color incorporado en la página seria el de las fotografías que encabezan su respectivo articulo.

Materialgraficoentrega2TDiX6corte2CLG.jpg


ARTICULO

  • Los artículos presentan fotografías y dibujos con relación al tema a tratar. La tipografía base es la Helvética, pero la aplicación decide hacer mas personalizable el modo de lectura, otorgando al usuario la decisión de poder modificar la tipografía, color de fondo y tamaño que le parezca mas conveniente.
  • Se sigue manteniendo los colores blanco y negro de base, también posicionando los botones en el borde superior he inferior en tonos grises, dado que cuando el usuario tenga la necesidad hará uso de ellos pero al momento de leer no estorba a la lectura.

Materialgraficoentrega2TDiX6corte3CLG.jpg


BÚSQUEDA DE CONTENIDO

  • La búsqueda de contenido presenta mucho mas color, dichos colores se ven directamente relacionados con las imágenes que representan cada opción de categoría a la que podemos disponer. Al distribuir los artículos y sus fuentes dentro de categorías facilita el armado de carpeta del usuario.



Comparativa perfil de usuario

Comentarios Feedly CLassic

Para realizar estas comparativas se le solicito a 5 estudiantes con rango de edad 19-23 años que se instalaran Feedly en su versión actual y la Classic, realizando un par de preguntas pero centrando la atención principalmente en la impresión que tenían al utilizar la aplicación por primera vez.

Con Feedly Classic, hubieron varios problemas ya que la aplicación se cerraba repentinamente y no permitía crear una cuenta con facilidad, no se explicaba el modo de uso y la mayoría se las fotografías y ilustraciones de los artículos y categorías no se podían visualizar.



Comentarios Feedly

Con la aplicación actual de Feedly hubo una reacción diferente, se pudo utilizar con mayor fluidez aunque se comentaba bastante la ausencia de algún tutorial para comprender mejor la aplicación. Funcionaba bien, fluido y mucho mas accesible.



Wireflow

Inicio

Entrega2,TDiX wireflow2CORTE2.jpg

Edición de Articulo y Categorización

Entrega2,TDiX wireflowCLG.jpg

Feedly Classic

Entrega2,TDiX wireflowClassicCLG.jpg


Entrega 3 - 22.03.24

Encargo Solicitado

  • Para este encargo se plantea el continuar con la investigación, enfocándonos en su navegación y experiencia de usuario, tomando en consideración lo mencionado anteriormente y seguir con la linea de datos para encontrar una problemática que rediseñaremos como entrega final.


Entrega4 introducciónwikiaa.jpg

Wikifrimesentrega3CLG.jpg

Para comenzar este proyecto se decidió estudiar la aplicación de agregación de contenido FEEDLY, luego de un análisis comparativo entre la página web y las aplicaciones de Feedly, se decidió llevar el enfoque en la aplicación actual. Para ello se comenzó analizando el lenguaje visual (LOOK AND FEEL) junto con el etiquetado y lenguaje mientras que a la par se iba avanzando en las comparativas y interacciones con la aplicación, para así pasar al estudio de pantalla y navegación dentro de la app hilando la información solicitada para ir avanzando en la recopilación de puntos buenos y a mejorar desde la perspectiva de nosotros, el usuario.



Coherencia de estructura

Pruebawiki2CLG.png


PÁGINA DE INICIO La mayoría de las opciones de navegación se encuentran en la pantalla de inicio, además de repetirse a medida que se avanza dentro de la aplicación.

PruebawikiCLG.png


ARTICULO Siguiendo el formato de periódico, se mantiene respetando las jerarquías entre los textos.



Tiempo

Pruebawiki3CLG.png


Al ser una aplicación con un diseño bastante simple, sin mucho color y manteniendo una jerarquía clara. El encontrar información de lo que se desea realizar se hace mucho más sencillo, aunque la repetición constante de las opciones tiende a confundir además de las similitudes de sus acciones. Como por ejemplo, El guardar y favorito se presenta en una misma carpeta y desaparece al momento de abrirlo en su categoría de guardado. Por lo cual lo hace momentáneo y confuso.



Pruebawiki4CLG.png
  • PANTALLAS: La distribución de la información se centra en la categorización, esta es adaptable al gusto del usuario. Tomando así sus preferencias como contenido deseado.
  • WIREFLOW: El Home posee la gran mayoría de los enlaces principales, así también visualizamos cómo se repiten en su mayoría dichas funciones pero con diferente icono.
  • PRIMERA IMPRESIÓN: El orden agrada visualmente pero la cantidad de funciones que no se explican en el inicio es un poco confusa, la mayoría se mantiene en iconos o ingles. por lo cual si no vas con un objetivo claro se vuelve un poco difícil el comprender el propósito de la app.
  • INFORMACIÓN ENTREGADA: Se entrega una gran variedad de categorías al usuario, pero aun así al analizar y leer las últimas noticias de la mayoría, se puede ver que algunas no están actualizadas desde hace bastante tiempo.


Debilidades

Guía de navegación

Al momento de iniciar se presenta una leve introducción de la aplicación, esta se encuentra en inglés. Pero al momento de iniciar solo presenta cómo crear una carpeta de lectura, para así terminar la introducción. La mayoría de acciones se aprenden probando seleccionar los distintos enlaces pero aún así si uno busca alguna tutoría de uso solo se encuentra en redes por otras fuentes independientes a Feedly.

Sistema de verificación de la información

La información que entrega las distintas categorías, son la labor principal de la aplicación. Pero al ir leyendo varias categorías podemos comparar que hay diferencias de actualización. Por ejemplo, tenemos la categoría tecnología y moda, tecnología actualizo hace 3 días mientras que moda hace un año. ¿Quién supervisa esa información?



Tiempo

Wikifrimeentrega36.jpg


La aplicación móvil Feedly es bastante veloz al momento de navegar en ella. Se toma en consideración el uso sin internet, viendo así que no se puede utilizar. La velocidad de la aplicación es de segundos pero se ve una diferencia a partir de la señal del aparato.



Necesidades de usuarios con diferentes capacidades


IDIOMA Al comenzar el uso de la aplicación nos encontramos con que el idioma que se encuentra en inglés. La introducción, guía y adaptación del usuario con la aplicación se contempla en este idioma. Por lo cual es de difícil uso y no es comprensible para los usuarios que no manejan el idioma.


CONTENIDO NO TEXTUAL Los artículos y páginas principales no poseen una gran variedad de contenido no textual, en su mayoría son textos y los artículos se componen de una fotografía de presentación y una gran extensión de texto. No considerando las opciones de incorporar más comprensión visual y auditiva a la aplicación.



Los dos puntos mencionados se relacionan en una falencia de la comunicación del contenido a partir de las limitaciones textuales. Sin tomar en consideración las opciones de mantener el contenido no textual como una base primordial para comprender el artículo y a su vez atrapar a los diferentes usuarios que buscan y necesitan la transmisión del contenido de dicha forma.


Arquitectura de la información



Entrega 4 - 26.03.24

Encargo Solicitado

  • Teniendo presente el encargo anterior, Se toma en consideración el análisis y experiencia de usuario enfocado en la aplicación. Para llevar la idea de manera concreta se solicita realizar el rediseño de la app, enfocándonos en un punto o un conjunto de ejecuciones que la app no plantea de manera correcta según nuestro criterio.


Opciones de rediseño

Guía de navegación

Al momento de iniciar se presenta una leve introducción de la aplicación, esta se encuentra en inglés. Pero al momento de iniciar solo presenta cómo crear una carpeta de lectura, para así terminar la introducción. La mayoría de acciones se aprenden probando seleccionar los distintos enlaces pero aún así si uno busca alguna tutoría de uso solo se encuentra en redes por otras fuentes independientes a Feedly.


Sistema de verificación

La información que entrega las distintas categorías, son la labor principal de la aplicación. Pero al ir leyendo varias categorías podemos comparar que hay diferencias de actualización. Por ejemplo, tenemos la categoría tecnología y moda, tecnología actualizo hace 3 días mientras que moda hace un año. ¿Quién supervisa esa información?


Enlaces extras

En la aplicación se presenta una repetición constante de las opciones. Esto tiende a confundir, además de de encontrarse con enlaces con similitudes en sus acciones. Como por ejemplo, El guardar y favorito se visualizan en una misma carpeta y desaparece al momento de abrirlo en su categoría de guardado. Por lo cual lo hace momentáneo y confuso.


Croquis realizados mientras se desarrollaba la propuesta



Decisiones

Presentaciónpantallasss.jpg


Como primera propuesta de rediseño, se plantea incorporar un tutorial paso a paso, explicando algunos puntos a utilizar dentro de la aplicación. Esto es para facilitar la navegación y comprender de mejor forma el propósito de esta. Otro punto que se integra a la propuesta es la elección de idioma y darle más protagonismo al robot mascota de la aplicación, para así la aplicación hacerla más atractiva sin perder su línea gráfica.


Wireframe

WIREFRAMEentrega4TDiX.jpgWIREFRAMEentrega4TDiX2.jpgWIREFRAMEentrega4TDiX3.jpgWIREFRAMEentrega4TDiX4.jpgWIREFRAMEentrega4TDiX5.jpg


Diseño oficial aplicación

Iniciosimple.pngIniciarsesión.pngSimpleinicio.pngDiseñosimple2aa.png



Entrega Final Ciclo 0 - 02.04.24




WikifrimeslongINTRODUCCIÓNCLG2.png


Decisiones

Guía de inicio

PARTITURA DE INFORMACIÓN

PartiturainiciosesiónCLG.png

La presente tabla indica la primera interacción del usuario con la aplicación de feedly. Dos puntos importantes de los que me pude percatar fueron, La ausencia de configuración en el idioma determinado por la aplicación y de la mano a esto, la falta de indicaciones con respecto de que trata la aplicación y la forma de uso. Al no estar estos dos puntos presentes en el inicio de uso, es confuso y poco atractivo para el usuario. Al decir atractivo hago referencia a que el no entender una aplicación en los primeros intentos da como resultado que se pierda el interés.

Perfil y sus carpetas

PARTITURA DE INFORMACIÓN

TablacarpetaCLG.png

Al ir avanzando en el uso de la aplicación, se van otorgando distintas opciones. Uno de los principales propósitos de Feedly son sus Feeds, la categorización de la información y la presentación de la información dependiendo de nuestros gustos hacen que la aplicación sea atrayente ya que se le otorga al usuario el poder de omitir y concentrar su atención en la información de su agrado. Pero a su vez, las carpetas creadas se pierden con frecuencia, como a su vez las fuentes dueñas de la información pierden protagonismo al no poseer un punto principal de búsqueda donde se sepa más de la fuente.

Look and Feel

La aplicación se desenvuelve en un fondo blanco característico junto a textos negros y grises, algunos detalles leves en verde, y las fotografías e ilustraciones que si al usuario no le agrada las puede quitar de la pantalla. Un espacio limpio pero poco llamativo, no se presenta un contraste alto como tampoco una gran variabilidad en se estructura.



WikifrimesTIPOGRAFIACLG.png


TIPOGRAFÍA

  • Se mantiene la tipografía, Helvética. Presentándose en sus variables Regular y Bold .

Wikifrimes2COLORCLG.png


PALETA DE COLORES

  • Los colores característicos también se mantienen, Se plantea mantener en su mayoría el material grafico que posee la aplicación. Interviniendo en los contrastes y diagramación como prioridad.

Wikifrimes3TIPOGRAFIACLG.png


ICONOS

  • Se reutilizan los iconos a utilizar, a su vez se hace uso del robot que se presenta en Feedly pero con muy poca frecuencia. El papel de este seria el de Guía y a su vez un ejemplo de usuario.



PROPUESTA FINAL

GUÍA DE INICIO



Decisiones

La Guía de inicio tiene como objetivo ser de utilidad en el momento que el usuario lo necesite. Se mantiene en la pantalla de inicio y solo con hacerle click te presenta una pequeña introducción a la pestaña que decidiste visualizar, Allí también se indican elementos gráficos para comprender las jerarquías y la utilidad de cada uno. A su vez antes de comenzar el uso de la aplicación, se ubica la opción de seleccionar el idioma en el que se desarrollara la app, así facilitando su entendimiento.



Flujo de navegación

Flujo de navegación TUTORIAL (1)clg.png




Prototipos

    IPhone 14 & 15 Pro - 1CLG.png IPhone 14 & 15 Pro - 2CLG.png IPhone 14 & 15 Pro - 3CLG.png IPhone 14 & 15 Pro - 4CLG.png IPhone 14 & 15 Pro - 5CLG.png IPhone 14 & 15 Pro - 12CLG.png IPhone 14 & 15 Pro - 6CLG.png IPhone 14 & 15 Pro - 13CLG.png IPhone 14 & 15 Pro - 7CLG.png IPhone 14 & 15 Pro - 14clg.png IPhone 14 & 15 Pro - 8CLG.png IPhone 14 & 15 Pro - 15CLG.png IPhone 14 & 15 Pro - 9CLG.png IPhone 14 & 15 Pro - 16CLG.png IPhone 14 & 15 Pro - 10CLG.png IPhone 14 & 15 Pro - 17clg.png IPhone 14 & 15 Pro - 11clg.png IPhone 14 & 15 Pro - 18CLG.png


PERFIL Y CARPETAS



Decisiones

Con el objetivo de hacer la aplicación más personalizable, se decide crear el perfil de usuario en el que solo se presentara el correo de la cuenta y las carpetas donde categorizamos las fuentes de información con respecto a los tópicos que queremos visualizar en nuestro feed. Se toma en consideración que este perfil seria un punto de búsqueda y guardado de la información y fuentes de la que no queremos perder su seguimiento. Considerando que hay una cantidad menor de información sobre las fuentes y sus paginas oficiales, también en las carpetas se ubica nombre y sitio web de los autores de cada articulo.



Flujo de navegación

Flujo de navegación PERFIIL Y CATEGORIASA.png




Prototipos

    IPhone 14 & 15 Pro - 4CLG.png IPhone 14 & 15 Pro - 21CLG.png IPhone 14 & 15 Pro - 26CLG.png IPhone 14 & 15 Pro - 27CLG.png IPhone 14 & 15 Pro - 25CLG.png


LOOK AND FEEL



Decisiones

Para crear un mayor contraste dentro de la aplicación, se decidió incorporar cuadros, iconos y textos del verde característico de Feedly, no solo quedándonos en el blanco y negro, también jugando con las tonalidades de grises y la jerarquía de la información. Se mantienen las posibilidades de edición del usuario y a su vez se integra mas color sin despreocupar la limpieza de la aplicación.


Prototipos

    IPhone 14 & 15 Pro - 1CLG.png IPhone 14 & 15 Pro - 3CLG.png IPhone 14 & 15 Pro - 4CLG.png IPhone 14 & 15 Pro - 20CLG.png IPhone 14 & 15 Pro - 21CLG.png IPhone 14 & 15 Pro - 22CLG.png IPhone 14 & 15 Pro - 23CLG.png IPhone 14 & 15 Pro - 24CLG.png IPhone 14 & 15 Pro - 25CLG.png


Link Figma

https://www.figma.com/file/Eoox4pa9HRC5BNcbeaQmrZ/Propuesta-Redise%C3%B1o-Feedly---Catalina-L%C3%B3pez-G?type=design&node-id=0%3A1&mode=design&t=0ZPs8zSS1HkFSjGT-1