I. Diseño de Interfaz de Usuario

8/3/2019 I. Diseo de Interfaz de Usuario

1/81

425

10011 0010 1010 1101 0001 0100 1011

USABILIDAD

Ingeniera de Software II


2/81

5

425

1

0011 0010 1010 1101 0001 0100 1011Qu es la usabilidad?La usabilidad es la cualidad de un sistema respecto a:

Su facilidad de uso: mltiples formas

de intercambiar informacin entre elusuario y el sistema

Facilidad de aprendizaje:para nuevosusuarios que garantizan interaccin

efectiva y mximas prestaciones


3/81

425

1

0011 0010 1010 1101 0001 0100 1011Qu es la usabilidad?La satisfaccin del usuario:

incluyendo el soporte al

usuario para garantizar lasmetas (robustez)

Rossony Carroll, 2002, Usability Engineering


4/81

425

1

0011 0010 1010 1101 0001 0100 1011

OBJETIVOS DE LA

USABILIDADQue sea efectivo un sistema debe hacer lo que

se supone que hace.


5/81

425

1

0011 0010 1010 1101 0001 0100 1011

OBJETIVOS DE LA

USABILIDADQue sea eficiente

Se refiere a la forma en queun sistema ayuda a los

usuarios a llevar a cabo sus

tareas. qu productividad

tienen los usuarios?


6/81

425

1

0011 0010 1010 1101 0001 0100 1011

OBJETIVOS DE LA

USABILIDADQue sea seguro

Se refiere a que el usuarioest protegido de condiciones

peligrosas y de situaciones

indeseables.


7/81

425

1

0011 0010 1010 1101 0001 0100 1011

OBJETIVOS DE LA

USABILIDADQue sea til

Se refiere a que el sistemaproporciona el tipo de

funcionalidades correctas, de

manera que el usuario puede

hacer lo que necesita y lo

que quiere hacer.


8/81

425

1

0011 0010 1010 1101 0001 0100 1011

OBJETIVOS DE LA

USABILIDADQue se pueda aprenderfcilmente

Se refiere al esfuerzo que

requiere aprender a usar un

sistema (regla de los 10

minutos).


9/81

425

1

0011 0010 1010 1101 0001 0100 1011

OBJETIVOS DE LA

USABILIDADQue sea fcil de recordar comose usa

Se refiere al esfuerzo que

requiere recordar un sistema

despus de que se haya

aprendido como se usa y no se

haya utilizado durante un

tiempo.


10/81

425

10011 0010 1010 1101 0001 0100 1011

PRINCIPIOS DE

DISEO


11/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

ED

ISEO

Visibilidad

Todos los controles tienen que ser claramente visibles, con una buena

representacin sobre sus efectos


12/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

ED

ISEO

Restricciones

El tipo de interaccin que seproduce en cada momento puede

restringirse (fsicas, lgicas y

culturales).


13/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

ED

ISEO

Coincidencia (mapping)

Los controles tienen que relacionarse con susefectos en el mundo.


14/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

ED

ISEO

Uso (affordance)

Atributo que tienen los objetos que permitensaber como funcionan.


15/81

425

10011 0010 1010 1101 0001 0100 1011

PRINCIPIOS DE

USABILIDAD


16/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

EU

SA

BIL

IDADVisibilidad del estado del sistema

Siempre mantiene al usuario informado sobreque se est haciendo proporcionando unfeedback apropiado en un tiempo razonable.

feedback: ida y vuelta, retroalimentacin


17/81


18/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

EU

SA

BIL

IDADControl del usuario y libertad

Se debe proporcionar a los usuariosmecanismos de escape cuando se llegan asituaciones no deseadas.


19/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

EU

SA

BIL

IDADConsistencia y estandarizacin

Evitar que diferentes palabras, acciones ysituaciones tengan el mismo significado.


20/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

EU

SA

BIL

IDADAyudar a los usuarios a reconocer, diagnosticar y

recuperar la situacin cuando se produce un error

Usar un lenguaje sencillo para describir la

naturaleza del error y sugerir la forma de resolverlo


21/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

EU

SA

BIL

IDADFlexibilidad y eficiencia en el uso

Proporcionar aceleradores que sean invisibles alos novatos


22/81

425

1

0011 0010 1010 1101 0001 0100 1011

PRINCIPIOSD

EU

SA

BIL

IDADAyuda y documentacin

Proporcionar informacin que sepueda alcanzar fcilmente y que

proporcione ayuda siguiendo unos

pasos concretos.


23/81

425

10011 0010 1010 1101 0001 0100 1011

ESTANDARES IURE

Y FACTO


24/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares

Los estndares pueden ser:

Locales Nacionales

Internacionales

Un estndar es un requisito, regla o recomendacin basada enprincipios probados y en la prctica. Representa un acuerdo de ungrupo de profesionales oficialmente autorizados a nivel local,nacional o internacional


