2011  Buenos  Aires

Día  de  la  UsabilidadDía  de  la  Usabilidad

Organizado  por  el

Movimiento  de  Diseño  Inclusivo

Principios de usabilidad y creación de contenido para móvilesIván Alarcón@ivanalarcon #UXmovil

Gartner Analysts

MOBILE PHONES WILL OVERTAKE PCS AS THE MOST COMMON WEB

ACCESS DEVICES WORLDWIDE BY 2013

MARCOSMENTALES

1) BÚSQUEDA

2) EXPLORACIÓN, JUEGO

3) ACTUALIZACIÓN, STATUS

4) EDICIÓN, CREACIÓN

EL CONTEXTO IMPORTA

ERGONOMÍA MÓVIL

• Lugar de acceso

• Iluminación

• Tamaño y ubicación de botones

• Hover

• Movimiento y rotación

PANTALLAS

128x160 px

176x220 px

240x320 px320x320 px

320

x24

0 p

x

320x480 px

44 PIXELES

44 px44 px

44 px

GESTOS

PRESSDOUBLE TAP

DRAG

FLICK

TAP

SPREAD

PRESSAND TAP

ROTATE

PINCH

bit.ly/uzu-app

INTERFACES EN PRIMERA PERSONA

COMPLEJIDAD CON SENCILLEZ

Siri

WTF?

MANAGE COMPLEXITYTHROUGH CONVERSATION

Josh Clark

RESPETAR LA METÁFORA

bit.ly/manage-app

FACTOR EMOCIONAL

• Cercanía del tacto

• Dispositivos realmente personales

• Diálogo con el producto

• Diseñar momentos interesantes

LIMITACIONES

• Pantallas

• Conexiones

• Desempeño

• Mouse y teclado

• Tiempos de uso

• Panorama cambiante

THE SIMPLE GUIDELINE IS WHATEVER YOU ARE DOING—DO MOBILE FIRST

Eric Schmidt, CEO Google

MOBILE FIRST

• Contenido antes que interface

• Enfoque

• Estándares y arquitecturas escalables

• Optimización

DISEÑOS ADAPTABLES

• Retícula flexible

• Imágenes flexibles

• Media queries

bostonglobe.com

WEB APPS

• HTML, CSS y Javascript

• Menos inversión ($)

• No requieren que el usuario descargue actualizaciones

• Facilitan el testeo A/B

APPS NATIVAS

• Acceso a hardware

• Mayor rapidez

• Integración gráfica

• Procesos en segundo plano

• Presencia en app stores

• Dificultad de desarrollo

LENGUAJE Obj-C, C, C++ Java(algo de C, C++) Java C#, VB.NET, etc.

HERRAMIENTAS Xcode Android SDK BB Java Eclipse Plugin

Visual Studio, Windows Phone

Dev Tools

EJECUTABLE .app .apk .cod .xap

APP STORE Apple iTunes Android Market Blackberry App World

Windows Phone Market

APPS HÍBRIDAS

• Tecnologías web

• Presencia en app stores

• Acceso a APIs

• Deploy multiplataforma

CASO PRÁCTICODiseño de una App para iPhone

PROTOTIPADO EN PAPEL

• Conceptos iniciales (navegación, etc.)

• Baja resolución

• Primeras pruebas con usuarios

• Base:bit.ly/iphone-sketches

WIREFRAMES

• Omnigraffle: bit.ly/omnigraffle-5

• Stenciles: bit.ly/iphone-stencils

• Gestos: bit.ly/lukew-gestures

• iOS Human Interface Guidelines: bit.ly/ios-hig

• Tapworthy: amzn.to/tapworthy-book

Some title

Team 1IMG

Team 2IMG

Team 3IMG

Team 4IMG

BookmarksTeams Positions

DISEÑO

• Resolución

• Materiales y texturas

• Objetos realistas y “3D”

• Márgenes

• Tipografía

• Personalidad

bit.ly/ios-5-gui

INSPIRACIÓN

• mobile-patterns.com

• lovelyui.com

• dribbble.com

• App Store:bit.ly/iphone-appstore

ASSETS

• Recursos en línea

• Sprites

• Aprovechar CSS3

• Sets de imágenes separados

glyphish.com

HAGAMOS ALGO, HAGÁMOSLO AHORA

ivánalarcónivánalarcón

2011  Buenos  Aires

Día  de  la  UsabilidadDía  de  la  Usabilidad

Organizado  por  el

Movimiento  de  Diseño  Inclusivo

No deje de completar su evaluación online

disenoinclusivo.org.ar/encuesta

¡Muchas gracias!

Principios de usabilidad y creación de contenido para móvilesIván Alarcón

www.ivanalarcon.com