Este documento trata sobre los principios de usabilidad para el diseño de interfaces móviles. Explica que es importante dar control al usuario, reducir la carga de memoria y mantener una interfaz consistente. También cubre temas como el uso de iconos significativos, una paleta de colores reducida, diseño para orientación vertical u horizontal, tiempos de carga rápidos, menús simples, texto claro y legible, botones grandes y búsquedas avanzadas. El objetivo es crear aplicaciones móviles que sean fáciles y intuitivas

1. DESARROLLO DE INTERFACES
UNIDAD 1. USABILIDAD MOVIL
Laura Folgado Galache

2. Usabilidad en la vida real
¿Cómo buscamos la
mermelada en un
supermercado?
¿Y la planta de
traumatología en
un hospital?
¿Cómo sabemos
qué dirección
tenemos que seguir
en una rotonda?
¿Y cómo
recordamos el sitio
donde hemos
aparcado el coche
en un parking
subterráneo?
Laura Folgado Galache Septiembre 2015
2

3. Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
3

4. Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
4

5. Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
5

6. Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
6

7. Usabilidad en la vida real
Laura Folgado Galache Septiembre 2015
7

8. Usabilidad
¨ “En realidad, usabilidad es que algo funciona bien:
significa que una persona de capacidady aptitudes
medias (o incluso, por debajo de la media) pueda
usar algo, tanto si es un sitio web, un mando a
distancia o una puerta giratoria, para lo que se
supone que sirve, sin frustrarse desesperadamente
mientras lo hace”.
¤ Steve Krug
Laura Folgado Galache Septiembre 2015
8

9. Diseño de interfaces móviles
¨ Dar control al usuario.
¨ Reducir la carga de memoria.
¨ Mantener una interfaz consistente.
¡NO ME
HAGAS
PENSAR!
Laura Folgado Galache Septiembre 2015
9

10. Regla principal: menos es más
Septiembre 2015
10
Laura Folgado Galache

11. El icono
Laura Folgado Galache Septiembre 2015
11
¡ES NUESTRA TARJETA
DE PRESENTACIÓN!
NOS RECUERDA
QUE TENEMOS QUE
USAR LA APP

12. El icono
Laura Folgado Galache Septiembre 2015
12
¨ Sin texto. Imagen significativa. Paleta de colores reducida.

13. El icono
Laura Folgado Galache Septiembre 2015
13
¨ Sin texto. Imagen significativa. Paleta de colores reducida.

14. El icono
Laura Folgado Galache Septiembre 2015
14
¨ Paleta reducida de colores, ¡salvo en Apps para niños!

15. Colores
Laura Folgado Galache Septiembre 2015
15

16. Colores
Laura Folgado Galache Septiembre 2015
16

17. Colores
Laura Folgado Galache Septiembre 2015
17

18. Colores
Laura Folgado Galache Septiembre 2015
18
¨ Consulta:
www.colourlovers.com

19. Diseño de la aplicación
Laura Folgado Galache Septiembre 2015
19

20. Diseño de la aplicación
Laura Folgado Galache Septiembre 2015
20

21. Diseño de la aplicación
Laura Folgado Galache Septiembre 2015
21
http://freshpeel.com/2012/0
6/where-do-people-check-
their-mobile-phones/

22. Diseño de la aplicación
Laura Folgado Galache Septiembre 2015
22
¨ Un usuario no mira: OJEA:
Menos pasos
para realizar
una acción
Mayor y mejor
visibilidad de
elementos
Elementos táctiles
y fácilmente
seleccionables
Contenido útil

23. Orientación
Septiembre 2015Laura Folgado Galache
23
¨ Debe pensarse para orientación vertical y
horizontal.

24. Orientación
¨ Táctil. Uso de algunos dedos.
¨ Menos precisión: selección
sobre inserción de texto.
¨ Pocas líneas de texto.
¨ Luz solar afecta a visibilidad.
¨ Tareas cortas y simples.
¨ Pocos elementos de
navegación.
¨ Sonidos y vibraciones.
¨ Orientación vertical y
horizontal.
¨ Memoria limitada.
Septiembre 2015
24
Laura Folgado Galache

