Ux formato tec bbva v 4.1.pptx

10/02/16

1

Taller UX BBVA
Moisés Cielak, Antonio Salgado & Mauricio Angulo
Un enfoque mas humano para un asunto de seres humanos
1
•

•

•

ESTRATEGIA DE CONTENIDOS

La estrategia de contenidos debe estar centrada en la Persona.

Para dar a las personas el contenido que necesitan,es necesario

identificar los tipos de contenidos que mejor asistan al usuario
en la ejecución de sus tareas en cada escenario.

•

•

•

•

TIPOS DE CONTENIDO

Para definir un contenido es necesario identificar su formato y tipo.

El formato es la unidad básica del contenido:texto,imagen o video.

El tipo es la aplicación del formato,por ejemplo,una receta de cocina es

un tipo de contenido de formato texto.

Un tipo de contenido puede estar compuesto por varios formatos,por

ejemplo,una galería de imágenes (Slider).

•

•

MAPA DE CONTENIDO

Son cartografías que se centran en el contenido de un producto

digital.Permite explorar y visualizar el contenido,así como detectar

oportunidades de mejora para el desarrollo de contenidos.

El objetivo de un mapa de contenido es comenzar el desarrollo de

contenidos con un fuerte enfoque en las metas de los usuarios.

10/02/16

2

EJERCICIO #5

CREACIÓN DE MAPA DE CONTENIDO

15 MINUTOS

10/02/16

3

Faltan 2 minutos

•

•

Identiﬁcar contenidos para las tareas a realizar por la
Persona en el

escenario descrito
Crear un mapa de contenido

ENTREGABLE:

1.  Diseño conceptual platicadito

2.  Con dibujitos

Enviar foto a ProfeCielak@gmail.com
usar app para que se vea mejor
opción
CamScan
CS10

10/02/16

5

Estudios de EYE TRACKING
18
EYE TRACKING
19
Moises C. Katz at the Munchen Forum
Eye tracking & Design
Todo será explicado…

10/02/16

6

What is eye tracking?
Eye tracking … qué está viendo realmente UD.
3
See the user’s gaze - Live
You can follow what
the user pays attention
to in real-time.
The participant’s gaze
is marked by red
dots and red lines.
A camera displays the
participant, so you can
see their facial
expressions and
body language.
4
Eye tracking results: Heatmaps
Heatmaps show what
participants focus on.
In this example, ‘hot spots’ are
the picture of the shoes, the
central entry field and the two
right-hand tiles underneath.
The data of all participants is
averaged in this map.
5

10/02/16

7

Eye tracking results: Gazeplot
Gaze plots show the ‘visual path’
of individual participants. Each
bubble represents a fixation.
The bubble size denotes the
length or intensity of the fixation.
Additional results are available in
table format for more detailed
analysis.More examples with
interpretations are coming
up. But before…
6
How does it work?
Pupils move a lot
in here, somewhere…
Our pupils are constantly
in motion.
When the pupil is moving,
it’s called a ‘saccade’.
During a saccade, visual
perception is unlikely or
even impossible.
8
How we ‘look’
Fixation
Saccade
The pupil must focus on a
point in order to perceive
colour, faces, writing, etc.
That is called a ‘fixation’.
Eye Tracking measures the speed of
the pupil and can thus detect when a
fixation is happening!
9

10/02/16

8

What do these fixations tell us?
Fixations are linked to attention.
Moving your eyes means moving
attention.
A fixation does not mean that the
participant definitely perceived an
element.
But it is fair to say that elements
that draw visual attention have a
higher chance of being perceived
(consciously or subconsciously). 10
How can a monitor tell what I look at?
tobii
11
The red-eye effect
There’s a layer in our eyes that
reflects infrared light.
This is where the red-eye effect in
photos comes from as photo flashes
use infrared light.
The eye tracking monitor makes
use of this effect!
12
What the eye tracker sees
tobii
The eye tracking
monitor uses infrared
light to make the
pupils of the person
sitting in front of it
light up and so
become detectable.
This is what it looks like
for the monitor.
13

10/02/16

9

Monitors - No strings attached
It used to be like this:
tobii
Now it’s all free and comfy. The monitor
can capture the gaze in a wide area, so
the participant can relax and move naturally:
kristenbell.org
14
Eye Tracking & Design
Develop and design
There’s lots of decisions to make in all stages of the design process:
16
Decision like these…
Where should
the ‘Pay now’
button be?
Will users
notice this if I
put it here?
17

10/02/16

10

visuality-group.co.uk
… or these:
How does my
design perform
compared to
others?
Does my design
draw enough
attention?
18
… and these:
Does
Design A
work
better?
… or
Design
B?
19
How eye tracking can help
§  Provides insights into your user’s behaviour
§  Answers questions such as: ‘Will users see/notice this?’
§  Evaluates the effectiveness of a design
§  Reveals what the user’s attention is drawn to
§  Serves as a tool for observers, e.g. during a user test
20
Using eye tracking –
an example

10/02/16

11

Set-up of an eye tracking test
Design tests can be run in fairly quick
sessions (10 to 15 min) with 10 to 20
participants:
1.  Present participants with the
design(s) you want to test.
2.  Give them a task to complete using
the design, or let them just explore.
3.  At the end of the test, participants fill
in an on-screen questionnaire to
capture their impressions and answer
questions, e.g. ‘Which design do you
prefer?’
22
What happens then?
The next step is to analyse
the eye tracking data and the
user’s feedback. We focus on:
§  what users saw,
§  what users overlooked and
§  what they thought and felt
about the designs.
23
Examples: Testing website designs
What do you think
draws the user’s
attention on this site?
The listed offers in
the centre or the
special offer
banners on the
right?
24
The design suits browsers and focussed users
This participant
thoroughly reads the
listed offers.
Whenever a destination
sparks her interest, she
looks at the offer
details, e.g. the price.
This participant
focusses on the right-
hand banners.
He briefly gazes at the
listed offers, but shows
no reading behaviour
there.
25

10/02/16

12

