dise ñ o interfaces web

7/24/2019 Dise o Interfaces Web

1/75

DISEO DE INTERFACESWEB

USABILIDADHerramientas Avanzadas para el Desarrollode Aplicaciones

Escuela Politcnica Superior

Universidad de Alicante

Departamento de Lenguajes y Sistemas Informticos


2/75

1 La usabilidad delas interfaces


3/75

Diseo de interfaces de usuario Qu es el diseo de interfaces de usuario?

El proceso de dibujo consistente en dibujar iconos que brillancuando se acerca el ratn?

Es la serie de decisiones que determinan como modelar lainformacin utilizando controles comunes y metforas ?

El diseo de interfaces es un conjunto de varias tareas El modelado de interfaces de usuario

La arquitectura de las interfaces de usuario

La codificacin de interfaces de usuario


4/75

Modelado de interfaces de usuario Es el proceso de convertir las tareas que un programa

necesita en un conjunto de ventanas y controles.

Requiere Instinto

Convenciones

Psicologa

Cuidadosas pruebas de usabilidad


5/75

Arquitectura de interfaces de usuario Es el diseo de cmo utilizar los objetos y cdigo de la

aplicacin.

Debe tener como objetivos crear un diseo consistente ybien organizado que facilite su extensin y reuso deporciones de cdigo


6/75

Codificacin de interfaces de usuario Es el proceso de escribir cdigo para gestionar la interfaz

de usuario.

Idealmente se deben haber seguido las dos etapasanteriores de forma previa a esta etapa.


7/75

Resumiendo Las interfaces de usuario definen la forma en la que el programa

interacta con el usuario. Tienen tres objetivos fundamentales

Interpretar lo que el usuario quiere y trasladarlo a la ejecucin de lasdiferentes operaciones.

Recuperar informacin y visualizarla de diferentes formas

Guiar al usuario a travs de la tarea y prevenirle de posibles errores


8/75

Resumiendo (II) Pueden parecer poco importantes con respecto al total del

programa pero no es as. Una buena interfaz puede facilitar al usuario el uso de todas las

opciones del programa

Un interfaz confusa puede hacer pensar al usuario que el sistema tienemenor funcionalidad de la que realmente tiene.

Una mala interfaz puede dificultar al usuario saber que tiene que haceren cada momento

El usuario suele desear trabajar con interfaces sencillas que trabajancomo ellos esperan


9/75

Motivaciones Usaras software sin testear?

Escribes programas que sern utilizados por otras personas?

Has observado o analizado a los usuarios mientras usan susoftware?

Has evaluado su interfaz con usuarios reales?

La mayora de los desarrolladores de software no efectan procesosde evaluacin de usabilidad.

[Milsted et al 89 ] 6% de las compaas de desarrollo de software

Mi interfaz es buena No hay tiempo ni dinero

Nunca evaluamos las interfaces, y han funcionado

Otras excusas ....


10/75

Programadores vs. Diseadores

Los programadores no son los usuarios finales Una interfaz tpica de un programador


11/75

Que es una Interfaz a Usuario?

Generalmente, se suele decir que la interfaz comprendelos dispositivos E/S, y el software que los administra

Tambin debe incluirse cualquier otro aspecto que tratecon el uso humano de las computadoras Documentacin

Entrenamiento

Soporte tcnico

Contexto de uso


12/75

Importancia

Paradoja de la productividad Las grandes inversiones tecnolgicas no han producido los

incrementos de productividad esperados ej. re-entrenamiento constante de los usuarios ante nuevos productos

y/o nuevas versiones (upgrades) de sistemas interactivos

Facilidad de uso Los usuarios no desean leer manuales extensos ni consumir

tiempo aprendiendo la forma de operar un sistema


13/75

ImportanciaAlgunos estudios sobre desarrollode interfaces :

48 % (promedio) cdigo 50 % (promedio) tiempo de

implementacin

Determinante en el xito o fracaso

de un sistema interactivo Macintosh Therac 25


14/75

Importancia Nombres de comandos peligrosos

(Reportado en la prensa inglesa, segn [Newman and Lamming, 1995])

En el editor ed, carcter . es usado para seleccionar una lnea de texto,y , para seleccionar el documento completo

Ambas teclas son adyacentes en el teclado

Intentando cambiar una lnea A heavy poll is expected ... A A heavy turnout is expected ... Puede producirse fcilmente un error cambiando poll a turnout en todo el

documento En una eleccin inglesa, los documentos de un candidato Pollack fueronimpresos como Turnoutack

Se atribuy el error a una falla del computador


15/75

Importancia

