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

24

27/02/2006 DAI

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– Hardware y software

Extranets– Conjunto especial de páginas web Intranet accesibles

desde el exterior