MADA | Información Visual 2016 | Clase 4

MADA 2016
Información Visual
4

Interacción
+ Interfaces
profesor Rodrigo Ramírez + Rodrigo Vera

diseño uc | mada 2016
Información Visual | 4
Rodrigo Ramírez + Rodrigo Vera
Diseño de experiencia
Una poco de contexto
https://es.wikipedia.org/wiki/Burbuja_punto_com
1975
Wurman
1988
Norman
1995
Nielsen
Dot-com Bubble
2000
2001
Garret
1998
Rosenfeld,
Morville
Social Media
2004
2015
Rosenfeld,
Morville,
Arango
2011
Garret
Design Thinking
1991
2012
Shneider,
Stickdrom
2010
Osterwalder
2007
Cooper
iPhone
2007
ARPANET
1969
Elon Musk
2016
2000
Krug

Una poco de contexto
https://es.wikipedia.org/wiki/Burbuja_punto_com
1975
Wurman
1988
Norman
1995
Nielsen
Dot-com Bubble
2000
2001
Garret
1998
Rosenfeld,
Morville
Social Media
2004
2015
Rosenfeld,
Morville,
Arango
2011
Garret
Design Thinking
1991
2012
Shneider,
Stickdrom
2010
Osterwalder
2007
Cooper
iPhone
2007
ARPANET
1969
Elon Musk
2016
2000
Krug
DISEÑO CENTRADO EN EL
USUARIO (DCU)
USER EXPERIENCE (UX)

ARQUITECTURA DE
INFORMACIÓN
(AI)
DISEÑO DE
INTERACCIÓN
(IxD)
DISEÑO DE
INTERFAZ
(UI)
USABILIDAD

Information Architecture.
For the world wide web.
Third Edition, 2007

Arquitectura de Información (AI):
Cuatro definiciones
Rosenfeld,Morville. 2007
in•for•ma•tion ar•chi•tec•ture n.
1. El diseño estructural de los entornos dónde se comparte información.
2. La combinación de organización, etiquetado, búsqueda, y sistemas de navegación
dentro de los sitios web e intranets.
3. El arte y la ciencia de la formación de productos y experiencias de información para
apoyar la usabilidad y facilidad de encontrar (encontrabilidad).
4. Un emergente disciplina y comunidad que se centró en llevar los principios de diseño
y arquitectura al paisaje digital.

Interfaz de Usuario (UI):
Una definición
http://www.ida.cl/blog/diseno/elementos-diseno-desarrollo-interfaz-usuario/
Interacción humano-computador
Se encarga del diseño, evaluación e implementación de los aparatos
tecnológicos interactivos con el objetivo de que el intercambio sea más
eficiente: minimizar errores, incrementar la satisfacción, disminuir la
frustración y, en definitiva, hacer más productivas las tareas que rodean
a las personas y los computadores.
HCI
La interfaz de usuario es el lugar donde ocurren las interacciones entre personas y má-
quinas, un espacio que tiene múltiples funciones que son determinantes para el éxito
del proyecto. Sus objetivos principales son reflejar la personalidad de la empresa, indi-
car claramente los puntos de interacción y las funciones disponibles y guiar al usuario
en la realización de tareas, al mismo tiempo que le entrega una sensación de control
sobre los elementos.

UXPin - Web UI Design Best Practices
Conexión entre el usuario y la experiencia (UI-UX)
Es la conexión entre el usuario y la experiencia, la primera impresión, una impresión
duradera y que, o bien hace que un sitio web se siente como un viejo amigo o un
transeúnte fácil de olvidar. Un gran diseño de interfaz de usuario web debe lograr un
equilibrio perfecto entre la estética y la interactividad sin esfuerzo. Como una mano
invisible, una interfaz web debe guiar a los usuarios a través de la experiencia en la
velocidad del pensamiento.

Basado en Tidwell, 2006
El diseño de una interfaz como forma de dialogar, de aproximarse a las necesidades
del usuario: Qué ‘vocabulario’ de palabras, iconos y gestos es esperable usar?
“Know thy users, for they are not you”
Experiencia de usuario e Información visual:
Reconocer los patrones de diseño

Proceso de Diseño
El objeto como Interfaz
Henry Dreyfuss, autor del libro “Designing for people”
(1955) popularizó la concepción del diseño como pro-
ceso a partir de sus diseños de teléfonos de la serie 500
para Bell Telephones.
Este diseñador industrial, pionero del diseño centrado
en el usuario, estudió cómo se construían los teléfonos,
cómo se percibían y eran utilizados por las personas.
Sus conclusiones fueron aplicadas a un nuevo diseño
donde se corregían aspectos como la forma, el tamaño,
las proporciones o el color
http://www.nosolousabilidad.com/manual/3.htm
http://blog.duopixel.com/articulos/dreyfuss.html

