T1: Feedly - Bárbara Arriaza Araya
.png){kind=logo}
| Título | Estudio y Rediseño de Feedly - Bárbara Arriaza Araya |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | rediseño |
| Asignatura | Taller de Diseño de Interacción |
| Del Curso | Taller de Diseño de Interacción 2024 |
| Carreras | Diseño |
| Alumno(s) | Bárbara Arriaza Araya |
| Profesor | Herbert Spencer |
| URL | https://feedly.com/i/my |
Elección de Sitio Web
.png)
¿Qué es Feddly?
Es un lector de contenidos creado en 2008 por Edwin Khodabakchian, está disponible para web o dispositivos móviles que permite agregar el contenido de páginas webs o blogs en un mismo sitio de manera que puedas acceder a tus fuentes de información frecuentes de una manera más rápida, cómoda y fácil. Su público objetivo incluye profesionales, creadores de contenido y cualquier persona interesada en estar informada de las últimas novedades.
Este agregador de noticias posibilita el incluir tus páginas web favoritas y poder organizarlas por carpetas o temáticas y si no tienes tiempo de leer algún artículo que te parezca interesante puedes guardarlo para leerlo más tarde.
¿Cuáles son sus características?
Organizar contenido
Permite agrupar y organizar los artículos de interés.
Búsqueda y descubrimiento
Se pueden encontrar nuevos sitios web o temas relevantes.
Guardar para leer luego
Los artículos pueden marcarse para después.
Compartir en redes sociales
Es posible compartir a través de Twitter, Facebook, LinkedIn y más.
Encargo 1
Lenguaje Visual (Look & Feel)
La presentación del contenido es clara y fácil de entender para el usuario, manteniendo una interfaz sencilla que se maneja mayoritariamente con íconos, tiene blancos y no utiliza mucho color, además se hace uso de texto e imágenes como representación visual de la información. Se puede interactuar con la web mediante menús y botones, pudiendo moverse entre diferentes secciones de la página.
A falta del uso del color, la web recurre mucho a la variación en los tamaños de la tipografía y el jugar con su color en una escala de grises, notándose una jerarquía clara. Los títulos y subtítulos resaltan por sobre lo demás con un color negro y las bajadas son de un color gris claro u oscuro. En los artículos se agrega una breve información muy sutil en el cual se especifica autor, fecha y hora, además de añadir elementos opcionales.
Es una web intuitiva con una configuración adaptable al gusto del lector, la cual deja:
Explorar páginas web y artículos actuales que te recomienda la web y personalizar tu feed.
Seguir varios tópicos como; cine, tecnología, moda, ciencia, marketing, etc.
Escoger el tema de fondo con el que deseas utilizar la interfaz (oscuro o claro).
Escoger la fuente tipográfica que te acomode de las opciones que te ofrece la web para leer los artículos.
Ajustar el tamaño de la letra y la densidad de los títulos.
.png)
Paleta de Colores
.jpg)
La paleta principal se encuentra en la interfaz en general, el blanco o negro como el fondo de la pantalla y en los textos; el verde en el logo y al momento de seleccionar algo.
La paleta secundaria está presente en los recuadros que enmarcan un texto, en los botones e íconos.
Tipografía
Interfaz general Sans Serif
Predeterminado para texto Merriweather
La web permite la edición de la fuente tipográfica para la lectura de los artículos, pudiendo cambiar la fuente, ajustar su tamaño y densidad.
Iconografía y Elementos Gráficos
Tiene íconos que son conocidos y familiares, ya que se han visto en otras aplicaciones, como, por ejemplo: Cuenta, Buscar, Apoyo, Guardados, Leídos, Leídos Recientemente y Actualizar Página.
.png)
En cambio, hay otros íconos que son nuevos y poco comunes, como: Seguir Sitios Web, Monitorear la Web con IA, Registro de Cambios y Cambiar la Disposición.
.png)
En cuanto a los íconos conocidos se es fácil relacionar y distinguir cuál es la funcionalidad de cada cual, en cambio para aquellos que son nuevos y poco usuales es difícil saber para qué sirve la primera vez que se le ven.
Etiquetado y Lenguaje
La interfaz a pesar de estar en inglés mantiene un lenguaje básico, neutro y breve. Tiene una jerarquía clara entre títulos, bajada y subtítulos.
En cuanto a los artículos, la web al reunir contenido de diversas páginas y blogs, el lenguaje y tipo de redacción va variando, por ejemplo: en blogs de moda hay una redacción en primera persona mucho más relajada y cercana con el lector; en gastronomía hay un lenguaje de procedimiento y especificaciones; y en noticias es mucho más formal e informativo.
Lámina
Encargo 2
Pantallas
Consistencia
.png)
A medida que uno cambia de sección, la página mantiene su estructura, con el contenido centrado y sus amplios márgenes a los costados, pero la distancia de estos varia un poco al salir del inicio debido a que el menú del lateral izquierdo no desaparece y el contenido se ajusta a él.
Algo que es bastante cómodo y práctico es que a medida que uno avanza por la web, se van abriendo sub pestañas diferentes en la misma página, siendo mucho más fácil el retroceder, cuanto esto sucede da el aspecto de un archivero sin dejar de lado el menú, por ejemplo; si abro un perfil, luego un artículo y quiero personalizarlo, se verán tres pestañas superpuestas.
Predeterminadamente los artículos o previsualizaciones de estos, se leen con la fuente Merriweather en la página web, pero al momento de seleccionar el link que lleva a la página original de la información, la tipografía cambia.
Adaptabilidad
Escritorio
En la sección de registro el menú este se extiende horizontalmente en la parte superior de la página y al pasar el cursor por una de estas opciones hay un botón desplegable con distintas opciones.
El menú no interrumpe al resto del contenido, aparece en un costado y el resto de la página se adapta a él.
Cuando elegimos la disposición de revista, los artículos se ven como un listado ordenado sin sufrir ninguna interferencia.
Cuando elegimos la disposición de tarjetas el espacio se aprovecha mucho mejor, dejando márgenes equivalentes a los costados y otorgando una mayor visibilidad de opciones.
Celular
En este formato no hay ninguna opción del menú que sea visible, sino que uno debe ingresar al ícono de las tres líneas para desplegar una ventana con todas las opciones.
El espacio no permite un ajuste del contenido al costado por lo que el menú se despliega ocupando toda la página.
La disposición revista en el celular no es compatible debido a que las frases se acortan exageradamente y es poco legible.
La disposición de tarjetas beneficia a ambos formatos, ya que a pesar de que se reduce la cantidad de opciones, en este formato el texto no se ve acortado y es legible.
.png)
Organización de Contenido
La web presenta más información en la página principal al momento de registrarse que en todo el resto de la interfaz, no se encuentra un pie de página al recorrer la interfaz y se retira todo elemento innecesario que ya fue presentado en el registro.
.png)
.png)
.png)
Uso del Espacio
La gran cantidad de margen y que permanezca todo el fondo blanco, permite una mejor lectura evitando distracciones.
Wireflow
Crear Cuenta en Feddly
_(1,3).png)
| Observación 1 | Observación 2 | Observación 3 |
| La página directamente muestra la opción de iniciar sesión para aquellos quienes ya tienen una cuenta creada o registrarse con una cuenta gratis.
El botón verde en el centro incita a hacer click en él. |
Previo al proceso de registro, la página ofrece tres opciones respecto a cómo le gustaría inciar al consumidor, ya sea de forma personal o en equipo. Aun cuando las opciones están en inglés, la opción número uno es por la que uno opta instintivamente. | Aparece el proceso de inicio de sesión/registro definitivo. Es una fase bastante clara y fácil de completar. |
Crear Carpeta de Temáticas
_(2,2).png)
| Observación 1 | Observación 2 | Observación 3 | Observación 4 | Observación 5 |
| En un comienzo la iconografía que es poco usual observarla en otras aplicaciones se es difícil de relacionar con su función, pero una vez revisada la página se vuelve bastante intuitiva. | Hay un variado repertorio de temáticas que uno puede visitar y seguir si le parece interesante. No tiene un orden alfabético o numérico, pero su disposición de galería lo hace práctico y rápido de elegir, ya que permite ver todas las opciones a la vez y no de uno en uno. | Se despliegan nuevas sub-carpetas de perfiles relacionados a la temática escogida, sólo se debe hacer scroll hasta encontrar un perfil de agrado. | Al escoger un perfil y accionar el botón seguir, se abre una pequeña pestaña para poder personalizar el nombre de la carpeta que vamos a crear. | Finalmente la carpeta queda creada y guardada en el menú, con un formato de listado desplegable para poder observar todos los perfiles a medida que se vayan agregando más y tener un acceso más rápido. |
Guardar un Artículo
_(3,2).png)
| Observación 1 | Observación 2 | Observación 3 | Observación 4 |
| En la sección Today nos muestra artículos de perfiles que se estén siguiendo y también permite explorar otros nuevos. Al momento de pasar el mouse sobre la noticia aparecen unos íconos reconocibles de guardado para más tarde, guardado como favoritos y leído. | Si se genera alguna duda sobre cuál es la función de cada ícono, la misma página te señala lo que significa al momento de ubicar el cursor en cada uno, lo cual resulta útil si se está usando por primera vez. | Es cómodo que permita guardar inmediatamente el artículo que te llama la atención sin necesidad de tener que entrar y retroceder todo el tiempo. | En los guardados permite editar la disposición de los artículos, pudiendo ver un listado de títulos, con títulos más portada y como galería. Se puede ordenar desde el agregado más reciente al más antiguo o vicerversa, pero no es posible seleccionar varios artículos a la vez si se desea eliminar. |
Encargo 3
Arquitectura de información
¿Qué es?
Es la disciplina responsable del estudio, análisis, disposición, organización y estructuración de los contenidos en espacios digitales, haciéndolo de manera útil y amigable para que exista una navegación fácil y una mejor interacción con el usuario.
.png)
En cuanto entramos al sitio web por primera vez la información o artículos no están a simple vista, si no que debemos ingresar a la sección explorar; en donde se muestran los artículos en tendencia, o acceder al menú para descubrir las temáticas. En esa primera interacción, puede ser desventajoso el hecho de que la interfaz esté en inglés, por lo que para quienes no manejan el idioma podría ser desalentador el usarla.
Hay secciones del menú que no se comprenden del todo o si es realmente necesario que tengan un ícono, por ejemplo; el monitor de web con IA y el registro de cambios que tiene la aplicación. Pero en general la página tiene una carga y respuesta rápida del contenido, es simple, sencilla y sin anuncios. Una vez la comprendes, se vuelve monótona y de movimientos cortos.
Accesibilidad de Información
¿Qué es?
La accesibilidad se enfoca en que el contenido sea asequible para todas las personas, procurando otorgar una buena experiencia para el usuario a través de un contenido comprensible y conveniente para todos, independientemente de sus habilidades o limitaciones.
¿Por qué es tan importante?
Debido a que hay variedad de personas con discapacidad a las cuales se les dificulta navegar por algún sitio web si este no cuenta con las herramientas necesarias para que puedan utilizarlo. Las discapacidades pueden ser muy diversas, ya sea: visual, auditiva, motriz o cognitiva.
Aquellos que cuentan con ceguera, poca visión o daltonismo, utilizan algún amplificador de pantalla o un lector de pantalla. En este caso el sitio web cuenta con la opción de ajustar el tamaño de la tipografía al gusto del lector si considera que la letra es muy pequeña y poco visible. También si la fuente tipográfica no es de agrado o es dificultosa de leer, se puede cambiar al igual que el fondo de la página si es que tiene sensibilidad visual y le molesta el fondo claro.
Lo que sí juega en contra es el color de los textos que previsualizan los artículos, ya que es muy clara y suave, por lo que podría ser dificultoso de leer.
.png)
Para aquellos que tienen dificultad con la movilidad, alguna debilidad o dificultad para mover el ratón, es posible recorrer la web a través desde el teclado, pudiendo acceder a los botones de la interfaz y a su contenido con solo unas combinaciones de teclas.
.png)
Encargo 4
Propuesta de Rediseño
.png)
.png)
Se proponen cambios muy sutiles y poco radicales para mantener la base original de la web, ya que su formato sencillo, limpio y sin tantos colores se considera bastante óptimo y cómodo para la lectura, evitando así distracciones.
Se opta por fusionar la sección de buscador, temáticas y los artículos en tendencia o de exploración, ya que se estimó innecesario el hecho de que estuvieran separados siendo que tienen la misma finalidad, generando así una reducción de movimientos extras.
En el menú de iconografía se reemplazó la sección Monitor the web with AI Feeds y Changelog debido a su poca utilidad, siendo herramientas poco necesarias como para un atajo directo. En su lugar se colocó el atajo de teclado en el cual se presentan las distintas combinaciones que se pueden realizar para poder navegar por la web.
En la pestaña desplegable se agregaron las carpetas y secciones de:
Guardados: Donde se almacenan los artículos que nos han gustado de manera general.
Favoritos: Los artículos que queremos destacar.
Siguiendo: En vez de aparecer las temáticas que seguimos, aparecen los perfiles/cuentas.
Colecciones: Podemos organizar nuestros elementos guardados por categorías para mantener un orden.
Lectura reciente: Artículo que hemos leído recientemente.
Se mantuvo la iconografía de Change layout y Refresh permitiendo que los artículos puedan ser ordenados como galería, listado, etc.
No es agregado visualmente pero también se propone el poder ajustar la tipografía de los artículos, el tamaño y el fondo directamente desde la lectura. Debido a que al momento de estar leyendo un artículo y se desea realizar un cambio, se debe retroceder e ingresar a los ajustes, ocasionando que luego no permita regresar al artículo en donde estábamos, teniendo que realizar todo el proceso otra vez de buscar la temática, buscar el artículo e ingresar a este.
Página de Inicio
Se decide unir las temáticas disponibles en la web y las tendencias actuales para tener un recorrido más fluido de los artículos, evitando el tener que ingresar a íconos diferentes del menú. Se mantienen los atajos que se consideran necesarios y útiles mientras se utiliza el sitio web, como: la barra desplegable, seguir sitios web, atajos del teclado, buscador, soporte y la cuenta.
En cuanto al color, se agrega el verde para marcar una diferencia más evidente del resto de la interfaz y también para resaltar los botones con la intención de que estos sean más visibles, pero procurando no desviar la atención del contenido principal.
_(1).png)
_(2).png)
Sección de Temáticas
Los perfiles relacionados a las temáticas son reunidos en una sola sección para que sea más ordenado y fácil de explorar, con un disposición horizontal que abarca menos espacio.
_(3).png)
Lectura de Artículos
Se propone que haya una diagramación fija para todos los artículos manteniendo así un mismo lenguaje y formato entre ellos. Se agrega también la capacidad de configurar el texto directamente desde la noticia para evitar el tener que retroceder al menú general e ingresar a la configuración, siendo así mucho más cómodo.
Se reubican botones en donde se consideran más eficientes. Por ejemplo: el ícono de edición se agrega al comienzo para personalizar el artículo antes de leer; la acción de guardado, favorito y compartir que antes estaban al comienzo, ahora se agregan al final, ya que se considera que al terminar de leer la noticia es cuando uno decide si le gusta o quiere guardarlo, no antes.
_(4).png)
_(5).png)
Bibliografía
Stay ahead of the curve with Feedly AI. Feedly.
Link: https://feedly.com/i/discover
Inácio, C. (2022, Marzo 11). Feedly: qué es, para qué sirve y cómo funciona en español 2022. Claudioinacio.com.
Link: https://claudioinacio.com/2022/03/11/feedly-que-es/
Facchin, J. (2020, June 24). ¿Qué es la Arquitectura de la información y cómo aplicarla? El Blog de José Facchin. Link: https://josefacchin.com/arquitectura-de-la-informacion/
¿Qué es la accesibilidad? - Aprende desarrollo web | MDN. (2023, November 23). Developer.mozilla.org. Link: https://developer.mozilla.org/es/docs/Learn/Accessibility/What_is_accessibility#implementa_la_accesibilidad_en_tu_proyecto