Comandos Unix

rm *~ borra todos los archivos de backup

rm * ~ borra todo!

Y no existe undo ...


16/75

Importancia Phobos 1 nunca lleg a Marte

(Reportada por Norman, en CACM 1/90 [Norman 90], obtenidade Science Magazine)

No mucho tiempo luego del lanzamiento, un controlador en

tierra omitiuna letra en un envo de una serie de comandosenviados a la nave espacial.

Infortunadamente, est omisin produjo el cdigo

correspondiente a una secuencia de testeo

La secuencia de testeo, almacenada en ROM, estabadestinada a ser utilizada solamente con la nave en tierra

La nave entr en una cada, la cual no se pudo evitar

El controlador fue desplazado a otras tareas....


17/75

Importancia IranAir 655

(Reportado en [Lee 92])

En 1988, la fragata USS Vincennes dispar un misil a un Airbus A-300, deIran Air, con 290 personas.

El sistema de armamento Aegis, a bordo del Vincennes, tena un softwaresofisticado para identificar y monitorear potenciales blancos.

Sin embargo, la pantalla principal no mostraba la informacin acerca de laaltitud de los potenciales blancos (esta altitud tena que ser leda en otrasconsolas)

El Airbus fue interpretado como un caza F-14, debido a que no se leycorrectamente la altura.

Irnicamente, una nave escolta con un equipamiento ms viejo, fue capazde interpretar la altitud de la nave correctamente, pero no pudo intervenir atiempo.


18/75

Importancia Un teclado para acelerar la operacin ms frecuentemente

utilizada en MS Windows


19/75

Importancia

Lecciones: La mayora de las fallas en los sistemas hombre-mquina se

deben a diseos pobres No toman en cuenta las capacidades y habilidades de los usuarios

Generalmente son rotulados como fallas del sistema o erroreshumanos, no como fallas de diseo


20/75

2 Diseo interfaces


21/75

Utilidad y usabilidad

Utilidad La funcionalidad del sistema interactivo provee las operaciones

necesarias

Usabilidad Grado de facilidad en el uso del sistema interactivo Decrementa los costos

Previene cambios en el software antes de su uso

Elimina parte del entrenamiento necesario

Incrementa la productividad Menores tiempos para realizar las tareas Menos errores


22/75

Usabilidad

La usabilidad puede ser definida en el contexto de laaceptabilidad de un sistema


23/75

Usabilidad

Determinada por: Facilidad de aprendizaje

El usuario puede comenzar rpidamente su trabajo

Eficiencia

Alta productividad Facilidad de memorizacin

No requiere re-aprendizaje

Errores Pocos errores, y subsanables

Satisfaccin subjetiva Agradable para el usuario


24/75

Usabilidad

No todas las caractersticas de usabilidad tienen elmismo peso en un diseo Aplicaciones crticas (control areo, reactores nucleares)

Perodos de entrenamiento largos, para asegurar menor cantidad deerrores

Aplicaciones industriales y comerciales (bancos, seguros) El tiempo de entrenamiento es costoso La eficiencia es importantsima

10% de reduccin en el tiempo de una tarea significa 10% menos de recursosnecesarios

Aplicaciones de entretenimiento y oficina (procesadores palabra,juegos) La facilidad de aprendizaje, tasa de errores y la satisfaccin subjetiva

es muy importante debido a la alta competencia


25/75

Aprendizaje

Curvas de aprendizaje El diseo de algunos sistemas est centrado en la facilidad de

aprendizaje

Otros sistemas enfatizan la eficiencia para usuarios expertos

Algunos proveenfacilidad de aprendizaje

y un modo experto intentan obtener lo

mejor de ambas curvas


26/75

Formas comunes de medir la usabilidadde un sistema Aprendizaje

Seleccionar algunos usuarios novatos de un sistema, medir el tiempopara realizar ciertas tareas.

Distinguir entre usuarios con y sin experiencia computacional

Eficiencia

Obtener usuarios expertos, medir el tiempo para realizar algunas tareastpicas

Memorizacin Obtener usuarios casuales, medir el tiempo para realizar tareas tpicas

Errores

Contabilizar los errores menores e importantes realizados por usuariosal efectuar alguna tarea especfica

Satisfaccin subjetiva: Preguntar a los usuarios su opinin subjetiva, luego de intentar usar el

sistema para una tarea real


27/75

Roles en una IU

Operador

Ncleo

Funcional

Software

de la IU

Look

&Feel

Sistema Interactivo

Requeri-

mientos

Diseador

SI

Especif.

Tareas

DiseadorNF Diseadorsoftware IU