Proceso de Diseño
El objeto como Interfaz
Diete Rams

La Interfaz como objeto.
https://cdn.designsmaz.com/wp-content/uploads/2014/01/modern-touch-ui-kit.jpg

Diseño de Interacción:
abreviado como IxD
Definido como “El diseño de productos, ambientes, sistemas y sevicios interac-
tivos digitales. Como otros campos del diseño, el diseño de interacción centra tam-
bién su interés en la forma, aunque su principal foco está en observar el comporta-
miento (de las personas y los sistemas diseñados)”
Cooper, Reinman, Cronin (2007)
Interacción humano-computador
Se encarga del diseño, evaluación e implementación de los aparatos
tecnológicos interactivos con el objetivo de que el intercambio sea más
eficiente: minimizar errores, incrementar la satisfacción, disminuir la
frustración y, en definitiva, hacer más productivas las tareas que rodean
a las personas y los computadores.
HCI

About Face 3
The Essentials of Interaction Design
Cooper, Reinman, Cronin (2007)

Diseño de Interacción:
interactuar sólo con un producto?
diseño de interfaces?
legibilidad?, comprensión?
simplicidad?
rol de la información visual?
uso de la información?
De ‘Skteching User experiences’,
Buxton (2007)

La curva de ‘featuritis’ o ‘Creeping featurism’
www.interaction-design.org
La tendencia de una cantidad de características en el
diseño de un producto (generalmente de software), a
aumentar con cada versión o iteración de éste.

La Experiencia de Usuario
El modelo ‘panal de abeja’
Morville, 1994
Útil
Creíble
Valorable
Deseable
Accesible
Usable
Encontrable

The Elements of User
Experience: User-Centered
Design for the Web and Beyond.
Second Edition, 2011

Elementos de la experiencia del usuario:
abreviado como UXD
Un aspecto fundamental para diseñar una interacción exitosa, es considerar estos
‘elementos de la experiencia del usuario’: qué es lo que ve, entiende, utiliza desde-
hacia la información visual en la interacción con la información:
1. El plano superficie (interfaz, lo primero que se ve)
2. El plano esqueleto (orden, estructura visual)
3. El plano estructura (estructura de contenidos)
4. El plano foco (programación)
5. El plano estrategia (objetivos)
JJ Garret (2007)

De arriba hacia abajo
JJ Garret (2011)
Superficie
Producto
como funcionalidad
Producto
como información
Esqueleto
Estructura
Foco
Estrategia

De arriba hacia abajo
JJ Garret (2011)
Superficie
Producto
como funcionalidad
Producto
como información
Diseño sensorial
Diseño
de la interfaz
Diseño
de interacción
Arquitectura
de Información
Especificaciones
funcionales
Necesidades del usuario
Objetivos del producto
Requerimientos
de contenido
Diseño
de navegación
Diseño de información
Esqueleto
Estructura
Foco
Estrategia
sens
ades d
el p
de infor

jjg.net/ia

Vocabulario Visual
JJ Garret (2011)
página
punto de
continuación
referencia de
ﬂujo
punto de
continuación
pila de
páginas
pila de
archivos
archivo
Área
Área iterativa
Área condicional
Área de ﬂujo
http://.jjg.net/ia/viscovab

Vocabulario Visual
JJ Garret (2011)
INICIO
No Perecibles Fiambres y QuesosJugos y Bebidas
Nivel Auxiliar
Marca
Ubicación
Primer Nivel
Verduras Artículos de Aseo
Doña Juana Contacto
Jugos Bebidas
Segundo Nivel
Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina
Tercer Nivel
Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha
Preguntas
Frecuentes

Otro factor clave de la experiencia
Qué se hace con la información?
¿quiénes son usuarios? ¿en qué contexto?
¿qué veo? ¿para qué sirve? ¿qué me permite entender?
¿qué decisiones me permite tomar?

Basado en Chisnell & Rubin, 2008
En el desarrollo del proceso de diseño, es clave evaluar su usabilidad: Un objetivo
final de esta evaluación es conocer cómo se desempeña el diseño, recogiendo datos
que permitan identificar y rectificar las deficiencias de uso en una herramienta (pro-
ducto) y su material de soporte (validación), previos a la producción, comercializa-
ción o presentación. La clave es asegurar la creación de productos que:
> Sean útiles y valorizados por la audiencia/target a quienes están dirigidos
> Sean fáciles de aprender
> Ayuden a las personas a ser efectivas y eficientes en lo que desean hacer
> Sean satisfactorios (e incluso placenteros) en su uso.
Otro factor clave de la experiencia
Qué se hace con la información?

