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