1 LINTI www.linti.unlp.edu.ar LINTI www.linti.unlp.edu.ar Calle 50 y 115 1° Piso – La Plata – Tél.: (0221) 422-3528 Laboratorio de Investigación de Nuevas Tecnologías Informáticas UNLP – Universidad Nacional de la Plata – Argentina www.unlp.edu.ar

2 Interfaces Móviles para acceder a la Web “Impactos en el uso, diseño y desarrollo” Lic. Ana Paola Amadeo [email protected] [email protected]

3 www.linti.unlp.edu.ar 3 Pág. 3 Temario Internet Móvil: introducción Problemáticas a tener en cuenta Consideraciones en el Diseño de Interfaces Móviles Alternativas de Desarrollo de la UI Conclusiones

4 www.linti.unlp.edu.ar 4 Pág. 4 Introducción ¿Qué es un dispositivo móvil? Son Asistentes Personales Digitales –PDA- que entran en la palma de una mano e integran diferentes servicios, particularmente conexión a Internet sin un cable físico. Se tienen: Computadoras de mano -handheld computer- Teléfonos celulares Smartphones

5 www.linti.unlp.edu.ar 5 Pág. 5 Introducción ¿Qué es una Interfaz Móvil ? Es la componente de software que soporta el diálogo entre un usuario que accede desde un dispositivo móvil y una aplicación En ella influyen: Interfaz Móvil Características del Usuario Características del Ambiente Características del Hardware Aspectos Tecnológicos Aplicaciones

6 www.linti.unlp.edu.ar 6 Pág. 6 Aplicaciones Calendario, libreta de direcciones, notas, entretenimientos, correo electrónico, navegar en la Web en línea u offline. Interconexión con periféricos externos como impresoras, tarjetas de red, módems inalámbricos y GPS (Sistemas de Posicionamiento Global)

7 www.linti.unlp.edu.ar 7 Pág. 7 Aplicaciones (Cont.) Desarrollos a medida: Medicina. Recolección de datos de encuestas. Recolección de datos de medidores de servicios públicos. Validación de usuarios a través de reconocimiento de patrones. Sistemas de automatización de ventas. Gestión de tránsito y policía.

8 www.linti.unlp.edu.ar 8 Pág. 8 Tipos de aplicaciones Fuera de Línea Datos almacenados localmente. Conexión económica, sin necesidad de hardware especial. Ideal para usar en lugares cerrados como sótanos o abiertos como en el campo. En línea Conexión entre servidor y cliente en tiempo real. Necesidad de hardware específico, como modem inalámbrico o teléfonos celulares. Necesidad de un proveedor de servicios inalámbricos. Aplicaciones urbanas.

9 www.linti.unlp.edu.ar 9 Pág. 9 Problemáticas Diversificación del Hardware disponible Display Interacción Aplicaciones Preferencias Nokia 1220 Palm Tungsten T3

10 www.linti.unlp.edu.ar 10 Pág. 10 Limitaciones de la pantalla 4 a 15 líneas de texto Problemas de conexión Interferencias, pérdida de señal, falta de batería, problemas de conexión Limitaciones en la comunicación Medio cableado: de 100 Mbps a 40 Gbps Red inalámbrica: menores a 512 Kbps –ADSL- Mecanismos de interacción incorporados Mecanismos de entrada: lápiz o stylus, voz De salida: sonido, pantallas digitales, video Problemáticas Respecto al Hardware

11 www.linti.unlp.edu.ar 11 Pág. 11 Sistemas Operativos dependientes de la plataforma. PalmOS: desarrollado a Palm Inc. Soporta las aplicaciones desarrolladas por líderes como IBM, Oracle y Qualcomm, en equipos Palm, IBM, Casio, etc. Win CE: desarrollado por Microsoft y soportado principalmente por Pocket PC. Incluye una suite del paquete Office y un navegador optimizado para la Web. Problemáticas Respecto al Software

12 www.linti.unlp.edu.ar 12 Pág. 12 Objetivos y postura diferente del usuario “User on the go”. Movilidad y ubicuidad Requiere información directa y puntualmente Poca paciencia, 30 segundos en un escritorio no es lo mismo que en una Palm. Nuevo contexto del usuario Interactúa desde cualquier tipo de ambiente Hay distracción, ruido, concurrencia, descuidos, interrupciones, olvidos, postergaciones Cambios en la representación mental del sitio Contenido limitado Cambios en la semántica de la navegación Navegación para acceso funcional Perfil particular de un Usuario Móvil Problemáticas

