material de la sesión técnica sobre “patrones de diseño de interacción de interfaces...
TRANSCRIPT
![Page 1: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/1.jpg)
1
Diseño de interfaz móvil
![Page 2: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/2.jpg)
-‐ ¿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
![Page 3: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/3.jpg)
¿Por qué móviles?
![Page 4: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/4.jpg)
assetDNA
4
![Page 5: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/5.jpg)
Hercampus 5
![Page 6: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/6.jpg)
Google 6
![Page 7: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/7.jpg)
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”
![Page 8: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/8.jpg)
Los usuarios admiten que usan el móvil en el baño
11Mark. Octubre 2011. Usuarios EEUU.
75%
8
![Page 9: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/9.jpg)
Luke Wroblewski
9
![Page 10: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/10.jpg)
Investor._.com 10
![Page 11: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/11.jpg)
Ingresos por móvil
Luke Wroblewski 11
![Page 12: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/12.jpg)
comScore – Market Realist 12
![Page 13: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/13.jpg)
Dynatrace 13
![Page 14: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/14.jpg)
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
![Page 15: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/15.jpg)
28% said that the tablet is their primary computer
Usuarios sólo desde móviles
Google 15
![Page 16: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/16.jpg)
Usuarios sólo desde móviles
“A mobile device is the internet for many people.”
—Susannah Fox, Pew Research Center
![Page 17: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/17.jpg)
Ventas globales
Luke Wroblewski
17
![Page 18: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/18.jpg)
Luke Wroblewski
18
![Page 19: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/19.jpg)
REUTERS/Kimimasa Mayama
2005
19
![Page 20: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/20.jpg)
AP
2013
20
![Page 21: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/21.jpg)
° ° ° ° °
El País
21
![Page 22: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/22.jpg)
¿Qué es un móvil?
![Page 23: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/23.jpg)
Los disposiAvos
![Page 24: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/24.jpg)
Luke Wroblewski 24
![Page 25: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/25.jpg)
25 Luke Wroblewski
![Page 26: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/26.jpg)
26 Luke Wroblewski
![Page 27: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/27.jpg)
¿Tableta?
27
![Page 28: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/28.jpg)
¿PortáAl…?
28
![Page 29: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/29.jpg)
¿…?
29
![Page 30: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/30.jpg)
¿… o tableta?
30
![Page 31: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/31.jpg)
¿PortáAles?
31 Luke Wroblewski
![Page 32: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/32.jpg)
¿…?
Luke Wroblewski
32
![Page 33: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/33.jpg)
33
![Page 34: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/34.jpg)
34
![Page 35: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/35.jpg)
Luke Wroblewski
35
• Diseñar para multidispositivos!
• Favorecer el continuum de pantallas!
• Optimizar para interacción táctil!
• Permitir el cursor & teclado!
![Page 36: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/36.jpg)
Las personas
![Page 37: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/37.jpg)
Foto de flickr/Clive Fint
“Mobile refers to the user, and not the device or the applica>on”.
Barbara Ballard
37
![Page 38: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/38.jpg)
Móviles
• Personal • Communica>ve • Handheld • Wakable • The carry principle
Barbara Ballard 38
![Page 39: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/39.jpg)
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
![Page 40: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/40.jpg)
Restricciones
![Page 41: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/41.jpg)
Tamaño de pantallas
41
![Page 42: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/42.jpg)
42
19”
3,5”
![Page 43: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/43.jpg)
Velocidad de conexión
• Velocidades más lentas
43
![Page 44: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/44.jpg)
GRPS
EDGE
3G
ADSL
Velocidad inmediato
7 segundos
medio minuto
GPRS 2 minutos
UMTS
44
![Page 45: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/45.jpg)
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
![Page 46: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/46.jpg)
Cómo lo usamos
![Page 47: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/47.jpg)
“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
![Page 48: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/48.jpg)
48 TraderGroup Signal
![Page 49: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/49.jpg)
§ En movimiento § Suscep>bles a distracciones e interrupciones
§ Disponibles
49 Alexis Polegato
![Page 50: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/50.jpg)
§ 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...)!
![Page 51: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/51.jpg)
51 ShuJerstock
Móvil no es esto
![Page 52: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/52.jpg)
52 Google
![Page 53: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/53.jpg)
Las tabletas se usan en el sofá y en la cama
53 Google
![Page 54: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/54.jpg)
54 Google
![Page 55: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/55.jpg)
Preferencia de dispositivo a lo largo del día
55
![Page 56: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/56.jpg)
Cuándo usamos el móvil
Luke Wroblewski
56
![Page 57: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/57.jpg)
57 Adobe The State of Mobile Benchmark -‐ Q2 2013
![Page 58: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/58.jpg)
“
58 Google
![Page 59: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/59.jpg)
AcAtud móvil
59
![Page 60: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/60.jpg)
Estrategias
![Page 61: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/61.jpg)
61 Brad Frost
![Page 62: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/62.jpg)
62 Brad Frost
![Page 63: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/63.jpg)
63 Brad Frost
![Page 64: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/64.jpg)
64 Luke Wroblewski
![Page 65: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/65.jpg)
65
![Page 66: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/66.jpg)
Aproximaciones disponibles
• Aplicaciones na>vas • Aplicaciones híbridas • Si>os web móviles / aplicaciones web
66 • Chris>an Karasiewicz
![Page 67: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/67.jpg)
Aplicaciones naAvas
• Se descargan (desde el store) y residen en el disposi>vo. • Son específicas 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>ficaciones
67 Chris>an Karasiewicz
![Page 68: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/68.jpg)
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, fluidez, gestos naturales, etc.) • Ciertas caracterís>cas del SO na>vo, como el sistema de
no>ficaciones, algunos sensores y gestos avanzados, no están todavía disponibles
68
Chris>an Karasiewicz
![Page 69: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/69.jpg)
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.
69 Chris>an Karasiewicz
![Page 70: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/70.jpg)
70
¡Depende! • Producto!
• Negocio!
• Usuarios!
• Capacidad técnica y recursos
disponibles!
• Tiempo disponible!
¿Cuál?
Chris>an Karasiewicz
![Page 71: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/71.jpg)
"Define a problem. Then solve that problem and decide on what channels make sense to carry out the solu>on". — Brad Frost
71
![Page 72: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/72.jpg)
Aplicaciones naAvas
72
![Page 73: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/73.jpg)
73
![Page 74: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/74.jpg)
74
![Page 75: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/75.jpg)
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%)
![Page 76: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/76.jpg)
76 An OpenSignal Report August 2014
![Page 77: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/77.jpg)
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
![Page 78: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/78.jpg)
Android
hJp://developer.android.com/design/index.html 78
![Page 79: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/79.jpg)
iOS
hJp://developer.apple.com/library/ios/#documenta>on/userexperience/conceptual/mobilehig/Introduc>on/Introduc>on.html 79
![Page 80: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/80.jpg)
Convergencia de funcionalidades y diseño, diferencias de filosoVa
80
![Page 81: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/81.jpg)
Hardware
81
![Page 82: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/82.jpg)
• Home
82
![Page 83: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/83.jpg)
• Sin botones • Vía so}ware:
– Back – Home – Recents
83
![Page 84: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/84.jpg)
Estructura básica
84
![Page 85: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/85.jpg)
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
![Page 86: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/86.jpg)
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
![Page 87: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/87.jpg)
1. Barra de acciones principales
2. Control de vistas 3. Contenido principal 4. Barra de acciones
“split”
87
![Page 88: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/88.jpg)
88
![Page 89: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/89.jpg)
89
![Page 90: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/90.jpg)
Distribución de acciones
90
![Page 91: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/91.jpg)
91
![Page 92: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/92.jpg)
AcAon bar
1. Icono de aplicación (con o sin la affordance “up”) 2. Control de vistas 3. Botones de acción 4. “Desbordamiento” de acciones (ac>on overflow)
92
![Page 93: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/93.jpg)
![Page 94: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/94.jpg)
Back
94
![Page 95: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/95.jpg)
![Page 96: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/96.jpg)
Up vs back
96
![Page 97: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/97.jpg)
97
![Page 98: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/98.jpg)
SiAos web móviles
98
![Page 99: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/99.jpg)
99
![Page 100: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/100.jpg)
Webs opAmizadas para móvil
100
Jakob Nielsen
![Page 101: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/101.jpg)
Theresa Neil 101
![Page 102: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/102.jpg)
Theresa Neil 102
![Page 103: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/103.jpg)
103
![Page 104: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/104.jpg)
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
![Page 105: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/105.jpg)
CríAca
“Mobile is not less” — Josh Clark
105
![Page 106: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/106.jpg)
106
![Page 107: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/107.jpg)
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
![Page 108: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/108.jpg)
Contra-‐estrategias
• Enfa>zar, no eliminar • U>lizar “progressive enhancement” (mejora progresiva)
• U>lizar técnicas adapta>vas, como responsive web design
108
![Page 109: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/109.jpg)
109
![Page 110: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/110.jpg)
Mobile first
110
Luke Wroblewski
![Page 111: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/111.jpg)
Empezar pequeño y mejorar hacia arriba • Empezar por defecto con lo principal • Buscar oportunidades de mejorar
111
![Page 112: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/112.jpg)
Luke Wroblewsky 112
![Page 113: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/113.jpg)
Luke Wroblewsky
113
![Page 114: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/114.jpg)
Luke Wroblewsky 114
![Page 115: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/115.jpg)
Luke Wroblewsky
115
![Page 116: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/116.jpg)
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
![Page 117: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/117.jpg)
AdapAve Content
117
Karen McGrane
![Page 118: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/118.jpg)
Karen McGrane 118
![Page 119: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/119.jpg)
Karen McGrane 119
![Page 120: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/120.jpg)
Karen McGrane 120
![Page 121: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/121.jpg)
"Content is the main reason we use our mobile devices (aside from Angry Birds)". — Karen McGrande
121
![Page 122: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/122.jpg)
Contenido antes que la plataforma
Contenido > Contenedor
122
![Page 123: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/123.jpg)
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
![Page 124: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/124.jpg)
Responsive web design
124
Ethan MarcoJe
![Page 125: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/125.jpg)
• 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
![Page 126: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/126.jpg)
¿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
![Page 127: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/127.jpg)
127
![Page 128: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/128.jpg)
128
![Page 129: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/129.jpg)
129
![Page 130: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/130.jpg)
130
![Page 131: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/131.jpg)
131
![Page 132: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/132.jpg)
132
![Page 133: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/133.jpg)
Diseñar para mulAdisposiAvo
![Page 134: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/134.jpg)
Cambiamos de disposiAvos a lo largo del día
Anna Dahlström 134
![Page 135: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/135.jpg)
NFL 135 hJps://www.youtube.com/watch?v=qn7RfQU1MJg
![Page 136: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/136.jpg)
Google 136
![Page 137: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/137.jpg)
Google 137
![Page 138: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/138.jpg)
Rachel Hinman 138
Coherencia Sincronización Compar>ción de pantalla
Cambio de disposi>vo Complementariedad Simultaneidad
![Page 139: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/139.jpg)
Internet de las cosas
![Page 140: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/140.jpg)
140
![Page 141: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/141.jpg)
141
![Page 142: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/142.jpg)
Paradigma móvil emergente
![Page 143: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/143.jpg)
Luke Wroblewski 143
![Page 144: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/144.jpg)
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
![Page 145: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/145.jpg)
Diseñar para tocar
![Page 146: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/146.jpg)
146
![Page 147: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/147.jpg)
“You’re designing a physical device” Josh Clark
147
![Page 148: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/148.jpg)
Definir y organizar la interfaz también para tocar
148
![Page 149: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/149.jpg)
¿Cómo sujetamos el móvil?
49% 36% 15%
Steven Hoober 149
![Page 150: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/150.jpg)
49%
36% 75%
Steven Hoober 150
![Page 151: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/151.jpg)
26%
10% 36%
Steven Hoober 151
![Page 152: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/152.jpg)
90% 10%
Steven Hoober 152
![Page 153: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/153.jpg)
Raizlabs
Áreas de interacción
153
![Page 154: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/154.jpg)
154
Situar las acciones arriesgadas o los elementos UI auxiliares
Poner las botones de acción principales y navegación
Luke Wroblewski
![Page 155: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/155.jpg)
155 Rachel Hinman
![Page 156: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/156.jpg)
156 Rachel Hinman
![Page 157: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/157.jpg)
157 Josh Clark
![Page 158: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/158.jpg)
Luke Wroblewski 158
![Page 159: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/159.jpg)
159 zzzz
![Page 160: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/160.jpg)
160 Josh Clark
![Page 161: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/161.jpg)
• 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
![Page 162: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/162.jpg)
Steven Hoober
“We know that this diagram is wrong ” Steven Hoober
162
![Page 163: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/163.jpg)
@shoobe01!#UXPA2014!
163
![Page 164: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/164.jpg)
164
![Page 165: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/165.jpg)
Steven Hoober
Los usuarios prefieren tocar el centro de la pantalla
165
![Page 166: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/166.jpg)
Steven Hoober 166
![Page 167: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/167.jpg)
Steven Hoober 167
![Page 168: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/168.jpg)
• Situar las acciones principales en el centro
• Situar las acciones secundarias arriba y abajo
Los usuarios prefieren tocar el centro de la pantalla
168
![Page 169: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/169.jpg)
Diseñar en función de cómo sos>enen el disposi>vo los usuarios
169
![Page 170: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/170.jpg)
Postura tableta
Luke Wroblewski 170
![Page 171: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/171.jpg)
171
Áreas de interacción
D. Saffer
L. Wroblewski
Acciones arriesgadas o elementos UI auxiliares
Botones de acción principales y navegación
![Page 172: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/172.jpg)
172
Facilitar las acciones principales
![Page 173: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/173.jpg)
173
![Page 174: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/174.jpg)
Es imposible llegar sin levantar la mano
174
![Page 175: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/175.jpg)
175
![Page 176: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/176.jpg)
Evitar situar controles en el centro superior
176
![Page 177: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/177.jpg)
Lectura cómoda
R. Hinman 177
![Page 178: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/178.jpg)
Portapapeles
R. Hinman 178
![Page 179: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/179.jpg)
Al alcance de la mano
![Page 180: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/180.jpg)
Boring et al.
Facilitar el movimiento de la mano
180
![Page 181: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/181.jpg)
181
![Page 182: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/182.jpg)
182
![Page 183: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/183.jpg)
183
![Page 184: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/184.jpg)
Al alcance del disposiAvo periférico de introducción de datos en el sistema
de los dedos
184
![Page 185: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/185.jpg)
Yema/pulpejo: 10-‐14 mm
Punta: 8-‐10 mm
Adecuación de los elementos de la interfaz al tamaño de los dedos
185
![Page 186: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/186.jpg)
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
![Page 187: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/187.jpg)
El tamaño del obje>vo influye en la tasa de errores
Microso} 187
![Page 188: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/188.jpg)
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
![Page 189: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/189.jpg)
Espacio en blanco entre objeAvos
2 mm
2 mm (al menos) de separación visual reduce errores y la percepción de dificultad.
189
![Page 190: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/190.jpg)
Zona pulsable
La zona pulsable debe ser igual o mayor al tamaño real (visual) del botón.
190
![Page 191: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/191.jpg)
El espacio muerto reduce el peligro de pulsar otro botón por equivocación.
Espacio muerto
191
![Page 192: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/192.jpg)
Enviar el correo en lugar de añadir otro des>natario.
192
![Page 193: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/193.jpg)
Enviar el correo en lugar de añadir otro des>natario. Borrar el correo en lugar de guardarlo como borrador.
193
![Page 194: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/194.jpg)
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)
![Page 195: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/195.jpg)
195
![Page 196: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/196.jpg)
Interacción mulAtácAl
![Page 197: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/197.jpg)
Gestos básicos
L. Wroblewski et al. 197
![Page 198: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/198.jpg)
Permi>r la interacción múl>ple
L. Wroblewski et al. 198
![Page 199: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/199.jpg)
Lorient 199
![Page 200: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/200.jpg)
Permi>r usar la pantalla entera como control
200
![Page 201: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/201.jpg)
Permi>r usar la pantalla entera como control
201
![Page 202: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/202.jpg)
Para definir 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
![Page 203: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/203.jpg)
Cuanto más complicados sean los gestos, menos personas podrán realizarlos
203
![Page 204: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/204.jpg)
Escala intuiAva de gestos
204 Five WorkLight
![Page 205: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/205.jpg)
Emular las interacciones “naturales”
![Page 206: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/206.jpg)
NUI exploits skills that we have acquired through a life>me of living in the World
Bill Buxton, principal researcher en Microso}
“ ”
206
![Page 207: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/207.jpg)
Interacción y manipulación directa
![Page 208: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/208.jpg)
Acción – reacción/percepción están cerca, similar al mundo �sico
B. Pagán 208
![Page 209: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/209.jpg)
1 2
3 4
209
![Page 210: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/210.jpg)
El contenido es lo principal
210
![Page 211: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/211.jpg)
Dedicar el máximo espacio posible al contenido
211
![Page 212: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/212.jpg)
Minimizar el uso del chrome
212
![Page 213: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/213.jpg)
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
![Page 214: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/214.jpg)
Minimizar el uso del chrome
214
![Page 215: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/215.jpg)
Interactuar directamente con el contenido
215
![Page 216: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/216.jpg)
Interactuar directamente con el contenido
216
![Page 217: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/217.jpg)
Interactuar directamente con el contenido
217
![Page 218: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/218.jpg)
Interactuar directamente con el contenido
218
![Page 219: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/219.jpg)
Interactuar directamente con el contenido
219
![Page 220: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/220.jpg)
Sensación de realismo
![Page 221: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/221.jpg)
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
![Page 222: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/222.jpg)
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
![Page 223: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/223.jpg)
U>lización de metáforas del mundo �sico
223
![Page 224: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/224.jpg)
Realismo visual = realismo de interacción
224
![Page 225: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/225.jpg)
Esqueomorfismo
Antiguo
Kitch
225
![Page 226: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/226.jpg)
Google 226
![Page 227: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/227.jpg)
227
![Page 228: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/228.jpg)
• Dificultad de descubrir qué es pulsable (affordance)
• Más di�cil de aprender • Más di�cil de recordar
Problemas de usabilidad
228
![Page 229: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/229.jpg)
229
![Page 230: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/230.jpg)
Feedback inmediato (en Aempo y espacio)
![Page 231: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/231.jpg)
Arturo Toledo 231
![Page 232: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/232.jpg)
232
![Page 233: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/233.jpg)
233
![Page 234: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/234.jpg)
234
![Page 235: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/235.jpg)
235
Look and Feel
§ Visual § Sonoro § Tác>l
![Page 236: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/236.jpg)
Feedback visual es el principal y más importante
236
![Page 237: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/237.jpg)
Cambiar de color
Cambiar de tamaño
Moverse
237
![Page 238: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/238.jpg)
Feedback inmediato: el contenido debe seguir a los dedos
238
![Page 239: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/239.jpg)
Feedback mulAmodal
239
![Page 240: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/240.jpg)
Feedback mulAmodal
240
Al hacer una foto:
§ Se muestra una animación. § Se reproduce un sonido.
![Page 241: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/241.jpg)
Animación: interacción más natural
![Page 242: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/242.jpg)
Inercia
Sensación de realismo usando efectos del mundo �sico
Aceleración y desaceleración
Velocidad
Fricción
Elas>cidad
242
![Page 243: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/243.jpg)
243
![Page 244: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/244.jpg)
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
![Page 245: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/245.jpg)
245
![Page 246: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/246.jpg)
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
![Page 247: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/247.jpg)
Dirige la atención del usuario
247
![Page 248: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/248.jpg)
Dirige la atención del usuario
248
![Page 249: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/249.jpg)
Las transiciones suaves añaden realismo
Ofrece con>nuidad y man>ene el flujo
Crea consistencia y con>nuidad
Las transiciones deben ser suaves y su>les para no llamar la atención hacia sí mismas
249
![Page 250: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/250.jpg)
250
![Page 251: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/251.jpg)
251
![Page 252: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/252.jpg)
Reducir el cambio de pantallas puede mantener el flujo
Ofrece con>nuidad y man>ene el flujo
De pantallas discretas a movimiento con>nuo
Abrir, cerrar y refrescar paneles con gestos
Abrir el contenido y medias en la página
252
![Page 253: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/253.jpg)
253
Busca las diferencias
Bill ScoJ
![Page 254: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/254.jpg)
254
Inténtalo otra vez…
Bill ScoJ
![Page 255: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/255.jpg)
255
![Page 256: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/256.jpg)
256
![Page 257: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/257.jpg)
257
![Page 258: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/258.jpg)
Disfrutar tocando
![Page 259: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/259.jpg)
El placer de la interacción tác>l, disfrutar haciendo
259
![Page 260: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/260.jpg)
Buenas prácAcas
![Page 261: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/261.jpg)
Layout
![Page 262: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/262.jpg)
262
![Page 263: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/263.jpg)
263 Luke Wroblewski
![Page 264: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/264.jpg)
264
![Page 265: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/265.jpg)
265 Luke Wroblewski
Interacción principal
![Page 266: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/266.jpg)
Estructurar la interfaz
266 Josh Clark
![Page 267: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/267.jpg)
Estructurar la interfaz
267 Android
![Page 268: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/268.jpg)
268
Contenido lo primero, navegación lo segundo
![Page 269: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/269.jpg)
269 Contenido máximo, navegación mínima
Luke Wroblewski
![Page 270: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/270.jpg)
Navegación
Contenido
Navegación
Contenido
270
![Page 271: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/271.jpg)
271
Navegación
Contenido
Navegación
Contenido
![Page 272: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/272.jpg)
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
![Page 273: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/273.jpg)
Centrarse en las tareas clave
273
![Page 274: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/274.jpg)
Priori>ze content for mobile users
Priorizar contenidos para los usuarios en movilidad
Anna Yeaman 274
![Page 275: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/275.jpg)
Simplificar la interfaz
275 J. Nielsen & R. Budio
![Page 276: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/276.jpg)
Simplificar la interfaz
276
![Page 277: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/277.jpg)
Simplificar la interfaz
Mostrar una gran idea por pantalla
Jeremy Olson 277
![Page 278: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/278.jpg)
Revelar más información
• Fuera de la pantalla por defecto • Presentación progresiva • Acordeón • Carrusel
278
![Page 279: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/279.jpg)
Luke Wroblewski
279
![Page 280: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/280.jpg)
280 Luke Wroblewski 280
![Page 281: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/281.jpg)
281 Luke Wroblewski
![Page 282: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/282.jpg)
282
Acciones principales
Contenido principal
Navegación
Contenido secundario
Luke Wroblewski
![Page 283: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/283.jpg)
Controlar la complejidad mostrando la información necesaria en cada momento.
Presentación progresiva
283
![Page 284: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/284.jpg)
La revelación progresiva difiere 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
![Page 285: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/285.jpg)
285
![Page 286: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/286.jpg)
286
![Page 287: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/287.jpg)
Presentación progresiva
287 Josh Clark
![Page 288: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/288.jpg)
Presentación progresiva
288 Josh Clark
“Clarity trumps density” Josh Clark
![Page 289: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/289.jpg)
Presentación progresiva
289
![Page 290: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/290.jpg)
Presentación progresiva
290 Josh Clark
![Page 291: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/291.jpg)
Presentación progresiva
291
“Op>mize each screen for the primary task”
Josh Clark
Josh Clark
![Page 292: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/292.jpg)
Acordeón
292
![Page 293: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/293.jpg)
Carrusel Dejar clara la navegación
293
![Page 294: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/294.jpg)
Carrusel Navegación explícita
Indicar dónde se está respecto al total
294
![Page 295: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/295.jpg)
Carrusel Ofrecer pistas de los gestos
Tác>l como mejora
295
![Page 296: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/296.jpg)
Aprovechar las ventajas del móvil
296
” “Mobile is not less but more. Mobile has superpowers … Sensors Give Us Superpowers” Josh Clark
![Page 297: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/297.jpg)
Mecanismos del disposiAvo
297
¿Cómo puedo usar estos mecanismos?
Henrik Olsen
![Page 298: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/298.jpg)
Mecanismos del disposiAvo
298 Henrik Olsen
¿Cómo puedo usar estos mecanismos?
![Page 299: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/299.jpg)
299
![Page 300: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/300.jpg)
Formularios
![Page 301: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/301.jpg)
301
La regla general es limitar el uso de formularios en el contexto móvil
Brian Flig
“ Evitar introducir inpu
ts al usuario
Evitar introducir inpu
ts al usuario
… cuando sea posible
![Page 302: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/302.jpg)
TransmiAr visualmente sensación de facilidad
Luke Wroblewski
302
Simplificar el número de elementos visuales
![Page 303: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/303.jpg)
Reducir la introducción de datos
Barron Cuadrro
303
No solicitar datos
![Page 304: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/304.jpg)
Barron Cuadrro
304
![Page 305: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/305.jpg)
Barron Cuadrro
305
En web no es muy adecuado. Menos en móvil.
No solicitar datos
![Page 306: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/306.jpg)
Barron Cuadrro
306
No solicitar datos… a
no ser que
sean absolutamente necesarios
Solicitar el mínimo de
información necesaria para
la tarea
![Page 307: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/307.jpg)
Rellenar por defecto
el formulario con
los datos personales conocidos
Usar el autocompletado y sugerencias
Guardar y u>lizar la h
istoria de uso
307
Mostrar seleccionado por defecto los
datos per>nentes
![Page 308: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/308.jpg)
308
Aprovechar los datos
que
ya conoce el disposi>vo.
![Page 309: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/309.jpg)
309
Aprovechar las posib
ilidades
del disposi>vo.
![Page 310: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/310.jpg)
310
![Page 311: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/311.jpg)
Brad Frost 311
Información que puede sabe
r
el sistema
![Page 312: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/312.jpg)
Simplificar
312
Eliminar los campos
innecesarios o repe>ciones
![Page 313: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/313.jpg)
313
![Page 314: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/314.jpg)
Luke Wroblewski
314
Esconder los campos
innecesarios
![Page 315: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/315.jpg)
Elegir el método de input más fácil
315
Botones con tamaño suficiente
![Page 316: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/316.jpg)
Radio buJons con tam
año e
interespacio suficiente
Check boxes con tam
año e
interespacio suficiente
316
![Page 317: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/317.jpg)
Desplegables no son
eficientes
317
![Page 318: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/318.jpg)
Luke Wroblewski
318
![Page 319: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/319.jpg)
Luke Wroblewski
319
![Page 320: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/320.jpg)
320
![Page 321: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/321.jpg)
Luke Wroblewski
321
![Page 322: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/322.jpg)
Destacar la acción principal de las secundarias
322
![Page 323: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/323.jpg)
323
![Page 324: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/324.jpg)
324
![Page 325: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/325.jpg)
325
![Page 326: Material de la sesión técnica sobre “Patrones de diseño de interacción de interfaces móviles”](https://reader034.vdocumento.com/reader034/viewer/2022052307/55abf0761a28ab217a8b45fa/html5/thumbnails/326.jpg)
326