What drew most attention on this design?
26
The key visual and a box at the bottom
Note: Telstra Clear have since re-designed their homepage.
The key
visual got
lots of
attention.
Surprising: This box
got heaps of attention.
It reads:
“If you are having
trouble getting
through to us on the
phone, please click here
to email us, we’ll get back
to you within 2 business
days”.
Participants got the
impression that Telstra
Clear has trouble with
their customer service.
The main
navigation
and its options
got almost no
attention.
27
Design principles – revealed
by eye tracking Humans are programmed to recognise
faces. Everywhere.
This effect can be seen in eye tracking.
Faces always draw attention!
Face Effect

10/02/16

13

The Face effect – an example
bunnyfoot
Yep, there’s
attention on
certain…
areas,
… the face,
however, is
the strongest
point of focus!
30
Using the Face effect
humanfactors.com
The ‘Face effect’
can be used to
drive perception.
Here’s a great example
from humanfactors.com
2 versions of an ad
design were tested
using eye tracking.
The goal of the ad is of
course to draw
attention to the
product name.
Version A Version B
31
Using the Face effect
humanfactors.com
Eye tracking results for ad
Version A:
§  We see a face effect: The model’s
face draws a lot of attention.
§  The slogan is the other hot spot of
the design. Participants will likely have
read it.
§  The product and its name get
some, but not a lot of attention.
32
Using the Face effect Eye tracking results for ad
Version B:
§  Again, we see a strong face effect.
BUT: In this version, the models gaze
is in line with the product and its
name.
§  The product image and name get
considerably more attention!
§  Additionally, even the product name
at the bottom is noticed by a
number of participants.
humanfactors.com
33

10/02/16

14

Ways to focus attention
usableworld.com.au
Same effect: If the baby faces you, you’ll look at the baby. But if the baby faces the ad
message, you pay attention to the message. You basically follow the baby’s gaze.
34
Did we learn to ignore them?
Banner Blindness
Central banners
Central banners are
used on a lot of
homepages.
They use prime real
estate on the
homepage.
That means they must
be in the centre of
attention, right?
36
Banner blindness
… or are they?
In this test, participants were
given a task: Find the nearest
ATM.
Participants focused on the
main navigation and the
footer navigation– this is
where they found the ‘ATM
locator’.
So, when visiting a site with
a task in mind – as you
normally do – the central
banner can be ignored! 37

10/02/16

15

Main focus: Navigation options
Eye tracking results
show: When looking
for something on a
website, the main
focus of attention
are the navigation
options.
Maybe users have
learned that they’re
unlikely to find what
they’re looking for in a
central banner image.
Task: ‘What concerts are happen in Auckland this month?’ Task: ‘You want to send an email to customer service’
38
Task: ‘You want to get in touch with customer service’
When do users look at banners?
In this example, participants looked at the banner even though they were
looking for something specific. What’s different?
Participant was asked just to look at the homepage
39
Banner Blindness: The trick is…
… don’t make your banners look like banners!
40
Let’s talk about colours
Research shows that saturated
colours and strong contrasts
work best to capture attention

10/02/16

16

That must mean that this design is ideal:
42
… or maybe this is a better example:
The Air New Zealand
homepage uses strong
colours.
The buttons are
contrasted to the
background.
The special offer uses
both a high-resolution
image and a prominent
price.
43
How do these different designs compare?
44
Colours chaos = Attention chaos
This heatmap shows a
chaotic, non-directed
spread of visual attention:
§  Everything seems to demand
attention at the same time,
lots of hot spots are the
result.
§  The participant’s gazes are
scattered between
navigation elements and
images.
§  Some images capture more
attention, the site options
on the top are barely
looked at.
45

10/02/16

17

In contrast: A structured design
This heatmap shows an
overall more structured
and deliberate design:
§  There are clear centres of
attention: the flight
booking and special offer.
§  The image of a woman
(face effect) and a
keyword (‘Wellington’)
draw the gaze towards the
flight booking.
§  Banner blindness is
avoided by placing a
relevant special offer and by
using an unusual image.
46
Design + Eye tracking
a more complete
understanding of your user’s
experience
=
The bottom line:
Accesibilidad (web) y sus
beneficios
09/02/16
67
usabilidad - UX - accesibilidad Jordi
Sánchez - @jordisan - http://jordisan.net

10/02/16

18

Recordemos…
§ Usabilidad
Que sea fácil de usar
§ UX (User eXperience)
Que el usuario tenga una experiencia satisfactoria
(suele conseguirse haciendo que sea usable)
§ Accesibilidad
Que el usuario pueda usarlo
(nos solemos referir a situaciones “especiales”)
09/02/1669 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
Acceso universal
MITO: accesibilidad web es “para ciegos”
FALSO.
§ Es cierto que los criterios de accesibilidad ayudan a personas con
deficiencias físicas (visuales, auditivas, motrices), cognitivas, de lenguaje,
…
Y TAMBIÉN…
§ Usuarios con discapacidades temporales (enfermedades, convalecencias)
§ Usuarios de edad avanzada
§ Dispositivos menos (?) habituales: móviles, SmartTV; versiones antiguas
SO/navegador; conexiones lentas
§ Entornos especiales (kioskos públicos; entornos ruidosos, fábricas, etc.)
Beneficios de accesibilidad (obvios)
§ Maximizar los posibles usuarios/clientes
§ Seguir estándares facilita el desarrollo y
mantenimiento
§ Por imagen pública
§ …
Web Accessibility Initiative (WAI) http://www.w3.org/WAI/

10/02/16

19

Accesibilidad: más beneficios
o y además…
§ Mejora el posicionamiento en buscadores (SEO)
o textos alternativos; identificar idioma;
documentos bien estructurados; …
§ Por normativa legal
o Los sitios web de administraciones
públicas (o con financiación pública;
o “de especial interés”) deben cumplir
un nivel mínimo de accesibilidadHigh Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo
Referencia sobre legislación española relacionada con la accesibilidad web http://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.html
§ El uso de Personas
(needfinding) y
escenarios
74
75
Topics
• Personas
• Scenarios
• User stories
Escenarios
Los escenarios describen la interacción entre
tipos de usuarios basado en diversas metas
Y el sistema al que pertencen

10/02/16

20

