Ux en dispositivos móviles (Universidad Tecnológica Nacional)
-
Upload
jordi-almirall -
Category
Design
-
view
343 -
download
7
description
Transcript of Ux en dispositivos móviles (Universidad Tecnológica Nacional)
![Page 1: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/1.jpg)
Ux en dispositivos móviles - Jordi Almirall
Ux en dispositivos móviles
Jordi Almirall
![Page 2: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/2.jpg)
Ux en dispositivos móviles - Jordi Almirall
Experiencia de usuario (Ux): “La Experiencia de Usuario abarca todos los
aspectos de la interacción final del usuario con una compañía, sus servicios y sus
productos”.Jakob Nielsen
![Page 3: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/3.jpg)
Ux en dispositivos móviles - Jordi Almirall
Índice
1. Soluciones móviles: Apps, webapps, webs multidispositivo y apps híbridas
2. Los usuarios y el contexto de uso3. Diseño centrado en el usuario para
dispositivos móviles1. Investigar sobre los usuarios y su contexto2. Conceptualizar el producto3. Evaluar los diseños
![Page 4: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/4.jpg)
Ux en dispositivos móviles - Jordi Almirall
1. Soluciones móviles: Apps, webapps, webs multidispositivo y apps híbridas
2. Los usuarios y el contexto de uso3. Diseño centrado en el usuario para
dispositivos móviles1. Investigar sobre los usuarios y su contexto2. Conceptualizar el producto3. Evaluar los diseños
Índice
![Page 5: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/5.jpg)
Ux en dispositivos móviles - Jordi Almirall
Soluciones
Aplicación móvil (App)
Web específica para móvil (WebApp)
Web multidispositivo
Diseño fluido
Diseño responsive
Aplicación híbrida
Soluciones móviles
![Page 6: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/6.jpg)
Ux en dispositivos móviles - Jordi Almirall
Aplicación móvil (App)
Augmented Outdoors - Peaks
![Page 7: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/7.jpg)
Ux en dispositivos móviles - Jordi Almirall
Web específica para móvil (WebApp)
Atrapalo.com
![Page 8: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/8.jpg)
Ux en dispositivos móviles - Jordi Almirall
Web multidispositivo – Diseño fluido
colly.com
![Page 9: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/9.jpg)
Ux en dispositivos móviles - Jordi Almirall
Web multidispositivo – Diseño responsive
forefathersgroup.com
![Page 10: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/10.jpg)
Ux en dispositivos móviles - Jordi Almirall
Aplicación híbrida
Healthapp
![Page 11: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/11.jpg)
Ux en dispositivos móviles - Jordi Almirall
1. Soluciones móviles: Apps, webapps, webs multidispositivo y apps híbridas
2. Los usuarios y el contexto de uso3. Diseño centrado en el usuario para
dispositivos móviles1. Investigar sobre los usuarios y su contexto2. Conceptualizar el producto3. Evaluar los diseños
Índice
![Page 12: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/12.jpg)
Ux en dispositivos móviles - Jordi Almirall
Savio, N., & Braiterman, J. (Junio / 2007). Design Sketch: The
Context of Mobile Interaction.
Los usuarios y el contexto de uso
![Page 13: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/13.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Nos distraemos• Somos imprecisos• No vemos bien• No tenemos paciencia
¿Cómo somos los usuarios móviles?
![Page 14: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/14.jpg)
Ux en dispositivos móviles - Jordi Almirall
Usuarios de smartphones y de tabletas
![Page 15: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/15.jpg)
Ux en dispositivos móviles - Jordi Almirall
1. Soluciones móviles: Apps, webapps, webs multidispositivo y apps híbridas
2. Los usuarios y el contexto de uso3. Diseño centrado en el usuario para
dispositivos móviles1. Investigar sobre los usuarios y su contexto2. Conceptualizar el producto3. Evaluar los diseños
Índice
![Page 16: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/16.jpg)
Ux en dispositivos móviles - Jordi Almirall
1. Conocer a los usuarios y su contexto2. Conceptualizar/Diseñar un producto según el
conocimiento de estos usuarios3. Evaluar el diseño +. Iterar entre estas fases hasta –idealmente-
lograr el mejor producto posible.
Diseño centrado en el usuario (DCU)
![Page 17: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/17.jpg)
Ux en dispositivos móviles - Jordi Almirall
1. Soluciones móviles: Apps, webapps, webs multidispositivo y apps híbridas
2. Los usuarios y el contexto de uso3. Diseño centrado en el usuario para
dispositivos móviles1. Investigar sobre los usuarios y su contexto2. Conceptualizar el producto3. Evaluar los diseños
Índice
![Page 18: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/18.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Técnicas cualitativas: – Entrevista– Focus group– Observación contextual– Recorrido cognitivo– Test con usuarios– Shadowing– Diario– …
Investigar sobre los usuarios y su contexto
![Page 19: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/19.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Técnicas cuantitativas: – Cuestionario– A/B testing– Logging– Eyetracking– …
Investigar sobre los usuarios y su contexto
![Page 20: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/20.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Técnicas cualitativas y cuantitativas: – Análisis de la competencia– Card sorting– Evaluación heurística– …
Investigar sobre los usuarios y su contexto
![Page 21: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/21.jpg)
Ux en dispositivos móviles - Jordi Almirall
1. Soluciones móviles: Apps, webapps, webs multidispositivo y apps híbridas
2. Los usuarios y el contexto de uso3. Diseño centrado en el usuario para
dispositivos móviles1. Investigar sobre los usuarios y su contexto2. Conceptualizar el producto3. Evaluar los diseños
Índice
![Page 22: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/22.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Técnicas de modelado de usuarios: – Personas– Escenarios– Flowcharts– User journey maps– …
Conceptualizar el producto
![Page 23: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/23.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Técnicas de conceptualización del producto:– Sketches– Prototipos en papel– Prototipos estáticos– Prototipos interactivos
Conceptualizar el producto
![Page 24: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/24.jpg)
Ux en dispositivos móviles - Jordi Almirall
1. Soluciones móviles: Apps, webapps, webs multidispositivo y apps híbridas
2. Los usuarios y el contexto de uso3. Diseño centrado en el usuario para
dispositivos móviles1. Investigar sobre los usuarios y su contexto2. Conceptualizar el producto3. Evaluar los diseños
Índice
![Page 25: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/25.jpg)
Ux en dispositivos móviles - Jordi Almirall
Evaluación
Con usuarios
Sin usuarios
Evaluar los diseños
![Page 26: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/26.jpg)
• La importancia (o no) del contexto• Grabación de los test• El Mago de Oz
Ux en dispositivos móviles - Jordi Almirall
Con usuarios: Test con usuarios
![Page 27: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/27.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Principios heurísticos clásicos• Guía heurísitca para la experiencia de usuario
móvil
Sin usuarios: Evaluación heurística
![Page 28: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/28.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Las ocho reglas de oro de Ben Shneiderman• Los diez principios heurísticos de Nielsen• Los principios heurísticos de Larry
Constantine• Principios heurísticos de Keith Instone• Principios de Deborah Mayhew• Los principios heurísticos de Bruce Tognazzini
Principios heurísitcos clásicos
![Page 29: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/29.jpg)
Guía heurísitca para la experiencia de usuario móvil
Ux en dispositivos móviles - Jordi Almirall
1. Causar una buena
impresión
2. Simplificar la navegación
3. Facilitar la lectura
4. Tamaño y separación
para dedos imprecisos
5. Personalizar
6. Agilizar la entrada de
datos
7. Asegurar la visibilidad
8. Usar estándares
9. Seguir las guías de
diseño
10. Aprovechar las
funcionalidades del
dispositivo
![Page 30: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/30.jpg)
1. Causar una buena impresión
2. Simplificar lanavegación
Guía heurísitca para la experiencia de usuario móvil
Ux en dispositivos móviles - Jordi Almirall
![Page 31: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/31.jpg)
3. Facilitar la lectura
4. Tamaño y separación para dedos imprecisos
Guía heurísitca para la experiencia de usuario móvil
Ux en dispositivos móviles - Jordi Almirall
![Page 32: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/32.jpg)
5. Personalizar
6. Agilizar la entrada de datos
Guía heurísitca para la experiencia de usuario móvil
Ux en dispositivos móviles - Jordi Almirall
![Page 33: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/33.jpg)
7. Asegurar la visibilidad
8. Usar estándares
Guía heurísitca para la experiencia de usuario móvil
Ux en dispositivos móviles - Jordi Almirall
![Page 34: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/34.jpg)
9. Seguir las guías de diseño
10. Aprovechar las funcionalidades del dispositivo
Guía heurísitca para la experiencia de usuario móvil
Ux en dispositivos móviles - Jordi Almirall
![Page 35: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/35.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Ballard, B. (2007). Designing the mobile user experience. West Sussex:
Wiley.
• Clark, J. (2010). Tapworthy. Sebastapol: O'Reilly.
• Ginsburg, S. (2010). Designing the iPhone User Experience. Kendallville:
Addison-Wesley.
• Hinman, R. (2012). The Mobile Frontier. Nueva York: Rosenfeld Media.
• Jones, M., & Marsden, G. (2006). Mobile Interaction Design. West Sussex:
Wiley.
• Nielsen, J., & Budiu, R. (2012). Mobile Usability. Berkeley: New Riders.
• Wroblewski, L. (2011). Mobile First. Nueva York: A Book Apart.
Recursos - Libros de referencia
![Page 36: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/36.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Canal de vídeos Google Developers.
http://www.youtube.com/user/GoogleDevelopers?feature=watch
• El blog de Rachel Hinman.
http://www.rachelhinman.com/blog/
• LukeW. Ideation+Design.
http://www.lukew.com/
• Smashing Magazine.
http://mobile.smashingmagazine.com/
• Touchy Talk.
http://www.touchytalk.com/
Recursos – Blogs de actualidad
![Page 37: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/37.jpg)
Ux en dispositivos móviles - Jordi Almirall
• Android:
http://developer.android.com/intl/es/design/index.html
• iOS:
https://developer.apple.com/library/ios/DOCUMENTATION/
UserExperience/Conceptual/MobileHIG/index.html
• Windows Phone:
http://dev.windowsphone.com/en-us/design
Recursos – Guías de diseño
![Page 38: Ux en dispositivos móviles (Universidad Tecnológica Nacional)](https://reader031.fdocument.pub/reader031/viewer/2022020800/5589dabbd8b42a311d8b46a6/html5/thumbnails/38.jpg)
Ux en dispositivos móviles - Jordi Almirall
¡Muchas gracias!
@jordialmirall
es.linkedin.com/in/jordialmirall/