Práctica Diseño de interfaces

Práctica: Evalúa tu prototipo

María Margarita González del Hierro

Diseño de interfacesSemestre 1 - Curso 2018 · 2019Grado de Diseño y Creación DigitalesUOC

.................5

..........................................1

.......................................................11

...........................................16

Nueva versión del prototipo gráfico

Índice

Evaluación Heurística

01

02

Guía de estilo

03

Conclusiones finales

04

1

01 Evaluaciónheurística

Los diez principios heurísticos de Jacob NielsenEn 1994, Jacob Nielsen propuso un sistema con el que se puede evaluar la usabilidad de los prototipos para cubrir la mayoría de los aspectos que desencadenarán en una experiencia de uso gratificante para los usuarios de la aplicación, basado en 10 principios:Para testar estos diez principios de la forma más objetiva posible, asignaré los siguientes valores a cada elemento: A: Cumple con el principio de forma clara. B: Cumple parcialmente el principio o hay áreas de mejora evidentes. C: La experiencia es negativa en ese aspecto.

Evaluación heurística (I)

2

01

Preparación de la evaluación heurísticaA fin de analizar y evaluar la interfaz que he venido desarrollando para la aplicación móvil del festival de cine más pequeño del mundo, he investigado acerca de diferentes tests de evaluación heurística que pudieran servir para dicho objetivo. He considerado numerosos tests y guías disponibles como las propuestas por Jacob Nielsen, Gerhardt-Powals o Weinshenk y Barker. Finalmente, dado que estoy desarrollando una aplicación móvil y muchas de las opciones encontradas se centran en sitios web, he optado por ceñirme a una matriz en la que se plasmen los diez principios heurísticos propuestos por Jacob Nielsen en 1994.

1 · Visibilidad del estado del sistema

2 · Correspondencia entre el sistema y el mundo real

3 · Control y libertad del usuario

4 · Prevención de errores

5 · Consistencia y estándares

7 · Flexibilidad y eficiencia de uso

8 · Estética y diseño minimalista

6 · Reconocer en lugar de recordar

9 · Ayudar a los usuarios a reconocer, diagnosticar y recuperar errores

10 · Ayuda y documentación

3

1 · Visibilidad del estado del sistema

2 · Correspondencia entre el sistema y el mundo real

3 · Control y libertad del usuario

4 · Prevención de errores

5 · Consistencia y estándares

7 · Flexibilidad y eficiencia de uso

8 · Estética y diseño minimalista

6 · Reconocer en lugar de recordar

9 · Ayudar a los usuarios a reconocer, diagnosticar y recuperar errores

10 · Ayuda y documentación

La aplicación maniene a los usuarios informados sobre el proceso. Por ejemplo, en el proceso de compra de entradas hay una barra de estado en la parte superior que indica en qué etapa se encuentra dentro de la compra.

El lenguaje empleado es acertado y adecuado para el público al que se dirige la aplicación.

La transición entre pantallas es fluida e intuitiva. Los usuarios tienen libertad para controlar las funciones y se pueden interrumpir los flujos, como el proceso de compra o la reproducción de vídeso, de manera voluntaria.

La interfaz es intuitiva y los iconos empleados son los propios del sistema Android, facilitando un uso natural y sencillo.

El sistema es eficaz aunque es poco flexible puesto que es igual para usuarios expertos e inexpertos.

La interfaz presenta un diseño coherente en todas las pantallas. Los recursos empleados son los mínimos necesarios para facilitar la toma de decisiones por parte de los usuarios.

En los puntos sensibles de la aplicación, como es el proceso de compra, hay varios puntos de control y confirmación en los que, además, se permite retroceder a fin de cancelar la acción o rectificar.

Se ayuda a los usuarios a reconocer, diagnosticar y recuperar los errores al permitir la comprobación del progreso en distintos puntos. Además, se permite la modificación de los datos antes de la finalización de la compra.

En toda la aplicación se mantienen las mismas convenciones y modos de actuación.