Escenarios
• Consiste de metas, expectativas,
Acción y reacción
Es un espejo de las aspiraciones
• vincula contexto y uso
• aunque no incluye ejemplos del uso en acciones
E.g.: “Roberto le da click al boton verde
Sino, Roberto procede a convertir…
Historias de usuarios
Secuencias de acciones que conducen a un
resultado
• Glas historias se vuelven testeables
• Sirve de puente entre usuarios y desarrolladores
• Asemeja un buen método de proceder a programar
Ejemplo de una
historia de usuario
“Como <rol>, deseo <hacer qué>
de modo que <beneficio>.”
User Stories
Otro ejemplo
“como organizador, quiero que sea fácil calendarizar
un evento para muchas personas
donde pueda dar clases de Zumba.”

10/02/16

21

Una necesidad
• No tan detallada
• Testeable
“As an organizer
I want to click on various days in calendar
I want to provide several meeting day options.”
Problemas de
accesibilidad.
Cómo ser
accesible
Capital ONE09/02/16
82
PROBLEMAS habituales de accesibilidad (1)
Personas con problemas visuales
(o dispositivos como SmartTV, móviles, etc.)
§ Sólo “ven” texto de modo secuencial
(usan lectores de pantalla/navegadores por voz)
§ Necesitan textos grandes
§ No distinguen bien los colores
Cuidado con:
o Imágenes sin descripción textual
o Tablas y marcos (frames) mal etiquetados
o Colores de bajo contraste
o Texto no escalable
o Ventanas emergentes (pop-up)
o No funcionan con teclado
Personas con discapacidades cognitivas / de aprendizaje
(o en entornos complejos;
o con poco dominio del idioma; …)
§ Pueden tener problemas para “entender” los contenidos o para concentrarse
§ Problemas de memoria
Cuidado con:
o Documentos con estructura mal definida
o Demasiada información en una página
o Lenguaje innecesariamente complejo
o Falta de imágenes para clarificar el texto
o Animaciones y elementos decorativos superfluos

10/02/16

22

Normativa sobre extranjeros
Personas con discapacidades auditivas
(o en entornos ruidosos;
o en equipos sin hardware de audio)
§ Pueden tener problemas para acceder a los contenidos
sonoros
Cuidado con:
o Audio/vídeo sin descripciones textuales
o Frases complejas o demasiado largas
Subtítulos
Personas con discapacidades motoras
(o no disponen de ratón)
§ Tienen que usar el teclado u otros dispositivos
(reconocimiento de voz)
Cuidado con:
o Páginas que no funcionan con teclado

10/02/16

23

MITO: para ser accesible basta con tener una versión “sólo
texto”FALSO.
§ Sólo para determinados usuarios
§ Suponen una discriminación (“entrar por la puerta trasera”)
§ Problemas por contenidos duplicados:
o mantenimiento
o indexación en buscadores
§ Se descuida la accesibilidad de la versión “normal”
§ ¿Cómo llego a la versión accesible?
MEJOR: si es posible, una única versión que cumpla los estándares de
accesibilidad
Tiene “versión sólo texto”, pero…
… sin imágenes…
¿Cómo accedo
a la versión
“sólo texto”?
¿CÓMO consigo que mi web sea ACCESIBLE?
§ Conociendo y cumpliendo los estándares
o De los lenguajes utilizados (HTML; CSS; etc.)
o Específicos de accesibilidad
§ Testeando
o Diferentes entornos (navegadores, sistemas operativos, etc.)
o Con usuarios reales

10/02/16

24

¿Qué ESTÁNDARES? (1)
§ Lenguajes/técnicas utilizados:
o HTML válido
o CSS válido
o JavaScript “no obstructivo”
o Etc.
§ IMPORTANTE: separar contenido vs. aspecto
o El mismo contenido para todos los usuarios
o Aspecto en función de las condiciones particulares
§ IMPORTANTE: compatibilidad multinavegador
Con el mismo contenido HTML…
¿Qué ESTÁNDARES? (2)
Recomendaciones y normativas específicas sobre accesibilidad web:
§ Section 508 (USA)
§ WAI (Web Accessibility Initiative)
o Internacionales, W3C
o Sugeridas por la Comisión Europea
§ UNE 139803 “Requisitos de accesibilidad para contenidos Web” (España)
o Basada en WAI
o Obligatoria por Ley para sitios web de Administraciones Públicas
WAI (Web Accessibility Initiative)
§ Forma parte del W3C (World Wide Web Consortium)
§ Recomendaciones y directrices sobre:
o Contenido web (WCAG)
§ Contenidos web accesibles
§ Referencia de normas UNE
o Herramientas de autor (ATAG)
§ Herramientas de creación accesibles y
§ que generen contenidos accesibles
o Agentes usuario (navegadores) (UAAG)
§ Navegadores accesibles
o Rich Applications (WAI-ARIA)
§ Para aplicaciones RIA 2.0

10/02/16

25

WCAG (Web Content Accessibility Guidelines)
§ Cómo crear contenidos web accesibles. Versión 2.0
§ 4 principios generales del contenido web:
o Perceptible
o Operable
o Inteligible
o Robusto
Cada principio incluye directrices (guidelines)
Cada guideline incluye criterios de éxito con prioridad:
§ A = Debe satisfacerse; requerimientos básicos
§ AA = Debería satisfacerse; eliminar barreras significativas
§ AAA = Puede satisfacerse; acceso mejorado
§ Además: técnicas, ejemplos, enlaces, etc.
Texto alternativo
¡También por SEO!
No confiar únicamente en el color (1)
No confiar únicamente en el color (2)

10/02/16

26

Usability
Tes,ng

Rediseño
de
resultados
de

búsqueda
del
portal
inmobiliario

AdondeVivir.comi

1.  Estudio
de
usabilidad:
Ficha
tecnica

2.  Situación
previa

3.  Resultados
del
estudio

4.  Solución

5.  Conclusiones
y
Recomendaciones

INDICE
DE
CONTENIDOS

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

1.

Estudio
de
Usabilidad
–

Ficha
Técnica

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

1.
Estudio
de
usabilidad

Fecha
de
realización

•  Estudio
llevado
a
cabo
entre
el
13
de
diciembre
y
14
enero
2011

Obje,vo
principal
del
estudio

•  Evaluar
la
manera
cómo
los
usuarios
registrados
y
no
registrados
se

