Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”

1

Diseño
de

interfaz
móvil

-‐ 
¿Por
qué
móviles?

-‐ 
¿Qué
es
un
móvil?

-‐ 
Estrategias

-‐ 
Paradigma
móvil
emergente

-‐ 
Buenas
prác>cas

2

Diseño
de
interfaz
móvil

GeJy
Images
7

25%de
los
que
>enen
un
móvil
entre

18-‐44
años
dicen
“no
puedo
recordar
la

úl>ma
vez
que
no
tenía
mi
teléfono

cerca”

Los
usuarios
admiten
que
usan
el
móvil
en
el

baño

11Mark.
Octubre
2011.
Usuarios
EEUU.

75%

8

Ingresos
por
móvil

Luke
Wroblewski

11

comScore
–
Market
Realist

12

de
usuarios
pasa
más
>empo
con

tabletas
que
con
ordenadores.

Google
AdMob.
Marzo
2011.
Usuarios
EEUU.

Usuarios
sólo
desde
móviles

43%

14

28%
said
that
the
tablet
is
their
primary
computer

Usuarios
sólo
desde
móviles

Google
15

Usuarios
sólo
desde
móviles

“A
mobile
device
is
the
internet
for
many

people.”

—Susannah
Fox,
Pew
Research
Center

Ventas
globales

Luke
Wroblewski

17

REUTERS/Kimimasa
Mayama

2005

19

°
°
°
°
°

El
País

21

¿Qué
es
un
móvil?

¿…
o
tableta?

30

¿PortáAles?

31
Luke
Wroblewski

¿…?

Luke
Wroblewski

32

Luke
Wroblewski

35

•  Diseñar para multidispositivos!
•  Favorecer el continuum de pantallas!
•  Optimizar para interacción táctil!
•  Permitir el cursor & teclado!

Foto
de
ﬂickr/Clive
Fint

“Mobile
refers
to
the

user,
and
not
the
device

or
the
applica>on”.

Barbara
Ballard

37

Móviles

•  Personal

•  Communica>ve

•  Handheld

•  Wakable

•  The
carry
principle

Barbara
Ballard
38

The
carry
principle

39
Barbara
Ballard

Implicaciones
en
el
disposi>vo:

•  Dimensiones

–  Pantalla
pequeña

–  Teclado
pequeño
(si
hay)

•  Limitaciones
ergonómicas…

•  Autonomía

–  Uso
de
batería

•  Interrup>bilidad

•  Priorización
técnica
de
poco
consumo

–  CPUs
poco
potentes

»  Aplicaciones
lentas…

•  Comunicación
inalámbrica

Tamaño
de
pantallas

41

Velocidad
de
conexión

•  Velocidades
más
lentas

43

GRPS

EDGE

3G

ADSL

Velocidad

inmediato

7
segundos

medio
minuto

GPRS
2
minutos

UMTS

44

Cobertura

•  Conec>vidad
limitada/intermitente

Cobertura Vodafone
2G 3G
45

•  Descargar sólo lo necesario:
focalizarse en lo que solicita el
usuario!
•  Evitar descargar elementos o
imágenes meramente decorativas!
•  Optimizar el peso de los archivos !
Vodafone.
Marzo
2014

“Unlike
the
sta>c
and

predictable
PC
context,

the
mobile
context
is
a
lot

like
life.
It’s
unpredictable,

ambiguous
.
.
.
it’s

everywhere”.

Rachel
Hinman

47

§  En
movimiento

§  Suscep>bles
a

distracciones
e

interrupciones

§  Disponibles

49
Alexis
Polegato

§  En
movimiento

§  Suscep>bles
a

distracciones
e

interrupciones

§  Disponibles

§  Sociables

50
Alexis
Polegato

•  Ofrecer claridad y foco!
•  Focalizarse en el contenido sobre la
navegación!
•  Focalizarse en las tareas principales
(1 por pantalla)!
•  Conocer realmente lo más
importante (conocer el negocio y a
tus usuarios)!
•  Autoguardar!
•  Multitarea!
•  Facilitar retomar la tarea (en el
mismo dispositivo, en otro...)!