No existe documentación como tal. Puede plantearse la creación de un botón de ayuda en el que se describan las funcionalidades básicas.

A

A

A

A

A

A

C

A

Evaluación heurística (II)

B

A

01

Evaluación heurística (III)

4

01

Resultados de la evaluación heurísticaMediante inspección heurística he podido comprobar el modo en que la interacción propuesta es efectiva para la consecución de los objetivos. La mayoría de las notas obtenidas son A, es decir, que la aplicación se ajusta a perfectamente 8 de los 10 principios heurísticos propuestos por Nielsen a excepción de una B y una C. A pesar de cumplir con casi todos los principios de Nielsen, el principio de flexibilidad de uso se cumple parcialmente y el principio de ayuda y documentación apenas se tiene en cuenta. Con estos resultados, voy a desarrollar un conjunto de cambios sobre el prototipo gráfico que presenté en la PEC1 a fin de generar una experiencia de uso gratificante para las personas usuarias.

1 · Visibilidad del estado del sistema

2 · Correspondencia entre el sistema y el mundo real

3 · Control y libertad del usuario

4 · Prevención de errores

5 · Consistencia y estándares

7 · Flexibilidad y eficiencia de uso

8 · Estética y diseño minimalista

6 · Reconocer en lugar de recordar

9 · Ayudar a los usuarios a reconocer, diagnosticar y recuperar errores

10 · Ayuda y documentación

5

02 Nueva versión del prototipo gráfico

Página de carga de la aplicación.

Nueva versión del prototipo gráfico (I)

6

02

Tras revisar el prototipo entregado en la PEC1 y considerando las conclusiones de la evaluación heurística, he desarrollado una nueva versión del prototipo gráfico mediante la herramienta Adobe Xd, creando así un prototipo interactivo.

He aplicado mejoras a las pantallas como resultado del proceso iterativo de diseño que he venido desarrollando durante toda la asignatura. Así, hay reconfiguraciones de algunos menús, incluyendo la distribución de los elementos. La estética ha cambiado, adaptándose a la muestra de cine, con nuevos colores y nuevos iconos que otorgan un cáriz más visual e intuitivo. Además, he añadido dos nuevas funcionalidades que he detectado como necesarias tras realizar la evaluación heurística.

Por un lado, he añadido un apartado de personalización en el cual se permite a los usuarios seleccionar y filtrar sus acciones frecuentes, consiguiendo así una mayor flexibilidad y eficiencia a la hora de consumir o generar información.

Por otro lado, en el prototipo inicial, las personas usuarias se encontraban frente a la aplicación sin ningún tipo de ayuda. Con un nuevo botón en la interfaz, se puede acceder a un menú de ayuda donde están documentadas las preguntas frecuentes, información sobre la aplicación y un formulario de contacto.En las siguientes páginas se muestran las diferentes pantallas ordenadas por funcionalidad.

Nueva versión interactiva del prototipo gráfico

7

Página de carga

Inicio

Ajustes

Ayuda

Nueva versión del prototipo gráfico (II)

02

8

A: Programación

A - 1: Información del evento

A - 2: Streaming fullscreen

Nueva versión del prototipo gráfico (III)

02

9

B: Cartelera

B-1: Info película

B-1a: Tráiler

B-1b: Horarios 1

B-1b: Horarios 2

Nueva versión del prototipo gráfico (IV)

02

B2-1: Entradas

B2-2: Butacas

B2-3: Resumen

B2-4: Pago

B-2-5: Confirmación

10

Nueva versión del prototipo gráfico (V)

02

11

03 Guía de estilo

Guía de estilo (I)

Retícula

El diseño ordenado, coherente, práctico y funcional de la aplicación se sustenta sobre una retícula adaptable formada por 16 columnas separadas por medianiles de un píxel a cada lado. Dado que no todas las páginas tienen la misma extensión, hay algunos campos horizontales que consolidan la retícula.

03

12

Ejemplos de aplicación de la retícula

