Diseño de Interacción II

Realidad Aumentada

Diseño > Resolver un problema (gráfico, de interacción, etc.)

Libros: Realidad aumentada, crea tus propias aplicaciones (para

desarrolladores)

3 tp’s (chico, medio y grande) > en grupo

1 parcial

Happy path (interacción correcta)

Casos de uso incorrecto

Posgrado UBA DiCom (Diseño de comunicación > Armada por Longinotti)

Somos Grupo 4

COMIDA: 8/4, 27/4

Uno de las entregas va a ser un Video de Estudio del Caso (Case Study)
(contando sobre la interfaz que diseñamos) y otro contando cómo funciona.

Buscar videos de ese estilo sobre realidad aumentada (ej: Subte y pelo) >
publicitarios, de impacto social, gadgets nuevos (ej.: chip zapatilla).

Está bueno pensar algo que tenga impacto social.

RGA: Agencia de interacción

Ir pensando qué queremos hacer, para ganar tiempo

TP1
Print interactive ad
Qué podemos hacer con una publicidad impresa en una revista, que pueda
ser interactivo
Ej: QR juego mosquitos laberinto (advert games)
Podemos enfocarnos en una marca o en algo social (ej. No tomar alcohol,
reciclar basura)

Wireframes > Estructura, pesos morfológicos para corroborar si el FLUJO

(hacer diagrama de flujos) se puede llevar a cabo.

Tratar de vincular lo más posible el celular con la página

TP1
Estrategia / Informe
- Racional con problema + Benchmarking
- Diagrama de flujo
- Wireframes (flujo completo)
- Look and feel (Publicidad + Key Visual)
- Visual de todas las pantallas

Animación/Demo:
- Funcional
- Storytelling
- Motion

PRÓXIMA CLASE (18/03):

- Traer la elección del tema (salud, educación, prevención)
- Elegir la marca/institución
- Benchmark
- Concepto que va a regir la idea
- Flujo
- Traer impreso y una mini presentación

Tema: Salud/medio ambiente

Marca: GCBA
Benchmark:
Concepto: Incentivar el uso del sistema de bicicletas y ciclovías del GCBA,
generando conciencia sobre el menor tiempo de viaje que implican, los
efectos positivos sobre la salud y el medio ambiente. Al finalizar el juego, se
entregará un voucher para retirar un kit para ciclistas en algún CGP.

Definir problemas más acotados (ej; el NO uso de las ciclovías)

Trabajar desde el CONSTRAIN (las limitaciones), para acotar los problemas y
buscar soluciones más acotadas y específicas.

NO: Laberintos, trivias, videos, links a páginas.

PENSAR EL PROBLEMA

Recursos: Pantalla, sonidos, vibración, reconocimiento de formas, patrones,

trackeo de elementos de la revista.
Buscando a Wally? Que cuando encontrás algo se anime?
Problemas de salud comunes?
Uso de preservativo?
Uso excesivo del teléfono?
Violencia de género?
Inseguridad
Reanimación RCP

Idea separar basura:

En la revista, hay dos tachos en diferentes lugares de la hoja. Hay basura
que va apareciendo en otro lado de la hoja y hay que irla llevando al tacho
correspondiente. Hay poco tiempo, y el celu vibra cada vez que alguien tiró
basura del otro lado. Podría ser que uno tiene que ser el que recicla, y que
te tiren la basura mezclada, y hay que agarrar cada elemento por separado
para tirarlo en los tachos, y de esa forma se ve que es mucho más difícil
reciclar si no se separa. Cuando se llena el tacho de reciclables, se
convierten en algo o te da puntos

BUSCAR MUCHAS REFERENCIAS (Visual de apps)

Cronograma en webcampus

25/03
Racional con Problema + Benchmarking (informe)
Flujo completo + Wireframes (del flujo completo)+ Propuesta Look and Feel

01/04
Última corrección

08/04
Entrega TP1

Ejemplo wireframing del flujo

UX

3 Libros fundamentales:
 - Libro de Don Norman > Ejemplo puerta que tira y empuja. La puerta
que empuja no debería tener manija > “La psicología de los objetos
cotidianos”
- Nielsen > Padre de la usabilidad > “10 eurísticas de Nielsen” y
todos los otros libros.
- https://www.nngroup.com/ (Nielsen) > Papers de Nielsen
- Libro “No me hagas pensar”

Otros libros: “The best interface is no interface”