51
ShuJerstock

Móvil
no
es
esto

Las tabletas se usan en el sofá y en la cama
53
Google

Preferencia de dispositivo a lo largo del día
55

Cuándo
usamos
el
móvil

Luke
Wroblewski

56

57
Adobe
The
State
of
Mobile
Benchmark
-‐
Q2
2013

Aproximaciones
disponibles

•  Aplicaciones
na>vas

•  Aplicaciones
híbridas

•  Si>os
web
móviles
/
aplicaciones
web

66
•  Chris>an
Karasiewicz

Aplicaciones
naAvas

•  Se
descargan
(desde
el
store)
y
residen
en
el
disposi>vo.

•  Son
especíﬁcas
de
la
plataforma
y
sistema
opera>vo
(ej:

iOS
o
Android)

•  Construidas
con
el
lenguaje
de
la
plataforma
SDK

•  Tienen
acceso
y
usan
los
sensores
del
disposi>vo
(GPS,

acelerómetro,
cámara,
etc.)
y
a
los
componentes
del
SO,

como
los
elementos
UI
(botones,
sliders,
pestañas
y
otros

controles),
patrones
de
interacción
(gestos,
transiciones)
y

caracterís>cas
principales
(lista
de
contactos,
logs
de

llamadas).

•  Están
integradas
en
el
sistema
de
no>ﬁcaciones

67Chris>an
Karasiewicz

SiAos
web
móviles
/
aplicaciones
web

•  Corren
en
el
navegador
web

•  Escritas
en
HTML
5,
con
hojas
de
es>lo
CSS3
y
javascript

•  Las
app
web
parecen
aplicaciones
na>vas
pero
no
se

implementan
como
tal.
Son
efec>vamente
webs.

•  Pueden
incorporar
gestos
y
transiciones
(
sólo
los
que

HTML5
soporta)

•  No
>enen
la
calidad
de
experiencia
de
las
na>vas
(en

rendimiento,
ﬂuidez,
gestos
naturales,
etc.)

•  Ciertas
caracterís>cas
del

SO
na>vo,
como
el
sistema
de

no>ﬁcaciones,
algunos
sensores
y
gestos
avanzados,
no

están
todavía
disponibles

68

Chris>an
Karasiewicz

Aplicaciones
híbridas

•  Son
una
combinación
de
apps
na>vas
y
web

•  Son
esencialmente
aplicaciones
HTML5
empaquetadas

en
contenedores
de
na>vas

•  Residen
en
el
disposi>vo

•  Se
instalan
desde
el
store

•  El
propósito
es
reunir
lo
mejor
de
los
dos
mundos:

–  Tener
un
código
único
para
todas
las
plataformas

–  Tener
acceso
a
las
capacidades
del
disposi>vo,
como

el
acelerómetro,
GPS,
cámara,
etc.

69Chris>an
Karasiewicz

70

¡Depende!

•  Producto!
•  Negocio!
•  Usuarios!
•  Capacidad técnica y recursos
disponibles!
•  Tiempo disponible!
¿Cuál?

Chris>an
Karasiewicz

"Deﬁne
a
problem.
Then
solve
that
problem

and
decide
on
what
channels
make
sense
to

carry
out
the
solu>on".

—
Brad
Frost

71

Aplicaciones
naAvas

72

75

2.2

(0.5%)

2.3.3
-‐2.3.7

(9.1%)

4.0.3
-‐4.0.4

(7.8%)

4.1.x
-‐4.3

(48.7%)

4.4

(33.9%)

76
An
OpenSignal
Report
August
2014

Seguir
las
Guías
de
esAlo

•  Especialmente
en
áreas
UX
principales
como

–  Navegación

–  Controles
básicos
(campos
de
texto,
botones,

pestañas,
desplegables…)

–  Acciones
principales
(compar>r…)

