Lec05 - Diseño de Interfaces de Usuario

7/21/2019 Lec05 - Diseño de Interfaces de Usuario

http://slidepdf.com/reader/full/lec05-diseno-de-interfaces-de-usuario 1/59

METODOLOGÍA

DE

DESARROLLO DE

SOFTWARE

IISemana: 5

Prof. Daniela [email protected]

mailto:[email protected]

mailto:[email protected]



DISEÑO DE INTERFAZ

DE USUARIO

Diseño de interfaces gráficas

para sistemas de software.



Objetivos

• Sugerir algunos principios generales de diseño paradesarrollar interfaces gráficas de usuario.

• Describir la manipulación directa de dichas interfaces.

• Disertación de los factores a considerar para el diseño depresentaciones.

• Descripción del soporte de usuario que esta integrado enla interfaz de usuario.

• Introducción a la versatilidad de los atributos yaproximació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 unsistema por su interfaz.

•

Un diseño de interfaz pobre puede provocar queel usuario cometa errores catastróficos.

• El diseño de una interfaz de usuario pobre es larazó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 enWindows, iconos representación de entidades,desplegado de menús y punteros.

• Llamadas previas interfaces WIMP –referidas enla actualidad de manera general con la acepción(GUIs).

• La forma estándar de una interfaz paraestaciones de trabajo y computadoras personalesde 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 represent processes.

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 a

window.

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 diferentesaplicaciones 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 posiblecon acceso inmediato a cualquier cosa sobre lapantalla.



Principios de Diseño.

• El diseño de interfaces de Usuario toma encuenta las necesidades, experiencia ycapacidades de los usuarios del sistema.

•

Los usuarios deberían involucrarse en el procesode diseño y el diseño de interfaces de usuariodeben refinarse hacia rápidos prototipos.

• Existen factores cognoscitivos, como el tamaño

de pequeños términos de memoria, que eldiseño la interfaz de usuario deben tomarse encuenta.



Principios de Diseño de lainterfaz de Usuario

Principle Description

User familiarity The interface should use terms and concepts which aredrawn from the experience of the anticipated class of user.

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 users

to 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érminosorientados de usuario y conceptos sobre losconceptos 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 debenser 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 comandoparecido.

• El sistema debe proveer alguna ayuda cada vez que el usuariocometa un error y dar la posibilidad a esté corregir el errorantes de ejecutarlo.

– Esté debe incluir comandos para de para deshacer

acciones, acciones de confirmación o destrucción, talcomo 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 eldiseñ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 debeintegrarse a través de un cuadro de trabajocoherente de tal forma que la interfaz de usuario seadapte a los fines requeridos.



Manipulación directa.

• Una manipulación directa de la interface presenta al usuario unespacio donde puede visualizar su información, la cual esmodificada a través de una acción directa. Por ejemplo nombresen 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 losiconos hacia el icono de un bote de basura disponible en elentorno del sistema.



Interfaz formato básico.

Title

Author

Publisher

Edition

Classification

Date of purchase

ISBN

Price

Publicationdate

Number of copies

Loanstatus

Order status

NEW BOOK



Ventajas de la manipulacióndirecta

• El usuario siente el control de su equipo decomputo 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 dereconocerlas y corregirlas casi instantáneamente.



Problemas de la manipulacióndirecta

• La derivación de la información apropiada paramanipular el modelo puede ser demasiado difícil.

• Permitir que los usuarios tengan demasiadainformación del entorno, plantea la cuestión de¿Qué tan fácil debe ser la navegación a través delsistema en cuestión?

•

Las interfaces de manipulación directa pueden sertan complejas como para ser programadas y portanto exigir mayores requerimientos del sistema encuestió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 conuna 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 deposibilidades mostradas por ellos a través delsistema.

•

La selección puede ser hecha apuntando yseleccionando con un “Mouse”, usando las llavesdel cursor o simplemente tecleando el nombrede su elección.

• Tal vez sea necesario el uso de una terminal másamigable tal como un monitor de pantallacapacitiva “Touchscreen”.



Ventajas de los menús desistema

• Los usuarios no necesitan recordar nombres decomandos como siempre son presentados comouna 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 puedeproveerse. El contexto de usuario está indicadopor la selección del menú actual.

ú



Problemas con los menús delsistema

• Acciones que involucran conjunciones lógicas(AND) o disyunciones (OR) son difíciles derepresentar.

• Los menús del sistema son la mejor manera depresentar un número pequeño de opciones. Siexisten muchas opciones, algunos menúsestructuralmente fáciles deben usarse.

• Los usuarios experimentados encuentran menúsmás abajo que el lenguaje empleado para loscomandos.



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 noes 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 abreenfrente del anterior revelando diversas opciones.

ú ó il



Menús Móviles

TimesHelveticaPalatinoBookfaceFrutiger

GothicSymbol

9 Point10 Point12 Point14 Point18 Point24 Point

36 Point48 Point

PlainBold

Italic

UnderlineShadowShadow



Interfaces de comandos

• El usuario puede acceder comandos con el fin de proveerinstrucciones 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 através del comando de combinación.

• Interfaces concisas requieren mínima escritura para sercreadas.



