Este documento discute la evolución de los dispositivos móviles y su impacto en el diseño de experiencias de usuario. Explica que el uso de aplicaciones móviles y contenido web se ha incrementado exponencialmente debido a los teléfonos inteligentes. También señala que la adopción de internet móvil ha superado a la de escritorio y que las ventas de smartphones superarán a las de computadoras de escritorio a finales de 2011. Finalmente, analiza consideraciones importantes para el diseño de experiencias de usuario sensibles en móv

1. Usabilidad en
móviles y
tabletas
Diseño
sensible

2. 1982
MOTOROLA DYNATAC 8000X

3. Ahora

4. El estallido del Mobile
Los 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 millones
en 2013.
Fuente: www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html
La adopción de internet móvil ha superado a la de internet
de Pc desktops por ocho veces.
Fuente: www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html
Las ventas mundiales de smartphones superarán a las de
Pc desktops a finales de 2011.
Fuente: www.pcworld.com/article/171380
Más de la mitad de los usuarios de Android y IPhone
consumen más de 30 minutos por día utilizando
aplicaciones móviles.
Fuente: www.venturebeat.com/2009/08/27/admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-users

8. Etapas en su elaboración
Brainstorming
Arquitectura
Wireframing
Diseño
Aplicación

9. UX Mobile UX Tablet UX Desktop

10. No sesgar el sector
No es solo diseñar para Iphones, Ipads
o para terminales táctiles

11. Existen cientos de
dispositivos móviles
diferentes
@subidubi Jimena Catalina

12. 2010 2011
Proyección 2012
Fuente: Ipass
mobile-workforce-project.ipass.com/cpwp/wp-content/uploads/2011/11/ipass_mobileworkforcereport_q4_2011.pdf

13. Experiencias de uso entre
dispositivos táctiles
Tomando como ejemplo al Iphone y al Ipad

14. Táctil, uso de algunos dedos de las
Smartphone 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 horizontal
Aplicación Facebook
Memoria limitada

15. 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
horizontal
Aplicación Facebook

16. 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 internet
Sitio web de Facebook

17. Netflix www.netflix.com

18. AMAZON www.amazon.com

19. Diseño sensible (líquido) como
alternativa de solución

20. Sitios web con diseño de sensible
El diseño sensible nos permite llenar los vacios dejados por los tamaños
de pantalla de los diferentes dispositivos, esto hace que las interfaces de
los sitios web se adapten adecuadamente mejorando la experiencia de uso
vía The UX Booth Elaine Simpson

21. Sitios web con diseño de sensible
THE BOSTON GLOBE www.bostonglobe.com
Móvil Tableta Escritorio

22. Sitios web con diseño de sensible
MACDONALD HOTEL & RESORTS www.macdonaldhotels.co.uk
Escritorio Tableta Móvil

23. Sitios web con diseño de sensible

24. 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

25. Primeras pruebas de uso
del Ipad
Grupo Norman and Nilsen

26. La primera impresión que
define a las aplicaciones
para iPad ha sido
sorprendentes por parte
de los usuarios, sin
embargo, destacaron las
siguientes apreciaciones.
Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf

27. A los usuarios les parece un iPhone gigante y muy pesado.
Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf

28. 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 mayor
distancia (Ley de Fitts).
Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf

29. Los usuarios están satisfechos navegando por la web con un iPad. Ello no
sucede así en un iPhone ya que la pantalla del navegador es más pequeña, y la
navegación es menos agradable. Se deduce que para el iPhone se prefieren las
aplicaciones 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

30. Zonas táctiles pequeñas en los sitios web vistos en un iPad los textos son
suficientemente grande para ser leídos pero demasiados pequeño
para 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

31. Baja recordación
movimientos y gestos hechos
con las manos son difíciles de
aprender cuando no son
empleados consistentemente
a través de las diferentes
aplicaciones.
Entre aplicaciones
Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf

32. Los usuarios no le gusta
escribir en la pantalla táctil y
así evitar el proceso de
registro.
Fuente: www.nngroup.com/reports/mobile/ipad/ipad-usability_1st-edition.pdf

33. 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

34. Test de usabilidad para móviles

35. Gestos estándares para móviles táctiles
Xperience Consulting

36. Consideraciones en el diseño de
interacción para móviles táctiles

37. Evitar los elementos de
desplazamiento. La gran mayoría
de dispositivos táctiles no
interpretan estos eventos
La navegación por controles
indirectos es menos natural y más
compleja. Al mostrarles otro
sistema de desplazamiento los
usuarios se sentirán frustrados
Xperience Consulting

38. Es importante que las áreas de
interacción sean grandes;
facilitar la navegación
especialmente para personas
con alguna discapacidad
motriz
Los mensajes serán visibles justo
donde pulsamos y será más
difícil de ver so queda oculto por
nuestra mano
Xperience Consulting

39. Al usuario se le es cómodo muchas veces utilizar una mano para interactuar con el
dispositivo 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

40. Aplicativo móvil Web móvil

41. Consideraciones en el diseño
de interacción para Tabletas

42. Las tabletas también poseen
zona s calientes pero en
diferente posición
Josh Clark en http://www.netmagazine.com

43. Ubicación de los controles para las aplicaciones
Aplicación para
smartphone Aplicación para portátil

44. 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

45. 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

46. El so de las dos manos en tabletas toma más relevancia, aquí presentamos las zonas
de interacción de fácil acceso por los dedos y zonas de navegación
Zona de fácil acceso Zona de navegación

47. 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.

48. Esta presentación tiene una licencia
Creative Commons de:
Atribución
No comercial
Compartir igual
Percy Negrete
@percynegrete
percy.negrete@pucp.edu.pe