25/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares

El objetivo de los estndares es hacer las cosas ms fciles,

definiendo caractersticas de objetos y sistemas que se utilizan

cotidianamente

Ejemplos: teclado de telfono, teclado QWERTY

Toda la industria funciona con estndares

Ejemplo: Construccin

Tambin la industria informtica

Estndares de pantallas, teclados, conectores, incluso mobiliario Ejemplo: la inclinacin del teclado debe estar entre 0 y 25 grados


26/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares de la interfaz

Objetivo: conseguir un software ms fcil y seguro,

estableciendo unos requisitos mnimos de fabricacin,

eliminando inconsistencias y variaciones innecesarias en las

interfaces


27/81

425

1

0011 0010 1010 1101 0001 0100 1011

Beneficios

Una terminologa comn Permite a los diseadores discutir los mismos conceptos y hacer

valoraciones comparativas

El mantenimiento y la evolucin Todos los programas tienen la misma estructura y el mismo estilo

Una identidad comn Lo que hace que todos los sistemas sean fciles de reconocer

Reduccin en la formacin Los conocimientos son ms fciles de transmitir de un sistema a otro

Salud y seguridad Si los sistemas han pasado controles de estndares es difcil que tengan

comportamientos inesperados


28/81

425

1

0011 0010 1010 1101 0001 0100 1011

Clasificacin

Tipos de estndares

Estndares de iure

Estndares de facto


29/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares de iure

Son generados porcomits con estatus legal y gozan del

apoyo de un gobierno o institucin para producir estndares

Para hacer un estndarde iure se ha de seguir un proceso

complejo:

Documento preliminar pblico

Enmiendas

Aprobacin (tras cierto tiempo, a veces ao)

Ejemplo: Ansi

C


30/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares de iure

Comits

En Informtica tienen estatus legal para definir estndares de iure:

ISO Asociacin Internacional para Estndares

IEC Comisin Electrotcnica Internacional

A NSI Instituto Nacional Americano para Estndares

IEEE Instituto de Ingenieros Elctricos y Electrnicos Americano

CEN Comit Europeo para la Estandarizacin

W3C Consorcio para la World Wide Web


31/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares de facto

Son estndares que nacen a partir de productos de la industriaque tienen un gran xito en el mercado o desarrollos hechos

por grupos de investigacin en la Universidad que tienen una

gran difusin Son aceptados como tales por su uso generalizado

Su definicin se encuentra en manuales, libros o artculos

Ejemplos:

Sistema X-Windows

Lenguaje C

Normas CUA


32/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares de iure

Los estndares de la interfaz son relativamente recientes

Algunos de los ms importantes son:

ISO/IEC 9126: Evaluacin de productos software: caractersticas de

calidad y directrices para su uso ISO 9241: requisitos ergonmicos para trabajar con terminales de

presentacin visual (VDT)

ISO/IEC 10741: interaccin de dilogos

ISO/IEC 11581: smbolos y funciones de los iconos

ISO 11064: diseo ergonmico de centros de control

ISO 13406: requisitos ergonmicos para trabajar con presentacionesvisuales basadas en paneles planos

ISO 13407: procesos de diseo centrados en la persona para sistemasinteractivos


33/81

425

1

0011 0010 1010 1101 0001 0100 1011

Estndares de iure en IPO

Algunos aspectos cubiertos por la ISO 9241 (requisitosergonmicos para trabajar con terminales de presentacinvisual): R

equisitos de la presentacin visual Requisitos de teclado

Diseo de estaciones de trabajo y requisitos de las posturas

Requisitos para la visualizacin con reflejos

Requisitos para colores visualizados

Requisitos para dispositivos de entrada no-teclado

Principios de dilogos

Presentacin de informacin

Dilogos de mens

Dilogos de manipulacin directa

Dilogos para completar formularios


34/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Para asegurar la consistencia de las diferentes partes de unsistema o de una familia de sistemas es fundamental para losdesarrolladores basar sus diseos en un conjunto de principios

y directrices Por este motivo es tan importante para las organizaciones que

desarrollansoftware disponer de una gua que puedan seguirsus desarrolladores

Estas guas se denominan guas de estilo y varan mucho en

sus objetivos


35/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Pueden ser de dos tipos: Guas de estilo comerciales

Guas de estilo corporativas

Ventaja: aseguran una mejor usabilidad mediante laconsistencia que imponen

En el lenguaje industrial se hace referencia a las guas de estilocomo el look and feel


36/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Guas de estilo comerciales

Son producidas por fabricantes de software y hardware, y sonen general estndares de facto

Apple

Motif OS/2

Windows

Open Look

CDE, Common Desktop Environment

Java

Swing

Contienen directrices que se concretan a muy bajo nivel

