Publicado por

PEC 04: Diseño de la navegación: referencias y Análisis Crítico

Publicado por

PEC 04: Diseño de la navegación: referencias y Análisis Crítico

ANÁLISIS CRÍTICO Para esta evaluación se han escogido los 10 principios de generales de Jakob Nielsen para el diseño de interacción. Están basados en amplias reglas generales y no específicas directrices de usabilidad son una serie de 10 ideales y fundamentos que permiten crear productos con un mayor grado de acogida entre los usuarios debido a que se basan en sus necesidades y en su comportamiento. Para este análisis se van analizar 2 portales de venta de entradas para diferentes…
ANÁLISIS CRÍTICO Para esta evaluación se han escogido los 10 principios de generales de Jakob Nielsen para el diseño…

ANÁLISIS CRÍTICO

Para esta evaluación se han escogido los 10 principios de generales de Jakob Nielsen para el diseño de interacción. Están basados en amplias reglas generales y no específicas directrices de usabilidad son una serie de 10 ideales y fundamentos que permiten crear productos con un mayor grado de acogida entre los usuarios debido a que se basan en sus necesidades y en su comportamiento.

Para este análisis se van analizar 2 portales de venta de entradas para diferentes eventos. Uno de los escenarios y diagramas de flujo es la compra de entradas en base a un viaje. Lo que hace que sea necesario el tener información de antemano sobre los horarios.

  • www.ticketmaster.es
Cargando...
  • www.entradas.ataquilla.com
Cargando...

Los 10 principios de generales de Jakob Nielsen para el diseño de interacción

#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

#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 le sean 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.

#3: Control y libertad del usuario
Tenemos que darle al usuario la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo.

#4: Consistencia y estándares
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo.

#5: Prevención de errores
Prevenir cualquier error que pueda cometer el usuario

#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.

#7: Flexibilidad y eficiencia de uso
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.

#8: Diseño estético y minimalista
Las interfaces no deben contener información que sea irrelevante o que rara vez se necesite.

#9: Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores
Los mensajes de error deben presentarse con tratamientos visuales que ayuden a los usuarios a notarlos y reconocerlos.

#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.

 

Principios de usabilidad Ataquilla Ticketmaster
Visibilidad del
estado del sistema
Generalmente se pueden encontrar Breadcrumbs para saber qué parte del portal nos encontramos. Aunque en algunas secciones no hay indicaciones.

Durante la compra de entradas se puede ver de las diferentes fases de del proceso y donde nos encontramos.

Los Breadcrumbs indican en que parte de la web se está en todo momento.

Durante la compra de entradas se puede ver de las diferentes fases de del proceso y donde nos encontramos.

Relación entre el
sistema y el mundo real
La información se muestra de forma clara y en orden lógico. No es difícil moverse por el portal.

Se pueden ver los patios de butacas de los diferentes lugares y que sitios están libre cuando son entradas numeradas.

La información se muestra de forma clara y en orden lógico. No es difícil moverse por el portal.

Se pueden ver los patios de butacas de los diferentes lugares y que sitios están libre cuando son entradas numeradas.

Libertar y control
por parte del usuario
La web permite con facilidad el rectificar la compra de una entrada que se compra por error. La web permite con facilidad el rectificar la compra de una entrada que se compra por error.
Consistencia
y estándares
Los elementos con los que se pueden interactuar cambian de aspecto cuando se pasa el ratón. Indican con colores de forma clara las butacas que esta disponibles y tipo de asiento. Los elementos con los que se pueden interactuar cambian de aspecto cuando se pasa el ratón. Indican con colores de forma clara las butacas que esta disponibles, pero no indica el tipo de asiento es.
Prevención
de errores
Tiene un buscador que tiene la función de auto completado y que permite buscar por nombre y lugar.

El formulario avisa si se produce un error cuando se escribe, donde y porque.

Tiene un buscador que tiene la función de auto completado y que permite buscar por nombre y lugar.

El formulario avisa si se produce un error cuando se escribe, donde y porque.

