Metodologías ágiles en el diseño de interfaces

Integración del diseño UI/UX en los ciclos iterativos de SCRUM

Workshop

Diseñador UI/UX

Julio Santarelli

Análisis y diseño UI/UX para la plataforma ANDES, dentro del Departamento de Tecnologías de la Información del Hospital Provincial Neuquén "Dr Eduardo Castro Rendón"

Desarrollador UI/UX

Andrés Velázquez

Análisis y desarrollo UI/UX para la plataforma ANDES, dentro del Departamento de Tecnologías de la Información del Hospital Provincial Neuquén "Dr Eduardo Castro Rendón"

Título de la presentación

Objetivo del workshop

• Brindar un marco teórico-práctico que permita abordar la problemática de la integración de los equipos de diseño UI/UX a la metodología ágil Scrum.
• Dar al usuario un lugar de mayor relevancia para lograr software de mayor valor real. 

Indice

BLOQUE

TEÓRICO

UI/UX

SPRINT 1

30'

SPRINT 2

30'

HOLA

ACTIVIDAD

CIERRE

Q&A

Demo

Prototipos

Planning

Planning

Incremento

45'

Demo

Prototipos

45'

Retro

Autoevaluación

10'

10'

25'

Desarrollo

25'

Desarrollo

10'

10'

Título de la presentación

¿Alguno conoce o aplica Scrum?

Metodologías ágiles en el diseño de interfaces

¿Qué es Scrum?

Es un marco de trabajo para desarrollo ágil de software caracterizado por:

• Adoptar una estrategia de desarrollo incremental: bloques temporales cortos y fijos.

• Basar la calidad del resultado en el conocimiento de las personas en equipos autogestionados más que en la calidad de los procesos empleados.

• Solapar las diferentes fases del desarrollo, en lugar de realizar una tras otra en un ciclo secuencial o en cascada.

Más info

• Se da prioridad a lo que tiene más valor para el cliente.
• El equipo se sincroniza diariamente y se realizan las adaptaciones necesarias.
• Tras cada iteración se muestra al cliente el resultado real obtenido, para que este tome las decisiones necesarias en relación a lo observado.
• Se le da la autoridad necesaria al equipo para poder cumplir los requisitos.
• Se fijan tiempos máximos para lograr objetivos.
• Los equipos son pequeños (de 3 a 9 personas cada uno).

Metodología Scrum | Ceremonias y Artefactos

Metodologías ágiles en el diseño de interfaces

Ceremonias | Planning, Daily

Metodologías ágiles en el diseño de interfaces

Ceremonias | Demo, Retro

Metodologías ágiles en el diseño de interfaces

Metodología Scrum: Roles y artefactos

Product Backlog

Sprint Backlog

Incremento

Artefactos

Roles

Stakeholders

Roles auxiliares

Administradores

Product Owner

Scrum Master

Equipo

Desarrollo, UI-UX, Testing

Roles: Product Owner

Product Owner

Roles: Scrum Master

ScrumMaster

(o Facilitador)

Roles: Equipo (Desarrollo, UI-UX, Testing)

Equipo

Metodología SCRUM: Roles

Stakeholders

Título de la presentación

¿Alguno diseña o interactúa con diseñadores front-end?

Diseño UI-UX

¿Qué es diseño UI?

Es el diseño de interfaces gráficas de usuario a las cuales luego se les dará vida mediante programación.

¿Qué es diseño UX?

Es analizar, diseñar y mejorar la experiencia para el usuario dentro y fuera de esa UI.

Diseño UI-UX

Entonces cuando hablamos de UI, hablamos de...

• Cuerpos tipográficos
• Cromaticidad
• Jerarquías visuales
• Leyes de ordenamiento visual
• Iconografía
• Campos de información
• Elementos formales

Y cuando hablamos de UX, hablamos de...

• Fluidez
• Usabilidad
• Contexto
• Secuencialidad/Navegabilidad
• Componentes multimedia
• Satisfacción del usuario
• Comunicación efectiva

Título de la presentación

