Hola a todos y todas,
A continuación presento la entrega parcial del Reto 2 donde debemos investigar diferentes diagramas para seleccionar aquellos más relevantes y generar un moodboard personal
¡Espero que os guste!
Reto 2 – Prototipado
Pública
Este segundo reto se divide en dos partes, la creación del UI Kit de la aplicación móvil de Burger King y la creación del prototipo de baja fidelidad.
Parte1:
He diseñado los diferentes elementos del UI Kit teniendo en cuenta los estilos de texto y color identificados en la aplicación móvil. Además, los diferentes elementos cuentan con interacciones que simulan la navegación en la interfaz de Burger King.
Parte 2:
Para la segunda parte del reto he creado un prototipo interactivo de baja fidelidad de la futura aplicación móvil donde se podrá evaluar los restaurantes añadiendo los diferentes factores que condicionan la experiencia.
En el siguiente video explico y muestro la funcionalidad del prototipo de baja fidelidad que he diseñado.
Evaulación Heurística Spotify
Para la siguiente evaluación heurística, seleccionó el portal de Spotify, la plataforma de transmisión de música en streaming líder a nivel mundial, que permite a millones de usuarios acceder a una amplia variedad de contenido de audio, incluyendo música, pódcast y audiolibros. Dado que muchas personas usan esta plataforma, ya sea para disfrutar de sus artistas favoritos, descubrir nuevos lanzamientos o escuchar pódcast de diversos géneros, Spotify se convierte en un referente importante para analizar lo que consumen diariamente los usuarios en términos de contenido musical.
Metodología
- Primero realicé una navegación completa del portal para familiarizarme con todas las secciones y entender de qué forma se accedía a las diferentes páginas.
- Fui identificando algunas buenas y malas prácticas de forma general, pero no las relacioné directamente con las heurísticas.
- Luego hice la lectura de los contenidos de la PEC, asociados a la Evaluación Heurística y las 10 Heurísticas de Nielsen. Complementé el tema con varias lecturas en internet, para entender mejor una a una cada heurística.
- Hice una matriz con el nombre de la heurística, dónde había hallado el bueno o mal uso de la misma, la justificación del bueno o mal uso, y la recomendación de solución. Adicionalmente iba tomando captura de imagen y video de dichos usos.
Evaluación Heurística
1. Visibilidad del estado del sistema.
Los usuarios tienden a ponerse nerviosos cuando no tienen claro su ubicación en una aplicación. Es fundamental que el sistema mantenga a los usuarios siempre al tanto de lo que está ocurriendo.
Buena práctica: En la app de Spotify, la barra inferior siempre muestra la canción en reproducción, sin importar en qué pantalla te encuentres,
permitiendo así que el usuario esté constantemente informado sobre lo que está sonando.
2. Coincidencia entre el sistema y el mundo real.
El sistema debe «hablar» el mismo idioma que los usuarios, y esto no solo incluye el lenguaje empleado, sino también las imágenes, la estructura
y el orden en que se presentan. El objetivo es facilitar una interacción fluida y natural para que navegar no represente un esfuerzo para el
usuario.
Buena práctica: En la parte superior de la aplicación de Spotify, donde el ícono de tres puntitos despliega varias opciones, incluyendo la de
«compartir». Al hacer clic, aparecen todos los íconos de redes sociales vinculados a la cuenta de Spotify, permitiendo al usuario compartir la
canción de forma rápida y sencilla con quien quiera.
Mala práctica: El menú desplegable puede resultar abrumador debido a la cantidad excesiva de opciones. La inclusión de iconos descriptivos
mejoraría significativamente la comprensión de cada acción. Actualmente, solo los usuarios muy familiarizados con la aplicación pueden navegar eficazmente por la mayoría de los menús desplegables. Este problema se presenta en la versión para escritorio; en iOS, la implementación
es más adecuada.
3. Libertad y control por parte del usuario.
Tal como cualquier ser humano, cometemos errores y aprendemos de ellos. Por eso es crucial que los sistemas o aplicaciones incluyan opciones
de control y prevención de errores, permitiéndonos corregirlos.
Mala práctica: El sistema permite eliminar canciones de la playlist, pero si lo haces, desaparecen para siempre sin opción de deshacer ni de
recuperarlas desde una papelera de reciclaje.
4. Consistencia y estándares.
Cualquier aplicación o página web tiene que seguir un estándar consistente en todas sus páginas, por eso es recomendable seguir los mismos patrones para no confundir al usuario.
Buena práctica: Spotify sigue una lógica y mantiene un equilibrio en todos sus elementos mostrados. Las interacciones y soluciones visuales
respetan los estándares establecidos y esto aplica tanto a versión iOS como desktop.
5. Prevención de errores.
Una buena experiencia de usuario no solo asiste en la corrección de errores, sino que también previene su ocurrencia.
Buena práctica: La aplicación solo puede usarse en un dispositivo a la vez para reproducir canciones. Si intentas acceder desde el móvil mientras
ya se reproduce en la versión de escritorio, el sistema te informa y ofrece cambiarlo. Esta práctica también puede verse como un «acelerador»
porque evita múltiples acciones en una sola.
Mala práctica: Spotify permite descargar playlists para reproducir sin conexión a internet. Sin embargo, el sistema descarga sin diferenciar si
estás conectado a wifi o a 3G/4G, lo que puede resultar en consumo de datos inadvertido. El sistema debería informar al usuario y darle la
opción de continuar o detener la descarga.
6. Mejor reconocer que memorizar.
Mejor reconocer que memorizar: No se debe obligar al usuario a usar la memoria para seguir el hilo de una interacción. Se debe proporcionar
toda la información necesaria para facilitarle la navegación.
Desde la perspectiva de la experiencia de usuario, las opciones frecuentemente requeridas por los usuarios deben estar siempre visibles y colocadas en ubicaciones lógicas y accesibles.
Mala práctica: En la versión de iOS, la barra de búsqueda con el botón de “filtros” no siempre está visible. Solo aparece al desplazarse completamente hacia la parte superior de la página. Además, al cambiar de sección, la barra de búsqueda y el botón de filtro desaparecen, requiriendo que el usuario vuelva a desplazarse hasta arriba para visualizarlos. El usuario espera que la barra aparezca cada vez que se desplaza un poco hacia arriba o que sea visible al cambiar de sección o playlist.
7. Flexibilidad y eficiencia de uso.
Es esencial diseñar teniendo en cuenta ambos grupos, ofreciendo múltiples formas de realizar la misma tarea. Algunos usuarios avanzados repiten las mismas acciones, por lo que disponer de atajos para hacerlas más rápidamente es clave. Personalizar las acciones frecuentes y crear “aceleradores” mejora significativamente la usabilidad.
Buena práctica: Spotify ofrece muchos “aceleradores”. Por ejemplo, cada nombre de artista y cada álbum es clicable y actúa como filtro,
facilitando la búsqueda automática de ese elemento y evitando la inserción manual en el buscador.
8. Estética y diseño minimalista.
Hay que simplificar y eliminar contenido e información irrelevantes para que el usuario se concentre en lo verdaderamente importante. Las
personas suelen responder mejor a diseños estéticamente agradables y sencillos; demasiada información o elementos recargados hacen que el
sistema parezca más complicado de usar.
Buena práctica: Spotify utiliza lo imprescindible. Un ejemplo claro se encuentra en la sección de “canciones que te gustan”, el listado de canciones está bien estructurado y la jerarquía visual es coherente, es muy fácil visualizar la información a la que se ha accedido.
9. Ayudar a los usuarios a reconocer, diagnosticar y corregir los errores.
Todos los mensajes de error deben ser comprensibles para todos.
Usar un lenguaje claro y amigable ayuda al usuario a entender qué está
pasando y cómo solucionarlo.
Buena práctica: En este caso, el mensaje de error es claro y explicativo. Cada elemento que no se ha cargado debido a una mala conexión wifi
está perfectamente definido, explicando el estado del problema y la solución. Quizás se podría mejorar la visibilidad del error en la versión de
iOS.
10. Ayuda y documentación
Una aplicación debe ser intuitiva, pero a veces se necesita recurrir a las FAQ, tutoriales o manuales de instrucciones. FAQ bien escritas pueden
resolver dudas en línea y reducir llamadas al centro de atención al cliente, ahorrando así dinero a la empresa.
Mala práctica: Aunque Spotify es usable, debería ofrecer a los usuarios principiantes tutoriales sobre acciones básicas, como:
¿Cómo añadir canciones a una lista de reproducción?, ¿Cómo acceder a listas de reproducción con sugerencias semanales?, ¿Cómo compartir
una canción con amigos?, Recuperar una playlist eliminada., Mover más de una canción a una playlist determinada.
Buena práctica: El elemento «conectar a un dispositivo» en la versión desktop ofrece una explicación mediante un tutorial accesible a través de
un botón con un enlace.
Listado Prioritario de Hallazgos
- Coincidencia entre el sistema y el mundo real
- Gravedad: 10 (Muy grave)
- Justificación: La falta de coincidencia entre el sistema y el mundo real puede causar confusión significativa al usuario, especialmente cuando los términos utilizados no son claros o no coinciden con las expectativas del usuario.
- Propuesta de mejora: Utilizar términos y conceptos que sean familiares para los usuarios y que coincidan con sus expectativas. Por ejemplo, cambiar «Descargar» por «Guardar sin conexión» para evitar confusiones.
- Visibilidad del estado del sistema
- Gravedad: 9 (Muy grave)
- Justificación: La falta de visibilidad del estado del sistema puede hacer que los usuarios no entiendan lo que está sucediendo, lo que puede llevar a frustración y abandono de la aplicación.
- Propuesta de mejora: Asegurarse de que el sistema proporcione retroalimentación constante y clara sobre lo que está sucediendo, como mostrar el estado de la reproducción y la conexión a internet.
- Prevención de errores
- Gravedad: 8 (Grave)
- Justificación: La prevención de errores es crucial para una buena experiencia de usuario. Si los usuarios cometen errores fácilmente, pueden sentirse frustrados y abandonar la aplicación.
- Propuesta de mejora: Implementar mecanismos que eviten que los usuarios cometan errores, como advertencias claras antes de realizar acciones que puedan causar problemas, y proporcionar opciones de deshacer.
- Mejor reconocer que memorizar
- Gravedad: 7 (Medio)
- Justificación: Obligar a los usuarios a memorizar información puede ser una carga cognitiva innecesaria y puede llevar a errores y frustración.
- Propuesta de mejora: Proporcionar elementos visuales y accesos directos que faciliten la navegación y el uso de la aplicación sin necesidad de memorizar información.
- Flexibilidad y eficiencia de uso
- Gravedad: 6 (Medio)
- Justificación: La falta de flexibilidad y eficiencia puede hacer que los usuarios avanzados se sientan limitados y que los usuarios novatos se sientan abrumados.
- Propuesta de mejora: Ofrecer opciones de personalización y accesos directos que permitan a los usuarios realizar tareas de manera más eficiente y adaptada a sus necesidades.
- Estética y diseño minimalista
- Gravedad: 6 (Medio)
- Justificación: Un diseño sobrecargado puede distraer a los usuarios y dificultar la navegación y el uso de la aplicación.
- Propuesta de mejora: Mantener un diseño limpio y minimalista que se centre en lo importante y evite elementos innecesarios que puedan distraer a los usuarios.
- Consistencia y estándares
- Gravedad: 6 (Medio)
- Justificación: La falta de consistencia puede confundir a los usuarios y hacer que la aplicación sea difícil de usar.
- Propuesta de mejora: Asegurarse de que todos los elementos de la aplicación sigan los mismos estándares y patrones de diseño para proporcionar una experiencia de usuario coherente.
- Ayuda y documentación
- Gravedad: 5 (Bajo)
- Justificación: Aunque no es crítico, la falta de ayuda y documentación puede hacer que los usuarios no sepan cómo utilizar ciertas funciones de la aplicación.
- Propuesta de mejora: Proporcionar documentación clara y accesible, así como tutoriales y FAQs que ayuden a los usuarios a resolver sus dudas y problemas.
- Libertad y control por parte del usuario
- Gravedad: 5 (Bajo)
- Justificación: La falta de libertad y control puede hacer que los usuarios se sientan atrapados y frustrados.
- Propuesta de mejora: Proporcionar opciones que permitan a los usuarios deshacer acciones y navegar libremente por la aplicación.
- Ayudar a los usuarios a reconocer, diagnosticar y corregir los errores
- Gravedad: 5 (Bajo)
- Justificación: Aunque no es crítico, la falta de ayuda para reconocer y corregir errores puede hacer que los usuarios se sientan frustrados cuando encuentran problemas.
- Propuesta de mejora: Proporcionar mensajes de error claros y detallados que expliquen el problema y ofrezcan soluciones.
Diseño de un prototipo básico – RETO 1
Pública En este trabajo, desarrolló una aplicación para Burger King con el objetivo de mejorar la experiencia del usuario en el proceso de pedido y navegación. A lo largo del proyecto, aplicó los principios fundamentales del diseño de interfaces, centrándome en aspectos clave como la jerarquía visual y la consistencia. La aplicación no solo busca ofrecer un diseño estéticamente atractivo, sino que también pretende facilitar una interacción intuitiva, guiando al usuario de manera eficiente a través de las diferentes secciones, como el menú, los servicios y el perfil del usuario. Mediante la implementación de elementos visuales claros y uniformes, trabajó para asegurar que la aplicación sea accesible y fácil de usar.
LINK DEL FIGMA (Para verlo bien, haz clic en el botón secundario del ratón encima de «LINK DEL FIGMA» y ábrelo en una página nueva)
VÍDEO DEL PROTOTIPO:
La verdad que las interacciones para mi es algo a mejorar. Ya que no he podido conseguirlas todas pese a haberlas intentado muchas veces.
No se si a ustedes compañeros les ha pasado lo mismo, pero ¿Con que situaciones te has enfrentado tu?.
Muchas gracias.
¿Cómo cargar la cámara de fotos y ponerle la batería para hacer fotos?
Hola !
Para este reto seleccioné el siguiente proceso:
Conectar la batería de una cámara compacta Sony Cyber-shot a la cámara, después de haber sido cargada para hacer fotos.
En esta guía, te explicaré cómo conectar la batería a la cámara Sony Cyber shot (modelo compacto de 2002) tras haberla cargado sin necesidad de extraerla, usando un cable miniUSB.
¿Por qué es importante conectar correctamente la batería en una cámara compacta como la Sony Cyber-shot? Este tipo de cámaras digitales requieren energía para funciones esenciales como encenderse, enfocar, y capturar fotos. Aunque la batería es extraíble, se puede cargar directamente dentro de la cámara a través de un cable miniUSB, lo que hace el proceso de carga mucho más sencillo y rápido. Así evitamos tener que extraerla y volver a instalarla constantemente, reduciendo el desgaste de los contactos de la batería.
Pasos para conectar la batería de una cámara compacta Sony Cyber-shot después de haber sido cargada:
Colección de frames:
Descripción de los pasos:
1. Reunir los elementos necesarios:
- Cámara compacta Sony Cyber-shot (modelo del 2002).
- Batería recargable de la cámara (es extraíble, pero no es necesario sacarla para cargarla).
- Cable miniUSB compatible con la cámara.
- Fuente de alimentación USB (puede ser un cargador de pared, un puerto USB de ordenador o una batería portátil).
2. Insertar la batería en la cámara (si está fuera): Si la batería ha sido extraída, insértala correctamente en el compartimento destinado a ella, que generalmente se encuentra en la parte inferior de la cámara. Asegúrate de que los contactos metálicos de la batería coinciden con los de la cámara, y cierra bien el compartimento.
3. Conectar el cable miniUSB para cargar la batería: Con la cámara apagada, conecta el cable miniUSB en el puerto de carga de la cámara. El otro extremo del cable debe conectarse a una fuente de alimentación, como un cargador USB o un puerto de ordenador. La cámara mostrará un indicador de luz que confirma que la batería está cargando (normalmente una luz ámbar o verde).
4. Esperar a que la batería esté completamente cargada: Dependiendo del nivel de carga, este proceso puede durar varias horas. La luz indicadora cambiará de color o se apagará cuando la batería esté completamente cargada.
5. Desconectar el cable miniUSB: Una vez que la batería esté cargada, desconecta el cable miniUSB de la cámara y de la fuente de alimentación.
6. Encender la cámara y verificar el nivel de batería: Con la batería ya cargada, enciende la cámara. En la pantalla, podrás ver el nivel de batería, que debería estar completo o casi completo.
7. Probar la funcionalidad de la cámara: Toma algunas fotos de prueba y verifica que todas las funciones de la cámara, como el enfoque y el disparador, estén funcionando correctamente. Si la cámara opera de manera normal, el proceso de carga y conexión de la batería ha sido exitoso.
Continuar leyendo «¿Cómo cargar la cámara de fotos y ponerle la batería para hacer fotos?»
R5. Prototipado y síntesis del proyecto
Presentación de la Propuesta de Valor y del Prototipo
A continuación, se presentará la propuesta de valor desarrollada durante el diseño de la Arquitectura de la Información del proyecto, junto con el prototipo resultante del trabajo realizado.
Propuesta de Valor
En el diagrama siguiente se han delineado los diversos elementos que componen la propuesta de valor del proyecto de Arquitectura de la Información. Esta se ha formulado tras completar las fases de Conceptualización de la Interacción, Definición de la Organización y del Etiquetado, Diseño de la Navegación y Prototipado.
Prototipo
El prototipo que se presenta a continuación está diseñado para representar la arquitectura de la información de la aplicación. Este es el resultado de un proceso de diseño de interfaces que incluyó una fase previa de sketching. Durante esta fase, se iteró sobre un diseño inicial en papel, lo que llevó a la creación de los wireframes que se muestran a modo de previsualización en la siguiente imagen:
AQUÍ PODEIS VER EL PROTOTIPO DE BAJO NIVEL (TENEIS QUE ABRILO EN UNA PESTAÑA NUEVA, SI NO NO VA)
Cukicu – Comunicación Interdimensional
En este ejercicio, me di un poco de libertad creativa, y quise mostrar un lado más sarcástico del producto que desarrollé. Utilicé un especie de mando, el cual reonombré como CUKICU, ya que son un canal de comunicación interdimensional. Estuve muy influenciado por el artículo de James Auger, su trabajo, y el uso de que hace de los objetos combinados con la tecnología para realizar una crítica mordáz. Quise mostrar el prototipo como un infomercial, con promesas extravagantes, y una clara alución a los modos de venta del New Age.
También realicé una breve descripción de las posibilidades de interacción tecnológica del CUKICU, para explicar mejor mi visión del prototipo .
Referencias y Análisis Crítico-RETO4
He seleccionado dos plataformas de universidades online que ofrecen una variedad de grados y master además se puede compaginar en distintos países: UNED y UDIMA.
De acuerdo con el enunciado del ejercicio, he analizado el principal flujo de navegación de cada plataforma y he establecido como objetivo que los usuarios accedan a ver el listado de asignaturas del grado de psicología. Ambas plataformas están disponibles tanto en versión de navegador como en aplicaciones nativas, y comparten similitudes con nuestra aplicación.
Los diagramas y el análisis los he realizado a partir de la aplicación, ya que el objetivo es comparar el flujo de navegación y el diseño de la interfaz según los principales criterios de evaluación heurística. A continuación, presento los diagramas correspondientes junto con el análisis competitivo.
Diagrama UNED: Acceder a una lección en la aplicación de UNED.
Diagrama UDIMA: Acceder a una lección en la aplicación de UDIMA.
Análisis crítico de ambas:
Para mí, crear diagramas de flujo durante la fase de arquitectura de información ha sido absolutamente esencial. No solo facilitan la comprensión de cómo interactúan los usuarios con un sistema, sino que también juegan un papel crucial en la toma de decisiones informadas sobre cómo estructurar y organizar la información. Al trazar paso a paso el proceso y las relaciones entre cada acción, obtengo una visión clara y secuencial de lo que los usuarios deben hacer para lograr sus objetivos.
Diseño de Interacción-RETO3-KILIAN QUEVEDO
No se si se ve bien, pero por si acaso dejo el enlace aquí para que puedan verlo mejor. Gracias.
RETO3 DEFINICIÓN DE LA ORGANIZACIÓN Y ETIQUETADO
Después de definir los requisitos del producto en la actividad previa, es momento de establecer la arquitectura de la información y la estructura de interacción del producto o servicio. Comenzaremos con la organización y etiquetado de los contenidos. La fase de arquitectura de la información se enfoca en cómo organizar los contenidos que serán parte del sistema para facilitar su uso por parte de los usuarios. Definiremos los contenidos del producto y luego los organizaremos y etiquetaremos.
Tras crear el inventario de contenido, llevamos a cabo una prueba de ordenamiento de tarjetas. Esta prueba contó con la participación de 5 individuos con diversos perfiles, quienes organizaron el contenido de la forma más intuitiva para ellos mismos. Con los resultados de esta prueba, realizamos un análisis para identificar las tendencias de los usuarios y, finalmente, elaboramos el árbol de contenidos final más apropiado.
Inicialmente, aproximamos unas 6 categorías generales que abarquen todo el contenido del sistema, teniendo en cuenta tanto las respuestas de los participantes en el ordenamiento de tarjetas como la teoría de Miller (7±2).
Si por casualidad no se lograse ver bien (haz click aquí para verlo mejor).
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.
