1. Desarrollo del Proyecto Web Interaccion2023

Esta página forma parte de la contribución realizada al congreso Interacción2023 del articulo titulado:

Metodología MPIu+aX, de Diseño Centrado en el Usuario que empatiza con el usuario y genera una mejor experiencia accesible (De la teoría a la práctica)

2. Proceso de desarrollo del sitio web del congreso Interacción 2023

Primero se presenta el caso de uso: el desarrollo de la web del congreso Interaccion2023 con las técnicas seguidas de la metodología MPIu+aX.

Luego se explica la metodología MPIu+aX Modelo de Proceso de la Ingeniería de la usabilidad y la accesibilidad en la que se tiene en cuenta la eXperiencia de Usuario Accesible.

3. Caso de uso: desarrollo de la web del congreso Interacción 2023

3.1. Antecedentes y objetivos

A continuación se presenta primero los antecedentes y objetivos del sistema.

El Congreso Internacional Interacción Persona Ordenador se celebra desde el año 2000 con el objetivo de reunir a investigadores, estudiantes y profesionales de la Interacción Persona-Ordenador (IPO), tanto del mundo académico como de la industria, para promover la presentación de propuestas innovadoras, el intercambio de ideas y la discusión.

Las primeras ediciones del congreso no tenían presencia online y en el año 2003 se creó una sola página web con el horario del congreso. Durante las siguientes ediciones, el diseño de la web ha ido según la implicación del comité organizativo. Los años 2005, 2010 y 2013 el congreso se celebró dentro del Congreso Español de Informática (CEDI) y la web tuvo que adoptar el diseño visual propuesto por esta organización. A partir del año 2018 la web del congreso se realizó siguiendo una misma plantilla de WordPress (Zerif Lite) pero tenía algunos problemas de accesibilidad relacionados directamente con la plantilla y el contenido (documento PDF del articulo).

El planteamiento de la nueva web del congreso Interacción 2023 se ha realizado considerado algunas premisas. Estas son:

  • Inspiración en la estética de la web del congreso interacción celebrado en Lleida 2004 y tener en cuenta el color de la Universidad de Lleida (Diseño de la interfaz).
  • Posibilidad de que el usuario pueda personalizar la interfaz (incluir la opción de modo oscuro/claro – Dark Mode)
  • Adaptación del contenido según dispositivo (Diseño responsive)
  • Desarrollo con un sistema de gestión de contenidos (CMS) para poder permitir crear contenido a cualquier miembro del comité del congreso.
  • Ofrecer la información de forma empática y adaptada al modelo mental y a las necesidades de los asistentes al congreso.
  • Crear un sitio web con características de usabilidad y accesibilidad para disponer de una buena eXperiencia de Usuario Accesible, para que todos los usuarios se beneficien.
  • Disponer de retroalimentación del usuario en la propia web para analizar la utilidad de la información mostrada en la web.
  • Posibilidad de contactar entre miembros asistentes del congreso para crear una red de expertos en IPO, a través de la creación de un grupo Linkedin.
  • Disponer de una interfaz que identifique anualmente el congreso Interacción

Para lograr llevar a cabo estos objetivos, se realizaron diferentes iteraciones en la metodología MPIu+aX para avanzar de forma sistemática en la creación del sistema web. Cada iteración o sprint del proyecto se realizaba con una temporalidad de 1 semana, y los resultados significativos y avances se mostraban en la reunión quincenal del comité del congreso.

3.2. Técnicas seguidas en cada fase del desarrollo del proyecto

A continuación, se indica como se han abordado las distintas técnicas en las fases de desarrollo de la metodología MPIu+aX para desarrollar el proyecto del sitio web del congreso Interacción 2023.

En esta fase se han trabajado estas técnicas

análisis etnográfico

Journey customer map

Journey customer map, define la experiencia del cliente en el uso de un producto o servicio.

Más información

Desarrollado para Interacción2023

Se presenta el esquema del Journey customer map trabajado para la web del congreso

análisis etnográfico

Mapa de empatía

Mapa de empatía, identifica lo que el usuario hace, piensa, siente, dice, escucha, etc. en una situación determinada. Luego, se han de determinar sus necesidades y cómo se siente a lo largo de la experiencia. Es importante considerar a las barreras y fuentes de molestia.

