View
215
Download
0
Embed Size (px)
Citation preview
LINTILINTIwww.linti.unlp.edu.ar www.linti.unlp.edu.ar Calle 50 y 115 1° Piso – La Plata – Tél.: (0221) 422-3528
LLaboratorio deaboratorio de
IInvestigación denvestigación de
NNuevas uevas
TTecnologíasecnologías
IInformáticasnformáticas
UNLP – Universidad Nacional de la Plata – Argentina www.unlp.edu.ar
Interfaces Móviles para acceder a la Web
““Impactos en el uso, diseñoImpactos en el uso, diseño y y desarrollo desarrollo””
Lic. Ana Paola Amadeo [email protected]
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 33
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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 44
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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 55
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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 66
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)
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 77
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.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 88
Tipos de aplicacionesFuera 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.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 99
Problemáticas
Diversificación del Hardware disponible
Display
Interacción
Aplicaciones
Preferencias Nokia 1220
Palm Tungsten T3
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1010
• Limitaciones de la pantalla4 a 15 líneas de texto
• Problemas de conexiónInterferencias, pérdida de señal, falta de batería,
problemas de conexión
• Limitaciones en la comunicaciónMedio cableado: de 100 Mbps a 40 GbpsRed inalámbrica: menores a 512 Kbps –ADSL-
• Mecanismos de interacción incorporadosMecanismos de entrada: lápiz o stylus, voz De salida: sonido, pantallas digitales, video
Problemáticas Respecto al Hardware
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1111
• 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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1212
• Objetivos y postura diferente del usuario“User on the go”. Movilidad y ubicuidadRequiere información directa y puntualmentePoca paciencia, 30 segundos en un escritorio no es
lo mismo que en una Palm.
• Nuevo contexto del usuarioInteractúa desde cualquier tipo de ambienteHay distracción, ruido, concurrencia, descuidos,
interrupciones, olvidos, postergaciones
• Cambios en la representación mental del sitioContenido limitado
• Cambios en la semántica de la navegaciónNavegación para acceso funcional
Perfil particular de un Usuario Móvil
Problemáticas
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1313
• Limitaciones sobre multitareasUn simple hilo de diálogo
• Cambios en los dispositivos de interacciónUso del lápiz para escribir, señalar, marcar,
cliquear, arrastrarTeclado en pantallaSonido y voz
• Mayor desgaste manualExigencia de buen pulso Exigencia de memoria
Perfil particular de un Usuario Móvil
Problemáticas
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1414
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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1515
Respecto al HCI• Interacción eficiente + Accesos directos
• Búsqueda contextual y rápida
Diseño de Interfaces Móviles
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1616
Respecto al feedback
• Feedback
necesario
• Feedback
sintético
Diseño de Interfaces Móviles
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1717
Respecto al scrolling
•NO al desplazamiento vertical para acceso a la funcionalidad y servicios
•NO al desplazamiento horizontal
Diseño de Interfaces Móviles
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1818
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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 1919
Objetos de InteracciónMenúsCombo boxRadio y check buttonListas
BrowsersMúltiples ventanasMapas de imágenesAnimacionesBarras de herramientas
Diseño de Interfaces Móviles
SI
NO
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2020
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.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2121
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?
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2222
Diseño para Web Móvil vs. Tradicional (Cont.) Determinar quienes son los usuarios
Periodicidad de visita
Periódica Periódica o esporádica.
Modo de visita Visitante o registrado.
Visitante o registrado.
Tiempo de visita Puntual Exploración o puntual.
Acceso Puntual para SO y dispositivo.
Uso de estándares para distintos navegadores.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2323
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?
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2424
Diseño para Web Móvil vs. Tradicional (Cont.) Organización de páginas
Página inicial Índice de acceso Objetivos, índice de acceso.
Estilo El mismo en todo el sitio y en el original.
El mismo en todo el sitio.
Interacción Menús y Listas Tablas, Frames, Listas.
Tamaño de páginas
Sintéticas Sintéticas o extensas.
Contenido Sólo información específica
Separar contexto, publicidad, ayuda...
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2525
Diseño para Web Móvil vs. Tradicional (Cont.) Confeccionar las páginas
Lenguaje Terminología apropiada.
Terminología apropiada.
Consistencia En 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<32Kb. Imagen de una página<40Kb.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2626
Diseño para Web Móvil vs. Tradicional (Cont.) Confeccionar las páginas (Cont.)
Información Relevante Relevante, irrelevante, publicidad...
Hipervínculos Formateados para PDAs, navegación offline.
No erróneos y actualizados.
Navegación 2 tipos diferentes. 4 tipos diferentes.
Software adicional
No soportado. Incluir Plug-ins necesarios.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2727
Diseño para Web Móvil vs. Tradicional (Cont.) Información necesaria
Títulos <15 caracteres Sin límitesFuente Muy limitada Múltiples letras,
viñetas, líneas..Multimedia Imágenes simples,
evitar animaciones.
Multiples formatos y recursos.
Formularios Filtrar información.
Obtener información.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2828
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.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 2929
Ejemplos
Diario La Nación http://www.lanacion.com.ar/herramientas/pda/index.asp
Yahoo http://wap.oa.yahoo.com/ Diario Clarín
https://my.avantgo.com/browse/search/0/1389/?q=clarin
Google.com http://www.google.com/palm
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3030
Ejemplos
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3131
Alternativas de Desarrollo de la InterfazAparición de nuevas categorías de terminales móviles. Diferentes protocolos.
Aplicaciones accedidas desde diferentes tipos de dispositivos.
PDA´s.
Celulares.
Smartphones.
EUROPAEUROPAWAPWAP
JAPONJAPONiModeiMode
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3232
Alternativas de Desarrollo de la InterfazExisten 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ás Menos
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.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3333
Alternativas de Desarrollo de la Interfaz
Múltiples Fuentes – Peor Esfuerzo– Peor EsfuerzoLos 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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3434
Alternativas de Desarrollo de la Interfaz
Lenguajes Propietarios – Peor Esfuerzo– Peor Esfuerzo
Desarrollados o utilizados por empresas privadas, para aplicarlos a dispositivos creados por ellos mismos o terceros.
WML–WML– WAP Forum. WAP Forum.
cHTML –cHTML – NTT & iMode. NTT & iMode.
HDML -HDML - AT&T Wireless , Sprint PCS. AT&T Wireless , Sprint PCS.
VHTML –VHTML – Motorola. Motorola.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3535
Alternativas de Desarrollo de la InterfazHojas de Estilo – Menor Esfuerzo– Menor EsfuerzoLa 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
SERVIDOR CLIENTE
VXML
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3636
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.
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3737
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
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3838
¿Preguntas?
Muchas gracias
www.linti.unlp.edu.arwww.linti.unlp.edu.ar Pág. 3939
Más información
http://www.linti.unlp.edu.ar/catedras/
interfaces/principal.html