–  Gestos
(aunque
está
más
abierto)

•  Son
“normas”,
recomendaciones
y

consideraciones
generales
de
diseño.

•  Son
guías
(en
el
sen>do
de
“dirigir”
o

“encaminar”),
no
mandamientos

77

Android

hJp://developer.android.com/design/index.html
78

iOS

hJp://developer.apple.com/library/ios/#documenta>on/userexperience/conceptual/mobilehig/Introduc>on/Introduc>on.html
79

Convergencia
de
funcionalidades
y

diseño,
diferencias
de
ﬁlosoVa

80

•  Sin
botones

•  Vía
so}ware:

–  Back

–  Home

–  Recents

83

Estructura
básica

84

Estructura

85

Layout
popularizado
por
iOS

Barra
de
estado
(de
sistema)

Título
de
pantalla
y
navegación

secundaria
(+
acciones)

Contenido/navegación
principal

Pestañas
de
navegación

Estructura

86

Layout
popularizado
por
iOS

Barra
de
estado
(de
sistema)

Título
de
pantalla
y
navegación

secundaria
(+
acciones)

Contenido/navegación
principal

Acciones

1.  Barra
de
acciones

principales

2.  Control
de
vistas

3.  Contenido
principal

4.  Barra
de
acciones

“split”

87

Distribución
de
acciones

90

AcAon
bar

1.  Icono
de
aplicación
(con
o
sin
la
aﬀordance
“up”)

2.  Control
de
vistas

3.  Botones
de
acción

4.  “Desbordamiento”
de
acciones
(ac>on
overﬂow)

92

SiAos
web
móviles

98

Webs
opAmizadas
para
móvil

100
Jakob
Nielsen

Webs
opAmizadas
para
móvil

•  Si>o
web
op>mizado
para
móviles
separado

•  Redirigir
los
usuarios
que
visiten
el
si>o
web
al

si>o
web
móvil

•  Enlazar
si>o
web
móvil
y
si>o
web
complete

entre
ellos

•  Y
mejor…
hacer
una
aplicación.

104

CríAca

“Mobile
is
not
less”

—
Josh
Clark

105

Es
importante…

•  No
confundir
contexto
con
intención

•  No
asumir
más
de
la
cuenta
sobre
el
tamaño

de
la
pantalla

–  No
implica
necesitar
menos
información.

–  No
implica
necesitar
menos
funcionalidades.

107

Contra-‐estrategias

•  Enfa>zar,
no
eliminar

•  U>lizar
“progressive
enhancement”
(mejora

progresiva)

•  U>lizar
técnicas
adapta>vas,
como
responsive

web
design

108

Mobile
ﬁrst

110
Luke
Wroblewski

Empezar
pequeño
y
mejorar
hacia

arriba

•  Empezar
por
defecto
con
lo
principal

•  Buscar

oportunidades
de
mejorar

111

Luke
Wroblewsky

113

Luke
Wroblewsky

115

Móvil
primero

•  Te
fuerza
a
focalizar
y
priorizar
tus
productos

teniendo
en
cuenta
las
restricciones

inherentes
al
diseño
de
móviles

•  Te
permite
ofrecer
experiencias
innovadoras

basándote
en
las
nuevas
capacidades
propias

de
los
disposi>vos
móviles

116

AdapAve
Content

117
Karen
McGrane

"Content
is
the
main
reason
we
use
our
mobile

devices
(aside
from
Angry
Birds)".

—
Karen
McGrande

121

Contenido
antes
que
la
plataforma

Contenido
>
Contenedor

122

Planteamiento

Contenido
adapta>vo:

•  Es
más
que
“móvil”.

•  Contenido
en
un
formato
que
permita

compar>rlo
y
distribuirlo
en
cualquier

plataforma.

•  Plataformas
que
controles
(actuales)
o

futuras.

123

Responsive
web
design

124
Ethan
MarcoJe

•  El
diseño
se
adapta
al
tamaño
y
orientación
de