Más información

Desarrollado para Interacción2023

Se presenta el esquema del Mapa de empatía trabajado para la web del congreso

Implicados (Stakeholders)

Mapa de Actores

Mapa de actores, refleja de forma gráfica las conexiones entre los distintos actores sociales que componen un servicio.

Más información

Desarrollado para Interacción2023

Se presenta el esquema del Mapa de actores trabajado para la web del congreso

Clasificar los Usuarios

Personas

Personas, son personajes ficticios creados en función de su investigación para representar los diferentes tipos de usuarios que podrían usar el servicio, producto, sitio o marca de manera similar. La creación de personas ayuda al diseñador a comprender las necesidades, experiencias, comportamientos y objetivos de los usuarios.

Más información

Desarrollado para Interacción2023

Se presentan las Personas consideradas para la web del congreso

Congresista JunioR

MARíA IBAÑEZ

Escenario: Maria tiene 36 años, es estudiante de doctorado de la Universidad Juan Carlos.

Objetivo: Esta interesada en publicar su investigación en congresos de IPO para que se conozca su trabajo.

Discapacidad: Maria no tienen ningún tipo de discapacidad.

Congresista Senior

MARIO IBAÑEZ

Escenario: Mario tiene 56 años, es profesor lector de la Universidad de Sevilla

Objetivo: Esta interesado en participar en congresos que tengan postprocedings con un alto índice de impacto para mejorar su catetoría laboral en su universidad.

Discapacidad: Mario tiene baja visión

En esta fase se han trabajado estas técnicas

Modelos de navegación

arquitectura de navegación

Arquitectura de la información, presenta una organización del contenido ajustado al modelo mental del usuario

Más información

Desarrollado para Interacción2023

Se presenta el esquema de la Arquitectura de la información trabajada para la web del congreso.

Se analizaron los datos provenientes de los menús, colores y tipo de desarrollo de los diversos sitios web del congreso Interacción en todas sus ediciones. Se organizó la información según catetorías generales.

La tabla del apartado de Benchmarking muestra un resumen.

Diseño de la actividad

Mapa de Interacción de usuarios

El mapa de interacción, ayuda a definir lo que el usuario puede hacer en el sistema.

Más información

Desarrollado para Interacción2023

Se presenta el esquema del Mapa de interacción trabajado para la web del congreso

Diseño de la interfaz

Sistema de diseño

Un sistema de diseño, es un conjunto robusto, consistente, y centralizado de elementos jerarquizados y reutilizables, que permiten a los equipos de diseño UX, y desarrollo, trabajar de una manera más rápida y eficaz

Más información

Desarrollado para Interacción2023

Se presenta el esquema del Sistema de diseño trabajado para la web del congreso

Falta incluir

Diseño de la interfaz

Benchmarking

Benchmarking, para conocer las características de los competidores de nuestro producto y/o para saber cómo otros productos –no necesariamente competidores– resuelven determinados problemas.

Más información

Desarrollado para Interacción2023

Se presentan una tabla con la información analizada de congresos anteriores.

