Usabilidad en Proyectos Digitales

Usabilidad en
Proyectos Digitales
UCD · UX · IA
Sofía Savoy Anguita | Arquitecto de Información

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
Usabilidad Diseño en el usuario

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
UX (UI)
Análisis y Contenido Ingeniería y Desarrollo

Producto
Diseño Funcional
Diseño estructural
Contenido
Investigación

Arquitectura
2de Información

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 SORTING
Es 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 ESCENARIOS
Técninca que se basa en pensar en los
potenciales usuarios e identificar casos
de uso para cada uno de ellos.

Metodologías: Wireframes
WIREFRAMES
Los wireframes son la jerarquización
visual de los contenidos; son la estructura
o esqueleto de nuestro diseño

usuarios contenido
IA
contexto

Estrategia de Contenido: Mapa de Navegación
Elementos visuales
Página(s) Documento(s) Enlace externo

HOME
Greenpeace
Acerca de
nosotros Qué hacemos Noticias/Blog Multimedia Involúcrate Donar
Kumi Naidoo
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
Login / Registro Contacto
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

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

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ú Contenido Se 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
Blog
Menú Historia Detox Catering Delivering
Desayuno
Almuerzo/Cena
Grab & Go
Tragos
Contacto
Información
Nutricional
Solicitud de
Empleo
Locaciones
Articulos
RRSS (fb, pinterest,
instagram, tw,
Artículos por
categoría
Artículos por
mes/año
Compartir por
FB, TW y mail
Newsletter

Construcción de los Wireframes: Home
HOME
Blog
Desayuno
Almuerzo/Cena
Grab & Go
Tragos
Contacto
Información
Nutricional
Solicitud de
Empleo
Locaciones
Articulos
instagram, tw,
Artículos por
categoría
Artículos por
mes/año
Compartir por
FB, TW y mail
Newsletter
< Catering Menu | Story | Detox | Locations | Contact Delivery >
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
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: Categoría Principal
HOME
Blog
Desayuno
Almuerzo/Cena
Grab & Go
Tragos
Contacto
Información
Nutricional
Solicitud de
Empleo
Locaciones
Articulos
instagram, tw,
Artículos por
categoría
Artículos por
mes/año
Compartir por
FB, TW y mail
Newsletter
Our menu
Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info
Breakfast Lunch/Dinner Grab & Go Drinks
organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn
tortillas, wrapped in a flour tortilla or with toast
Breakfast
Served 7-10:30am daily
Farm Scrambles
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
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
adipiscing elit, sed diam nonummy nibh.
Kale pesto & prosciutto
Trimmings
Seasonal hash
adipiscing elit, sed diam nonummy.
Granola parfait
adipiscing elit, sed diam.
Roasted apple sauce
Lorem ipsum dolor sit amet.
Lorem
Ipsum
Dolor sit
Elit
Set diam
Sit amet
Lunch & Dinner
Porridges
Muesli
Quinoa (hot)
Oatmeal

Construcción de los Wireframes: Categoría Principal
Our menu
Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info
Breakfast Lunch/Dinner Grab & Go Drinks
organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn
tortillas, wrapped in a flour tortilla or with toast
Breakfast
Served 7-10:30am daily
Farm Scrambles
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
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
Porridges
Muesli
Quinoa (hot)
Oatmeal

Construcción de los Wireframes: Interior Tipo
HOME
Blog
Desayuno
Almuerzo/Cena
Grab & Go
Tragos
Contacto
Información
Nutricional
Solicitud de
Empleo
Locaciones
Articulos
instagram, tw,
Artículos por
categoría
Artículos por
mes/año
Compartir por
FB, TW y mail
Newsletter
What’s fresh at agra?
Thank you to our partners
05/07/2014
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!
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
What’s fresh at agra?
Thank you to our partners
05/07/2014
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!
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

Wireframes Navegables
MOSTRAR UN FLUJO
Lo 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
MOCKUPS
Los 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

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: Wireframes

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

Responsive
768px
Responsive
320px

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
(36px)
(Desktop)
(Mobile)
(48px)
(32px)
(26px)
(28px)
(22px)
(16px) (12px)

Diseño Responsivo: Interacción

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
¿QUÉ ASPECTOS BÁSICOS
DEBEMOS CONSIDERAR?
• Las tareas se le darán al usuario
• Sus acciones respecto a las tareas
• La respuesta del sistema a partir de la acción

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 de
Datos
Punto de
Decisión
Línea de flujo

PARTICIPAR
FB Connect TW Connect
Permisos propios de
la red seleccionada
¿Acepta los
permisos?
NO SÍ
Formulario
Datos básicos
Se
guarda la
info
PARTICIPAR
Permisos propios de
la red seleccionada
¿Acepta los
permisos?
NO SÍ
Formulario
Datos básicos
Pregunta NºX
NO SÍ
¿Respuesta
correcta?
Mensaje fallaste Mensaje acertaste
Siguiente / Aceptar
Una vez contestadas
las 3 preguntas
Mensaje
felicitaciones
Mensaje
felicitaciones

Se
guarda la
info
Permisos propios de
la red seleccionada
¿Acepta los
permisos?
NO SÍ
Formulario
Datos básicos
Pregunta NºX
NO SÍ
¿Respuesta
correcta?
Se
guarda la
info
PARTICIPAR
Permisos propios de
la red seleccionada
¿Acepta los
permisos?
NO SÍ
Formulario
Datos básicos
Pregunta NºX
NO SÍ
¿Respuesta
correcta?
Siguiente / Aceptar
Una vez contestadas
las 3 preguntas
Mensaje
felicitaciones
Mensaje
felicitaciones

Se
guarda la
info
Pregunta NºX
NO SÍ
¿Respuesta
correcta?
Siguiente / Aceptar
Una vez contestadas
las 3 preguntas
Se
guarda la
info
PARTICIPAR
Permisos propios de
la red seleccionada
¿Acepta los
permisos?
NO SÍ
Formulario
Datos básicos
Pregunta NºX
NO SÍ
¿Respuesta
correcta?
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

¿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
Permisos propios de
la red seleccionada
¿Acepta los
permisos?
NO SÍ
Formulario
Datos básicos
Pregunta NºX
NO SÍ
¿Respuesta
correcta?
Siguiente / Aceptar
Una vez contestadas
las 3 preguntas
Mensaje
felicitaciones
USUARIO (FB o TW connect)
responder trivias
Mensaje de “felicitaciones ya estás participando” y
compartir automáticamente en FB o TW
Mensaje
felicitaciones

Estructura de las partituras
LANDING TRIVIA 1
TRIVIA Ingresar a la
campaña
CONTACTO
DIRECTO
Ingresar
con FB
Ingresar
con TW
Se rescatan los datos
(nombre)
Completar
Formulario
Enviar datos
Se guardan los datos
(BBDD)
Participar
Seleccionar
una respuesta
Verificar opción
seleccionada
!
Respuesta
incorrecta
Respuesta
correcta
ACCIONES DEL
USUARIO
línea de interacción
línea de visibilidad
PROCESO
INTERNO

TRIVIA 1
Participar
ACCIONES DEL
USUARIO
CONTACTO
Seleccionar
una respuesta
Verificar y guardar Verificar opción
seleccionada
!
Respuesta
incorrecta
Respuesta
correcta
TRIVIA 2
Participar
Seleccionar
una respuesta
Verificar opción
seleccionada
!
Respuesta
incorrecta
Respuesta
correcta
TRIVIA 3
Participar
Seleccionar
una respuesta
Verificar opción
seleccionada
!
Respuesta
incorrecta
Respuesta
correcta
DIRECTO
PROCESO
INTERNO

TRIVIA 2
Participar
ACCIONES DEL
USUARIO
Seleccionar
una respuesta
Verificar opción
seleccionada
!
Respuesta
incorrecta
Respuesta
correcta
TRIVIA 3
Participar
Seleccionar
una respuesta
Verificar opción
seleccionada
!
Respuesta
incorrecta
Respuesta
correcta
Verificar puntaje
y guardar info
Mensaje
Perdedor
Mensaje
Ganador
Se comparte
automáticamente
en FB o TW
CONTACTO
DIRECTO
PROCESO
INTERNO

Resumen
Recordemos que en un proyecto:
1. El análisis y contenido serán la base estratégica del corazón de nuestro servicio
2. La arquitectura de información permitirá validar y organizar estos contenidos
3. Los wireframes modelarán la estructura visual y jerárquica del contenido
4. El diseño de interacción definirá el comportamiento del servicio y las acciones
del usuario
5. El diseño de interfaz otorgará la capa visual emocional del producto
6. Desarrollo e ingeniería serán quienes materialicen todo el proceso anterior

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 Rosenfeld
Peter 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 Nielsen
Steve 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

Recomendados

Recomendados

Más contenido relacionado

Similar a Usabilidad en Proyectos Digitales

Similar a Usabilidad en Proyectos Digitales (20)

Último

Último (20)

Usabilidad en Proyectos Digitales