!

!

Tema 2:

Los Sistemas Interactivos I - El ordenador

Diseño de Interfaces de Usuar io

e d i c i ó n 2 013

Miguel Gea (mgea@ugr.e s)Dpt. Lenguajes y S is temas InformáticossGrado en Ingenier ía InformáticaUnivers idad de Granadahttp ://utopo l is.ugr.e s/d iu

I: El ordenadorArquitectura de un Sistema InteractivoDispositivos y tareas de interacciónComponentes interactivos

II: La personaEl Factor Humano

Tema 2. Los Sistemas Interactivos

Tema 2. Los Sistemas Interactivos

• Obtención de datos (del usuario)• Enlace con aplicación• Presentación datos

1. Arquitectura del: Funciones del Interfaz

Subsistema de entrada

Aplicación

Dispositivos físicos

Usu

ario

E

R

E = Entradas del usuario R = Realimentación

• Primera aproximación (1985)• Separación por capas

1. Arquitectura: Modelo de Seeheim

Capa Presentación

Capa Diálogo

Capa Aplicación

Léxico Sintáctico Semántico

Aplicación

Usuario

• Minimizar el efecto de los cambios en el IU sobre la aplicación• Facilitar portabilidad entre diferentes W.S.

Tema 2. Los Sistemas Interactivos

1. Arquitectura: Modelo de Seeheim

Ejemplo: copy c:\doc\fichero1.* d:

<orden> ::= Copiar | …. <copiar> ::= copy <from> <to> <from> ::= [ <disk> : ] [ <Directory> ] < filename> <to> := [ <diskSpec> : ] [ <Directory> ] [< filename> ] …

BNF

Tema 2. Los Sistemas Interactivos

• Aparece con lenguaje Smalltalk• Identifica relaciones entre elementos

1. Arquitectura: Modelo Vista Controlador (MVC)

• Puede haber varias vistas y controladores asociados a un modelo

Modelo

Vista

Controlador

Tema 2. Los Sistemas Interactivos

• Dirigido por aplicación / Usuario

1. Arquitectura: Gestión del Diálogo

Dispositivo Sistema Interactivo Aplicación

Petición

Control

Datos

Main() Dispositivo Sistema Interactivo Aplicación

Evento

Control

add get

Control disposit.

Request (petición) Event (Eventos)

Tema 2. Los Sistemas Interactivos

1. Arquitectura: Eventos

• EventosInformación sobre sucesos Posee información relevante del estado de la aplicación

•Tipos de eventosUsuario

Mouse (botones, movimiento,..)Teclas (pulsación, modificadores) Entrar/Salir componente (foco)Acción (de cada componente)

SistemaVentanas (redimensionamiento, cierre...)De aplicación (insertar nuevos elementos)

Teclas y modificadores

Componente implicado

Información adicional

Coordenadas mouse (x,y)

Instante de tiempo Tipo evento

Evento

Tema 2. Los Sistemas Interactivos

1. Arquitectura del S.I.: Gestión de Eventos

Widgets

Gestión eventos (event loop)

Colas eventos (Sistema)

Colas eventos (dispositivos)

Tema 2. Los Sistemas Interactivos

1. Arquitectura: Gestión de Eventos

proc update { . . . } MOUSE_ENTER

bind .Button_Si <Mouse_enter> { exit(); }

Sistema X Windows (Motif, Tcl/TK)

Ventana 1 A

C

B

MOUSE_ENTER MOUSE_EXIT MOUSE_MOVE MOUSE_DOWN MOUSE_UP ACTION_EVENT

a) Callbacks

Tema 2. Los Sistemas Interactivos

1. Arquitectura: Gestión de Eventos

Ventana 1 A

C

B

Los eventos se pasan a todos los componentesPotencialmente interesados en el mismo

B C

Delivery Ventana1

A

Handle

B C

Ventana1

Java 1.0.2, MacApp, Windows

b) Notificación

Tema 2. Los Sistemas Interactivos

1. Arquitectura: Gestión de Eventos

Ventana 1 A

C

B

Modelo objetos: Java 1.1, Smalltalk, NeXTStep

Receptor Componente fuente

Registrar

Evento

MOUSE_ENTER

Ventana 1

Ventana1.Close();

c) Delegación

Tema 2. Los Sistemas Interactivos

2. Dispositivos y tareas: Configuración WIMP

Configuración base típica (años 80/90)

• Monitor con varias ventanas• Teclado • Ratón/touchpad

• Variaciones• Sobremesa• Portátil• PDA

• Los dispositivos permiten diferentes modos de interacción

Tema 2. Los Sistemas Interactivos

2. Dispositivos y tareas: Análisis

• Diversidad dispositivos• Características

Ergonómicas (adaptación a la persona) Tipo de tareas a realizar -> tareas básicas elementales

Tema 2. Los Sistemas Interactivos

El estudio de los dispositivos está muy relacionado con la tarea con la que se van a usar.

2. Dispositivos: Características ergonómicas

• Absolutos/relativos• Directos/indirectos• Continuos/discretos• Limitados/no limitados

x

y

Funciones medibles• Relación C/D (control/display)

• Ley de Fitts I = log (2D/W)

• Área de trabajo del dispositivo

Dificultad 2 D W

Tema 2. Los Sistemas Interactivos

• Trackball• Joystick• Tableta Gráfica• Touchpad• Lápiz Optico• Voz (micrófono)• Ratón• Teclado• Seguimiento ocular (eye tracking)

Tema 2. Los Sistemas Interactivos2. Dispositivos: Tipos

2. Tareas de interacción básica (BIT)

• Posicionamiento• Valor• Texto • Selección• Arrastre

Dispositivos lógicos

Tareas de interacción básica (BIT)

Tema 2. Los Sistemas Interactivos

• Sistema de coordenadas (2D, 3D, pantalla..)• Resolución • Restricciones (modular/direccional)• Realimentación (espacial/numérica)

TAREA: Posicionamiento

Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)

• Tamaño del conjunto (fijo/variable)• Modos (identificación/ apuntando)

TAREA: SelecciónTema 2. Los Sistemas Interactivos

2. Tareas de interacción básica (BIT)

• Tamaño del texto• Codificación

TAREA: TextoTema 2. Los Sistemas Interactivos

2. Tareas de interacción básica (BIT)

• Tamaño del texto• Codificación• Dispositivos especiales • Gestos / T9

TAREA: Texto

Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)

• Rango • Continuo/discreto

TAREA: ValorTema 2. Los Sistemas Interactivos

2. Tareas de interacción básica (BIT)

• Acción continua • Acciones complejas

TAREA: Arrastre

Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)

Apariencia Individual/jerárquico Palabra (Verbo=acción / Nombre= Objeto)

Comportamiento Click, Click-Click, In/Out

Semántica Acciones Estado

Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)

3. Componentes: Tipos

Contenedores Ventanas Almacén (recipientes datos) Contenedores (organización)

Componentes Botones Texto Deslizadores ...

Tema 2. Los Sistemas Interactivos

En el seminario se verán este tipos de componentes!