la
pantalla
y
al
disposi>vo
que
se
esté

u>lizando.

•  El
contenido
es
el
mismo.

125

¿Cómo?

•  Grilla
fluida:
columnas
basadas
en
porcentajes
que
cambian
de
forma
flexible
con

el
tamaño
del
disposi>vo

•  Imágenes
flexibles:
tamaño
fluido
de
imágenes
basadas
en
porcentaje

•  Media
queries:
una
herramienta
de
CSS3

que
detecta
las
caracterís>cas
del

disposi>vo
(tamaño,
resolución
y
otras)
y
lanza
una
hoja
de
es>los
apropiada.

Brad
Frost
126

Diseñar
para
mulAdisposiAvo

Cambiamos
de
disposiAvos
a
lo
largo
del
día

Anna
Dahlström
134

NFL
135
hJps://www.youtube.com/watch?v=qn7RfQU1MJg

Rachel
Hinman
138

Coherencia
Sincronización
Compar>ción
de
pantalla

Cambio
de
disposi>vo
Complementariedad
Simultaneidad

Internet
de
las
cosas

Paradigma
móvil
emergente

Disfrutar
tocando

Organizar
la
interfaz
para
tocar

Al
alcance
de
la
mano

Al
alcance
de
los
dedos

Interacción
mul>tác>l

Interacción
y
manipulación
directa

Sensación
de
realismo

Feedback
inmediato

Animación

144

“You’re

designing
a

physical
device”

Josh
Clark

147

Deﬁnir
y
organizar
la
interfaz
también

para
tocar

148

¿Cómo
sujetamos
el
móvil?

49%
36%
15%

Steven
Hoober
149

49%
36%
75%
Steven
Hoober
150

26%
10%
36%
Steven
Hoober
151

90% 10%
Steven
Hoober
152

Raizlabs

Áreas
de
interacción

153

154

Situar
las
acciones
arriesgadas
o
los

elementos
UI
auxiliares

Poner
las
botones
de
acción
principales
y

navegación

Luke
Wroblewski

•  Aplicaciones
iOS

– Navegación
en
la
parte
inferior
de
la
pantalla

•  Aplicaciones
Android

– Navegación
en
la
parte
superior
de
la
pantalla

•  Web
móvil

– Navegación
en
la
parte
inferior
de
la
pantalla

161
Josh
Clark

Steven
Hoober

“We
know
that

this
diagram
is

wrong
”

Steven
Hoober

162

Steven
Hoober

Los
usuarios
preﬁeren
tocar
el
centro

de
la
pantalla

165

•  Situar
las
acciones
principales
en
el
centro

•  Situar
las
acciones
secundarias
arriba
y
abajo

Los
usuarios
preﬁeren
tocar
el
centro

de
la
pantalla

168

Diseñar
en
función
de
cómo

sos>enen
el
disposi>vo
los
usuarios

169

Postura
tableta

Luke
Wroblewski
170

171
Áreas
de
interacción

D.
Saﬀer

L.
Wroblewski

Acciones arriesgadas o elementos
UI auxiliares

Botones
de
acción
principales

y
navegación

172

Facilitar
las
acciones

principales

Es
imposible
llegar

sin
levantar
la
mano

174

Evitar
situar

controles
en
el

centro
superior

176

Lectura
cómoda

R.
Hinman
177

Portapapeles

R.
Hinman
178

Al
alcance
de
la
mano

Boring
et
al.

Facilitar
el
movimiento
de
la
mano

180

Al
alcance
del
disposiAvo
periférico
de

introducción
de
datos
en
el
sistema

de
los
dedos

184

Yema/pulpejo:

10-‐14
mm

Punta:

8-‐10
mm

Adecuación
de
los
elementos
de
la

interfaz
al
tamaño
de
los
dedos

185

Tamaño
del
objeAvo

7
mm

Aceptable
7
mm

ÓpAmo
por
precisión

9
mm

9
mm

§ Para
cerrar,
eliminar
o
acciones
graves
o
importantes