Reconocimiento
antes que recuerdo
Durante todo el proceso de compra se tiene claro el numero de entradas cuanto va a acostar y la butaca. Durante todo el proceso de compra se tiene claro el numero de entradas cuanto va a acostar y la butaca.
Flexibilidad
y eficiencia de uso
La barra de buscador permite buscar eventos específicos lo que sirve para agilizar el trabajo para usuarios avanzados.
El portal esta planteado tanto para usuarios avanzados como más noveles.
Permite buscar que hacer por calendario y lugar. de forma fácil.
La barra de buscador permite buscar eventos específicos lo que sirve para agilizar el trabajo para usuarios avanzados.
El portal esta planteado tanto para usuarios avanzados como más noveles.
No es fácil buscar que hacer en calendario y lugar, todo es genérico .
Estética y
estilo minimalista
La Web es sencilla y no contiene información a mayores que puede molestar o distraer. No tiene publicidad. La web es sencilla y es fácil navegar por ella, pero tiene publicidad que distrae la navegación.
Ayudar a los
usuarios a reconocer
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. Los avisos son en inglés El formulario avisa si se produce un error cuando se escribe, donde y el por qué. Lo que evita tener que hacer dos veces el formulario en caso de error.
Ayuda y
documentación
Dispone de un pagina de ayuda, pero no es esta accesible de forma directa. No es muy completa Dispone de una pagina de ayuda con diferentes secciones según el tipo de problema y dispone de un buscador. Es accesible desde la portada.

Diagramas de flujo

Debate0en PEC 04: Diseño de la navegación: referencias y Análisis Crítico

No hay comentarios.

Publicado por

Definición de la Organización y del Etiquetado. PEC3

Publicado por

Definición de la Organización y del Etiquetado. PEC3

Tras la realización del card sorting con 4 usuarios más los requisitos con los que ya contábamos de etapas anteriores, presento mi…
Tras la realización del card sorting con 4 usuarios más los requisitos con los que ya contábamos de etapas…

Tras la realización del card sorting con 4 usuarios más los requisitos con los que ya contábamos de etapas anteriores, presento mi propuesta de árbol de contenidos para la app In-edit. Este árbol de contenidos se ordena en base a 3 grupos de menús.

El dashboard: Pizarra o escritorio principal que te encuentras nada más pasar la pantalla de login.
El menú principal (hamburguesa): Donde se muestran todos los apartados de la app de forma listada.
El menú secundario (barra inferior): Donde aparecen de manera más intuitiva, los atajos al contenido más habitual.

 

Debate0en Definición de la Organización y del Etiquetado. PEC3

No hay comentarios.

Publicado por

Definición de la Organización y del Etiquetado

Publicado por

Definición de la Organización y del Etiquetado

Hola a tod@s! A continuación les presento los resultados del análisis en el Card Sorting por medio de la elaboración de un…
Hola a tod@s! A continuación les presento los resultados del análisis en el Card Sorting por medio de la…

Hola a tod@s!

A continuación les presento los resultados del análisis en el Card Sorting por medio de la elaboración de un árbol de contenidos.

Inventario de contenidos:

Para la realización del inventario de contenidos realicé un análisis del Briefing recibido, los datos obtenidos de los Users Journeys y los requisitos del producto ya establecidos en la fase anterior. Así desarrolle las tarjetas para el Card Sorting, el cual lo realicé con la herramienta Optimal Sort:

Análisis:

La etiqueta Usuario arrojo resultados muy claros. Entre el 100% y 63% de los usuarios aprueba esta categoría para Avatar, perfil, mensajes y notificaciones.

La etiqueta Festival arrojo resultados claros. Entre el 100% y 50% de los usuarios aprueba esta categoría para Agenda, presencial, virtual, venta de entradas, comprar y reservar. Mediante comentarios, 4 de los usuarios recomiendan llamar a “Venta de entradas” simplemente “Tienda”. “Virtual” es clasificada por muchos de los usuarios en otras categorías. Voy a cambiar el nombre de esta subcategoría a eFestival para su mejor comprensión.

La etiqueta In-Edit-Connect arrojo resultados claros. Entre el 100% y 50% de los usuarios aprueba esta categoría para In-Edit-TV, videos y documentales.

La etiqueta Discusiones arrojo buenos resultados. Sin embargo, existe una confusión en la subcategoría Foro, los usuarios no la entienden por su similitud con charlas y debates. Voy a quitar esta Subcategoría de mi contenido.

