interfaces de usuario - presentación - …dis.um.es/~jfernand/0607/dai/interfacesdeusuario.pdf3...
TRANSCRIPT
1
INTERFACES DE USUARIO
24/02/2007 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
24/02/2007 DAI
Selección de elementos de interfaz– Selección de medios– Inclusión de aspectos socio-culturales
2
Ejemplos iniciales
24/02/2007 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)
24/02/2007 DAI
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
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.
24/02/2007 DAI
No debe ser el centro de atención, sino permitir hacer las tareas cómodamente
Importancia de un buen diseño
¿Por qué no se hacen buenos diseños?– ¿No disponemos de la tecnología?– ¿No nos importa?– ¿No tenemos sentido común?– ¿No tenemos tiempo?– ¿No sabemos qué hace bueno a un diseño?
Identificación de interfaz y sistema
24/02/2007 DAI
Efectos sobre el desempeño profesional
4
Repaso histórico
24/02/2007 DAI
Repaso histórico al diseño de pantallas (I)
Años 70: Pantallas con muchos campos ininteligibles. Comandos tecleados. Necesidad de manuales. Mensajes
24/02/2007 DAI
jambiguos.
5
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.
24/02/2007 DAI
Repaso histórico al diseño de pantallas (III)
Años 90: Uso de gráficos. Grupos, botones, menús, formato, estilo.
24/02/2007 DAI
6
Repaso histórico al diseño de pantallas (IV)
Actualidad: Componentes multimedia, orientación al web, aspecto socio-culturales.
24/02/2007 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
I l ió d t i lt l
24/02/2007 DAI
Inclusión de aspectos socio-culturales
Correcta elección de colores e iconos
Desarrollo de interfaces de usuario y su evaluación
7
Características de los interfaces de usuario
Interfaz gráfico de usuario (GUI)
Interfaz web de usuario
24/02/2007 DAI
Pregunta: ¿Por qué interfaces gráficas?
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)
24/02/2007 DAI
Dispositivo mano
Algo objetos
8
GUI
Objetos: – pueden ser vistos, oídos, tocados o percibidos de
cualquier otra forma.– visibles al usuario para realizar tareas
Acciones
24/02/2007 DAI
– acceso y modificación sobre objetos– comportamientos estándar como resultado
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
24/02/2007 DAI
Acciones rápidas e incrementales con visualización de resultados
Reversibilidad de acciones incrementales
9
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 limitado para los
controles de manipulación directa
24/02/2007 DAI
controles de manipulación directa– Dificultad para aprender y recordar todas las
operacionesEj: uso de menús
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 espaciales
24/02/2007 DAI
Explotación de factores visuales y espacialesCentran el pensamientoProporcionan contextoMenos errores
10
Ventajas de los sistemas gráficos (II)
Mayor sensación de controlInformación inmediataRespuestas previsiblesAcciones fácilmente reversiblesMenos ansiedad respecto al usoAtractivo de la manipulación directaAhorro de espacio en pantallaI d di t d idi
24/02/2007 DAI
Independiente de idiomaPosibilidad de añadir textoNo hay que saber teclear
¿Para quién son estas ventajas?
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íaTrabajo en el presente (WYSIWYG)Posible falta de familiaridad
24/02/2007 DAI
Posible falta de familiaridadLimitaciones de comprensión humanaRequerimiento de manipulación de ventanasLimitaciones de producción
11
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ónFuente de ambigüedadDistracciones
24/02/2007 DAI
DistraccionesMayor consumo de espacio en pantallaLimitaciones de hardware
¿Para quién son estas desventajas?
Algunas conclusiones iniciales
El diseño del interfaz (y no el estilo de interacción) determina su usabilidad diseño
Se deben considerar las preferencias de usuario al elegir estilo de interacción análisis de usuario
En muchos casos, las palabras son más significativas para los usuarios que los iconos combinación
24/02/2007 DAI
El contenido de una pantalla gráfica es crítica para su utilidad organización de contenidos
El éxito de un sistema gráfico depende de la capacidad de los diseñadores para seguir los principios de usabilidad usabilidad
12
Características del GUI
Presentación visual sofisticadaInteracción elegir y seleccionar (Pick-and-Click)Conjunto restringido de opciones de interfazVisualizaciónOrientación a objetos
24/02/2007 DAI
Uso de la capacidad de reconocimiento de las personasRealización concurrente de funciones
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
24/02/2007 DAI
Organización– Ventanas– Menús– Controles
13
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
24/02/2007 DAI
– mediante ratón o puntero rápido y de respuesta inmediata
– mediante teclado
Opciones limitadas de interfaz
What You See Is What You Get (WYSIWYG)
Se muestra en pantalla las opciones disponibles
24/02/2007 DAI
14
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
24/02/2007 DAI
¿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
Orientación a objetos (I)
Objetos– Manipulados como unidad– Subobjetos (p.ej., documentos)– Clases de objetos
DatosContenedores de objetos
– Lugar de trabajo (escritorio)
24/02/2007 DAI
g j ( )– Carpeta– Área de trabajo (temporal)
Dispositivos (ej: impresora)– Tipo y persistencia
15
Orientación a objetos (II)
Relaciones entre objetos– Colecciones– Restricciones– Composiciones– Contenedor
24/02/2007 DAI
Propiedades o atributos– Características únicas
Orientación a objetos (III)
Acciones– Comandos
Manipulan objetosManipulación directa o botón (ej: cerrar ventana)
– Especificar atributo/propiedadS l i bj
24/02/2007 DAI
Seleccionar objetoElegir la acción a aplicarEjecución
16
Orientación a objetos vs
orientación a aplicación
Aplicación– Se abre la aplicación– Se selecciona un objeto
Objeto
24/02/2007 DAI
Objeto– Se escoge un objeto– Se selecciona la aplicación
Más características GUI
Vistas– Compuesta: información de objeto y subobjetos– Contenidos: listas de objetos (árbol de objetos)– Opciones: cambiar propiedades (inspector de propiedades)– Ayuda
Uso de memoria de reconocimiento
24/02/2007 DAI
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
Interfaz web de usuario
Diseño de navegación y presentación de información
Contenido, no datos
24/02/2007 DAI
Construir jerarquía de menús y páginas que se usen fácil y naturalmente
Dificultades tradicionales del diseño web
HTML
Navegación “back-forward”
P i t b t h d f l i
24/02/2007 DAI
Procesamiento batch de formularios
Dificultad de estandarización
18
Similitudes GUI-Diseño Web
Diseño software
Para personas
Interactivos
24/02/2007 DAI
Experiencias visuales a través de pantalla
Componentes similares
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
t t d
24/02/2007 DAI
estructuradoDatos/información
– GUI: fuentes fiables, datos privados y compartidos– Web: ¿fuentes fiables?, contenidos desconocidos
19
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
El t d t ió
24/02/2007 DAI
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
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
24/02/2007 DAI
visibles– Web: página como unidad, rutas no restringidas
Interacción– GUI: menú, botones, listas de selección, copiar/pegar– Web: clics
20
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ísticoC id d d l i t
24/02/2007 DAI
Capacidad del sistema– GUI: Capacidad ilimitada proporcional a la sofisticación de
hardware y software– Web: Restringido por hardware, navegador, deseos del
usuario,etc
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 pautas
24/02/2007 DAI
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
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
j d l i d l i
24/02/2007 DAI
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
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 visibles
24/02/2007 DAI
Uso de scroll– Implicaciones de diseño
Empezar por lo más relevante e “indicar” esas partes no visibles
22
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
24/02/2007 DAI
– Disposición aproximada en la página– Implicaciones de diseño: comprender las restricciones y
diseño para las herramientas más comunes
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– Forma de leer en papel
24/02/2007 DAI
p p– 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
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
24/02/2007 DAI
p g qnos sitúen en el contexto espacial del documento
– Implicaciones de diseño: Proporcionar guías que sitúen dentro del documento
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
24/02/2007 DAI
p g p qpágina, por lo que debe tener su identidad.
– Implicaciones de diseño: Proporcionar encabezados y piés de página
24
Intranets y Extranets
Combinación de Web, GUI, bases de datos, etc para sistemas empresariales.
Diferencias con Internet– Usuarios– Tareas– Tipo y cantidad de información
24/02/2007 DAI
Tipo y cantidad de información– Hardware y software
Extranets– Conjunto especial de páginas web Intranet accesibles
desde el exterior
PRINCIPIOS GENERALES DEL DISEÑO DE INTERFACES DE
USUARIO
24/02/2007 DAI
25
Placer estético
Contraste significativo entre elementos de la pantallaCrear agrupacionesAlinear elementos y gruposProporcionar representación tridimensional
24/02/2007 DAI
Proporcionar representación tridimensionalUso simple y efectivo de colores y gráficos
Claridad
Visual, conceptual y lingüística
Elementos visuales: comprensibles, mundo real
Funciones
24/02/2007 DAI
Metáforas: realistas y simples
Palabras y texto: sencillo, sin jerga ni ambigüedad
26
Compatibilidad
De Usuario
De tareas y trabajos
D P d t
24/02/2007 DAI
De Productos
Adoptar la perspectiva del usuario
Comprensibilidad
Un usuario debería saber….– Qué mirar– Qué hacer– Cuándo hacerlo– Dónde hacerlo– Por qué hacerlo
Cómo hacerlo
24/02/2007 DAI
– Cómo hacerlo
Orden sensato del flujo de acciones, respuesta, presentaciones visuales y de información
27
Configurabilidad
Permitir adecuación sencilla de las opciones
Da sensación de control
F l ti d l i
24/02/2007 DAI
Favorece un rol activo del usuario
Consistencia
Permite reducir los requisitos de aprendizaje humano al cambiar de situación;
Permite aprender el modelo mental del sistema
Componentes similares…– Aspecto similar– Usos similares
Operación similar
24/02/2007 DAI
– Operación similar
Acciones determinísticas
Invariabilidad de elementos estándares
28
Control
El usuario debe controlar la interacción– Acciones a realizar, rapidez, decidir interrupciones, no ser
interrumpido por errores
El contexto se mantiene desde la perspectiva del usuario
Medios para alcanzar las metas flexibles y compatibles con las características de los usuarios
24/02/2007 DAI
Evitar modos de uso, ya que restringen las acciones
Personalizar aspectos del interfaz
Directo
Proporcionar formas directas de hacer las cosas
Mostrar las diferentes alternativas
24/02/2007 DAI
Mostrar el efecto de las acciones sobre los objetos
29
Eficiencia
Minimizar el movimiento de ojos, manos y otras acciones de control
– Rutas de navegación cortas– Movimiento de ojos obvio y secuencial– Flujos de control sencillos
Cambio de dispositivo de entrada mínimo
24/02/2007 DAI
– Cambio de dispositivo de entrada mínimo
Anticiparse a los deseos y necesidades del usuario en la medida de lo posible
Familiaridad
Uso de conceptos y terminología familiar para el usuario
Mantener un interfaz natural, usando patrones de comportamiento del usuario
24/02/2007 DAI
patrones de comportamiento del usuario
Usar metáforas del mundo real
30
Flexibilidad
Sensible a las necesidades de diferentes tipos de usuario:– Conocimiento y habilidades– Experiencia– Preferencias personales
24/02/2007 DAI
– Hábitos– Condiciones del momento
Tolerancia
Tolerar y “perdonar” errores humanos comunes
Prevenir errores
Proteger ante posibles errores catastróficos
24/02/2007 DAI
Mostrar mensajes constructivos al ocurrir un error
31
Predictibilidad
El usuario debería ser capaz de anticipar la progresión natural de cada tarea
– Proporcionar elementos reconocibles en pantalla– Proporcionar resultados de las operaciones realizadas
Todas las expectativas deberían ser colmadas
24/02/2007 DAI
Todas las expectativas deberían ser colmadas uniformemente
¿Qué pasará si le doy a …?
Recuperación
Un sistema debería permitir:– Reversibilidad de comandos o acciones– Puntos de retorno
Asegurar que los usuarios no pierdan su
24/02/2007 DAI
Asegurar que los usuarios no pierdan su trabajo como consecuencia de: – Error de usuario– Problemas hardware, software y de comunicación
32
Capacidad de respuesta
El sistema debe responder rápidamente a las peticiones de usuario
Confirmar inmediatamente las acciones visuales textuales y auditivas de los
24/02/2007 DAI
visuales, textuales y auditivas de los usuarios– Mostrar mensajes, barras de progreso, no dejar
pantalla “en blanco”
Sencillez
Tan simple como sea posible
Cinco formas de proporcionar sencillez:
– Mostrar los elementos progresivamentePrimero funciones comunes y necesariasIr mostrando funciones importantesEsconder funciones más sofisticadas y menos frecuentes
– Proporcionar valores por defecto
24/02/2007 DAI
– Minimizar los puntos de alineamiento
– Acciones comunes simples aun a costa de complicar las poco comunes
– Proporcionar uniformidad y consistencia
33
Transparencia
Permitir al usuario centrarse en la tarea o trabajo sin preocuparse por los mecanismos del interfaz.
24/02/2007 DAI
EL PROCESO DE DISEÑO DE INTERFACES DE USUARIO
24/02/2007 DAI
34
Diseñando para PERSONAS: 5 Mandamientos
Comprender totalmente los usuarios y sus tareas
Solicitar la implicación del usuario desde el principio
Prototipar y probar rápidamente
24/02/2007 DAI
Modificar e iterar el diseño tanto como sea necesario
Integrar el diseño de todos los componentes del sistema
Usabilidad
Capacidad para ser usado por humanos fácil y efectivamente
Facilidad (a un nivel de evaluación subjetiva determinado)
Efectividad (a un nivel determinado de rendimiento
24/02/2007 DAI
Efectividad (a un nivel determinado de rendimiento humano)
MITO: LA USABILIDAD ES SENTIDO COMUN
35
Problemas comunes de usabilidad en sistemas gráficos (I)
Menús e iconos ambiguosLenguajes que permiten movimiento uni-direccionalLímites en cuanto a la entrada y manipulación directa
24/02/2007 DAI
manipulación directaLimitaciones para remarcar y seleccionarSecuencias de pasos poco claras
Problemas comunes de usabilidad en sistemas gráficos (II)
Más pasos para manejar el interfaz que para realizar tareasEnlace complejo inter, intra aplicacionesRetroalimentación y confirmación inadecuada
24/02/2007 DAI
inadecuadaFalta de anticipación e inteligenciaMensajes de error, ayuda, etc inadecuados
36
Características adicionales de poca usabilidad en la web
Clutter visualLegibilidad de la informaciónIncomprensibilidad de componentesDistraccionesN ió f
24/02/2007 DAI
Navegación confusaNavegación ineficiente
Características adicionales de poca usabilidad en la web
Operaciones ineficientesScrolling excesivo o ineficienteSobrecarga de informaciónInconsistencia de diseñoI f ió b l t
24/02/2007 DAI
Información obsoletaEmulación del paradigma del papel
37
Algunas “medidas” de usabilidad
Cantidad de preguntas que hacen los usuarios o necesidad de manualQuejas y exabruptos de los usuariosAcciones irrelevantesAspectos a ignorar
24/02/2007 DAI
Aspectos a ignorarCantidad de gente que quiere usar el producto
“Medidas” más objetivas de usabilidad
Efectividad del interfaz
(Re)aprendizaje del interfaz
Fl ibilid d d l i t f
24/02/2007 DAI
Flexibilidad del interfaz
Actitudes de los usuarios