Otras páginas:
https://www.interaction-design.org/
https://developer.android.com/
Apple events (app) > Recursos para developers y diseñadores

Cualquier cosa tiene UX, está pensado para que las cosas sean más fáciles

CX (Customer Experience) – Es la experiencia de los CLIENTES

UX (User experience) > Enfocada a lo digital (usuario con interfaz)

Se puede dividir en varias partes (acá):
- Diseño (ID/UI) – Interaction Design, User Interface
- Comunicación/Contenidos
- Research (Investigación)

Las personas que hacen UX, hacen UI (diseño de la interfaz)

ID (Interaction Design) > Funcional (Flujo, anterior a la visual) – La gente de

“contenido” (CM – Comunicación) te ayuda a armar el storytelling. Hacen
flujos y wireframes.
UI (User Interface) > Visual Design
Estos, acá suelen estar unidos en la misma persona.

“Peer Design” > Trabajo en Dupla (ID con Contenido, UI con ID)

ID + CM
ID + UI
“Insight” = Cuando encontrás un “Descubrimiento” en que profundizar y
hacer algo. Es el “Aha!”.

Research Generativo
La gente de Research cuando trabaja en Generativo, busca hallazgos,
puntas de ciertos temas para profundizar y, x ej, generar un nuevo
producto. (No es investigación de mercado). Se puede nutrir de encuestas,
entrevistas.

Testeos de usabilidad
Se testea con usuarios, se ve si funciona o no, si se cumple el objetivo
“Hotjar” > Herramienta de testeo con usuarios > https://www.hotjar.com/

Research
Ver cómo van los números

War Room > Cuarto de guerra. Toda la gente se pone en una sala para
definir qué hacer con un problema.

En Chile y otros países, UX y UI son dos perfiles distintos.

Alla, UX hace Design Thinking, Research/Ideación, Wireframes (functional),
pero no tocan nada de diseño visual). Y el UI hace el Visual Design.
Eso hace que tengas más iteraciones, porque hay un desconocimiento.
Las que tienen un proceso de transformación digital o los Bancos, van más
por ahí.

Acá en Argentina, tenés que poder diseñar la interacción y la visual. La

mayoría de las empresas digitales acá tienen ese modelo.

Proceso de Diseño de Experiencia de

Usuario

Paso 1:
Problema / Oportunidad / Usuarios

Paso 2:
Research 
- Benchmark
- Encuestas
- Testeos / Recolectar info
- Entrevista
- Analítica
- Documentación

Paso 3:
Diagnóstico

Paso 4:
Hipótesis
Una o varias. de cómo se puede resolver ese problema (escenarios, “casos
de uso”, Jornada de Ideación, Sprint Design, Design Thinking.

Estrategia

Paso 5:
Diagrama de flujo / casos de uso
El happy path es el diagrama de flujo con el casos de uso ideal
Se pueden hacer casos de uso para diferentes perfiles de usuario

Paso 6:
Wireframes
Esto sirve para ver lo funcional y los pesos morfológicos. Para ver que no te
olvidaste de nada de lo que está en el Flujo. En esta instancia se puede
hacer algún testeo/iteración para mejorar el producto.

Producto para gran empresa: Web, Mobile, Android, IOS. Todo esto hay que
hacerlo sobre una de estas opciones, no sobre todas. La tendencia actual es
MOBILE FIRST. Por una cuestión de impacto, elegir ANDROID.
Paso 7:
Archivos en alta (Desktop, Mobile, Android, IOS)

Paso 8:
Testeo “Friends and family” > Testeo con un grupo pequeño

Paso 9:
- Deploy o Producción > Producto ya está afuera
- Comunicaciones > Lanzamiento del producto? Mail? Publicidad? Push?
- Prendidos > Cómo se va a prender, en todos los usuarios, a 50 usuarios?
- Data / Trackeo

Paso 9:
Seguir haciendo research, iteraciones, investigación

TAREAS TP
Cami – Visual Design - Animación

Liz – Logo - Publicidad – Unificar – ¿Guión publi video?

Ivan – Comunicación / Storytelling

Nico – Wireframe de todas las pantallas: Pantalla de bienvenida, Pantallas de

instrucciones, Pantalla de juego, donde ubicar los elementos, casco, etc –
donde se ve la vida, las monedas, el tiempo (cómo se muestra, números o
circulo), Pantalla de Market, Pantalla de Perdiste (Juego de apaga?
Ambulancia entrando? Mensaje de “Te vas al hospital”), Pantalla de
“ganaste, anda a buscar tu premio, tips sobre seguridad vial, volvé a jugar)