desenvuelven
al
buscar
o
publicar
en
Internet
información
sobre
la
compra
y

venta
de
inmuebles.

Metodología

•  Usability
TesFng:

a) CuesFonario
inicial

b) Navegación
libre

c)  Navegación
inducida

d) Preguntas
ﬁnales
sobre
atributos
de
la
web

10/02/16

27

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

1.
Estudio
de
usabilidad

Muestra:

6
Users

2
Heavy
users

2
Light
users
(registrados
sin
publicar)

2
no
registrados

Con
5
usuarios
se
encuentran
el

85%
de
los
problemas
de
usabilidad

de
una
Web

Fuente:
Jacob
Nielsen

http://www.useit.com/alertbox/20000319.html

2.

Situación
previa

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

¿
Qué
es
AdondeVivir.com
?

•  AdondeVivir.com
es
un

portal
inmobiliario

Oferta
-‐
Demanda

•  Tenemos
más
de

6,000
anuncios

acFvos
de
inmuebles

(más
que
cualquier

diario
impreso
un
día
domingo)
y
registramos
más
de

3’500,000
de
páginas
vistas
al
mes

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Estructura
básica
de
la
Web

1.
Home

10/02/16

28

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Estructura
básica
de
la
Web

2.
Resultados
de
búsqueda

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Estructura
básica
de
la
Web

3.
Detalle
de
inmueble

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

2.
Resultados
de
búsqueda

Caso
a
analizar:

Pág
de
Resultados
de
búsqueda

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Caso
a
analizar:

Pág
de
Resultados
de
búsqueda

Importancia
de
página
de
resultados
de
búsqueda:

•  Es
el
nexo
entre
la
búsqueda
que
realiza
un
usuario
en
el

home
page,
y
la
página
de
detalle
de
algún
inmueble.

•  Debe
presentar
información
relevante
y
perFnente,
para
que

el
usuario
pueda,
con
el
menor
,empo
y
uso
de
recursos,

encontrar
un
anuncio
de
su
interés.

El
test
de
usabilidad
nos
debía
conﬁrmar
si
esta
página

estaba
diseñada
para
poder
cumplir
con
estos
ﬁnes.

10/02/16

29

3.

Resultados
del
estudio
y

Oportunidades
de
mejora

detectadas

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

a)
Poca
dis,nción
de
anuncios
pagados

Anuncios
gratuitos

Poca
disFnción
entre

anuncios
pagados
y

gratuitos
.
No
hay

mayor
incen,vo
para

que
los
usuarios

vendedores
se
animen
por

el
servicio
destacado.

Anuncios
pagados

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

b)
Poco
o
nulo
uso
de
filtros
de
búsqueda

Filtros
de
búsqueda

Poco
uso
del
filtro
de

búsqueda
debido
a
largo

scroll
que
realizaban
los

usuarios.
Nunca
estaba

a
la
vista

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

c)
Texto
muy
comprimido

Publicidad
dificulta
la

navegación
por
ocupar

gran
parte
del
ancho
de
la

página

Mucha
información

en
muy
poco
espacio

10/02/16

30

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

d)
Falta
de
fotos
o
elementos
gráﬁcos

Los
anuncios
mencionaban

atulo,
metraje,
precio,
etc.

Pero
no
destacaban

aspectos
visuales

como
fotos
o
logos
de

quién
vende.

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

e)
Alta
can,dad
de
páginas
vistas
por

usuario

Casi
13
páginas

vistas
por
usuario.

4.

Solución:

Rediseño
de
Página
de

resultados
de
búsqueda

Anterior…

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Solución:
Rediseño
de
la
página
de

resultados
de
búsqueda

10/02/16

31

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Solución:
Rediseño
de
la
página
de

resultados
de
búsqueda

NUEVA
!

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

a)
Poca
dis,nción
de
anuncios
pagados

Describir
de
manera

explícita
qué
Fpo
de

anuncio
es
(proyecto,

destacado
o
gratuito),
no

solo
facilita
la
búsqueda

del
comprador,
sino
que

incenFva
al
vendedor
a

destacar
su
anuncio.

Mayor
diferenciación
de

Fpo
de
anuncio:

-‐E,queta
de
anuncio

-‐Fondo
amarillo

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

b)
Poco
o
nulo
uso
de
filtros
de
búsqueda

1.
Pasamos
el

filtro
de
formato

Horizontal
a

Ver,cal

2.
A
medida
que

un
usuario
hace

scroll,
el
filtro

de
búsqueda
lo

acompaña
en

todo

momento.

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

c)
Texto
muy
comprimido

Se
reemplazó
el
gran
banner
publicitario

lateral,
por
uno

más
pequeño
y

Horizontal,
liberando
espacio
para
los

lisFngs.

1.
Se
aumentó
el
espacio
disponible
para

cada
lisFng
a
casi
el
doble

2.
Se
redistribuyó
el
contenido
para

presentarlo
de
una
manera
más

limpia
y
fácil
de
leer,
brindando

contenido
más
relevante

10/02/16

32

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

d)
Falta
de
fotos
o
elementos
gráﬁcos

La
presencia
de
fotos
y
el
logo
de

la
empresa,
generan
resultados
más

relevantes
para
los
usuarios.

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

e)
Alta
can,dad
de
páginas
vistas
por

usuario

Reducción
en
más
de
20%
de
páginas

vistas
por
usuarios.

Ahora
los
usuarios
encuentran
anuncios

de
su
interés
con
menor
esfuerzo.

5.

Conclusiones
y

Recomendaciones

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Conclusiones

•  Día
a
día
el
área
de
TI/Diseño
trabaja
por
responder
pedidos
inconexos
de

clientes
o
disFntas
áreas
de
la
empresa
(Comercial/MarkeFng/IT)

o  Ej:
MKT
quiere
mejorar
la
efecFvidad
de
su
publicidad
–
agranden
los

banners

o  IT
quiere
reducir
la
carga
del
servidor
–
reduzcan
el
tamaño
de
las

imágenes

o  Etc
en
el
Fempo

•  Estos
pedidos
Fenden
a
ser
tratados
de
manera
aislada,
sin
tomar
en
cuenta
la

experiencia
del
usuario
u
objeFvos
de
otras
áreas

