Usabilidad para Móviles

Twitter: @andreskarp

_dChris

ANDRÉSKARP

Blog: andreskarp.es

USABILIDAD PARA MÓVILES Andrés Karp

Actualidad del uso del móvil

Workflow de Desarrollo

Diseño Móvil

Plataformas Móviles

Test de aplicaciones móviles


Actualidad del uso del Móvil


12%

46%

42%

MÓVIL BÁSICO

MÓVIL AVANZADO

MÓVIL DE ÚLTIMA GENERACIÓN

the cocktail analysis



ACCESO A REDES SOCIALES DESDE EL MÓVIL




FACEBOOK


76%Acceso Web

12%Acceso Móvil



TUENTI


39%Acceso Web

8%Acceso Móvil



YOUTUBE


50%Acceso Web

9%Acceso Móvil



TWITTER


11%Acceso Web

4%Acceso Móvil



Plataformas Móviles


comScore MobiLens

4.0%Android

6.2%Blackberry

8.6%iPhone

11.9%Windows


comScore MobiLens

69.3%Symbian


Tipos de hardware

teclado numérico y joystick

teclado semi-numérico + ball

Cursor

Táctil (multi-touch)

Teclado completo y Táctil


Workflow de Desarrollo


Equipamiento Móvil

Siempre hay que empezar por lo primeroIDEA


Equipamiento Móvil

Siempre hay que empezar por lo primero

Saber que necesitan los usuariosIDEA

NECESIDADES


Equipamiento Móvil


Saber que necesitan los usuarios

El modo en que la información es consumida

IDEANECESIDADESCONTEXTO

Todos los derechos reservados por Cocoarmani

http://www.flickr.com/photos/cocoarmani/

http://www.flickr.com/photos/cocoarmani/


Equipamiento Móvil




Como añadimos valor a nuestro negocio

IDEANECESIDADESCONTEXTOESTRATEGIA

http://www.flickr.com/photos/76074333@N00

http://www.flickr.com/photos/thelastminute

http://www.flickr.com/photos/thelastminute


Equipamiento Móvil





Buscar la plataforma adecuada


PLATAFORMA


Equipamiento Móvil






Crear experiencia de usuario


PLATAFORMADISEÑO


Equipamiento Móvil







Hay que probar el contexto


PLATAFORMADISEÑO

PROTOTIPO

Todos los derechos reservados por martynreding

http://www.flickr.com/photos/martynreding/

http://www.flickr.com/photos/martynreding/


Equipamiento Móvil







Hay que probar el contextoArmar el Puzzle


PLATAFORMADISEÑO

PROTOTIPODESARROLLAR

Algunos derechos reservados por camflan

http://creativecommons.org/licenses/by-nc-nd/2.0/

http://creativecommons.org/licenses/by-nc-nd/2.0/

http://www.flickr.com/photos/camflan/

http://www.flickr.com/photos/camflan/


Equipamiento Móvil









PLATAFORMADISEÑO


Probar las cosas las veces que haga faltaTESTEAR

Algunos derechos reservados por Kai Hendry

http://creativecommons.org/licenses/by/2.0/

http://creativecommons.org/licenses/by/2.0/

http://www.flickr.com/photos/hendry/

http://www.flickr.com/photos/hendry/


Equipamiento Móvil









PLATAFORMADISEÑO


Probar las cosas las veces que haga faltaTESTEAROPTIMIZACIÓN Simplificar imagenes y cargas

http://jonasraskdesign.com




Diseño Móvil


El diseño móvil es:

“la creación de experiencias de usuario para el contexto móvil”


• Contexto

• Mensaje

• Look & Feel

• Colores

• Layout

• Fuentes

• Gráficos


Mensaje


Lo que usted está tratando de decir sobre su sitio o aplicación visualmente


Look & Feel


El Look & Feel se utiliza para describir la apariencia


Color


El obstáculo más común se encuentra cuando se trata de pantallasde color.


Layout


Cómo el usuario visualmente nuestra página


Fuentes


Qué tipos se representa en las pantallas de móviles


Gráficos


El uso de imágenes que se utilizan para crear o ayudar a una experiencia visual.


Diagramas de Gestos


Touch Target Sizes


Touch Target Sizes

· 7 x 7 mm con 1 mm de tap para el uso del dedo índice· 8 x 8 mm con 2 mm de tap para el pulgar de uso· El tipo de lista de los componentes debe tener un mínimo de 5 mm de espacio entre líneas·El ancho de un dedo límites de la densidad de elementos en la pantalla. Si los elementos están demasiado cerca, el usuario no podrá elegir uno solo.


Touch Gesture Diagrams


Touch Interface Growth


Testear aplicaciones web


• Las técnicas de investigación estándar

• La importancia del contexto

• Pruebas de software

• Equipos de captura de vídeo

• Pruebas en beta


• Dispositivo vs Emulador

• Laboratorio vs Pruebas Reales

• Interior vs Aire Libre


Dispositivo vs Emulador

• Usar simuladores código real

• Evitar emuladores

• No coinciden con una verdadera interacción

• Interacción, estética, la función es necesarioprobado en el dispositivo


Laboratorio vs Pruebas Reales

• Las pruebas de Laboratorio no pueden capturar todo el contexto

• Las tareas de fondo no se ven

• Ejemplos de contexto: centro comercial

• Las pantallas glossy


Interior vs Aire Libre

• La comodidad del usuario cambia

• Cómo interactua con los dispositivos

• Ejemplos de contexto: conduciendo

• Moviemiento


Equipos de Captura


• Captura de pantalla, el rostro, el lenguaje corporal

• La utilización de dispositivo real

• La mejor forma de realizar una experiencia realista

• Facilidad de uso

• Precio


DYV = “Hagalo Usted Mismo”


LAMP CAM· DIY modificaciones· Frágil· Hay que capturar la cara aparte


ELMO CAM· DIY modificaciones· Fija en la superficie


SLID CAM· Bricolaje· Permite capturar el lenguaje corporal


Hagalo Usted Mismo...


Beta Testing


Eventos de Activación

Encuestas

Utilización

Investigación


Eventos de activación

• Coinciden con las tareas del usuario tanto como sea posible

• Adquirir a través de los registros del servidor

• Enviar reconocimiento cuando

• por primera vez se intenta la tarea

• por enésima vez se intentan tarea

• cada n semanas

• Enviar alertas mediante SMS


Encuestas

Limitada a 1-2 minutos

• Captar lo que la tarea se está intentando

• Facilidad de uso, el disfrute, etc

• Expirará encuesta en aproximadamente 20 minutos


Utilización

• Frecuencias de trabajo

• Facilidad de uso, afectará en función

• Frecuencia de uso

• El tiempo entre los usos

• Número de usos


Investigación

Las técnicas de investigación estándar

• Centradas en el contexto

• Ver que dispositivo ponen a la venta las compañías

• Opciones de captura de vídeo

• Pruebas en beta


¡¡¡Muchas Gracias!!!

[email protected] y consultas:

mailto:[email protected]

mailto:[email protected]

Usabilidad para Móviles

Design

Transcript of Usabilidad para Móviles