LINTI LINTI Calle 50 y 115 1° Piso – La Plata – Tél.: (0221) 422-3528 Laboratorio de...

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


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


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


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)


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.


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.


Problemáticas

Diversificación del Hardware disponible

Display

Interacción

Aplicaciones

Preferencias Nokia 1220

Palm Tungsten T3


• 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


• 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


• 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


• 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


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


Respecto al HCI• Interacción eficiente + Accesos directos

• Búsqueda contextual y rápida



Respecto al feedback

• Feedback

necesario

• Feedback

sintético



Respecto al scrolling

•NO al desplazamiento vertical para acceso a la funcionalidad y servicios

•NO al desplazamiento horizontal



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



Objetos de InteracciónMenúsCombo boxRadio y check buttonListas

BrowsersMúltiples ventanasMapas de imágenesAnimacionesBarras de herramientas


SI

NO


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.


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?


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.


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?


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


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.


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.


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.


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.


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


Ejemplos


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


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.


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



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.


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



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.


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


¿Preguntas?

Muchas gracias


Más información

http://www.linti.unlp.edu.ar/catedras/

interfaces/principal.html

LINTI LINTI Calle 50 y 115 1° Piso – La Plata – Tél.: (0221) 422-3528 Laboratorio de...

Documents

Transcript of LINTI LINTI Calle 50 y 115 1° Piso – La Plata – Tél.: (0221) 422-3528 Laboratorio de...