Diseador

IU

Implem.

Herram.

Herram.Construcc.


28/75

Roles en una IU Operador / usuario / usuario final

Persona que utilizar el sistema interactivo.

Diseador del sistema Desarrolla la arquitectura global de un SI

Especifica las tareas que sern efectuadas dentro de cada mdulo

Diseador de la interfaz de usuario Define la IU con la cual interactuar el operador

Utiliza la especificacin de tareas

Necesita comprender: Tareas a ser resueltas Necesidades del operador Costos y beneficios de las UI particulares

En trminos del operador y los costos de implementacin y mantenimento


29/75

Roles en una IU

Diseador del ncleo funcional o programador de la

aplicacin Crea la estructura de software necesaria para implementar las tareas

semnticas de la aplicacin (no incluidas en la IU)

Diseador del software de la interfaz a usuario Disea la estructura del software que implementar la interfaz definida

por el diseador de la IU.

Desarrollador de herramientas crea herramientas para la construccin de interfaces

No todos los actores se encuentran presentes en el proceso dedesarrollo de un SI


30/75

Diseadores de Interfaces Porqu tener diseadores especializados en interfaces?

Producen interfaces con menos errores

Interfaces permitiendo una ejecucin ms rpida

Los programadores no piensan de igual forma que los operadores

Los programadores poseen un modelo del sistema, no un modelo delusuario

Diferentes clases de interfaces y problemas

Pueden trabajar conjuntamente con:

Usuarios Programadores

Diseadores del sistema

Especialistas en diseo grfico, factores humanos, sicologa, etc..


31/75

Complejidad del diseo de IUs

Es fcil hacer las cosas difciles. Es difcil hacer las

cosas fciles

Dificultades de los diseadores para comprender las tareas delusuario

Especificaciones iniciales incompletas o ambiguas La comprensin completa de un SI se adquiere a travs de su uso.

La interfaz debe satisfacer las necesidades, experiencia yexpectativas de los usuarios previstos.

Amplia diversidad de usuarios, con diferentes caractersticas.

Los programadores tienen dificultades en pensar como losusuarios


32/75


Complejidad inherente de las tareas y los dominios Es difcil lograr SI fciles de usar, si las aplicaciones poseen

muchas funciones ej. MS Word, con aprox. 300 comandos.

ej. algunos programas CAD poseen cerca de 1000 funciones.

Requerimientos especficos del dominio ej. distintos requerimientos de los programas CAD, de acuerdo al dominio

asistido (mecnica, electrnica, arquitectura, ...)


33/75


Diversos aspectos del diseo involucrados Estndares

Documentacin

Internacionalizacin

Rendimiento Detalles de distinto nivel

Factores externos

Aspectos legales

Tiempo de programacin y testeo

Otros .... Es imposible optimizar todos estos criterios a la vez.

Deben privilegiarse los aspectos ms importantes en cada caso, yobtener un balance entre ellos


34/75

Aspectos diseo IUs

Estndares Las IUs deben adherirse a los estndares requeridos por su

plataforma ej. guas de estilo de Macintosho Motif.

Deben satisfacerse los estndares establecidos en versionesanteriores del producto, o productos relacionados de lacompetencia

Criterios de diseo grfico

Disposicin espacial, colores, diseo de conos, fuentes de texto.

Generalmente realizado por diseadores grficos profesionales


35/75

Aspectos diseo IUs Documentacin, mensajes y textos de ayuda

La provisin de buenos mensajes de ayuda y manualesincrementa la usabilidad del SI Su influencia es mayor que la modificacin de la interfaz El grupo del proyecto debiera incluir buenos escritores tcnicos

Internacionalizacin Los productos pueden ser utilizados por usuarios con diferentes

lenguajes No implica solamente la traduccin de cadenas de texto Puede incluir diferentes formatos de fechas u horas, rediseos de

layouts, diferentes esquemas de colores, nuevos conos, etc.


36/75

Aspectos diseo IUs Rendimiento

Los usuarios no toleran interfaces que operen lentamente ej. primeras versiones de Xerox Star no aceptadas por usuario

productividad ms alta tiempos de respuesta muy largos

Detalles de alto y bajo nivel Una interfaz con un modelo global incorrecto ser inutilizable Los detalles de bajo nivel deben ser perfeccionados para satisfacer

al usuario Si la colocacin de un botn o un item de un men no es aceptada por

los operadores, stos desecharn la interfaz


37/75

Aspectos diseo IUs

Factores externos Las causas de las fallas de muchos sistemas son independientes

