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

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

Redes Sociales

Centro de Prensa

Tierra

ContactoLogin / Registro

Suscripción a Newsletter

Registro Activista

Buscador Selector Países

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

Construcción de los Wireframes: Mapa de navegación

Ejemplo modificado desde: http://www.agra-culture.com

CONTENIDO AUXILIAR

FUNCIONALIDADES GENERALES

Menú Historia Detox Catering Delivering

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

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

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

Construcción de los Wireframes: Home

Construcción de los Wireframes: Categoría Principal

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.

Dolor sit

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

Dolor sit

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

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

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

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

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

(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

PARTICIPAR

¿Acepta los permisos?

FB Connect TW Connect

Permisos propios de la red seleccionada

FormularioDatos básicos

Pregunta NºX

¿Respuesta correcta?

Mensaje fallaste Mensaje acertaste

Siguiente / Aceptar

Una vez contestadas las 3 preguntas

Mensaje felicitaciones

Se guarda la

PARTICIPAR

Pregunta NºX

Siguiente / Aceptar

Se guarda la

PARTICIPAR

Pregunta NºX

Siguiente / Aceptar

Se guarda la

PARTICIPAR

Pregunta NºX

Siguiente / Aceptar

Se guarda la

PARTICIPAR

Pregunta NºX

Siguiente / Aceptar

Se guarda la

PARTICIPAR

Pregunta NºX

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

PARTICIPAR

Pregunta NºX

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)

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

usabilidad en proyectos digitales

Design

usabilidad móvil

gelattina usabilidad

¿usabilidad móvil?

proyectos digitales patrimoniales, más allá de los...

"arquitectura de información, usabilidad y estándares en...

gestión de proyectos digitales

la escuelita - medios digitales - clase 7 - interfaz de...

ux & usabilidad

usabilidad de juegos educativos usabilidad de juegos...

usabilidad pymes

vendiendo usabilidad:

método de proyectos y recursos digitales: un acercamiento

recetario web: manual de gestión de proyectos digitales

recursos digitales en apoyo al desarrollo de la ... ·...

gestión de proyectos digitales (clase 1)

proyectos digitales -plan de accion

usabilidad web

usabilidad cotidiana

mi experiencias en proyectos tecnológicos y startups...

webinar: aterrizaje de proyectos digitales