usabilidad para móviles
DESCRIPTION
Presentación por el Ingeniero Juan Carlos Marino, Universidad del Norte.TRANSCRIPT
![Page 1: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/1.jpg)
@ 2011 - Juan Carlos Marino
Por: Juan C Marino
Usabilidad en el diseño de
Aplicaciones Móviles
![Page 2: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/2.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 3: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/3.jpg)
@ 2011 - Juan Carlos Marino
Agenda Introducción
Capas UX Móvil.
Criterios de Diseño
Validación del Diseño
Errores cómunes
Ejemplo
![Page 4: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/4.jpg)
@ 2011 - Juan Carlos Marino
![Page 5: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/5.jpg)
@ 2011 - Juan Carlos Marino
![Page 6: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/6.jpg)
@ 2011 - Juan Carlos Marino
INTRODUCCIÓN
![Page 7: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/7.jpg)
@ 2011 - Juan Carlos Marino
Usabilidad
• Efectividad. – Capacidad de completar tareas.
• Eficiencia. – Esfuerzo necesario para completarlas.
• Satisfacción. – Gusto percibido durante interacción.
![Page 8: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/8.jpg)
@ 2011 - Juan Carlos Marino
Condicionantes
• Perfil. • Objetivos. • Contexto.
![Page 9: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/9.jpg)
@ 2011 - Juan Carlos Marino
Retos
• Distracción o prisa. • Interrupciones. • Pago por servicio. • Percepción de seguridad. • Optimización para voz. • Tareas concretas.
![Page 10: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/10.jpg)
@ 2011 - Juan Carlos Marino
Porqué
• Entorno repleto de distracciones.
![Page 11: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/11.jpg)
@ 2011 - Juan Carlos Marino
Porqué
• Dispositivos heterógeneos. – Capacidades de hardware. – Opciones de SO. – Disponibilidad.
![Page 12: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/12.jpg)
@ 2011 - Juan Carlos Marino
Teclado numérico y Joystick
![Page 13: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/13.jpg)
@ 2011 - Juan Carlos Marino
Teclado seminumérico y ball
![Page 14: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/14.jpg)
@ 2011 - Juan Carlos Marino
Cursor
![Page 15: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/15.jpg)
@ 2011 - Juan Carlos Marino
Táctil (multi-touch)
![Page 16: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/16.jpg)
@ 2011 - Juan Carlos Marino
Teclado completo + ball
![Page 17: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/17.jpg)
@ 2011 - Juan Carlos Marino
Teclado completo y táctil
![Page 18: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/18.jpg)
@ 2011 - Juan Carlos Marino
CAPAS UX MOVIL
![Page 19: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/19.jpg)
@ 2011 - Juan Carlos Marino
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
![Page 20: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/20.jpg)
@ 2011 - Juan Carlos Marino
CRITERIOS DE DISEÑO
![Page 21: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/21.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 1 OLVIDE LO QUE CREE QUE SABE
![Page 22: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/22.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 23: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/23.jpg)
@ 2011 - Juan Carlos Marino
ü No asuma una necesidad ü Resuelva un problema real
Recomendaciones
![Page 24: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/24.jpg)
@ 2011 - Juan Carlos Marino
Los hombres son de marte Las mujeres son de venus
![Page 25: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/25.jpg)
@ 2011 - Juan Carlos Marino
![Page 26: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/26.jpg)
@ 2011 - Juan Carlos Marino
![Page 27: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/27.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 2 CONTEXTO OBJETIVOS
NECESIDADES
![Page 28: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/28.jpg)
@ 2011 - Juan Carlos Marino
• 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
![Page 29: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/29.jpg)
@ 2011 - Juan Carlos Marino
• 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
![Page 30: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/30.jpg)
@ 2011 - Juan Carlos Marino
• 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
![Page 31: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/31.jpg)
@ 2011 - Juan Carlos Marino
Recomendaciones
• No esté solamente en línea. • Datos recuperados = caché. • Mostrar el último estado conocido. • Haga y apruebe el TEST DEL PING
PONG. • Interrupciones.
![Page 32: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/32.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 33: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/33.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 34: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/34.jpg)
@ 2011 - Juan Carlos Marino
![Page 35: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/35.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 3 NO PUEDE SOPORTAR
TODO
![Page 36: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/36.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 37: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/37.jpg)
@ 2011 - Juan Carlos Marino
![Page 38: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/38.jpg)
@ 2011 - Juan Carlos Marino
Tener en cuenta capacidad de las pantallas actuales
![Page 39: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/39.jpg)
@ 2011 - Juan Carlos Marino
Colores
![Page 40: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/40.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 41: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/41.jpg)
@ 2011 - Juan Carlos Marino
![Page 42: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/42.jpg)
@ 2011 - Juan Carlos Marino
![Page 43: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/43.jpg)
@ 2011 - Juan Carlos Marino
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
![Page 44: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/44.jpg)
@ 2011 - Juan Carlos Marino
![Page 45: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/45.jpg)
@ 2011 - Juan Carlos Marino
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).
![Page 46: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/46.jpg)
@ 2011 - Juan Carlos Marino
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+
![Page 47: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/47.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 48: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/48.jpg)
@ 2011 - Juan Carlos Marino
![Page 49: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/49.jpg)
@ 2011 - Juan Carlos Marino
![Page 50: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/50.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 4 SIMPLE SIMPLE
MAS SIMPLE
![Page 51: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/51.jpg)
@ 2011 - Juan Carlos Marino
• Dar información relevante. • Usar abreviaturas. • Escritura concisa. • Acciones más importantes asociadas a
softkeys. • Vigilar espacios en blanco. • Evitar contenido multimedia.
Recomendaciones
![Page 52: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/52.jpg)
@ 2011 - Juan Carlos Marino
Recomendaciones
• Estructura. – Ancha. – Baja.
• Iniciar con diseños probados. – Experimente. – Comparta información.
![Page 53: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/53.jpg)
@ 2011 - Juan Carlos Marino
![Page 54: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/54.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 5 NO OLVIDAR GUIAR A LOS USUARIOS
![Page 55: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/55.jpg)
@ 2011 - Juan Carlos Marino
Consideraciones
• El ambiente es distractivo. – Atención se comparte con otras
actividades.
![Page 56: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/56.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 57: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/57.jpg)
@ 2011 - Juan Carlos Marino
![Page 58: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/58.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 6 NO COMPRIMA EL MUNDO
![Page 59: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/59.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 60: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/60.jpg)
@ 2011 - Juan Carlos Marino
![Page 61: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/61.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 7 NO HAGA
ESCRIBIR A USUARIOS
![Page 62: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/62.jpg)
@ 2011 - Juan Carlos Marino
Consideraciones
• Teclado muy pequeño. – Optimizado para datos numéricos.
• Se necesitan dedos muy delgados. • No hay retroalimentación sensorial.
![Page 63: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/63.jpg)
@ 2011 - Juan Carlos Marino
Recomendaciones
• Llene de antemano todo lo que pueda. • Selección de opciones. • Evitar escritura predictiva.
– Excepto si hay clara ventaja.
![Page 64: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/64.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 65: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/65.jpg)
@ 2011 - Juan Carlos Marino
![Page 66: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/66.jpg)
@ 2011 - Juan Carlos Marino
![Page 67: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/67.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 8 PROTOTIPOS
![Page 68: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/68.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 69: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/69.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 9 USAR
CARACTERISTICAS DEL DISPOSITIVO
![Page 70: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/70.jpg)
@ 2011 - Juan Carlos Marino
Localización
![Page 71: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/71.jpg)
@ 2011 - Juan Carlos Marino
Cámara
![Page 72: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/72.jpg)
@ 2011 - Juan Carlos Marino
Acelerómetro
![Page 73: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/73.jpg)
@ 2011 - Juan Carlos Marino
Almacenamiento local
![Page 74: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/74.jpg)
@ 2011 - Juan Carlos Marino
Offline
![Page 75: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/75.jpg)
@ 2011 - Juan Carlos Marino
Tamaño de toque
![Page 76: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/76.jpg)
@ 2011 - Juan Carlos Marino
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.
![Page 77: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/77.jpg)
@ 2011 - Juan Carlos Marino
Diagramas de gestos
![Page 78: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/78.jpg)
@ 2011 - Juan Carlos Marino
REGLA # 10 NO USAR CASCADA
![Page 79: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/79.jpg)
@ 2011 - Juan Carlos Marino
Usar Ágil
• Cascada es de alto riesgo.
• Hacer prototipo en papel.
• Construir prototipos rapidamente.
• Probar teorías rapidamente.
![Page 80: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/80.jpg)
@ 2011 - Juan Carlos Marino
Á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.
![Page 81: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/81.jpg)
@ 2011 - Juan Carlos Marino
EJEMPLO DE DISEÑO
![Page 82: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/82.jpg)
@ 2011 - Juan Carlos Marino
![Page 83: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/83.jpg)
@ 2011 - Juan Carlos Marino
VALIDACIÓN DEL DISEÑO
![Page 84: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/84.jpg)
@ 2011 - Juan Carlos Marino
• Cinco segundos. • Delimitación. • Navegación. • Concepto.
![Page 85: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/85.jpg)
@ 2011 - Juan Carlos Marino
Cinco segundos
• Que plataforma es? • Que tipo de aplicación es? • Que supone que hace la aplicación?
![Page 86: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/86.jpg)
@ 2011 - Juan Carlos Marino
Delimitación
![Page 87: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/87.jpg)
@ 2011 - Juan Carlos Marino
Navegación
![Page 88: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/88.jpg)
@ 2011 - Juan Carlos Marino
Concepto
![Page 89: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/89.jpg)
@ 2011 - Juan Carlos Marino
EJEMPLO
![Page 90: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/90.jpg)
@ 2011 - Juan Carlos Marino
Wireframe
![Page 91: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/91.jpg)
@ 2011 - Juan Carlos Marino
Diseño inicial menu
![Page 92: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/92.jpg)
@ 2011 - Juan Carlos Marino
Diseño 240 px
![Page 93: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/93.jpg)
@ 2011 - Juan Carlos Marino
Diseño 120 px
![Page 94: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/94.jpg)
@ 2011 - Juan Carlos Marino
Prototipo Nokia N95
![Page 95: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/95.jpg)
@ 2011 - Juan Carlos Marino
Iteración 2
![Page 96: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/96.jpg)
@ 2011 - Juan Carlos Marino
Iteración 2
![Page 97: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/97.jpg)
@ 2011 - Juan Carlos Marino
Diseño botones
![Page 98: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/98.jpg)
@ 2011 - Juan Carlos Marino
Diseño 240 px
![Page 99: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/99.jpg)
@ 2011 - Juan Carlos Marino
Diseño player
![Page 100: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/100.jpg)
@ 2011 - Juan Carlos Marino
Prototipo
![Page 101: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/101.jpg)
@ 2011 - Juan Carlos Marino
ERRORES COMUNES
![Page 102: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/102.jpg)
@ 2011 - Juan Carlos Marino
• Dispositivo móvil = computador. • Contexto. • Demasiada información. • Demora en tiempo de ejecución. • Diseño genérico. • Falta de Pruebas.
![Page 103: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/103.jpg)
@ 2011 - Juan Carlos Marino
EJEMPLO
![Page 104: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/104.jpg)
@ 2011 - Juan Carlos Marino
![Page 105: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/105.jpg)
@ 2011 - Juan Carlos Marino
GRACIAS
Contacto: juan.marino @ mevolucion.com
![Page 106: Usabilidad para Móviles](https://reader033.vdocuments.net/reader033/viewer/2022060200/5598e8ef1a28abbe448b4731/html5/thumbnails/106.jpg)
@ 2011 - Juan Carlos Marino
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