Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESARROLLO DE INTERFACES
UNIDAD 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?
¿...
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 capacidady aptitudes
medias ...
Diseño de interfaces móviles
¨ Dar control al usuario.
¨ Reducir la carga de memoria.
¨ Mantener una interfaz consistente....
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 L...
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/0
6/where-do-people-check-
thei...
Diseño de la aplicación
Laura Folgado Galache Septiembre 2015
22
¨ Un usuario no mira: OJEA:
Menos pasos
para realizar
una...
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...
Orientación
Septiembre 2015
25
Laura Folgado Galache
¨ Solución al problema de
la pantalla pequeña.
¨ Táctil. Uso de todos...
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 201...
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ú?
¨...
Navegación móvil
• Arriba a la izquierda
Logotipo
• Arriba a la izquierda: icono con tres líneas.
Navegación
• Arriba a la...
Menús
Septiembre 2015Laura Folgado Galache
30
Se muestran al
tocar el botón (3
líneas).
Localización
izquierda,
generalmen...
Menús
Menús
Texto
¨ Tipografía sin serifa:
verdana, helvética…
¨ Texto enriquecido
(encabezados, negrita…)
¨ Interlineado no simple.
¨...
Texto
¨ No abuses de
tipografías.
¨ Contraste texto-fondo:
texto negro, fondo
blanco o gris al 5%.
Septiembre 2015
34
Laur...
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 reconoceel 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 tabl...
Upcoming SlideShare
Loading in …5
×

Usabilidad móvil

3,120 views

Published on

Desarrollo de Interfaces (2º Desarrollo de aplicaciones multiplataforma)

Published in: Education
  • Be the first to comment

Usabilidad móvil

  1. 1. DESARROLLO DE INTERFACES UNIDAD 1. USABILIDAD MOVIL Laura Folgado Galache
  2. 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. 3. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 3
  4. 4. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 4
  5. 5. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 5
  6. 6. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 6
  7. 7. Usabilidad en la vida real Laura Folgado Galache Septiembre 2015 7
  8. 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. 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. 10. Regla principal: menos es más Septiembre 2015 10 Laura Folgado Galache
  11. 11. El icono Laura Folgado Galache Septiembre 2015 11 ¡ES NUESTRA TARJETA DE PRESENTACIÓN! NOS RECUERDA QUE TENEMOS QUE USAR LA APP
  12. 12. El icono Laura Folgado Galache Septiembre 2015 12 ¨ Sin texto. Imagen significativa. Paleta de colores reducida.
  13. 13. El icono Laura Folgado Galache Septiembre 2015 13 ¨ Sin texto. Imagen significativa. Paleta de colores reducida.
  14. 14. El icono Laura Folgado Galache Septiembre 2015 14 ¨ Paleta reducida de colores, ¡salvo en Apps para niños!
  15. 15. Colores Laura Folgado Galache Septiembre 2015 15
  16. 16. Colores Laura Folgado Galache Septiembre 2015 16
  17. 17. Colores Laura Folgado Galache Septiembre 2015 17
  18. 18. Colores Laura Folgado Galache Septiembre 2015 18 ¨ Consulta: www.colourlovers.com
  19. 19. Diseño de la aplicación Laura Folgado Galache Septiembre 2015 19
  20. 20. Diseño de la aplicación Laura Folgado Galache Septiembre 2015 20
  21. 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. 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. 23. Orientación Septiembre 2015Laura Folgado Galache 23 ¨ Debe pensarse para orientación vertical y horizontal.
  24. 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. 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. 26. Launch images Septiembre 2015 26 Laura Folgado Galache
  27. 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. 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. 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. 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. 31. Menús
  32. 32. Menús
  33. 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. 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. 35. Texto ¨ Utiliza encabezados
  36. 36. Texto Septiembre 2015Laura Folgado Galache 36 ¨ Utiliza texto explicativo si algo no está claro.
  37. 37. Texto Septiembre 2015Laura Folgado Galache 37 ¨ Evita ambigüedades
  38. 38. Texto Septiembre 2015Laura Folgado Galache 38 ¨ Informa al usuario de qué ocurre en todo momento.
  39. 39. Botones Septiembre 2015Laura Folgado Galache 39 ¨ Zonas calientes en móviles
  40. 40. Botones Septiembre 2015Laura Folgado Galache 40 ¨ Zonas calientes en tabletas.
  41. 41. Botones ¨ Áreas de interacción grandes. ¨ Mensajes visibles por encima del dedo. Laura Folgado Galache Septiembre 2015 41
  42. 42. Botones Septiembre 2015Laura Folgado Galache 42 ¨ Parte inferior, para no ocultar la navegación.
  43. 43. Botones Septiembre 2015Laura Folgado Galache 43 ¨ Texto asociado a botones. ¨ Mensaje emergente si no se reconoceel icono.
  44. 44. Botones Septiembre 2015 44 Laura Folgado Galache
  45. 45. Búsqueda Septiembre 2015 45 Laura Folgado Galache
  46. 46. Búsqueda Septiembre 2015Laura Folgado Galache 46 ¨ Búsquedas avanzadas para aplicaciones móviles.
  47. 47. Formularios Septiembre 2015Laura Folgado Galache 47 ¨ Etiquetas sobre o dentro de los campos de texto.
  48. 48. Formularios Septiembre 2015 48 Laura Folgado Galache
  49. 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

×