Principios de usabilidad ycreación de contenido paramóvilesIván Alarcón@ivanalarcon #UXmovil      Día  de  la  Usabilidad ...
MOBILE PHONES WILLOVERTAKE PCS AS THE MOST COMMON WEB  ACCESS DEVICES WORLDWIDE BY 2013    Gartner Analysts
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             320x240 px                              128x160 px                          176x220 px320x320 px    ...
44 PIXELES        44 px        44 px        44 px
GESTOSTAP     DOUBLE TAP   PRESS                     PRESSFLICK   PINCH                     AND TAPDRAG    SPREAD       RO...
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       •   Diálogo con el producto•   Dispositivos realmente   •   Diseñar momentos ...
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• ...
APPS NATIVAS•   Acceso a hardware•   Mayor rapidez•   Integración gráfica•   Procesos en segundo plano•   Presencia en app ...
Java LENGUAJE      Obj-C, C, C++                           Java         C#, VB.NET, etc.                               (al...
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• ...
WIREFRAMES•   Omnigraffle: bit.ly/omnigraffle-5                      Some title                                        IMG   T...
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                             gly...
HAGAMOS ALGO,HAGÁMOSLO AHORA            ivánalarcón
No deje de completar su evaluación onlinedisenoinclusivo.org.ar/encuesta              ¡Muchas gracias!Principios de usabil...
Principios de usabilidad y creación de contenido para móviles
Principios de usabilidad y creación de contenido para móviles
Upcoming SlideShare
Loading in …5
×

Principios de usabilidad y creación de contenido para móviles

4,451 views

Published on

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.

Published in: Design
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
4,451
On SlideShare
0
From Embeds
0
Number of Embeds
730
Actions
Shares
0
Downloads
93
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Principios de usabilidad y creación de contenido para móviles

  1. 1. Principios de usabilidad ycreación de contenido paramóvilesIván Alarcón@ivanalarcon #UXmovil Día  de  la  Usabilidad 2011  Buenos  Aires Organizado  por  el Movimiento  de  Diseño  Inclusivo
  2. 2. MOBILE PHONES WILLOVERTAKE PCS AS THE MOST COMMON WEB ACCESS DEVICES WORLDWIDE BY 2013 Gartner Analysts
  3. 3. MARCOSMENTALES
  4. 4. 1) BÚSQUEDA
  5. 5. 2) EXPLORACIÓN, JUEGO
  6. 6. 3) ACTUALIZACIÓN, STATUS
  7. 7. 4) EDICIÓN, CREACIÓN
  8. 8. EL CONTEXTO IMPORTA
  9. 9. ERGONOMÍA MÓVIL• Lugar de acceso• Iluminación• Tamaño y ubicación de botones• Hover• Movimiento y rotación
  10. 10. PANTALLAS 320x240 px 128x160 px 176x220 px320x320 px 240x320 px 320x480 px
  11. 11. 44 PIXELES 44 px 44 px 44 px
  12. 12. GESTOSTAP DOUBLE TAP PRESS PRESSFLICK PINCH AND TAPDRAG SPREAD ROTATE
  13. 13. bit.ly/uzu-app
  14. 14. INTERFACES EN PRIMERA PERSONA
  15. 15. COMPLEJIDAD CON SENCILLEZ Siri
  16. 16. WTF?
  17. 17. MANAGE COMPLEXITYTHROUGH CONVERSATION Josh Clark
  18. 18. RESPETAR LA METÁFORA bit.ly/manage-app
  19. 19. FACTOR EMOCIONAL• Cercanía del tacto • Diálogo con el producto• Dispositivos realmente • Diseñar momentos personales interesantes
  20. 20. LIMITACIONES• Pantallas• Conexiones• Desempeño• Mouse y teclado• Tiempos de uso• Panorama cambiante
  21. 21. THE SIMPLE GUIDELINE IS WHATEVER YOU ARE DOING—DO MOBILE FIRST Eric Schmidt, CEO Google
  22. 22. MOBILE FIRST• Contenido antes que interface• Enfoque• Estándares y arquitecturas escalables• Optimización
  23. 23. DISEÑOS ADAPTABLES• Retícula flexible• Imágenes flexibles• Media queries
  24. 24. bostonglobe.com
  25. 25. WEB APPS• HTML, CSS y Javascript• Menos inversión ($)• No requieren que el usuario descargue actualizaciones• Facilitan el testeo A/B
  26. 26. APPS NATIVAS• Acceso a hardware• Mayor rapidez• Integración gráfica• Procesos en segundo plano• Presencia en app stores• Dificultad de desarrollo
  27. 27. Java LENGUAJE Obj-C, C, C++ Java C#, VB.NET, etc. (algo de C, C++) Visual Studio, BB Java EclipseHERRAMIENTAS 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
  28. 28. APPS HÍBRIDAS• Tecnologías web• Presencia en app stores• Acceso a APIs• Deploy multiplataforma
  29. 29. CASO PRÁCTICODiseño de una App para iPhone
  30. 30. PROTOTIPADO EN PAPEL• Conceptos iniciales (navegación, etc.)• Baja resolución• Primeras pruebas con usuarios• Base: bit.ly/iphone-sketches
  31. 31. 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
  32. 32. DISEÑO• Resolución• Materiales y texturas• Objetos realistas y “3D”• Márgenes• Tipografía• Personalidad
  33. 33. bit.ly/ios-5-gui
  34. 34. INSPIRACIÓN• mobile-patterns.com• lovelyui.com• dribbble.com• App Store: bit.ly/iphone-appstore
  35. 35. ASSETS• Recursos en línea• Sprites• Aprovechar CSS3• Sets de imágenes separados glyphish.com
  36. 36. HAGAMOS ALGO,HAGÁMOSLO AHORA ivánalarcón
  37. 37. No deje de completar su evaluación onlinedisenoinclusivo.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

×