Your SlideShare is downloading. ×
Usabilidad en móviles y tabletas - Diseño sensible
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Usabilidad en móviles y tabletas - Diseño sensible

10,587
views

Published on

Los dispositivos táctiles con un modelo de interacción y contextos de uso totalmente distintos, influyen en la propia organización de contenidos, sistema de navegación e incluso en su representación …

Los dispositivos táctiles con un modelo de interacción y contextos de uso totalmente distintos, influyen en la propia organización de contenidos, sistema de navegación e incluso en su representación visual, generando una nueva experiencia de uso en los sitios web.

En esta presentación podrá encontrar:

- El estallido del mobile.
- Ux mobile =/ Ux Pc.
- Experiencia de uso entre dispositivos táctiles.
- Diseño sensible como alternativa de solución.
- Ventajas y desventajas del diseño sensible.
- Primeras pruebas de uso del Ipad.
- Test de usabilidad para móviles, gestos estándares.
- Consideraciones en el diseño de interacción para móviles táctiles.
- Consideraciones en el diseño de interacción para tabletas.

Fuente: www.blog.pucp.edu.pe/ux

Published in: Education

0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,587
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Usabilidad enmóviles ytabletasDiseñosensible
  • 2. 1982 MOTOROLA DYNATAC 8000X
  • 3. Ahora
  • 4. El estallido del MobileLos teléfonos inteligentes están impulsando el uso de aplicaciones en red y contenido Web de forma exponencial
  • 5. Los usuarios potenciales móviles se triplicará a mil millonesen 2013.Fuente: www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.htmlLa adopción de internet móvil ha superado a la de internetde Pc desktops por ocho veces.Fuente: www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.htmlLas ventas mundiales de smartphones superarán a las dePc desktops a finales de 2011.Fuente: www.pcworld.com/article/171380Más de la mitad de los usuarios de Android y IPhoneconsumen más de 30 minutos por día utilizandoaplicaciones móviles.Fuente: www.venturebeat.com/2009/08/27/admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-users
  • 6. Etapas en su elaboraciónBrainstorming Arquitectura Wireframing Diseño Aplicación
  • 7. UX Mobile UX Tablet UX Desktop
  • 8. No sesgar el sectorNo es solo diseñar para Iphones, Ipads o para terminales táctiles
  • 9. Existen cientos dedispositivos móvilesdiferentes @subidubi Jimena Catalina
  • 10. 2010 2011Proyección 2012 Fuente: Ipass mobile-workforce-project.ipass.com/cpwp/wp-content/uploads/2011/11/ipass_mobileworkforcereport_q4_2011.pdf
  • 11. Experiencias de uso entre dispositivos táctilesTomando como ejemplo al Iphone y al Ipad
  • 12. Táctil, uso de algunos dedos de lasSmartphone mano Menor precisión, prima la selección que la inserción de texto Pantalla muy pequeña, menos líneas de texto La luz solar directa afecta la visibilidad No se realizan tareas largas y complejas Mas uso de aplicaciones con pocos elementos de navegación Uso de sonidos y vibraciones en la experiencia de uso Orientación vertical y horizontalAplicación Facebook Memoria limitada
  • 13. Tableta Se soluciona el problema de la pantalla pequeña Táctil, uso de todos los dedos de la mano Regular precisión La luz solar directa afecta la visibilidad Mas uso de aplicaciones Uso de sonidos y vibraciones en la experiencia de uso Orientación vertical y horizontalAplicación Facebook
  • 14. No táctil, mouse y teclado Se puede usar todos los dedos Soporta todas las funciones Pantalla grande Uso bajo sombra Se realizan tareas complejas Menos uso de aplicaciones con conexión a internetSitio web de Facebook
  • 15. Netflix www.netflix.com
  • 16. AMAZON www.amazon.com
  • 17. Diseño sensible (líquido) como alternativa de solución
  • 18. Sitios web con diseño de sensibleEl diseño sensible nos permite llenar los vacios dejados por los tamañosde pantalla de los diferentes dispositivos, esto hace que las interfaces delos sitios web se adapten adecuadamente mejorando la experiencia de uso vía The UX Booth Elaine Simpson
  • 19. Sitios web con diseño de sensibleTHE BOSTON GLOBE www.bostonglobe.com Móvil Tableta Escritorio
  • 20. Sitios web con diseño de sensibleMACDONALD HOTEL & RESORTS www.macdonaldhotels.co.uk Escritorio Tableta Móvil
  • 21. Sitios web con diseño de sensible
  • 22. Ventajas Son más económicos. Menor tiempo de mantenimiento, es solo un sitio web Se aprovecha óptimamente el tamaño de las diferentes pantallas de pcs de escritorios.Desventajas El ux mobile = ux tablets = ux desktop. Por lo tanto, el diseño sensible debe no solo llenar espacios si no transformarse, aumentando la dificultad de implementación ya que la navegación de los móviles y tabletas es distinta. No basta mostrar lo mismo pero con diferente aspecto
  • 23. Primeras pruebas de uso del Ipad Grupo Norman and Nilsen
  • 24. La primera impresión quedefine a las aplicacionespara iPad ha sidosorprendentes por partede los usuarios, sinembargo, destacaron lassiguientes apreciaciones. Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf
  • 25. A los usuarios les parece un iPhone gigante y muy pesado. Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf
  • 26. La barra inferior de iconos no funciona tan bien como en el iPhone,debido a que la pantalla del iPad es mucho más grande. Hay una mayordistancia (Ley de Fitts). Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf
  • 27. Los usuarios están satisfechos navegando por la web con un iPad. Ello nosucede así en un iPhone ya que la pantalla del navegador es más pequeña, y lanavegación es menos agradable. Se deduce que para el iPhone se prefieren lasaplicaciones frente a la navegación por web. Aplicativo de elPais.com Sitio web de elPais.com Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdfq
  • 28. Zonas táctiles pequeñas en los sitios web vistos en un iPad los textos sonsuficientemente grande para ser leídos pero demasiados pequeñopara hacer tap sobre él, del mismo modo sucede con algunos íconos,opciones de menú y algunos botones. Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf
  • 29. Baja recordaciónmovimientos y gestos hechoscon las manos son difíciles deaprender cuando no sonempleados consistentementea través de las diferentesaplicaciones. Entre aplicaciones Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf
  • 30. Los usuarios no le gustaescribir en la pantalla táctil yasí evitar el proceso deregistro. Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf
  • 31. Activación accidental, ocurren cuando los usuarios tocan iconos o botones por error o realizan movimientos y gestos hechos con las manos que inesperadamente inician algún componente.Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf
  • 32. Test de usabilidad para móviles
  • 33. Gestos estándares para móviles táctiles Xperience Consulting
  • 34. Consideraciones en el diseño deinteracción para móviles táctiles
  • 35. Evitar los elementos dedesplazamiento. La gran mayoría de dispositivos táctiles no interpretan estos eventos La navegación por controlesindirectos es menos natural y más compleja. Al mostrarles otro sistema de desplazamiento los usuarios se sentirán frustrados Xperience Consulting
  • 36. Es importante que las áreas de interacción sean grandes; facilitar la navegación especialmente para personas con alguna discapacidad motrizLos mensajes serán visibles justo donde pulsamos y será másdifícil de ver so queda oculto por nuestra mano Xperience Consulting
  • 37. Al usuario se le es cómodo muchas veces utilizar una mano para interactuar con eldispositivo y cuando esto sucede solo tiene al alcance ciertas zonas de la pantalla,llamadas zonas calientes de interacción Josh Clark en http://www.netmagazine.com
  • 38. Aplicativo móvil Web móvil
  • 39. Consideraciones en el diseñode interacción para Tabletas
  • 40. Las tabletas también poseenzona s calientes pero endiferente posición Josh Clark en http://www.netmagazine.com
  • 41. Ubicación de los controles para las aplicacionesAplicación para smartphone Aplicación para portátil
  • 42. Evitar controles de navegación en la partes superior central de la página, pues la mano taparía el contenido Josh Clark en http://www.netmagazine.com
  • 43. Es apropiado colocar los controles de navegación en el fondo de la pantalla.The Sydney Morning Herald, propone una oslución muy adecuada para navegar entre las noticias sin afectar la visión de cualquier zona del sitio Josh Clark en http://www.netmagazine.com
  • 44. El so de las dos manos en tabletas toma más relevancia, aquí presentamos las zonasde interacción de fácil acceso por los dedos y zonas de navegación Zona de fácil acceso Zona de navegación
  • 45. Los dispositivos táctiles con unmodelo de interacción ycontextos de uso totalmentedistintos, influyen en la propiaorganización de contenidos,sistema de navegación e inclusoen su representación visual,generando una nuevaexperiencia de uso en los sitiosweb.
  • 46. Esta presentación tiene una licencia Creative Commons de: Atribución No comercial Compartir igual Percy Negrete @percynegretepercy.negrete@pucp.edu.pe