DESARROLLO DE INTERFACES DE USUARIO

1
DESARROLLO DE INTERFACES DE USUARIO

• TEMA1
• INTRODUCCIÓN

2
INTRODUCCIÓN

• SOBRE QUE TRATA ESTE LIBRO
• Principios de la informática
• Tiempos de cambio
• El legado de los investigadores
• Una cuestion de control

3
INTRODUCCIÓN

• EL MARCO DEL CONTEXTO
• Gráficos
• Factores humanos y de usabilidad
• SW orientado a objetos
• objetos y clases
• herencia
• clases abstractas
• Herramientas comerciales

4
INTRODUCCIÓN

• UNA VISTA AL INTERFACE DE USUARIO
• El círculo interactivo
• ciclo de evaluación
• ciclo de ejecución
• modelo de suficiencia
• Los puertos interactivos
• límites del espacio de representación
• límites de los focos de atención

5
INTRODUCCIÓN

• UNA VISTA AL INTERFACE DE USUARIO
• Proceso del diseño de la interface
• analizando la tarea
• diseño del modelo funcional
• diseño de presentaciones
• diseño de los puertos interactivos
• diseñando las acciones
• RESUMEN

6
SOBRE QUE TRATA ESTE LIBRO

• PRINCIPIOS DE LA INFORMÁTICA
• Al principio de los 70
• Los ordenadores eran
• grandísimos
• lentos
• extremadamente caros
• muy delicados
• y complejos

7
SOBRE QUE TRATA ESTE LIBRO

• PRINCIPIOS DE LA INFORMÁTICA
• La programación
• Se realizaba por lotes
• Mediante tarjetas perforadas
• Out-line

8
SOBRE QUE TRATA ESTE LIBRO

• ÉPOCA DE CAMBIO
• El futuro era oscuro para la humanidad
• Supeditada a las máquinas debido a su alto costo
• Desarrollo de los micros y del silicio
• Se abarata el HW
• Se aumenta el rendimiento del HW
• Mayor importancia del personal sobre las máquinas

9
SOBRE QUE TRATA ESTE LIBRO

• EL LEGADO DE LOS INVESTIGADORES
• Los tiempos cambian
• Las tarjetas ya no son importantes y si el
  teclado y el monitor
• Los ordenadores ya no son caros objetos de
  laboratorio

10
SOBRE QUE TRATA ESTE LIBRO

• EL LEGADO DE LOS INVESTIGADORES
• Se busca
• Sobrepasar la capacidad ofrecida por los sistemas
• Aprovechar al máximo la capacidad que se nos
  ofrece
• Este es un problema no de Hw, ya que se esta
  doblando cada año la capacidad de las máquinas
• Es cuestión del SW principalmente

11
SOBRE QUE TRATA ESTE LIBRO

• EL LEGADO DE LOS INVESTIGADORES
• El problema de la secuencialidad
• Turbo Pascal intento de solución
• combinación de un editor con un compilador
• eliminación de accesos al disco
• aumento de la velocidad y usabilidad
• Pero en el fondo conservaba la secuencialidad del
  primer compilador de FORTRAN
• Usuario-gtinformación-gtordenador-gtresultado

12
SOBRE QUE TRATA ESTE LIBRO

• UNA CUESTIÓN DE CONTROL
• Muchos de los interfaces de usuario siguen este
  modelo por lotes
• La diferencia reside en
• La cantidad de tiempo que la máquina tiene el
  control
• El juego de instrucciones es variado y amplio
• El control dominante lo tiene el usuario y no el
  algoritmo

13
EL MARCO DEL CONTEXTO

• GRÁFICOS
• El interface de usuario es construido alrededor
  de los gráficos y del sonido
• El tema central de los gráficos no lo centraremos
  en la renderización de imágenes fotorealistas,
  sino en la interface de usuario
• Estructura de control, actualización,
  comunicación e información

14
EL MARCO DEL CONTEXTO

• GRÁFICOS
• Nos centraremos en
• primitivas básicas de dibujo como líneas y
  polígonos
• dibujo de texto incluidas las fuentes y fuentes
  internacionales
• recortes de dibujos antiguos en 2D por partes
• modelos de colores
• transformaciones geométricas en 2D
• mecanismos de recogida de datos interactiva
• técnica de ventanas

15
EL MARCO DEL CONTEXTO

• FACTORES HUMANOS Y DE USABILIDAD
• Una cuestión importante es como el usuario
  percibe el SW
• Los temas en los que profundizaremos serán
• Principales factores humanos básicos de
  visualización y mecanismos de recogida de datos.
• Cuestiones generales de la memoria y percepción
  humana.
• Técnicas de evaluación de la usabilidad.

16
EL MARCO DEL CONTEXTO

• FACTORES HUMANOS Y DE USABILIDAD
• Construir SW no es solo programar
• Los programadores necesitan de otros
  profesionales que conozcan a los usuarios
• El paradigma más utilizado es
• gtNecesidades y problemas identificados
• gtSolución
• gtPrototipo
• gtEvaluación con el usuario, y vuelta a empezar