del diseo del software (razones polticas, organizativas o sociales) ej. si los usuarios perciben que el SI amenaza su trabajo, pueden

boicotear el desarrollo del sistema

Aspectos legales La copia de un diseo exitoso es ilegal.

ejs. inconvenientes entre Lotus,Appley Microsoft


38/75

Aspectos diseo IUs

Tiempo de programacin y testeo El refinamiento iterativo mejora la calidad de una interfaz, pero

incrementa el tiempo de desarrollo.

Otros Pueden existir requerimientos especiales de aplicaciones

orientadas a determinados tipos de usuarios colaboracin entre mltiples usuarios

usuarios con discapacidades


39/75


Las teoras, principios y guas actuales suelen no sersuficientes Diversidad de metodologas, teoras y directivas disear UIs

La experiencia y prctica de los diseadores es la principal

contribucin a la calidad de la IU, no un mtodo o teora. No siempre es conveniente su utilizacin

ej. reglas de consistencia o metforas

Suelen ser demasiado especficas y/o demasiado generales cubren solo aspectos limitados del comportamiento, y no siempre

pueden ser generalizadas.


40/75

Complejidad del diseo de IUs Dificultad del diseo iterativo

El 87% de los proyectos de desarrollo utilizan alguna forma de diseoiterativo [Myers & Rosson 92]

La intuicin del diseador acerca la solucin de un problema

observado puede ser errnea

La nueva versin del sistema puede ser peor que la anterior

Aunque una iteracin puede mejorar un diseo, ste nunca obtendr lacalidad de una IU originalmente bien diseada.

Es difcil obtener usuarios reales, para efectuar los tests.

Los participantes en los tests suelen ser seleccionados por iniciativa

propia poseen mayor predisposicin e inters que los usuarios reales.

Cada iteracin debera involucrar diferentes usuarios.

El diseo iterativo puede ser largo y costoso

Los tests formales pueden tomar hasta 6 semanas


41/75

Algunas estrategias

Una interfaz bien diseada debe facilitar el trabajo delos usuarios

Para ello es preciso entender el modelo mental del

usuario y sus habilidades psquicas, fsicas ypsicolgicas

Los diseadores no son expertos en estos temas ynecesitan unos principiosgenerales de diseo

consensuados por los expertos Estos principios son conceptos de muy alto nivel que

se plasman en unas reglas de diseoque guan aldiseador con el fin de conseguir productos usables


42/75

Algunas estrategias

La mayora de los sistemas de GUI han publicadodirectrices que indican cmo asociar estos principiosabstractos a entornos de programacin concretos:

son las guas de estilo Las guas de estilo proporcionan un marco que puede

guiar a los diseadores a tomar decisiones correctasen sus diseos

Pueden tener una gran variedad de formas y puedenser obtenidas en diferentes sitios:Artculos de revistas acadmicas, profesionales o comerciales

Manuales y guas de estilo de empresas de software


43/75

Principios y directrices

Principios

Estn basados en ideas de alto nivel y de aplicacin muygeneral. Por ejemplo: Asistencia: asistir al usuario en la realizacin de las diferentes

tareas

No especifican mtodos para obtener sus objetivos. Sonbastante abstractos

Un principio es una sentencia en un sentido muyamplio que normalmente est basada en lainvestigacin hecha de cmo las personas

aprenden y trabajan


44/75

Principios

Simpson (1985)

Definir los usuarios

Dejar el control a los usuarios

Minimizar el trabajo de los usuarios

Hacer programas sencillos Mantener la consistencia

Proporcionar realimentacin

No cargar la memoria de trabajo

No abusar de la memoria a largo plazo


45/75

Principios

Mandel (1997)

Colocar a los usuarios en el control de la interfaz

Reducir la carga de memoria de los usuarios

Hacer la interfaz consistente

P i i i


46/75

Principios

Mandel (1997)

Colocar a los usuarios en el control de la interfaz Permitir el uso del teclado y el ratn Permitir a los usuarios cambiar la atencin Mostrar mensajes y textos descriptivos Proporcionar acciones inmediatas, reversibles y realimentacin Permitir personalizar la interfaz Permitir manipular los objetos de la interfazAcomodar a los usuarios con diferentes niveles de habilidad

Reducir la carga de memoria de los usuarios Hacer la interfaz consistente

P i i i


47/75

Principios

Mandel (1997)

Colocar a los usuarios en el control de la interfaz

Reducir la carga de memoria de los usuarios Proporcionar pistas visuales

Proporcionar opciones por defecto Proporcionar atajos

Emplear metforas del mundo real

Emplear la revelacin progresiva para evitar abrumar al usuario

