Una aplicación y crear un prototipo de alta fidelidad para reservar salas en la sede de Spotify.
Este proceso se llevó a cabo siguiendo escenarios específicos, como la búsqueda de una sala de reuniones con ciertas características, la reserva con detalles como el número y nombre de asistentes, y la confirmación .
Se e ha implementado un buscador por fecha y hora, así como una herramienta de filtros para adaptar la búsqueda a las necesidades del usuario. También se añadió una agenda para que los usuarios puedan saber a que reuniones están convocados, Además de un pequeño chat interno dentro de la aplicación
En ocasiones, lo que parece ser un fallo evidente puede ser el resultado de una percepción completamente errónea. En mi caso de estudio, pongo de ejemplo esta grapadora automática la grapadora automática fue inicialmente considerada como «rota».
En este apartado voy a explicar este caso de brecha de evaluación, analizando los motivos de por que se produjo esa brecha y como se podía haber evitado que desmontase la grapadora, para “intentar” arreglarla y acabar comprando otra nueva.
La topografía de un objeto describe cómo es la organización y disposición de los diferentes elementos visuales y funcionales de un objeto. Esto puede ayudar a la compresión de como se usa un objeto y hacer que el objeto se pueda usar de forma intuitiva y eficiente.
El caso que voy analizar es un programador analógico como buen ejemplo de buena topografía de objeto Figma
A continuación, comparto el Desafío 2, que implica la creación del sistema de diseño para la aplicación de Spotify en dispositivos móviles.
En la segunda parte, se nos asignó la hipotética solicitud de desarrollar una aplicación que facilitara la reserva de salas de trabajo para los empleados de Spotify. Este escenario específico marcó el marco de trabajo para nuestra labor.
Un usuario necesita agendar una sala de reuniones para 12 personas, en un momento futuro-cercano, que tenga pizarra, proyector, luz natural y karaoke. El usuario busca una sala de reuniones con unos requisitos concretos de capacidad y características (proyector, pizarra, karaoke, canción de bienvenida, iluminación, moderador, comida, ….o lo que se nos ocurra).
Hola
El propósito de este ejercicio es recrea la interfaz de la aplicación de Spotify en dos de sus pantallas: la pantalla de reproducción actual y el menú . Estoy contento con el trabajo es la segunda vez que utilizo Figma y nunca antes había usado los componentes son bastante útiles para trabajar Al principio se me hizo un poco complicado el poder utilizarlos .
A continuación, os dejo un vídeo que muestra el resultado logrado.
En este artículo se examinará la página web de venta de entradas de Ataquilla, que es uno de los servicios de venta de entradas más populares en Galicia. Este servicio permite buscar entradas para eventos según la ubicación y la fecha, lo que puede dificultar la navegación en algunos casos.
Ataquilla es un servicio de venta de entradas de la Fundación Galicia Obra Social, conocida comercialmente como Afundación. Esta organización se dedica principalmente al desarrollo de obra social y la gestión del patrimonio cultural en Galicia.
Metodología: Explicación acerca de cómo se ha llevado a cabo el análisis
Una Evaluación Heurística es una técnica en la que un experto evalúa un producto para identificar problemas de usabilidad potenciales, utilizando una lista de principios de usabilidad. Esta técnica es eficaz para identificar problemas antes de llevar a cabo pruebas con usuarios.
Para la realización del análisis heurístico y análisis desde de la perspectiva de genero de la web se realizaron los siguiente pasos:
Primero me dediqué a explorar todas las secciones del sitio web para entender cómo acceder a las diferentes páginas. Probando las diferentes funcionalidades de la web.
Realice un listado con las 10 principios heurísticos de Nielsen, con algunos ejemplos, para entender mejor cada heurística, también busqué información adicional en Internet.
Volví a explorar la web iba identificando prácticas positivas y negativas en general,
Después, creé una listado de ejemplos de buenas practicas y de malas practicas de cada uno de los casos y posibles mejoras para mejorar la experiencia de los usuarios.
Mientras hacía esto, también tomaba capturas de pantalla de los ejemplos que os adjunto.
Finalmente, volví a navegar por todo el portal para buscar aspectos relacionados con la perspectiva de género e inclusión.
Los 10 principios heurísticos de Nielsen: Cada uno de los principios con su buen y mal ejemplo de aplicación y justificación de por qué motivo es un ejemplo ese hallazgo
#1: Visibilidad del estado del sistema
Este principio de usabilidad web nos indica que siempre tenemos que tener informado al usuario de lo que está pasando en nuestra web y ofrecerle una respuesta en el
menor tiempo posible
A) Generalmente se pueden encontrar Breadcrumbspara saber qué parte del portal nos encontramos, pero estos no son muy identificables y es fácil que se pierdan de vista mientras navegamos, por esta Web. Teatro seria la indicación de en que sección de la web nos encontramos, pero acaba desapareciendo.
Es una mala práctica por parte de la web el no incluir este tipo de indicaciones de forma clara para que los usuarios puedan guiarse. Se tiene que incluir algún tipo de indicación en la barra de menú.
#2: Coincidencia entre el sistema y el mundo real
El sistema tiene que “hablar” el lenguaje del usuario con palabras o frases que a éste lesean familiares y que pueda reconocer con facilidad.
La información tiene que mostrarse con un orden lógico y las imágenes o iconos usados tienen que ser claros, sin darle la posibilidad al usuario de equivocarse.
A) Se pueden ver los patios de butacas de los diferentes lugares y que sitios están libre cuando son entradas numeradas. Utilizar diferentes colores para representar los diferentes tipos de asientos disponibles es una buena práctica en el diseño de interfaces de usuario. El uso de colores distintos para los asientos puede facilitar la comprensión y la toma de decisiones por parte de los usuarios, ya que les permite identificar rápidamente los tipos de asientos disponibles, como asientos normales, asientos preferenciales o asientos especiales, de manera visual.
B) La información se muestra de forma clara y en orden lógico. No es difícil moverse por el portal.
Es una Buena practica el poder ver de un solo vistazo cuales son los asientos que estas disponible y en que zonas
#3: Control y libertad del usuario
A veces, un usuario se equivoca, es normal, está dentro de la naturaleza humana el equivocarse.
Tenemos que darle al usuario la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo.
Cuando es fácil para las personas dar marcha atrás en un proceso o deshacer una acción, se fomenta una sensación de libertad y confianza.
A) La web permite con facilidad el rectificar la compra de una entrada que se compra por error.
Es una buena practica el facilitar al usuario poder eliminar el exceso de entradas y modificar con facilidad en cualquier momento de la compra.
#4: Consistencia y estándares
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Tenemos que tener en cuenta es seguir los convenios establecidos para ciertos iconos.
A) Los elementos con los que se pueden interactuar cambian de aspecto cuando se pasa el ratón, de manera que los usuarios puedan identificar claramente qué elementos son interactivos.
B) Indican con colores de forma clara las butacas que esta disponibles y tipo de asiento
Es importante asegurarse de que los colores utilizados sean accesibles para todos los usuarios, incluyendo a aquellos con discapacidades visuales o dificultades en la percepción del color.
#5: Prevención de errores
Prevenir cualquier error que pueda cometer el usuario. Y dado el caso de que este cometa uno, tenemos que poner a su alcance todas las opciones posibles para poder corregirlo.
Hay dos tipos de errores: los deslices y las equivocaciones. Los deslices son errores inconscientes causados por falta de atención.
Los errores son errores conscientes basados en un desajuste entre el modelo mental del usuario y el diseño.
A) Tiene un buscador que tiene la función de auto completado y que permite buscar por nombre y lugar.
B) El formulario avisa si se produce un error cuando se escribe, donde y porque.
Es una buena practica que mientras se escribe se pueden ver todos los resultados al momento lo que ayuda a que la persona que escribe no tenga que saber exactamente el nombre completo del evento.
6: Reconocimiento en lugar de recuerdo
Minimizar la carga de memoria del usuario haciendo visibles los elementos, acciones y opciones. El usuario no debería tener que recordar información de una parte de la interfaz a otra.
La información necesaria para utilizar el diseño (p. ej., etiquetas de campo o elementos de menú) debe estar visible o recuperarse fácilmente cuando sea necesario.
A) Durante todo el proceso de compra se tiene claro el numero de entradas cuanto va a acostar y la butaca
Es una buena practica que el usuario no tenga que recordar información de una página a otra. Es importante que la información sobre la cantidad de entradas, el precio y la ubicación de las butacas se muestren claramente en todo el proceso de compra, para que el usuario pueda revisar y confirmar su selección en todo momento. Al hacer que la información necesaria para el proceso de compra sea fácilmente visible, se reduce la carga de memoria del usuario y se mejora la experiencia de usuario en el sitio web.
#7: Flexibilidad y eficiencia de uso
Los accesos directos, ocultos para los usuarios novatos, pueden acelerar la interacción para el usuario experto, de modo que el diseño pueda satisfacer tanto a los usuarios inexpertos como a los experimentados. Los procesos flexibles se pueden llevar a cabo de diferentes maneras, de modo que las personas puedan elegir el método que mejor les funcione.
A ) La barra de buscador permite buscar eventos específicos lo que sirve para agilizar el trabajo para usuarios avanzados. Además, es positivo que el portal esté diseñado pensando tanto en usuarios avanzados como en usuarios novatos. La capacidad de buscar actividades por calendario y ubicación de forma sencilla es una buena práctica, ya que facilita la búsqueda y selección de eventos según las preferencias del usuario. Esto asegura que tanto los usuarios experimentados como los novatos puedan utilizar el portal de manera eficiente y encontrar las actividades culturales que deseen participar.
Es una buena práctica en el diseño del portal incluir una barra de búsqueda que permita a los usuarios buscar eventos específicos. Esto agiliza el trabajo de los usuarios avanzados, ya que les permite encontrar rápidamente los eventos o actividades que están buscando.
#8: Diseño estético y minimalista
Las interfaces no deben contener información que sea irrelevante o que rara vez se necesite.
Se trata de asegurarte de mantener el contenido y el diseño visual enfocados en lo esencial. Asegúrese de que los elementos visuales de la interfaz respalden los objetivos principales del usuario.
A ) La Web es sencilla y no contiene información a mayores que puede molestar o distraer. No tiene publicidad como sucede en otros portales de venta de entradas Online.
B ) La paleta de colores de portal esta constituido por 3 colores (Azul, Rojo y Blanco) que son los colores corporativos de A fundación. Se evita una saturación de colores.
Mejoras: Aun que el uso de los colores y de las tipografías están justificadas a nivel de identidad grafica de la fundación, esta genera problemas de contraste dentro de la web.
#9: Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores
Los mensajes de error deben expresarse en un lenguaje sencillo (sin códigos de error), indicar con precisión el problema y sugerir una solución de manera constructiva.
Los mensajes de error deben presentarse con tratamientos visuales que ayuden a los usuarios a notarlos y reconocerlos.
A) El formulario avisa si se produce un error cuando se escribe, donde y porque. Lo que evita tener que hacer dos veces el formulario en caso de error.
B) Los avisos son en inglés esto es una mala practica.
Mejoras: Habría que cambiar los mensajes de error el formulario al castellano o galego también hay que tener en cuenta el tamaño de los mensajes de error ya que el contraste puede ser muy bajo.
#10: Ayuda y documentación
Es mejor si el sistema no necesita ninguna explicación adicional. Sin embargo, puede ser necesario proporcionar documentación para ayudar a los usuarios a comprender cómo completar sus tareas.
El contenido de la ayuda y la documentación debe ser fácil de buscar y debe centrarse en la tarea del usuario.
A) Dispone de una pagina de ayuda, pero no es esta accesible de forma directa.
B) No es muy completa comparada con las de otros servicios.
Mala practica; hay que dar un acceso directo desde contacto para facilitar a los usuarios el acceso a la información. También habría que hacer un una reforma de la pagina de ayuda para dividir las consultas en diferentes problemáticas y soluciones. Incluso añadir una barra de búsqueda para facilitar la búsqueda de información.
Listado de Mejoras
La funcionalidad de inicio de sesión o creación de cuenta no esta disponible en la web esta función es importante, lo que les permitiría guardar sus preferencias, ver el historial de compras anteriores, recibir notificaciones relevantes y tener un proceso de compra más eficiente en futuras visitas. No tener esta opción resultar en una experiencia mala para los usuarios, ya que tendrían que volver a ingresar su información en cada compra. Por que el botón de entrar no es para loguearse.
Ayuda a la Documentación: No hay un acceso a la ayuda en la barra del menú ni a través de contacto. Dentro de la pagina de ayuda no hay mucha información, no esta dividida en temáticas para ayudar a los usuarios a localizar la temática de su problema y así encontrar una solución a su problema.
Diseño estético y minimalista. – Hay que hacer una revisión de la identidad grafica del sitio para ajustar los colores y tipografías en algunos apartados de la web. Esta problemática podría afectar a personas mayores y con problemas de visión.
Visibilidad del estado del sistema: Se deberían poder encontrar Breadcrumbs o «migas de pan» en las interfaces de usuario para indicar la ubicación del usuario dentro del portal o sitio web. Sin embargo, si estos elementos no son fácilmente identificables o se pierden de vista durante la navegación. Es importante que los usuarios cuenten con indicaciones claras para poder orientarse y saber en qué parte del portal se encuentran.
Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores: El formulario de contacto anqué indica donde esta el error es importante que este en Castellano o en Galego también que los tamaño de las tipografías sean de tamaños mas grandes.
Consideraciones de la interfaz desde una perspectiva de género e inclusión.
En términos de inclusión y perspectiva de género, es importante considerar no solo los aspectos técnicos, sino también los aspectos culturales y sociales en el diseño de la interfaz de una web. En cuanto a la accesibilidad, se han identificado problemas en el contraste de los botones de llamada a la acción, lo que dificulta la legibilidad y navegación para algunos usuarios.
Asimismo, se han detectado problemas similares en algunas tipografías y colores que se utilizan en la página.
Este problema se puede deber a que para la creación de la web usaron los colores corporativos de la entidad que esta detrás de la Ataquilla
Las imágenes cuentan con etiquetas de accesibilidad, como «alt» lo que ayuda a dar accesibilidad a la pagina.
En relación a la perspectiva de género, la web parece tratar al usuario de forma neutral, sin hacer distinción por género ni recopilar información de género en los formularios. No se han incluido imágenes de espectadores ni de personas, lo que podría considerarse una estrategia para evitar la identificación de géneros y hacer la web neutra.
Si bien es cierto que no hacer distinción de género en la interfaz de una web puede ser considerado un paso hacia la neutralidad, también es importante considerar la inclusión de todas las identidades de género en el diseño de la página. Esto implica no solo evitar la discriminación, sino también incluir representaciones de género diverso en las imágenes y contenido de la página, para que todos los usuarios se sientan identificados y bienvenidos.
En ese sentido, la falta de imágenes de espectadores o personas en la página podría limitar la inclusión de algunas identidades de género, especialmente si el contenido del sitio web se dirige a un público diverso. Por lo tanto, se sugiere considerar incluir imágenes y contenido que representen la diversidad de género en la página, para asegurar una experiencia inclusiva y representativa para todos los usuarios.
Cuando hice la encuesta de sobre el uso de programas y aplicaciones de vídeollamada PEC 03 un porcentaje alto delos participantes de la encuesta utilizan de forma habitual Discord para jugar a el juego de mesa Dungeons & Dragons via online.
Durante la realización de la encuesta a parte de explicar de que trataba la encuesta y los objetivos, les solía preguntar si había algo que echasen de menos o que les resultase molesto al hacer esa actividad.
Después de la encuesta en las ultimas preguntas se les puso ejemplo de situaciones que en general eran molestas durante las llamadas y se encontraron los siguientes inconveniente
1. Problema para mantener la atención
2. Comunicación fría
3. Mirar durante un largo periodo algo que es estático
4. Utilizar varios programas
5. No utilizar la webcam
Uno de los principales problemas es que una partida de rol online puede llegar a durar mucho tiempo, fácilmente puede llegar a 3 horas o mas. La interface en la que se maneja el usuario es la mayoría del tiempo estática y no cambia mucho.
Aunque se puede usar música para amenizar la actividad, el tablero de juego no se suele usar mucho durante el tiempo en partida.
A muchas personas el compartir en una vídeo llamada su cara y el interior de su casa con desconocidos es un problema, también están el problema de sentirse observados y cohibidos mientras juegan. Estos suelen ser los motivos por los que los jugadores no utilizan una webcams.
En esta practica analizaremos discord y roll20 que son las principales plataformas que se utilizan para esta actividad y ver que solución se puede aportar a la interacción y mejorar la experiencia.
Para poder mejorar la experiencia de juego en partida y que los usuarios utilicen una webcam habria que incorporar la utilización de avatares animados que reaccionasen a los movimientos y expresiones de los jugadores.
Esto permite que exista una distancia ya que el resto de jugadores verían el avatar en movimiento y al mismo tiempo un acercamiento ya que el jugar y el resto tendrían un feedback directo. Entre lo que expresan y lo que se ve en pantalla y lo que ven el resto de jugadores.
En algunos momentos cuando dos personajes o varios hablan el juego cambia a modo dialogo en donde solo aparecen los personajes . Esto mejora ya experiencia ya que mejoraría la interacción y el roleo
Al ir cambiando lo que sucede en pantalla y variando la experiencia se mejora la atención de los participantes y aumenta su interés por lo que sucede.
Durante los combates los avatares pasarían a la parte inferior, para no ocupar tanto espacio.
El festival IN-EDIT, es un festival de cine especializado en cine documental musical más importantes de la escena, es un punto de encuentro entre el sector audiovisual y el sector musical.
Esta App tiene que servir como punto de encuentro entre el público y los directores, fomentando la comunicación entre ambos.
Principales objetivos y requerimientos de la plataforma son:
Crear debates e intercambio entre directores y público en todo el mundo.
Incluir In-EditTV dentro de la app (In-EditConnect
Charlas y debates en streaming
Contacto entre directores y público
Incluir una agenda del festival y de los eventos que se realicen todo en año.
Permitir la interacción entre estos dos perfiles, no solamente durante los días del festival, sino a lo largo del año.
Motivar debates e intercambio de pensamiento entre público y directores.
Crear comunidad
Dar visibilidad a creadores emergentes y ser accesibles.
Después de las fases de investigación, definición, evaluación y generación del diseño de la aplicación In-Edit, se han desarrollado los siguientes prototipos nombrados en Figma.
Sketching
A partir del árbol de contenidos y de los flujos de interacción se realizó un sketching de las pantallas.
En el ejercicio anterior cuando se hicieron las encuestas, sobre las videollamadas. Una de las conclusiones que saque con los resultados era que para la mayoría de las personas que hacen videollamadas, encuentran negativo que la comunicación sea fría. Este inconveniente esta muy extendido dentro de las personas que respondieron la encuesta.
En este ejerció me marque como objetivo el intentar conectar con las personas a distancia. Este dispositivo seria como un periférico que se podría usar tanto en videollamadas como fuera de ellas. Esta almohada/cojín de compañía se sincroniza con la persona y trasmite calor, pulsaciones del corazón y movimientos a la almohada con la que se sincroniza. Se busca incluir mas sentidos a la comunicación a distancia, para enriquecerla.
Durante la llamada con seres queridos para estar más cerca.
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.