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.

•  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

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

•  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

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

•  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

Transcript of Usabilidad para Móviles

Adaptación de jd edwards para dispositivos móviles

usabilidad de un aplicativo web gamificado para la ...

MALWARE PARA DISPOSITIVOS MÓVILES (ANDROID)premios.eset-la.com/universitario/pdf/malaware_para_dispositivos... · 1 MALWARE PARA DISPOSITIVOS MÓVILES (ANDROID) Daniela Muena Bustos

Aplicaciones Móviles y Juegos para la Salud

Making Business Flow - AirON · Dispositivos Móviles • Desarrollo de aplicaciones para dispositivos móviles (Android, IOS, Ipad, Iphone) • Aplicaciones dinámicas con acceso

Desarrollo Para Dispositivos Móviles

Optimiza tu WordPress para móviles en media hora con AMP

Métodos de Evaluación de Usabilidad para Sistemas de ...bdigital.unal.edu.co/54171/1/m_usabilidad.pdf · usabilidad, y según Bevan (1995) se presentan dos enfoques de usabilidad

Análisis Forense de Dispositivos Móviles Androidmendillo.info/forensica/Análisis forense de dispositivos móviles... · y herramientas especializadas para acceder a los datos ...

Modelos de Negocio para Aplicaciones Móviles

Design Thinking para apps móviles

MODELO DE USABILIDAD WEB ALINEADO CON SQUARE …users.dsic.upv.es/~afernandez/files/publications/pdf/Fernandez-et... · MODELO DE USABILIDAD WEB ALINEADO CON SQUARE PARA PROCESOS

Mejores prácticas para testing de apps móviles

Utilización de Sistemas Móviles para Aplicaciones de Docencia

Usabilidad y diseño para formularios

Diseño y usabilidad de interfaces para entornos educativos ...

UNIVERSIDAD DE GUAYAQUILrepositorio.ug.edu.ec/bitstream/redug/19675/1/B-CISC-PTG... · 2019. 5. 30. · ANÁLISIS DE USABILIDAD Y PROTOTIPO DE MEJORA EN APLICACIONES MÓVILES DE MENSAJERÍA

Dispositivos móviles GPS GNSS para GIS

Tendencias Del Desarrollo De Software Para Dispositivos MóViles

Aportaciones para la Mejora de la Usabilidad en ...