Diseño de InterfacesOK

Diseo de Sistemas Orientado a Objetos IV ciclo
Tema : Diseo de Interfaces

Expositor : Prof.Daniel Noriega
1
Prof. D.Noriega A. IES Norbert Wiener
Contenido
1. Conceptos Generales 2. Principios para el Diseo de Interfaces grficas de Usuario (G.U.I.) 3. Utilizacin de Prototipos en la Implementacin de G.U.I. 4. Heursticas para la Evaluacin de IU
2
Conceptos Generales
3
Qu es una G.U.I.?
Un conjunto de elementos hardware y software de una computadora que presentan informacin al usuario y le permiten interactuar con la informacin y con el computador.
4
Qu es una G.U.I.?
Tambin se puede considerar parte de la IU la documentacin (manuales, ayuda, referencias, tutoriales) que acompaan al hardware y al software
5
Puntos de Vista
Existen tres puntos de vista distintos en una IU: El del usuario El del programador El del diseador
6
Modelo de usuario
El usuario tiene su visin personal del sistema, y espera que ste se comporte de una cierta forma.
Realizando tests de usabilidad, entrevistas, o a travs de una realimentacin. Una interfaz debe facilitar el proceso de crear un modelo mental efectivo.
7
Modelo del programador
Es el ms fcil de visualizar, al poderse especificar formalmente. Est constituido por los objetos que manipula el programador, distintos de los del usuario (ej.: el programador llama base de datos a lo que el usuario podra llamar agenda). Estos objetos deben esconderse del usuario.
8
Modelo del diseador
El diseador mezcla las necesidades, ideas, deseos del usuario y los materiales de que dispone el programador para disear un producto de software. Es un intermediario entre ambos .
9
Modelo del diseador
El modelo del diseador describe los objetos que utiliza el usuario, su presentacin al mismo y las tcnicas de interaccin para su manipulacin. Consta de 3 partes: Presentacin Interaccin ,y Relaciones entre los objetos .
10
Modelo del diseador
La presentacin es lo que primero capta la atencin del usuario, pero ms tarde pasa a un segundo plano, y adquiere ms importancia la interaccin con el producto para poder satisfacer sus expectativas.
11
Modelo del diseador
La segunda parte del modelo define las tcnicas de interaccin del usuario, a travs de diversos dispositivos.
12
Modelo del diseador
La tercera es la ms importante, las Relaciones entre objetos es donde el diseador determina la metfora adecuada que encaja con el modelo mental del usuario. .
13
Principios para el diseo de Interfaces Grficas de Usuario
14
Anticipacin
Las aplicaciones deben intentar anticiparse a las necesidades del usuario y no esperar a que el usuario tenga que buscar la informacin, recopilarla o invocar las herramientas que va a utilizar.
15
Anticipacin
Smart Tag
16
Autonoma
La computadora, la GUI y el entorno de trabajo deben estar a disposicin del usuario. Se debe dar al usuario el ambiente flexible para que pueda aprender rpidamente a usar la aplicacin .
17
Autonoma
Ejemplo de ambiente complejo

18
Autonoma
En el ej. anterior se visualiza un diseo incorrecto de interfaz de usuario. La cantidad de opciones propuestas propone un grado de complejidad que no permite que el usuario pueda aprender a utilizar el sistema en forma progresiva.
19
Autonoma
Ejemplo de informacin de estado inadecuada

20
Autonoma
En el ej. anterior se ejemplifica una incorrecta disposicin de componentes en la GUI. El reloj no debe ser colocado en el men del sistema ya que aporta confusin al usuario. Sera ms adecuado colocarlo en la barra de estado del sistema.
21
Percepcin del Color
Las cinco combinaciones ms legibles de caracteres sobre fondos son: 1. Negro sobre amarillo 2. Verde sobre blanco 3. Azul sobre blanco 4. Blanco sobre azul 5. Amarillo sobre negro .
22
Percepcin del Color
Aunque se utilicen convenciones de color en la GUI, se deberan usar otros mecanismos secundarios para proveer la informacin a aquellos usuarios con problemas en la visualizacin de colores.
23
Percepcin del Color
Ejemplo de color e inconsistencia

24
Valores por Defecto
No se debe usar la palabra Defecto en una aplicacin o servicio. Puede reemplazarse por Estndar o Definida por el Usuario, Restaurar Valores Iniciales o algn otro trmino especfico que describa lo que est sucediendo.
25
Valores por Defecto
Los valores por defecto deberan ser opciones inteligentes y sensatas.
Adems, los mismos tienen que ser fciles de modificar