Edición y SedeCaracterísticasOrganización de páginas
2000 – Granada, España
(sin presencia online)
2001 – Salamanca, España
(sin presencia online)
2002 – Leganés, España
(sin presencia online)
2003 – Vigo , España
(sin visualización en web archive)
2004 – Lleida, España(web archive)Menú izquierda
Diseño: rojo y negro
Sistema desarrollo: HTML – CSS
Presentación –
Sede (Lleida – Universitat de Lleida – Como llegar)
Organización (Comite Honor – Comite Programa – Comite Organización – Patrocinadores – Colaboradores)
Programa (Congreso – Tutoriales – Conferenciantes – Seminario Doctorado – Día de la industria) Fechas Importantes
Ponencias (Normas de Participación – Plantillas – Fechas limite – Instrucciones envio – Tipo Participación – Gestión ponencias)
Inscripción
Alojamiento (hoteles)
Enlaces
2005 – Granada, EspañaMenu: sin menu
Diseño: Cedi
Sistema desarrollo: HTML – CSS
2006 – Puertollano, EspañaMenú izquierda
Diseño: rojo y negro
Sistema desarrollo: HTML – CSS
Inicio
linea roja
Presentación
linea roja
Organización
Comité de Organización
Sede
Patrocinadores
Colaboradores
Alojamiento
linea roja
Programa
Temática
Estructura
Comité científico
Tipos de participación
Conferenciantes plenarios
Programa del congreso
Actas
linea roja
Calendario
linea roja
Contribuciones
Normas
Plantillas
Instrucciones de envío
Gestor de contribuciones
linea roja
Inscripción
linea roja
Enlaces
2007 – Zaragoza, España (sin presencia online)
2008 – Albacete, España (sin presencia online)
2009 – Barcelona, España y Armenia, ColombiaPresentación  – Organización  – Calendario –  Contribuciones  – Inscripción –  Sede  – Programa – Expositores  – Blog
2010 – Valencia, EspañaMenu: sin menu
Diseño: Cedi
Sistema desarrollo: HTML – CSS
2011 – Lisboa, Portugal
2012 – Elche, España y México, MéxicoMenú superiorELCHE
Presentación – Temas interés – Calendario – Contribuciones – Organización – Inscripción – Sede – Programa – Eventos Sociales – Blog
 
