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



3



4



5



6



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


8

Diseño de interfaces móviles

¨ Dar control al usuario.¨ Reducir la carga de memoria.¨ Mantener una interfaz consistente.

¡NO ME HAGAS PENSAR!


9

Regla principal: menos es más

Septiembre 2015

10


El icono


11

¡ES NUESTRA TARJETA DE PRESENTACIÓN!

NOS RECUERDA QUE TENEMOS QUE

USAR LA APP

El icono


12

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

El icono


13

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

El icono


14

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

Colores


15

Colores


16

Colores


17

Colores


18

¨ Consulta:

www.colourlovers.com

Diseño de la aplicación


19



20



21

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



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


Orientación

Septiembre 2015

25


¨ 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


Tiempo de carga

¨ Incluye solo contenido necesario.

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

¨ Utiliza spinners.

Septiembre 2015

27


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


29

Menús


30

Se muestran al tocar el botón (3

líneas).

Localización izquierda,

generalmente.

Evitar elementos de

desplazamiento: submenú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


Texto

¨ No abuses de tipografías.

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

Septiembre 2015

34


Texto

¨ Utiliza encabezados

Texto


36

¨ Utiliza texto explicativo si algo no está claro.

Texto


37

¨ Evita ambigüedades

Texto


38

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

Botones


39

¨ Zonas calientes en móviles

Botones


40

¨ Zonas calientes en tabletas.

Botones

¨ Áreas de interacción grandes.

¨ Mensajes visibles por encima del dedo.


41

Botones


42

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

Botones


43

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

Botones

Septiembre 2015

44


Búsqueda

Septiembre 2015

45


Búsqueda


46

¨ Búsquedas avanzadas para aplicaciones móviles.

Formularios


47

¨ Etiquetas sobre o dentro de los campos de texto.

Formularios

Septiembre 2015

48


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


49

usabilidad móvil

Education