¿Cómo es la experiencia de usuario en la vida real?

UI

UX

Diseño UI-UX

Optimizar la visualización y usabilidad de una aplicación, facilitando la interpretación de las acciones que un usuario debe realizar para ejecutar una operación satisfactoriamente.​

Cuando un usuario interactúa con el producto, y obtiene el valor que se les prometió de una manera positiva, entonces, es seguro que ha construido con éxito un producto utilizable.

Roles dentro de un equipo de Diseño UI-UX

Diseñador visual y/o de interfaz

UI designer

Las tareas de este rol son las que la mayoría de las personas identifican con UX. Domina herramientas de diseño y prototipado.

Los skills de esta posición están más orientados al dominio de métodos cualitativos y cuantitativos de investigación.

Definen los gestos, las transiciones y los efectos de un wireframe cuando el usuario realiza una acción. Tienen muy en cuenta el contexto.

Es un perfil más bien técnico, Requiere del conocimiento de lenguajes de programación y algunos frameworks. Usan a diario el HTML, CCS, Javascript y JQuery como mínimo.

Roles dentro de un Diseño UI-UX

Este sería el perfil generalista.
El responsable de acompañar distintas etapas del proceso de diseño de un producto y desempeñar cada rol según las necesidades de cada proyecto.

Dentro de Scrum es quien tiene un contacto directo y fluido con el Product Owner.

¿Cómo es la asistencia al usuario cuando los problemas de UI/UX ya están en producción?

Asistiendo al Usuario cuando los problemas de UI/UX
ya están en producción

La solución más común...

La solución:

"Vos sos un re mega ninja hacker x10,

la culpa debe ser de otro"

CULPAR AL USUARIO

No existe experiencia de usuario sin usuario

Diseño UI-UX

Observación

Análisis​

Conceptualización​

Bocetado

Wireframing

Prototipado​

Testeo​ y revisión

Documentación​

Guías de estilo en función de mantener coherencia visual en el sistema y futuras
implementaciones.

Título de la presentación

Enfoque tradicional del diseño UI

Al diseñador está formado para analizar, diseñar, prototipar y validar una versión lo más cercana posible, desde lo visual, al producto final.

En ésta búsqueda, los diseñadores indefectiblemente reparan tanto en el detalle como en la visión global de la aplicación o sistema que idearon.

Metodología del diseño

Metodología SCRUM

• Lo importante es entregar un producto funcional
• Bloques temporales cortos y fijo
• Desarrollo incremental
• Tareas continuas y en paralelo (Solapamiento de fases)

Entonces...¿Cómo integramos dos metodologías escencialmente diferentes?

CONTRAPUNTO

Diseño UI-UX en el marco de trabajo ágil

Enfoques

Existen abordajes que buscan integrar el diseño a marcos de trabajo ágiles

Procesos cognitivos como Design Thinking y diseño centrado en el usuario.

Mediante el concepto de Dual-Track.

(Jeff Patton)

¿Qué se agrega a SCRUM?

¿Cómo se acopla a SCRUM?

• Resolver problemas poco definidos

• Usar razonamiento abductivo o productivo

• Emplear métodos gráficos

Design thinking

User Centered Design

• Satisfacer necesidades concretas

• Lograr la mejor experiencia de usuario

• Testear y validar la propuesta con usuarios

Diseño UI-UX en un marco de trabajo ágil

Diseño UI-UX en un marco de trabajo ágil

Design thinking + SCRUM

¿Cómo se integra a SCRUM?

Dual-Track

El concepto plantea dos líneas o "pistas" temporales en el desarrollo de un producto:

Detecta, crea y valida soluciones a necesidades o mejoras del producto, alimentando el Product Backlog.

Discovery Track

Construye, prueba, entrega y verifica, lo que el equipo de descubrimiento Experimenta.

Construction Track

(*) Jeff Patton establece que Dual-Track no implican dos Scrum en paralelo, sino un único Scrum dual.

Representación gráfica del Dual Track

Aprender

Discovery Track