•  Un
estudio
de
usabilidad
permite
hacer
una
pausa
en
el
camino,
evaluar
el

funcionamiento

integral
de
una
web
y
ver
si
cumple
con
los
objeFvos
para
los

cuales
está
creada

10/02/16

33

World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Conclusiones

1.  Si
bien
algunas
de
las
oportunidades
de
mejora
pueden
ser
bastante

evidentes,
un
test
de
usabilidad
permite
tener
TODOS
los
elementos
de

juicio
desde
el
punto
de
vista
del
usuario,
para
dar
una
solución
integral,

y
no
un
“parche”

2.  Un
rediseño
integral,
como
el
del
presente
caso,
debe
estar
respaldado

de
tesFmonios
de
todo
Fpo
de
usuarios,
desde
heavy
users
hasta

primerizos.

3.  Antes
de
realizar
cambios,
deben
tenerse
métricas
(ej.
Páginas
vistas
por

visita).
De
lo
contrario,
no
se
va
a
poder
medir
la
efecFvidad
de
un
cambio

hecho
posteriormente.
World
Usability
Day
Peru
2011
–
Caso
AdondeVivir.com

Recomendaciones

1.  Realizar
un
estudio
de
Usabilidad
tercerizado:

o  Al
menos
una
vez
al
año
(para
empresas
netamente

online)

o  Al
menos
una
vez
cada
dos
años
(para
cualquier
otro
Fpo

de
empresa

2.  Incluir
estudios
de
Usabilidad
In-‐House,
como
parte
del

proceso
regular
de
lanzamiento
de
mejoras
en
la
Web:

Testeo
Con,nuo

EVALUACIONES DE
ACCESIBILIDAD
09/02/16
131
Evaluaciones de accesibilidad: manual
§ Leyendo el contenido:
o Lenguaje sencillo
o Abreviaturas, idiomas, …
o ¿Se entiende?
§ Comprobar navegadores gráficos
o Firefox, Internet Explorer, Opera, Safari, …
o Diferentes plataformas, versiones y sistemas operativos
o Diferentes configuraciones:
§ Desactivando imágenes, CSS, JavaScript, sonido, etc.
§ Diferentes resoluciones de pantalla, tamaños de texto, combinaciones de colores o B/N, etc.
§ Usar navegadores sólo texto; lectores de pantalla
§ Usar dispositivos alternativos (sólo con teclado)

10/02/16

34

Evaluaciones de accesibilidad: herramientas
§ Online y offline
§ Para comprobar sintaxis de HTML, CSS, etc.
o W3C (HTML Validation Service; CSS Validation Service; etc.)
W3C Unicorn
o Otras herramientas (HTML Tidy; Dreamweaver; etc.)
§ Para validación de accesibilidad
o WebXACT/Bobby; Cynthia Says; TAW; eXaminator
TAW
o Comprueban si se cumplen determinados checkpoints de WCAG
o Sirven como herramienta de apoyo, pero NO son suficientes para evaluar la accesibilidad
MITO: los validadores automáticos indican si una página
es accesible o no
FALSO.
§ Los validadores comprueban la sintaxis (HTML, CSS, etc.)
§ Los validadores comprueban algunos checkpoints
PERO…
§ Muchos checkpoints son interpretables y necesitan validación manual.
§ Las herramientas automáticas pueden producir “falsos negativos” y “falsos
positivos”
Guidelines, checkpoints, validadores automáticos y sellos son herramientas e
indicadores, NO un objetivo
Lo importante: la accesibilidad real
Pruebas accesibilidad con usuarios
§ Similares a los tests de usabilidad:
o Observación de usuarios reales mientras se enfrentan al sitio
web
§ Proporcionan mucha información útil, pero son muy
complejos:
o Definir tareas representativas
o Existe gran cantidad de tipologías de discapacidad
Retos de accesibilidad:
RIA (Rich Internet Applications)
§ Conseguir interfaces “de escritorio” en la web
§ Algunas aplicaciones:
o Google (Gmail; Google Maps); Flickr; YouTube; ...
§ Tecnologías:
o AJAX; Flash; Java; DHTML; etc.
§ Ya no son interfaces “insertados” en una página web, sino que son la propia
interfaz.
§ WAI-ARIA (WAI Accessible Rich Internet Applications)
o Iniciativa de W3C en desarrollo
Mientras tanto…
o Estándares para conseguir degradación progresiva
o Proporcionar versión alternativa

10/02/16

35

Gmail, con y sin JavaScript
¿Por qué es importante ACCESIBILIDAD?
§ Permite que el mayor número posible de personas acceda a los
contenidos (no sólo discapacitados).
§ Beneficia a todos los usuarios, haciéndoles más fácil el acceso a las
páginas (mejor usabilidad).
§ Reduce costes de mantenimiento/desarrollo:
o Una única versión para todas las plataformas
o Es más fácil hacer cambios (contenido vs. presentación)
o Mayor “vida útil” de los contenidos
o Las técnicas se pueden aplicar a diferentes sitios
§ Cumplir estándares mejora la visibilidad en Internet (SEO) y la
compatibilidad multinavegador.
§ Para determinados sitios, cumplir con la Ley.
En conclusión …
09/02/16
139
Usabilidad (y accesibilidad) son
“muy agradecidas”
§ No requieren
grandes inversiones
§ Habitualmente dan
resultados muy buenos
§ Pueden significar
la diferencia entre:
o el éxito y el fracaso
o tú y tu competencia
http://www.zdnet.com/shuttleworth-open-source-desktops-need-a-facelift-2062046056/

10/02/16

36

Consejo de mínimos (recordatorio)
§ Contratar/formar personal especializado
§ Integrar usabilidad en el proceso de desarrollo
Subconjunto (mínimo) de técnicas:
§ Roles de usuarios; personas (“quién”)
§ Casos de uso (“qué”)
§ Prototipado de interfaces (“cómo”)
§ Evaluación (heurística/pruebas con usuarios)
¿Estás seguro de que tu producto
o sitio web no es así?
¿Cuál es el problema?

10/02/16

37

145
El terrible caso del A/B Test I want more people
who visit the site to
subscribe via email
A) More People
Visiting
B) Higher
Conversion Rate
Multivariate Testing
We’ll show each version to a percentage
of visitors and find a winner