CUA


37/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Apple (1985)


38/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Apple (1985)


39/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Apple (1985)


40/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Apple (1985)


41/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

CUA (Common User Access)

Publicadas en 1987 porIBM y Microsoft

Se adoptaron universalmente por la fuerza de IBM (estndar

de facto son las industrias de microsoft e IBM)

Windows, OS/2 y Motif son los estndares ms importantes

que siguen esta norma


42/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Motif

OSF (Open Software Foundation)


43/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

OpenLook

SUN Microsystems y AT&T


44/81


45/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Microsoft


46/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Java Look and Feel

Java permite la ejecucin de un mismo programa en distintasplataformas utilizando la interfaz grfica correspondiente,gracias al AWT (Abstract Window Toolkit)

Con la aparicin del conjunto de componentes Swing, parte

de las JFC (Java Foundation Classes), se dispone de unaapariencia grfica propia, denominadaMetal

Adems deMetalexisten otras apariencias: Motiflook and feel

Windows look and feel

MacOs look and feel


47/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Java Swing

Java Look andFeel

Windows Look andFeel

Motif Look andFeel

MacOS Look andFeel


48/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Java Swing


49/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Java Swing


50/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

CUA

Estndarde facto desarrollado porIBM y Microsoft

Define los componentes de la interfaz que deben mantenerse

entre aplicaciones

Objetivos:

Usabilidad y consistencia de la aplicacin

Consistencia entre aplicaciones


51/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Sistemas de ventanas

Motif

Windows

OS/2


52/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Principios bsicos de diseo

Los usuarios tienen el control del dilogo

Los usuarios tienen que desarrollar un modelo conceptual de lainterfaz

Uso de metforas

Metfora de la sobremesa: los usuarios ven carpetas ydocumentos, no programas y archivos. El sistemaestablece la asociacin datos-programas

Sistema dirigido por el usuario

Consistencia

Hacer la interfaz transparente


53/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Modelo grfico

Las aplicaciones comparten la pantalla

Cada una tiene asignada una parte o ventana

Ventana activa: aquella con la que el usuario interacciona

Niveles del modelo grfico:

Presentacin

Acciones

Interaccin


54/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Presentacin

Representa el aspecto visual de la interfaz

Las aplicaciones tienen dos tipos de elementos que hay quepresentar:

Objetos

Cualquier cosa que el usuario pueda manipular

Son el centro de atencin del usuario

Acciones

Permiten al usuario crear o manipular objetos

Se realizan mediante combinaciones de mens y cajas de

dilogo


55/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Acciones

Mens

Mens desplegables

Mens en cascada (no ms de dos niveles)


56/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Acciones

Cajas de dilogo

Presentan/recogen informacin

Ventana mvil de tamao fijo

Aparece durante el procesamientode una accin del usuario, cuando serequiere informacin para completarla

Se utiliza una elipsis (...) tras el nombre del botn oelemento de men que abre la caja

No usan mens. Usan botones para llamar a lasacciones

Botones: confirmar, cancelar, ayuda


57/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Acciones

Tipos de cajas de dilogo

No modal(son como filtros)

Permite a los usuarios continuar con su trabajo sincompletar el dilogo

Modal ()

Requiere que los usuarios completen la caja de dilogoantes de continuar


58/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Acciones

Caja de mensajes

Es un tipo especial de caja de dilogo que se utilizaexclusivamente para mostrar mensajes a los usuarios


59/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Interaccin

Es el nivel a travs del cual los usuarios interaccionan con loscomponentes de la interfaz

Consta de:

Seleccin de objeto

Los usuarios apuntan a un objeto que desean manipular ylo seleccionan de manera visible

Ejecucin de la accin

Se selecciona una opcin de men y si es preciso secompleta con una caja de dilogo

La ejecucin de la accin debe ser visualizada


60/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Interaccin

Seleccin de objeto Ejecucin de accin


61/81


62/81


63/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Interaccin

nfasis

Trata de realzar la importancia de algunos elementosde interaccin para que el usuario cuando interaccionapueda saber:

Foco de la entrada

Opciones disponibles

Opciones no disponibles

Estado actual de las opciones


64/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Interaccin

Tipos de nfasis:

nfasis de cursor

nfasis de seleccin

nfasis de no

disponible nfasis del estado

actual


65/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Interaccin

Seleccin

Seleccin con el ratn

Clic, Doble-clic, Mayus+clic, Ctrl+clic, Arrastrar yseleccionar

Seleccin con el teclado

Tabulacin, flechas, Mayus y Ctrl (seleccin), Alt (mens)


66/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Interaccin

Acciones comunes

La consistencia en acciones comunes es importantepara reforzar el modelo conceptual del usuario

Existen acciones que son comunes a la mayora de lasaplicaciones, y que CUA define:

Abrir fichero

