Diseo de Interfaces: Introduccin

Contenidos del cursoConceptos generales en el diseo de interaccionesPrincipios, guas y heursticas para el diseo de interacciones WIMPProcesos de diseo de interfaces WIMPMtodos de evaluacinAplicacin a sitios Web:Diseo de sitios y pginasPrincipios, guas, heursticasEvaluacin

MotivacionesUsara software sin testear?Escribe programas que sern utilizados por otras personas?Ha observado o analizado a los usuarios mientras usan su software?Ha evaluado su interfaz con usuarios reales?

La mayora de los desarrolladores de software no efectan procesos de evaluacin de usabilidad.[Milsted et al 89 ] 6% de las compaas de desarrollo de softwareMi interfaz es buenaNo hay tiempo ni dineroNunca evaluamos las interfaces, y han funcionadoOtras excusas ....

Programadores vs. DiseadoresLos programadores no son los usuarios finalesUna interfaz tpica de un programador

Ejercicio: MANTELManhattan Telephone System (MANTEL)

Que es una Interfaz a Usuario?Generalmente, se suele decir que la interfaz comprende los dispositivos E/S, y el software que los administraTambin debe incluirse cualquier otro aspecto que trate con el uso humano de las computadorasDocumentacinEntrenamientoSoporte tcnicoContexto de uso

ImportanciaParadoja de la productividadLas grandes inversiones tecnolgicas no han producido los incrementos de productividad esperadosej. 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

ImportanciaAlgunos estudios sobre desarrollo de interfaces :48 % (promedio) cdigo50 % (promedio) tiempo de implementacin

Determinante en el xito o fracaso de un sistema interactivoMacintoshTherac 25, Aegis

ImportanciaAlgunas historias de la relacin hombre - mquina

El contenedor de la taza (cup holder)(Supuestamente, historia real en Novell Netwire [Greenberg97])

Llamante: Hola, estoy comunicado con el Servicio Tcnico?Soporte Tcnico: Si. En que puedo ayudarlo?Llamante: El contenedor de la taza de mi PC est roto, y an est dentro de la garanta. Que debo hacer para obtener uno nuevo?Soporte Tcnico: Lo siento, pero no lo comprendo: Ud. dijo el contenedor de la taza de su PC?Llamante: S, est colocado en el frente de mi PCSoporte Tcnico: Estoy algo sorprendido. Ud. ha recibido este contenedor como parte de alguna promocin? Como lo obtuvo? Tiene alguna marca colocada?Llamante: No conozco si era una promocin o no, vino instalado con mi PC. Tiene una marca 4X en el frenteSoporte Tcnico: ......(silencio) .....

ImportanciaNombres 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 completoAmbas 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 documentoEn una eleccin inglesa, los documentos de un candidato Pollack fueron impresos como Turnoutack

Se atribuy el error a una falla del computador

ImportanciaComandos Unix

rm *~ borra todos los archivos de backup

rm * ~ borra todo!

Y no existe undo ...

ImportanciaPhobos 1 nunca lleg a Marte(Reportada por Norman, en CACM 1/90 [Norman 90], obtenida de Science Magazine)

No mucho tiempo luego del lanzamiento, un controlador en tierra omiti una letra en un envo de una serie de comandos enviados a la nave espacial.Infortunadamente, est omisin produjo el cdigo correspondiente a una secuencia de testeoLa secuencia de testeo, almacenada en ROM, estaba destinada a ser utilizada solamente con la nave en tierraLa nave entr en una cada, la cual no se pudo evitar

El controlador fue desplazado a otras tareas....

ImportanciaIran Air 655 (Reportado en [Lee 92])

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

El sistema de armamento Aegis, a bordo del Vincennes, tena un software sofisticado para identificar y monitorear potenciales blancos.Sin embargo, la pantalla principal no mostraba la informacin acerca de la altitud de los potenciales blancos (esta altitud tena que ser leda en otras consolas)El Airbus fue interpretado como un caza F-14, debido a que no se ley correctamente la altura.

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

ImportanciaUn teclado para acelerar la operacin ms frecuentemente utilizada en MS Windows

ImportanciaLecciones:La mayora de las fallas en los sistemas hombre-mquina se deben a diseos pobresNo toman en cuenta las capacidades y habilidades de los usuariosGeneralmente son rotulados como fallas del sistema o errores humanos, no como fallas de diseo

