Usabilidad en Proyectos Digitales
-
Upload
sofia-savoy -
Category
Design
-
view
257 -
download
1
description
Transcript of Usabilidad en Proyectos Digitales
Usabilidad enProyectos Digitales
Sofía Savoy Anguita | Arquitecto de Información
UCD · UX · IA
Usabilidad1
Usabilidad
¿QUÉ ES LA USABILIDAD?La usabilidad es la facilidad de uso de
sistemas, productos o servicios con los que interactúa un usuario
Usabilidad
Diseño centrado en el usuarioUsabilidad Diseño
Diseño Centrado en el Usuario (UCD)
¿QUÉ ES EL DISEÑO CENTRADO EN EL USUARIO?
Es el diseño de productos, servicios o dispositivos enfocados a las necesidades de los usuarios, a brindarles satisfacción
y cumplir sus expectativas
Diseño Centrado en el Usuario (UCD)
Usabilidad Experiencia de Usuario
accesibles amigables atractivos
Experiencia de Usuario (UX)
¿QUÉ ES LA EXPERIENCIA DE USUARIO?
Es el nivel de satisfacción que experimenta un usuario al interactuar con cualquier servicio, dispositivo o producto
Experiencia de Usuario (UX)
Wireframes (WF)
Arquitectura de Información (AI)
Diseño de Interacción (IxD)
Diseño de Interfaz (UI)UX
Análisis y Contenido Ingeniería y Desarrollo
Experiencia de Usuario (UX)
Investigación
Contenido
Diseño estructural
Diseño Funcional
Producto
Arquitecturade Información2
Arquitectura de Información (IA)
¿QUÉ ES LA ARQUITECTURA DE INFORMACIÓN?
Es la disciplina encargada de estudiar, analizar, organizar y estructurar la
información de un sistema, logrando que el acceso a ella sea eficiente
Arquitectura de Información (IA)
¿PARA QUÉ SIRVE?Sirve para que cualquier espacio de información,
ya sea simple o complejo, permita al usuario:
• Acceder sin dificultades y de manera amigable
• Encontrar lo que busca o utilizar el sistema sin complicaciones
• Obtener una grata experiencia
Metodologías: Card Sorting
CARD SORTINGEs una técnica que permite definir la organización y distribución de las
categorías o contenidos
Metodologías: Mapa de Navegación y Etiquetado
MAPA DE NAVEGACIÓN Y ETIQUETADO
Es la jerarquización del contenidos y nombramiento adecuado de las
secciones según los criterios de búsqueda
Metodologías: Personas y Escenarios
PERSONAS Y ESCENARIOSTécninca que se basa en pensar en los
potenciales usuarios e identificar casos de uso para cada uno de ellos.
Metodologías: Wireframes
WIREFRAMESLos wireframes son la jerarquización
visual de los contenidos; son la estructura o esqueleto de nuestro diseño
Metodologías: Wireframes
Arquitectura de Información (IA)
usuarios contenido
contexto
IA
Estrategia de Contenido: Mapa de Navegación
Elementos visuales
Página(s) Documento(s) Enlace externo
Estrategia de Contenido: Mapa de Navegación
HOMEGreenpeace
Kumi Naidoo
Acerca de nosotros Qué hacemos Noticias/Blog Multimedia Involúcrate Donar
Victorias de Greenpeace
Historia y éxito
Organización
Preguntas frecuentes
Cambio climático
Ártico Haciendo holas
Reacción nuclear
Soluciones
Bosques
Mar
Redes Sociales
Centro de Prensa
Tierra
ContactoLogin / Registro
Suscripción a Newsletter
Registro Activista
Buscador Selector Países
HOME
CONTENIDO AUXILIAR
1º NIVEL DE NAVEGACIÓN
2º NIVEL DE NAVEGACIÓN
FUNC. GENERALES
Estrategia de Contenido: Mapa de Navegación
Conclusiones
BENEFICIOS DE SER METODOLÓGICOS
• Evitar correcciones sobre la marcha
• Reducir tiempos en la producción final
• Claridad del proyecto para todas las áreas
• Motivar el trabajo multidisciplinario
Wireframes3
Wireframes
¿QUÉ SON LOS WIREFRAMES?Los wireframes son la jerarquización
visual de los contenidos; son la estructura o esqueleto de nuestro diseño, de
cualquier tipo de interfaz digital
Wireframes
¿PARA QUÉ SIRVEN?Sirven para mostrar el contenido, definir las
funcionalidades, conectar lo conceptual con lo visual, organizando:
• La información que será mostrada
• Las funciones disponibles
• Las reglas para mostrar cierto tipo de información
Wireframes
LOS WIREFRAMES DEBEN• Ser simples, pero no descuidados
• Representar los elementos gráficos esquemáticamente
• Utilizar escala de grises
• Evitar utilizar más de una tipografía
• Usar contenido real siempre que sea posible
Wireframes
Comenzar desde el papel...
Construcción de los Wireframes: Plantillas principales
DEFINIR PLANTILLAS PRINCIPALES
• Home
• Categoría principal
• Interior tipo
• Página de acción
Plantillas
Listado de plantillas
PLANTILLA TIPO COMENTARIOS
Home Home
Menú ContenidoSe presenta un submenú con cada categoría. Se mantiene fijo en el borde superior de la pantalla cuando se hace scroll
Historia Contenido Presencia de imágenes
Blog Artículos Repositorio de artículos
Contacto Formulario Información más formulario de contacto simple
Construcción de los Wireframes
PARA COMENZAR
• Revisar los contenidos a destacar o reforzar
• Definir qué plus, innovación o tecnología aplicaremos
• Considerar las distintas resoluciones de pantalla
Construcción de los Wireframes: Sitio de ejemplo
Ejemplo de sitio web: http://www.agra-culture.com
Construcción de los Wireframes: Mapa de navegación
Ejemplo modificado desde: http://www.agra-culture.com
HOME
CONTENIDO AUXILIAR
1º NIVEL DE NAVEGACIÓN
2º NIVEL DE NAVEGACIÓN
FUNCIONALIDADES GENERALES
HOME
Menú Historia Detox Catering Delivering
Blog
DesayunoAlmuerzo/Cena
Grab & GoTragos
Contacto
Información Nutricional
Solicitud de Empleo
Locaciones
Articulos
RRSS (fb, pinterest, instagram, tw,
Artículos por categoría
Artículos pormes/año
Compartir porFB, TW y mail Newsletter
Construcción de los Wireframes: Home
HOME
Menú Historia Detox Catering Delivering
Blog
DesayunoAlmuerzo/Cena
Grab & GoTragos
Contacto
Información Nutricional
Solicitud de Empleo
Locaciones
Articulos
RRSS (fb, pinterest, instagram, tw,
Artículos por categoría
Artículos pormes/año
Compartir porFB, TW y mail Newsletter
Welcome to Agra Culture.Now open in uptown.
Learn more >
Want to see what we’re cooking up?
View our menu >
< Catering Menu | Story | Detox | Locations | Contact Delivery >
What we believe
“Eating is an agricultural act.”Wendell Berry, Agricultural Philosopher
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Join our eat well, be well culture.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
Enter your email address Sign me up!
Home | Menu | Story | Detox | Locations
Contact Blog Catering Delivery
Healthy fast-casual food, crafted with love in minnieapolis
©Agra Culture Kitchen & Press | All Rights Reserved
Welcome to Agra Culture.Now open in uptown.
Learn more >
Want to see what we’re cooking up?
View our menu >
< Catering Menu | Story | Detox | Locations | Contact Delivery >
What we believe
“Eating is an agricultural act.”Wendell Berry, Agricultural Philosopher
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Join our eat well, be well culture.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
Enter your email address Sign me up!
Home | Menu | Story | Detox | Locations
Contact Blog Catering Delivery
Healthy fast-casual food, crafted with love in minnieapolis
©Agra Culture Kitchen & Press | All Rights Reserved
Construcción de los Wireframes: Home
Construcción de los Wireframes: Categoría Principal
HOME
Menú Historia Detox Catering Delivering
Blog
DesayunoAlmuerzo/Cena
Grab & GoTragos
Contacto
Información Nutricional
Solicitud de Empleo
Locaciones
Articulos
RRSS (fb, pinterest, instagram, tw,
Artículos por categoría
Artículos pormes/año
Compartir porFB, TW y mail Newsletter
Our menu
< Catering Menu | Story | Detox | Locations | Contact Delivery >
organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn tortillas, wrapped in a flour tortilla or with toast
Breakfast Lunch/Dinner Grab & Go Drinks
Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info
BreakfastServed 7-10:30am daily
Farm Scrambles
Simple Salads
The American
Applewood smoked bacon, spinach, truffled wild mushrooms, onion, white cheddar, fresh parsley
(nutrition facts shown for eggs)
Cal: 340 · Fat: 26g · Carbs: 5g · Protein: 20g
The Mediterranean
asparagus, roasted red peppers, kalamata olives, grape tomatoes, arugula, feta cheese
(nutrition facts shown for eggs)
Cal: 270 · Fat: 20g · Carbs: 6g · Protein: 15g
El Granjero
Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo
(nutrition facts shown for eggs)
Cal: 490 · Fat: 38g · Carbs: 7g · Protein: 29g
Breakfast sandwiches & non. wiches
Arugula & bacon
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 340 · Fat: 26g · Carbs: 5g · Protein: 20g
Wilted greens
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
Cal: 270 · Fat: 20g · Carbs: 6g · Protein: 15g
Kale pesto & prosciutto
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 490 · Fat: 38g · Carbs: 7g · Protein: 29g
Trimmings
Seasonal hash
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Granola parfait
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.
Roasted apple sauce
Lorem ipsum dolor sit amet.
Lorem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.
Dolor sit
Lorem ipsum dolor sit amet.
Elit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Set diam
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.
Sit amet
Lorem ipsum dolor sit amet.
Lunch & Dinner
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Porridges
Muesli
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 340 · Fat: 26g · Carbs: 5g · Protein: 20g
Quinoa (hot)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
Cal: 270 · Fat: 20g · Carbs: 6g · Protein: 15g
Oatmeal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 490 · Fat: 38g · Carbs: 7g · Protein: 29g
Our menu
< Catering Menu | Story | Detox | Locations | Contact Delivery >
organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn tortillas, wrapped in a flour tortilla or with toast
Breakfast Lunch/Dinner Grab & Go Drinks
Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info
BreakfastServed 7-10:30am daily
Farm Scrambles
Simple Salads
The American
Applewood smoked bacon, spinach, truffled wild mushrooms, onion, white cheddar, fresh parsley
(nutrition facts shown for eggs)
Cal: 340 · Fat: 26g · Carbs: 5g · Protein: 20g
The Mediterranean
asparagus, roasted red peppers, kalamata olives, grape tomatoes, arugula, feta cheese
(nutrition facts shown for eggs)
Cal: 270 · Fat: 20g · Carbs: 6g · Protein: 15g
El Granjero
Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo
(nutrition facts shown for eggs)
Cal: 490 · Fat: 38g · Carbs: 7g · Protein: 29g
Breakfast sandwiches & non. wiches
Arugula & bacon
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 340 · Fat: 26g · Carbs: 5g · Protein: 20g
Wilted greens
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
Cal: 270 · Fat: 20g · Carbs: 6g · Protein: 15g
Kale pesto & prosciutto
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 490 · Fat: 38g · Carbs: 7g · Protein: 29g
Trimmings
Seasonal hash
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Granola parfait
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.
Roasted apple sauce
Lorem ipsum dolor sit amet.
Lorem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.
Dolor sit
Lorem ipsum dolor sit amet.
Elit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Set diam
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.
Sit amet
Lorem ipsum dolor sit amet.
Lunch & Dinner
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Porridges
Muesli
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 340 · Fat: 26g · Carbs: 5g · Protein: 20g
Quinoa (hot)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
Cal: 270 · Fat: 20g · Carbs: 6g · Protein: 15g
Oatmeal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Cal: 490 · Fat: 38g · Carbs: 7g · Protein: 29g
Construcción de los Wireframes: Categoría Principal
Construcción de los Wireframes: Interior Tipo
HOME
Menú Historia Detox Catering Delivering
Blog
DesayunoAlmuerzo/Cena
Grab & GoTragos
Contacto
Información Nutricional
Solicitud de Empleo
Locaciones
Articulos
RRSS (fb, pinterest, instagram, tw,
Artículos por categoría
Artículos pormes/año
Compartir porFB, TW y mail Newsletter
What’s fresh at agra?
< Catering Menu | Story | Detox | Locations | Contact Delivery >
Now that we are close to opening the Agra doors, here’s a little glimpse into our backstory and what we’ve been up to for the past few months.
A huge thanks to our local vendors who’ve helped us get to this point.
We developed relationships with Prescribe Nutrition and Everyday Table, and both were essential to the development of our meal plans and have given us tons of guidance on nutrition, dietary lifestyles, and food sensitivities. SO grateful for their mastery of our menu!
Our physical space is almost ready, and we’ve loved getting to work with such talented artists. Their crafts have added dimension and authenticity to our interior. Check out Menomin Resawn Timbers and Hans Thorkelson of Lux Architectural Finishing!
Thank you to our partners05/07/2014
Post categories
All categories
Press & media
Store opening
Tweets
Archives May 2014
Follow us
And where would we be without our brand?! Our ideas were perfectly styled and executed through our logo design by Studio Prow and Betsy Baldwin Design, in addition to bringing the Agra brand experience to life through the design and build of our website by PH Digital Labs – Agra Culture “is” because of them. A special shout out to our fabulous photographer, Isabel Subtil and her gorgeous food photos too!
Category: Press & media Store opennings
Share this article
What’s fresh at agra?
< Catering Menu | Story | Detox | Locations | Contact Delivery >
Now that we are close to opening the Agra doors, here’s a little glimpse into our backstory and what we’ve been up to for the past few months.
A huge thanks to our local vendors who’ve helped us get to this point.
We developed relationships with Prescribe Nutrition and Everyday Table, and both were essential to the development of our meal plans and have given us tons of guidance on nutrition, dietary lifestyles, and food sensitivities. SO grateful for their mastery of our menu!
Our physical space is almost ready, and we’ve loved getting to work with such talented artists. Their crafts have added dimension and authenticity to our interior. Check out Menomin Resawn Timbers and Hans Thorkelson of Lux Architectural Finishing!
Thank you to our partners05/07/2014
Post categories
All categories
Press & media
Store opening
Tweets
Archives May 2014
Follow us
And where would we be without our brand?! Our ideas were perfectly styled and executed through our logo design by Studio Prow and Betsy Baldwin Design, in addition to bringing the Agra brand experience to life through the design and build of our website by PH Digital Labs – Agra Culture “is” because of them. A special shout out to our fabulous photographer, Isabel Subtil and her gorgeous food photos too!
Category: Press & media Store opennings
Share this article
Construcción de los Wireframes: Interior Tipo
Wireframes Navegables
MOSTRAR UN FLUJOLo ideal es hacer maquetas navegables para que exista un seguimiento de los pasos mientras los usuarios realizan la interacción, para así tener
feedback de lo que funciona y lo que no
Wireframes Navegables: Mockups
MOCKUPSLos mockups son similares a los wireframes, pero llevan color y se enfocan en mostrar y
detallar la interacción del producto para que la persona intuya qué debe hacer
Wireframes Navegables: Mockups
Documento Entregable4
Documentos Entregables
¿QUÉ ES UN ENTREGABLE?Es un documento que explica el contexto del
proyecto, la Arquitectura de Información y los wireframes fundamentales con sus
funcionalidades y comentarios
Documentos Entregables
¿PARA QUÉ SIRVE?Sirve para generar un discurso coherente que pueda ser comprendido por los involucrados
en el proyecto y por el cliente
Documentos Entregables
¿CÓMO SE ESTRUCTURA?Consta de una parte visual y otra escrita,
mostrando sobre lo que vamos a hablar y explicando en qué consiste
Documentos Entregables: Mapa
Documentos Entregables: Wireframes
Diseño Responsivo5
Diseño responsivo
El diseño responsivo permite que un sitio web se adapte a la resolución de cualquier dispositivo, visualizándose perfectamente.
Diseño responsivo
Utiliza una grilla fluída y media queries para controlar el diseño y su contenido al ser visualizado en los distintos dispositivos, creando una mejor experiencia de navegación.
Diseño responsivo
Un diseño limpio, estructurado y bien pensado será todo un éxito, pero es clave pensar además en la interacción de cada proceso.
Diseño Responsivo
¿CUALES SON SUS VENTAJAS?• Mejora la experiencia de navegación de los usuarios
• Favorece el posicionamiento en buscadores
• Ahorra costos de mantención al ser una sola web
• Ayuda a la accesibilidad del contenido
Diseño Responsivo: Liquid & Responsive
Diseño Líquido: Utiliza porcentajes para los anchos, permitiendo que las columnas sean relativas unas a otras y que el diseño se escale fluídamente
Diseño Responsivo: Utiliza una grilla fluída y media queries para controlar el diseño y su contenido al ser visualizado en distintos dispositivos
Diseño Responsivo: Liquid & Responsive
Liquid 1440px
Diseño Responsivo: Liquid & Responsive
Liquid 1024px
Diseño Responsivo: Liquid & Responsive
Liquid 768px Liquid 320px
Responsive 1440px
Diseño Responsivo: Liquid & Responsive
Responsive 1024px
Diseño Responsivo: Liquid & Responsive
Responsive768px
Diseño Responsivo: Liquid & Responsive
Responsive320px
Diseño Responsivo: Contenido
Diseño Responsivo: Contenido
1440px 1024px 960px 768px 320px
Diseño Responsivo: Imágenes
Diseño Responsivo: Imágenes
Desktop
Diseño Responsivo: Imágenes
Laptop
Diseño Responsivo: Imágenes
Tablet (landscape)
Diseño Responsivo: Imágenes
Tablet (portrait)Mobile
Diseño Responsivo: Tipografía
Diseño Responsivo: Tipografía
(Desktop)
(Mobile)
(48px)
(32px)
(26px)
(28px)
(36px)
(22px)
(12px)(16px)
Diseño Responsivo: Interacción
Diseño Responsivo: Interacción
Diseño Responsivo: Interacción
Diseño de Interacción6
Diseño de Interacción
¿QUÉ ES EL DISEÑO DE INTERACCIÓN?
Es el modo de definir el comportamiento de nuestro producto respecto al usuario,
haciéndolo parte fundamental de las acciones en el proceso
Diseño de Interacción
¿PARA QUÉ SIRVE?Es necesario para determinar y desarrollar
las interacciones de un espacio digital, dejando en claro cada paso o etapa presente en el flujo, creando así una mejor experiencia.
Diseño de Interacción: Esquemas
• Las tareas se le darán al usuario
• Sus acciones respecto a las tareas
• La respuesta del sistema a partir de la acción
¿QUÉ ASPECTOS BÁSICOS DEBEMOS CONSIDERAR?
Diseño de Interacción: Esquemas
Supongamos que tenemos una campaña...
USUARIO (FB o TW connect)
PREGUNTA 1 (1 de 3 opciomes )
PREGUNTA 2 (1 de 3 opciomes )
PREGUNTA 3 (1 de 3 opciomes )
responder trivias
Mensaje de “felicitaciones ya estás participando” y compartir automáticamente en FB o TW
Diseño de Interacción: Diagrama de flujo
¿QUÉ ES UN DIAGRAMA DE FLUJO?Es un esquema que representa un proceso, mostrando el flujo de trabajo paso a paso. Se utiliza generalmente en programación
Diseño de Interacción: Diagrama de flujo
¿QUIÉNES LOS UTILIZAN?Se utiliza generalmente en programación,
economía, procesos industriales y psicología cognitiva
Diseño de Interacción: Diagrama de flujo
Simbología
Terminal Proceso Base deDatos
Punto de Decisión
Línea de flujo
Se guarda la
info
PARTICIPAR
¿Acepta los permisos?
FB Connect TW Connect
Permisos propios de la red seleccionada
SÍNO
FormularioDatos básicos
Pregunta NºX
¿Respuesta correcta?
SÍNO
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas las 3 preguntas
Mensaje felicitaciones
Diseño de Interacción: Diagrama de flujo
Se guarda la
info
PARTICIPAR
¿Acepta los permisos?
FB Connect TW Connect
Permisos propios de la red seleccionada
SÍNO
FormularioDatos básicos
Pregunta NºX
¿Respuesta correcta?
SÍNO
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas las 3 preguntas
Mensaje felicitaciones
Mensaje felicitaciones
Se guarda la
info
PARTICIPAR
¿Acepta los permisos?
FB Connect TW Connect
Permisos propios de la red seleccionada
SÍNO
FormularioDatos básicos
Pregunta NºX
¿Respuesta correcta?
SÍNO
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas las 3 preguntas
Mensaje felicitaciones
Diseño de Interacción: Diagrama de flujo
Se guarda la
info
PARTICIPAR
¿Acepta los permisos?
FB Connect TW Connect
Permisos propios de la red seleccionada
SÍNO
FormularioDatos básicos
Pregunta NºX
¿Respuesta correcta?
SÍNO
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas las 3 preguntas
Mensaje felicitaciones
Mensaje felicitaciones
Se guarda la
info
PARTICIPAR
¿Acepta los permisos?
FB Connect TW Connect
Permisos propios de la red seleccionada
SÍNO
FormularioDatos básicos
Pregunta NºX
¿Respuesta correcta?
SÍNO
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas las 3 preguntas
Mensaje felicitaciones
Diseño de Interacción: Diagrama de flujo
Se guarda la
info
PARTICIPAR
¿Acepta los permisos?
FB Connect TW Connect
Permisos propios de la red seleccionada
SÍNO
FormularioDatos básicos
Pregunta NºX
¿Respuesta correcta?
SÍNO
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas las 3 preguntas
Mensaje felicitaciones
Mensaje felicitaciones
Mensaje felicitaciones
Diseño de Interacción: Partituras de Interacción
¿QUÉ ES UNA PARTITURA DE INTERACCIÓN?
Es un lenguaje visual que permite graficar de forma práctica, precisa y amigable, un
flujo detallado de interacción
Diseño de Interacción: Partituras de Interacción
¿CUALES SON SUS BENEFICIOS?Es ideal para estructurar lo que será la
experiencia del usuario al navegar por el sitio, aplicación o campaña, y todas las
áreas involucradas tendrán conocimiento de ello, para aportar y corregir
Diseño de Interacción: Partituras de Interacción
Se guarda la
info
PARTICIPAR
¿Acepta los permisos?
FB Connect TW Connect
Permisos propios de la red seleccionada
SÍNO
FormularioDatos básicos
Pregunta NºX
¿Respuesta correcta?
SÍNO
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas las 3 preguntas
Mensaje felicitaciones
USUARIO (FB o TW connect)
responder trivias
PREGUNTA 1 (1 de 3 opciomes )
PREGUNTA 2 (1 de 3 opciomes )
PREGUNTA 3 (1 de 3 opciomes )
Mensaje de “felicitaciones ya estás participando” y compartir automáticamente en FB o TW
Mensaje felicitaciones
Diseño de Interacción: Partituras de Interacción
Estructura de las partituras
Ingresar a la campaña
Ingresar con FB
Ingresar con TW
Se rescatan los datos (nombre)
Completar Formulario
Enviar datos
Se guardan los datos (BBDD)
LANDING TRIVIA 1
Seleccionar una respuesta
Participar
Verificar opción seleccionada
!Respuesta incorrecta
Respuesta correcta
TRIVIA 2
Verificar opción seleccionada
CONTACTO DIRECTO
línea de interacción
línea de visibilidad
PROCESO INTERNO
ACCIONES DEL USUARIO
Diseño de Interacción: Partituras de Interacción
Estructura de las partiturasTRIVIA 1
Seleccionar una respuesta
Participar
Verificar opción seleccionada
!Respuesta incorrecta
Respuesta correcta
TRIVIA 2
Seleccionar una respuesta
Participar
Verificar opción seleccionada
!Respuesta incorrecta
Respuesta correcta
TRIVIA 3
Seleccionar una respuesta
Participar
Verificar opción seleccionada
!Respuesta incorrecta
Respuesta correcta
Verificar puntajey guardar info
CONTACTO DIRECTO
línea de interacción
línea de visibilidad
PROCESO INTERNO
ACCIONES DEL USUARIO
Diseño de Interacción: Partituras de Interacción
Estructura de las partiturasTRIVIA 2
Seleccionar una respuesta
Participar
Verificar opción seleccionada
!Respuesta incorrecta
Respuesta correcta
TRIVIA 3
Seleccionar una respuesta
Participar
Verificar opción seleccionada
!Respuesta incorrecta
Respuesta correcta
Verificar puntajey guardar info
Mensaje Perdedor
Mensaje Ganador
Se comparte automáticamente
en FB o TW
CONTACTO DIRECTO
línea de interacción
línea de visibilidad
PROCESO INTERNO
ACCIONES DEL USUARIO
Resumen
1. El análisis y contenido serán la base estratégica del corazón de nuestro servicio2. La arquitectura de información permitirá validar y organizar estos contenidos3. Los wireframes modelarán la estructura visual y jerárquica del contenido4. El diseño de interacción definirá el comportamiento del servicio y las acciones
del usuario5. El diseño de interfaz otorgará la capa visual emocional del producto6. Desarrollo e ingeniería serán quienes materialicen todo el proceso anterior
Recordemos que en un proyecto:
Exponentes
Richard Saul Wurman
Crea el término de Arquitecto de Información
y lo define como“la persona que organiza
los patrones inherentes a la información, haciendo
entendible lo complejo”
Louis RosenfeldPeter Morville
Aportan a la definición y al contenido referente a la
arquitectura de información
Jesse James Garrett
Crea el lenguaje visual para la estructuración
del contenido
Jakob NielsenSteve Krug
Desarrollan el ámbito de la usabilidad
Referencias
• Sergio Nouvel: Lean UX
• Maximiliano Martin: Diseño con sentido de negocios
• Casos de estudio de Fantasy Interactive
• Wireframes Magazine (documentación)
• UX Magazine (documentación)
• Smashing Magazine (documentación)
Referencias
• Sitios responsive
• Una escala de tipografía web más moderna
• Tipografía responsiva: lo básico
• Generador de grillas responsivas
• Sistema de grillas responsivas
• Golden grid system (grillas responsivas)
• CSSWizardry (grillas responsivas)
Referencias
• Diseño de Interacción
• Partituras de Interacción
• Recursos e Información
• Mapa de la experiencia del cliente
• Mapa del viaje del cliente
• The anatomy of an experience map
... gracias !
Sofía Savoy Anguita | Arquitecto de Información