10/02/16

38

Qué hay dentro
De una decisión
de Conversión?
Likability
Trust
Word of Mouth
UX
Design Branding Historical Experiences
Social Proof
Associations
CTAs
Copywriting
CONVERSION DECISION
(it’s a complex process)!
Timing
Price
Process
Word of Mouth
Discovery Path
Amount of Pain Effort Required
How Do We Find Out What
Needs Optimizing?
Segment Our Visitors & Survey Them
Via: http://moz.com/rand/the-growth-of-web-marketing-fields/

10/02/16

39

Ask Smart Questions to the Right People
Never Taken a Free
Trial
What are you seeking from
Moz? What’s brought you
back?
What would make you
more likely to sign up?
What are your biggest
objections to signup?
Took the Free Trial
But Left
What made you take the
free trial?
What objections did you
have and how did you
overcome them?
What caused you to cancel
subscription?
What would have made
you stay a subscriber?
Took the Free Trial
and Stayed
What initially made you
want Moz?
What objections did you
have and how did you
overcome them?
What’s been most
valuable to you?
Had success w/ Moz?
Can we share?
This is How the Pros Do It:
Boom.
And Shakalaka.
From Conversion Rate Experts’ case study (which is definitely worth a read): http://www.conversion-rate-experts.com/crazy-egg-case-study/
#1: Make Pages Load BLAZING FAST
50% drop in just
3 seconds!
Data and charts via: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
ROI of page speed calculator: http://www.tagman.com/conversion-loss-calculator/
#2: Align Visitor Intent and Page Purpose
From Avinash Kaushik’s post: http://www.kaushik.net/avinash/tips-for-improving-high-bounce-low-conversion-web-pages/

10/02/16

40

#3: Poor Design Negatively Impacts Everything
Good place to find great designers: http://dribbble.com
#4: Empathy Yields Action
+19%Via Kyle Rush: http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/
#5: Don’t Force Unnecessary Steps
The $300mm button story is a great anecdotal piece on this
http://www.uie.com/articles/three_hund_million_button
#6: Concrete & Emotional > Abstract & Intellectual
Concrete &
Emotional
Abstract &
Intellectual
From this excellent infographic: http://www.zippycart.com/infographics/how-sales-messaging-affects-conversion-rates.html

10/02/16

41

#7: More Product Detail + Better Presentation = WIN
Zappos’ great videos and detailed images help make them a standout in the field of online retailing:
http://www.zappos.com/puma-future-cat-remix-2-ferrari-dandelion-black-high-risk-red
#8: Video Works
Conversion went from
30.0% 33.2% after
the video was added.
(10% lift)
http://www.commoncraft.com/common-craft-video-dropboxcom-effective
#8: But You Have to Optimize It
Three must-read links on video for conversion: http://conversionxl.com/how-to-use-video-to-increase-conversions/, and the case study data for
eParty: http://www.internetretailer.com/2011/02/22/videos-boost-online-profile-eparty-unlimited and for Premiere Game Tables:
http://blog.treepodia.com/2011/03/ecommerce-video-roi-a-case-study/. I also highly recommend http://wistia.com which we use at Moz for video.
#9: Don’t Fall Into the Trap of Copying Others’ Tactics
14% Increase in Sales 20% Increase in Sales
Great post on case studies and lessons learned: http://moz.com/blog/lessons-learned-from-21-case-studies-in-conversion-rate-optimization-10585

10/02/16

42

#10: Make Your Core Purpose Insanely Obvious
Huh?
Despite reading the homepage thoroughly, I was stumped about exactly what teamr does: h#p://www.teamr.com/
#10: Make Your Core Purpose Insanely Obvious
Makes total sense.
Contrast with 15Five, a competitive product that makes their purpose and product extremely clear right away: h#p://www.15five.com/
#11: Maximize the Conversion “Scent” Throughout
the Marketing Messages (on & off site)
Photo doesn’t match…
Where’s the “snow, ice,
or ground” versions?
There’s no copy except
the name…
WEAK SCENT!
Maintaining the conversion “scent” from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#.
#11: Maximize the Conversion “Scent” Throughout
the Marketing Funnel
Photo, logo, &
button all match
Screenshots & copy fit with
the display ad’s promise STRONG SCENT!
Maintaining the conversion “scent” from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#.

10/02/16

43

#12: Don’t Just Aim for the Fastest Possible Conversion
The more times
someone visits Moz
before taking a free
trial, the longer theystay a subscriber
(on average)
Conversions <
Moz’s internal customer growth funnel (built by our amazing inbound engineering team) CLTV
Bonus #13: More Tips Than You Can Imagine
From Unbounce: http://unbounce.com/conversion-rate-optimization/544-conversion-rate-optimization-tips/
UX/UI
UX es como funciona y UI es como luce
como se siente
-  McNuggets de Pollo
-  Instruciones…
- Descongelar
-  30 segundos
-  Comer
-  Eructar
-  Simple UX

10/02/16

44

UX - Experiencia de Usuario
UX, o experiencia de usuario, mide la facilidad y
el placer que tienen los usuarios al navegar por
un sitio.
Propósito detrás del UX
Experiencia de Usuario
*Cumplir con los objetivos del negocio
1. Adquisición de usuario
2. Activación de usuario
3. Retención de usuario

10/02/16

45

¿Cómo el UX resuelve problemas?
Usabilidad
Diseño
Visual
Investigación
del Usuario
UX
Diseño de
Interacción
Arquitectura de
La Información
Estrategia de
Contenido
Componentes del UX
1.   Definición de Usuario
2.   Mapas del Sitio
3.   Flujo de Usuario
4.   Wireframes
Definición de Persona
Arquitectura de la Información

10/02/16

46

Flujo de Usuario Wireframes
K
UI- Interfaz de Usuario
Un hábil diseñador de interfaces entiende la
importancia de proporcionar al usuario una
solución a un problema definido

10/02/16

47

