INTERFACES DE USUARIOdis.um.es/~jfernand/0506/dai/1.pdf · 2008-04-01 · 3 27/02/2006 DAI Interfaz...
Transcript of INTERFACES DE USUARIOdis.um.es/~jfernand/0506/dai/1.pdf · 2008-04-01 · 3 27/02/2006 DAI Interfaz...
1
27/02/2006 DAI
INTERFACES DE USUARIO
27/02/2006 DAI
Contenidos
IntroducciónEl proceso de diseño de interfaces de usuario– Principios de gestión del diseño– Selección de elementos de interfaz– Selección de medios– Inclusión de aspectos socio-culturales
2
27/02/2006 DAI
Ejemplos iniciales
27/02/2006 DAI
Interfaz de usuario
Parte del sistema informático y su software que la gente puede ver, oír, tocar, hablar a, etc
Componentes– Entrada: cómo una persona comunica sus necesidades al
sistema (teclado, ratón, pantalla táctil, voz)– Salida: cómo un sistema informático muestra sus
resultados al usuario (pantalla, voz, sonido)¿olfato, tacto?
3
27/02/2006 DAI
Interfaz de usuario
Mezcla de mecanismos bien diseñados de entrada y salida para satisfacer las necesidades, capacidades y limitacionesde los usuarios de la forma más efectiva.
No debe ser el centro de atención, sino permitir hacer las tareas cómodamente
27/02/2006 DAI
Importancia de un buen diseño
¿Por qué no se hacen buenos diseños?– ¿No nos importa?– ¿No tenemos sentido común?– ¿No tenemos tiempo?– ¿No sabemos qué hace ser bueno a un diseño?
Identificación de interfaz y sistemaEfectos sobre el desempeño profesional
4
27/02/2006 DAI
Repaso histórico
27/02/2006 DAI
Repaso histórico al diseño de pantallas (I)
Años 70: Pantallas con muchos campos ininteligibles. Comandos tecleados. Necesidad de manuales. Mensajes ambiguos.
5
27/02/2006 DAI
Repaso histórico al diseño de pantallas (II)
Años 80: Etiquetas significativas. Comando ejecutados mediante teclas de función. Mensajes más claros.
27/02/2006 DAI
Repaso histórico al diseño de pantallas (III)
Años 90: Uso de gráficos. Grupos, botones, menús, formato, estilo.
6
27/02/2006 DAI
Repaso histórico al diseño de pantallas (IV)
Actualidad: Componentes multimedia, orientación al web, aspecto socio-culturales.
27/02/2006 DAI
Objetivos que nos marcamos
Comprender qué se debe aplicar en el proceso de diseño de interfaces y pantallas
Comprender cómo emplear una metodología de diseño de interfaces efectiva
Identificar los componentes de interfaces y pantallas gráficos y web
Organizar los componentes efectiva y eficientemente
Inclusión de aspectos socio-culturales
Correcta elección de colores e iconos
Desarrollo de interfaces de usuario y su evaluación
7
27/02/2006 DAI
Características de los interfaces de usuario
Interfaz gráfico de usuario (GUI)
Interfaz web de usuario
27/02/2006 DAI
GUI: Definición
Colección de técnicas y mecanismos para interaccionar con algo (interfaz de usuario)
Mecanismo de interacción principal es un dispositivo apuntador de cualquier tipo (interfaz gráfico)
Dispositivo mano
Algo objetos
8
27/02/2006 DAI
GUI
Objetos: – pueden ser vistos, oídos, tocados o percibidos de
cualquier otra forma.– visibles al usuario para realizar tareas
Acciones– acceso y modificación sobre objetos– comportamientos estándar como resultado
27/02/2006 DAI
Manipulación directa
Sistema como extensión del mundo real– El entorno de trabajo trasladado a una pantalla– Entornos “familiares”
Visibilidad continua de objetos y acciones
Acciones rápidas e incrementales con visualización de resultados
Reversibilidad de acciones incrementales
9
27/02/2006 DAI
Manipulación indirecta
Operaciones que no se puede hacer directamente por:– Dificultad de conceptualización gráfica– Capacidad gráfica del sistema limitada– Cantidad de espacio disponible para los controles
de manipulación limitada– Dificultad para aprender y recordar todas las
operacionesEj: uso de menús
27/02/2006 DAI
Ventajas de los sistemas gráficos (I)
Se reconocen antes los símbolos que el textoAprendizaje más rápidoUso y resolución de problemas más rápidoFacilidad para recordarNaturalidadExplotación de factores visuales y espacialesCentran el pensamientoProporcionan contextoMenos errores
10
27/02/2006 DAI
Ventajas de los sistemas gráficos (II)
Mayor sensación de controlInformación inmediataRespuestas previsiblesAcciones fácilmente reversiblesMenos ansiedad respecto al usoMás atractivoAhorro de espacio en pantallaIndependiente de idiomaPosibilidad de añadir textoNo hay que saber teclear
¿Para quién son estas ventajas?
27/02/2006 DAI
Desventajas de los sistemas gráficos (I)
Mayor complejidad de diseñoAprendizaje también necesarioFalta de guías de diseñoInconsistencias en técnica y terminologíaPresencia del dominio de trabajoPosible falta de familiaridadLimitaciones de comprensión humanaRequerimiento de manipulación de ventanasLimitaciones de producción
11
27/02/2006 DAI
Desventajas de los sistemas gráficos (II)
Menor existencia de iconos probadosIneficiencia para mecanógrafosIneficiencia para usuarios expertosNo siempre es el estilo de interacción preferidoNo siempre la forma más rápida de interacciónAumento de posibilidades de confusiónDistraccionesMayor consumo de espacio en pantallaLimitaciones de hardware
¿Para quién son estas desventajas?
27/02/2006 DAI
Algunas conclusiones iniciales
El diseño del interfaz (y no el estilo de interacción) determina su usabilidad
Se deben considerar las preferencias de usuario al elegir estilo de interacción
En muchos casos, las palabras son más significativas para los usuarios que los iconos
El contenido de una pantalla gráfica es crítica para su utilidad
El éxito de un sistema gráfico depende de la capacidad de los diseñadores para seguir los principios de usabilidad
12
27/02/2006 DAI
Características del GUI
Presentación visual sofisticadaInteracción elegir y seleccionarConjunto restringido de opciones de interfazVisualizaciónOrientación a objetosUso de la capacidad de reconocimiento de las personasRealización concurrente de funciones
27/02/2006 DAI
Presentación visual sofisticada
Reflejar mundo real en la pantallaElementos
– Líneas, dibujos, iconos– Fuentes, tamaños, estilos, colores– Animaciones, fotos, vídeo
Organización– Ventanas– Menús– Controles
13
27/02/2006 DAI
Interacción elegir y seleccionar
Identificación (elección) del objeto sobre el que realizar la acción
Selección del objeto – mediante ratón o puntero rápido y de
respuesta inmediata– mediante teclado
27/02/2006 DAI
Opciones limitadas de interfaz
What You See Is What You Get (WYSIWYG)
Se muestra en pantalla las opciones disponibles
14
27/02/2006 DAI
Visualización
Proceso cognitivo que permite comprender información difícil de percibir por ser muy voluminosa o abstracta
Cambio de representación para mostrar gradualmente la estructura o función del sistema o proceso
¿Mejor método de visualización? – Depende de lo que la gente quiere aprender de los datos– Mostrar lo más relevante, no necesariamente todo
27/02/2006 DAI
Orientación a objetos (I)
Objetos– Manipulados como unidad– Subobjetos (p.ej., documentos)– Clases de objetos
DatosContenedores de objetos
– Lugar de trabajo (escritorio)– Carpeta– Área de trabajo (temporal)
Dispositivos– Tipo y persistencia
15
27/02/2006 DAI
Orientación a objetos (II)
Relaciones entre objetos– Colecciones– Restricciones– Composiciones– Contenedor
Propiedades o atributos– Características únicas
27/02/2006 DAI
Orientación a objetos (III)
Acciones– Comandos
Manipulan objetosManipulación directa o botón
– Especificar atributo/propiedadSeleccionar objetoElegir la acción a aplicarEjecución
16
27/02/2006 DAI
Orientación a objetos vs
orientación a aplicación
Aplicación– Se abre la aplicación– Se selecciona un objeto
Objeto– Se escoge un objeto– Se selecciona la aplicación
27/02/2006 DAI
Más características GUI
Vistas– Compuesta: información de objeto y subobjetos– Contenidos: listas de objetos– Opciones: cambiar propiedades– Ayuda
Uso de memoria de reconocimiento– Más fácil recordar lo que se ha visto
Funciones concurrentes– Se puede hacer varias cosas al mismo tiempo
17
27/02/2006 DAI
Interfaz web de usuario
Diseño de navegación y presentación de información
Contenido, no datos
Construir jerarquía de menús y páginas que se usen fácil y naturalmente
27/02/2006 DAI
Dificultades tradicionales del diseño web
HTML
Navegación “back-forward”
Procesamiento batch de formularios
Dificultad de estandarización
18
27/02/2006 DAI
Similitudes GUI-Diseño Web
Diseño software
Para personas
Interactivos
Experiencias visuales a través de pantalla
Componentes similares
27/02/2006 DAI
Diferencias GUI- Páginas Web (I)
Dispositivos– GUI: bien definidos– Web: desconocidos a priori
Foco de usuario– GUI: Datos, aplicaciones, transacciones, procesos bien
definidos– Web: Información, navegación, back-forward, poco
estructuradoDatos/información
– GUI: fuentes fiables, datos privados y compartidos– Web: ¿fuentes fiables?, contenidos desconocidos
19
27/02/2006 DAI
Diferencias GUI- Páginas Web (II)
Tareas de usuarios– GUI: Instalar, configurar, ejecutar, abrir archivos, familiaridad – Web: links, formularios, descargas, navegación, falta de
familiaridadEspacio conceptual de usuario:
– GUI: Controlado y restringido por la aplicación– Web: tan ilimitado como desorganizado
Elementos de presentación– GUI: Ventanas, menús, controles, datos, barras de herramientas,
actualización dinámica, diseñado, estandarizado– Web: navegador+página, limitaciones de diseño y estandarización
27/02/2006 DAI
Diferencias GUI- Páginas Web (III)
Navegación– GUI: limitada por diseño y estilo estandarizado, “invisible”,
mediante menús, listas, árboles, etc– Web: poco limitada, poco estandarizada, parte del diseño,
mediante enlaces, bookmarks, etcContexto
– GUI: Rutas de navegación restringidas, múltiples ventanas visibles
– Web: página como unidad, rutas no restringidasInteracción
– GUI: menú, botones, listas de selección, copiar/pegar– Web: clics
20
27/02/2006 DAI
Diferencias GUI- Páginas Web (IV)
Tiempo de respuesta– GUI: Instantáneo– Web: Depende de la velocidad de transmisión, contenido de la
página, etcEstilo visual
– GUI: restringido por el entorno de desarrollo, sin mucha personalización
– Web: más artísticoCapacidad del sistema
– GUI: Capacidad ilimitada proporcional a la sofisticación de hardware y software
– Web: Restringido por hardware, navegador, deseos del usuario,etc
27/02/2006 DAI
Diferencias GUI- Páginas Web (V)
Eficiencia de tareas– GUI: tareas específicas para destinatarios específicos– Web: ¿quiénes son los destinatarios? Para público general
Consistencia– GUI: Garantizada por las herramientas y pautas de diseño– Web: Cada sitio pretende tener su propia identidad, uso de
estándares diferentes, poco seguimiento de las pautasAyuda a usuario
– GUI: parte esencial, uso de mecanismos estándares– Web: poca ayuda disponible e incrustada en la página
21
27/02/2006 DAI
Diferencias GUI- Páginas Web (VI)
Integración– GUI: A nivel de aplicaciones– Web: A nivel de funcionalidades (navegación, impresión,
etc)Seguridad
– GUI: Proporcional al grado de inversión– Web: Depende de las posibilidades del navegador y del
manejo del usuario de las mismasFiabilidad
– GUI: Proporcional al grado de inversión– Web: Susceptible a problemas causados por usuario, líneas
de comunicación, etc
27/02/2006 DAI
Implicaciones del diseño web
Tamaño de página– Página como entidad global compuesta por
piezas cuyas dimensiones varían en función del dispositivo de visualización
– Degradación del impacto visual Partes no visiblesUso de scroll
– Implicaciones de diseñoEmpezar por lo más relevante e “indicar” esas partes no visibles
22
27/02/2006 DAI
Implicaciones del diseño web
Generación visual de la página– Tiempo depende de conexión y contenido– Implicaciones de diseño: los usuarios deben recibir los
contenidos rápidamente sin que tengan sensación de espera
Layout– Disposición aproximada en la página– Implicaciones de diseño: comprender las restricciones y
diseño para las herramientas más comunes
27/02/2006 DAI
Implicaciones del diseño web
Resolución de página– Lectura en pantalla es más lenta que lectura en papel– Implicaciones de diseño: buscar formas sencillas de
imprimir documentos web grandes
Foco de usuario– Sensación de información en la web prácticamente ilimitada
y navegable, fácil “perderse”– Implicaciones de diseño: Crear páginas fáciles de escanear
y limitar el contenido textual. Proporcionar esquemas descriptivos de la información y de los enlaces.
23
27/02/2006 DAI
Implicaciones del diseño web
Navegación de página– Toma continua de decisiones sobre qué enlace seguir– Implicaciones de diseño: Esquemas claros de información
sobre contenidos y enlaces
Sensación de lugar– Los documentos electrónicos no suelen poseer guías que
nos sitúen en el contexto espacial del documento– Implicaciones de diseño: Proporcionar guías que sitúen
dentro del documento
27/02/2006 DAI
Implicaciones del diseño web
Interactividad– Permitir que las “manos” muevan la información junto con
los ojos– Implicaciones de diseño: Comprensión de este proceso.
Independencia de página– Cada página puede ser accedida desde casi cualquier
página, por lo que debe tener su identidad.– Implicaciones de diseño: Proporcionar encabezados y piés
de página