Flujo – Wireframe – Comunicación (instrucciones) - Visual – Publicidad –

Unificar –

Comunicación / storytelling
 - Notificaciones (push?)
- Mensajería
- Registro
- Instrucciones iniciales
- Alertas (ganaste puntos y te podes comprar elementos o seguir
ahorrando, “tocá la bocina”, cuando cruza un peaton/auto/bici, te
pegaste un palo y te fuiste en ambulancia, cierre de partida (ganaste?
Anda a buscar tu premio, no te olvide de usar el casco)

Sistema operativo > Bajar los frameworks del OS que hallamos elegido
(apple o android) > Si no usamos los templates, se va a ver trucho.

Benchmarking

Referencias de otras apps

Hay sitios que hacen benchmark
Sirve para ver qué hicieron otros

Una manera de verlo:

- Planificación: Decidir qué cosas se van a observar, qué patrones.
(criterios con los que voy a evaluar y hacer el diagnóstico)
- Datos
- Análisis
- Acción

Otra manera de verlo (la del profe):

Criterios (igual que la división de tareas):
- Visual
- Interacción
- Contenido

Si funciona o no funciona, no hay manera de verlo.

Hay que tener muchas referencias.
Ver bien cómo es el proceso de descargar/instalar una aplicación

Se puede hacer Bench del Google connect, Facebook connect, etc.

Podemos hacer benchmark de un proceso de checkout, del final de un
juego, etc.

MIRAR MUCHAS REFERENCIAS Y TRAERLAS

Bench Vertical > Apps o sitios que tienen que ver con mi mismo rubro
Bench Horizontal >

UX

El diseño de conversaciones es lo que va a venir. Diseñar una

interfaz sin interfaz.
https://developers.google.com/actions/design/ui-toolkit

Product Design Sprint

Framework basado en Scrum

Para una empresa o equipo multidisciplinario. Se puede hacer un
workshop de 3 días.

3 day structure (modelo corto, el originar es de 5 días)

Schedule

Day 1
Welcome
Understand
Sketch
Day 2
Decide
Storyboard
Prototype

Day 1
Welcome
Understand
Lightning Talks > Cada área habla algo sobre su tema (si es un
equipo multidisciplinario. Son charlas chiquitas con mucho foco que
todos preparan)

El Doble diamante

El modelo de diamante sirve para expandir y volver a focalizar.

En actividades de design thinking se pueden proponer actividades de

brainstormig y acotarla con votaciones.
 DEVOLUCIÓN TP

Problema más específico

Puntuación/ortografía
Niveles de lectura

Visuales: Flojo el video

Wireframe: Grises

Publicidad: No están las jerarquías bien dispuestas

Video: Demo más completa. Pixelado. Cortes. Reflejo en teléfono. No

se lee lo que está en la pantalla.

13/05 – Entrega

TP2 opA – HoloLens1 o 2 u Occulus

Buscar info sobre HoloLens. Ver videos para familiarizarnos con la

interfaz.
Dispositivos de virtualidad aumentada o realidad Mixta (cascos,
lentes)
Tienen base visual, pero al Occulus se le puede hablar también. Cómo
trabajar el entorno.
Base en soporte visual

TP2 opB – Asistencia por voz

Buscar info sobre asistente por voz. Traer info y traer proyecto.
Google Home (Tmb tiene interfaz gráfica).
Flujos de conversación q lo que se le suma algo visual.
Que no sean dispositivos solo por voz.
Cómo se interactúa por voz y tiene un reflejo en la realidad.
Tutoriales de google de cómo hacer las conversaciones. (hay en el
campus)
Una vez que pensamos qué dispositivos, pensar qué nos gustaría
hacer con ese dispositivo. Expandir el scope del proyecto.
Cómo hacer un muy buen flujo.
Flujo, mockups, interacción.

Explotar el flujo.

Occulus Go > Versión económica de Occulus

Occulus Rift > Versión full

Visualizaciones 2D (ej: Dinosaurio) vs. Visualizaciones inmersivas

Mirar videos de kickstarters como referencias:

 Idea
 Proceso de construcción, wireframing impresos filmados
 Prototipo

NOTA TP1 + TP2

7+9=8