Human Computer Interaction (HCI)Disciplina acerca del Diseo, Implementacin y Evaluacin de Sistemas Computacionales Interactivos para su utilizacin por seres humanos.

DiseoEvaluacinImplementacin

Motivacin HCI195019902030Capacidades HumanasCapacidades Computacionales

HCI

HCIUso y contextoProblemas de adaptacin a los computadores, su utilizacin y el contexto social de su uso.Trabajo y Organizacin socialInteraccin social en el trabajoModelos de actividad humanareas de AplicacinCaractersticas de los dominios de aplicacinEstilos ms comunes:Produccin de documentos, comunicaciones, diseo, tutoriales y ayudas, atlas multimediales, control de procesos,etc.

HCIUso y contextoCompatibilidad y adaptacin hombre-computadorMejora la compatibilidad entre el objeto diseado y su usoSeleccin y adopcin de los sistemasAdaptacin de los sistemas a los usuarios (customization)Adaptacin de los usuarios al sistema (entrenamiento, facilidad de aprendizaje)Guas al usuario (ayudas, documentaciones, manejo de errores)

HCICaractersticas HumanasComprensin de los seres humanos como sistemas de procesamiento de informacin, formas de comu-nicacin entre humanos, requerimientos fsicos ysicolgicosProcesamiento humano de la informacinCaractersticas del hombre como procesador de informacinMemoria, percepcin, atencin, resolucin de problemas, aprendizaje y adquisicin de experiencia, motivacin Lenguajes, comunicacin e interaccinAspectos del lenguaje de interaccinSintaxis, semntica, pragmtica, interaccin conversacional, lenguajes especializados

HCICaractersticas humanasErgonomaCaractersticas antropomtricas y fisiolgicas, relacin con los ambientes de trabajoDisposicin de pantallas y controles, limitaciones sensoriales y cognitivas, efectos de la tecnologa, fatiga y salud, amoblamiento e iluminacin, diseo de ambientes, diseo para usuarios con disminuciones fsicas

HCISistemas computadorizados y arquitecturade la interfazComponentes especializados para la interaccinDispositivos de input y outputTecnologa y caractersticas de los dispositivos particulares de hardware, rendimiento (del uso humano y del sistema), dispositivos virtuales Tcnicas de dilogoTcnicas para llevar a cabo la interaccinej. estilos de interaccinGnero del dilogoMetforas de contenido e interaccin

HCISistemas computadorizados y arquitectura de la interfazGrficos por computadorConceptos bsicos de manipulacin de grfcos por computadorArquitectura del dilogoArquitectura de software y estandares para interfacesej. construccin de presentaciones, administradores de ventanas, toolkits de interfaz, arquitecturas multi-usuario, look&feel, estandarizacin

HCIProceso de desarrolloconstruccin y evaluacin de interfacesEnfoques de diseoej. Bases del diseo grfico (tipografa, color, etc.),ingeniera de software, anlisis de tareasTcnicas y herramientas para la implementacionej. tcnicas de prototipacin, toolkits de dilogos, mtodos OO Tcnicas y mtodos de evaluacinej. productividad, test de usabilidad Sistemas ejemplo y casos de estudiodiseos clsicos utilizados como ejemplos de diseo de interfaces

Ciclo interactivoObjetivosEspecificacin de la accin InterpretacinIntencinPercepcinEjecucinEvaluacinActividad MentalActividad Fsica

Ciclo interactivo1. Formacin de una intencinQu deseo hacer?Correspondiente a un objetivo (y/o subobjetivos) dadoej. escribir una carta a Ana2. Seleccin de una accinCmo puedo hacerlo?Anlisis de las posibles acciones y seleccin de la ms apropiadaej. utilizar MSWord para editar el archivo ana.doc

Ciclo interactivo3. Ejecutar la accinHacerlo!Llevar a cabo la accin con el SIej. seleccionar el programa MS Word en el men de inicio (Windows 95); abrir un documento nuevo y grabarlo con el nombre ana.doc4. Evaluar los resultadosQu resultados obtuve?Chequear los resultados de ejecutar la accin y compararlos con los resultados esperadosej. verificar si el archivo que est siendo editado es ana.docRequiere percepcin, interpretacin y evaluacin incremental