13 www.linti.unlp.edu.ar 13 Pág. 13 Limitaciones sobre multitareas Un simple hilo de diálogo Cambios en los dispositivos de interacción Uso del lápiz para escribir, señalar, marcar, cliquear, arrastrar Teclado en pantalla Sonido y voz Mayor desgaste manual Exigencia de buen pulso Exigencia de memoria Perfil particular de un Usuario Móvil Problemáticas

14 www.linti.unlp.edu.ar 14 Pág. 14 Respecto al contenido Reorganización Puntualización Filtrado Descarte Respecto a la estructura “Arbolizar” el grafo original Menos nodos y enlaces Respecto a la navegación Navegación hacia atrás y adelante Navegación para funcionalidad Navegación adaptada Diseño de Interfaces Móviles

15 www.linti.unlp.edu.ar 15 Pág. 15 Respecto al HCI Interacción eficiente + Accesos directos Búsqueda contextual y rápida Diseño de Interfaces Móviles

16 www.linti.unlp.edu.ar 16 Pág. 16 Respecto al feedback Feedback necesario Feedback sintético Diseño de Interfaces Móviles

17 www.linti.unlp.edu.ar 17 Pág. 17 Respecto al scrolling NO al desplazamiento vertical para acceso a la funcionalidad y servicios NO al desplazamiento horizontal Diseño de Interfaces Móviles

18 www.linti.unlp.edu.ar 18 Pág. 18 Imagenes Pequeñas,significativas Reconocibles en grises Respecto al color Pantalla color o ByN Restringir color Recursos disponibles Usar botonera física No redundar en los mecanismos de entrada Diseño de Interfaces Móviles

19 www.linti.unlp.edu.ar 19 Pág. 19 Objetos de Interacción Menús Combo box Radio y check button Listas Browsers Múltiples ventanas Mapas de imágenes Animaciones Barras de herramientas Diseño de Interfaces Móviles SI NO

20 www.linti.unlp.edu.ar 20 Pág. 20 Diseño Web Tradicional Establecer los objetivos de la página. Determinar quienes son los usuarios. Determinar las tareas de los lectores. Analizar como organizar las páginas. Confeccionar las páginas. Tener en cuenta las limitaciones. Información necesaria.

21 www.linti.unlp.edu.ar 21 Pág. 21 Diseño para Web Móvil vs. Tradicional Establecer el objetivo de la página ¿Cuál es el fin? ¿Qué se va a publicar?

22 www.linti.unlp.edu.ar 22 Pág. 22 Diseño para Web Móvil vs. Tradicional (Cont.) Determinar quienes son los usuarios Periodicidad de visita PeriódicaPeriódica o esporádica. Modo de visitaVisitante o registrado. Tiempo de visitaPuntualExploración o puntual. AccesoPuntual para SO y dispositivo. Uso de estándares para distintos navegadores.

23 www.linti.unlp.edu.ar 23 Pág. 23 Diseño para Web Móvil vs. Tradicional (Cont.) Determinar las tareas de los lectores Las tareas deben ser concisas y deben accederse rápidamente ¿Cuáles son las tareas principales?

24 www.linti.unlp.edu.ar 24 Pág. 24 Diseño para Web Móvil vs. Tradicional (Cont.) Organización de páginas Página inicialÍndice de accesoObjetivos, índice de acceso. EstiloEl mismo en todo el sitio y en el original. El mismo en todo el sitio. InteracciónMenús y ListasTablas, Frames, Listas. Tamaño de páginas SintéticasSintéticas o extensas. ContenidoSólo información específica Separar contexto, publicidad, ayuda...

25 www.linti.unlp.edu.ar 25 Pág. 25 Diseño para Web Móvil vs. Tradicional (Cont.) Confeccionar las páginas LenguajeTerminología apropiada. ConsistenciaEn todo el sitio y en original. En todo el sitio. Minimizar la memoria Profundidad no mayor a 1 click Profundidad no mayor a 3 clicks Tamaño de página Página

26 www.linti.unlp.edu.ar 26 Pág. 26 Diseño para Web Móvil vs. Tradicional (Cont.) Confeccionar las páginas (Cont.) InformaciónRelevanteRelevante, irrelevante, publicidad... HipervínculosFormateados para PDAs, navegación offline. No erróneos y actualizados. Navegación2 tipos diferentes.4 tipos diferentes. Software adicional No soportado.Incluir Plug-ins necesarios.

27 www.linti.unlp.edu.ar 27 Pág. 27 Diseño para Web Móvil vs. Tradicional (Cont.) Información necesaria Títulos