La etiqueta Directores arrojo buenos resultados. Pero hay una confusión con la subcategoría Creadores emergentes. Muchos de los usuarios no entienden ese término. Por lo cual voy a remplazar esa subcategoría con Promesas.

Árbol de contenidos:

En base a los datos extraídos en el Card Sorting propongo el siguiente árbol de contenidos:

 

 

 

 

 

Debate0en Definición de la Organización y del Etiquetado

No hay comentarios.

Publicado por

PEC 3 Definición de la Organización y del Etiquetado

Publicado por

PEC 3 Definición de la Organización y del Etiquetado

Definidos los requisitos del producto y los objetivos del briefing inicial, se pasa a la fase de definir la arquitectura de la información y la estructura de la interacción de la aplicación In-Edit Connect. Esta fase tiene como objetivo el organizar los contenidos que forman parte de la aplicación para facilitar a los usuarios la utilización y que sea, más accesible. Árbol de contenidos El árbol de contenidos es el diagrama o estructura que diseña la organización del contenido y…
Definidos los requisitos del producto y los objetivos del briefing inicial, se pasa a la fase de definir la…

Definidos los requisitos del producto y los objetivos del briefing inicial, se pasa a la fase de definir la arquitectura de la información y la estructura de la interacción de la aplicación In-Edit Connect.

Esta fase tiene como objetivo el organizar los contenidos que forman parte de la aplicación para facilitar a los usuarios la utilización y que sea, más accesible.

Árbol de contenidos

El árbol de contenidos es el diagrama o estructura que diseña la organización del contenido y determina la jerarquía y anidamiento de sus diferentes páginas. Dicho de otro modo, el árbol de contenidos es la representación gráfica de la estructura de una web, para obtener el árbol de contenidos se usó la técnica del Card Sorting.

Card Sorting

El Card Sorting es una técnica de diseño centrado en las personas que permite explorar cómo agrupan los usuarios la información, cómo relacionan conceptos y cuál es su percepción respecto a las etiquetas del producto.

Su objetivo es analizar los modelos mentales de los usuarios para saber cuál es la manera óptima de estructurar y etiquetar la información y, de este modo, facilitar que encuentren lo que buscan cuando utilicen el producto.

En el caso de esta practica se hizo un proceso hibrido, al principio se hizo abierto, pero después de varias actividades se optó por uno cerrado, para facilitar a los participantes el proceso.  Se hicieron 5 sesiones con 6 participantes

Se utilizaron 26 tarjetas, con categorías que hacen referencia directa a los objetivos marcados en los Escenarios y los User Journey, a los objetivos descritos en el Briefing inicial. También se les dejo la posibilidad de que en cualquier momento usasen tarjetas propias para poder crear categorías y subcategorías según necesitasen.

En base a las conclusiones sacadas del Card Sorting propongo el siguiente Árbol de Contenidos.

Debate0en PEC 3 Definición de la Organización y del Etiquetado

No hay comentarios.

Publicado por

PEC.04 Arquitectura de la Información

Publicado por

PEC.04 Arquitectura de la Información

DISEÑO DE LA NAVEGACIÓN Para la realización de esta última actividad se han tenido en cuenta todas las herramientas de diseño centrado e el usuario utilizadas para las prácticas anteriores: desde el briefing del cliente hasta el árbol de contenidos, pasando por las fichas de persona, escenarios y user journeys. A continuación, vamos a mostrar el análisis crítico de los flujos unas páginas webs de referencia (Festival Internacional de Cine Independiente de Ibiza y Bilbao BBK Live) que tiene relevancia…
DISEÑO DE LA NAVEGACIÓN Para la realización de esta última actividad se han tenido en cuenta todas las herramientas…

DISEÑO DE LA NAVEGACIÓN

Para la realización de esta última actividad se han tenido en cuenta todas las herramientas de diseño centrado e el usuario utilizadas para las prácticas anteriores: desde el briefing del cliente hasta el árbol de contenidos, pasando por las fichas de persona, escenarios y user journeys.

