Upload
jose-chero-prado
View
19
Download
2
Embed Size (px)
Citation preview
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 1
Diseño de interfaz de usuario
Diseño de interfaces gráficas para sistemas de software.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 2
Objetivos Sugerir algunos principios generales de diseño para
desarrollar interfaces gráficas de usuario. Describir la manipulación directa de dichas interfaces. Disertación de los factores a considerar para el diseño
de presentaciones. Descripción del soporte de usuario que esta integrado
en la interfaz de usuario. Introducción a la versatilidad de los atributos y
aproximación de sistemas hacia sistemas de evaluación.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 3
Tópicos cubiertos
Principios de Diseño. Interacción (Sistema-Usuario). Presentación de la información correspondiente. Guía de Usuario. Evaluación de la Interfaz.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 4
Interfaz de usuario
Usuarios de sistema frecuentemente juzgan un sistema por su interfaz.
Un diseño de interfaz pobre puede provocar que el usuario cometa errores catastróficos.
El diseño de una interfaz de usuario pobre es la razón por la cual muchos sistemas nunca son usados.
El objetivo del presente capitulo es el diseño de interfaces gráficas de usuario.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 5
Interfaces gráficas de usuario
Interfaces de usuario que se soportan en Windows, iconos representación de entidades, desplegado de menús y punteros.
Llamadas previas interfaces WIMP –referidas en la actualidad de manera general con la acepción (GUIs).
La forma estándar de una interfaz para estaciones de trabajo y computadoras personales de alta potencia.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 6
Características de las GUI
Characteristic DescriptionWindows Multiple windows allow different information to be
displayed simultaneously on the user’s screen.Icons Icons different types of information. On some systems,
icons represent files; on others, icons representprocesses.
Menus Commands are selected from a menu rather than typedin a command language.
Pointing A pointing device such as a mouse is used for selectingchoices from a menu or indicating items of interest in awindow.
Graphics Graphical elements can be mixed with text on the samedisplay.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 7
Ventajas de las GUI Son fáciles de aprender y usar.
• Usuarios sin experiencia pueden aprender el uso del sistema rápidamente.
El usuario puede cambiar rápidamente desde una proceso a otro y puede interactuar con diferentes aplicaciones a la vez.• La información aparece visible en su propia ventana cuando la
atención cambia.
Rápido, interacción de pantalla completa es posible con acceso inmediato a cualquier cosa sobre la pantalla.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 8
Principios de Diseño.
El diseño de interfaces de Usuario toma en cuenta las necesidades, experiencia y capacidades de los usuarios del sistema.
Los usuarios deberían involucrarse en el proceso de diseño y el diseño de interfaces de usuario deben refinarse hacia rápidos prototipos.
Existen factores cognoscitivos, como el tamaño de pequeños términos de memoria, que el diseño la interfaz de usuario deben tomarse en cuenta.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 9
Principios de Diseño de la interfaz de Usuario
Principle DescriptionUser familiarity The interface should use terms and concepts which are
drawn from the experience of the anticipated class ofuser.
Consistency The interface should be consistent in that comparableoperations should be activated in the same way.
Minimal surprise Users should never be surprised by the behaviour of asystem.
Recoverability The interface should include mechanisms to allow usersto recover from their errors.
User guidance The interface should incorporate some form of context -sensitive user guidance and assistance.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 10
Principios de Diseño
La interfaz debe basarse en los términos orientados de usuario y conceptos sobre los conceptos informáticos.• Por ejemplo, un sistema de oficinas debe utilizar conceptos
como cartas, documentos, folders etc. Así como directorios, identificadores de archivos, etc.
El sistema deberá mostrar un nivel apropiado de consistencia. • Los comandos y los menús deban mantener el mismo formato,
las puntuaciones de los comandos deben ser similares,etc.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 11
Principios de Diseño El sistema no debe tomar por sorpresa al usuario.
• Si un comando opera en una forma conocida, el usuario debe ser capaz de predecir la operación de un comando parecido.
El sistema debe proveer alguna ayuda cada vez que el usuario cometa un error y dar la posibilidad a esté corregir el error antes de ejecutarlo. • Esté debe incluir comandos para de para deshacer acciones,
acciones de confirmación o destrucción, tal como destrucción de archivos, etc.
Las guías de usuario deben fungir como suplementos.• Sistemas de ayuda, manuales de línea,etc.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 12
Interacción Usuario-Sistema
Dos problemas deben ser direccionados en el diseño de sistemas interactivos.• ¿Como es que la información es proporcionada por el usuario al
sistema?
• ¿Cómo debe proporcionar la información el sistema estando presente el usuario?
La interacción y presentación de información debe integrarse a través de un cuadro de trabajo coherente de tal forma que la interfaz de usuario se adapte a los fines requeridos.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 13
Manipulación directa. Una manipulación directa de la interface presenta al
usuario un espacio donde puede visualizar su información, la cual es modificada a través de una acción directa. Por ejemplo nombres en un campo determinado cambian al escribir un nuevo nombre sobre ellos.
Una forma característica de una interface es un ejemplo simple de una manipulación directa de la interface.
Las (GUI “Interfaz gráfica de usuario”) proveen una manipulación directa. Por ejemplo los archivos pueden borrarse moviendo los iconos hacia el icono de un bote de basura disponible en el entorno del sistema.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 14
Interfaz formato básico.
Title
Author
Publisher
Edition
Classification
Date ofpurchase
ISBN
Price
Publicationdate
Number ofcopies
Loanstatus
Orderstatus
NEW BOOK
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 15
Ventajas de la manipulación directa
El usuario siente el control de su equipo de computo se siente menos intimidado por él.
El usuario aprende en un tiempo relativamente corto.
Los usuarios obtienen casi inmediatamente una retroalimentación de sus múltiples interacciones con el equipo sean buenas o no, y es capaz de reconocerlas y corregirlas casi instantáneamente.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 16
Problemas de la manipulación directa
La derivación de la información apropiada para manipular el modelo puede ser demasiado difícil.
Permitir que los usuarios tengan demasiada información del entorno, plantea la cuestión de ¿Qué tan fácil debe ser la navegación a través del sistema en cuestión?
Las interfaces de manipulación directa pueden ser tan complejas como para ser programadas y por tanto exigir mayores requerimientos del sistema en cuestión.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 17
Modelos de interfaz Áreas de trabajo metamorfas.
• El modelo de una interfaz es una especie de área de trabajo con iconos que representan archivos , gabinetes, etc.
Control de panel Metamorfo. • El modelo de la interfaz es un panel de control físico con una
interfaz de entidades incluida:» Botones» Interruptores» Menús» Luces» Desplegados» Desplazamientos laterales
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 18
Interfaz de un panel de control
Title
Method
Type
Selection
NODE LINKS FONT LABEL EDIT
JSD. example
JSD
Network
Process
Units
Reduce
cm
Full
OUIT
Grid Busy
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 19
Menús de sistemas Los usuarios hacen una selección de una lista de
posibilidades mostradas por ellos a través del sistema.
La selección puede ser hecha apuntando y seleccionando con un “Mouse”, usando las llaves del cursor o simplemente tecleando el nombre de su elección.
Tal vez sea necesario el uso de una terminal más amigable tal como un monitor de pantalla capacitiva “Touchscreen”.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 20
Ventajas de los menús de sistema
Los usuarios no necesitan recordar nombres de comandos como siempre son presentados como una lista de comandos validos.
El esfuerzo de escribir secuencias es mínimo. Los errores de usuario son atrapados por la
interface. La dependencia del contexto de ayuda puede
proveerse. El contexto de usuario está indicado por la selección del menú actual.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 21
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Problemas con los menús del sistema
Acciones que involucran conjunciones lógicas (AND) o disyunciones (OR) son difíciles de representar.
Los menús del sistema son la mejor manera de presentar un número pequeño de opciones. Si existen muchas opciones, algunos menús estructuralmente fáciles deben usarse.
Los usuarios experimentados encuentran menús más abajo que el lenguaje emplado para los comandos.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 22
Estructura de los Menús Menús desplazables.
• Cuando una opción no se despliega, el menú puede desplasarze con el fin de mostrar más opciones. Lo anterior no es práctico si existe un número muy grande de opciones.
Menús Jerárquicos.• Los menús se organizan de forma jerárquica. Seleccionando un visor
que puede desplegar varios submenús.
Menús móviles.• La selección de un menú provoca que se muestre otro menú.
Panel de control Asociados.• Cuando un menú es seleccionado, un panel de control se abre enfrente
del anterior revelando diversas opciones.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 23
Menús Móviles
TimesHelveticaPala tinoBookfaceFrutigerGothicSymbol
9 Point10 Point12 Point14 Point18 Point24 Point36 Point48 Point
PlainBoldItalic
UnderlineShadowShadow
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 24
Interfaces de comandos El usuario puede acceder comandos con el fin de
proveer instrucciones al sistema. Por ejemplo UNIX. Puede ser implementado usando terminales menos
costosas. Fácil de procesar empleando técnicas de compilación. Comandos de complejidad arbitraria pueden ser
creados a través del comando de combinación. Interfaces concisas requieren mínima escritura para ser
creadas.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 25
Problemas con las interfaces de comandos
Los usuarios tiene que aprender y recordar un lenguaje de comandos. Las interfaces de comando son además inaccesibles para usuarios ocasionales.
Los usuarios cometen errores de comandos. Una detección y recuperación del sistema es necesaria.
La interacción del sistema es por medio de un teclado habilitado
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 26
Lenguajes de comando Siempre es preferible para usuarios experimentados
debido a que ellos tienen una interacción más rápida con el sistema.
Lo anterior no se aplica para usuarios casuales o inexpertos.
Tal vez establecido como una alternativa para un menú de comandos (Secuencias cortas de teclado). En la mayoría de los casos, una interfaz de lenguaje de comandos y una interfaz de menú basado están soportadas al mismo tiempo.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 27
Interfaces de Usuario Múltiple
Application softwaresystem
GUImanager
Graphical userinterface
Commandlanguage
interprerter
Commandlanguageinterface
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 28
Presentación de la información
Información Estática.• Inicializando al principio de la sesión. Está realmente no
cambia durante la sesión.
• Puede ser numérica o texto.
Información Dinámica.• Cambios durante la sesión se actualizan automáticamente al
momento de establecer comunicación con el sistema de usuario.
• Puede ser numérica o texto.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 29
InFactores de Visualización de información.
Factores de Visualización de información.
Factores de visualización de la información
¿Si el usuario está interesado en una información precisa o relación entre datos’?
¿Qué tan pronto los valores que representan la información deben cambiar?
¿Debe el cambio indicarse inmediatamente? ¿Debe el usuario tomar algunas acciones en respuesta al
cambio? ¿Existe alguna Interface de Manipulación Directa? ¿La información es textual o numérica? ¿Son los valores relativamente importantes?
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 30
Presentación de la Información
Information tobe displayed
Presentationsoftware
Display
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 31
Vistas de información gráfica o textual
0
1000
2000
3000
4000
Jan Feb Mar April May June
Jan2842
Feb2851
Mar3164
April2789
May1273
June2835
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 32
Presentación Analógica vs Digital
Presentación Digital.• Compacto-Toma un poco más de espacio en el monitor.
• Valores precisos pueden ser comunicados.
Presentación Analógica.• Fácil de acceder con una calidad de impresión de mayor
calidad.
• Posibilidad de mostrar valores relativos.
• Fácil de visualizar de manera genial datos numericos.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 33
Visualización de la información dinámica
1
3
4 20 10 20
Dial with needle Pie chart Thermometer Horizontal bar
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 34
Visualización de valores relativos
0 100 200 300 400 0 25 50 75 100
Pressure Temperature
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 35
Texto resultado
The filename you have chosen has beenused. Please choose another name
Ch. 17. User interface design!
OK Cancel
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 36
Visualización de los datos
Concierne a las técnicas para visualizar grandes montos de información.
La visualización puede revelar la relación entre las entidades y entre los datos.
Los tipos de visualizaciones posibles son:• Información del clima obtenida de fuentes numéricas
• El estado de una red telefónica.
• Un modelo de una molécula en 3 dimensiones
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 37
Desplegado de colores
Es la adición extra de colores hacia una interfaz que puede llevar al usuario a entender las estructuras complejas de información.
Pueden ser usados en eventos excepcionales. Los errores comunes en el uso de los colores de
los diseños incluyen:• El uso de colores para el significado de comunicación.
• El sobreuso de colores para el desplegado.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 38
Líneas guías en el uso de colores No se pueden usar muchos colores El codificado de los colores debe soportar el uso de
tareas. Para el control todos los usuarios deben codificar color. Diseño de los monocromáticos, hay que añadirles color. Codificación de colores debe ser consistente. Evitar el parpadeo de los colores. La oportunidad de usar color. Para el despliegue de color debe permitir que sea de muy
baja resolución.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 39
Guía del usuario El sistema de guía del usuario es integrado con la
Interfaz de usuario, cuando se necesita que la información del sistema realice algún tipo de error.
Guía cubierta del usuario:• Los mensajes del sistema, incluyen mensajes de error.
• Proveer información al usuario.
• Ayuda en línea.
Los mensajes de ayuda en el sistema pueden estar integrados.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 40
Sistema de ayuda y mensajes
Messagepresentation
system
Error messagetexts
Helpframes
Error messagesystem
Helpinterface
Application
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 41
Diseño de mensajes de errores
El diseño de mensajes de error es importantemente critica. Los mensajes de error pobre puede significar que un usuario prefiera rechazar que aceptar el sistema.
Los mensajes deberían ser amables. Concisos., consistentes y constructivos.
El fondo que el usuario debe experimentar debería ser un factor determinante en el diseño de mensajes.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 42
Diseño de factores en un análisis de oración
Context The user guidance system should be aware of what the user isdoing and should adjust the output message to the currentcontext.
Experience As users become familiar with a system they become irritatedby long, ‘meaningful’ messages. However, beginners find itdifficult to understand short terse statements of the problem.The user guidance system should provide both types of messageand allow the user to control message conciseness.
Skill level Messages should be tailored to the user’s skills as well as theirexperience. Messages for the different classes of user may beexpressed in different ways depending on the terminology whichis familiar to the reader.
Style Messages should be positive rather than negative. They shoulduse the active rather than the passive mode of address. Theyshould never be insulting or try to be funny.
Culture Wherever possible, the designer of messages should be familiarwith the culture of the country where the system is sold. Thereare distinct cultural differences between Europe, Asia andAmerica. A suitable message for one culture might beunacceptable in another.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 43
Cuidado al introducir un nombre
Please type the patient name in the bo x then click on OK
Bates , J.
OK Cancel
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 44
Respuestas buenas y malas de errores
Error #27
Invalid patient id?
Patient J . Bates is not kno wn to the system
Click on Patients f or a list of kno wn patientsClick on Retr y to re-input a patient nameClick on Help f or more information
Patients
Help
Retr y
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 45
Diseño del sistema de ayuda
Ayuda? significa ‘ayuda, yo quiero información” Ayuda! significa “ayuda,yo estoy en problemas” Ambos de estos requerimientos tienen que ser
tomados en consideración en el diseño de la ayuda del sistema.
Diferentes facilidades dentro del sistema de ayuda puede ser requerido.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 46
Información de ayuda
Simplemente no se debería estar con un manual en línea.
Las pantallas o ventanas no caben en el papel. Las características dinámicas de el despliegue
pueden improvisar la presentación de la información.
La gente no es buena leyendo ventanas como texto.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 47
Uso de los sistemas de ayuda
Múltiples puntos de entrada deberían ser provistos dentro del sistema de ayuda de diferentes lugares.
Algunas indicaciones donde el usuario se posesiona en el sistema de ayuda es valuado.
Las facilidades estarán proveídas a todos los usuarios para navegar y atravesar el sistema de ayuda.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 48
Puntos de entrada para los sistemas de ayuda
Help frame network
Top-levelentry
Entry from errormessage system
Entry fromapplication
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 49
Sistema de ayuda para Windows
Mail redirection
Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent
next topicsmore
Mail redirection
Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent
Help frame map
You are here
Help history
1. Mail2. Send mail3. Read mail4. Redirection
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 50
Documentación del usuario
Tan bueno como la información en línea, la documentación en papel debería ser sustituida con un sistema.
La documentación puede estar diseñada para un rango de usuarios tanto inexpertos como expertos.
Tan bueno como un manual. Otras documentaciones de uso fácil deberían ser provistas.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 51
Tipos de documentos para el usuario
Description ofservices
Functionaldescription
Systemevaluators
How to installthe system
Installationdocument
Systemadministrators
Gettingstarted
Introductorymanual
Noviceusers
Facilitydescription
Referencemanual
Experiencedusers
Operation andmaintenance
Administrator’sguide
Systemadministrators
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 52
Tipos de documento
Descripción funcional• Breve descripción de lo que puede hacer el sistema
Manual referente del sistema• Describe todo el sistema con detalle
Manual del sistema para la instalación• Describe como se instala el sistema
Manual del sistema administrador• Describe como se desarrolla el sistema cuando esta en uso
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 53
Evaluación de la interface de usuario
Algunas evaluaciones para el diseño de la interface de usuario pueden ser acarreados fuera del alcance de estos.
Una evaluación con escala completa es muy cara e impractica para muchos sistemas
Idealmente una interface puede evaluar una vez mas una especificación utilizada, sin embargo es raro para cada especificación ser producida.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 54
Atributos utilizables
Attribute DescriptionLearnability How long does it take a new user to
become productive with the system?Speed of operation How well does the system response match
the user’s work practice?Robustness How tolerant is the system of user error?Recoverability How good is the system at recovering from
user errors?Adaptability How closely is the system tied to a single
model of work?
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 55
Técnicas simples de evaluación
Preguntas para la retroalimentacion del usuario. La grabación del vídeo del sistema usa una
evaluación subsecuente. La instrumentación del código para la
información coleccionada facilita que el usuario controle los errores.
La provisión de un botón de celdas para el usuario en línea es retroalimentado.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 56
Resumen El diseño de interfaces puede ser centrada al usuario.
Una interface debería ser lógica y consistente y la ayuda de usuarios recupera errores.
El sistema de menú debe de ser tan bueno como para usuarios de sistemas ocasionales.
El despliegue gráfico puede utilizarse para representar tendencias y valores aproximados. El despliegue digital es cuando es requerida la precisión.
Puede el color utilizarse regado y consistente.
©Ian Sommerville 1995 Software Engineering, 5th edition. Chapter 17 Slide 57
Resumen
Pueden los sistemas proveer ayuda en línea. Esto incluye ayuda cuando se encuentran en problemas y ayuda cuando se requiere información.
Los mensajes de error pueden ser positivos como negativos.
Diferentes tipos de rangos, son provistos para el documento de usuarios.
Idealmente, una interface de usuario puede evaluar , una vez hecha la especificación de usabilidad.