T1: POUSTA - Valentina Leiva
| Título | POUSTA - Valentina Leiva |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | rediseño |
| Período | 2024-2024 |
| Asignatura | Taller de Diseño de Interacción |
| Del Curso | Taller de Diseño de Interacción 2024 |
| Carreras | Diseño |
| Alumno(s) | Valentina Leiva |
| Profesor | Herbert Spencer |
| URL | https://pousta.com/ |
Pousta: Sitio de agregación de contenido.
Pousta es un sitio web chileno que se centra en la cultura pop, la música, el arte, el diseño y otros temas relacionados. Se destaca por cubrir una amplia gama de contenidos creativos y de entretenimiento, incluyendo noticias, entrevistas, reseñas de música y cine, eventos culturales, y mucho más. Pousta es conocido por su estilo fresco y su enfoque en la cultura juvenil, atrayendo a una audiencia joven y creativa en Chile y otros países de habla hispana. Además de su sitio web, Pousta también tiene presencia en redes sociales, donde comparte contenido y se involucra con su comunidad de seguidores. Teniendo estos factores en cuenta, ¿podríamos decir que Pousta es una aplicación de agregación de contenido?
¿Qué es una aplicación de agregación de contenido?
Una aplicación de agregación de contenido es una plataforma que recopila y organiza información proveniente de diversas fuentes en un solo lugar para que los usuarios puedan acceder fácilmente a ella. Estas aplicaciones pueden reunir contenido de sitios web, blogs, redes sociales, feeds de noticias, videos, podcasts y otros medios en línea.
El propósito principal de una aplicación de agregación de contenido es proporcionar a los usuarios una forma conveniente de consumir y descubrir información relevante y actualizada sobre temas de su interés sin tener que visitar múltiples sitios web o utilizar diferentes aplicaciones. Algunas características comunes de las aplicaciones de agregación de contenido incluyen la capacidad de personalizar los feeds de noticias según las preferencias del usuario, la opción de guardar y compartir contenido, y herramientas de filtrado y clasificación para ayudar a los usuarios a encontrar contenido relevante de manera más eficiente.
- ¿Por qué es importante la agregación de contenido?
En primer lugar, la agregación de contenido ayuda a las empresas a posicionarse como líderes en su sector al ofrecer a los usuarios información valiosa y relevante. Además, al recopilar contenidos provenientes de diferentes fuentes, se amplía el alcance y la cobertura temática.
¿Qué es la curación de contenidos de contenido?
La curación de contenidos es un término que proviene del inglés content curation y, en la actualidad, es una labor de gran importancia dentro del marketing digital. Podemos realizar esta tarea gracias a las múltiples herramientas que nos ofrece la web.
“Una persona cuyo trabajo no sea crear más contenido, sino dar sentido a todo el contenido que otros están creando, alguien que continuamente encuentra, reúne, organiza y comparte el mejor y más relevante contenido de un tema específico”.
Rohit Bhragava
En los últimos años, el auge de las estrategias de contenido en las organizaciones se ha visto impulsado por el crecimiento de las redes sociales y la necesidad de un mejor posicionamiento en la web. Sin embargo, esto ha resultado en una saturación de contenido, dificultando su procesamiento por parte de los usuarios. La curación de contenido surge como una solución al permitirnos seleccionar y ofrecer información relevante y de calidad para nuestra audiencia.
- Buscar o, más bien, saber dónde buscar
Consiste en definir las fuentes donde vamos a extraer la información y seleccionar las palabras clave que utilizaremos para la búsqueda. Actualmente, hay multitud de recursos que simplifican esta tarea pero sigue siendo fundamental que aportes tu criterio y conocimientos del sector que trates.
- Filtrar
Una vez seleccionadas las fuentes, filtramos el contenido relevante y de calidad. Es crucial aportar nuestra identidad, controlar las publicaciones y combinar diversos tipos de información. Seleccionar el canal adecuado y evitar saturar a la audiencia son aspectos esenciales en la curación de contenidos.
- Publicar
El paso más importante, aquí debemos aportar nuestra identidad y hacer que el trabajo anterior haya merecido la pena. Controla el número de publicaciones, combina diferente tipo de información y decide el canal más apropiado para compartir. No debemos olvidar que uno de los valores de la curación de contenidos es evitar a los usuarios la saturación de información, por lo tanto, evita excederte con la cantidad de contenido que compartas.
¿Qué son los curadores musicales de contenido?
Los curadores musicales son individuos o entidades, como empresas discográficas, plataformas de streaming, DJs o influencers, que seleccionan y organizan listas de reproducción, álbumes o canciones específicas para ofrecer a su audiencia. Su objetivo principal es descubrir, promover y compartir música de calidad que se ajuste a los gustos y preferencias de su público objetivo. Estos curadores suelen tener un profundo conocimiento y pasión por la música, así como habilidades para identificar y destacar talentos emergentes.En Pousta, también se destacan enlaces a playlists conmemorativas creadas por el equipo de producción en relación a las novedades y eventos en el mundo del espectáculo
Look And Feel
El look and feel de Pousta se centra en crear una experiencia visualmente estimulante y atractiva que resuene con su audiencia joven y creativa, proporcionando un espacio digital dinámico para explorar y disfrutar de la cultura pop y creativa.
El look and feel de Pousta se centra en crear una experiencia visualmente estimulante y atractiva que resuene con su audiencia joven y creativa, proporcionando un espacio digital dinámico para explorar y disfrutar de la cultura pop y creativa.
- Diseño colorido y llamativo: Pousta utiliza una paleta de colores brillantes y vivos en su diseño, lo que crea una experiencia visual vibrante y atractiva para los usuarios.
- Elementos visuales dinámicos: El sitio web de Pousta presenta una variedad de imágenes, ilustraciones y gráficos llamativos que complementan su contenido y captan la atención del espectador.
- Tipografía moderna: Pousta utiliza fuentes tipográficas modernas y legibles que se adaptan a su estilo contemporáneo y juvenil.
- Contenido multimedia: Pousta incorpora una variedad de contenido multimedia, como imágenes, videos y GIF animados, para enriquecer la experiencia del usuario y hacer que el contenido sea más atractivo y dinámico.
- Interfaz intuitiva: El sitio web de Pousta está diseñado con una interfaz intuitiva que facilita la navegación y el acceso al contenido para los usuarios.
Etiquetado y Lenguaje
El idioma utilizado en Pousta es principalmente español, ya que es un sitio web chileno. El etiquetado en Pousta sigue las convenciones estándar de HTML para estructurar el contenido, CSS para estilarlo y JavaScript para agregar interactividad. Además, Pousta puede hacer uso de sistemas de gestión de contenido (CMS) como WordPress para administrar y publicar su contenido de manera eficiente.
|
El lenguaje de Pousta se caracteriza por ser informal y cercano, adaptados a una audiencia joven y contemporánea. Utilizan un tono coloquial y humorístico, haciendo uso de modismos y expresiones propias del habla chilena. Este medio digital emplea un estilo fresco y dinámico, centrado en temas de cultura pop, tecnología y tendencias en internet. Su comunicación se destaca por su cercanía con el público y su capacidad para conectar de manera efectiva con la audiencia joven. |
Lámina
Archivo:Lámina TDI VLC1503.pdf
Análisis de Pantallas
Consistencia
Uniformidad
- Página principal o inicial. :
- 1. Noticia principal
La página de Pousta exhibe un diseño coherente y homogéneo, siguiendo la estructura típica de una revista informativa. En primer lugar, se destaca la portada que presenta el enunciado de la noticia más relevante del momento, incluyendo la categoría de la noticia, el titular y luego los detalles de autoría y fecha. A medida que se desplaza hacia abajo, se puede visualizar la sección de "Actualidad", donde se encuentran artículos relacionados acompañados de breves reseñas.
- 2. Actualidad
En la sección de Actualidad, se presentan tres titulares de noticias relacionadas que han sido publicadas en el último mes. Cada titular está acompañado de una fotografía de portada, la categoría de la noticia y una breve previsualización del contenido escrito.
- 3. Sección “Original”
En otra sección de la página, patrocinada por Adidas, se encuentran entrevistas a diversos artistas que comparten su visión sobre sus fuentes de inspiración y su perspectiva acerca de la originalidad y su impacto en el mundo artístico.
- 4. Suscribete a nuestro Newsletter:
Se nos presenta un enunciado que nos invita a suscribirnos al sitio web de pousta para recibir un resumen de sus mejores contenidos semanalmente, que en ocasiones pueden contener publicidad o contenido patrocinado.
- 5. Lo más reciente
En esta sección, se muestran una serie de titulares junto con sus categorías y portadas respectivas, ordenados desde lo más reciente hasta lo más antiguo. Además, esta sección se vuelve a presentar en el lado derecho de la pantalla cada vez que entramos a leer un artículo en particular.
Adaptabilidad
El sitio web se adapta de manera eficiente a dispositivos móviles, manteniendo una interfaz bastante similar a la de la versión de escritorio. Una de las principales diferencias es que el menú superior se elimina en la versión móvil y se traslada al menú lateral, accesible mediante el ícono de las tres rayitas. El sitio web es completamente accesible en dispositivos móviles, ya sea en orientación vertical u horizontal. Sin embargo, la visualización vertical resulta más práctica, ya que permite ver el título y la portada de la noticia en su totalidad, facilitando la lectura y la comprensión de la información presentada.
Organización del contenido
Estructura de un Artículo.
- Todos los artículos, independientemente de la categoría o sección a la que pertenezcan, presentan una misma estructura y un mismo diseño editorial.
- Epígrafe o Antetítulo: Nos muestra la categoría a la que pertenece la noticia. Ejemplo: Música.
- Títular: Título de la noticia. “Villano Antillano y Mala Rodríguez: El español está de moda”.
- Autor, fecha y tiempo de Lectura: “POR EQUIPO. HACE 3 SEMANAS. 1 MINUTO DE LECTURA”
- Cuerpo: Se incorpora un widget que contiene un enlace a un vídeo en YouTube o a una playlist relacionada con la noticia desde un sitio web externo, donde los usuarios pueden acceder para obtener más información.
- Etiquetas de la noticia.
- “También te puede interesar”: Artículos relacionados.
Uso del espacio
El uso del espacio en este sitio web es altamente eficiente, ya que proporciona la información de manera concisa sin sobrecargar con muchas imágenes o colores diferentes. Los textos breves son de gran utilidad para mantener la atención del usuario en el artículo, al igual que los enlaces a sitios web externos donde se puede obtener información adicional si es necesario.
Navegación
Wireflows
- Navegación Vía Menú de Categorías
- Suscribirse al Newsletter.
- Suscribirse al Newsletter.
Versión Móvil
Tarea 2: Suscribirse al Newsletter
Versión Móvil
Tarea 3: Ingresar a un enlace de Instagram desde un arículo en la Página Principal
Versión Móvil
Arquitectura de la información
¿Qué es la arquitectura de la información?
La arquitectura de información es el proceso de organizar, estructurar y etiquetar el contenido de manera efectiva para facilitar la navegación y la búsqueda dentro de sistemas de información, como sitios web o aplicaciones. Se centra en diseñar la estructura y el flujo de la información para mejorar la usabilidad y la accesibilidad para los usuarios.
¿Es efectiva y coherente?
Si bien la navegación a través del sitio web puede ser sencilla de manejar, puede llegar a ser algo redundante, ya que tanto a través del menú superior como scrolleando a través de la pantalla principal, se puede acceder a las mismas categorías. La diferencia radica en que a través del menú se puede acceder a unas cuantas categorías adicionales, tales como.
Categoriza su contenido en una variedad de temas que incluyen, entre otros:
|
Categoriza su contenido en una variedad de temas que incluyen, entre otros:
|
Análisis
Esta duplicación de opciones en el Menú Superior puede resultar confusa para los usuarios y podría ser optimizada para mejorar la experiencia de navegación. Se sugiere que un menú más acotado podría llegar a ser más eficiente, ya que este debería incluir únicamente aquellas categorías a las que no se puede acceder por medio de la pantalla principal, ya que de esta manera se accede de forma más directa. Esto ayudaría a simplificar la navegación y a evitar la redundancia de opciones, facilitando a los usuarios encontrar lo que están buscando de manera más rápida y efectiva.
Accesibilidad
¿Qué es la accesibilidad a la información?
Se entiende por información accesible la información que se ofrece en formatos que permiten a todos los usuarios y alumnos tener acceso a los contenidos «en igualdad de condiciones con los demás. Para que el contenido de un sitio web sea accesible, debe cumplir con ciertos requisitos para garantizar que todas las personas, incluidas aquellas con discapacidades, puedan acceder y utilizar la información de manera efectiva.
- Cumplimiento con estándares de accesibilidad: El contenido debe cumplir con estándares reconocidos internacionalmente, como las Pautas de Accesibilidad al Contenido en la Web (WCAG) desarrolladas por el World Wide Web Consortium (W3C).
¿Qué son las Pautas de Accesibilidad al Contenido en la Web (WCAG) desarrolladas por el World Wide Web Consortium (W3C)?
| 1. Perceptible | 2. Operable | 3. Comprensible | 4. Robusto |
|---|---|---|---|
| Este principio se centra en garantizar que el contenido web sea perceptible para todos los usuarios, independientemente de sus capacidades sensoriales. Algunas de las pautas incluyen proporcionar alternativas textuales para imágenes y multimedia, utilizar un contraste adecuado entre el texto y el fondo, y asegurar que el contenido multimedia sea accesible. | Este principio se refiere a hacer que el contenido web sea operable para todos los usuarios, lo que implica que las funciones interactivas sean accesibles mediante una variedad de métodos de entrada, como teclado, ratón, voz, etc. Algunas de las pautas incluyen asegurar que todas las funciones sean accesibles desde el teclado, proporcionar suficiente tiempo para que los usuarios interactúen con el contenido y evitar contenido que pueda causar convulsiones. | Este principio se enfoca en hacer que el contenido web sea comprensible para todos los usuarios, incluidos aquellos con dificultades cognitivas o de aprendizaje. Algunas de las pautas incluyen utilizar un lenguaje claro y sencillo, estructurar la información de manera lógica y proporcionar ayudas adicionales, como definiciones o explicaciones, cuando sea necesario. | Este principio se refiere a hacer que el contenido web sea robusto y compatible con una variedad de tecnologías de asistencia, navegadores y dispositivos. Algunas de las pautas incluyen utilizar estándares web actualizados, asegurar que el contenido sea compatible con tecnologías de asistencia como lectores de pantalla y evitar prácticas que puedan interferir con la accesibilidad. |
Errores de Accesibilidad en Pousta
| 1. Texto alternativo nulo o vacío | 2. Errores de tamaños de texto | 3. Errores de contraste | 4. Links redundantes |
|---|---|---|---|
|
|
|
|
- La sección de "Lo más reciente", de "Actualidad" y de "Original", se repite constantemente en la interfaz de manera redundante.
Análisis
En resumen, la presencia de errores, como enlaces redundantes, dificultades para percibir los textos y textos alternativos nulos en imágenes, puede provocar diversas complicaciones que afectan negativamente la experiencia del usuario. Esto se traduce en problemas de usabilidad, repercusiones en el rendimiento y la visibilidad del sitio en los motores de búsqueda, así como en dificultades para el mantenimiento del mismo. Por lo tanto, es importante revisar y optimizar la estructura de enlaces para garantizar una experiencia de usuario óptima y un buen rendimiento del sitio.
- Tiempos de carga
LCP (Largest Contentful Paint): Informa el tiempo de renderización de la imagen o el bloque de texto más grande visible en el viewport, en relación con el momento en que el usuario navegó a la página por primera vez.
- 4,5 s
INP (Interaction to Next Paint): Observa la latencia de todas las interacciones de clic, presión y teclado con una página a lo largo de su vida útil e informa la duración más larga, sin tener en cuenta los valores atípicos. Un INP bajo significa que la página puede responder rápidamente de manera constante a la gran mayoría de las interacciones del usuario.
- 53 ms
CLS (Cumulative Layout Shift) : Una medida del aumento de actividad más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que ocurre durante la vida útil de una página. Un cambio de diseño se produce cada vez que un elemento visible cambia su posición de un marco renderizado al siguiente. Consulta Puntuación de cambio de diseño para obtener detalles sobre cómo se miden estos cambios.
- 0,03
Rediseño Página Web
Corrección de errores
Si bien el Look and Feel se mantiene casi igual, se ha llevado a cabo una corrección de los errores de accesibilidad identificados previamente. Estos errores estaban relacionados con textos demasiado pequeños o problemas de contraste entre los colores utilizados para la tipografía y los fondos, lo que podría dificultar la experiencia de usuarios con visión reducida.
Historias de Usuario
Las historias de usuario son una herramienta utilizada en el diseño de interacción y en el desarrollo de software para comprender las necesidades y expectativas de los usuarios. Consisten en breves descripciones de funcionalidades o características de un sistema, escritas desde la perspectiva del usuario.
- Acceder al Ránking por medio del Menú Superior
- Suscribirse al Newsletter a través del Menú Lateral (o de "hamburguesa")
- Ingresar a un Artículo a través de la Pantalla Principal
Microinteracciones
Las microinteracciones son breves pero importantes acciones entre usuarios y sistemas digitales, diseñadas para proporcionar retroalimentación instantánea y guiar al usuario. Estas interacciones están presentes en la mayoría de las interfaces digitales, abarcando desde presionar botones hasta recibir notificaciones. Su objetivo es animar al usuario a realizar acciones específicas, mejorando así la experiencia de usuario y la usabilidad del sistema..
Historia de Usuario #1
Acceder al Ránking por medio del Menú Superior
- El usuario desea acceder a la nueva sección de Ránking a través del menú superior. Una vez en esta sección, busca explorar los principales elementos clasificados como el top #1 en diversas categorías en Pousta. Esto incluye los artículos más leídos, el top global de canciones en Spotify y la playlist conmemorativa de Spotify destacada por el equipo editorial de Pousta.
REDISEÑO DEL MENÚ SUPERIOR
Se conserva la coherencia del "Look and Feel" durante el flujo de navegación mediante el menú superior, sin embargo, algunas secciones específicas son eliminadas debido a que reaparecen más adelante al desplazarse a través de la pantalla principal. Además, se introduce una nueva sección que dará inicio a un nuevo flujo de navegación.
Menú superior
Categoriza su contenido en una variedad de temas que incluyen, entre otros:
- Buscador
- Especiales
- Lo más visto
- Sports
- Agencia
- Ícono de "Más"
- Follow
Menú superior actualizado
En el proceso de rediseño del menú superior, se implementan cambios significativos que incluyen ajustes en el tamaño tipográfico, la eliminación de secciones específicas y la adición de una nueva sección denominada "Ránking".
- Ránking
- Especiales
- Categorías
- Lo más visto
- Newsletter
- Follow
REDISEÑO DE WIREFLOW: Acceder al Ránking por medio del Menú Superior
- Overlay de Ránking
Se ha agregado una nueva sección clave en la barra del menú superior, titulada "Ranking", con el propósito de brindar a los usuarios un acceso ágil a las tendencias más destacadas dentro del sitio web de Pousta. Esta sección ofrece una perspectiva actualizada y rápida sobre los temas, publicaciones o elementos más populares en Pousta y Spotify, permitiendo a los usuarios mantenerse al tanto de lo que está generando mayor interés y participación dentro de la comunidad.
1. Acceder al Top #1 de Los más leídos
- Pantalla Principal ➜ Menú superior ➜ Sección Ránking -Top #1 Los más leídos ➜ Seleccionar Artículo
Vídeo
2. Acceder al Top #1 Canciones Global Spotify
- Pantalla Principal ➜ Menú superior ➜ Sección Ránking -Top #1 Canciones global ➜ Seleccionar Widget Reproductor
Vídeo
3. Acceder a Playlist de Pousta Destacada en Spotify
- Pantalla Principal ➜ Menú superior ➜ Sección Ránking -Playlist Destacda ➜ Seleccionar Widget de Playlist
Vídeo
Historia de Usuario #2
Suscribirse al Newsletter a través del Menú Lateral (o de "hamburguesa")
- El usuario busca navegar a través del menú lateral, comúnmente conocido como menú de "hamburguesa", donde se encuentran las opciones de Contacto. Luego, tiene la intención de acceder a la sección de "Sobre nosotros" y posteriormente Suscribirse al Newsletter de Pousta.
REDISEÑO DEL MENÚ LATERAL
Dado el rediseño del menú superior, se ha renovado también el menú lateral, centrándose en los datos de contacto del sitio web. Esta actualización tiene como objetivo evitar la redundancia al eliminar categorías que ya están presentes en el menú superior o son accesibles a través de la pantalla principal.
|
Se conserva la coherencia del "Look and Feel" durante el flujo de navegación mediante el menú lateral, sin embargo, algunas secciones específicas son eliminadas debido a que reaparecen más adelante al desplazarse a través de la pantalla principal o del menú superior. En este menú se concentran los datos de Contacto.
|
REDISEÑO DEL NEWSLETTER
La Sección de Newsletter ha sido rediseñada tanto en la pantalla principal como en la sección de "Sobre nosotros", con modificaciones en los tamaños tipográficos y la incorporación de funciones microinteractivas para mejorar la accesibilidad y la experiencia del usuario.
Newsletter
Los problemas de legibilidad surgen debido a los tamaños tipográficos excesivamente pequeños, lo que afecta negativamente la accesibilidad para los usuarios, especialmente aquellos con discapacidades visuales o que acceden al contenido desde dispositivos con pantallas de menor tamaño.
Newsletter actualizado
En el proceso de rediseño de la sección de Newsletter, se optó por utilizar tamaños tipográficos más grandes y se incorporaron microinteracciones con los botones para mejorar la accesibilidad. Esto asegura una experiencia de usuario más cómoda y fácil de usar para todos los visitantes del sitio.
REDISEÑO DE WIREFLOW: Suscribirse al Newsletter por medio del menú lateral
- Pantalla Principal ➜ Menú lateral/hamburguesa ➜ Sección Sobre Nosotros ➜ Cargar página Sobre Nosotros ➜ Rellenar formulario.
Vídeo
Historia de Usuario #3
Ingresar a un artículo a través de la Pantalla Principal
- El usuario desea ingresar a un artículo por medio de las secciones que se muestran en la Pantalla Principal, de tal manera que el flujo de navegación sea práctico e interactivo, para ello se sigue una serie de pasos determinados y se agrega un overlay de "previsualización del artículo" en video.
REDISEÑO DE WIREFLOW: Acceder a un Artículo a través de la Pantalla Principal
- Overlays de Previsualización
El usuario busca acceder fácilmente a un artículo mediante las secciones de la Pantalla Principal, asegurando una navegación fluida y atractiva. Se implementa un overlay de "previsualización del artículo" en formato de video, brindando una vista dinámica y enriquecida del contenido para facilitar la elección y sumergirse en la lectura.
1. Acceder a través de la Sección Actualidad
- Pantalla Principal ➜ Sección Actualidad ➜ Seleccionar Previsualización de Artículo ➜ Reproducir vídeo de Previsualización y Clickear en Leer más ➜ Acceder al Artículo
Vídeo
2. Acceder a través de la Sección Original
- Pantalla Principal ➜ Sección Original ➜ Seleccionar Previsualización de Artículo ➜ Reproducir vídeo de Previsualización y Clickear en Leer más ➜ Acceder al Artículo
Vídeo
3. Acceder a través de la Sección Lo más Reciente
- Pantalla Principal ➜ Sección Actualidad ➜ Seleccionar Previsualización de Artículo y clickear ➜ Acceder al Artículo
Vídeo
Maquetación de Prototipo en Figma
- Visualización en un MacBook Air.
