Download - 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 | 4Rodrigo Ramírez + Rodrigo Vera
Diseño de experiencia
Una poco de contexto
https://es.wikipedia.org/wiki/Burbuja_punto_com
1975Wurman
1988Norman
1995Nielsen
Dot-com Bubble2000
2001Garret
1998Rosenfeld, Morville
Social Media2004
2015Rosenfeld, Morville,Arango
2011Garret
Design Thinking1991
2012Shneider,Stickdrom
2010Osterwalder
2007Cooper
iPhone2007
ARPANET1969
Elon Musk2016
2000Krug
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
Diseño de experiencia
Una poco de contexto
https://es.wikipedia.org/wiki/Burbuja_punto_com
1975Wurman
1988Norman
1995Nielsen
Dot-com Bubble2000
2001Garret
1998Rosenfeld, Morville
Social Media2004
2015Rosenfeld, Morville,Arango
2011Garret
Design Thinking1991
2012Shneider,Stickdrom
2010Osterwalder
2007Cooper
iPhone2007
ARPANET1969
Elon Musk2016
2000Krug
DISEÑO CENTRADO EN EL
USUARIO (DCU)
USER EXPERIENCE (UX)
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
Diseño de experiencia
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
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
Interfaz de Usuario (UI):
Una definición
http://www.ida.cl/blog/diseno/elementos-diseno-desarrollo-interfaz-usuario/
Interacción humano-computadorSe 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.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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.htmhttp://blog.duopixel.com/articulos/dreyfuss.html
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
Proceso de Diseño
El objeto como Interfaz
Diete Rams
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
La Interfaz como objeto.
https://cdn.designsmaz.com/wp-content/uploads/2014/01/modern-touch-ui-kit.jpg
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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-computadorSe 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)
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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)
Elementos de la experiencia del usuario:
De arriba hacia abajo
JJ Garret (2011)
Superficie
Productocomo funcionalidad
Productocomo información
Esqueleto
Estructura
Foco
Estrategia
Elementos de la experiencia del usuario:
De arriba hacia abajo
JJ Garret (2011)
Superficie
Productocomo funcionalidad
Productocomo información
Diseño sensorial
Diseño de la interfaz
Diseño de interacción
Arquitecturade Información
Especificaciones funcionales
Necesidades del usuario
Objetivos del producto
Requerimientosde contenido
Diseño de navegación
Diseño de informaciónEsqueleto
Estructura
Foco
Estrategia
sens
ades d
el p
de infor
Elementos de la experiencia del usuario:
jjg.net/ia
Elementos de la experiencia del usuario:
Vocabulario Visual
JJ Garret (2011)
página
punto de continuación
referencia de flujo
punto de continuación
pila de páginas
pila de archivosarchivo
Área
Área iterativa
Área condicional
Área de flujo
http://.jjg.net/ia/viscovab
Elementos de la experiencia del usuario:
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
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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?
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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?
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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?
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
Juan Carlos Camus, 2009http://www.tienes5segundos.cl
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
http://eadpucv.github.io/pix/e[ad] PUCV.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
e[ad] PUCV. http://eadpucv.github.io/pix/
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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”.
MicromomentosGoogle 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.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
Google, 2014.http://www.ida.cl/blog/diseno/que-son-los-micromomentos/
MicromomentosPara identificar los micro-momentos, Google determina cuatro categorías:
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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.
MicromomentosPara identificar los micro-momentos, Google determina cuatro categorías:
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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-interaccionesAquellas interacciones que se hacen responsables del “espacio vacío”.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
http://www.fastcodesign.com/3057113/facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years
Micro-interaccionesAquellas interacciones que se hacen responsables del “espacio vacío”.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
http://www.fastcodesign.com/3057113/facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years
Micro-interaccionesAquellas interacciones que se hacen responsables del “espacio vacío”.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
http://qz.com/613700/its-here-quartzs-first-news-app-for-iphone/
Establecer diálogos en la interfazEn sentido “figurado” y no tanto.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
http://qz.com/613700/its-here-quartzs-first-news-app-for-iphone/
Establecer diálogos en la interfazEn sentido “figurado” y no tanto.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
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.
Diseño de experienciaAquello por que cuidamos al diseñar servicios y/o productos.
diseño uc | mada 2016
Información Visual | 4Rodrigo Ramírez + Rodrigo Vera
Preguntas & Comentarios