UI
Branding Wireframing
Color, Esquemas:
fuentes, Logo,
Estilos
Cómo llegamos al UI?
1. El problema ha sido definido
2. Flujos de usuario e historias han sido creadas
3. Experimentos para validar personas
4. Wireframes y bocetos
5. Mockups con UI incluida pueden ser realizados
6. Prueba de Usuario
7. Es tiempo de codificar la interfaz - UI Design!
187
•  Etapas. Responden al tiempo transcurrido ¿cuándo?
•  Actividades y tareas. Responden al proceso ¿qué?
•  Técnicas. Responden a lo que se hace para lograr los
procesos ¿cómo?
•  Herramientas. Responden a qué se usa para aplicar
las técnicas ¿con qué?
El PROCESO de AI se divide en:

10/02/16

48

•  Reunión
•  Entrevista y Encuesta
•  Observación
•  Revisión bibliográfica
•  Consulta a experto
•  Representación y mapeo
Técnicas básicas
•  Encuestas online: son herramientas que permiten
diseñar un encuesta en línea y que los usuarios, de
manera remota, la respondan. Luego se analizan los
resultados.
•  Algunos son servicios de terceros.
Técnicas y herramientas
Survey Manager de Netquest [www.solucionesnetquest.com/
survey_manager]
E-encuestas
[www.e-encuesta.com]
•  Tormenta de ideas. (brainstorming) (focusgroup)
•  Crítica de diseño. (critic design)
•  Diseño participativo. (participatory design)
•  Tormenta de necesidades.
www.mindjet.com
•  Escenarios (definición de).
– Plantilla en Word para recoger datos de
escenarios.
•  Benchmarking. (comparación)(análisis de
homólogos)
– Tabla en Excel para comparar elementos.
Sitio Tipos de contenido Tipo de sitio Calidad del recurso
Amazon.com Libros, ropas, autos, … Tienda bueno
Yahoo.com Personas, Trabajos, … Directorio- portal regular
Google.com Sitios web, PDF, PPT, … Buscador bueno

10/02/16

49

