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

12,909 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 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

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

  1. 1. Usabilidad enmóviles ytabletasDiseñosensible
  2. 2. 1982 MOTOROLA DYNATAC 8000X
  3. 3. Ahora
  4. 4. El estallido del MobileLos teléfonos inteligentes están impulsando el uso de aplicaciones en red y contenido Web de forma exponencial
  5. 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. 6. Etapas en su elaboraciónBrainstorming Arquitectura Wireframing Diseño Aplicación
  7. 7. UX Mobile UX Tablet UX Desktop
  8. 8. No sesgar el sectorNo es solo diseñar para Iphones, Ipads o para terminales táctiles
  9. 9. Existen cientos dedispositivos móvilesdiferentes @subidubi Jimena Catalina
  10. 10. 2010 2011Proyección 2012 Fuente: Ipass mobile-workforce-project.ipass.com/cpwp/wp-content/uploads/2011/11/ipass_mobileworkforcereport_q4_2011.pdf
  11. 11. Experiencias de uso entre dispositivos táctilesTomando como ejemplo al Iphone y al Ipad
  12. 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. 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. 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. 15. Netflix www.netflix.com
  16. 16. AMAZON www.amazon.com
  17. 17. Diseño sensible (líquido) como alternativa de solución
  18. 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. 19. Sitios web con diseño de sensibleTHE BOSTON GLOBE www.bostonglobe.com Móvil Tableta Escritorio
  20. 20. Sitios web con diseño de sensibleMACDONALD HOTEL & RESORTS www.macdonaldhotels.co.uk Escritorio Tableta Móvil
  21. 21. Sitios web con diseño de sensible
  22. 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. 23. Primeras pruebas de uso del Ipad Grupo Norman and Nilsen
  24. 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. 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. 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. 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. 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. 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. 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. 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. 32. Test de usabilidad para móviles
  33. 33. Gestos estándares para móviles táctiles Xperience Consulting
  34. 34. Consideraciones en el diseño deinteracción para móviles táctiles
  35. 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. 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. 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. 38. Aplicativo móvil Web móvil
  39. 39. Consideraciones en el diseñode interacción para Tabletas
  40. 40. Las tabletas también poseenzona s calientes pero endiferente posición Josh Clark en http://www.netmagazine.com
  41. 41. Ubicación de los controles para las aplicacionesAplicación para smartphone Aplicación para portátil
  42. 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. 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. 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. 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. 46. Esta presentación tiene una licencia Creative Commons de: Atribución No comercial Compartir igual Percy Negrete @percynegretepercy.negrete@pucp.edu.pe

×