17
EL MARCO DEL CONTEXTO

• FACTORES HUMANOS Y DE USABILIDAD
• Este es un bucle circular, que se suele
  considerar infinito
• Debe seguirse investigando y actualizando
  mientras el programa siga en mercado

18
EL MARCO DEL CONTEXTO

• SW ORIENTADO A OBJETOS
• Simula (60), Smalltalk, Java, C...
• Surge a partir del interface de usuario
• En la interface de usuario, un objeto podría ser
  un icono
• Tendría independencia del resto
• Interactivo
• Recibe y envía mensajes

19
EL MARCO DEL CONTEXTO

• SW ORIENTADO A OBJETOS
• Objeto
• Entidad singular que pertenece a una clase
• Consta de campos donde se guarda información
• Clase
• Comportamiento del objeto
• Define el tipo de métodos aplicados a sus objetos

20
EL MARCO DEL CONTEXTO

• SW ORIENTADO A OBJETOS
• Métodos
• El conjunto de métodos define el comportamiento
  de la clase
• Nombre y cero o más argumentos
• Argumentos
• Tipo

21
EL MARCO DEL CONTEXTO

• SW ORIENTADO A OBJETOS
• Lo más complicado es conseguir la actualización
  mientras el objeto está cambiando
• Por ejemplo podemos crear una clase botón
• Dentro de esta 3 botones Negrita, Cursiva,
  Subrayado
• Cada uno de estos con un método como por ejemplo
  Poner_en_Cursiva
• Que recibiría un argumento del tipo char, o de
  tipo cadena de caracteres y otro del tipo
  botón_seleccionado

22
EL MARCO DEL CONTEXTO

• HERENCIA
• Es un factor importante en los lenguajes
  orientados a objetos
• Si una clase hereda de otra esta clase tendrá
  todos los métodos y campos de su superclase
• Cualquier cosa hecha por un objeto de una clase
  puede ser hecha por objetos de sus subclases

23
EL MARCO DEL CONTEXTO

• HERENCIA
• Existen muchos tipos de herencia
• Múltiple o Simple
• Las subclases puedan definir nuevos campos
• Subclases puedan definir nuevos métodos
• Que las subclases puedan redefinir métodos de
  clases superiores

24
EL MARCO DEL CONTEXTO

• CLASES ABSTRACTAS
• Una de las ventajas de la herencia es la
  reutilización de código, aunque no la única
• Gracias a la herencia existe una gran
  permisividad con respecto a la variedad de
  objetos
• Un objeto no tiene porque preocuparse por si es
  de un tipo u otro, sino solo de si tiene los
  campos y métodos correctos

25
EL MARCO DEL CONTEXTO

• CLASES ABSTRACTAS
• Por ejemplo
• Una clase abstracta alumno puede tener muchas
  subclases
• alum_primer_año, alum_último_año,
  alum_extranjero...
• Cada uno con sus campos adicionales además de los
  de alumno y los métodos añadidos o modificados
• Pero el sistema de registro no necesita saber si
  es un tipo particular de alumno, sino solo que es
  un alumno

26
EL MARCO DEL CONTEXTO

• HERRAMIENTAS COMERCIALES
• Como el marco de los interfaces ha crecido mucho,
  tambien lo han hecho las herramientas para
  manejar estos interfaces y facilitar su uso
• Nuestra meta en este libro va a ser mostrar un
  marco de aprendizaje y manejo sobre la marcha con
  ejemplos de herramientas como Macintosh,
  Microsoft Windows, X Windows/Motif, NeXTSTEP y
  NeWS, entre otros

27
UNA VISTA AL INTERFACE DE USUARIO

• EL CIRCULO INTERACTIVO
• Círculo interactivo es la interrelación que
  existe entre el usuario, el interface y el modelo
• El usuario emite entradas al modelo a través del
  interface que son computadas y respondidas de
  nuevo a través del interface, rápidamente
• El modelo se debe ajustar a los cambios
  realizados por el usuario (a su gusto y
  necesidades)

28
UNA VISTA AL INTERFACE DE USUARIO

• CICLO DE EVALUACIÓN
• Don Norman identificó el ciclo de evaluación y el
  ciclo de ejecución
• Consiste en que el usuario ve y juzga si lo que
  ve es lo que esperaba que sucediese
• Varios factores pueden influenciar esto
• factores ergonómicos
• falta de consistencia en el texto
• bajo contraste en la información importante
• Items agrupados incorrectamente

29
UNA VISTA AL INTERFACE DE USUARIO

• CICLO DE EVALUACIÓN
• Son importantes las líneas de tiempo
• La información debe aparecer en un tiempo
  aceptable
• La información debe ser evaluada
  sin análisis tediosos
• La información sobre estados relevantes debe
  reflejarse en pantalla

30
UNA VISTA AL INTERFACE DE USUARIO

• CICLO DE EJECUCIÓN
• Sucede cuando el usuario no conoce la secuencia
  de sucesos para un objetivo