Los colores están basados en el arte del cartel de la muestra de cine de Ascaso. Así, el amarillo, el azul y el índigo son los tonos que deben priman en la aplicación móvil.

Guía de estilo (II)

Colores

03

13

132º

Tomando los tonos básicos, se ha creado un degradado específico resultado de combinarlos en un ángulo de 132º. Se obtiene el degradado oficial de la aplicación, que actúa como fondo.

Guía de estilo (III)

Tipografía

La fuente corporativa es Futura. Una tipografía sans serif geométrica que se caracteriza por su elevada legibilidad, siendo perfecta para una aplicación móvil.Propuesta de aplicación tipográfica:

14

03

• Alineación: izquierda.
• Mancha tipográfica: Se debe asegurar que los bloques de texto, aún con la variedad de peso, cuerpo e interlineado, generan una textura y color equilibrada.
• Tamaño: Se deben aplicar diferentes tamaños de letra para reforzar la jerarquía de información y facilitar la lectura. A la derecha, se muestran los tamaños empleados en la aplicación móvil.

Guía de estilo (IV)

Elementos interactivos

La aplicación dispone de un conjunto de elementos interactivos entre los que destacan botones, botón de radio y campo de texto. Los botones son tanto iconos que conectan con otras áreas de la aplicación como las formas cuadrangulares. Los iconos tienen un comportamiento normal, mientras que los botones cuadrangulares hacen un efecto de resaltado al hover. Los botones que permiten acceder al panel de ayuda y de búsqueda, se sitúan en la parte superior a fin de evitar que sean tapados con la mano al desplazarse sobre el móvil o bien, sean pulsados por error.

15

03

Botones cuadrangulares

Los campos de texto se reducen al mínimo para facilitar la experiencia de usuario y evitar la, a veces tediosa, tarea de introducir datos en el pequeño teclado del móvil. La mayoría de los elementos interactivos son, por tanto, botones. Podemos encontrar campos de texto en lugares donde es inevitable la introducción de datos: el pago de las entradas.

Botones

Campos de texto

Botones iconos

16

04 Conclusiones finales

Conclusiones finales

17

04

A lo largo del semestre me he adentrado en el diseño de interfaces en primera persona. Visto desde fuera, pudiera parecer que en una interfaz lo que prima es la creatividad y la estética, sin embargo, durante el curso he podido constatar que esto no tan simple. En el diseño de interfaces, el detalle es primordial: La creatividad se mezcla con la comunicación y con la funcionalidad para generar interfaces que buscan ser efectivas y satisfactorias para las personas usuarias.El público objetivo es un elemento a tener en cuenta, no sólo en cuanto a su perfil demográfico si no en otros aspectos relevantes como sus procesos cognitivos, sus necesidades y motivaciones. He comprobado como una buena funcionalidad de la interfaz viene determinada, en gran media, por estos elementos, tanto como lo es por una estética adecuada. El tamaño y proporción de los elementos, su distribución, colores, contrastes y el equilibrio visual adecuado son imprescindibles para generar un producto final con coherencia estética y funcional. En este sentido, he comprendido que las guías de estilo son herramientas indispensables para que la usabilidad y el diseño se magnifiquen, pues una alteración del aspecto de la interfaz determina el grado de usabilidad.Trabajar durante todo el semestre sobre un mismo producto, la aplicación móvil, vista desde diferentes ángulos, ha enriquecido el modo en el que entiendo las interfaces. Por un lado, he comprendido que las pantallas no son la única forma de interacción. Por otro lado, las diferentes PECs, los prototipos, los tests desarrollados y los feedbacks recibidos me han ayudado a detectar puntos de mejora y a, finalmente, generar un producto que considero realmente viable. El proceso de diseño iterativo desarrollado durante el semestre ha culminado en la generación de una aplicación móvil que realmente está al servicio de los usuarios, con funcionalidades y estética que ayudarán a generar la mejor experiencia de interacción posible.

Práctica: Evalúa tu prototipo

María Margarita González del Hierro