28 www.linti.unlp.edu.ar 28 Pág. 28 Diseño para Web Móvil vs. Tradicional Establecer los objetivos de la página. Determinar quienes son los usuarios. Determinar las tareas de los lectores. Analizar como organizar las páginas. Confeccionar las páginas. Tener en cuenta las limitaciones. Información necesaria.

29 www.linti.unlp.edu.ar 29 Pág. 29 Ejemplos Diario La Nación http://www.lanacion.com.ar/herramienta s/pda/index.asp http://www.lanacion.com.ar/herramienta s/pda/index.asp Yahoo http://wap.oa.yahoo.com/http://wap.oa.yahoo.com/ Diario Clarín https://my.avantgo.com/browse/search/ 0/1389/?q=clarin https://my.avantgo.com/browse/search/ 0/1389/?q=clarin Google.com http://www.google.com/palmhttp://www.google.com/palm

30 www.linti.unlp.edu.ar 30 Pág. 30 Ejemplos

31 www.linti.unlp.edu.ar 31 Pág. 31 Alternativas de Desarrollo de la Interfaz  Aparición de nuevas categorías de terminales móviles. Diferentes protocolos.  Aplicaciones accedidas desde diferentes tipos de dispositivos.  PDA´s.  Celulares.  Smartphones. EUROPAWAPJAPONiMode

32 www.linti.unlp.edu.ar 32 Pág. 32 Alternativas de Desarrollo de la Interfaz  Existen diferentes Paradigmas para la construcción de sitios Web. La evolución tiende a buscar aspectos en común. Esfuerzo de Implementación y AdministraciónMásMenos Grado de Automatización Múltiples Fuentes Lenguajes nativos: HTML, WML, cHTML, VHTML, etc. Lenguajes Propietarios Diseño utilizando lenguajes propietarios, por empresa y modelo. (primera gener. de disp. móviles). Transformación / Hojas de Estilo Páginas que se transformaran dinámicamente, usando estándares W3C. (XML + XSL + CSS). Estándares para desarrollo Múlti-Canal Es el reto del mañana. Actualmente los estándares son inadecuados.

33 www.linti.unlp.edu.ar 33 Pág. 33 Alternativas de Desarrollo de la Interfaz – Peor Esfuerzo  Múltiples Fuentes – Peor Esfuerzo Los dispositivos hoy en día entienden y soportan, en el peor de los casos diferentes lenguajes por cada tipo de terminal: WML – cHTML – HDML. Diferentes Lenguajes de Programación

34 www.linti.unlp.edu.ar 34 Pág. 34 Alternativas de Desarrollo de la Interfaz – Peor Esfuerzo  Lenguajes Propietarios – Peor Esfuerzo Desarrollados o utilizados por empresas privadas, para aplicarlos a dispositivos creados por ellos mismos o terceros.  WML– WAP Forum.  cHTML – NTT & iMode.  HDML - AT&T Wireless, Sprint PCS.  VHTML – Motorola.

35 www.linti.unlp.edu.ar 35 Pág. 35 Alternativas de Desarrollo de la Interfaz – Menor Esfuerzo  Hojas de Estilo – Menor Esfuerzo La aparición del XML permite diseñar contenido Web, almacenar y transmitir información independientemente de las plataformas, S.O. y dispositivos. Esta tecnología permite trabajar con: Un documento XML, o con un documento XHTML. Documento XML HTML WML cHTML XHTML Documento Final Documento Fuente XSLT + CSS Hoja de Estilo XSL SERVIDORCLIENTE VXML

36 www.linti.unlp.edu.ar 36 Pág. 36 Alternativas de Desarrollo de la Interfaz  Estándar para Desarrollo Multicanal  Es necesario plantear nuevos modelos de interacción de acuerdo a los diferentes canales de comunicación. Además, deberán ser estandarizados para que sean independientes de los dispositivos de acceso.

37 www.linti.unlp.edu.ar 37 Pág. 37 Conclusiones Gran demanda de acceso móvil a Internet Impacto significativo en el proceso de diseño del sitio Complejidad reside en el diseño de la interfaz móvil Características disímiles de los dispositivos Nueva perspectiva del usuario Normas específicas que hay que considerar Se debe replantear formas de presentación e interacción específicas para el acceso móvil Multiplicidad de bosquejos de diseño que deben coexistir para un mismo sitio. Multiplicidad en el proceso de codificación

38 www.linti.unlp.edu.ar 38 Pág. 38 ¿Preguntas? Muchas gracias

39 www.linti.unlp.edu.ar 39 Pág. 39 Más información http://www.linti.unlp.edu.ar/catedras/int erfaces/principal.html