• Factores que lo producen
• Los iconos no son representativos
• Una pobre retroalimentación puede producir que un
  camino correcto no lo parezca
• Usuario no entienda la secuencia de entradas que
  producen un resultado

31
UNA VISTA AL INTERFACE DE USUARIO

• MODELO DE SUFICIENCIA
• El usuario quiere que el programa se parezca a lo
  que el tiene en mente
• Quiere que haga lo que el quiere
• Hay que examinar si el modelo de nuestro programa
  es suficiente

32
UNA VISTA AL INTERFACE DE USUARIO

• LOS PUERTOS INTERACTIVOS
• LÍMITE DE ESPACIO DE REPRESENTACIÓN
• La capacidad actual es de 640x480 pixeles
• Solo los sistemas con múltiples monitores
  soportan el gran mundo interactivo de 1200x1200
  pixeles
• Hay que intentar decrementar tanto el ciclo de
  ejecución como el de evaluación
• Conseguir un termino medio entre el enfoque
  global y un enfoque más centrado en algo en
  particular

33
UNA VISTA AL INTERFACE DE USUARIO

• LOS PUERTOS INTERACTIVOS
• LIMITES DE LOS FOCOS DE ATENCIÓN DEL USUARIO
• El foco de atención del usuario es muy
  pequeño
• El usuario debe poder cambiar su foco
  de atención sin problemas, sin cambios
  bruscos
• El usuario debe recibir la información de forma
  cómoda y agradable

34
UNA VISTA AL INTERFACE DE USUARIO

• PROCESO DEL DISEÑO DE LA INTERFACE
• El proceso para la creación de una nueva
  interface no es un proceso lineal
• Este proceso es un desarrollo interactivo
• Se deben evaluar las necesidades
• Corregir los problemas que surjan en el diseño
• Para ello iremos por partes

35
UNA VISTA AL INTERFACE DE USUARIO

• ANALIZANDO LA TAREA
• El primer paso consiste en analizar lo que el
  usuario necesita poder hacer y como le gustaría
  hacerlo
• El sistema tiene que ayudar al usuario a realizar
  las tareas que le interesan
• Debe contener una información detallada de que va
  a poder hacer y como lo tiene que hacer, así como
  de la terminología y símbolos

36
UNA VISTA AL INTERFACE DE USUARIO

• DISEÑO DEL MODELO FUNCIONAL
• Debemos diseñar un modelo que facilite al usuario
  conseguir estos objetivos
• Tiene que haber un término medio entre los
  gráficos y la funcionalidad del interface
• Se debe permitir que el usuario cambie
  información sobre el objeto, y explicar como debe
  hacerlo

37
UNA VISTA AL INTERFACE DE USUARIO

• DISEÑO DEL MODELO FUNCIONAL
• El modelo funcional debe representar la
  complejidad de las tareas a realizar
• Conforme aumenta la funcionalidad de un programa
  disminulle la capacidad de entendimiento del
  usuario
• Debemos intentar aunar conceptos de forma que
  tareas distintas sean representadas de la misma
  forma

38
UNA VISTA AL INTERFACE DE USUARIO

• DISEÑO DEL MODELO FUNCIONAL
• La simplificación sin embargo no debe olvidar la
  tarea que el usuario debe realizar
• El modelo es tan simple que no puede ser
  implementado y por lo tanto probado
• El único medio de resolver la cuestión de
  complejidad frente a elegancia es evaluar el
  modelo con el usuario repetidas veces

39
UNA VISTA AL INTERFACE DE USUARIO

• DISEÑO DE PRESENTACIONES
• La presentación visual es crítica para reducir el
  ciclo de evaluación
• Se deben diferenciar claramente los datos
  meramente informativos de los que el usuario
  puede manejar
• Diferenciación entre diferentes tipos de objetos
• La percepción del usuario
• Cantidad de vistas distintas de un objeto

40
UNA VISTA AL INTERFACE DE USUARIO

• DISEÑO DE LOS PUERTOS INTERACTIVOS
• Diseñar como organizar la información para que se
  mantenga en la pantalla
• Desplazamiento de los objetos y el uso de
  ventanas
• Las acciones que puede realizar,mediante menús
• Si tu puedes ver un objeto, puedes usarlo, pero
  si no lo puedes ver, no podrá ser usado

41
UNA VISTA AL INTERFACE DE USUARIO

• DISEÑANDO LAS ACCIONES
• Las técnicas para la manipulación de los objetos
• Presentación estática
• Presentación dinámica (más real)
• También es importante la selección y uso de
  dispositivos interactivos de entrada

42
RESUMEN

• SISTEMA INTERACTIVO
• Representación de un modelo de aplicación
• Interpretación de las entradas del modelo
• El modelo debe reaccionar acorde con las entradas
  y variar el modelo si así se requiere
• MODELO BASADO EN LAS NECESIDADES DEL USUARIO
  (USABILIDAD)
• MODELO DE FÁCIL ENTENDIMIENTO Y CON POSIBILIDAD
  DE CAMBIO