usabilidad para móviles

@ 2011 - Juan Carlos Marino

Por: Juan C Marino

Usabilidad en el diseño de

Aplicaciones Móviles


Quien soy

•  Ingeniero de Sistemas – Universidad del Norte – Barranquilla.

•  Master Certificate in IS/IT Project Management – Villanova University – Estados Unidos.

•  +20 años desarrollo de software. •  +14 años Ecosistema Móvil. •  Experiencia Internacional.


Agenda Introducción

Capas UX Móvil.

Criterios de Diseño

Validación del Diseño

Errores cómunes

Ejemplo


INTRODUCCIÓN


Usabilidad

•  Efectividad. – Capacidad de completar tareas.

•  Eficiencia. – Esfuerzo necesario para completarlas.

•  Satisfacción. – Gusto percibido durante interacción.


Condicionantes

•  Perfil. •  Objetivos. •  Contexto.


Retos

•  Distracción o prisa. •  Interrupciones. •  Pago por servicio. •  Percepción de seguridad. •  Optimización para voz. •  Tareas concretas.


Porqué

•  Entorno repleto de distracciones.


Porqué

•  Dispositivos heterógeneos. – Capacidades de hardware. – Opciones de SO. – Disponibilidad.


Teclado numérico y Joystick


Teclado seminumérico y ball


Cursor


Táctil (multi-touch)


Teclado completo + ball


Teclado completo y táctil


CAPAS UX MOVIL


Portar: Adaptar para otros dispositivos

Optimizar: Reducir a su mínimo tamaño

Probar, Probar, … y probar un poco más

Desarrollo: Poner todas las piezas juntas

Prototipo: Probar en contexto

Diseño: Experiencia de usuario

Plan de dispositivos

Estrategia: Como añadimos valor a nuestro Negocio

Contexto: Valor añadido al cliente, el modo en que la información es consumida

Necesidades: Qué hacer

Idea: Inspiración


CRITERIOS DE DISEÑO


REGLA # 1 OLVIDE LO QUE CREE QUE SABE


Consideraciones

•  Personal. •  Siempre al alcance de la mano.

– 80% del tiempo. – Primera cosa que se ve al levantar. – Última cosa que se ve al acostarse. – Mas importante.


ü No asuma una necesidad ü Resuelva un problema real

Recomendaciones


Los hombres son de marte Las mujeres son de venus


REGLA # 2 CONTEXTO OBJETIVOS

NECESIDADES


•  Quienes son los usuarios. – Que sabe de ellos? – Que comportamiento puede predecir? – Cultura?

•  Que está sucediendo? – Están en línea? – Circunstancias para que usuario absorba

contenido de mejor manera.

Consideraciones


•  Cuando interactuarán? – En casa y con gran cantidad de tiempo? – En trabajo y con períodos cortos de tiempo? – Períodos libres mientras se espera por algo?

•  Donde están los usuarios? – Espacio público o privado? – Adentro o afuera? – Día o noche?

Consideraciones


•  Porqué usarán la app? – Que valor obtienen?

•  Cómo usan su dispositivo móvil? – Lo mantienen en la mano? – Lo mantienen en el bolsillo?

•  Cómo lo sostienen? – Abierto o cerrado? – Horizontal o vertical?

Consideraciones


Recomendaciones

•  No esté solamente en línea. •  Datos recuperados = caché. •  Mostrar el último estado conocido. •  Haga y apruebe el TEST DEL PING

PONG. •  Interrupciones.


Recomendaciones

•  No favorezca la marca sobre los usuarios. – Evite elementos que impiden uso inmediato

de la aplicación. •  Logo. •  Ventana de acerca de. •  Pantalla splash.


Recomendaciones

•  No cargue mucho ni muy rápido. – Períodos cortos de atención. – Períodos de actividad intensa. – Cargar en pequeños bloques y sólo cuando

se necesita. – Que sea interrumpible.


REGLA # 3 NO PUEDE SOPORTAR

TODO


Consideraciones

•  Navegadores móviles no son los mismo que navegadores desktop (PC). – No están estandarizados.

•  Flash no está disponible en iOS. •  Soporte a formatos de archivos

multimedia. •  Características de dispositivos.


Tener en cuenta capacidad de las pantallas actuales


Colores


Diversidad

•  Es necesario diseñar para todos los tamaños de pantalla?

•  Se necesita crear un diseño separado para cada variante?

•  Por requerimiento se puede diseñar para un tamaño de pantalla / un dispositivo único. – No es lo común.


Problema de la densidad

•  En PC la norma de facto de la industria es 85 ppi.

•  Asus EE PC 900: 133 ppi •  iPhone: 160 ppi •  Nokia E60: 240 ppi


Recomendaciones

•  Determinar el rango de ppi que se debe soportar.

•  Probar en todas para verificar que no se pierda detalle.

•  Diseñar y definir elementos basados en unidades relativas (porcentajes).

