Principios de usabilidad y creación de contenido para móviles
-
Upload
ivanalarcon -
Category
Design
-
view
4.003 -
download
0
description
Transcript of Principios de usabilidad y creación de contenido para móviles
![Page 1: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/1.jpg)
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
![Page 2: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/2.jpg)
![Page 3: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/3.jpg)
Gartner Analysts
MOBILE PHONES WILL OVERTAKE PCS AS THE MOST COMMON WEB
ACCESS DEVICES WORLDWIDE BY 2013
![Page 4: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/4.jpg)
MARCOSMENTALES
![Page 5: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/5.jpg)
1) BÚSQUEDA
![Page 6: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/6.jpg)
2) EXPLORACIÓN, JUEGO
![Page 7: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/7.jpg)
3) ACTUALIZACIÓN, STATUS
![Page 8: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/8.jpg)
4) EDICIÓN, CREACIÓN
![Page 9: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/9.jpg)
EL CONTEXTO IMPORTA
![Page 10: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/10.jpg)
ERGONOMÍA MÓVIL
• Lugar de acceso
• Iluminación
• Tamaño y ubicación de botones
• Hover
• Movimiento y rotación
![Page 11: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/11.jpg)
![Page 12: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/12.jpg)
PANTALLAS
128x160 px
176x220 px
240x320 px320x320 px
320
x24
0 p
x
320x480 px
![Page 13: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/13.jpg)
44 PIXELES
44 px44 px
44 px
![Page 14: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/14.jpg)
GESTOS
PRESSDOUBLE TAP
DRAG
FLICK
TAP
SPREAD
PRESSAND TAP
ROTATE
PINCH
![Page 16: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/16.jpg)
INTERFACES EN PRIMERA PERSONA
![Page 17: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/17.jpg)
COMPLEJIDAD CON SENCILLEZ
Siri
![Page 18: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/18.jpg)
WTF?
![Page 19: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/19.jpg)
MANAGE COMPLEXITYTHROUGH CONVERSATION
Josh Clark
![Page 21: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/21.jpg)
FACTOR EMOCIONAL
• Cercanía del tacto
• Dispositivos realmente personales
• Diálogo con el producto
• Diseñar momentos interesantes
![Page 22: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/22.jpg)
LIMITACIONES
• Pantallas
• Conexiones
• Desempeño
• Mouse y teclado
• Tiempos de uso
• Panorama cambiante
![Page 23: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/23.jpg)
THE SIMPLE GUIDELINE IS WHATEVER YOU ARE DOING—DO MOBILE FIRST
Eric Schmidt, CEO Google
![Page 24: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/24.jpg)
MOBILE FIRST
• Contenido antes que interface
• Enfoque
• Estándares y arquitecturas escalables
• Optimización
![Page 25: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/25.jpg)
DISEÑOS ADAPTABLES
• Retícula flexible
• Imágenes flexibles
• Media queries
![Page 27: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/27.jpg)
WEB APPS
• HTML, CSS y Javascript
• Menos inversión ($)
• No requieren que el usuario descargue actualizaciones
• Facilitan el testeo A/B
![Page 28: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/28.jpg)
APPS NATIVAS
• Acceso a hardware
• Mayor rapidez
• Integración gráfica
• Procesos en segundo plano
• Presencia en app stores
• Dificultad de desarrollo
![Page 29: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/29.jpg)
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
![Page 30: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/30.jpg)
APPS HÍBRIDAS
• Tecnologías web
• Presencia en app stores
• Acceso a APIs
• Deploy multiplataforma
![Page 31: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/31.jpg)
CASO PRÁCTICODiseño de una App para iPhone
![Page 32: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/32.jpg)
PROTOTIPADO EN PAPEL
• Conceptos iniciales (navegación, etc.)
• Baja resolución
• Primeras pruebas con usuarios
• Base:bit.ly/iphone-sketches
![Page 33: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/33.jpg)
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
![Page 34: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/34.jpg)
DISEÑO
• Resolución
• Materiales y texturas
• Objetos realistas y “3D”
• Márgenes
• Tipografía
• Personalidad
![Page 36: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/36.jpg)
INSPIRACIÓN
• mobile-patterns.com
• lovelyui.com
• dribbble.com
• App Store:bit.ly/iphone-appstore
![Page 37: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/37.jpg)
ASSETS
• Recursos en línea
• Sprites
• Aprovechar CSS3
• Sets de imágenes separados
glyphish.com
![Page 38: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/38.jpg)
HAGAMOS ALGO, HAGÁMOSLO AHORA
ivánalarcónivánalarcón
![Page 39: Principios de usabilidad y creación de contenido para móviles](https://reader033.fdocuments.co/reader033/viewer/2022042601/5539fa674a79598f768b4a40/html5/thumbnails/39.jpg)
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