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


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


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


¿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


usuarios contenido

contexto

IA

Estrategia de Contenido: Mapa de Navegación

Elementos visuales

Página(s) Documento(s) Enlace externo


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


FUNC. GENERALES

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

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



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


Blog


Grab & GoTragos

Contacto


Solicitud de Empleo

Locaciones

Articulos





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 >


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


Blog


Grab & GoTragos

Contacto


Solicitud de Empleo

Locaciones

Articulos





Our menu


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



El Granjero

Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo



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.


Wilted greens

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.


Kale pesto & prosciutto



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


Ipsum


Dolor sit


Elit


Set diam


Sit amet


Lunch & Dinner

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Porridges

Muesli



Quinoa (hot)



Oatmeal



Our menu


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



The Mediterranean

asparagus, roasted red peppers, kalamata olives, grape tomatoes, arugula, feta cheese



El Granjero

Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo



Breakfast sandwiches & non. wiches

Arugula & bacon



Wilted greens



Kale pesto & prosciutto



Trimmings

Seasonal hash


Granola parfait


Roasted apple sauce


Lorem


Ipsum


Dolor sit


Elit


Set diam


Sit amet


Lunch & Dinner

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Porridges

Muesli



Quinoa (hot)



Oatmeal



Construcción de los Wireframes: Categoría Principal

Construcción de los Wireframes: Interior Tipo

HOME


Blog


Grab & GoTragos

Contacto


Solicitud de Empleo

Locaciones

Articulos





What’s fresh at agra?


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?


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


¿PARA QUÉ SIRVE?Sirve para generar un discurso coherente que pueda ser comprendido por los involucrados

en el proyecto y por el cliente


¿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


Liquid 1440px


Liquid 1024px


Liquid 768px Liquid 320px

Responsive 1440px


Responsive 1024px


Responsive768px


Responsive320px

Grilla Responsiva

http://gridpak.com/

http://gridpak.com/

Grilla Responsiva

http://goldengridsystem.com

http://goldengridsystem.com

Diseño Responsivo: Contenido

Diseño Responsivo: Contenido

1440px 1024px 960px 768px 320px

Diseño Responsivo: Imágenes


Desktop


Laptop


Tablet (landscape)


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



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


¿QUIÉNES LOS UTILIZAN?Se utiliza generalmente en programación,

economía, procesos industriales y psicología cognitiva


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


Se guarda la

info

PARTICIPAR




SÍNO


Pregunta NºX


SÍNO


Siguiente / Aceptar




Se guarda la

info

PARTICIPAR




SÍNO


Pregunta NºX


SÍNO


Siguiente / Aceptar




Se guarda la

info

PARTICIPAR




SÍNO


Pregunta NºX


SÍNO


Siguiente / Aceptar





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


¿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


Se guarda la

info

PARTICIPAR




SÍNO


Pregunta NºX


SÍNO


Siguiente / Aceptar



USUARIO (FB o TW connect)

responder trivias




Mensaje de “felicitaciones ya estás participando” y compartir automáticamente en FB o TW



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


CONTACTO DIRECTO

línea de interacción

línea de visibilidad

PROCESO INTERNO

ACCIONES DEL USUARIO


Estructura de las partiturasTRIVIA 1


Participar



Respuesta correcta

TRIVIA 2


Participar



Respuesta correcta

TRIVIA 3


Participar



Respuesta correcta

Verificar puntajey guardar info

CONTACTO DIRECTO



PROCESO INTERNO



Estructura de las partiturasTRIVIA 2


Participar



Respuesta correcta

TRIVIA 3


Participar



Respuesta correcta

Verificar puntajey guardar info

Mensaje Perdedor

Mensaje Ganador

Se comparte automáticamente

en FB o TW

CONTACTO DIRECTO



PROCESO INTERNO


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)

http://youtu.be/d5F3ulLvaK8

http://youtu.be/d5F3ulLvaK8

http://youtu.be/ZqbyEsvDu_Y

http://youtu.be/ZqbyEsvDu_Y

http://www.f-i.com/work/all

http://www.f-i.com/work/all

http://www.wireframes.linowski.ca

http://www.wireframes.linowski.ca

http://uxmag.com/

http://uxmag.com/

http://www.smashingmagazine.com

http://www.smashingmagazine.com

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)

http://www.awwwards.com/websites/responsive-design/

http://www.awwwards.com/websites/responsive-design/

http://typecast.com/blog/a-more-modern-scale-for-web-typography

http://typecast.com/blog/a-more-modern-scale-for-web-typography

http://ia.net/blog/responsive-typography-the-basics/

http://ia.net/blog/responsive-typography-the-basics/

http://gridpak.com/

http://gridpak.com/

http://www.profoundgrid.com/

http://www.profoundgrid.com/

http://goldengridsystem.com/

http://goldengridsystem.com/

http://csswizardry.com/csswizardry-grids/

http://csswizardry.com/csswizardry-grids/

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

http://es.wikipedia.org/wiki/Dise%C3%B1o_de_interacci%C3%B3n

http://es.wikipedia.org/wiki/Dise%C3%B1o_de_interacci%C3%B3n

http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacci%C3%B3n

http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacci%C3%B3n

http://www.ixda.org/resources

http://www.ixda.org/resources

http://javiermegias.com/blog/2013/04/customer-journey-map-mapa-experiencia-cliente/

http://javiermegias.com/blog/2013/04/customer-journey-map-mapa-experiencia-cliente/

http://madisonmk.com/articulo/customer-journey-map-la-mejor-radiograf-del-cliente

http://madisonmk.com/articulo/customer-journey-map-la-mejor-radiograf-del-cliente

http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map/

http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map/

... gracias !

Sofía Savoy Anguita | Arquitecto de Información