Capitu 17_18_19.ppt

©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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


Interfaz formato básico.

Title

Author

Publisher

Edition

Classification

Date ofpurchase

ISBN

Price

Publicationdate

Number ofcopies

Loanstatus

Orderstatus

NEW BOOK


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.


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.


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


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

PRINT

Grid Busy


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”.


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.


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.


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.


Menús Móviles

TimesHelveticaPala tinoBookfaceFrutigerGothicSymbol

9 Point10 Point12 Point14 Point18 Point24 Point36 Point48 Point

PlainBoldItalic

UnderlineShadowShadow


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.


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


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.


Interfaces de Usuario Múltiple

Application softwaresystem

GUImanager

Graphical userinterface

Commandlanguage

interprerter

Commandlanguageinterface


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.


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?


Presentación de la Información

Information tobe displayed

Presentationsoftware

Display


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


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.


Visualización de la información dinámica

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar


Visualización de valores relativos

0 100 200 300 400 0 25 50 75 100

Pressure Temperature


Texto resultado

The filename you have chosen has beenused. Please choose another name

Ch. 17. User interface design!

OK Cancel


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


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.


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.


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.


Sistema de ayuda y mensajes

Messagepresentation

system

Error messagetexts

Helpframes

Error messagesystem

Helpinterface

Application


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.


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.


Cuidado al introducir un nombre

Please type the patient name in the bo x then click on OK

Bates , J.

OK Cancel


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


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.


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.


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.


Puntos de entrada para los sistemas de ayuda

Help frame network

Top-levelentry

Entry from errormessage system

Entry fromapplication


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


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.


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


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


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.


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?


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.


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.


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.

Documents

Capitu 17_18_19.ppt