Práctica: Modelo de proceso de Diseño Centrado en el Usuario: Técnicas y métodos

# Práctica: Modelo de proceso de Diseño Centrado en el Usuario: Técnicas y métodos ***Autor: Paul Hodgetts - 738701.*** :::info **Ejercicio 1** - Buscar una página web interactiva (o una aplicación para móvil) para un grupo específico de usuarios: niños de educación infantil, niños de primaria, personas con algún tipo de discapacidad, personas mayores, hombres o mujeres con un perfil concreto, etc. ::: > **Aplicación de horarios de EINA** > (http://intraneteina.unizar.es/intraneteina/index.php?r=calendarioExt/index_oficial) :::info - De manera “informal” verifica si es responsive, usable, accesible… ::: > Es responsive en parte de la navegación, pero la funcionalidad principal, que es visualizar la tabla de horario, queda fuera de pantalla en dispositivos móviles. Es decir, no se reajusta correctamente al ancho. > > ¿Es usable? Sólo desde versión escritorio y teniendo en cuenta que algunas funcionalidades son contra-intuitivas. > > Lo que se puede apremiar en parte son ciertas cuestiones de accesibilidad como las leyendas y colores. Aun así, en ese aspecto hay problemas de constraste en algunos areas y algunos botones parecen marcados cuando no lo son. :::info **Ejercicio 2** - Define los principales objetivos/requisitos de ese sistema interactivo. ::: > Esta aplicación trata de **facilitar los horarios** de las distintas asignaturas ofertadas en los estudios de la EINA. También, facilita la creación de calendarios personales, pero esta funcionalidad se tratará de forma marginal ya que se encuentra en fase *beta*. :::info - Utiliza la técnica de “personas” para definir los usuarios potenciales (se puede usar la plantilla y directrices de https://www.romanpichler.com/blog/10-tips-agile-personas/) ::: > Los perfiles se categorizan con facilidad. Se trata de la comunidad universitaria, destacando a **alumnos** y **profesorado**. > > _El alumno Juan_. Tiene 18-24 años, está acostumbrado a los dispositivos móviles. Tiene facilidad para entenderse con las tecnologías actuales más frecuentes. Puede que posea ciertos conociemientos técnicos, ya que quiere convertirse en un ingeniero. Como todo alumno en la EINA, se confunde frecuentemente con la partición de horarios en semanas A-B y por ello consulta habitualmente su horario. Tiene asignaturas de otros años, y por tanto necesita un calendario personalizado para aclararse, y ver qué horas pueden solaparse. > > _El profesor Pepe_. Tiene 30-60 años, da clase con ciertos aspectos técnicos en ingeniería. Se entiende bien con su portátil, y seguramente también con el móvil. Éste conoce su horario al programar la materia. Puede querer consultar los horarios de sus alumnos para cuestiones como clases extraordinarias, reordenación de horas, días mas/menos cargados para el alumando, etc. :::info **Ejercicio 3** - Estudia el artículo “Top 10 Information Architecture (IA) Mistakes” http://www.nngroup.com/articles/top-10-ia-mistakes/ y verifica, si en la app o sitio web se cometen errores relacionados con la arquitectura de la información. ::: > Parcialmente no integra "Search and Structure Not Integrated". La navegación no es complicada pero no dispone de barra de búsqueda. > > Debatible que incumpla "Subsites/Microsites Poorly Integrated with Main Site". No comparte diseño ni con la web de unizar.es, ni con la de eina.unizar.es, que son los portales al público por los que se puede tratar acceder a la web de horarios. > > En cuanto a "Inconsistent Navigation", la web no tiene botón para volver a la pantalla principal (mas allá de lo que ofrece el navegador). No es posible navegar directamente al calendario personal, hay que pasar por la pantalla de un horario arbitrario. :::info **Ejercicio 4** - Estudia el artículo “Top 10 Application-Design Mistakes” https://www.nngroup.com/articles/top-10-application-design-mistakes/?lm=top10-ia-mistakes&pt=article y verifica, si en la app o sitio web se cometen alguno de los errores comentados. Relaciona esta información con la del ejercicio anterior. ::: > Es difícil hablar sobre "Poor Feedback" ya que se trata de un visor de horarios. En cuanto a lo que respecta, notifica al usuario de los posibles errores que puedan suceder. > > Tiene algo de "Inconsistency". Como ya se ha mencionado anteriormente, el acceso al calendario personalizado no es intuitivo, y también la selección de materias transversales de primavera (que aparecen en el cuatrimestre Otoño, grupo Primavera, y el cuatrimestre Primavera no tiene grupos). > > "Hard-to-Acquire Targets". La web emplea rectangulos grises para parte de la interacción (desplegables). Para alguien nuevo a la aplicación, puede resultarle no intuitivo. Se puede solucionar añadiendo un icono de desplegable. :::info **Ejercicio 5** - Busca en internet si es posible aplicar reglas de diseño específicas para el grupo de usuarios objetivo. ::: > Existe documentación sobre los espectros de edad de ambos tipos de usuarios definidos. No se ha encontrado nada específico. :::info - Documenta los resultados ::: > En este caso, al tratarse de una web con un propósito muy concreto enfocado a la visualización de información, queda investigar estándares, recomendaciones o guías de estilo para mostrar diversas tablas de horarios. > > Se ha estudiado la guía de estilo abierta de Google llamada Material Design. > Aquí hay algunos articulos relevantes: > - Navegación https://material.io/design/navigation/understanding-navigation.html > - Grid layout https://material.io/design/layout/responsive-layout-grid.html > - Data tables https://material.io/components/data-tables/ > :::info **Ejercicio 6** - En base a los resultados obtenidos en los análisis previos y las reglas de diseño para aplicaciones usables, plantea un diseño alternativo (con el método de prototipado que consideres más adecuado). ::: >![](https://i.imgur.com/W4hgjbv.png) > > [Ver en tamaño completo](https://i.imgur.com/W4hgjbv.png) :::info **Ejercicio 7** - Intercambia las “personas” que has modelado junto con tu app o sitio web con otro grupo de prácticas para que verifiquen que el diseño se adecua a las “personas” que habían modelado. ::: > ...