A continuación, vamos a mostrar el análisis crítico de los flujos unas páginas webs de referencia (Festival Internacional de Cine Independiente de Ibiza y Bilbao BBK Live) que tiene relevancia para el proyecto por guardar similitud con los flujos de algunos de los escenarios diseñados en la actividad anterior. En el primero analizamos el flujo de la inspección de proyectos emergentes y en el segundo el flujo de compra de entradas (escenario 2 y 3 respectivamente).

A continuación encontramos el análisis crítico de las referencias y los diagramas de flujo de cada uno de ellos:

 

 

 

Debate0en PEC.04 Arquitectura de la Información

No hay comentarios.

Publicado por

PEC 3 – Definición de la Organización y del Etiquetado – Árbol de Contenidos

PEC 3 – Definición de la Organización y del Etiquetado – Árbol de Contenidos
Publicado por

PEC 3 – Definición de la Organización y del Etiquetado – Árbol de Contenidos

3. Definición de la Organización y del Etiquetado …
3. Definición de la Organización y del Etiquetado …

Debate0en PEC 3 – Definición de la Organización y del Etiquetado – Árbol de Contenidos

No hay comentarios.

Publicado por

PEC.03 Arquitectura de la Información

Publicado por

PEC.03 Arquitectura de la Información

DEFINICIÓN DE LA ORGANIZACIÓN Y ETIQUETADO Tras haber definido los requisitos del producto en la actividad anterior, es el momento de definir…
DEFINICIÓN DE LA ORGANIZACIÓN Y ETIQUETADO Tras haber definido los requisitos del producto en la actividad anterior, es el…

DEFINICIÓN DE LA ORGANIZACIÓN Y ETIQUETADO

Tras haber definido los requisitos del producto en la actividad anterior, es el momento de definir la arquitectura de la información y la estructura de la interacción del producto o servicio. Comenzaremos con la organización y el etiquetado de los contenidos. La fase de arquitectura de la información aborda cómo organizar los contenidos que formarán parte del sistema para facilitar su utilización por parte de los usuarios. Definiremos los contenidos
que tendrá el producto para, a continuación, organizar y etiquetar la información.

Una vez elaborado el inventario de contenido, se ha llevado a cabo un card sorting. Esta prueba se realizó con 6 participantes con diversos perfiles que han organizado el contenido de la manera más intuitiva para ellos mismos. Con los resultado de esta prueba, se ha llevado a cabo un análisis donde se han estudiado las tendencias de los usuarios y, finalmente, se ha elaborado el árbol de contenidos final más apropiado.

En primer lugar, se ha aproximado unas 5 categorías generales que engloben todo el contenido del sistema teniendo en cuenta, por un lado las respuestas de los participantes en el card sorting y, por otro, la teoría de Miller (7±2).

Después, se han analizado la matriz de similitud, dendograma, y el cluster 3D con la finalidad de extraer conclusiones entre las respuestas afines de los participantes.

Siguiendo estas tendencias e integrándolas con las conclusiones obtenidas de las similitudes entre las arquitecturas de la información de los usuarios, se ha elaborado un árbol de contenidos final del sistema que podemos ver a continuación:

Debate0en PEC.03 Arquitectura de la Información

No hay comentarios.

Publicado por

PEC 2 – Conceptualización de la Interacción

PEC 2 – Conceptualización de la Interacción
Publicado por

PEC 2 – Conceptualización de la Interacción

En esta segunda PEC se pretende detallar el proceso de conceptualización de una app para el festival In-Edit, más concretamente la identificación…
En esta segunda PEC se pretende detallar el proceso de conceptualización de una app para el festival In-Edit, más…

En esta segunda PEC se pretende detallar el proceso de conceptualización de una app para el festival In-Edit, más concretamente la identificación de oportunidades y la identificación de requisitos de diseño. Esto se ha podido realizar gracias a la investigación de contexto previamente llevada a cabo.

Para ello se han utilizado metodologías de investigación centradas en el usuario a partir del briefing proporcionado. Estas metodologías son la creación de escenarios y los user journey, las cuales derivarán en los requisitos de diseño. A continuación se muestra uno de los escenarios creados a partir de la usuaria Sara y su correspondiente user journey. Considero que es un escenario importante ya que el festival se quiere centrar mucho en como interaccionan los usuarios en su aplicación.

Escenario

