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




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)




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-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.



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.htmhttp://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-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)



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

Productocomo funcionalidad

Productocomo información

Esqueleto

Estructura

Foco

Estrategia


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


jjg.net/ia


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


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, 2009http://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”.

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.



Google, 2014.http://www.ida.cl/blog/diseno/que-son-los-micromomentos/

MicromomentosPara 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.

MicromomentosPara 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-interaccionesAquellas 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-interaccionesAquellas 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 interfazEn 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.

Diseño de experienciaAquello por que cuidamos al diseñar servicios y/o productos.



Preguntas & Comentarios