5
mm

5
mm

Mínimo
para
tamaños
pequeños

§ Si
se
necesita
apilar
gran
can>dad
de
elementos

+10

10

7

186

El
tamaño
del
obje>vo
inﬂuye

en
la
tasa
de
errores

Microso}
187

Tocar
es
impreciso

•  Los
obje>vos
tác>les
deben
ser
lo
más

grandes
posible

•  Tap
el
contenedor
entero

•  Diseñar
con
listas
y
cajas
grandes

188

Espacio
en
blanco
entre
objeAvos

2
mm

2
mm
(al
menos)
de
separación
visual
reduce

errores
y
la
percepción
de
diﬁcultad.

189

Zona
pulsable

La
zona
pulsable
debe
ser
igual
o
mayor
al

tamaño
real
(visual)
del
botón.

190

El
espacio
muerto
reduce
el
peligro
de
pulsar

otro
botón
por
equivocación.

Espacio
muerto

191

Enviar
el
correo
en

lugar
de
añadir
otro

des>natario.

192

Enviar
el
correo
en

lugar
de
añadir
otro

des>natario.

Borrar
el
correo
en

lugar
de
guardarlo

como
borrador.

193

Espacio
en
blanco
entre
objeAvos

194
S.
Hoober

Los
obje>vos
tác>les
deben
estar
al
menos
alejados

8
mm
del
centro
geométrico
(preferible
10
mm)

Gestos
básicos

L.
Wroblewski
et
al.
197

Permi>r
la
interacción
múl>ple

L.
Wroblewski
et
al.
198

Permi>r
usar
la
pantalla
entera
como
control

200

Permi>r
usar
la
pantalla
entera
como
control

201

Para
deﬁnir
gestos
en
una
aplicación:

1.  Asegurar
que
el
acceso
a
contenidos
y

funcionalidades
principales
u>liza
gestos

básicos.

2.  Añadir
gestos
más
complejos
como
atajos
a

las
funcionalidades
más
usadas.

202

Cuanto
más
complicados
sean
los
gestos,

menos
personas
podrán
realizarlos

203

Escala
intuiAva
de
gestos

204
Five
WorkLight

Emular
las
interacciones
“naturales”

NUI
exploits
skills
that
we

have
acquired
through
a

life>me
of
living
in
the

World

Bill
Buxton,
principal
researcher

en
Microso}

“
”
206

Interacción
y
manipulación
directa

Acción
–
reacción/percepción
están

cerca,
similar
al
mundo
†sico

B. Pagán 208

El
contenido
es
lo
principal

210

Dedicar
el
máximo
espacio

posible
al
contenido

211

Minimizar
el
uso
del
chrome

212

Chrome
is
the
visual
design

elements
that
give
users
informa>on

about
or
commands
to
operate
on

the
screen´s
content
(as
opposed
to

being
part
of
the
content).
These

design
elements
are
provided
by
the

underlying
system
and
sorrounds

the
user´s
data

J.Nielsen&R.Budiu

“

213

Minimizar
el
uso
del
chrome

214

Interactuar
directamente
con
el
contenido

215

Interactuar
directamente
con
el
contenido

216

Interactuar
directamente
con
el
contenido

217

Interactuar
directamente
con
el
contenido

218

Interactuar
directamente
con
el
contenido

219

Sensación
de
realismo

When
appropriate,
add
a
realis>c,

physical
dimension
to
your
applica>on.

O}en,
the
more
true
to
life
your

applica>on
looks
and
behaves,
the

easier
it
is
for
people
to
understand

how
it
works
and
the
more
they
enjoy

using
it

iOS
Human
Interface
Guidelines

”
“
221

Feedback:
respuesta
inmediata
al
toque
del
usuario

Manipulación
directa
del
contenido,
en
lugar
de
uso
de

controles

Simular
las
leyes
†sicas
(inercia,
resistencia…)
en
los
objetos

Toques
de
realismo

U>lizar
metáforas
del
mundo
real

