usabilidad móvil

DESARROLLO DE INTERFACESUNIDAD 1. USABILIDAD MOVIL

Laura Folgado Galache

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

Usabilidad en la vida real

Laura Folgado Galache Septiembre 2015

3

Usabilidad en la vida real

Laura Folgado Galache Septiembre 2015

4

Usabilidad en la vida real

Laura Folgado Galache Septiembre 2015

5

Usabilidad en la vida real

Laura Folgado Galache Septiembre 2015

6

Usabilidad en la vida real

Laura Folgado Galache Septiembre 2015

7

Usabilidad

¨ “En realidad, usabilidad es que algo funciona bien: significa que una persona de capacidad y 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

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

Regla principal: menos es más

Septiembre 2015

10

Laura Folgado Galache

El icono

Laura Folgado Galache Septiembre 2015

11

¡ES NUESTRA TARJETA DE PRESENTACIÓN!

NOS RECUERDA QUE TENEMOS QUE

USAR LA APP

El icono

Laura Folgado Galache Septiembre 2015

12

¨ Sin texto. Imagen significativa. Paleta de colores reducida.

El icono

Laura Folgado Galache Septiembre 2015

13

¨ Sin texto. Imagen significativa. Paleta de colores reducida.

El icono

Laura Folgado Galache Septiembre 2015

14

¨ Paleta reducida de colores, ¡salvo en Apps para niños!

Colores

Laura Folgado Galache Septiembre 2015

15

Colores

Laura Folgado Galache Septiembre 2015

16

Colores

Laura Folgado Galache Septiembre 2015

17

Colores

Laura Folgado Galache Septiembre 2015

18

¨ Consulta:

www.colourlovers.com

Diseño de la aplicación

Laura Folgado Galache Septiembre 2015

19

Diseño de la aplicación

Laura Folgado Galache Septiembre 2015

20

Diseño de la aplicación

Laura Folgado Galache Septiembre 2015

21

http://freshpeel.com/2012/06/where-do-people-check-their-mobile-phones/

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

seleccionablesContenido útil

Orientación

Septiembre 2015Laura Folgado Galache

23

¨ Debe pensarse para orientación vertical y horizontal.

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

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.

Launch images

Septiembre 2015

26

Laura Folgado Galache

Tiempo de carga

¨ Incluye solo contenido necesario.

¨ Reduce el tamaño de las imágenes.

¨ Utiliza spinners.

Septiembre 2015

27

Laura Folgado Galache

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?

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

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.

Menús

Menús

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

Texto

¨ No abuses de tipografías.

¨ Contraste texto-fondo: texto negro, fondo blanco o gris al 5%.

Septiembre 2015

34

Laura Folgado Galache

Texto

¨ Utiliza encabezados

Texto

Septiembre 2015Laura Folgado Galache

36

¨ Utiliza texto explicativo si algo no está claro.

Texto

Septiembre 2015Laura Folgado Galache

37

¨ Evita ambigüedades

Texto

Septiembre 2015Laura Folgado Galache

38

¨ Informa al usuario de qué ocurre en todo momento.

Botones

Septiembre 2015Laura Folgado Galache

39

¨ Zonas calientes en móviles

Botones

Septiembre 2015Laura Folgado Galache

40

¨ Zonas calientes en tabletas.

Botones

¨ Áreas de interacción grandes.

¨ Mensajes visibles por encima del dedo.

Laura Folgado Galache Septiembre 2015

41

Botones

Septiembre 2015Laura Folgado Galache

42

¨ Parte inferior, para no ocultar la navegación.

Botones

Septiembre 2015Laura Folgado Galache

43

¨ Texto asociado a botones.¨ Mensaje emergente si no se reconoce el icono.

Botones

Septiembre 2015

44

Laura Folgado Galache

Búsqueda

Septiembre 2015

45

Laura Folgado Galache

Búsqueda

Septiembre 2015Laura Folgado Galache

46

¨ Búsquedas avanzadas para aplicaciones móviles.

Formularios

Septiembre 2015Laura Folgado Galache

47

¨ Etiquetas sobre o dentro de los campos de texto.

Formularios

Septiembre 2015

48

Laura Folgado Galache

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