MÉXICO
Inicio – Programa – Conferencias – Concurso estudiantes – Noticias – Inscripción – Comité- Organización – Sede – Hotel
2013 – Madrid, EspañaMenú superior
Diseño congreso CEDI
Home – Programa-  Organizadores – Inscripción y Alojamiento – Sedes – Patrocinadores y Colaboradores – Prensa
2014 – Puerto de la Cruz. Tenerife, EspañaMenú superior
Diseño: colores rojo y blanco
Enlace a redes sociales (twitter, facebook, linkedin, google+)
https://twitter.com/Interaccion_ull
Home – About – Topics – Committees – Dates – Submission – Registration – Contact – Special Tracks
2015 – Vilanova i la Geltrú, EspañaMenú superior.Home – About- Topics – Committees – Dates – Submission – Registration – Program – Sponsor – Contact
2016 – Salamanca, EspañaMenú superior en dos filasWELCOME – DATES – COMMITTEES – SUBMISSIONS – TOPICS – WORKSHOP – SPECIAL TRACK  – CONTEST – KEYNOTE – REGISTRATION – VENUE – SCHEDULE – PROGRAM – ORGANIZERS – CONTACT
2017 – Cancún, MéxicoWeb sin hoja de estiloDate – Topics – Speakers – Contest – Submissions – Registration – Collaborating Universities – Organizing Committee – Partners – Venue – Contact
2018 – Palma de Mallorca, EspañaMenú superior desplegable
Diseño: Zerif Lite desarrollado por ThemeIsle
Sistema desarrollo: WordPress
About (The conference – Dates – Topics – Committee – Organizers)
Authors (Contributions – IV EnGendering Technologies Workshop –  Special Tracks (Human – Agent Social Interaction: Design principles and Practices – Advances and Challenges in HCI in Agriculture) – CHIJOTE’18 – II JOrnada de Trabajo sobre Enseñanza de CHI)
Attendees (Final Program – Registration – Keynotes – Venue/Travel)
Concurso
2019 – San Sebastián, EspañaMenú superior desplegable
Diseño: Zerif Lite desarrollado por ThemeIsle
Sistema desarrollo: WordPress
HOME – PROGRAM KEYNOTE SPEAKERS – PROGRAM at a glance
june 26, 2019 Interacción 2019
june 27, 2019 Interacción 2019
June 28 2019 Interacción 2019
WS Engendering Technologies 2019
Day of HCI in the Industry
Workshop CHIjote’19
Tutorial 1: Anna Ripoll
AIPO celebrates its 20th anniversary
CONFERENCE
Guidelines for presentations
About events and meals
VENUE
Cultural, recreational and sports activities
Accepted Long Papers
Accepted Short Papers
Photos of INTERACCION’2019
CALLS
SUBMISSIONS
Full and short papers
Posters
Advances and Challenges in HCI in the Digitalized Industry
Workshop Engendering Technologies 2019
Doctoral Consortium
Demonstrations and installations
Research Groups Presentations
Workshop/Tutorial Proposals
5th Contest for Degree and Master Thesis on HCI
COMMITTEES
REGISTRATION
2020 – No celebrado por el Covid-19
2021 – Málaga, EspañaMenú superior desplegable
Diseño: Zerif Lite desarrollado por ThemeIsle
Sistema desarrollo: WordPress
Conferencia (Acerca de – Fechas – Temas – Comité)
Contribuciones (Artículos de congreso – Sesiones especiales (Sesión especial sobre Ética e interacción humano computador – Sesión especial EnGendering Technologies (EGT)) – Otra Contribuciones – Coloquio doctoral – Presentación de grupos – Artículos Relevantes ya Publicados – 6º Concurso de TFGs y TFMs convocado por AIPO)
Registro
Programa
Actas
2022 – Teruel, EspañaMenú superior desplegable
Diseño: Zerif Lite desarrollado por ThemeIsle
Sistema desarrollo: WordPress
Inicio
Contribuciones (Llamada a contribuciones – Fechas importantes – Concurso de TFM/TFG
Comités
Congreso (como llegar – alojamiento – registro – programa científico – conferenciantes invitados – sesión empresarial e IPO – programa social – ACTAS)

En esta fase se han trabajado estas técnicas

Bocetos

Esbozo en papel

Esbozo en papel, permite organizar las primeras ideas del sistema.

Más información

Desarrollado para Interacción2023

Falta incluir

wireframes

Prototipo de baja y alta fidelidad

Prototipo de baja y alta fidelidad, ayuda a definir las ideas en un entorno próximo al sistema.

Más información

Desarrollado para Interacción2023

Se presenta un esbozo realizado en Figma (primera iteración)

Prototipo software

Creación de paginas

Creación de paginas, se realiza una creación de páginas directas sin publicar en la plataforma de desarrollo.

Más información

Desarrollado para Interacción2023

Se realizó la implementación directamente en el Gestor de Contenido.

Consultar el resultado del sitio web del congreso Interacción2023.

En esta fase se han trabajado estas técnicas

Indagación

Encuesta

Encuesta, .

Más información

Desarrollado para Interacción2023

Encuesta masiva a usuarios objetivos del sistema (socios de la Asociación Interacción Persona Ordenador) con un formulario online.

Primera iteración del prototipo

Encuesta para obtener las necesidades que puede tener un congresista antes, durante y después de la celebración de un congreso. (8 respuestas)

Ver respuestas

Segunda iteración del prototipo

Encuesta para obtener las necesidades que puede tener un congresista al asistir a un congreso Interacción. (13 respuestas).

Ver respuestas


Indagación

Entrevista

Entrevista, .

Más información

Desarrollado para Interacción2023

Entrevista informal para obtener información de las necesidades reales del usuario.


Inspección

Evaluación Heurística

Evaluación Heurística, uso del sistema RetLab para realizar la evaluación de una nueva propuesta de Evaluación Heurística.

Más información

Desarrollado para Interacción2023

Falta incluir

Inspección

Evaluación pautas WCAG

Evaluación pautas WCAG, uso del sistema RetLab para realizar la evaluación de las pautas de evaluación de accesibilidad del contenido web.

Más información

Desarrollado para Interacción2023

Falta incluir

Test

Técnicas de Simulación

Técnicas de Simulación, un sistema se configura con herramientas asistenciales u simulaciones para conseguir consultar el sistema tal y como lo haría un usuario con discapacidad..

Herramientas de simulación

Desarrollado para Interacción2023

Un evaluador experto realizó una simulación de discapacidad utilizando plugins como Funkify o Web Disability Simulator. Además se utilizaron herramientas asistenciales como lector de voz, herramientas de zoom o navegado de voz.

Test

Test guerrilla

Test guerrilla, donde se le indica al usuario tareas y se espera que muestre sus opiniones del sistema (Thinking Aloud).

Mas información

Desarrollado para Interacción2023

Se realizó un test guerrilla con usuarios del sistema. Se realizó diversos test en diferentes iteraciones del sistema

Primera iteración

Test deusuario (interacción2023) Marzo (18 respuestas). Se testearon diversas tareas importantes del sitio web:

  • TAREA 1: Regístrate en el congreso
  • TAREA 2: Busca información sobre como puedes participar en el congreso (contribuciones)
  • TAREA 3: Busca información sobre tu viaje al congreso

Ver los resultados del test.

Segunda iteración

Test de usuario (interacción2023) Abril (19 respuestas). Se testearon diversas tareas importantes del sitio web:

  • TAREA1: Busca el precio de tarifa estudiante para registrarte en el congreso
  • TAREA 2. Busca las bases  del concurso de Trabajo Final de Carrera o Trabajo Final de Máster (TFC/TFM)
  • TAREA 3: Busca información sobre tu viaje al congreso
  • TAREA 4: Busca el programa del congreso

Ver los resultados del test.

Test

User test asíncrono

User Test Asíncrono, se lanza un formulario al usuario con los cuestionarios pre-test, tareas, post-tarea y post-test para que el usuario pueda realizar en cualquier momento.

Puede hacerse una grabación del test y se enviarla al evaluador.

MÁS INFORMACIÓN

Desarrollado para Interacción2023

También se lanzó un test a miembros del comité

Test de usuario a comité (interacción2023) Abril (5 respuestas). Se testearon diversas tareas importantes del sitio web:

  • TAREA 1: Busca el precio de tarifa de socios AIPO para registrarte en el congreso
  • TAREA 2. Busca la plantilla del articulo corto 
  • TAREA 3: Busca información sobre tu viaje al congreso

Ver los resultados del test.

Test

User test Remoto

User Test Remoto, se realiza un test de usuario con una plataforma de videoconferencia y se recogen los datos con un formulario online.

MÁS INFORMACIÓN

Desarrollado para Interacción2023

También se lanzó un test a un usuario con baja visión.

Realizar evaluaciones con usuarios con discapacidad (visual, auditiva, motriz, cognitiva), enriquece la evaluación y aporta un gran valor al sistema, pues en la siguiente iteración se puede mejorar el sistema con las aportaciones de los usuarios.

Test de usuario a (interacción2023) Abril (es la ultima respuesta del formulario). Se testearon diversas tareas importantes del sitio web:

  • TAREA 1: Busca el precio de tarifa de socios AIPO para registrarte en el congreso
  • TAREA 2. Busca la plantilla del articulo corto 
  • TAREA 3: Busca información sobre tu viaje al congreso

Ver los resultados del test. (es la ultima respuesta del formulario)

En esta fase se han trabajado estas técnicas

Implementación

Codificación

Codificación. Uso de plantillas y elementos web (según el framework elegido) para facilitar el desarrollo  Uso del editor web para crear contenido 

Más información

Desarrollado para Interacción2023

Se utiliza WordPress, como Content Manager System (CMS) para el desarrollo de la web del congreso

CMS más utilizados actualmente en la web (un 60% de sitios web se han desarrollado con WordPress) y para que cualquier miembro del comité pudiera crear o actualizar contenido. 

Implementación

Accesibilidad

Accesibilidad en la codificación. Selección de plantillas y elementos accesibles que sigan las pautas WCAG 

.

Más información

Desarrollado para Interacción2023

Se utilizó la plantilla GeneratePress-Pro con plugins (GenerateBlocks , Google Language Translator , Darklup – WP Dark Mode ) que mejoraban el desarrollo backend del sistema y también ofrecían características y funcionalidades que permitían mejorar la experiencia de usuario en el diseño frontend.

4. Descripción de la Metodología MPIu+aX

A continuación, se explican las aportaciones realizadas a la metodología MPIu+a para pasar a denominarse metodología MPIu+aX.

Esquema de la propuesta MPIu+aX, aportando a la metodología MPIu+a, técnicas de Design Sprint, de Design Thiking, de diseño de Interfaces de Usuario y técnicas de UX y AUX.
Figura1. Esquema de la propuesta MPIu+aX.

La metodología MPIu+a se divide en distintas fases: Análisis de requisitos, Diseño, Implementación, Lanzamiento, Prototipado y Evaluación.

En cada fase de la medotodogía MPIu+a se han incluido técnicas relacionadas para mejorar la empatía y la experiencia de usuario con el fin de conseguir un producto/sistema con una buena experiencia de uso y acceso a todos los usuarios. A continuación se muestran las nuevas técnicas aportadas.

4.1. Fases de la metodología

El análisis de requisitos, incluye conocer mediante técnicas de investigación UX las necesidades y preferencias del usuario objeto del sistema.

Esta fase se compone de las tres primeras etapas del Design Thingin:

  • 1. Empatizar con el usuario investigando sus necesidades;
  • 2. Definir las necesidades y problemas;
  • 3. Idear soluciones que ayuden a resolver el problema.

Todo este análisis ayuda al equipo de desarrollo a comprender profundamente las necesidades del usuario respecto al sistema y descubrir los elementos importantes que pueden empatizar con lo que realmente necesita al interactuar con el sistema.

La Tabla 1 muestra distintas técnicas de las fases de la metodología MPIu+a  junto a técnicas de Design Thinking que se consideran importantes en cada caso

Técnicas de MPIu+a (original)Ampliación de técnicas para Mpiu+aX
Análisis etnográficoJourney customer map, define la experiencia del cliente en el uso de un producto o servicio.
Mapa de empatía, identifica lo que el usuario hace, piensa, siente, dice, escucha, etc. en una situación determinada. Luego, se han de determinar sus necesidades y cómo se siente a lo largo de la experiencia. Es importante considerar a las barreras y fuentes de molestia.
Implicados (Stakeholders)Mapa de actores, refleja de forma gráfica las conexiones entre los distintos actores sociales que componen un servicio.
Clasificar los UsuariosPersonas, son personajes ficticios creados en función de su investigación para representar los diferentes tipos de usuarios que podrían usar el servicio, producto, sitio o marca de manera similar. La creación de personas ayuda al diseñador a comprender las necesidades, experiencias, comportamientos y objetivos de los usuarios.
Tabla 1. Lista de técnicas de MPIu+a original de la fase de análisis de requisitos, junto a las técnicas consideradas para la propuesta de la metodología MPIu+aX..
 

En el análisis etnográfico se han incluido técnicas provenientes del Design Thinking para conseguir una profunda comprensión de las necesidades de los usuarios implicados en la solución a desarrollar, y también de su entorno.

En el análisis de implicados y clasificación de usuarios, las técnicas utilizadas son similares en la metodología MPIu+a pero permiten obtener otro enfoque. Por ejemplo, la técnica Persona añade más capas de información del usuario respecto a la técnica de clasificación de usuarios

La fase de diseño supone analizar como presentar la información en la interfaz para que el usuario pueda navegar e interactuar por ella: definir una adecuada arquitectura de la información presenta una organización del contenido más ajustado al modelo mental del usuario; crear un mapa de interacción, ayuda a definir lo que el usuario puede hacer en el sistema; concebir un sistema de diseño con principios, patrones y reglas para el diseño de la interfaz de usuario, facilita el trabajo de los desarrolladores.

La Tabla 2 muestra las técnicas incluidas en el modelo MPIu+aX. Se han incluido técnicas provenientes de la metodología Atomic Design y del Design Thinking para agilizar el diseño y realizar entregas parciales de resultados tempranos y así evaluar en las distintas iteraciones avances significativos del proyecto

Técnicas de MPIu+a (original)Ampliación de técnicas para Mpiu+aX
Modelos de navegaciónDefinición de la arquitectura de navegación.
Diseño de la actividad.Mapa de interacción de usuarios, refleja las distintas tareas que todos los usuarios finales de una posible solución realizan a lo largo de las distintas etapas de uso, definiendo las interacciones entre ellos.
Diseño de la interfazSistema de diseño, es un conjunto robusto, consistente, y centralizado de elementos jerarquizados y reutilizables, que permiten a los equipos de diseño UX, y desarrollo, trabajar de una manera más rápida y eficaz.
Benchmarking, para conocer las características de los competidores de nuestro producto y/o para saber cómo otros productos –no necesariamente competidores– resuelven determinados problemas.
Tabla 2. Lista de técnicas de MPIu+a original de la fase de diseño, junto a las técnicas consideradas para la propuesta de la metodología MPIu+aX.

Las técnicas de definición de la arquitectura de la información no aportan nada nuevo respecto a la metodología MPIu+a, pero sí el mapa de interacción del usuario que proviene de la metodología del Design Thinking. Respecto al sistema de diseño, el uso de la metodología de trabajo Atomic Design facilita el desarrollo posterior de la interfaz y evita errores futuros de diseño.

En la fase de prototipado, no se han incluido mejoras significativas en la metodología MPIu+a porque ya dispone de técnicas suficientes. Sin embargo, se han añadido nuevas herramientas que permiten agilizar la producción de prototipos.

Los esbozos en papel, ayudan a clarificar y despejar ideas respecto a las necesidades del usuario y los objetivos del sistema, analizadas en las primeras iteraciones de la metodología. Disponer de un prototipo de baja fidelidad, ayuda a evaluaciones iniciales del sistema. Disponer de un prototipo de alta fidelidad o wireframe ayuda a evaluar de forma temprana funcionalidades o diseños con el usuario, y sobretodo obtener retroalimentación para mejorar el diseño una vez se pase a prototipo software. Se propone el uso de herramientas colaborativas de prototipado digital para crear los distintos tipos. La metodología Design Thinking, ya consideran estas técnicas .

La Tabla 3 muestra las técnicas incluidas en el modelo MPIu+aX.

Técnicas de MPIu+a (original)Ampliación de técnicas para Mpiu+aX
BocetosEsbozo en papel para organizar las primeras ideas del sistema
Prototipo de baja y alta fidelidad (wireframes)Uso de aplicaciones de prototipado colaborativo. Por ejemplo: marvel, Figma o Adobe XD.
Prototipo softwareCreación de paginas en la plataforma de implementación (sin publicar)
Tabla 3. Lista de técnicas de MPIu+a original de la fase de prototipado, junto a las técnicas consideradas para la propuesta de la metodología MPIu+aX.

La fase de evaluación de la metodología MPIu+a ya dispone de una gran cantidad de técnicas que permiten inspeccionar, indagar y testear el sistema, por ello el aporte se ha limitado a indicar herramientas digitales que facilitar la evaluación. La Tabla 4 muestra las técnicas incluidas en el modelo MPIu+aX y el listado de otras técnicas con sus correspondientes herramientas. La metodología Design Thinking, ya consideran estas técnicas.

Técnicas de MPIu+a (original)Ampliación de técnicas para Mpiu+aX
Inspección:
Evaluación Heurística
Recorrido cognitivo
Inspección de estándares
Evaluación heurística y de pautas WCAG. uso del sistema RetLab para realizar la evaluación de una nueva propuesta de Evaluación heurística y evaluación WCAG a partir de los criterios del informe IRA.
Indagación:
Observación de campo
Focus Group
Entrevistas
Cuestionarios
Análisis de logs
Encuesta masiva a usuarios objetivos del sistema a partir de formularios online.
Entrevista informal guerrilla para obtener información de las necesidades reales del usuario.
Test:
Medida de las prestaciones
Thinking aloud

Interacción constructiva
Ordenación de tarjetas (card sorting).
Técnicas de Simulación, en las que se configura un sistema con herramientas asistenciales u simulaciones para conseguir consultar el sistema tal y como lo haría un usuario con discapacidad.
Test guerrilla,  
donde se le indica al usuario tareas y se espera que muestre sus opiniones del sistema (Thinking Aloud).
User test asíncrono,
se lanza un formulario al usuario con los cuestionarios pre-test, tareas, post-tarea y post-test para que el usuario pueda realizar en cualquier momento. Complementariamente, el usuario hace una grabación del test y la envía al evaluador.
User test remoto, se realiza un test de usuario con una plataforma de videoconferencia y se recogen los datos con un formulario online.
Tabla 4. Lista de técnicas de MPIu+a original de la fase de evaluación, junto a las técnicas consideradas para la propuesta de la metodología MPIu+aX.

Respecto a las técnicas de inspección, se ha considerado el uso de una nueva propuesta de evaluación heurística en la que se han mezclado Principios heurísticos de usabilidad para el diseño de interfaces de usuario de J. Nielsen y los Principios de Diseño de Interfaces de B. Tognazzini.

En el caso de la accesibilidad, la evaluación de pautas WCAG, se han validado siguiendo el Informe de Revisión de la Accesibilidad, creado por el Observatorio de Accesibilidad.

Para realizar estas las evaluaciones por expertos, se utiliza RetLab, una herramienta online que permite realizar evaluaciones heurísticas entre varios usuarios y muestra gráficas sobre el resultado del porcentaje de usabilidad del sistema.

Respecto a las técnicas de indagación, se incluyen las mismas técnicas de la metodologia MPIu+a, pero llevadas a cabo con formularios online como Google Forms u otras plataformas.

En cuanto a las técnicas de test, se propone llevar a cabo test de usuarios de guerrilla, porque permite recopilar comentarios de los usuarios sobre un diseño o prototipo. Esta técnica es más efectiva que un test de usuarios, porque es posible probar prototipos intermedios, sin todas sus funcionalidades y hacer evaluaciones sobre la web publicada recabando datos para mejorar en la siguiente iteración. Se recopilan los comentarios de los usuarios (Thinking aloud, la percepción de facilidad o dificultad al realizar la tarea, pero sobretodo se recogen el impacto emocional que le causa al usuario la ejecución de la tarea, mediante un framework de emociones.

Además, el uso de formularios on-line para recoger estos datos permiten que el propio usuario (o el facilitador) deje constancia de forma rápida de estos datos mientras se lleva a cabo el test.

Para evaluar la eXperiencia de Usuario Accesible, se propone llevar a cabo test de usuario a dos niveles: primero evaluaciones tempranas, en fase de diseño y prototipado de los aspectos que se puedan evaluar a través de simulaciones de discapacidades. Sin embargo, este tipo de evaluaciones permiten obtener resultados parciales al disponer solo del nivel de la capa de diseño (contrastes, tamaño de elementos, y poco más) y no se puede evaluar el sistema con una herramienta asistencial, puesto que todavía no se ha desarrollado.

Un nivel más profundo de evaluación, es cuando se realiza un prototipo software porque la evaluación puede realizarse con herramientas asistenciales. En este punto, es posible que un evaluador experto realice una simulación de discapacidad utilizando algún plugin como Funkify o Web Disability Simulator o lo haga a través del uso real de herramientas asistenciales como lector de voz, herramientas de zoom o navegado de voz. Y sobre todo, realizar evaluaciones con usuarios con discapacidad (visual, auditiva, motriz, cognitiva), enriquece la evaluación y aporta un gran valor al sistema, pues en la siguiente iteración se puede mejorar el sistema con las aportaciones de los usuarios.

La fase de implementación consiste en codificar el sistema y desarrollarlo con una plataforma frameworks (front-end o back-end).

La implementación puede llevarse a cabo en distintas fases que se van completando a lo largo del tiempo: publicación inicial, con contenido mínimo y alguna funcionalidad; publicación de un sistema intermedio, con más contenido y alguna funcionalidad más desarrollada; publicación del sistema final, con todas las funcionalidades y contenidos implementados. En esta fase es imprescindible haber decidido la plataforma de desarrollo, que puede ser con un framework front-ent o framework back-end, según la complejidad que tenga el sistema a desarrollar. 

La metodología MPIu+a no profundiza demasiado en esta fase, y las técnicas utilizadas en la metodología MPIu+aX se enumeran indicando buenas prácticas en esta fase de implementación

Técnicas de MPIu+a (original)Ampliación de técnicas para Mpiu+aX
CodificaciónUso de plantillas y elementos web (según el framework elegido) para facilitar el desarrollo
Uso del editor web para crear contenido
AccesibilidadSelección de plantillas y elementos accesibles que sigan las pautas WCAG
Tabla 5. Lista de técnicas de MPIu+a original de la fase de implementación, junto a las técnicas consideradas para la propuesta de la metodología MPIu+aX.
Logo UDC

¿Cómo ofrecerte una mejor experiencia?

Si tiene alguna sugerencia para mejorar la experiencia de usuario en la web, enviar un correo a: congreso.interaccion2024@usc.gal

Enviar un mensaje

Escribe un mensaje en el formulario indicando tu nombre, correo y el texto del mensaje.

Please activate your license to enable all features and receive new updates.

Please activate your license to enable all features and receive new updates.

Ir al contenido