cap17

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

Windows Multiple windows allow different information to bedisplayed 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 Description

User familiarity The interface should use terms and concepts which aredrawn 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


sistema


sistema


sistema


sistema


sistema


sistema


sistema


sistema


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.


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 is

doing 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 c lic k on OK

Bates , J .

OK Cancel


Respuestas buenas y malas de

errores

Error #27

In valid patient id?

Patient J . Bates is not kno wn to the system

Clic k on P atients f or a list of kno wn patientsClick on Retr y to re-input a patient nameClick on Help f or more inf ormation

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 Description

Learnability How long does it take a new user tobecome productive with the system?

Speed of operation How well does the system response matchthe user’s work practice?

Robustness How tolerant is the system of user error?

Recoverability How good is the system at recovering fromuser errors?

Adaptability How closely is the system tied to a singlemodel 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.

cap17

Documents

interfaz de usuario

software engineering

interfaz de usuario

ian sommerville

usuario toma

soporte de usuario

gua de usuario

th edition