•  Análisis de frecuencia de texto.
TextSTAT-2
www.niederlandistik.fu-berlin.de/textstat/software-en.html
•  Organización de tarjetas (cardsorting)
AGRUPACIÓN
EZcalc y USort [www.tripledogs.com/ibm-
usability ]
•  Organización de tarjetas (cardsorting)
SECUENCIA
www.nosolousabilidad.com/articulos/analisis_secuencia.htm
•  Inventario de contenidos 1.
Se puede hacer como:
•  Mapa de contenidos
CMapTools.
[http://cmap.ihmc.us]

10/02/16

50

•  Inventario de contenidos 2.
Se puede hacer como:
•  Tabulación de contenidos
Hoja de cálculo Excel.
•  Análisis de tareas (task analysis).
•  Flujogramas.
Microsoft Visio. (diagramas de flujo)
•  Análisis de tareas (ejemplo).
Microsoft Visio
•  Diagramación en papel
(paper prototype)

10/02/16

51

•  Diagramación del producto:
–  Diagrama(s) de organización
(blueprint o sitemap)
–  Diagrama(s) de funcionamiento
(flow)
–  Diagrama(s) de presentación
(wireframe)
– Diagrama de organización
(blueprint o sitemap)
www.mindjet.com
– Diagrama de funcionamiento
(flow)
Microsoft Visio
– Diagrama de presentación
(wireframe)
Microsoft Visio

10/02/16

52

Técnicas y herramientasSoftware para hacer diagramas de software:
§  Mindmanager (www.mindjet.com)
§  Freemind (http://freemind.sourceforge.net)
§  PowerMapper (www.powermapper.com)
§  Xtreeme SiteXpert (www.xtreeme.com/sitexpert)
§  SmartDraw (www.smartdraw.com)
§  Microsoft Visio (www.microsoft.com)
§  OmniGraffle (OSX) (www.omnigroup.com)
§  iGrafx Flowcharter (www.igrafx.de)
§  DENIM & Silk. (http://guir.berkeley.edu/projects/denim)
Algunos sistemas de símbolos para diagramar:
§  Jesse James Garret
(http://www.jjg.net/ia/visvocab)
§  Dan Brown
(http://www.greenonions.com)
§  Bill Scout
(http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio )
§  Garrett Dimon
(http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle)
§  Nick Finck
(http://www.nickfinck.com/stencils.html)
§  Peter Van Dijk's
(http://iabook.com/template.htm )
•  Prototipado digital
Se usó el Microsoft Frontpage, el Adobe Dreamweaver, en
algunos casos se usó el Microsoft Visio y hasta el Power
Point.
Existen algunas experiencias usando CMS como el
WorldPress (útil para hacer blogs) el Joomla, y hasta el
Drupal.
1.  Permite prototipar muy rápido.
2.  En su última versión permite incorporar y crear su propia biblioteca
de símbolos.
3.  Permite hacer diagramación y prototipado al mismo tiempo.
4.  Permite hacer prototipado colaborativo (en red).

10/02/16

53

www.axure.com
•  Test de prototipos
Morae de TechSmith: aplicación para grabar, observar y gestionar
el uso de un prototipo o sitio web entre una red de usuarios.
Antiguamente se usaba el Cantasia de la misma empresa, pero la
demanda los llevó a crear el Morae y otras aplicaciones, como
Uservue.
[www.techsmith.com]
Aplicaciones para Eyestracking.
•  Posicionamiento
Herramientas para ubicar sitios web en buscadores:
•  Active WebTraffic
•  Webceo
Herramientas para analizar las estadísticas del uso de sitio web:
•  Webalizer
•  Web statistics
•  Google analysis
•  El Instituto de AI agrupa varias herramientas para
diagramar y hacer arquitectura de información en general.
•  Contiene propuestas para el software Omnigraffle,
Ilustrador y Visio.
http://iainstitute.org/en/learn/tools.php

10/02/16

54

LA TÉCNICA ES LA TÉCNICA Y SIN
TÉCNICA NO HAY TÉCNICA
Qué NO hacer:
Herramientas de diseño fáciles
de usar
HotGloo
Hotgloo.com

10/02/16

55

BalsamiqBalsamiq.com
Invisioninvisionapp.com
La diferencia entre UX/UI
Freelance vs Agency
Pros
Cons
Freelancer
Flexibilidad
Perfectiva
nueva
Cambios
rápidos
Especialidades
limitadas
La “Marca”
Agencia
Creatividad
Acceso a las
últimas
técnologías
Expertos
Costos
Cambios
In-house
Armonía de
Marca
Acceso a
“recursos”
Falta de
creatividad
puede varias
rápidos pueden Burocracia
varias

10/02/16

56

Módulo II
Introducción a Diseño de
Interfaces•  Arquitectura de la Información ¿Qué es la AI? Navegación Breadcrumb
•  Buscadores Ejemplos de buscadores Tipos de búsqueda ¿Que debe tener un
•  buscador?
•  D I Conceptos Generales Flujos visuales y call to action Principios de diseño
de
•  interacción
•  D II Diferencia entre Mockups, Wireframes y Prototipos Patrones de IxD
•  Formularios Login Validaciones Ayudas Home ¿Que debe tener una home?
•  Herramientas Balsamiq Axure

Hablemos un poco de

Arquitectura de Información y Wireframes
¿Qué es Arquitectura de Información?

10/02/16

57

Hablemos un poco de

¿Dónde se Ubica?
Hablemos un poco de

¿Dónde se Ubica?
Hablemos un poco de

¿Qué hace un Arquitecto de Información?
Hablemos un poco de


10/02/16

58

Hablemos un poco de

Hablemos un poco de

¿Cómo llegamos a ella?
Hablemos un poco de

Ejemplo
Hablemos un poco de

Ejemplo

10/02/16

59

Hablemos un poco de

¿Qué es un Wireframe?
Hablemos un poco de

El Wireframe es una jerarquización de
contenidos distribuida visualmente y una
esquematización de la interfaz. Gráficamente,
son estructuras muy simples y están
enfocados a visualizar la distribución de los
contenidos dentro de una pantalla.
¿Qué es un Wireframe?
Hablemos un poco de

El Wireframe es el puente que une la Arquitectura
de Información y el Diseño.
Pasa de la “mentalidad estructural” de un
árbol de contenidos, dónde decidimos y
ordenamos los contenidos de nuestro sitio web,
a la emocionalidad del Diseño de Interfaz.
Arquitectura de información"
Estrategia"
Diseño de interfaz"
Desarrollo"
Wireframes"
Es un Puente
Hablemos un poco de

Pasar de la AI al Wireframe, compete varios
procesos de un desarrollo de interfaz digital.
Será importante en esta traducción aspectos
estratégicos, definiciones de buenas prácticas del
benchmark y la definición de los contenidos.
Luego, valiéndonos del árbol de contenidos,
podremos plasmar una correcta jerarquía de
contenidos en nuestro esquema.
¿Relación con Diseño?

10/02/16

60

Hablemos un poco de

La principal ventaja de los Wireframes, es que ofrecen una
perspectiva basada solamente en la arquitectura del contenido,
obviando el diseño y evitando elementos accidentales que
puedan distraer (colores, tipografías, imágenes, textos, etc.).
Esto último, ayuda a que el proyecto en desarrollo no se retrase
por falta de definición o que el resultado se aleje mucho de lo que
se esperaba.
_<"
Tiempos"
_"<"
Productividad"
_"<"
Costos"
¿Porqué hacerlos?
Hablemos un poco de

Además, son una excelente herramienta de
comunicación y discusión entre arquitectos de
información, programadores, diseñadores y clientes.
¿Y además?
Hablemos un poco de

" Definen qué quiere tu cliente y cuáles son sus objetivos"
•  Permite la comunicación fluida entre el equipo de trabajo y el cliente"
•  Las correcciones son objetivas, basadas en contenidos y funcionalidad Se
evitan las discusiones gráficas"
•  Se reducen los tiempos de trabajo y costos"
•  Permiten visualizar interacciones y flujos."
•  Se pueden identificar tempranamente problemas de Interacción, Usabilidad,
Accesibilidad"
•  Como es una estructura simple y enfocada en los contenidos, permite al
diseñador tener plena libertad al momento de diseñar la interfaz"
¿Porqué hacerlos?
Hablemos un poco de

Son estructuras simples conformados principalmente de líneas y cajas!
¿Guías Visuales?

10/02/16

61

Hablemos un poco de

Están diseñados en escala de grises!
¿Guías Visuales?
Hablemos un poco de

Todos los elementos gráﬁcos (imágenes, marcas, iconos) y de sistema (radio button,
dropdown, checkbox) están representados esquemáticamente!
¿Guías Visuales?
Hablemos un poco de

Usar solamente una familia tipográﬁca, de preferencia de sistema
1234567890¿?"
abcdefghijklmnño
pqrstuvwxyz"
¿Guías Visuales?
Hablemos un poco de

Guías Visuales
Trata de usar Contenido Real, de lo contrario nuestro buen amigo Lorem Ipsum
¿Lorem ipsum?"

10/02/16

62

Hablemos un poco de

Trata de usar guías o notas visuales para explicar una interacción (sobre todo Wireframes Funcionales)
¿Guías Visuales?
Hablemos un poco de

Trata de usar guías o notas visuales para explicar una interacción (móvil)
¿Guías Visuales?
Hablemos un poco de

" Simple sobre todas las cosas"
•  Usa la mayor cantidad de contenido real posible"
•  Siempre trabaja en escala de grises"
•  Evita usar imágenes, logos e iconografía"
•  No te limites a usar una aplicación digital, ¡dibuja!"
•  Deﬁne muy bien la estrategia y los contenidos antes de
empezar"
•  Siempre haz wireframes antes de diseñar"
" Explica las zonas e interacciones"
•  Discute los wireframes con tu equipo de trabajo"
•  Corrige problemas detectados en wireframes, no en diseño"
¿Guías Visuales?
Hablemos un poco de

Fireworks
Omnigrafﬂe"
Microsoft
Axure"
Balsamiq"
Keynote"
Apliaciones"
escritorio"
Apliaciones"
web"
Hotgloo
iplotz"
Balsamiq
Cacoo"
Algunos ejemplos de Aplicaciones para realizar Wireframes
¿Aplicaciones?

Ux formato tec bbva v 4.1.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a Ux formato tec bbva v 4.1.pptx

Similar a Ux formato tec bbva v 4.1.pptx (20)

Más de Moises Cielak

Más de Moises Cielak (20)

Último

Último (20)

Ux formato tec bbva v 4.1.pptx