222

U>lización
de
metáforas
del
mundo
†sico

223

Realismo
visual
=
realismo
de
interacción

224

Esqueomorﬁsmo

Antiguo
Kitch
225

•  Diﬁcultad
de
descubrir
qué
es
pulsable

(aﬀordance)

•  Más
di†cil
de
aprender

•  Más
di†cil
de
recordar

Problemas
de
usabilidad

228

Feedback
inmediato

(en
Aempo
y
espacio)

235
Lookand Feel
§ 

Visual

§ 

Sonoro

§ 

Tác>l

Feedback
visual
es
el

principal
y
más
importante

236

Cambiar

de

color

Cambiar
de
tamaño

Moverse

237

Feedback
inmediato:
el
contenido

debe
seguir
a
los
dedos

238

Feedback
mulAmodal

239

Feedback
mulAmodal

240

Al
hacer
una
foto:

§ Se
muestra
una
animación.

§ Se
reproduce
un
sonido.

Animación:
interacción
más
natural

Inercia

Sensación
de
realismo
usando

efectos
del
mundo
†sico

Aceleración
y
desaceleración

Velocidad

Fricción

Elas>cidad

242

Mejora
la
orientación

Las
transiciones
visuales
mejoran
la

comprensión
de
lo
que
ha
pasado

Muestra
cambios
de
estado
o
situación

Muestra
relaciones
entre
elementos

244

La percepción periférica del movimiento es eficiente
Dirige
la
atención
del
usuario

Puede ayudar en los cambios de elementos
pequeños o fuera del centro de la pantalla
246

Dirige
la
atención
del
usuario

247

Dirige
la
atención
del
usuario

248

Las
transiciones
suaves
añaden
realismo

Ofrece
con>nuidad
y
man>ene
el
ﬂujo

Crea
consistencia
y
con>nuidad

Las
transiciones
deben
ser
suaves
y
su>les

para
no
llamar
la
atención
hacia
sí
mismas

249

Reducir
el
cambio
de
pantallas

puede
mantener
el
ﬂujo

Ofrece
con>nuidad
y
man>ene
el
ﬂujo

De
pantallas
discretas
a
movimiento
con>nuo

Abrir,
cerrar
y
refrescar

paneles
con

gestos

Abrir
el
contenido
y
medias
en
la
página

252

253

Busca
las
diferencias

Bill
ScoJ

254

Inténtalo
otra
vez…

Bill
ScoJ

El
placer
de
la
interacción

tác>l,
disfrutar
haciendo

259

265
Luke
Wroblewski

Interacción

principal

Estructurar
la
interfaz

266
Josh
Clark

Estructurar
la
interfaz

267
Android

268

Contenido
lo
primero,

navegación
lo
segundo

269

Contenido
máximo,
navegación
mínima

Luke
Wroblewski

N
a
v
e
g
a
c
i
ó
n
C
o
n
t
e
n
i
d
o
N
a
v
e
g
a
c
i
ó
n
C
o
n
t
e
n
i
d
o
270

271

N
a
v
e
g
a
c
i
ó
n
C
o
n
t
e
n
i
d
o
N
a
v
e
g
a
c
i
ó
n
C
o
n
t
e
n
i
d
o

272
Luke
Wroblewski

Aportar
valor
inmediatamente

In
the
new
app,
we
present
relevant
content
up-‐front
and
instantly
no>fy
users

of
new
invita>ons
and
messages.
In
other
words,
we
remove
the
fric>on
of
a

dashboard
and
provide
immediate
value
on
app
launch

Centrarse
en
las
tareas
clave

273

Priori>ze
content
for
mobile
users

Priorizar
contenidos
para
los

usuarios
en
movilidad

Anna
Yeaman
274

Simpliﬁcar
la
interfaz

275
J.
Nielsen
&
R.
Budio

Simpliﬁcar
la
interfaz

276

Simpliﬁcar
la
interfaz

Mostrar
una
gran
idea
por
pantalla