26
Consistencia
Para lograr una mayor consistencia en la GUI se requiere profundizar en diferentes aspectos que estn catalogados en niveles. Se realiza un ordenamiento de mayor a menor consistencia:
27
Consistencia
Interpretacin del comportamiento del usuario: la GUI debe comprender el significado que le atribuye un usuario a cada requerimiento. Ejemplo: mantener el significado de los comandos abreviados (shortcut-keys) definidos por el usuario.
28
Consistencia
Estructuras invisibles: se requiere una definicin clara de las mismas, ya que sino el usuario nunca podra llegar a descubrir su uso. Ejemplo: la ampliacin de ventanas mediante la extensin de sus bordes.
29
Consistencia
Pequeas estructuras visibles: se puede establecer un conjunto de objetos visibles capaces de ser controlados por el usuario, que permitan ahorrar tiempo en la ejecucin de tareas especficas. Ejemplo: cono y/o botn para impresin.
30
Consistencia
Una sola aplicacin o servicio: la IU permite visualizar a la aplicacin o servicio utilizado como un componente nico. Ejemplo: La GUI despliega un nico men, pudiendo adems acceder al mismo mediante comandos abreviados.
31
Consistencia
Un conjunto de aplicaciones o servicios: la GUI visualiza a la aplicacin o servicio utilizado como un conjunto de componentes. Ejemplo: La GUI se presenta como un
conjunto de barras de comandos desplegadas en diferentes lugares de la pantalla, pudiendo ser desactivadas en forma independiente.
32
Consistencia
Consistencia del ambiente: la IU se mantiene en concordancia con el ambiente de trabajo. Ejemplo: La GUI utiliza objetos de control como mens, botones de comandos de manera anloga a otras GUI que se usen en el ambiente de trabajo.
33
Consistencia
Consistencia de la plataforma: La IU es concordante con la plataforma. Ejemplo: La GUI tiene un esquema basado en ventanas, el cual es acorde al manejo del sistema operativo Windows.
34
Consistencia
Ejemplo de consistencia
35
Consistencia
En el ej. anterior puede observarse la mejora en la consistencia de las pequeas estructuras visibles para los sistemas grficos basados en ventanas. La inclusin de la opcin X para cerrar la ventana operacin comunmente utilizada en estas aplicaciones- simplifica la operatividad del mismo.
36
Eficiencia del Usuario
Se debe considerar la productividad del usuario antes que la productividad de la mquina.
37
Si el usuario debe esperar la respuesta del sistema por un perodo prolongado, estas prdidas de tiempo se pueden convertir en prdidas econmicas para la organizacin. .
38

Ejemplo de definicin incorrecta de botones de accin
En la Figura se demuestra como una incorrecta definicin de las palabras clave de las etiquetas de los botones de comando puede confundir al usuario
39
Los botones OK y Apply aparentan realizar el mismo proceso. Esto puede solucionarse suprimiendo uno de ellos si realizan la misma tarea o etiquetndolos con los nombres de los procesos especficos que ejecutan
40
Ley de Fitt
El tiempo para alcanzar un objetivo es una funcin de la distancia y tamao del objetivo. Es por ello, que es conveniente usar objetos grandes para las funciones importantes.
41
Ley de Fitt
Ejemplo de percepcin visual
42
Ley de Fitt
En la Figura se puede apreciar la relacin entre los elementos de diseo de pantalla y su percepcin visual.
El elemento visual que se percibe en este caso es 1 (EL FONDO)

43
Ley de Fitt
Los elementos visuales que se percibe en este caso son: la lnea, lo que est encima y lo que est debajo
44
Ley de Fitt
Los elementos visuales que se percibe en este caso son: el espacio fuera del recuadro, el recuadro, la lnea y el 45 espacio encima y debajo de sta.
Ley de Fitt
Los elementos visuales que se percibe en este caso se eleva a 35, siguiendo el mismo criterio..
46
Ley de Fitt
Conclusin: Cada elemento nuevo que se aade influye ms de lo que se piensa en el usuario.
47
Interfaces Explorables
Siempre que sea posible se debe permitir que el usuario pueda salir gilmente de la GUI, dejando una marca del estado de avance de su trabajo, para que pueda continuarlo en otra oportunidad..
48
Para aquellos usuarios que sean noveles en el uso de la aplicacin, se deber proveer de guas para realizar tareas que no sean habituales.
49
Incorporar elementos visuales estables que permitan, no solamente un desplazamiento rpido a ciertos puntos del trabajo que est realizando, sino tambin un sentido de casa o punto de partida .
50
La GUI debe poder realizar la inversa de cualquier accin que pueda llegar a ser de riesgo, de esta forma se apoya al usuario a explorar el sistema sin temores. Siempre se debe contar con un comando Deshacer.
51
Objetos de Interfaz Humana
No son necesariamente los objetos que se encuentran en los sistemas orientados a objetos.
Estos pueden ser vistos, escuchados, tocados o percibidos de alguna forma.

