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

Usabilidad enmóviles ytabletasDiseñosensible

1982 MOTOROLA DYNATAC 8000X

El estallido del MobileLos teléfonos inteligentes están impulsando el uso de aplicaciones en red y contenido Web de forma exponencial

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

Etapas en su elaboraciónBrainstorming Arquitectura Wireframing Diseño Aplicación

UX Mobile UX Tablet UX Desktop

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

Existen cientos dedispositivos móvilesdiferentes @subidubi Jimena Catalina

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

Experiencias de uso entre dispositivos táctilesTomando como ejemplo al Iphone y al Ipad

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

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

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

Netflix www.netflix.com

AMAZON www.amazon.com

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

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

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

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

Sitios web con diseño de sensible

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

Primeras pruebas de uso del Ipad Grupo Norman and Nilsen

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

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

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

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

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

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

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

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

Test de usabilidad para móviles

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

Consideraciones en el diseño deinteracción para móviles táctiles

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

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

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

Aplicativo móvil Web móvil

Consideraciones en el diseñode interacción para Tabletas

Las tabletas también poseenzona s calientes pero endiferente posición Josh Clark en http://www.netmagazine.com

Ubicación de los controles para las aplicacionesAplicación para smartphone Aplicación para portátil

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

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

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

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.

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

http://blog.pucp.edu.pe	1153
http://ldm-m1.blogspot.mx	37
http://eduvirtual.cuc.edu.co	35
http://ldm-m1.blogspot.jp	15
http://m.blog.pucp.edu.pe	11
http://feeds.feedburner.com	9
http://ldm-m1.blogspot.com	4
http://ldm-m1.blogspot.com.es	4
http://www.twylah.com	2
http://ldm-m1.blogspot.com.br	1

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

by Percy Negrete

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,271

Statistics

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