Usabilidad:
Usability Heuristics de Nielsen
Nielsen (2009), propone 10 principios generales para un diseño usable orientado a la
info visual, las cuales llama ‘heurísticas’, ya que son más bien reglas generales que
guías específicas de usabilidad:
1. Visibilidad del estado del sistema
2. Complementar el sistema con el mundo real
3. Control y libertad del usuario
4. Consistencia y estándares
5. Prevenir errores
6. Reconocer, más que recordar
7. Flexibilidad y eficiencia del uso
8. Diseño estético y minimalista
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores
10. Ayuda y documentación
Jakob Nielsen (http://www.useit.com)
¿cuáles decisiones?¿para qué sirve? ¿cómo lo integro?

Juan Carlos Camus, 2009
http://www.tienes5segundos.cl

http://eadpucv.github.io/pix/
e[ad] PUCV.

e[ad] PUCV.
http://eadpucv.github.io/pix/

Google, 2014.
https://www.thinkwithgoogle.com/intl/es-419/micromoments/
“Los dispositivos móviles han cambiado para siempre la forma en que vivimos, transfor-
mando a su vez nuestras relaciones con las marcas. Esta nueva realidad ha fragmentado el
camino del consumidor en miles de micro-momentos que suceden en tiempo real. Cada uno
es una oportunidad única para las marcas de influenciar las decisiones y preferencias del
consumidor”.
Micromomentos
Google ya hace cerca de un año definía los micromomentos dónde intuía el uso de las interfaces móviles, las
búsquedas de los usuarios y las necesidades de los mismos.

Google, 2014.
http://www.ida.cl/blog/diseno/que-son-los-micromomentos/
Micromomentos
Para identificar los micro-momentos, Google determina cuatro categorías:

Google, 2014.
http://www.ida.cl/blog/diseno/que-son-los-micromomentos/
Quiero saber:
El momento en que los usuarios reciben información nueva sobre productos o temas de
interés y requieren más detalles para realizar compras o tomar decisiones.
Quiero ir:
Búsqueda de servicios o productos que incluyen las palabras “cerca de mi” o búsquedas
por localización.
Quiero comprar:
Proceso que realizan los usuarios cuando quieren comprar algún producto o servicio y
buscan información relacionada (reviews, datos técnicos, precio, etc.).
Quiero hacer:
Las búsquedas de how-to, incluyendo tutoriales, videos, recetas y todo lo que internet
permita.
Micromomentos
Para identificar los micro-momentos, Google determina cuatro categorías:

http://microinteractions.com/the-origins-of-famous-microinteractions/
Las micro-interacciones son las pequeñas acciones que realizamos con dispositivos
y aplicaciones con un fin determinado, comi por ejemplo, desactivar la alarma de tu
teléfono. Permiten entre otras cosas, comunicar un estado, ver el resultado de una
acción o apoyar al usuario a realizar alguna función. Los elementos que generan la
microinteracción deben ser cada vez más humanos, promoviendo la usabilidad por
sobre la frustración, especialmente en aplicaciones.
Algunos ejemplos de micro-interacciones son:
• Me gusta de Facebook
• Menú hamburguesa.
• Autocorrector
• Páginas 404
• Tooltips, modales
• Etc.
Micro-interacciones
Aquellas interacciones que se hacen responsables del “espacio vacío”.

http://www.fastcodesign.com/3057113/facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years
Micro-interacciones
Aquellas interacciones que se hacen responsables del “espacio vacío”.

http://qz.com/613700/its-here-quartzs-first-news-app-for-iphone/
Establecer diálogos en la interfaz
En sentido “figurado” y no tanto.

https://medium.com/ux-en-latam/estableciendo-di%C3%A1logos-con-la-interfaz-c34bfdf3e49d#.mumycjr3g
Hemos de preocuparnos y velar por el “diseño de experiencia”, aquello dónde la in-
teracción entre una persona y un objeto, espacio o servicio conlleva a una resultado
emocional, idealmente gratificante y/o satisfactorio según las necesidades de las
personas.
Aquello por que cuidamos al diseñar servicios y/o productos.

Preguntas & Comentarios

MADA | Información Visual 2016 | Clase 4

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie MADA | Información Visual 2016 | Clase 4

Ähnlich wie MADA | Información Visual 2016 | Clase 4 (20)

Mehr von Rodrigo Vera

Mehr von Rodrigo Vera (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

MADA | Información Visual 2016 | Clase 4