Problemas con las interfaces decomandos

• Los usuarios tiene que aprender y recordar unlenguaje de comandos. Las interfaces decomando son además inaccesibles para usuariosocasionales.

• Los usuarios cometen errores de comandos. Unadetecció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 usuariosexperimentados debido a que ellos tienen unainteracción más rápida con el sistema.

•

Lo anterior no se aplica para usuarios casuales oinexpertos.

• Tal vez establecido como una alternativa para unmenú de comandos (Secuencias cortas de

teclado). En la mayoría de los casos, una interfazde lenguaje de comandos y una interfaz demenú basado están soportadas al mismo tiempo.

I t f d U i Múlti l



Interfaces de Usuario Múltiple

Application softwaresystem

GUImanager

Graphical user interface

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 establecercomunicación con el sistema de usuario.

– Puede ser numérica o texto.



Factores d Visualización deinformación.

• ¿Si el usuario está interesado en una información precisa orelació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 alcambio?

•

¿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 to be displayed

Presentationsoftware

Display

Vi t d i f ió áfi



Vistas de información gráfica otextual

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar 3164

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.

Vis ali ación de la información



Visualización de la informacióndiná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 Temper atu re



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 grandesmontos de información.

•

La visualización puede revelar la relación entrelas 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 interfazque puede llevar al usuario a entender lasestructuras complejas de información.

• Pueden ser usados en eventos excepcionales.

• Los errores comunes en el uso de los colores delos 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 bajaresolución.



Guía del usuario

• El sistema de guía del usuario es integrado con laInterfaz de usuario, cuando se necesita que lainformació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

Message presentation

system

Error messagetexts

Helpframes

Error message

system

Help

interface

Application



Diseño de mensajes de errores

• El diseño de mensajes de error esimportantemente critica. Los mensajes de errorpobre 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 experimentardebería ser un factor determinante en el diseñode mensajes.



Diseño de factores en un análisis deoració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 irritated by long, ‘meaningful’ messages. However, beginners find itdifficult to understand short terse statements of the problem.The user guidance system should provide bothtypes of message

and allow the user to control message conciseness.Skill level Messages should be tailored to the user’s skills as well as their

experience. 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 should

use 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 familiar with 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



Respuestas buenas y malas deerrores

Error #27

In valid patient id?

Patient J . Bates is not kno wn to the system

Clic kon 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 sertomados en consideración en el diseño de laayuda del sistema.

• Diferentes facilidades dentro del sistema deayuda puede ser requerido.



Información de ayuda

• Simplemente no se debería estar con un manualen 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 lainformación.

• La gente no es buena leyendo ventanas comotexto.



Uso de los sistemas de ayuda

• Múltiples puntos de entrada deberían serprovistos dentro del sistema de ayuda dediferentes lugares.

•

Algunas indicaciones donde el usuario seposesiona en el sistema de ayuda es valuado.

• Las facilidades estarán proveídas a todos los

usuarios para navegar y atravesar el sistema deayuda.

Puntos de entrada para los



Puntos de entrada para lossistemas de ayuda

Help frame network

Top-levelentry

Entry from error message system

Entry fromapplication



Sistema de ayuda para Windows

Mail redirection

Mail may be redirected to another network user by pressing theredirect button in the control panel. The system asks for the

name of the user or users towhom the mail has been sent

next top icsmore

Mail redirection

Mail may be redirected to another network user by pressing theredirect button in the control panel. The system asks for the

name 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, ladocumentación en papel debería ser sustituidacon un sistema.

• La documentación puede estar diseñada para unrango de usuarios tanto inexpertos comoexpertos.

• Tan bueno como un manual. Otrasdocumentaciones de uso fácil deberían serprovistas.

Tipos de documentos para el



Tipos de documentos para elusuario

Description of

services

Functionaldescription

Systemevaluators

How to install

the system

Installationdocument

Systemadministrators

Getting

started

Introductorymanual

Noviceusers

Facility

description

Referencemanual

Experiencedusers

Operation and

maintenance

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



Evaluación de la interface deusuario

• Algunas evaluaciones para el diseño de lainterface de usuario pueden ser acarreados fueradel alcance de estos.

•

Una evaluación con escala completa es muy carae impractica para muchos sistemas

• Idealmente una interface puede evaluar una vez

mas una especificación utilizada, sin embargo esraro para cada especificación ser producida.



Atributos utilizables

Attribute Description

Learnability How long does it take a new user to become 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 retroalimentación 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 usuariocontrole los errores.

• La provisión de un botón de celdas para elusuario en línea es retroalimentado.



Resumen

•

El diseño de interfaces puede ser centrada alusuario. Una interface debería ser lógica yconsistente 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. Eldespliegue digital es cuando es requerida laprecisión.

• Puede el color utilizarse regado y consistente.



Resumen

• Pueden los sistemas proveer ayuda en línea. Estoincluye ayuda cuando se encuentran en problemas yayuda cuando se requiere información.

• Los mensajes de error pueden ser positivos comonegativos.

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

Metodología de desarrollo de



Metodología de desarrollo desoftware II

Documents

Lec05 - Diseño de Interfaces de Usuario