Diseño de interacción
Diseño de para la interacción
“En 1990 Bill Moggridge, director de la firma de
diseño IDEO, se dio cuenta de que él y algunos de
sus colegas habían estad...
Interacción / Interfaz	

¿diferencias?
El diseño de interacción es una disciplina práctica acerca del comportamiento, sobre cómo se
comportan las personas utiliz...
Esta interacción tiene lugar sobre la interfaz de usuario,
entendida como el conjunto de dispositivos hardware
(de entrada...
1) Formulación del objetivo. Qué queremos lograr.
!
2) Ejecución. Qué hacemos:
	 •	Formular nuestra intención
	 •	Especific...
Este modelo nos permite identificar en qué momentos se
pueden producir problemas de uso para el usuario en forma de
inconex...
La brecha en la ejecución se produce cuando no somos
capaces de relacionar qué pretendemos lograr y cómo llevar a
cabo la ...
1) Líneas de comandos

2) Menús de selección o navegación
3) Formularios

4) Diálogo basado en lenguaje natural
5) Manipul...
Líneas de comando
En estos sistemas, el usuario debe introducir a través de un prompt,
instrucciones o comandos que pueden...
Menús de selección
o navegación
En este estilo de interacción el sistema le presenta al usuario la lista de
opciones o com...
Formularios
Los formularios representan un estilo de interacción que utiliza la metáfora de
los formularios clásicos en pa...
Diálogo basado en
lenguaje natural
Aunque éste es un estilo de interacción sobre el que los autores llevan mucho
tiempo es...
Manipulación directa
La manipulación directa es aquel estilo de interacción que permite al usuario
manipular y controlar f...
Metáforas
Affordances
Metáforas
El uso de metáforas forma parte intrínseca del lenguaje y, por tanto, de nuestro
pensamiento. Una metáfora consi...
Affordances
“Pensemos en unas tijeras: incluso si nunca has visto
o usado unas antes, puedes ver que el número de
posibles...
Affordances = Propiciar.
D. Norman.
Principios para la interacción
!
Anticipación
Las aplicaciones deberían intentar anticiparse a las necesidades y
deseos del usuario.
Objetos humanos
Los objetos humanos de la interfaz se comportan de manera
estándar por lo que se facilita su uso.
Protege el trabajo
del usuario
Asegúrate de que el usuario nunca pierda su trabajo como
resultado de un error suyo, los pr...
Alinear
experiencias y
expectativas
Consiste en realizar modelos conceptuales que se comporten de la
manera en que espera ...
Consistencia
Frente al mismo estímulo, la misma decisión.
Es tan importante ser visualmente inconsistente con los objetos ...
Carga Cognitiva
El usuario no debe ser obligado a retener información crítica para
el funcionamiento del sistema. Deja que...
Minimalismo
funcional
Todo debe ser tan simple como sea posible, pero no más simple
que eso. Evita funcionalidades superflu...
Flow
El engagement aumenta cuando un usuario siente que la tarea que
ejecuta es lo suficientemente demandante como para que...
Functional
layering
Según la ley de Pareto (80 -20) el 20% de las funcionalidades son
usadas el 80% de las veces.
Debemos ...
Control y
confianza
Si el usuario se siente en control de lo que sucede en la interacción
eventualmente presentará confianza...
Prevención,
detección y
recuperación de
errores
Prevenir errores:
• Deshabilita funciones que no son útiles
• Usa los patr...
Waterfall
!
Agile
!
Dos vertientes metodológicas
Agile
!
Agile
!
Agile
!
“Todo proyecto parte con presunciones”
Creemos que ______________________
Para este segmento ______________________
Lograremos ______________________
Veremos que...
MVP
“No diseñes un producto, diseña un experimento”
Entregables. La traducción diseñístico - humano
¿Qué es?
Es un board que se llena según los recuadros descritos
¿Para qué sirve?
Para sistematizar los antecedentes y defin...
!
!
!
¿Qué es?
Es una ficha con descriptores de los usuarios
arquetípicos de mi idea
¿Para qué sirve?
Para entender a los u...
!
!
¿Qué es?
Es una historia dibujada de formas
de uso de la idea
¿Para qué sirve?
Para focalizarse en lo central de la
id...
!
!
!
¿Qué es?
Es una sistematización de las mejores
ideas de otros proyectos existentes
¿Para qué sirve?
Para no inventar...
!
!
!
¿Qué es?
Es un listado detallado de todas las
posibles funcionalidades que puede
tener nuestra idea
¿Para qué sirve?...
!
¿Qué es?
Es una dinámica de organización de contenidos
¿Para qué sirve?
Para obtener información respecto de cuál es la
...
!
!
!
¿Qué es?
Es un diagrama de ordenamiento de secciones y sus
contenidos
¿Para qué sirve?
Para visualizar las distintas...
!
!
¿Qué es?
Es un diagrama de ordenamiento de procesos y tareas
¿Para qué sirve?
Para visualizar la manera en que las dis...
!
¿Qué es?
Es un diagrama que muestra la interacción ideal de un usuario
con el proyecto
¿Para qué sirve?
Para que al mome...
!
!
¿Qué es?
Es un proceso de bocetaje de las principales ideas del proyecto
(no sólo pantallas)
¿Para qué sirve?
Para sis...
!
¿Qué es?
Es una serie de imágenes que muestran el layout, sin gráfica,
de las principales pantallas
¿Para qué sirve?
Para...
!
!
¿Qué es?
Es una serie de wireframes posicionados en una única gran
pizarra
¿Para qué sirve?
Para ejemplificar las relac...
!
!
¿Qué es?
Es una serie de wireframes o sketches que están vinculados
entre si (eventualmente tienen funcionalidades bás...
User testing
Guerrilla Lab Contextual Remote
Guerrilla De carácter informal, con bajo o nulo presupuesto
Lab De carácter formal, Alto presupuesto, segmentos de personas
Contextual De carácter informal, con el usuario
en su entorno habitual con sus herramientas habituales
Remote De carácter formal, en el contexto del usuario,
con alto control sobre la segmentación.
Mejoras constantes

Ciclos de iteración 
Supervisión colaborativa de desarrollo
Control de calidad Prototipos funcionales
...
usabilityhub.com
Click testfive second Nav
Analizemos un par de sitios desde el punto de vista de los usuarios….
Mamá 50 años.
Tratando de
contratar pack para
el hogar
Mamá 50 años.
Tratando de
contratar pack para
el hogar
Usuario que sólo
tiene TV contratado
Hombre 50 años
tratando de
escoger un servicio
Usuario tratando de
aprovechar la
portabilidad
Usuario tratando de
aprovechar la
portabilidad
Usuario
conociendo el
servicio de puntos
Usuario tratando de
contratar un
servicio de internet
¿Mucha
información?
o Ordenada
Explicación de
cada item
Selección de
productos sin ser
tan ambiciosos
gráficamente
Elementos de
interacción.
Breadcrum,
selectores de valor,
Nombres,
Gráfica de tallas y
colores
¿Cómo se ve
realmente?
¿Tipo de pantalón?
¿Dónde encontrar patrones?
http://www.welie.com/patterns/
http://littlebigdetails.com/
http://ui-patterns.com/
http://www.pttrns.com/
http://useyourinterface.com/
https://www.dropbox.com/sh/d46s7au90ouqbaf/AACSia7fDQEJ7o1Ca1rSSEUHa
Wireflows
!
¿Para qué sirve?
Para ejemplificar las relaciones entre una pantalla y la otra con tal de validar la lógica de e...
Generar un espacio de interacción
Contar una historia con los wireframes sobre la experiencia de un usuario
en búsqueda de...
¿Qué es lo más importante?
• Descripción de pasos y necesidades de la persona
• “Leo donde dice “muebles”.
• Hace click en...
Básicamente
• Articular los wireframes para el flujo de una persona.
• En este caso nuestros dos personas tratando de resol...
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Clase Diseño para la interacción
Próxima SlideShare
Cargando en…5
×

Clase Diseño para la interacción

1.331 visualizaciones

Publicado el

Clase de Diseño para la interacción.

Publicado en: Diseño

Clase Diseño para la interacción

  1. 1. Diseño de interacción
  2. 2. Diseño de para la interacción
  3. 3. “En 1990 Bill Moggridge, director de la firma de diseño IDEO, se dio cuenta de que él y algunos de sus colegas habían estado produciendo una clase de diseño muy diferente. No era exactamente diseño de producto. Tampoco era diseño de comunicación, aunque habían usado algunas de las herramientas de esta disciplina. No era tampoco ciencias de la computación, aunque una gran parte tenía que ver con software. ! No, era algo diferente. Se apoyaba en todas estas disciplinas, pero era algo más, y tenía que ver con conectar personas a través de los productos que usaban. Moggridge denominó a esta nueva práctica diseño de interacción”.
  4. 4. Interacción / Interfaz ¿diferencias?
  5. 5. El diseño de interacción es una disciplina práctica acerca del comportamiento, sobre cómo se comportan las personas utilizando productos y cómo se comportan dichos productos; y sobre cómo armonizar la relación interactiva entre ambos comportamientos.
  6. 6. Esta interacción tiene lugar sobre la interfaz de usuario, entendida como el conjunto de dispositivos hardware (de entrada y salida) y el software que posibilitan el intercambio de mensajes o instrucciones entre el usuario y el ordenador.
  7. 7. 1) Formulación del objetivo. Qué queremos lograr. ! 2) Ejecución. Qué hacemos: • Formular nuestra intención • Especificar la acción • Ejecutar la acción ! ! 3) Evaluación. Comparar qué ha ocurrido con qué querríamos que ocurriera tras nuestra acción: • Percibir el estado (o respuesta) del sistema • Interpretar el estado del sistema • Evaluar el resultado! D. Norman.
  8. 8. Este modelo nos permite identificar en qué momentos se pueden producir problemas de uso para el usuario en forma de inconexión entre los estados mentales del usuario (qué pretende conseguir y cómo) y los estados físicos del sistema (qué funciones permite y cómo induce a realizarlas). Estos problemas o brechas en la interacción11 son básicamente dos: la brecha en la ejecución y la brecha en la evaluación.
  9. 9. La brecha en la ejecución se produce cuando no somos capaces de relacionar qué pretendemos lograr y cómo llevar a cabo la acción con las opciones que nos ofrece el sistema. La brecha en la evaluación, en cambio, se produce cuando no somos capaces de interpretar la respuesta del sistema ante nuestra acción o cuando esta respuesta no se corresponde con la que esperábamos.
  10. 10. 1) Líneas de comandos
 2) Menús de selección o navegación 3) Formularios
 4) Diálogo basado en lenguaje natural 5) Manipulación directa Estilos de Interacción Preece y otros (1994) y Shneiderman (1997)
  11. 11. Líneas de comando En estos sistemas, el usuario debe introducir a través de un prompt, instrucciones o comandos que pueden ser combinados con parámetros. Tras la introducción de un comando, el sistema evalúa la instrucción y la ejecuta, o devuelve un mensaje de error en caso de que el usuario haya cometido algún error en la instrucción.
  12. 12. Menús de selección o navegación En este estilo de interacción el sistema le presenta al usuario la lista de opciones o comandos posibles en cada momento y el usuario sólo ha de elegir aquella opción u opciones que se correspondan con su objetivo. A diferencia de las líneas de comandos, este estilo de interacción resulta mucho más fácil de usar para usuarios inexpertos, ya que permite reconocer cómo llevar a cabo la acción, en vez de tener que recordar o conocer previa- mente el comando requerido.
  13. 13. Formularios Los formularios representan un estilo de interacción que utiliza la metáfora de los formularios clásicos en papel. En éstos se presentan una serie de campos, con sus etiquetas asociadas, que el usuario debe introducir o completar. En muchos casos incluyen elementos propios del estilo de interacción anteriormente explicado, como listas desplegables, casillas de verificación o botones de opción.
  14. 14. Diálogo basado en lenguaje natural Aunque éste es un estilo de interacción sobre el que los autores llevan mucho tiempo escribiendo e investigando (principalmente en el campo de la inteligencia artificial y la lingüística), la realidad es que a día de hoy sigue sin ser posible interactuar con los ordenadores (u otros productos) utilizando el lenguaje natural.
  15. 15. Manipulación directa La manipulación directa es aquel estilo de interacción que permite al usuario manipular y controlar físicamente los elementos presentes en la interfaz, incluyendo la posibilidad de seleccionar, arrastrar o mover objetos, así como la de deshacer las acciones realizadas. En este estilo de interacción, tanto el estado del sistema como el resultado de nuestras acciones deben ser visibles en todo momento.
  16. 16. Metáforas Affordances
  17. 17. Metáforas El uso de metáforas forma parte intrínseca del lenguaje y, por tanto, de nuestro pensamiento. Una metáfora consiste en usar una palabra o expresión para referirse a un concepto, que no es denotado de modo literal, sino en sentido figurado sobre la base de determinadas semejanzas entre ambos.
  18. 18. Affordances “Pensemos en unas tijeras: incluso si nunca has visto o usado unas antes, puedes ver que el número de posibles acciones es limitado. Los agujeros están claramente para introducir algo, y las únicas cosas lógicas que se ajustan son los dedos. Los agujeros son autoexplicativos: permiten introducir los dedos. El tamaño de los agujeros limita los posibles dedos a introducir: el agujero grande permite varios dedos, el agujero pequeño sólo uno”. D. Norman.
  19. 19. Affordances = Propiciar. D. Norman.
  20. 20. Principios para la interacción !
  21. 21. Anticipación Las aplicaciones deberían intentar anticiparse a las necesidades y deseos del usuario.
  22. 22. Objetos humanos Los objetos humanos de la interfaz se comportan de manera estándar por lo que se facilita su uso.
  23. 23. Protege el trabajo del usuario Asegúrate de que el usuario nunca pierda su trabajo como resultado de un error suyo, los problemas de internet u otro tipo de problemas inevitables, como un apagón.
  24. 24. Alinear experiencias y expectativas Consiste en realizar modelos conceptuales que se comporten de la manera en que espera el usuario (modelo mental).
  25. 25. Consistencia Frente al mismo estímulo, la misma decisión. Es tan importante ser visualmente inconsistente con los objetos que se comportan de forma distinta, como ser consistente con los que se comportan de igual manera. Evita la uniformidad. Haz que los objetos que se comportan distinto parezcan distintos. La consistencia más importante es aquella que espera el usuario. La única manera de comprobar las expectativas del usuario es hacer pruebas con ellos.
  26. 26. Carga Cognitiva El usuario no debe ser obligado a retener información crítica para el funcionamiento del sistema. Deja que el sistema haga todo el trabajo que le sea posible con tal de que el usuario se enfoque en las tareas en las que su participación es crítica.
  27. 27. Minimalismo funcional Todo debe ser tan simple como sea posible, pero no más simple que eso. Evita funcionalidades superfluas. Separa tareas complejas en minitareas. Limita las funcionalidades en pro de la experiencia.
  28. 28. Flow El engagement aumenta cuando un usuario siente que la tarea que ejecuta es lo suficientemente demandante como para que sea entretenida, y no es tan difí cil como para que llegue a ser frustrante.
  29. 29. Functional layering Según la ley de Pareto (80 -20) el 20% de las funcionalidades son usadas el 80% de las veces. Debemos hacer que las funcionalidades más recurrentes sean más fáciles de encontrar. Debemos entregar herramientas a los usuarios más experimentados para que ejecuten las tareas de manera más rápida (aunque sea un tanto menos lógica).
  30. 30. Control y confianza Si el usuario se siente en control de lo que sucede en la interacción eventualmente presentará confianza en el funcionamiento de esta por lo que se sentirá en condiciones de explorarla de manera más abierta.
  31. 31. Prevención, detección y recuperación de errores Prevenir errores: • Deshabilita funciones que no son útiles • Usa los patrones de interacción correctos para permitir el ingreso de data por parte del usuario • Entrega instrucciones claras y precisas Detectar errores • Entrega feedback al usuario en el caso que se presuma que pueda estar cometiendo un error Recuperación de errores • Si el error ya fue cometido siempre dale al usuario maneras de deshacerlo • Si una acción es crítica y no puede ser deshecha indícalo antes de su ejecución
  32. 32. Waterfall ! Agile ! Dos vertientes metodológicas
  33. 33. Agile !
  34. 34. Agile !
  35. 35. Agile !
  36. 36. “Todo proyecto parte con presunciones”
  37. 37. Creemos que ______________________ Para este segmento ______________________ Lograremos ______________________ Veremos que es verdad cuando pase ______________________
  38. 38. MVP
  39. 39. “No diseñes un producto, diseña un experimento”
  40. 40. Entregables. La traducción diseñístico - humano
  41. 41. ¿Qué es? Es un board que se llena según los recuadros descritos ¿Para qué sirve? Para sistematizar los antecedentes y definiciones preliminares de diseño ¿Cuándo realizarlo? Al principio del proyecto ! Contenido: • Gancho de la idea • Forma • Acción esperada • Métricas • Canales • Detonador de uso • Persona (usuario) • Recursos involucrados • Resultados esperados Content Strategy Canvas
  42. 42. ! ! ! ¿Qué es? Es una ficha con descriptores de los usuarios arquetípicos de mi idea ¿Para qué sirve? Para entender a los usuarios, sus intereses, motivaciones, contextos de uso, preocupaciones, etc. ¿Cuándo realizarlo? Al principio del proyecto ! ¿Cómo se hace? • Se definen arquetipos de usuarios • Se hacen entrevistas con los 
 involucrados • Se crean fichas por cada usuario mencionando sus características como si estuviéramos definiendo a una persona real ! Personas
  43. 43. ! ! ¿Qué es? Es una historia dibujada de formas de uso de la idea ¿Para qué sirve? Para focalizarse en lo central de la idea, para revisar la lógica de la idea, para comunicar el concepto de manera fácil ¿Cuándo realizarlo? Cuando se tienen las primeras ideas, usuarios y contextos de uso ! ¿Cómo se hace? • Se definen las tareas y usuarios a dibujar • Se establece el guión • Se dibuja la historia • Se evalúa su resultado ! Storyboarding
  44. 44. ! ! ! ¿Qué es? Es una sistematización de las mejores ideas de otros proyectos existentes ¿Para qué sirve? Para no inventar la rueda, para no cometer los mismos errores de otros, para diferenciarme de mi competencia ¿Cuándo realizarlo? Al momento de empezar un proyecto que ya está relativamente definido en su contexto ! ¿Cómo se hace? • Se definen los referentes a analizar • Se analizan rescatando lo bueno y lo malo • Se establecen conclusiones haciendo énfasis en las ideas que me sirven ! ! Benchmarks
  45. 45. ! ! ! ¿Qué es? Es un listado detallado de todas las posibles funcionalidades que puede tener nuestra idea ¿Para qué sirve? Para definir y jerarquizar las funcionalidades de nuestro proyecto ¿Cuándo realizarlo? Al momento de tener la idea clara, los usuarios estudiados y los referentes analizados ! ¿Cómo se hace? • Se crea una tabla con todas las posibles funcionalidades del sistema • Se asignan niveles de importancia y complejidad a cada funcionalidad • Se definen las funcionalidades que van finalmente en la solución ! Capacidades del sistema
  46. 46. ! ¿Qué es? Es una dinámica de organización de contenidos ¿Para qué sirve? Para obtener información respecto de cuál es la manera más lógica de agrupar contenido ¿Cuándo realizarlo? Al momento de tener los contenidos delineados y/o definidos ¿Cómo se hace? • Se invita a varios grupos de usuarios a una sesión de trabajo • Se le entregan postits (definidos o en blanco) con los contenidos del proyecto • Se les pide que organicen los postits en secciones (ya definidas o por crearse) • Se realiza un reporte de los resultados ! ! ! ! Card sorting
  47. 47. ! ! ! ¿Qué es? Es un diagrama de ordenamiento de secciones y sus contenidos ¿Para qué sirve? Para visualizar las distintas pantallas de la solución y sus relaciones ¿Cuándo realizarlo? Al momento de tener definidos los contenidos ¿Cómo se hace? • Se recopilan los contenidos que deben formar parte del proyecto • Se establecen cuáles serán las páginas que formarán parte del proyecto • Se establecen secciones donde se encontrará cada página • Se definen relaciones jerárquicas entre cada pantalla • Se crea un diagrama que lo especifique ! Site Maps
  48. 48. ! ! ¿Qué es? Es un diagrama de ordenamiento de procesos y tareas ¿Para qué sirve? Para visualizar la manera en que las distintas tareas son realizadas (paso a paso) y encontrar posibles errores de lógica ¿Cuándo realizarlo? Al momento de tener definidas las capacidades del sistema ¿Cómo se hace? • Se definen las tareas a visualizar • Se establecen los pasos necesarios para 
 realizar una tarea • Se buscan los puntos de bifurcación y se establecen rutas alternativas • Se crea un diagrama que explica las distintas posibilidades de interacción ! ! ! ! Task flows
  49. 49. ! ¿Qué es? Es un diagrama que muestra la interacción ideal de un usuario con el proyecto ¿Para qué sirve? Para que al momento de diseñar el proyecto podamos priorizar evidentemente el flujo ideal ¿Cuándo realizarlo? Al momento de tener definidas las capacidades del sistema ¿Cómo se hace? • Se definen las tareas más relevantes • Se determina la ruta o los pasos ideales con los que un usuario debería relacionarse con el sistema • Se determinan los puntos clave • Se visualizan en una serie de diagramas simples ! ! ! ! ! Ideal Task Flows
  50. 50. ! ! ¿Qué es? Es un proceso de bocetaje de las principales ideas del proyecto (no sólo pantallas) ¿Para qué sirve? Para sistematizar y visualizar las ideas y sus posibles soluciones ¿Cuándo realizarlo? Al momento de tener definidas las capacidades del sistema (*mapa de navegación) ¿Cómo se hace? • Se definen las ideas a bocetear • Se establecen las variables que 
 conforman cada idea • Se realizan múltiples iteraciones hasta encontrar las mejores soluciones • Se realizan anotaciones que permitan argumentar, detallar o invalidar una idea ! ! ! Sketching
  51. 51. ! ¿Qué es? Es una serie de imágenes que muestran el layout, sin gráfica, de las principales pantallas ¿Para qué sirve? Para especificar el diseño de layout de cada página y comprobar su funcionalidad (usabilidad) ¿Cuándo realizarlo? Al momento de concluir conforme el proceso de sketching ¿Cómo se hace? • Se determinan las pantallas que forman parte de la médula del proyecto (plantillas a prototipar) • Se crean las pantallas utilizando un software de wireframing (Axure, Omnigraffle) • Se validan los resultados con usuarios • Se realizan iteraciones hasta estar convencido de la solución ! ! ! ! ! Wireframes
  52. 52. ! ! ¿Qué es? Es una serie de wireframes posicionados en una única gran pizarra ¿Para qué sirve? Para ejemplificar las relaciones entre una pantalla y la otra con tal de validar la lógica de estas en su contexto ¿Cuándo realizarlo? Paralelamente al proceso de wireframing ¿Cómo se hace? • Se posicionan los wireframes sobre una superficie que permita de un vistazo ver el «big picture» • Se trazan conectores entre las pantallas que están relacionadas • Se realizan comentarios escritos sobre la pizarra para que faciliten el entendimiento del documento ! ! ! ! Wireflows
  53. 53. ! ! ¿Qué es? Es una serie de wireframes o sketches que están vinculados entre si (eventualmente tienen funcionalidades básicas también) ¿Para qué sirve? Para testear con usuarios determinados flujos de tareas ¿Cuándo realizarlo? Cuando se tienen listos los wireframes o sketches asociados a un flujo de tarea ¿Cómo se hace? • Se determina la tarea a testear • Se realizan los wireframes o sketches que 
 forman parte de la tarea • Se les agrega funcionalidad • Se ejecuta el proceso de testeo • Se realizan cambios según los resultados obtenidos ! ! ! Prototipado interactivo
  54. 54. User testing
  55. 55. Guerrilla Lab Contextual Remote
  56. 56. Guerrilla De carácter informal, con bajo o nulo presupuesto
  57. 57. Lab De carácter formal, Alto presupuesto, segmentos de personas
  58. 58. Contextual De carácter informal, con el usuario en su entorno habitual con sus herramientas habituales
  59. 59. Remote De carácter formal, en el contexto del usuario, con alto control sobre la segmentación.
  60. 60. Mejoras constantes
 Ciclos de iteración Supervisión colaborativa de desarrollo Control de calidad Prototipos funcionales
 User testings
 Evaluación de KPIs
 etc...
  61. 61. usabilityhub.com
  62. 62. Click testfive second Nav
  63. 63. Analizemos un par de sitios desde el punto de vista de los usuarios….
  64. 64. Mamá 50 años. Tratando de contratar pack para el hogar
  65. 65. Mamá 50 años. Tratando de contratar pack para el hogar
  66. 66. Usuario que sólo tiene TV contratado
  67. 67. Hombre 50 años tratando de escoger un servicio
  68. 68. Usuario tratando de aprovechar la portabilidad
  69. 69. Usuario tratando de aprovechar la portabilidad
  70. 70. Usuario conociendo el servicio de puntos
  71. 71. Usuario tratando de contratar un servicio de internet
  72. 72. ¿Mucha información? o Ordenada
  73. 73. Explicación de cada item
  74. 74. Selección de productos sin ser tan ambiciosos gráficamente
  75. 75. Elementos de interacción. Breadcrum, selectores de valor, Nombres,
  76. 76. Gráfica de tallas y colores
  77. 77. ¿Cómo se ve realmente?
  78. 78. ¿Tipo de pantalón?
  79. 79. ¿Dónde encontrar patrones?
  80. 80. http://www.welie.com/patterns/
  81. 81. http://littlebigdetails.com/
  82. 82. http://ui-patterns.com/
  83. 83. http://www.pttrns.com/
  84. 84. http://useyourinterface.com/
  85. 85. https://www.dropbox.com/sh/d46s7au90ouqbaf/AACSia7fDQEJ7o1Ca1rSSEUHa
  86. 86. Wireflows ! ¿Para qué sirve? Para ejemplificar las relaciones entre una pantalla y la otra con tal de validar la lógica de estas en su contexto ¿Cómo se hace? • Se posicionan los wireframes sobre una superficie que permita de un vistazo ver el «big picture» • Se trazan conectores entre las pantallas que están relacionadas • Se realizan comentarios escritos sobre la pizarra para que faciliten el entendimiento del documento
  87. 87. Generar un espacio de interacción Contar una historia con los wireframes sobre la experiencia de un usuario en búsqueda de resolver una necesidad
  88. 88. ¿Qué es lo más importante? • Descripción de pasos y necesidades de la persona • “Leo donde dice “muebles”. • Hace click en muebles y se despliega un menú • Escoge “Dormitorio” • Accede a un landing de Muebles de dormitorio
  89. 89. Básicamente • Articular los wireframes para el flujo de una persona. • En este caso nuestros dos personas tratando de resolver las dos principales tareas más importantes.

×