Ciclo InteractivoInconvenientes de usabilidadIntencionesEspecificacinde accionesMecanismosde interaccinPresentacionesInterpretacinEvaluacinBrecha de EjecucinBrecha de EvaluacinSistema fsicoObjetivos

Brecha de evaluacinInconvenientes en la evaluacin y/o interpretacin de la presentacinPosibles Causas:Factores ergonmicosTexto difcil de leer, informacin importante presentada con poco contrastetems agrupados en una forma inadecuadael usuario puede no percibir una relacin importantePresentacin de informacin acerca del estado de la aplicacinej. Falta de feedback (bus error en Unix)

Brecha de ejecucinInconvenientes en la elaboracin del plan de accin del usuario para llevar a cabo su tareaPosibles causas:Desconocimiento del usuario de las posibles accionesej. los usuarios novatos pueden desconocer el efecto que produce una barra de desplazamiento o un botnFeedback inadecuado o inexistente de las acciones del usuarioSi no se indica claramente al operador las acciones que est haciendo, puede existir confusinej. manipulacin directa sin feedbackCambios en la forma de operar un comando en versiones nuevas de un productoej. colocacin de un marco en MS Word 7

Utilidad y usabilidadUtilidadLa funcionalidad del sistema interactivo provee las operaciones necesariasUsabilidadGrado de facilidad en el uso del sistema interactivoDecrementa los costos Previene cambios en el software antes de su usoElimina parte del entrenamiento necesarioIncrementa la productividadMenores tiempos para realizar las tareasMenos errores

UsabilidadLa usabilidad puede ser definida en el contexto de la aceptabilidad de un sistema

UsabilidadDeterminada por:Facilidad de aprendizajeEl usuario puede comenzar rpidamente su trabajoEficienciaAlta productividadFacilidad de memorizacinNo requiere re-aprendizajeErroresPocos errores, y subsanablesSatisfaccin subjetivaAgradable para el usuario

UsabilidadNo todas las caractersticas de usabilidad tienen el mismo peso en un diseoAplicaciones crticas (control areo, reactores nucleares)Perodos de entrenamiento largos, para asegurar menor cantidad de erroresAplicaciones industriales y comerciales (bancos, seguros)El tiempo de entrenamiento es costosoLa eficiencia es importantsima10% de reduccin en el tiempo de una tarea significa 10% menos de recursos necesariosAplicaciones 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

AprendizajeCurvas de aprendizajeEl diseo de algunos sistemas est centrado en la facilidad de aprendizajeOtros sistemas enfatizan la eficiencia para usuarios expertosAlgunos proveen facilidad de aprendizaje y un modo expertointentan obtener lo mejor de ambas curvas

Formas comunes de medir la usabilidad de un sistemaAprendizajeSeleccionar algunos usuarios novatos de un sistema, medir el tiempo para realizar ciertas tareas.Distinguir entre usuarios con y sin experiencia computacionalEficienciaObtener usuarios expertos, medir el tiempo para realizar algunas tareas tpicasMemorizacinObtener usuarios casuales, medir el tiempo para realizar tareas tpicasErroresContabilizar los errores menores e importantes realizados por usuarios al efectuar alguna tarea especficaSatisfaccin subjetiva:Preguntar a los usuarios su opinin subjetiva, luego de intentar usar el sistema para una tarea real

Roles en una IU

Roles en una IUOperador / usuario / usuario finalPersona que utilizar el sistema interactivo. Diseador del sistemaDesarrolla la arquitectura global de un SI Especifica las tareas que sern efectuadas dentro de cada mduloDiseador de la interfaz a usuarioDefine la IU con la cual interactuar el operadorUtiliza la especificacin de tareasNecesita comprender:Tareas a ser resueltasNecesidades del operadorCostos y beneficios de las UI particulares En trminos del operador y los costos de implementacin y mantenimento

Roles en una IUDiseador del ncleo funcional o programador de la aplicacinCrea 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 usuarioDisea la estructura del software que implementar la interfaz definida por el diseador de la IU. Desarrollador de herramientascrea herramientas para la construccin de interfaces

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