25. Orientación
Septiembre 2015
25
Laura Folgado Galache
¨ Solución al problema de
la pantalla pequeña.
¨ Táctil. Uso de todos los
dedos.
¨ Luz solar afecta a la
visibilidad.
¨ Más uso de
aplicaciones.
¨ Sonidos y vibraciones.
¨ Orientación vertical y
horizontal.

26. Launch images
Septiembre 2015
26
Laura Folgado Galache

27. Tiempo de carga
¨ Incluye solo contenido
necesario.
¨ Reduce el tamaño de
las imágenes.
¨ Utiliza spinners.
Septiembre 2015
27
Laura Folgado Galache

28. Navegación móvil
¨ ¿Dónde está el titulo de una aplicación para
móviles?
¨ ¿Y su logotipo?
¨ ¿Cómo es el icono del menú?
¨ ¿Qué aspecto tiene el formulario de acceso?
¨ ¿Dónde está la opción de logout?

29. Navegación móvil
• Arriba a la izquierda
Logotipo
• Arriba a la izquierda: icono con tres líneas.
Navegación
• Arriba a la derecha.
• Dentro de la navegación.
Buscador
Laura Folgado Galache Septiembre 2015
29

30. Menús
Septiembre 2015Laura Folgado Galache
30
Se muestran al
tocar el botón (3
líneas).
Localización
izquierda,
generalmente.
Evitar elementos
de
desplazamiento:
submenús.

31. Menús

32. Menús

33. Texto
¨ Tipografía sin serifa:
verdana, helvética…
¨ Texto enriquecido
(encabezados, negrita…)
¨ Interlineado no simple.
¨ Listas en lugar de párrafos.
¨ Párrafo por defecto 34pt.
¡No inferior a 24pt!
Septiembre 2015
33
Laura Folgado Galache

34. Texto
¨ No abuses de
tipografías.
¨ Contraste texto-fondo:
texto negro, fondo
blanco o gris al 5%.
Septiembre 2015
34
Laura Folgado Galache

35. Texto
¨ Utiliza encabezados

36. Texto
Septiembre 2015Laura Folgado Galache
36
¨ Utiliza texto explicativo si algo no está claro.

37. Texto
Septiembre 2015Laura Folgado Galache
37
¨ Evita ambigüedades

38. Texto
Septiembre 2015Laura Folgado Galache
38
¨ Informa al usuario de qué ocurre en todo momento.

39. Botones
Septiembre 2015Laura Folgado Galache
39
¨ Zonas calientes en móviles

40. Botones
Septiembre 2015Laura Folgado Galache
40
¨ Zonas calientes en tabletas.

41. Botones
¨ Áreas de interacción
grandes.
¨ Mensajes visibles por encima del dedo.
Laura Folgado Galache Septiembre 2015
41

42. Botones
Septiembre 2015Laura Folgado Galache
42
¨ Parte inferior, para no ocultar la navegación.

43. Botones
Septiembre 2015Laura Folgado Galache
43
¨ Texto asociado a botones.
¨ Mensaje emergente si no se reconoceel icono.

44. Botones
Septiembre 2015
44
Laura Folgado Galache

45. Búsqueda
Septiembre 2015
45
Laura Folgado Galache

46. Búsqueda
Septiembre 2015Laura Folgado Galache
46
¨ Búsquedas avanzadas para aplicaciones móviles.

47. Formularios
Septiembre 2015Laura Folgado Galache
47
¨ Etiquetas sobre o dentro de los campos de texto.

48. Formularios
Septiembre 2015
48
Laura Folgado Galache

49. Créditos
¨ Capturas de pantalla propias.
¨ http://www.pixabay.com
¨ https://play.google.com
¨ Usabilidad en móviles y tabletas,
diseño sensible. Percy Negrete.
¨ Diseño y usabilidad en
aplicaciones móviles para
iPhone. Izaskun Saez.
¨ Usabilidad en móviles y tabletas,
diseño sensible. Percy Negrete.
¨ Diseño y usabilidad en aplicaciones
móviles para iPhone. Izaskun Saez.
¨ Trucos optimización
¨ Desarrollo web
¨ Creative Bloq
¨ Mobile Web Best Practises (W3C)
Imágenes Textos
Laura Folgado Galache Septiembre 2015
49