Promover la claridad visual

Hacer la interfaz consistente

P i i i


48/75

Principios

Dix (1998)

Facilidad de aprendizaje

Flexibilidad

Robustez

P i i i


49/75

Principios

IBM (2001)

SimplicidadApoyo Familiaridad

Evidencia Estmulo Satisfaccin Disponibilidad

Seguridad Versatilidad PersonalizacinAfinidad

P i i i


50/75

Principios

IBM (2001)

Simplicidad

Apoyo Familiaridad



No sacrificar la usabilidad por lafuncionalidad del sistema

Principios


51/75

Principios

IBM (2001)

Simplicidad Apoyo

Familiaridad



Hay que proporcionar el controlsobre el sistema al usuario ysuministrarle asistencia parafacilitar la realizacin de las

tareas

Principios


52/75

Principios

IBM (2001)




Construir el producto segn elconocimiento previo del usuario,lo que le permitir progresarrpidamente

Principios


53/75

Principios

IBM (2001)




Hacer los objetos y sus controlesvisibles e intuitivos. Emplearsiempre que se puedarepresentaciones del mundo real

en la interfaz

Principios


54/75

Principios

IBM (2001)


Evidencia Estmulo

Satisfaccin Disponibilidad


Hacer las acciones previsibles yreversibles. Las acciones de losusuarios deberan producir losresultados que ellos esperan

Principios


55/75

Principios

IBM (2001)


Evidencia Estmulo Satisfaccin

Disponibilidad


Crear una sensacin de progresoy logro en el usuario

Principios


56/75

Principios

IBM (2001)




Hacer todos los objetosdisponibles de forma que elusuario pueda usar todos susobjetos en cualquier secuencia y

en cualquier momento

Principios


57/75

Principios

IBM (2001)




Evitarle errores al usuarioproporcionndole diferentes tiposde ayuda bien de formaautomtica o bien a peticin del

propio usuario

Principios


58/75

Principios

IBM (2001)



Seguridad Versatilidad

PersonalizacinAfinidad

Soportar diversas tcnicas deinteraccin, de forma que elusuario pueda seleccionar elmtodo de interaccin ms

apropiado para su situacin

Principios


59/75

Principios

IBM (2001)



Seguridad Versatilidad Personalizacin

Afinidad

Permitir a los usuarios adaptar lainterfaz a sus necesidades

Principios


60/75

Principios

IBM (2001)



Seguridad Versatilidad Personalizacin Afinidad

Permitir con un buen diseovisual que los objetos sean afinesa otros de la realidad cotidiana


61/75

Guas de estilo

Para asegurar la consistencia de las diferentes partes deun sistema o de una familia de sistemas es fundamentalpara los desarrolladores basar sus diseos en unconjunto de principios y directrices

Por este motivo es tan importante para lasorganizaciones que desarrollan softwaredisponer de unagua que puedan seguir sus desarrolladores

Estas guas se denominan guas de estiloy varan

mucho en sus objetivos


62/75

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 deestilo como el look and feel

Guasdeestilo


63/75

Guas de estilo

Guas de estilo para la Web Disear para la Web es diferente de disear interfaces de

usuario tradicionales. Algunos principios son aplicablespero la Web tiene sus particularidades

Una caracterstica importante de la Web es la falta deinterfaces de usuario comunes. La prioridad es conseguir

una interfaz atractiva, diferente de las otras Para afrontar este problema varias empresas y

organismos han publicado sus guas de estilo WebApple IBM Sun W3C Yale Center for Advanced Instructional Media Usability.gov

Guas de estilo para la Web


64/75


W3C

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

Las guas juegan un papel importante para crear sitiosweb accesibles

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



65/75


W3C

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

Estudian escenarios que pueden ocasionar problemas ausuarios 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

de configuracin, documentacin, comunicacin por voz)



66/75

p

Yale

http://www.webstyleguide.com/wsg3/index.html

Es una de las ms reconocidas Cubre todos los elementos bsicos

implicados en la creacin de un sitio web Se centra en la interfaz y en los principios de

diseo grfico subyacentes al diseo de unsitio web

http://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.htmlhttp://www.webstyleguide.com/wsg3/index.html


67/75

p

Usability.gov

Diseo centrado en el usuario, creado para diseadores webde pginas gubernamentales

http://www.usability.gov/
http://www.usability.gov/http://www.usability.gov/http://www.usability.gov/


68/75

3 Ejemplosinterfaces


69/75


70/75


71/75


72/75

Aplicacin WEB


73/75

Parte Privada: Programacin


74/75


75/75

dise ñ o interfaces web

Documents