Imprimir

Tipo de letra


67/81


68/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Componentes

Caja de grupo (group box)

Campo de texto (text box)

Caja de lista (list box)

Caja de combinacin (combo box)


69/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Componentes

Indicador de progreso

Cambio del puntero

Ventana de progreso de la accin

Control de desplazamiento


70/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo CUA

Ayuda

Permite resolver las dudas de los usuarios

Interaccin

Tecla F1

Seleccionando el botn de ayuda

Seleccionando el men de ayuda

Tipos de ayuda

Ayuda contextual(es como un link)

Tutorial

Glosario


71/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo

Guas de estilo para la Web

Disear para la Web es diferente de disear interfaces deusuario tradicionales

Algunos principios son aplicables pero la Web tiene susparticularidades

Una caracterstica importante de la Web es la falta deinterfaces de usuario comunes. La prioridad es conseguir unainterfaz atractiva, diferente de las otras

Para afrontar este problema varias empresas y organismos hanpublicado sus guas de estilo Web

Apple IBM

Sun

W3C

Yale Center for Advanced Instructional Media

National CancerInstitute (NIC)


72/81

425

1

0011 0010 1010 1101 0001 0100 1011


Apple, Sun

Apple www.geo.tu-freiberg.de/docs/apple/web_design/intro.html

Sun sut1.sut.ac.th/StyleGuide/Printing_Version.html


73/81

425

1

0011 0010 1010 1101 0001 0100 1011


IBM

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572

G d til l W b


74/81

425

1

0011 0010 1010 1101 0001 0100 1011


W3C

El W3C alberga la Iniciativa de Accesibilidad Web (WAI),patrocinada por varias organizaciones

Las guas juegan un papel importante para crear sitios webaccesibles

WAI ofrece tres guas diferentes: Web Content Accessibility Guidelines (WCAG)

Authoring Tool Accessibility Guidelines (ATAG)

User Agent Accessibility Guidelines (UAAG)

www.w3.org/WAI/Resources/#

gl

G d til l W b


75/81

425

1

0011 0010 1010 1101 0001 0100 1011


W3C

Web Content Accessibility Guidelines (WCAG) Principios de diseo para hacer los sitios web accesibles. Estudian

escenarios que pueden ocasionar problemas a usuarios discapacitados

Authoring Tool Accessibility Guidelines (ATAG)

Asisten a los desarrolladores de herramientas de creacin decontenidos web para que estos sean accesibles

User Agent Accessibility Guidelines (UAAG) Explican las caractersticas de las interfaces que benefician a las

personas con discapacidades (navegacin por teclado, opciones deconfiguracin, documentacin, comunicacin por voz)

G d til l W b


76/81

425

1

0011 0010 1010 1101 0001 0100 1011


Yale

info.med.yale.edu/caim/manual

Es una de las ms reconocidas

Cubre todos los elementos bsicos implicadosen la creacin de un sitio web

Se centra en la interfaz y en los principios dediseo grfico subyacentes al diseo de un sitioweb



77/81

425

1

0011 0010 1010 1101 0001 0100 1011


National CancerInstitute

http://usability.gov/guidelines/

Disponibles en PDF


78/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo


Ayudan a las empresas a dar un mismo estilo a todos sus

productos

Si una organizacin desea desarrollar su propio estilo

corporativo, primero ha de escoger una gua de estilocomercial

Esta gua se aumenta con unas caractersticas propias que

produzcan una imagen coherente de la organizacin

d il


79/81

425

1

0011 0010 1010 1101 0001 0100 1011

Guas de estilo


Gua de

estilo

del

producto

Gua de

estilo

del

producto

Gua de

estilo

del

producto

Guas de estilo de la suite de productos


Guas de diseo de las plataformas (Windows, OS/2, UNIX)

Estndares internacionales (ISO, DIN)


80/81

425

1

0011 0010 1010 1101 0001 0100 1011

Conclusiones

Los estndares y guas proporcionan una base sobre la cualrealizar el diseo y desarrollo

Sin embargo, el uso de guas no garantiza que la interfaz seausable

Es mejor seguir las guas que no hacerlo. Puede que podamoshacer un diseo mejor sin guas, pero son muchas ms lasventajas que aportan que las desventajas

Es conveniente dar facilidades a los diseadores y

programadores: Proporcionar ejemplos en la documentacin

Incorporar las guas a las herramientas

Dar formacin y entrenamiento


81/81

421

0011 0010 1010 1101 0001 0100 1011

Conclusiones

Los estndares y las guas de estilo facilitan el diseo deinterfaces

Tambin facilitan el aprendizaje y reducen los errores alpermitir al usuario aprovechar el conocimiento adquirido enotros productos

I. Diseño de Interfaz de Usuario

Documents

Transcript of I. Diseño de Interfaz de Usuario