Sara está tumbada en el sofá de su salón después de haber trabajado todo el día. Un pitido le avisa de que una notificación ha llegado a su móvil. Enciende la pantalla y ve un recordatorio de la app de In-Edit. Dentro de media hora empieza la charla de Javier Sánchez, su director favorito del festival.

Este año está especialmente emocionada porque se puede interactuar con los profesionales que dan la charla. Así que va a por una cerveza, a por su libreta y un boli y se pone cómoda. Abre la app e inicia sesión con su cuenta de Google, no ha necesitado dar más datos y lo agradece.

Va al apartado de Agenda y ahí ve la ficha de la charla. Pulsa en “Entrar” y aparece una cuenta atrás para que empiece la charla. Bajo este número explican con iconos que es una charla interactiva y que los asistentes pueden interactuar con el ponente de dos maneras: “levantando la mano” y el ponente dará pie, la cámara se conectará y el usuario podrá hablar directamente.

La segunda manera será mandar sus preguntas y cometarios a través del chat. Esta segunda opción le gusta mucho más a Sara porque es algo introvertida, y que tuviese que hablar delante de tanta gente… Sin embargo, la opción de escribir por el chat le gusta mucho y podrá hacer todas sus preguntas

User Journey

Debate0en PEC 2 – Conceptualización de la Interacción

No hay comentarios.

Publicado por

PEC 2 – Conceptualización de la interacción.

Publicado por

PEC 2 – Conceptualización de la interacción.

Hola a tod@s! A continuación, les presento uno de los escenarios y user journey realizados a la ficha persona: Javier Sánchez. El…
Hola a tod@s! A continuación, les presento uno de los escenarios y user journey realizados a la ficha persona:…

Hola a tod@s!

A continuación, les presento uno de los escenarios y user journey realizados a la ficha persona: Javier Sánchez. El escenario y user journey han sido elaborados tras analizar el briefing y las fichas persona. El análisis estuvo centrado en la interacción de usuario con el producto y el entorno de esa interacción.

Escenario:

User journey:

Debate0en PEC 2 – Conceptualización de la interacción.

No hay comentarios.

Publicado por

PEC 2. Conceptualización de la Interacción

Publicado por

PEC 2. Conceptualización de la Interacción

A continuación procedo a la descripción de uno de los escenarios desarrollados para el festival In-Edit y para ello he escogido el…
A continuación procedo a la descripción de uno de los escenarios desarrollados para el festival In-Edit y para ello…

A continuación procedo a la descripción de uno de los escenarios desarrollados para el festival In-Edit y para ello he escogido el perfil de Sara.

Escenario 1:

Sara es una chica introvertida que trabaja en una escuela de danza contemporánea en las afueras de Madrid y que vive en el centro con su mejor amiga que es sordo-muda. Son amantes de la música, el cine y las nuevas tecnologías. Este mes se celebra uno de los festivales favoritos de las dos pero no saben si asistir al festival de forma presencial o virtual.

Al llegar del trabajo Sara se descarga la app en el smartphone y descubre el apartado 

“agenda” donde comprueba que puede asistir a la charla de uno de sus directores de cine favoritos, Javier Sánchez, por lo que reserva la entrada a un evento virtual. Para sorpresa de las dos en el apartado de “venta de entradas” descubren que todos los eventos virtuales están adaptados para personas que tienen algún tipo de discapacidad tanto visual como auditiva. En el caso de personas con problemas de visibilidad se ha adaptado el espacio presencial con carriles específicos para ellos, así como espacios más amplios para poder ir acompañados de sus amigos caninos o de su bastón de guía y para las personas que tengan problemas auditivos cuentan con subtítulos en todos los eventos, así como carteles y personas especializadas que irán guiándolos en todo momento. 

¡Es justo lo que necesitaban! Sara debido a su introversión no tiene que desplazarse y lo mejor de todo es que puede disfrutar de la compañía de su mejor amiga y que ésta lo disfrute al 100% debido a su condición, por ello reservan 2 entradas para el evento de Javier Sánchez. Para finalizar el pago puede ser a través de tarjeta bancaria o bizum, escogen bizum que es el método de pago más rápido que hay hasta el momento, solo tiene que añadir su número de teléfono y ¡listo!

Debate0en PEC 2. Conceptualización de la Interacción

No hay comentarios.