Usabilidad móvil
-
Upload
laura-folgado-galache -
Category
Education
-
view
613 -
download
0
Transcript of 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