Una serie de herramientas técnicas y conceptuales para que los diseñadores, desarrolladores, project managers y demás involucrados con proyectos para móviles puedan tomar decisiones más informadas y agilizar sus procesos de trabajo entendiendo las necesidades del usuario y las limitaciones que impone el medio.

1. Principios de usabilidad y
creación de contenido para
móviles
Iván Alarcón
@ivanalarcon #UXmovil
Día de la Usabilidad
2011 Buenos Aires
Organizado por el
Movimiento de Diseño Inclusivo

3. MOBILE PHONES WILL
OVERTAKE PCS AS THE
MOST COMMON WEB
ACCESS DEVICES
WORLDWIDE BY 2013
Gartner Analysts

4. MARCOS
MENTALES

5. 1) BÚSQUEDA

6. 2) EXPLORACIÓN, JUEGO

7. 3) ACTUALIZACIÓN, STATUS

8. 4) EDICIÓN, CREACIÓN

9. EL CONTEXTO IMPORTA

10. ERGONOMÍA MÓVIL
• Lugar de acceso
• Iluminación
• Tamaño y ubicación de
botones
• Hover
• Movimiento y rotación

12. PANTALLAS
320x240 px
128x160 px
176x220 px
320x320 px 240x320 px
320x480 px

13. 44 PIXELES
44 px
44 px
44 px

14. GESTOS
TAP DOUBLE TAP PRESS
PRESS
FLICK PINCH
AND TAP
DRAG SPREAD ROTATE

15. bit.ly/uzu-app

16. INTERFACES EN PRIMERA PERSONA

17. COMPLEJIDAD CON
SENCILLEZ
Siri

18. WTF?

19. MANAGE COMPLEXITY
THROUGH CONVERSATION
Josh Clark

20. RESPETAR LA
METÁFORA
bit.ly/manage-app

21. FACTOR EMOCIONAL
• Cercanía del tacto • Diálogo con el producto
• Dispositivos realmente • Diseñar momentos
personales interesantes

22. LIMITACIONES
• Pantallas
• Conexiones
• Desempeño
• Mouse y teclado
• Tiempos de uso
• Panorama cambiante

23. THE SIMPLE GUIDELINE IS WHATEVER
YOU ARE DOING—DO MOBILE FIRST
Eric Schmidt, CEO Google

24. MOBILE FIRST
• Contenido antes que
interface
• Enfoque
• Estándares y
arquitecturas escalables
• Optimización

25. DISEÑOS ADAPTABLES
• Retícula flexible
• Imágenes flexibles
• Media queries

26. bostonglobe.com

27. WEB APPS
• HTML, CSS y Javascript
• Menos inversión ($)
• No requieren que el
usuario descargue
actualizaciones
• Facilitan el testeo A/B

28. APPS NATIVAS
• Acceso a hardware
• Mayor rapidez
• Integración gráfica
• Procesos en segundo plano
• Presencia en app stores
• Dificultad de desarrollo

29. Java
LENGUAJE Obj-C, C, C++ Java C#, VB.NET, etc.
(algo de C, C++)
Visual Studio,
BB Java Eclipse
HERRAMIENTAS Xcode Android SDK Windows Phone
Plugin
Dev Tools
EJECUTABLE .app .apk .cod .xap
Blackberry App Windows Phone
APP STORE Apple iTunes Android Market
World Market

30. APPS HÍBRIDAS
• Tecnologías web
• Presencia en app stores
• Acceso a APIs
• Deploy multiplataforma

31. CASO PRÁCTICO
Diseño de una App para iPhone

32. PROTOTIPADO EN PAPEL
• Conceptos iniciales
(navegación, etc.)
• Baja resolución
• Primeras pruebas con
usuarios
• Base:
bit.ly/iphone-sketches

33. WIREFRAMES
• Omnigraffle: bit.ly/omnigraffle-5 Some title
IMG Team 1
• Stenciles: bit.ly/iphone-stencils IMG Team 2
IMG Team 3
• Gestos: bit.ly/lukew-gestures IMG Team 4
• iOS Human Interface Guidelines:
bit.ly/ios-hig Teams Positions Bookmarks
• Tapworthy:
amzn.to/tapworthy-book

34. DISEÑO
• Resolución
• Materiales y texturas
• Objetos realistas y “3D”
• Márgenes
• Tipografía
• Personalidad

35. bit.ly/ios-5-gui

36. INSPIRACIÓN
• mobile-patterns.com
• lovelyui.com
• dribbble.com
• App Store:
bit.ly/iphone-appstore

37. ASSETS
• Recursos en línea
• Sprites
• Aprovechar CSS3
• Sets de imágenes
separados
glyphish.com

38. HAGAMOS ALGO,
HAGÁMOSLO AHORA
ivánalarcón

39. No deje de completar su evaluación online
disenoinclusivo.org.ar/encuesta
¡Muchas gracias!
Principios de usabilidad y creación de contenido
para móviles
Iván Alarcón
www.ivanalarcon.com
Día de la Usabilidad
2011 Buenos Aires
Organizado por el
Movimiento de Diseño Inclusivo