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

¿Por qué móviles?

assetDNA

4

Hercampus 5

Google 6

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

Luke Wroblewski

9

Investor._.com 10

Ingresos por móvil

Luke Wroblewski 11

comScore – Market Realist 12

Dynatrace 13

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


Google 15


“A mobile device is the internet for many people.”

—Susannah Fox, Pew Research Center

Ventas globales

Luke Wroblewski

17

Luke Wroblewski

18

REUTERS/Kimimasa Mayama

2005

19

AP

2013

20

° ° ° ° °

El País

21

¿Qué es un móvil?

Los disposiAvos

Luke Wroblewski 24

25 Luke Wroblewski

26 Luke Wroblewski

¿Tableta?

27

¿PortáAl…?

28

¿…?

29

¿… o tableta?

30

¿PortáAles?

31 Luke Wroblewski

¿…?

Luke Wroblewski

32

33

34

Luke Wroblewski

35

•  Diseñar para multidispositivos!

•  Favorecer el continuum de pantallas!

• Optimizar para interacción táctil!

•  Permitir el cursor & teclado!

Las personas

Foto de flickr/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

Restricciones

Tamaño de pantallas

41

42

19”

3,5”

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

Cómo lo usamos

“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

48 TraderGroup Signal

§  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

52 Google

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

53 Google

54 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

“

58 Google

AcAtud móvil

59

Estrategias

61 Brad Frost

62 Brad Frost

63 Brad Frost

64 Luke Wroblewski

65

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í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

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

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

70

¡Depende! •  Producto!

• Negocio!

• Usuarios!

•  Capacidad técnica y recursos

disponibles!

•  Tiempo disponible!

¿Cuál?

Chris>an Karasiewicz

"Define 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

73

74

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 filosoVa

80

Hardware

81

•  Home

82

•  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

88

89

Distribución de acciones

90

91

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

Back

94

Up vs back

96

97

SiAos web móviles

98

99

Webs opAmizadas para móvil

100

Jakob Nielsen

Theresa Neil 101

Theresa Neil 102

103

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

106

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

109

Mobile first

110

Luke Wroblewski

Empezar pequeño y mejorar hacia arriba •  Empezar por defecto con lo principal •  Buscar oportunidades de mejorar

111

Luke Wroblewsky 112

Luke Wroblewsky

113

Luke Wroblewsky 114

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

Karen McGrane 118

Karen McGrane 119

Karen McGrane 120

"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

127

128

129

130

131

132

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

Google 136

Google 137

Rachel Hinman 138

Coherencia Sincronización Compar>ción de pantalla

Cambio de disposi>vo Complementariedad Simultaneidad

Internet de las cosas

140

141

Paradigma móvil emergente

Luke Wroblewski 143

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

Diseñar para tocar

146

“You’re designing a physical device” Josh Clark

147

Definir 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

155 Rachel Hinman

156 Rachel Hinman

157 Josh Clark

Luke Wroblewski 158

159 zzzz

160 Josh Clark

•  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

@shoobe01!#UXPA2014!

163

164

Steven Hoober

Los usuarios prefieren tocar el centro de la pantalla

165

Steven Hoober 166

Steven Hoober 167

•  Situar las acciones principales en el centro

•  Situar las acciones secundarias arriba y abajo

Los usuarios prefieren 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. Saffer

L. Wroblewski

Acciones arriesgadas o elementos UI auxiliares

Botones de acción principales y navegación

172

Facilitar las acciones principales

173

Es imposible llegar sin levantar la mano

174

175

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

181

182

183

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 influye 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 dificultad.

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)

195

Interacción mulAtácAl

Gestos básicos

L. Wroblewski et al. 197

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

L. Wroblewski et al. 198

Lorient 199

Permi>r usar la pantalla entera como control

200

Permi>r usar la pantalla entera como control

201

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

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

1 2

3 4

209

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


216


217


218


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

Esqueomorfismo

Antiguo

Kitch

225

Google 226

227

•  Dificultad de descubrir qué es pulsable (affordance)

•  Más di�cil de aprender •  Más di�cil de recordar

Problemas de usabilidad

228

229

Feedback inmediato (en Aempo y espacio)

Arturo Toledo 231

232

233

234

235

Look and 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

243

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

245

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


247


248

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

250

251

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

253

Busca las diferencias

Bill ScoJ

254

Inténtalo otra vez…

Bill ScoJ

255

256

257

Disfrutar tocando

El placer de la interacción tác>l, disfrutar haciendo

259

Buenas prácAcas

Layout

262

263 Luke Wroblewski

264

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

Navegación

Contenido

Navegación

Contenido

270

271

Navegación

Contenido

Navegación

Contenido

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

Simplificar la interfaz

275 J. Nielsen & R. Budio


276


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

281 Luke Wroblewski

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

285

286


287 Josh Clark


288 Josh Clark

“Clarity trumps density” Josh Clark


289


290 Josh Clark


291

“Op>mize each screen for the primary task”

Josh Clark

Josh Clark

Acordeón

292

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?

299

Formularios

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

TransmiAr visualmente sensación de facilidad

Luke Wroblewski

302

Simplificar el número de elementos visuales

Reducir la introducción de datos

Barron Cuadrro

303

No solicitar datos

Barron Cuadrro

304

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 h

istoria de uso

307

Mostrar seleccionado por defecto los

datos per>nentes

308

Aprovechar los datos

que

ya conoce el disposi>vo.

309

Aprovechar las posib

ilidades

del disposi>vo.

310

Brad Frost 311

Información que puede sabe

r

el sistema

Simplificar

312

Eliminar los campos

innecesarios o repe>ciones

313

Luke Wroblewski

314

Esconder los campos

innecesarios

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

315

Botones con tamaño suficiente

Radio buJons con tam

año e

interespacio suficiente

Check boxes con tam

año e

interespacio suficiente

316

Desplegables no son

eficientes

317

Luke Wroblewski

318

Luke Wroblewski

319

320

Luke Wroblewski

321

Destacar la acción principal de las secundarias

322

323

324

325

326

Technology

Patrones de diseño de interacción de interfaces móviles