Jeremy
Olson
277

Revelar
más
información

•  Fuera
de
la
pantalla
por
defecto

•  Presentación
progresiva

•  Acordeón

•  Carrusel

278

Luke
Wroblewski

279

280
Luke
Wroblewski
280

282

Acciones
principales

Contenido
principal

Navegación

Contenido
secundario

Luke
Wroblewski

Controlar la complejidad mostrando la
información necesaria en cada momento.
Presentación
progresiva

283

La
revelación
progresiva
diﬁere
las

caracterís>cas
avanzadas
o
rara
vez
u>lizadas

a
una
pantalla
secundaria,
haciendo
las

aplicaciones
más
fáciles
de
aprender
y
menos

propensas
a
errores.

Jakob Nielsen
“
”
284

Presentación
progresiva

287

Josh
Clark

Presentación
progresiva

288

Josh
Clark

“Clarity
trumps
density”

Josh
Clark

Presentación
progresiva

289

Presentación
progresiva

290

Josh
Clark

Presentación
progresiva

291

“Op>mize
each
screen
for
the

primary
task”

Josh
Clark

Josh
Clark

Carrusel

Dejar
clara
la
navegación

293

Carrusel

Navegación
explícita

Indicar
dónde
se
está

respecto
al
total

294

Carrusel

Ofrecer
pistas
de
los
gestos

Tác>l
como
mejora

295

Aprovechar
las
ventajas
del
móvil

296

”
“Mobile
is
not
less
but
more.
Mobile
has
superpowers
…

Sensors

Give
Us
Superpowers”

Josh
Clark

Mecanismos
del
disposiAvo

297

¿Cómo
puedo
usar
estos
mecanismos?

Henrik
Olsen

Mecanismos
del
disposiAvo

298
Henrik
Olsen

¿Cómo
puedo
usar
estos
mecanismos?

301

La regla general es limitar
el uso de formularios en
el contexto móvil

Brian
Flig

“

Evitar
introducir
inputs
al
usuario

Evitar
introducir
inputs
al
usuario

…
cuando
sea
posible

TransmiAr
visualmente
sensación
de

facilidad

Luke
Wroblewski

302

Simpliﬁcar
el
número
de

elementos
visuales

Reducir
la
introducción
de
datos

Barron
Cuadrro

303

No
solicitar
datos

Barron
Cuadrro

305

En
web
no
es
muy

adecuado.

Menos
en
móvil.

No
solicitar
datos

Barron
Cuadrro

306

No
solicitar
datos…
a
no
ser
que

sean
absolutamente
necesarios

Solicitar
el
mínimo
de

información
necesaria
para

la
tarea

Rellenar

por
defecto
el
formulario
con

los
datos
personales
conocidos

Usar
el
autocompletado
y
sugerencias

Guardar
y
u>lizar
la
historia
de
uso

307

Mostrar
seleccionado
por
defecto
los

datos
per>nentes

308

Aprovechar
los
datos
que

ya
conoce
el
disposi>vo.

309

Aprovechar
las
posibilidades

del
disposi>vo.

Brad
Frost
311

Información
que
puede
saber

el
sistema

Simpliﬁcar

312

Eliminar
los
campos

innecesarios
o
repe>ciones

Luke
Wroblewski

314

Esconder
los
campos

innecesarios

Elegir
el
método
de
input
más
fácil

315

Botones
con
tamaño
suﬁciente

Radio
buJons
con
tamaño
e

interespacio
suﬁciente

Check
boxes
con
tamaño
e

interespacio
suﬁciente

316

Desplegables
no
son
eﬁcientes

317

Luke
Wroblewski

318

Luke
Wroblewski

319

Luke
Wroblewski

321

Destacar
la
acción
principal
de
las

secundarias

322

Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”

Ähnlich wie Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles” (20)

Mehr von Escoles Universitàries Gimbernat i Tomàs Cerdà

Mehr von Escoles Universitàries Gimbernat i Tomàs Cerdà (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”