T1: Pocket - Joel Henríquez
| Título | T1: Pocket - Joel Henríquez |
|---|---|
| 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) | Joel Henríquez |
| Profesor | Herbert Spencer |
| URL | https://getpocket.com/ |
Encargo 1
Pocket
Pocket es una plataforma y aplicación que permite a los usuarios guardar contenido de la web para leerlo más tarde. Fundada en 2007 y adquirida por Mozilla en 2017, Pocket facilita a los usuarios guardar artículos, videos y otros tipos de contenido desde sus navegadores web, dispositivos móviles y otros servicios en línea.
Una vez que se guarda un artículo en Pocket, se sincroniza automáticamente en todos los dispositivos del usuario, lo que permite acceder al contenido guardado incluso sin conexión a internet. Pocket también ofrece funciones de organización, etiquetado y recomendación de contenido, lo que ayuda a los usuarios a gestionar y descubrir nuevo material de lectura. Además, Pocket proporciona una experiencia de lectura sin distracciones, lo que la convierte en una herramienta popular para aquellos que desean concentrarse en el contenido que están consumiendo.
Se puede acceder a Pocket por medio del siguiente link: https://getpocket.com/es/home , donde se podrá tener uso de la plataforma por medio del navegador y la posibilidad de usar una aplicación en dispositivos móviles.
¿Por qué sería Pocket considerada como Aplicación de agregación de contenido?
Debido al comportamiento que posee la pagina en la introducción y ventanas para guardar foros e información, siendo una herramienta que te da facil acceso a multiples fuentes, tales como Times Magazine, The New Yorker, Vox, entre otras; permitiendo la colección de temas de interes, dando al usuario la total libertad sobre que foros, información o noticias quieren mantener en su ciclo informativo. Junto a lo mencionado previamente, la aplicación cuenta con una zona de recomendación en su pagina principal, basada en los temas que vas agregando a tus colecciones, para conseguir ampliar nuevos medios que no habias pensado anteriormente.
Análisis de Lenguaje Visual(Look and Feel)
Se presenta una paleta de colores abierta y simple, siendo un fondo blanco para dar amplitud sobre la pagina y un acento rojo usado por el logo de la plataforma y en la opción de guardado bajo la vista previa de los artículos.
La visualización de las paginas en la plataforma Pocket se ve distinguida por medio de 2 agrupaciones, siendo un despliegue y una fila que va deslizándose a lo largo de las opciones que el usuario revisa.
Siendo el despliegue en fila una manera en que se da un abanico de cosas acerca de una temática en particular, siendo en el ejemplo una vista acerca de los artículos que son particularmente exitosos del día.
El despliegue a lo largo del espacio es para mostrar la amplitud de opciones que se da a partir de una sugerencia y recomendación al usuario, mostrándose de esta manera en dos filas y tres columnas para tratar de tomar la atención del usuario.
En la imagen de la izquierda podemos ver como se secciona la pagina a lo largo que es recorrida, manteniéndose presenta una ventana superior(señalada en color rojo) que actúa de forma similar a la de un navegador, dando la opción de cambiar entre la pagina de inicio, artículos guardados, una ventana de descubrimiento y las colecciones.
Se pueden apreciar en azul los distintos artículos, sugeridos por Pocket, en esta instancia con un despliegue amplio, acompañados por unos cuadros celestes que es la zona de interacción con dichos artículos, donde uno puede reaccionar de acuerdo a si le gusta, no le gusta o prefiere guardarlo.
Análisis de Etiquetado y Lenguaje
El lenguaje usado en la plataforma Pocket mantiene un tono neutro, siguiendo la intención de atraer mostrada en las vistas previas de los artículos, y a medida se avanza y llega a un "final" de la pagina se muestran en amplitud etiquetas que siguen un genero bastante divisivo, es decir, que ninguna temática es similar a otra, permitiendo una claridad sobre que contenidos quisiera consumir, además de los mostrados por la propia aplicación, además de mantener una cantidad de categorías acotada, sin saturar al usuario acerca de muchas opciones como puede suceder en otros medios.
Encargo 2
Continuación de análisis de Pocket
El análisis de la aplicación Pocket se hará en base a imágenes extraídas por parte de la aplicación en formato Web y formato móvil, o celular, evaluando la consistencia, organización del contenido y uso del espacio.
Consistencia
Comparando espacios y paginas en distintas plataformas, computadora y móvil, a través de una vista en formato de galería, dando una perspectiva general para comprender las capacidades de acceso entre las funciones de la aplicación.
Organización del Contenido y Uso del Espacio
Para el analisis de la organización de contenido ocupamos una encapsulación de las herramientas o elementos de la pagina en recuadros de distintos colores para simbolizar que abarcan y cuanto en relación a otros. Siendo los colores usados para tal referencia los siguientes:
- Rojo: Barras de tareas, barras de navegación.
- Azul: Contenido o cuerpo de la página.
- Cyan: Añadidos o extras.
- Verde: Espacio de Usuario y configuración, de cuenta o incluso membresía.
En la portada o pagina inicial del sitio podemos ver como el contenido predomina sobre la pagina, manteniendo un orden centrado y añadiendo detalles a lo largo de un marco imaginario del contenido, usando herramientas como barras de tarea o navegación.
En el apartado de elementos guardados vemos como sigue predominando el contenido, pero se van implementando barras de tareas adicionales para complementar el uso del contenido propio y adquirido a medida que se usa la aplicación, con una distinción clave en el caso de la aplicación movil, siendo la capacidad de escuchar al contenido.
En el apartado del pie de portada podemos ver como el contenido pasa a un plano final, donde vemos como elementos extras se van añadiendo sobre la pagina, siendo en el caso móvil una explicación alrededor del contenido, datando un limite sobre la posible navegación por el momento, mientras que en el caso de la plataforma de computador podemos visualizar como nos dejan continuar nuestra navegación con una función por medio de categorías.
Wireflow
Suscripción a la plataforma
1. Haz Click en la opción Actualizar arriba a la derecha en la página, esto te llevará a una ventana donde eres informad@ acerca de Pocket Premium y sus ventajas.
2. Haz Click en "Obten Pocket Premium", llegando a una página donde te dan las opciones del Plan Premium a seguir.
3. Haz Click en la opción que más te apetezca!
4. Rellena tus datos de pago y listo, estarás registrado como un usuario de Pocket Premium.
Escucha a un articulo guardado(Aplicación de celular)
1. Guarda un articulo de tu interés y dirígete a la ventana de "Guardados"
2. Dirígete a la opción de "Listen" o "Escuchar".
3. Dale Click al articulo que quieras escuchar y ponle play al reproductor, y listo!
Guardar una Colección
1. Dirígete a la ventana de "Colecciones".
2. Navega la página y busca una colección de tu interés.
3. Una vez encuentres una colección de tu gusto, guárdala y dirígete a la ventana de "Guardados".
4. Ahora tienes acceso de tus colecciones guardadas en todos tus dispositivos!
Encargo 3
Con la palabra navegación nos referimos a las capacidades que posee en usuario en el sitio web o aplicación para ir atravesando la información que busca, usando el cursor como un medio de transportarse a lo largo de la página. Es nuestro deber como diseñadores de interacción el facilitar este viaje, volviéndolo de esta manera un lugar accesible y comprensible para el usuario.
Accesibilidad
¿Qué es la accesibilidad y por qué es tan importante?
La accesibilidad permite que el usuario, sin importar la edad, genero y clase, dando la opción de brindar esta facilidad no solo permite una sencillez al usar el sitio web o plataforma, sino que permite que un mayor rango de personas puedan acceder a los servicios, productos o información que se encuentren en el sitio, siendo en el caso de las aplicaciones de Agregación de Contenido importante, debido a la posibilidad de categorización, organización y difusión del contenido.
Al momento de usar una herramienta para poder revisar la accesibilidad de Pocket se vieron los siguientes resultados
Con una calificación de 88/100 otorgada por la herramienta: https://pagespeed.web.dev/?hl=es , se pueden ver diagnósticos adicionales acerca de lo que brinda a este puntaje siendo lo siguiente.
Arquitectura web de Pocket
La página web de Pocket se distribuye de manera espaciosa, de tal manera que se deja que los artículos e información dominen el espacio, eso si dejando poca avenida para la intervención de un usuario, siendo en gran parte un sistema de calificación personal y guardado de artículos, siendo de tal manera un lugar no interactivo, con pocas avenidas de visitar el sitio y siendo guiados sin una referencia clara.
La estructura de menus en el sitio web de Pocket se construye de una manera simple y directa, dejando mucho que desear, hay sub-ventanas que puedes visualizar una vez entras en alguna opción dada en la barra de navegación que sería deseable tener como un explayado, permitiendo visitar de manera remota no solo la ubicación general, sino que un ámbito más especifico de manera directa.
Distribución de Contenido
Portada: En esta ventana de Pocket podemos ver un despliegue de información basada en recomendaciones, siendo estas personales, relacionadas a un topico "trending" del día, colecciones de utilidad y categorías, no se habla de un espacio donde haya un buscador o filtrador especifico, para poder ondar en los temas que ven a simple vista.
Guardados: Esta ventana se convierte en el espacio donde usuario posees mayor interacción e intervención, permitiendo el uso de filtros, listas, etiquetas y opciones de orden, también agregando las opciones presentes en la Portada, la calificación personal de los artículos y colecciones, añadiendo una opción que demuestra un favoritismo mayor, archivar, permitiendo resguardar los artículos de interés por un mayor tiempo.
Descubrir: Esta ventana es un espacio dedicado a la propagación de contenido de interés, algunos artículos usando el formato de Click Bait, usando como señuelo sus titulares para pescar a un usuario. La ventana de descubrir es un espacio que es expandido de la portada, mostrando artículos de interés a lo largo del día, siendo estos de tecnología, medios de entretenimiento, avances políticos, entre otros.
Colecciones: Esta ventana está dedicada a la propagación no de artículos, sino que carpetas o conjuntos de artículos, mostrando una dirección y motivación por la cual se encuentran en la misma categorización, siendo esta configurada de manera manual o prevista con una intervención directa, demostrando un criterio mayor al de un uso automatizado por categoría.
A medida en que uno va descubriendo estas colecciones puede ingresar y ver un argumento o sentido bajo el titular principal, donde podemos ver párrafos acerca del porque estos artículos trabajan bien juntos, hasta un pequeño resumen que dirige directa y simplemente al usuario a la lectura de sus artículos.
Apartado de Usuario: Esta sección de la página va destinado a revisar el perfil propio y también abriendo la posibilidad de editarlo, junto a esto vemos una opción de personalización, dejando que el usuario pueda elegir el tipo de fondo que prefiere con su lectura.
Apartado de Membresía:Este sector está dirigido a la administración y adquisición de membresías, ganando de esta manera algunos beneficios otorgados a los usuarios de paga, se puede visualizar como un diamante junto a el "Apartado de Usuario"
Experiencia de Usuario
Interactividad
La interactividad, mencionado previamente, permite que el usuario genere su propio impacto sobre la página de tal manera en que la información no sea solo de su agrado, sino que implemente decisiones que den el sentido de "tomar parte".
Esto puede ser visto en la calificación de información que puede tomar en acción el usuario, así como la venta de "Guardados", donde uno ya habiendo almacenado artículos tiene la capacidad de crear listas y ordenes personales sobre lo otorgado por el sitio.
Feedback
El feedback sería la reflexión que los usuarios tienen frente al sistema, siendo una herramienta no solo para una mejora del sitio de manera general, sino que llegando a ayudas y decisiones que aceleren la entrega y facilitación de información, en el caso de Pocket, se podría ver demostrado por el sistema de calificación personal que uno puede usar en artículos o colecciones
Carga y Rendimiento
La página es introducida a una herramienta que analice y permita ver las capacidades y rendimiento en Pocket, arrojando los siguientes resultados.
Encargo 4
Experiencias de usuario
La plataforma cuenta con un acceso directo y con un enfoque de “bolsillo”, debido a esto se ve de una manera abierta, en el caso de una aplicación de celular o dispositivo movil se puede apreciar de mejor manera, pero en el caso de una aplicacion de navegador o sitio web, es un desperdicio del espacio y manejo de los accesos a otras ventanas dentro del sitio.
¿Qué se ve al usar la Aplicación?
La sección de “Today´s Pocket Hits”: Una sección donde solo presenta la opción de guardado, y donde veriamos el uso de los “pulgares”calificadores desaparecer, decayendo en la poca interacción que hay presente en el sitio.
Falta de especificado en guardado: Este punto en específico se refiere a la posibilidad de guardar o no de manera personal como usuario los artículos de manera directa, y tengas que pasar por la ventana de “Guardados” para poder realizar esas acciones.
Falta de claridad para el usuario: Hay funciones dentro de la aplicación y sitio web que son aquellas que definen a Pocket, el problema siendo que no sabemos cuales son esas a menos que exploremos y usemos el sitio de manera recurrente, funciones tales como las listas o que tanta fuerza aporta el guardado. En la portada teniendo tan poca interacción como usuario solo significa un Feed que te muestre contenido y no tengas nada más que decir frente a eso, no tienes la opción de incluir fuentes de otras páginas o preferencias así como así, se vuelve un Feed que tienes que curar con el uso.
Etiquetas: Siendo una función solo vista en la ventana de "Guardados", es una forma de clasificar aquellos articulos y colecciones de manera personal, teniendo luego la facilidad de poder filtrar todo el material guardado en base a estas etiquetas, siendo un problema el como se busca y la cercanía entre las funciones en la ventana de "Guardados".
Guardado de URL: La función va destinada a poder guardar y dejar en tu ventana de "Guardados" toda URL, sea esto un artículo, blog, o incluso videos. Viendo en la barra lateral la opción de filtrar por Categoría de Material.
Visualización: Una vez se guarda material este permanece en el sitio, es decir, que la función de hipervínculo que se ve al momento de hacer Click sobre algún artículo en la portada es alterada por una visualización dentro de Pocket, todo esto dentro de la ventana de "Guardados" de la página. Al momento de ingresar a esta visualización vemos una venta de edición y resaltado, siendo personalizable la lectura e información a destacar.
Rediseño
El rediseño se enfoca en la ampliación de aquellas cosas que Pocket ya brinda a la mesa, dando una claridad y posibilidad de interacción por medio de sub-ventanas al momento de hacer click o interactuar sobre el material que se encuentre en el Feed, buscando también llegar al contenido guardado ya de una manera especifica sin tener que ingresar a una ventana nueva, obvio manteniendo la página prevía disponible, solo dando la posibilidad al usuario.
Encargo 5: Entrega Final
Entrega Final
Esta entrega es una compilación de propuestas al rediseño de Pocket, buscando seguir el propósito y seguir con el valor e identidad que se ve en la aplicación, canalizar las herramientas y funciones para que el usuario tenga un mayor alcance y firmeza sobre el sitio.
Con el significado de su nombre, “Pocket” o “Bolsillo” en español, el tener la información de forma directa y al alcance se vuelve el enfoque, siendo capaces de sujetar esta y poder guardarla para después, como si de un snack estuviéramos hablando.
Propuesta de Rediseño
Página inicial - Diagramación
La página inicial posee un enfoque claro y directo donde se añade a la lateral el uso de un menú con las funciones principales ya existentes, con el uso de accesos directos a las otras ventanas en la aplicación y sus sub-ventanas, permitiendo una forma directa y más cómoda para su uso cotidiano.
Página de "Guardados" - Diagramación
En la página de "Guardados" se ve como un punto de reencuentro donde se le da mayor espacio a los articulos guardados en la página, para facilitar la memoría del usuario y así llegar a encontrar de manera expedita aquello que busca, conservando las mismas funcinoes que ya existian previamente en esta ventana.
Página de "Descubrir" - Diagramación
En la página de "Descubrir" vemos una forma de división de los articulos que son buscados en base a las categorías, donde se ve de tal manera una concentración de contenido con un tópico ya en mente y su manera de abordarlo(categoría).
Argumento
El rediseño de Pocket es una adaptabilidad del sitio que ya está en pie, simplemente brindando al usuario las capacidades que este posee de una manera simple y directa, ya que se pueden realizar estas acciones actualmente, pero teniendo que pasar por 5 o 6 páginas, demostrando un problema en la accesibilidad, donde aquellos no acostumbrados a navegar una página web se encontrarían abrumados debido a la confusión que genera un espacio en blanco sin una indicación o posibilidad.
La importancia de generar un enfoque claro y simple a la vista es en base a como percibimos la página y su motivo, si vieramos Pocket en su estado actual se puede apreciar un menú simplificado sin ninguna dirección, brindando con el rediseño una visualización completa, donde se busca el entender que puedes hacer mientras estás en Pocket.