Hipótesis, prototipos y validación

Alimenta el backlog de desarrollo

Entregar

Construction Track

Entregar producto funcional

basado en la validación.

​Brindar devolución al Discovery Track

Diseño UI-UX en un marco de trabajo ágil

Dual-Track

Ventajas

• Acopla el proceso de diseño a la metodología SCRUM, de forma continua e incremental.
• Evita dos flujos con equipos separados
• Resalta la colaboración (Desarrollo, Testing y UX trabajan en conjunto)

Riesgos

• Se puede caer en fases secuenciales o en cascada (una depende del resultado de la anterior)
• Si el desfase temporal es demasiado extenso, se puede incurrir en discontinuidad y ruido entre una línea y la otra.

Realizaremos una representación del Dual-Track emulando dos ciclos de un equipo de diseño.

ACTIVIDAD

Desarrollo de la actividad

SPRINT 1

SPRINT 2

ACTIVIDAD

REFUERZO

CONCEPTUAL

Demo

Prototipos

Planning

45'

Retro

Autoevaluación

10'

5'

Desarrollo

Diseño UI-UX en un marco de trabajo ágil

25'

Demo

Prototipos

Planning

45'

10'

5'

Desarrollo

25'

User-stories

5'

Escribiremos en post-its las tareas que se desprenden de las user-stories

1. PLANNING

A partir de las tareas detectadas, las priorizaremos y decidiremos cuáles desarrollaremos durante el Sprint

A partir de los materiales brindados diseñaremos las interfaces que componen la aplicación

2. PROTOTIPADO

Se le brindará papel, marcadores y un UI-KIT con componentes gráficos para diseñar la interface

TIPS DE DISEÑO

De lo macro a lo micro

Circuitos (y pasos que lo componen) que debe recorrer el usuario para lograr una operación.

Interactividad y secuencialidad

Acciones que se ejecutan entre el usuario y la aplicación en función de completar un circuito.

Mapa estructural y grilla constructiva

Retícula modularizada que ayuda a distribuir de manera armónica los elementos que constituyen la interfaz.

Leyes de agrupamiento

Son elementos que se encuentran relativamente cercanos, se perciben formando una misma unidad o grupo

Jerarquías

visuales

Supremacía de un elemento sobre otro a partir de variaciones de tamaño, color, posicionamiento, etc.

Los integrantes de cada grupo expondrán sus propuestas en el escenario

3. DEMO

Deberán comunicar cuáles fueron los requerimientoss y qué tareas planificaron

Un representante de cada grupo, evaluará la aplicación desarrollada por el equipo que le sigue

4. REVISIÓN

A partir de las user-stories, deberá corroborar que los requerimientos fueron plasmados

Algunas reflexiones desde la práctica y la experiencia

CONCLUSIÓN

Distintos escenarios experimentados en ANDES

Paralelismo

• Discovery track en paralelo con Construction track

Desfase temporal

• Discovery track desfasado del Construction track

Tercera semana

• Agregado de una semana adicional para abordar temas relacionados a UI/UX

Durante mucho tiempo en ANDES...

• Desbalance de cantidad entre diseño UI/UX y desarrollo

• Dentro del equipo de desarrollo, escaso recurso destinado a UI/UX

Algunas recomendaciones para integrar un área de UI/UX dentro de un equipo de trabajo Scrum

• Consolidar un área de diseño de interfaces (UI) e integrarla al equipo de trabajo Scrum.
• Lograr que el área sea parte activa al momento de definir el Product Backlog.
• Incorporar paulatinamente diferentes herramientas para recabar datos sobre usuarios (UX).
• Usar esa información como fuente para idear mejoras en la UI y así logara una UX mejorada.

Equipo de desarrollo

Equipo UI/UX

Usuario

La solución para el usuario debe ser integral

¡GRACIAS!

Diseñador UI/UX

Julio Santarelli

Desarrollador UI/UX

Andrés Velázquez

santarellijulio@gmail.com

andresin@gmail.com

@JulioSantarelli

@aesede