52
Objetos de Interfaz Humana
Deben ser entendibles, consistentes y estables .
53
Uso de Metforas
Las buenas metforas crean figuras mentales fciles de recordar. La GUI puede contener objetos asociados al modelo conceptual en forma visual, con sonido u otra caracterstica perceptible por el usuario que ayude a simplificar el uso del sistema.
54
Uso de Metforas
En el segundo caso, la metfora de la agenda es utilizada correctamente para la implementacin de una agenda electrnica.55
Uso de Metforas
En el primer caso, se utiliza incorrectamente la metfora de una cmara de video para representar el procesamiento de un documento por una impresora. Se puede observar que el botn << carece de sentido, ya que no se puede volver atrs un trabajo que ya ha sido 56 impreso.
Curva de Aprendizaje
El aprendizaje de un producto y su usabilidad no son mutuamente excluyentes. El ideal es que la curva de aprendizaje sea nula, y que el usuario principiante pueda alcanzar el dominio total de la aplicacin sin esfuerzo.
57
Reduccin de Latencia
Siempre que sea posible, el uso de tramas (multi-threading) permite colocar la latencia en segundo plano (background). Las tcnicas de trabajo multitarea posibilitan el trabajo ininterrumpido del usuario, realizando las tareas de transmisin y computacin de datos en segundo plano.
58
Proteccin del Trabajo
Se debe poder asegurar que el usuario nunca pierda su trabajo, ya sea por error de su parte, problemas de transmisin de datos, de energa, o alguna otra razn inevitable.
59
Auditora del Sistema
Se debe conocer: hora de acceso al sistema, ubicacin del usuario en el sistema y lugares a los que ha accedido, entre otros. Adems, el usuario debera poder salir del sistema y al volver a ingresar continuar trabajando en lugar dnde haba dejado.
60
Legibilidad
Para que la IU favorezca la usabilidad del sistema de software, la informacin que se exhiba en ella debe ser fcil de ubicar y leer.
61
Legibilidad
El texto que aparezca en la GUI debera tener un alto contraste, se debe utilizar combinaciones de colores como el texto en negro sobre fondo blanco o amarillo suave..
62
Legibilidad
El tamao de las fuentes tiene que ser lo suficientemente grande como para poder ser ledo en monitores estndar. Es importante hacer clara la presentacin visual (colocacin/agrupacin de objetos, evitar la presentacin de excesiva informacin)
63
Legibilidad
Figura 11. Ejemplo de legibilidad

64
Legibilidad
La figura de la izquierda, combina una disposicin asimtrica de la informacin con un conjunto de colores que no facilita la lectura. La figura de la derecha realiza la presentacin de la informacin utilizando una gama de colores homognea y una alineacin del texto que favorece a la legibilidad del mismo.
65
Interfaces Visibles
El uso de Internet, ha favorecido la implementacin de interfaces invisibles. Esto significa que el usuario siempre ve una pgina especfica, pero nunca puede conocer la totalidad del espacio de pginas de Internet.
66
Interfaces Visibles
La navegacin en las aplicaciones debe ser reducida a la mnima expresin. El usuario debe sentir que se mantiene en un nico lugar y que el que va variando es su trabajo.
67

Diseño de InterfacesOK

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Diseño de InterfacesOK

Enviado por

Direitos autorais:

Formatos disponíveis

Diseo de Sistemas Orientado a Objetos IV ciclo

Tema : Diseo de Interfaces

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Modelo del programador

Prof. D.Noriega A. IES Norbert Wiener

Modelo del diseador

Prof. D.Noriega A. IES Norbert Wiener

Modelo del diseador

Prof. D.Noriega A. IES Norbert Wiener

Modelo del diseador

Prof. D.Noriega A. IES Norbert Wiener

Modelo del diseador

Modelo del diseador

Principios para el diseo de Interfaces Grficas de Usuario

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Ejemplo de ambiente complejo

Prof. D.Noriega A. IES Norbert Wiener

Ejemplo de informacin de estado inadecuada

Prof. D.Noriega A. IES Norbert Wiener

Percepcin del Color

Prof. D.Noriega A. IES Norbert Wiener

Percepcin del Color

Prof. D.Noriega A. IES Norbert Wiener

Percepcin del Color

Ejemplo de color e inconsistencia

Valores por Defecto

Prof. D.Noriega A. IES Norbert Wiener

Valores por Defecto

Los valores por defecto deberan ser opciones inteligentes y sensatas.

Adems, los mismos tienen que ser fciles de modificar

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Eficiencia del Usuario

Se debe considerar la productividad del usuario antes que la productividad de la mquina.

Eficiencia del Usuario

Prof. D.Noriega A. IES Norbert Wiener

Eficiencia del Usuario

Eficiencia del Usuario

Prof. D.Noriega A. IES Norbert Wiener

Ejemplo de percepcin visual

Ejemplo de percepcin visual

El elemento visual que se percibe en este caso es 1 (EL FONDO)

Ejemplo de percepcin visual

Ejemplo de percepcin visual

Ejemplo de percepcin visual

Ejemplo de percepcin visual

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Prof. D.Noriega A. IES Norbert Wiener

Objetos de Interfaz Humana

Estos pueden ser vistos, escuchados, tocados o percibidos de alguna forma.

Prof. D.Noriega A. IES Norbert Wiener

Objetos de Interfaz Humana

Deben ser entendibles, consistentes y estables .