Diseadores de InterfacesPorqu tener diseadores especializados en interfaces?Producen interfaces con menos erroresInterfaces permitiendo una ejecucin ms rpidaLos programadores no piensan de igual forma que los operadoresLos programadores poseen un modelo del sistema, no un modelo del usuarioDiferentes clases de interfaces y problemas

Pueden trabajar conjuntamente con:UsuariosProgramadoresDiseadores del sistemaEspecialistas en diseo grfico, factores humanos, sicologa, etc..

Complejidad del diseo de IUsEs fcil hacer las cosas difciles. Es difcil hacer las cosas fciles Dificultades de los diseadores para comprender las tareas del usuarioEspecificaciones iniciales incompletas o ambiguasLa comprensin completa de un SI se adquiere a travs de su uso.La interfaz debe satisfacer las necesidades, experiencia y expectativas de los usuarios previstos. Amplia diversidad de usuarios, con diferentes caractersticas. Los programadores tienen dificultades en pensar como los usuarios

Complejidad del diseo de IUsComplejidad inherente de las tareas y los dominiosEs 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 dominioej. distintos requerimientos de los programas CAD, de acuerdo al dominio asistido (mecnica, electrnica, arquitectura, ...)

Complejidad del diseo de IUsDiversos aspectos del diseo involucradosEstndaresDocumentacinInternacionalizacinRendimientoDetalles de distinto nivelFactores externosAspectos legalesTiempo de programacin y testeoOtros ....Es imposible optimizar todos estos criterios a la vez.Deben privilegiarse los aspectos ms importantes en cada caso, y obtener un balance entre ellos

Aspectos diseo IUsEstndaresLas IUs deben adherirse a los estndares requeridos por su plataformaej. guas de estilo de Macintosh o Motif. Deben satisfacerse los estndares establecidos en versiones anteriores del producto, o productos relacionados de la competenciaCriterios de diseo grficoDisposicin espacial, colores, diseo de conos, fuentes de texto. Generalmente realizado por diseadores grficos profesionales

Aspectos diseo IUsDocumentacin, mensajes y textos de ayudaLa provisin de buenos mensajes de ayuda y manuales incrementa la usabilidad del SISu influencia es mayor que la modificacin de la interfaz El grupo del proyecto debiera incluir buenos escritores tcnicos

InternacionalizacinLos productos pueden ser utilizados por usuarios con diferentes lenguajesNo implica solamente la traduccin de cadenas de textoPuede incluir diferentes formatos de fechas u horas, rediseos de layouts, diferentes esquemas de colores, nuevos conos, etc.

Aspectos diseo IUsRendimientoLos usuarios no toleran interfaces que operen lentamente ej. primeras versiones de Xerox Star no aceptadas por usuarioproductividad ms altatiempos de respuesta muy largos

Detalles de alto y bajo nivelUna interfaz con un modelo global incorrecto ser inutilizableLos detalles de bajo nivel deben ser perfeccionados para satisfacer al usuarioSi la colocacin de un botn o un item de un men no es aceptada por los operadores, stos desecharn la interfaz

Aspectos diseo IUsFactores externosLas 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 legalesLa copia de un diseo exitoso es ilegal. ejs. inconvenientes entre Lotus, Apple y Microsoft

Aspectos diseo IUsTiempo de programacin y testeoEl refinamiento iterativo mejora la calidad de una interfaz, pero incrementa el tiempo de desarrollo.

OtrosPueden existir requerimientos especiales de aplicaciones orientadas a determinados tipos de usuarioscolaboracin entre mltiples usuariosusuarios con discapacidades

Complejidad del diseo de IUsLas teoras, principios y guas actuales suelen no ser suficientesDiversidad de metodologas, teoras y directivas disear UIsLa 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 utilizacinej. reglas de consistencia o metforasSuelen ser demasiado especficas y/o demasiado generalescubren solo aspectos limitados del comportamiento, y no siempre pueden ser generalizadas.

Complejidad del diseo de IUsDificultad del diseo iterativoEl 87% de los proyectos de desarrollo utilizan alguna forma de diseo iterativo [Myers & Rosson 92]La intuicin del diseador acerca la solucin de un problema observado puede ser errneaLa nueva versin del sistema puede ser peor que la anteriorAunque una iteracin puede mejorar un diseo, ste nunca obtendr la calidad 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 costosoLos tests formales pueden tomar hasta 6 semanas