•  Android. – Dip (160 dpi).


Estrategias

•  Definir grupos de dispositivos. Ejemplo: – Diminuto: 84, 96, 101, 128, 130, 132. – Pequeño: 160, 176. – Medio: 208, 220, 240. – Grande: 320, 360, 480+ – PC: 800+


Estrategias

•  Definir un diseño de referencia. – Normalmente un tamaño medio.

•  Permite. – Mejoras progresivas. – Manejar dispositivos con otros modelos de

interfaz (touch). – Ajustar el diseño para compensar limitaciones

grandes.


REGLA # 4 SIMPLE SIMPLE

MAS SIMPLE


•  Dar información relevante. •  Usar abreviaturas. •  Escritura concisa. •  Acciones más importantes asociadas a

softkeys. •  Vigilar espacios en blanco. •  Evitar contenido multimedia.

Recomendaciones


Recomendaciones

•  Estructura. – Ancha. – Baja.

•  Iniciar con diseños probados. – Experimente. – Comparta información.


REGLA # 5 NO OLVIDAR GUIAR A LOS USUARIOS


Consideraciones

•  El ambiente es distractivo. – Atención se comparte con otras

actividades.


Recomendaciones

•  Ir de la mano con el usuario. •  Mostrar que se está haciendo durante la

espera: – Cargando datos… – Actualización en progreso…

•  Desplegar mensajes de error amigables e informativos.


REGLA # 6 NO COMPRIMA EL MUNDO


Recomendaciones

•  Movilizar no minimizar. •  Pantallas pequeñas. •  Evite fuentes pequeñas y/o pixeladas. •  De suficiente espacio. •  Tenga en cuenta que pueden haber

toques accidentales. •  Use el área más grande posible.


REGLA # 7 NO HAGA

ESCRIBIR A USUARIOS


Consideraciones

•  Teclado muy pequeño. – Optimizado para datos numéricos.

•  Se necesitan dedos muy delgados. •  No hay retroalimentación sensorial.


Recomendaciones

•  Llene de antemano todo lo que pueda. •  Selección de opciones. •  Evitar escritura predictiva.

– Excepto si hay clara ventaja.


Recomendaciones

•  Navegación hacia atrás. – Conservar información introducida

anteriormente. – Ahorrar pasos.

•  Si hay transacciones confirmadas no mostrar.

•  Cada pulsación empeora la usabilidad.


REGLA # 8 PROTOTIPOS


Recomendaciones

•  Idea = Puede estar mal. •  Poco tiempo = 1 día. •  Bosquejo = no completamente funcional. •  Iteración = Comprensión del problema. •  Código = Usar y tirar. •  Reuso = Presta código. •  Historia = Experiencia.


REGLA # 9 USAR

CARACTERISTICAS DEL DISPOSITIVO


Localización


Cámara


Acelerómetro


Almacenamiento local


Offline


Tamaño de toque


Tamaño de toque

•  7 x 7 mm con 1 mm de espacio (indice). •  8 x 8 mm con 2 mm de espacio (pulgar). •  Listas deben tener mínimo 5 mm de

espacio entre líneas. •  Ancho del dedo límita densidad de

elementos en pantalla. •  Elementos muy cerca no podrán

seleccionarse individualmente.


Diagramas de gestos


REGLA # 10 NO USAR CASCADA


Usar Ágil

•  Cascada es de alto riesgo.

•  Hacer prototipo en papel.

•  Construir prototipos rapidamente.

•  Probar teorías rapidamente.


Ágil

•  Desarrollo iterativo e incremental. – Pequeñas mejoras, unas tras otras. – 1 a 4 semanas por iteración. – Planificación, Análisis, Diseño, Desarrollo,

Pruebas y Documentación. •  Pruebas unitarias continuas. •  Corrección de errores antes de siguiente

iteración. •  Integración con el cliente.


EJEMPLO DE DISEÑO


VALIDACIÓN DEL DISEÑO


•  Cinco segundos. •  Delimitación. •  Navegación. •  Concepto.


Cinco segundos

•  Que plataforma es? •  Que tipo de aplicación es? •  Que supone que hace la aplicación?


Delimitación


Navegación


Concepto


EJEMPLO


Wireframe


Diseño inicial menu


Diseño 240 px


Diseño 120 px


Prototipo Nokia N95


Iteración 2


Diseño botones


Diseño 240 px


Diseño player


Prototipo


ERRORES COMUNES


•  Dispositivo móvil = computador. •  Contexto. •  Demasiada información. •  Demora en tiempo de ejecución. •  Diseño genérico. •  Falta de Pruebas.


EJEMPLO


GRACIAS

Contacto: juan.marino @ mevolucion.com


Referencias

•  http://www.alzado.org/articulo.php?id_art=445

•  http://www.slideshare.net/andreskarp/usabilidad-para-mviles

•  http://www.slideshare.net/fling/designing-mobile-experiences

usabilidad para móviles

Design