UNIVERSIDADFRANCISCODEPAULASANTANDER BIBLIOTECAEDUARDOCOTELAMUS

RESUMENTESISDEGRADO AUTORESALBALILIANASOLEDADORTIZ LILIANABARBOSAVERJEL FACULTADDEINGENIERIAS PLANDEESTUDIOSINGENIERIADESISTEMAS DIRECTORIng.JUDITHDELPILARRODRIGUEZTENJO TITULODELATESISELABORACINDEUNAGUAPARALACREACINDE GUIs IMPLEMENTANDO SUS MTRICAS Y RESALTANDO LA IMPORTANCIA DELFACTORHUMANO. RESUMEN Elobjetivodeesteproyectoesrealizarunainvestigacinacercadeldiseodeinterfaces grficasteniendoencuentavariosaspectosrelevantescomo: elmanejodelcolor,la organizacindelainformacin,elmanejodecontroles,lasconsideracionesdeusuarioy las reglas de diseo; con el fin de resaltar la importancia que tiene una interfaz agradableycorrectaparaelusuarioaumentandolosndicesdeutilizacin. Elproductofinaldelapresenteinvestigacinseconstituyeenunaguaqueproporciona unos lineamientos contra los cuales un diseador de GUIs evaluar sus diseos y mejorarlacalidaddelmismo.

CARACTERISTICAS PAGINAS_________PLANOS________ILUSTRACIONES________CDROM______

ELABORACINDEUNAGUAPARALACREACINDEGUIs IMPLEMENTANDOSUSMTRICASYRESALTANDOLAIMPORTANCIADEL FACTORHUMANO

ALBALILIANASOLEDADORTIZ LILIANABARBOSAVERJEL

UNIVERSIDADFRANCISCODEPAULASANTANDER FACULTADDEINGENIERA PLANDEESTUDIOSDEINGENIERADESISTEMAS

4 SANJOSDECCUTA 2002

ELABORACINDEUNAGUAPARALACREACINDEGUIs IMPLEMENTANDOSUSMTRICASYRESALTANDOLAIMPORTANCIADEL FACTORHUMANO

ALBALILIANASOLEDADORTIZ LILIANABARBOSAVERJEL

ProyectodegradopresentadocomorequisitoparaoptaralTtulode IngenierodeSistemas

Directora JUDITHDELPILARRODRIGUEZTENJO IngenierodeSistemas

UNIVERSIDADFRANCISCODEPAULASANTANDER FACULTADDEINGENIERA

5 PLANDEESTUDIOSDEINGENIERADESISTEMAS SANJOSDECCUTA 2002

ADiosporsermimayoraliadoyelamigo que est presente en los momentos ms importantesdemivida.

A mis padres y hermanos por su amor y apoyoincondicional.

ALBALILIANA

A Dios Todopoderoso pordarme las fuerzas necesariasparalucharysaliradelante.

AmihijoJulinCamiloqueconsuternuray sussonrisasalegrancadadademivida.

Amimadrequeconsusconsejos,dedicacin yamorlogrsacarmeadelante.

Amiesposoporsucomprensinycario,ami hermana, abuela y tos por su apoyo incondicional.

LILIANA

AGRADECIMIENTOS

Losautoresexpresansusagradecimientosa:

JudithdelPilarRodriguez,IngenierodeSistemasyDirectoradenuestroproyecto, porsusvaliosasorientaciones.

OscarEduardoSurezSuescn,DocenteinvestigadoryAsesormetodolgico,por sucolaboracinenlarealizacindeesteproyecto.

Todasaquellaspersonasquedeunauotraformacolaboraronenlarealizacinde esteproyecto.

10

CONTENIDO Pg INTRODUCCIN 1.PROBLEMA 1.1TITULO 1.2DEFINICIONDELPROBLEMA 1.3JUSTIFICACION 1.4OBJETIVOS 1.4.1ObjetivoGeneral 1.4.2ObjetivosEspecficos 1.5ALCANCESYLIMITACIONES 1.5.1Alcances 1.5.2Limitaciones 2.MARCOTEORICO 2.1ANTECEDENTES 2.2MARCOCONCEPTUAL 3.METODOLOGA 3.1TIPODEINVESTIGACIN 3.2POBLACIN 1 3 3 3 5 6 6 6 7 7 7 8 8 16 20 20 20

11 3.3MUESTRA 3.4INSTRUMENTOS 3.5PROCESAMIENTOYSISTEMATIZACINDELAINFORMACIN 3.6ANLISISDELASENCUESTAS 20 21 22 23

4. DISEO DE GUIs, SUS METRICAS Y SU RELACION CON EL FACTOR HUMANO 32 4.1EVOLUCIONDELASINTERFACESDEUSUARIO 4.2ASPECTOSDELAPSICOLOGIAHUMANA 4.3PROCESODEDISEODEINTERFACESDEUSUARIO 4.3.1Tcnicasavanzadasparaeldiseodeinterfacesdeusuario 4.4ESTILOSDEINTERACCCIN 4.4.1Estilosdeinteraccingrficos 4.4.2Estilosdeinteraccinnogrficos 4.5MEDIDASDEUSABILIDAD 4.5.1Mtodosparaconocerlausabilidad 4.5.2Procesosdeevaluacindelosdiseos 4.6ELCOLOR 4.6.1Caractersticasdelcolor 4.6.2Principiosdediseodelcolor 4.6.3Simbolismodelcolor 4.6.4Combinacionesentrecolores 4.6.5Efectosvisualesenlapercepcindelcolor 4.7 LA IMPORTANCIA DEL DISEO DE INTERFACES GRFICAS DE USUARIO 86 33 46 47 48 52 52 59 61 64 67 68 69 76 78 78 81

12 4.7.1Comunicacinvisualefectivaparainterfacesgrficasdeusuario 4.7.2Consideracionesdediseo 4.7.3Ellenguajevisible 4.7.4Principiosdeldiseodeinterfacesdeusuario 4.8MTRICAS 4.8.1Principios 4.8.2Directrices 4.8.3Estndares 4.8.4Guasdeestilo 5.CONCLUSIONES 6.RECOMENDACIONES BIBLIOGRAFIA ANEXOS 86 87 87 88 95 95 97 98 101 114 118 119 120

13

LISTADEFIGURAS pg. Figura1.AnlisisencuestaNo.1(1pregunta) Figura2.AnlisisencuestaNo.1(2pregunta) Figura3.AnlisisencuestaNo.1(3pregunta) Figura4.AnlisisencuestaNo.1(4pregunta) Figura5.AnlisisencuestaNo.1(5pregunta) Figura6.AnlisisencuestaNo.2(1pregunta) Figura7.AnlisisencuestaNo.2(2pregunta) Figura8.AnlisisencuestaNo.2(3pregunta) Figura9.AnlisisencuestaNo.2(4pregunta) Figura10.Mendepantallacompleta(NortonUtilities) Figura11.Mendebarraymendesplegable Figura12.MensencascadadelabarradeiniciodeWindowsME Figura13.PaletasdeherramientasdeMicrosoftPowerPoint 23 24 25 26 27 28 29 30 31 35 35 36 36

14 Figura14.MencontextualdeuniconoenelescritoriodeWindowsME Figura15.Distintasvistasdelobjetoreloj Figura16.Ejemplodeinterfazconfusa Figura17.MetforadelescritorioenwindowsME Figura18.Metforadelcuartodejuegos Figura19.Representacindelmodelodeldiseador Figura20.Elementosdediseodepantallaysupercepcinvisual Figura21.Diferentescontrolesparalosmismosdatos Figura22.Diferentestiposdeiconos Figura23.Iconoscomandos Figura24.Iconosantesydespusdesuaplicacin Figura25.Iconosmsabstractos Figura26.Combinacinerrneaindiscriminada Figura27.Pantallaconcoloresadecuados Figura28.Relatividaddelcolor Figura29.Postimagen Figura30.EfectoBezold Figura31.Consistenciainterna Figura32.ConsistenciaExternaparaiconosdeherramientasdetexto Figura33.Consistenciadelmundoreal Figura34.Simplicidad:diseocomplicadoydiseosimple Figura35.Iconosambiguosycomplicados Figura36.Textoilegibleylegible 37 39 41 43 43 45 49 51 56 57 58 58 72 73 82 83 84 89 89 90 91 92 92

15

LISTADECUADROS pg. Cuadro1.Principalesdiferenciasentrelosestilosdeinterfazorientadosala aplicacinyalosobjetos 38 Cuadro2.Comparacindealgunosestilosdeinterfaz Cuadro3.Asociacionesmentalesdeloscolores Cuadro4.Combinacionesentrecolores 61 75 79

16

LISTADEANEXOS pg. AnexoA.EncuestaNo.1 AnexoB.EncuestaNo.2 AnexoC.CuestionarioNo.1 AnexoD.CuestionarioNo.2 AnexoE.CuestionarioNo.3 AnexoF.CuestionarioNo.4 AnexoG.GuaparaeldiseodeInterfacesGrficas 121 124 127 130 132 135 138

17

INTRODUCCIN

Elpresenteproyectobuscahacerunainvestigacinsobrelasmtricasasociadasaldiseo deinterfacesgrficasascomotambinelefectoquetieneunbuenomaldiseosobrelos usuarios, es decir qu reacciones genera en ellos una mala interfaz y cmo influye la disposicindelosobjetosyelusodeloscoloresenelmomentodeldiseo.

Muchasvecesnosencontramosconaplicacionesositiosenloscualesnoencontramoslo quebuscamosonosabemoshacerloquequeremos,estasituacinresultadeunamala

18 interfaz,locualgeneraunproblemadeusabilidadyenconsecuenciageneraalgunoscostos. Algunosdeellosmedibles.

Enlaactualidad,lahumanidadestgenerandonuevosmediosdecomunicacin,quetienen supropiolenguajeyaltasvelocidadesdecambioyevolucin,comoporejemplolasredes y lacomunicacin hipermedial. Las interfaces deestos nuevos medios ysulenguaje asociado,jueganentonces unpapelmsimportanteanqueelquehantenidohastael momento, en aplicaciones tradicionales debido a la disparidad de usuarios, lenguajes, aplicacionesylavelocidadconquetodosestosfactoresestncambiando.

Finalmenteloquesebuscaconesteproyectoesdemostrarqueunainterfaznoslodebeser agradablealavistasinoqueademsdebecumplirconlasmtricasasociadasaldiseoy tenerencuentaelfactorhumanoquedefinitivamenteesparteprimordialdeste;ascomo tambin proporcionar algunos lineamientos contra los cuales evaluar las diversas alternativasconlasqueseenfrentarundiseadordeGUIs.

LasiglaGUIcorrespondeaGraphicUserInterfaz.SignificaInterfazGrficadeUsuarioy serefierealainterfazoaparienciainteractivaquepresentanciertosordenadoresparaser explotadosporsususuarios.

19

1. PROBLEMA

1.1 TITULO ELABORACIN DE UNA GUA PARA LA CREACIN DE GUIs IMPLEMENTANDO SUS MTRICAS Y RESALTANDO LA IMPORTANCIA DEL FACTORHUMANO.

20

1.2DEFINICINDELPROBLEMA

AunqueexisteunasignificativacantidaddeliteraturasobreeldiseodeinterfacesGUIs,se hapublicadopocainformacinsobremtricasqueproporcionenunavisininternadela calidadyfacilidaddelasinterfaces.

EstoconllevaadisearGUIssinningunacontextualizacinencuantoalasmtricasquese debenaplicar,yaofrecerunproductomaldiseadoqueentreotrascosaspuedeocasionar problemasvisualesenelusuario.

Enlosltimosaos,sehaidoincrementandoelintersenelestudiodelosusuarioscomo parte delsistema hombremquina. Noobstante, lamayora delos estudios hansido dirigidoshacialosusuariosconexperienciaconelordenador,omsespecficamentea programadores.Sloalgunosdelosmsrecientesestudiosseocupanmsespecficamente delosusuarioscasualesoprincipiantes.

Los usuarios principiantes y experimentados generalmente manifiestan maneras de comportamiento bastante diferentes. Los principiantes normalmente se dedican a actividades de resolver problemas, mientras que los experimentados son hbiles en la interaccin con el ordenador. La interaccin es para el usuario experto una destreza cognitivaderutina.

21 Adems, juntoalniveldeexperiencia delusuarioesnecesarioatenderalosestilos de aprendizaje.

Lainteraccinhombremquinaayudaaentendercmolagenteinteractaconlasnuevas tecnologas. Adems, esta interaccin puede ayudar a mejorar las posibilidades de las nuevastecnologasenlaenseanzaendosimportantesaspectos:primero,puedeguiarun anlisis cuidadoso y sistemtico sobre qu informacin, herramientas y capacidades necesitalagenteparaconseguirsusobjetivos;ysegundo,puedeproporcionarherramientas ytcnicasconlasqueevaluar tilmenteenelesfuerzoporquitardefectosqueestorbanen unainteraccintranquilaentrelagenteylasnuevastecnologas.

Esdecir,esnecesarioqueseprofundiceenlosfactoresquedificultanestainteraccin. Estetipodeinvestigacinpermitir lageneracindeunaguaparaeldiseodelainterfaz delosusuariosdeordenador.

Por lo anterior es necesario plantear unos lineamientos que sirvan como soporte en el momento de disear aplicaciones con GUIs, as como presentar un anlisis de qu reacciones genera en los usuarios una mala interfaz y cmo afecta al ojo humano la disposicindelosobjetosyelusodeloscoloresenelmomentodeldiseo.

1.3JUSTIFICACIN

22 Laprincipalraznporlaqueunequipoinformticodiseaunaaplicacinutilizandouna interfazgrficaesintentarqueelusuarioencargadodesuexplotacinseencuentrecmodo utilizndola,quelehayasidofcilsuaprendizajeyqueleresultesencillorecordarencada momentosusaspectosmsrelevantes.

Asimplevistapuedeparecerqueelusuariodeberaestarsatisfecho,puesconestesistema vaarealizarsutrabajomuchomsfcilmente. Ysinembargo,muchasveces,sinsaber muybienlarazn,seencuentraincmodo,noacabadeencontrarleeltrucoeinclusoacaba pordesecharlaaplicacinyprefiererealizarsutrabajodecualquierotramanera.

Losmotivosquehandadolugaraestefracasodealgunasaplicacionessonmuchos,pero sinlugaradudaseslafaltadeconocimientodelastcnicasgrficasymtricasasociadasal procesodediseo,as comolaeleccinequivocadadecoloresymalaorganizacindelos objetosenpantalla,locualproduceruidovisualalusuario.

El propsito del presente proyecto es orientar a los diseadores de interfaces novatos, ofrecindoles documentacin que los gue en la manera como se lleva a cabo todo el procesodediseo,lospasosaseguir,lasconsideracionesquesedebenhacerdelcolor,de laorganizacindelosobjetosyengeneraltodaslasmtricasatenerencuentaparaobtener unproductodebuenacalidad.

23 1.4OBJETIVOS

1.4.1 Objetivo General. Estudiar las mtricas asociadas al diseo de GUIs, las caractersticasdelcolorylaestructuracindelainformacinparacrearunaInterfazgrfica agradableycorrectaparaelusuario,aumentandolosndicesdeutilizacin.

1.4.2

ObjetivosEspecficos.

EstudiarlasmtricasasociadasaldiseodelasGUIs.

para

Estudiarlastcnicasgrficasusadaseneldiseodelasinterfaces

comunicarelmensajeocontextodeunaaplicacin. Distinguirlascuatroetapasqueintervienenenelprocesodeldesarrollode unainterfaz:Diseo,Implementacin,MedicinyEvaluacin.

Estudiarlaimportanciaquepuedellegaratenerelcoloreneldiseodelas interfacesgrficasdeusuario,considerandoqueesunfactorprioritarioenlatareade conseguir un entorno de trabajo lo ms agradable posible para el usuario de aplicacionesinformticas.

24 Analizarlasbuenasymalascombinacionesentrecolores paraofreceral usuario la misma informacin pero de una forma ms persuasiva o amistosa, incrementandosuinters.

1.5 ALCANCESYLIMITACIONES

1.5.1Alcances.Estainvestigacinexplicalaimportanciadelbuendiseodeunainterfaz grfica deusuario,sus mtricas asociadas, lainfluencia del coloral ojohumano y las ventajasdelainteraccinhombrecomputadora.

1.5.2Limitaciones.Elpresenteproyectoselimitaalainvestigacinyelaboracindeun documento que permita a los estudiantes de Ingeniera de Sistemas y dems personas interesadaseneldesarrollodeinterfaces grficasdelaUniversidadFranciscodePaula Santander,tenerunoslineamientoscontraloscualesevaluarsudiseoparaasegurarla calidaddelmismo.

25

2. MARCOTEORICO

2.1ANTECEDENTES

Afinesdelos60sepredecaqueenelfuturo,noserequerir yatantodepersonas orientadasalordenador,sinodeordenadoresorientadosalaspersonas. Eltiempoha demostradosuacierto: lanecesidaddeinteractuar conlos ordenadores est penetrando muchosaspectosdenuestravidacotidiana.Yaseaenbancos,estacionesdetren,hoteleso aeropuertos,nosencontramosconinnumerablespuntosdeinformacinelectrnicosenlos queresidegranpartedelainformacintilparadesplazarnos,comerciar,osobrevivir.La gente que no est bsicamente tecnoalfabetizada se encuentra hoy en da con serias limitacionesensuaccesoainformacinyaseastatrivialofundamental.

Enaquellosaos,lossistemasmsinteractivosutilizabanterminalesteletipo,semejantes aunamquinadeescribir(TTY),quenecesitabandelpapelcomorecursodevisualizacin. Luego,losdiseadoresdeinterfacesbasadasentubosderayoscatdicos(CRT)basaron sus modelos de presentacin grfica y textual segn el mismo modelo, aquellos kilomtricoslistadosdepapelpasabanahoradeformavirtualaestardetrsdeuncristal. Sinembargo,aunenlos60s,algunosinvestigadorescomoIvanSutherland(inventordela primerainterfazbasadaenventanas)yDouglasEngelbart(inventordelratn),estuvieron

26 ya diseando sistemas espaciales para pantallas de rayos catdicos que emulaban la complejidadgrficadelosdocumentosimpresosutilizandolacapacidaddeajustedinmico de caracteres que ofreca el ordenador superando las limitaciones del papel. Aquella metforadelteletipo(odelteletipodecristal)eslabasedelconocidoMSDOSconsulnea decomandosbasadaentextoqueaunpadecemosyquetantoatemorizaalosnoiniciados conesepatticoC:\>.

Pero los primeros trabajos sobre temas de factor humano en el uso de ordenadores aparecieronaprincipiosdelos50.Inclusoantes,enlos40s,lostericosencomunicacin pronosticaban documentos multimedia sin papel, almacenados en forma digital (Bush 1945). Sinembargo,elintersporlainteraccinhombreordenadoroHumanComputer Interaction(HCI)seintensific recinconeldespeguedelusoderecursosinformticosa tiempocompartido(afinesdelos50yprincipiosdelos60).Msrecientemente,conel incremento derecursosenredydenuevosservicios ysistemas, as comodepotentes ordenadores y estaciones de trabajo, se ha intensificado mucho ms la necesidad de interaccionesyhaaumentadoelintersenlosfactoreshumanosmsrelevantesenrelacin conlaHCI.

Durante los aos 70s la base conceptual de la mayora de IUG de hoy en da fue desarrollada en los laboratorios de Xerox Palo Alto Research Center (PARC). Estos conceptos incluyen metforas grficas explcitas en pantalla para objetos tales como documentosyprogramasdeordenador;ventanasmltiples superpuestasparasubdividir

27 actividades en la pantalla; y manipulacin directa de ventanas, iconos y otros objetos utilizandoelratndeEngelbartcomoelementodesealizacin.Dosfactoresfueronlos queinfluenciaron mseneldesarrollodelasmodernas IU:lamanipulacindirecta de objetos grficos en pantalla, y la creacin de metforas grficas apropiadas como interfacederepresentacindiseadasparaestimularycomplementarlacomprensinpara elusuariodelsistemainformticoquemaneja.

El trabajo de Xerox sobre las interfaces de manipulacin directa se bas en las observacionesdepsiclogosendesarrollocognitivocomoJeanPiagetyJeromeBruner. Ellospensaronquenuestroentendimientodelmundoest relacionadofundamentalmente enlaestimulacinvisualyenlaexperienciatctildelamanipulacindeobjetosdenuestro entorno (Kay1988;Kay1990).Losordenadoresdeentonces (yaunlosactuales), han requeridosiemprederazonamientoabstracto,latareadelosinvestigadoresdePARCfuela decrearunainterfazquepudieseexplotarademslashabilidadesmanipulativasyvisuales delusuario.Elobjetivofuecrearanalogasgrficasdeobjetosfamiliaresdelmundorealen la pantalla, paraanimarlailusindequelainformacindigitalpuedemanipularsetan fcilmentecomolohacemosconlosdocumentosenpapelenunescritorio.Eltrabajosobre interfacesrealizadoenXeroxPARCamediadosdelos70shaestablecidolamayorade lasconvencionesfuncionalesyvisualesdelasIUGactuales,yhansidolasantecesorasde las IUG de Apple Macintosh, de Microsoft Windows, y de otras como UNIX Motif, NextStep,oOpenLook.

28 MuchosdelosestndaresenIUGfueronescritosteniendoenmentesoftwareorientadoa herramientas,yrecinahoraestncomenzandoaincorporarayudasparalaintegracinde texto,grficos,enlaceshypermedia,ymaterialaudiovisualparasoftwarededocumentos multimedia.Debidoalanovedaddelosdocumentoshypermediabasadosenordenadorya las dificultades conceptuales de la integracin de diferentes formas de medios para integrarlos en presentaciones cohesionadas, no existe aun una normativa reconocida ampliamenteparalosdocumentoselectrnicos(Adsit1992;LynchyJaffe1990).Antela ausencia de estndares ampliamente aceptados para la edicin multimedia, los desarrolladoresdebernprocederconcautelaevitandocrearaplicacionesqueacabensiendo msconfusasque tilesalusuariofinal.Demomento,losestndaresfijadosporAppley Microsoftsonlosqueofrecenalgunasdelasguasmsconsistentesenestilo,funcionalidad yaceptacin.

Ladisponibilidadactualdepotentesordenadoreshallevadoalosdiseadoresaproponer nuevasmetforasespacialesyconceptualesparalaorganizacinyelalmacenamientode informacin,ymuchostericoshanrechazadoexplcitamentelabasadaenelconceptodel papel impreso para los documentos digitales en favor de las metforas hypertexto. Desafortunadamente, muchos lectores encuentran que el hypertexto o hypermedia desorienta y es difcil de navegar, por lo que ahora se est intentando avanzar en el desarrollodeotras tcnicas menos desorientativas paraelusuario. Pareceserdifcil encontrarunnuevomodeloconceptualentendiblequerepresenteunatelaraacomplejade interconexiones entre enlaces existentes y potenciales entre diferentes unidades de informacin.

29

Afortunadamente para la mayora de usuarios, la industria actual de software est ya dejando atrs la conocida guerra deprestaciones delos primeros aos,ysemuestra sensiblealasnecesidadesdeunamayorusabilidad.Seguramentesegenerarmayorvalor aadido en las nuevas aplicaciones y servicios gracias a interfaces de usuario ms adecuadasyalsoportealusuarioqueestnempezandoaaparecercomoprioridadesdelas empresasdelsector. Enlapocapreviaaladifusindeloscomputadorespersonales,dadoqueloscientficosy lostcnicoseninformticaeranlosmismosusuarios,nosedioimportanciaalasformasde comunicarsedelhombreconlamquina:eldiseadordeunprograma(y,porlotanto,de la interfaz) era a la vez el usuario. Pero al aparecer en el mercado, hacia 1980, computadores pequeos yeconmicos, quenoslopodan serusados en oficinas sino tambinenlascasas,esaformatradicionaldeinteraccinsetransformabaenunseriofreno alacomercializacinyaquelimitabafuertementeelsegmentodelosposiblesusuarios. As surgi rpidamente el tema de la elaboracin de mecanismos facilitadores de la interaccinhombremquina.

Este tema se ha desarrollado fundamentalmente a partir del primer encuentro de "especialistasenfactorhumano"quetuvolugarenGaithersburg,Maryland,en1982.ste correspondeaunasesinespecialdelaAssociationofComputingMachinery(ACM),en quesecre ungrupoespecialdedicadoaltemadelainteraccinhombrecomputador,el SIGCHI: "Special Interest Group of ComputerHuman Interaction". ste organiza una convencinanualypublicaunarevistatrimestral.

30

Esta interaccin puede ser abordada desde dos puntos de vista: el de los "factores humanos", que se concentra principalmente en los problemas de satisfaccin de necesidades fsicas, de tal modo que el instrumento est en condiciones de ser usado adecuadamente. En este sentido, apunta en gran parte al desarrollo de interfaces de hardware,considerandolosinstrumentosylascondicionesergonomtricasdesuuso.

Eldel"diseoorientadoalusuario"(UID:UserInterfaceDesign),queconsiderabeneficios adicionales,productodeunadinmicacreativaquepartenodelinstrumentosinodeloque esperaquinlovaausar.Esteenfoqueeselqueinfluyemsdirectamenteeneldesarrollo delasinterfacesdesoftware.

Variasinstitucionesyempresassepusieronainvestigar,siendoparticularmenterelevantes losaportesdelM.I.T.ydellaboratoriodecomputacindeXerox.Ambosinfluyeronenel concepto de "manipulacin espacial de datos" y en el desarrollo de la interfaz del Macintosh,queintrodujoAppleen1984.Conestamquina,seintroducaporprimeravez el concepto de interfaz grfica, la analoga del "escritorio" y un nuevo perifrico: el "mouse"oratn,comoherramientaparacontrolaralcomputador.

Graciasaestainnovacin,hoyprcticamentecualquierpersonapuedellegarainteractuar con un computador y es evidente que no se le puede exigir que entienda cdigos computacionales(tampococomprarauncomputadorpersonalenesecaso,porbaratoque fuera).Enconsecuencia,lafilosofadehoysebasaenlosobjetivosdeunacomunicacin

31 eficiente:ojal todoseacomprensibleyutilizableaprimeravista. Porqueelobjetivode una aplicacin computacional consiste en facilitar la vida del usuario: informarse, aprender,realizarsuslaboresprofesionaleso,simplemente,entretenerse,siempreenforma agradableyeficiente.

Larelacinentrelaforma(diseopropiamentetal)ylafuncionalidadhasidoconsiderada dediversasmanerasalolargodelahistoriaynohayunaregladefinitivaparadirigirsu aplicacin.Enlas ltimasdcadas,el nfasissehaorientadohacialainteraccinentrela obraysususuarios,esdecirprivilegiandolosaspectospsicolgicos ysociolgicos.En efecto,sehadescubiertolaimportanciadelcondicionamientosocialyculturalqueinfluye demltiplesmanerasenelusuario. Sumaneradeconcebirtantolamquinacomola tareaeselfrutodeunaconcepcinculturaldeterminada,quenoeslamismaenOrientey enOccidente.Asuvezunamquinanuevaounaformanuevadeejecutarunatareason elementosqueintervienenenunaculturay,deseraceptados,puedenprovocarcambiosen sta.

Sibienesmuydifcilpreverlasconsecuenciasdelaintroduccindeunanueva"manerade hacerlascosas",sabemosqueestasconsecuenciasexistenyque staspreparanelcamino paraotraspropuestas.As,esmuyprobablequelaaceptacindela"realidadvirtual"seael productodelacienciaficcinllevadaalcineyluegoalatelevisin,as comoelconcepto de"entreteducacin"(educacinentretenida,"edutainment")hasurgidoposiblementea razdelusodemediosaudiovisualesenlaescuelaydeldesarrollodelosjuegosdevideo.

32

Lainterfazgrficadeusuariorepresentaunavancetremendoenlaformaenquelagentese comunicaconlascomputadoras.LasprimerasinvestigacionesenelPaloAltoResearch CenterdeXeroxprodujeronen1980laprimera interfazgrficadeusuariodeapuntary hacerclic. Utilizaronundispositivollamadoratnquepodagirarsobreuntableroy moverunaflechaporlapantalla.

Xeroxapenassisacprovechocomercialdeestaideaporquesusmquinaserancarasyno utilizaban microprocesadores estndar. Convertir el resultado de un gran proyecto de investigacinenunproductoquesevendasiguesiendoungranproblemaparamuchas empresas.

Desde que apareci el IBMPC, los adelantos en hardware han hecho posible que los computadoresdebajocostocuentenconpantallasgrficas. Uncomputadorconpantalla grficanoestlimitadoalapresentacindefilasycolumnasdecaracteres,sinoquepuede controlarindividualmentecadapuntodelapantalla. ElAppleMacintoshfueelprimer computadorcuyosistemaoperativosedise teniendoencuentaunapantallagrfica.El sistemaoperativoMacintoshtieneunainterfazgrficadeusuarioquenoguardaninguna semejanzaconlainterfazdelneaderdenesdeMSDOS.

El seor Bill Gates comenta en su libro: Hacia 1983, pens que el prximo paso de Microsoft sera desarrollar un sistema operativo grfico. Crea que las interfaces las

33 personalidadesdelosprogramasserangrficasenelfuturoyesofueesencialparaque Microsoft fuese ms all del MSDOS y estableciera un nuevo estndar en el que las imgenesyloscaracteresfueranpartedeunainterfazmsfcildeutilizar1.En1983,

Microsoft anunci que planeaba aportar informtica grfica a la PC de IBM con un productollamadoWindows,queselanz porprimeravezen1985.Mientrassucedieron losjuiciosinevitablesentreMicrosoftyApplesobrequinerapropietariodelaapariencia ysensacindelainterfaz,lainterfazgrficamismaqued grabadaenlapsicologade computacindelmundoentero.Eldebatesobresiconvieneusarlayacarecedesentido.

Elretoesahoraencontrarlamaneradeelaborarinterfacesgrficasdeusuarioqueestn biendiseadas,satisfaganlasnecesidadesdelnegocioysatisfaganlasexpectativascada vezmayoresdelosusuarios.

2.2MARCOCONCEPTUAL

Laprogramacinharecorridounlargocaminodesdefinalesdeloscuarenta,cuandolos programadorescolocabaninterruptoreselctricosparacrearprogramas. Hoyenda,la programacinsehaceenformainteractivaensofisticadasestacionesdetrabajoyamenudo enconsultaconlagentequeutilizarelsistema.

GATES,Bill.CaminoalFuturo.

34 Unsistemacomputacionalnohacenadahastaqueseleordena.Unprogramaqueconsiste en instrucciones paralacomputadora, es elmedioporelcuallemandamos aejecutar ciertas operaciones. Estas instrucciones son ordenadas y agrupadas en forma lgica mediantelaetapadelaprogramacin.Seusaeltrminodesoftwareparareferirsealos programasquedirigenlasactividadesdelsistemacomputacionalyest divididoendos categorasgenerales:aplicacionesysistemas.

Lainterfazdeusuarioesquizslapartemsimportantedeunaaplicacin;ciertamente,es lamsvisible. Paralosusuarios,lainterfazeslaaplicacin;seguramenteaellosnoles interesaelcdigoqueseejecutadetrs.Independientementedeltiempoyelesfuerzoque haya empleado en la escritura y optimizacin del cdigo, la facilidad del uso de su aplicacindependedelainterfaz.

LaInterfazGrficadeUsuario(GUI)eselmedioporelcualselograunamejorinteraccin humano computadora. Lagrandeza delasinterfaces GUIes quehandemostrado ser capaces,incluso,deemularlasinterfacesdecomando. Estopermiteunificarmsanal usuariodeordenadores.

UnadefinicindeInterfazGrficadeUsuarioescritaporelseorPfaffenbergerensulibro es:Diseoparalapartedeunprogramaqueinteractaconelusuarioyqueusa conos pararepresentarlascaractersticasdelprograma2.

PFAFFENBERGER,Ph.D.conDavidWall.Diccionarioparausuariosdecomputadores einternet.Ed.PrenticeHallS.A.Sextaedicin.Mxico,1996.
2

35

Elautor UreaLpez ysus compaeros exponenque:Existen muchas personasque piensanqueelavancemsimportanteenelmundodelosordenadoresfueeldesarrollode laInterfazGrficadeUsuario.GraciasalasGUI,losordenadorespuedentrabajardeuna formamscercanaalaspersonas,deformavisual.Deestaforma,noesprecisoqueel usuariorecuerdelasintaxisyelsignificadodeningunaorden3.

Porotraparte,elautorKendallyKendallexpresaque:paralamayoradelosusuarios,la interfaz es el sistema. Aunque est bien o mal diseada, permanece como una representacindelsistemayportantoesdelacompetenciadelanalistadesistemas4.

ElautorAlanFreedmannosofrecelasiguientedefinicin:Interfazdeusuariobasadaen grficosqueincorporaconos,mensdesplegablesyunmouse5.

Lasinterfacesconelusuarioquetienenventanas,iconos,mensydispositivosapuntadores son llamadas WIMP por sus siglas en ingls (Windows, Icons, Menus and Pointing devices).

MANTASR.,JosMiguel.FundamentosdeInformtica.Mxico.Ed.Alfaomega,1999.
4

UREALOPEZ,Alfonso;SANCHEZS.,AntonioMiguel;MARTINV.,MariaTeresa;

KENDALLyKENDALL. AnlisisyDiseodeSistemas.Mxico.Ed.PrenticeHall, 1991.

5

Ed.MacGrawHill,1996.

FREEDMAN,Alan.DiccionariodeComputacinBilinge. 7edicin.Vol.2. Bogot.

36 Beekmanensulibroexponeque:Lasinterfacesconlosusuarioshanevolucionadohasta llegaralpuntoenqueloscomplejospaquetesdesoftwarepuedenseroperadosporpersonas queconocenmuypocosobreelfuncionamientointernodeuncomputador 6,deall la importanciadeconoceryaplicarcorrectamentelasmtricasasociadasaldiseoas como losusuariosalosquevadirigido.

Igualmenteelautorafirmaque:Enlaactualidad,laindustriadelacomputacinsealeja rpidamentedelascomprobadasinterfacesdelneade rdeneshaciaunainterfazgrfica conelusuario,msamigablecomolasWIMP,enunambienteintuitivoyconsistente; ademsopinaque:Lasinterfacesconelusuarioqueexistirnenelfuturoprobablemente dependernms delavoz,losgrficos tridimensionales ylaanimacinparacrearuna realidadvirtual.

Endocumentosobtenidoseninternet,seencuentranlassiguientesanotacionesimportantes:

Existentresfactoresquepuedenconsiderarseparaeldiseodeunainterfazdeusuario correcta:factoresdedesarrolloqueayudenamejorarlacomunicacinvisual;factoresde viabilidadquetieneencuentafactoreshumanosylaidentidaddelproducto;yfactoresde aceptacinquetieneencuentalapolticadelacorporacin,losmercadosinternacionales,y ladocumentacinyentrenamiento.

BEEKMAN,George.

ComputacineInformticaHoy. USA. Ed.AddisonWesley

Iberoamericana,1995.

37

Elcoloresunodelosmscomplejoselementosalahoradeintentardisearunainterfaz grficacorrecta.Puedeserunapotenteherramientadecomunicacinusadocorrectamente. Loscolorespuedensercombinadosparatomarunsentidovisual.

Definimosusabilidad deunsistemaoherramienta,entrminosdesuinterfaz,comouna medidadesu utilidad, facilidaddeuso, facilidaddeaprendizaje y apreciacin parauna tarea,unusuarioyunentornodado.

3.

METODOLOGA

3.1 TIPODEINVESTIGACIN

38 Eltipodeinvestigacinutilizadoesevaluativadescriptivaporserlaquemejorseadaptaa nuestropropsito;enestesentido,sepretendeidentificaryvalorarlossistemas,lasformas, lasestrategiasdeprogramacinutilizadasparaeldiseodelainterfazgrficadeusuario.

De igual manera, en la medida que se evala cada uno de estos aspectos de manera detallada, se busca describir las alternativas, la planificacin de procedimientos y los estndaresquesetienenencuentaentododiseodeGUIs.

3.2 POBLACIN

La poblacin tenida en cuenta en el desarrollo de la investigacin comprende los programadoresespecializados,estudiantesdeAnlisisyProgramacinyalgunosusuarios, loscualesabarcanaproximadamente300personas.

3.3 MUESTRA

Lamuestraescogidayrepresentativaparalosinteresesdelproyectocomprendeunnmero de60personas,entreprogramadores,estudiantesyusuarios.

3.4

INSTRUMENTOS

Paralapresenteinvestigacinseutilizaronlossiguientesinstrumentosderecoleccinde datos,loscualesfacilitaronabordarlapoblacindemaneradirecta,aligualqueevaluary describirelobjetodeestudioensusdiferentesdimensiones.

39

1.

Aplicacindeencuestas,stasfuerondirigidasalosprogramadoresyalosusuarios; sepretendi establecerlosnivelesdeconocimientoyaceptacindelasinterfacescon lascualesguardanrelacin,tantoaniveldeprogramacinymanejo.

2.

Manejodecuestionarios,pormediodeesteinstrumentoseconsignaronpreguntas especficas,detalladasypuntualesquepermitieronrecogerinformacinrelacionadacon lasmtricasutilizadaseneldiseodeGUIs.

3.

Entrevistas,conesteinstrumentoseprofundizsobreaspectosrelevantesencuanto almanejo,conocimientoyrelacinqueguardanlosusuariosconlasinterfacesgrficas.

4.

Estudiodearchivosydocumentos,atravsdeesteinstrumentosebuscconocerlos contenidos y presupuestos que los programadores tienen en cuenta al momento de elaborarlosdiseos,comoelementosgua(bibliografas,programas,etc).

3.5

PROCESAMIENTOYSISTEMATIZACINDELAINFORMACIN

40 Paraunamayorefectividadyaprovechamientodelainformacinseutilizaronunidadesde anlisis; es decir, toda la informacin recogida se ubic de acuerdo a su contenido y pertinenciaenunidadesdeestudio,delasiguienteforma.

Manejodelcolor. Presentacindelainformacin,animacinyaudio. Manejodecontroles. Consideracionesdelusuario. Reglasdediseo.

Unavezrecogidayubicadalainformacinencadaunadeestasunidades,seprocedi a hacerelcontrasteentrelainformacinrecogidaylafundamentacintericaenlacualse sustentelproyecto,paraluegohacerlaevaluacinydescripcindelobjetodeestudio.

Lainformacintrabajadaenlasdiferentesunidadesdeanlisis,sealmacen parapoder acudiraellaenelmomentorequerido, noomitiendoninguna,sinoqueporelcontrario estasseretroalimentaronconlamayorinformacinposible;aselprocesodeanlisisdela informacin se facilit, ya que se pudo ir depurando y seleccionando la informacin recogida.

41 Abordadoesteproceso,seestablecieronloscriterios,conclusionesyelementosclavesque sirvieronparalaelaboracindelagua,lacualseconstituyeenelresultadofinaldetodoel procesoinvestigativo.

3.6ANALISISDELASENCUESTAS

ENCUESTANo.1 1. QuesunaGUI?(VaselaFigura1).

13% 13%

12%
a.Puenteentreelusuarioyelprograma b.Esunapartedelcomputador c.Esunsoftware d.Unnuevosistemaoperativo

62%

Figura1.AnlisisencuestaNo.1(1pregunta) El62%delosencuestadosdefineconclaridadloqueesunaGUI,sinembargoalsumarlos porcentajesdelasdemsopcionesb,cyd,nosmuestraqueestaspersonasestnerradasal definiryconceptualizarsobrelaintencionalidaddelapregunta. Esdeentenderquela encuesta fue aplicada a estudiantes de Ingeniera de Sistemas de la Universidad y a

42 programadores, lo cual evidencia la carencia de conceptos y la mecanizacin frente al diseodeinterfazgrfica. 2. UnaGUIsirvepara:(VaselaFigura2).

20%

18%

15% 47% a.Mejorarlacalidaddelsoftware b.Hacerdiseogrfico c.Lainteraccinhombrecomputador d.Viabilizaelmanejodelcomputador

Figura2.AnlisisencuestaNo.1(2pregunta)

El47%delosencuestados,sabenapropiadamenteparaqu sirveunaGUI;losporcentajes de las dems opciones muestran el desconocimiento del servicio puntual de una GUI. Sigueprevaleciendodificultadesenelmanejodelosconceptos.

43

3.QuventajasofreceelusodeGUIs?(VaselaFigura3).

Figura 3.
58%

8% 27%

7%
a.Ahorrodeenerga,tiempoyespacio b.Rapidezenelmanejoyprocesamientodelainformacin c.Calidaddelaimpresin d.Efectividad,comprensinyaprovechamientodelosprogramas

AnlisisencuestaNo.1(3pregunta)

Enestapreguntaelliterald.comprendeenformadetalladalasventajasofrecidasporla GUIyseevidenciaenel58%delasrespuestas;losdemsporcentajesdanaentenderque losencuestadosnodifierenlorelacionadoalasventajasdeunaGUI.

44

4.LosGUIssonaplicablesa:(VaselaFigura4).

10%

23%

12% 55%
a.Loscontroladores b.Dispositivosdeentradaysalida c.Todoslosprogramas(software) d.Hardware

Figura4.AnlisisencuestaNo.1(4pregunta)

Este cuestionamiento indagaba por la aplicabilidad de la GUI y fue contestada acertadamenteporel55%delosencuestados,lasdemsrespuestasmuestranunporcentaje deencuestadosequivocados,siendoel23%elmselevado.

45

5.

SeentiendeporGUI:(VaselaFigura5).

13%

0%

15%

72% a.Unprogramadeaplicacin b.Unainterfazgrfica c.Uncontrolador d.Unjuego

Figura5.AnlisisencuestaNo.1(5pregunta)

EstapreguntaqueinterrogabaporlatraduccininmediatadelasiglaGUIensuforma primariafueacertadaporel72%delosencuestados,presentndoseunerrorde15%enla opcinayun13%enlaopcinb.Conestosereflejaquelosprogramadoresnomanejan

46 referentesconceptualesytericosconclaridad,locualseevidenciaenlosresultadosde todaslaspreguntas.

Sepuedeafirmarqueeltrabajoserealizaenformamecnica,quenoexistepreocupacin porprofundizaryactualizarlosconocimientosconcernientesalainterfazgrfica. ENCUESTANo.2

Lascuatropreguntasdeestaencuestabuscabanmedirenformaprofundalascaractersticas yparticularidadesdeunaGUI,tratandodeverificarlosnivelesdecalidadencuantosu diseoypresentacin. 1. Una GUI es un diseo que le permite al usuario interactuar con el software aprovechandoalmximosusutilidades,porlotantostedebeser:(VaselaFigura6).

10% 15%

75%
a.Complejoensupresentaci n b.Recargadodecoloresqueayudenaunamejorvisualizacin c.Consistente,claroypreciso

Figura6.AnlisisencuestaNo.2(1pregunta)

47

El75%delosencuestadosrespondi demaneraacertadayel25%restantenocontest correctamenteelplanteamiento,apesarquelapreguntaofreceunaexplicacindeentrada.

2.

Unainterfazdebetenerunbuendiseoqueleayudealusuarioaexplorarcon mayorefectividadtodas lasutilidades queelprogramaofrece,enestesentidodebe presentar:(VaselaFigura7).

17% 5%

78%
a.Grannmerodeventanas b.Saturacindeimgeneseiconos c.Est tica,consistencia,flexibilidadyorganizacin

Figura7.AnlisisencuestaNo.2(2pregunta)

48 En este temun22%noreconocelas caractersticas quedebetenerunbuendiseo, a diferenciadel78%quesrespondieronefectivamenteelcuestionamiento.

3.LasdificultadesquemssepresentanalmanejarlosGUIsson:(VaselaFigura8).

8% 33%

59%
a.Lentitudenelprocesamientodelainformacin b.Incomprensi ndeconos,inconsistenciaenventanasyrecargodeim genes c.Desperdiciodeenerga

Figura8.AnlisisencuestaNo.2(3pregunta)

49 Enesteplanteamientosepresentaronporcentajesaltosdeincomprensinencuantoalas dificultadesquemssepresentanalmanejarlosGUIs,siendoacon33%elmsaltoyc con8%eldemenorporcentaje,mientrasquelarespuestacorrectaocupunnivelde59%.

4.LosGUIssonefectivosenlamedidaque:(VaselaFigura9).

8%

0%

92%
a.Guardanhomogeneidad,organizaci nyfacilidaddeuso b.Nomuestrafacilidaddeaprendizaje c.Nogeneraunabuenaapreciaci nenlosusuarios.

Figura9.AnlisisencuestaNo.2(4pregunta)

50 Enestapreguntalatendenciacorrectaesalta,yaquealcanz el92%quedandoparala opcinbun8%comomargendeerror.Sibienesciertoquelosporcentajesmsaltosen estaspreguntascorrespondenalasrespuestascorrectas,sesiguenpresentandomrgenes mnimosdeinconsistencia,locualrefiereyreafirmadficitsenlosprocesosconceptuales, siendo stos relevantes para obtener niveles ptimos de calidad en los diseos y presentacindelosGUIs.

4.DISEODEGUIs,SUSMETRICASYSURELACIONCONELFACTOR HUMANO

Unainterfazgrficadeusuario(GUI)esaquellaquehaceposiblelainteraccinconun sistemaejecutndoseenunacomputadora,esdecirunpuntoomediodeinteraccinentre dossistemas,disciplinasogrupos.

Algunasdesuscaractersticasson:

Poseeunmonitorgrficodealtaresolucin.

51 Poseeundispositivoapuntador(tpicamenteunratn). Promuevelaconsistenciadelainterfazentreprogramas. Los usuarios pueden ver en la pantalla los grficos y textos tal como se vern impresos. Sigueelparadigmadelainteraccinobjetoaccin. Permitelatransferenciadeinformacinentreprogramas. Sepuedemanipularenlapantalladirectamentelosobjetosylainformacin. Proveeelementosdeinterfazestndarcomomensydilogos. Existeunamuestravisualdelainformacinylosobjetos(iconosyventanas). Proporcionarespuestavisualalasaccionesdelusuario. Proporcionaflexibilidadenelusodedispositivosdeentrada(teclado/ratn).

Adiferenciadelasinterfacesdecomando,lasinterfacesgrficasoGUI,semanejanconun ratnpinchandoiconos.Lasinterfacesdecomando,comoelMSDOS,sloempleanel tecladocomoperifricodeentrada,debiendoteclearcadaordennecesariaenelmomento requerido.

4.1 EVOLUCINDELASINTERFACESDEUSUARIO

La evolucin de las interfaces de usuario corre en paralelo con la de los sistemas operativos;dehecho,lainterfazconstituyeactualmenteunodelosprincipaleselementosde un sistema operativo. A continuacin se muestran las distintas interfaces que

52 histricamentehanidoapareciendo,ejemplificndolasconlassucesivasversionesdelos sistemasoperativosmspopulares.

Interfaces de lnea de mandatos (commandline user interfaces, CUIs). Es el caractersticodelDOS,elsistemaoperativodelosprimerosPC,yeselestilomsantiguo deinteraccinhombremquina.Elusuarioescribe rdenesutilizandounlenguajeformal conunvocabularioyunasintaxispropia(losmandatosenelcasodelDOS).Seusaun teclado,tpicamente,ylasrdenesestnencaminadasarealizarunaaccin.

Elusuarionosuelerecibirmuchainformacinporpartedelsistema(ejemplo:indicadordel DOS),ydebeconocercmofuncionaelordenadorydndeestnlosprogramas(nadaest ocultoalusuario).

Inconveniente: Cargadememoriadelusuario(debememorizarlosmandatos;inclusola ayudaesdifcildeleer);nombresnosiempreadecuadosalasfunciones,significadodelos mandatosmalcomprendidoaveces(variosmandatosconelmismooparecidosignificado, comoDELyERASE);inflexibleenlosnombres(DELynoDELETE).

Ventajas: Potente,flexibleycontroladoporelusuario,aunqueestoesunaventajapara usuariosexperimentados.Lasintaxisesestricta,yloserrorespuedensergraves.

53 Ensuma,unCUIesadecuadoparausuariosexpertos,noparaprincipiantes.Paraaquellos resultanmsrpidos,porloquesepuededisearunCUIcomopartedeunainterfaz,para quesepuedautilizarunavezquesetengaexperiencia.

Interfacesdemens.Unmen esunalistadeopcionesquesemuestranenlapantallao enunaventanadelapantallaparaquelosusuarioselijanlaopcinquedeseen.Losmens permitendoscosas:navegardentrodeunsistema,presentandorutasquellevandeunsitioa otro,yseleccionarelementosdeunalista,querepresentanpropiedadesoaccionesquelos usuariosdeseanrealizarsobrealgnobjeto.

Las interfaces de mens aparecen cuando el ordenador se vuelve una herramienta de usuarioynoslodeprogramadores.Lasactualesinterfacesgrficasuorientadasaobjetos siguen utilizando este tipo de interfaces (los distintos estilos de interfaces no son mutuamenteexclusivos).

Existendistintostiposdemens. Losprimerosfueronlos mensdepantallacompleta, estructuradosjerrquicamente(VaselaFigura10).

54

Figura10.Mendepantallacompleta(NortonUtilities)

Los mens de barra, situados en la parte superior de la pantalla, son profusamente utilizadosenlasaplicacionesactuales.Contienenunalistadeaccionesgenricasquedan pasoamensdesplegablesdondeseconcretan(VaselaFigura11).

Figura11.Mendebarraymendesplegable Estosmenspuedenllevarasuvezaotros:sonlosmensencascada(VaselaFigura12). Puedencambiardinmicamente,ydeshabilitaropcionesquenoestndisponiblesenun momentodado(marcndolashabitualmenteengris).

55

Figura12.MensencascadadelabarradeiniciodeWindowsME

Laspaletasobarrasdeherramientas(VaselaFigura13)sonmensgrficosconacciones, herramientas y opciones que se pueden colocar en la pantalla. Se utilizan mucho en programasgrficos.

Figura13.PaletasdeherramientasenMicrosoftPowerpoint Los menscontextuales omens popup (VaselaFigura14)sonlosmsrecientes. Se llaman as porque el contenido del men depende del contexto de trabajo del usuario.

56 Contienennicamentelasopcionesquesonaplicablesalobjetoseleccionado,msalgunas deusofrecuentequetambinsonaccesiblesdesdeelmendebarra.

Figura14.MencontextualdeuniconoenelescritoriodeWindowsME

Las interfaces de mens, bien estructuradas, son buenas para usuarios principiantes o espordicos. Son fciles de aprender y de recordar. Pueden existir mens simples y avanzados,paraadaptarsealtipodeusuario.

Precauciones: No ocupar demasiado espacio de la pantalla, recordar la informacin acumuladademensprecedentes,nocolocardemasiadoselementosenelmen,agruparlos demaneralgica(noenordenalfabtico,porejemplo;estoayudaarecordarlos),permitir la personalizacin por parte del usuario, usar una terminologa adecuada y consistente dentrodelprogramayconotrosprogramas(Exit,Quit,Escape,Close,Return,Back).Las interfacesdemenssernutilizadasnormalmenteenconjuncinconlosotrosestilosde interfaces.

57 Interfacesorientadasaobjetos (objectorienteduserinterfaces,OOUIs).Suaspectoes similar aldelas GUIs. Ladiferencia estriba enel modelosubyacente: las GUIsson interfacesorientadasalaaplicacin,mientrasquelasOOUIsestnorientadasalobjeto.

Cuadro1.Principalesdiferenciasentrelosestilosdeinterfazorientadasalaaplicacinya losobjetos. Interfacesorientadasalaaplicacin

o

Interfacesorientadasaobjetos

Laaplicacinconsisteenun o Elproductoconsisteen icono,unaventanaprincipalyvarias unacoleccindeobjetosque secundarias cooperanyvistasdedichosobjetos o Losiconosrepresentan o Losiconosrepresentan aplicacionesoventanasabiertas objetosquesepuedenmanipular directamente o Losusuariosdebenabrir o Losusuariosabrenobjetos unaaplicacinantesdetrabajarcon comovistasenelescritorio objetos o Proporcionaalusuariolas o Proporcionaalusuariolos funcionesnecesariaspararealizarlas materialesnecesariospararealizar tareas lastareas o Secentraenlatarea o Secentraenlasentradasy principaldeterminadaporlaaplicacin salidasdelosobjetosytareas
o

Lastareasrelacionadasson soportadasporotrasaplicaciones Estructurargida:funcin

o o o

Lastareasrelacionadas sonsoportadasporelusodeotros objetos o Estructuraflexible:objeto

o

Losusuariospuedenquedar o Losusuariosnodeben atrapadosenunatarea quedaratrapadosenunatarea Losusuariospueden realizartareasasupropiogusto o Serequierenpocosobjetos, quesereutilizanenmuchastareas

o

Losusuariosdebenseguir laestructuradelaaplicacin o Serequierenmuchas aplicaciones:unaportarea

58 ElobjetivodelaOOUIesqueelusuarioseconcentreensustareas enlugardeenel ordenadorycmoutilizarlasaplicacionesyficherosnecesariosparacumplirsusobjetivos. Porelloseescondelaorganizacindelsistemaalusuario(Ejemplodelosaccesosdirectos enWindows95OS/2).

ElestilodeinteraccindelosOOUIseseldeobjetoaccin(tambinsedaenlosGUIs, aunquemezcladoconelestiloaccinobjeto). Laventanaesunobjetoventana,nouna ventana de aplicacin; desaparecen pues los mens de barra y ganan terreno los contextuales.

Los objetos se pueden clasificar en tres categoras: datos, contenedores y dispositivos. Sobre ellos se definen distintas vistas (por ejemplo, la ayuda constituye una vista del objeto).Definirlosobjetosylasvistaseslomscomplicadodeldiseodelainterfaz.El objetodebeserfamiliaralusuario(encajarconsumodelomental,apoyadoensuvida diaria),yestarrelacionadoconelmundoreal:usodelasmetforas.(VaselaFigura15).

59 Figura15.Distintasvistasdelobjetoreloj UnejemplodeloquesepretendeconunainterfazOOUIeselconsiderarundocumento comounobjetosobreelcualrealizartareastalescomoincorporargrficosytextos,sin necesidaddeusarprogramasdistintosparacadaunadeellas.Estosprogramassuelentener funcionesquesesolapan,conelconsiguientegastoextraenespacioydinero.

Actualmenteexisteunamezcladeproductosorientadosalaaplicacinyalobjeto,aunque seest produciendounamigracinaestos ltimos.Lasaplicacionesestndejandopasoa conjuntosdeobjetos.Elserhumanoestcontinuamenteinteractuandoconlosobjetosque le rodean, y tiene unas expectativas sobre cmo stos deben comportarse, basada en pasadasexperienciasconestosobjetosuotrossimilares.Silainterfazestbiendiseada, elusuarioencontrar larespuestaqueesperaasuaccin;sinoesas,puedeserfrustrante paraelusuario,quehabitualmentetiendeaculparseasmismopornosaberusarelobjeto. Enmuchasocasionessetratadeobjetosmaldiseados,dondesueleprimarlaestticasobre la usabilidad, cuyas indicaciones de uso son confusas (vase la Figura 16), o no se consideralapredisposicindelosusuarios.

Cuandosediseaunobjetoesprecisopensarenquinesvanausardichoobjeto,yqu expectativasvanatenersobresuformadeuso,tantosisonobjetosconocidos(elusuario esperaquesecomportedeunaformadeterminada)comosisetratadeobjetosnovedosos (elusuariotratadeasociarlosalosqueconoce).

60

Figura16.Ejemplodeinterfazconfuso

Eldiseodeunainterfazesfundamentalparaelxitodeunprograma.Unbuenprograma conunapobreinterfaztendr unamalaimagen,yalcontrario,unabuenainterfazpuede realzarunprogramamediocre.

Los objetivos delos usuariossonmuyvariables; inclusounusuariopuedecambiar su objetivocuandorealizaunamismatarea.

Los programas son usados por usuarios con distintos niveles de conocimientos (desde novatoshastaexpertos).As pues,noexisteunainterfazvlidaparatodoslosusuariosy todaslastareas.Debepermitirselibertadalusuarioparaqueelijaelmododeinteraccin que ms se adece a sus objetivos en cada momento. La mayora delos programas y sistemasoperativosofrecenvariasformasdeinteraccinalusuario.

Modelos.Existentrespuntosdevistadistintosenunainterfazdeusuario:eldelusuario,el delprogramadoryeldeldiseador(analogadelaconstruccindeunacasa). Cadauno

61 tieneunmodelomentalpropiodelainterfaz,quecontienelosconceptosyexpectativas acercadelainterfaz,desarrolladosatravsdesuexperiencia.

Elmodelopermite,entreotrascosas,explicaropredecircomportamientosdelsistemay tomarlasdecisionesadecuadasparamodificarelmismo. Losmodelossubyacenenla interaccinconlosordenadores,deahsuimportancia.

Modelo del usuario. El usuario tiene su visin personal del sistema, y

espera que ste se comporte de una cierta forma, que se puede conocer estudiando al usuario(realizandotestsdeusabilidad,entrevistas,oatravsdeunarealimentacin).Una interfazdebefacilitarelprocesodecrearunmodelomentalefectivo.

Para ello son de gran utilidad las metforas, que asocian un dominio nuevo a uno ya conocidoporelusuario;unejemplotpicoeslametforadelescritorio,comnalamayora delasinterfacesgrficasactuales.Lasmetforasconstituyenunaayuda,relacionandoel sistemaconalgoyaconocidoporelusuario:escritorio(VaselaFigura17),saladejuegos infantil(VaselaFigura18).Sondosejemplosdelasventajasdelusodegrficos.

62

Figura17.MetforadelescritorioenWindowsME

Figura18.Metforadelcuartodejuegos

Modelo del programador. Es el ms fcil de visualizar, al poderse

especificarformalmente. Est constituidoporlosobjetosquemanipulaelprogramador,

63 distintosdelosquetrataelusuario(ejemplo:basededatosagendatelefnica). Estos objetosdebenescondersedelusuario. Los conocimientos del programador incluyen la plataforma de desarrollo, el sistema operativo,lasherramientasdedesarrollo,especificaciones.Sinembargo,estonosignifica necesariamentequetengalahabilidaddeproporcionaralusuariolosmodelosymetforas ms adecuadas. Muchos no consideran el modelo del usuario del programa, y s sus propiasexpectativasacercadecmotrabajaelordenador:

Modelodeldiseador.Eldiseadormezclalasnecesidades,ideas,deseos

delusuarioylosmaterialesdequedisponeelprogramadorparadisearunproductode software.Espues,unintermediarioentreambos.

El modelo del diseador describe los objetos que utiliza el usuario, supresentacin al mismoylastcnicasdeinteraccinparasumanipulacin.

Elmodeloconsta,pues,detrespartes: presentacin,interaccinyrelacionesentrelos objetos(vaselaFigura19).

Lapresentacinesloqueprimeroquecaptalaatencindelusuario,peromstardepasaa unsegundoplano,yadquieremsimportanciacmoelproductocumplelasexpectativas delusuario.Lapresentacinnoeslomsrelevante,yunabusoenlamisma(porejemplo, enelcolor)puedesercontraproducente,distrayendoalusuario;eselconocido:

64

La segunda parte define las tcnicas de interaccin del usuario, a travs de diversos dispositivos.

Laterceraeslamsimportante,yesdondeeldiseadordeterminalametforaadecuada queencajaconelmodelomentaldelusuario.Elmodelodebecomenzarporestaparteeir haciaarriba.Unavezdefinidalametforaylosobjetosdelainterfaz,losaspectosvisuales saldrndeunamaneralgicayfcil.

Figura19.Representacindelmodelodeldiseador:ellookandfeeliceberg,de IBM(1992) Estosmodelosdebenestarclarosparalosparticipanteseneldesarrollodeunproducto,de forma que se consiga una interfaz atractiva y a la vez efectiva para el trabajo con el programa. Una interfaz no es simplemente una cara bonita; esto puede impresionar a

65 primeravista,perodecepcionaralalarga.Lorealmenteimportanteesqueelprogramase adaptebienalmodelodelusuario,cosaquesepuedecomprobarutilizandoelprograma msalldelaprimeraimpresin.

4.2 ASPECTOSDELAPSICOLOGAHUMANA

Hay ciertos aspectos del diseo de interfaces que tienen una relacin directa con la psicologadelusuarioyquesonindependientesdesusconocimientosoexperiencia. Al disear interfaces de usuario deben tenerse en cuenta las habilidades cognitivas y de percepcin delas personas,yadaptar elprograma aellas. As,unadelas cosas ms importantesqueunainterfazpuedehaceresreducirladependenciadelaspersonasdesu propia memoria, no forzndoles a recordar cosas innecesariamente (por ejemplo, informacinqueapareci enunapantallaanterior)oarepetiroperacionesyarealizadas (porejemplo,introducirunmismodatorepetidasveces).Lapersonatieneunashabilidades distintasdelamquina,ystadebeutilizarlassuyasparasoslayarlasdeaquella(comopor ejemplolaescasacapacidaddelamemoriadecortoalcance).

Shneiderman(1980)aseguraquelosaspectosatenerencuentaparalograrunbuendiseo son: lasobrecarga deinformacin, complejidad delas tareas, tiempo derespuesta del sistemaygradodecontrolsobreelsistemaquesepermitealusuario.

66 Sielusuarioconsideraeltiempoderespuestaexcesivo,puedepensarqueelsistemaes pobre,silarespuestaesrpidapuedeestardispuestoaignoraralgunasdeficienciasdel sistema.Estoindependientementedelascaractersticasqueproporcioneelsistema.

Miller(1957)afirmaquelamemoriahumanaesjerrquicaconunamemoriaacortoplazo, compuesta de unas siete localidades y que va acompaada por otra memoria ms permanentealaquesetransfiereinformacin.Siunainterfazpresentaalusuariomsde sieteelementosdistintosdeinformacinalmismotiempo,esposiblequenoseretengan todosenlamemoriaacortoplazoyquealgunosseolviden.Debidoalaslimitacionesdela memoriaacortoplazo,unindividuosientealiviocuandosecompletaunaoperacinyse puedeliberardichamemoria. SegnestudiosinformalesdeShneidermanrevelaquelos usuariosprefierenoperacionescortasensecuenciaqueunasolaoperacinmscomplicada.

EldiseodeunainterfaznodebeseremprendidosloporelIngenierodeSoftware,es necesarioconsultarconlosusuariosdelsistemayanalizarsusconocimientosbsicosy necesidades:

Interfacesiniciadasporelusuario:elusuarioest almandoycontrolaelproceso desudilogoconelcomputador.

Interfacesiniciadasporelcomputador: elsistemaoriginaeldilogo,elusuario respondeybasndoseenlarespuestaelcomputadorseleccionalasiguienteetapadela relacin.

67

4.3 PROCESODEDISEODEINTERFACESDEUSUARIO

Enelprocesodediseodeunainterfazdeusuariosepuedendistinguircuatrofases:

Reunir y analizar lainformacin delusuario. Qu tipode usuarios vanautilizar el programa,qu tareasvanarealizarlosusuariosycmolasvanarealizar,qu exigenlos usuarios del programa, en qu entorno se desenvuelven los usuarios (fsico, social, cultural). Disearlainterfazdeusuario.Esimportantededicartiempoyrecursosaestafase,antes de entrar en la codificacin. En esta fase se definen los objetivos de usabilidad del programa,lastareasdelusuario,losobjetosyaccionesdelainterfaz,losiconos,vistasy representacionesvisualesdelosobjetos,losmensdelosobjetosyventanas.Todoslos elementosvisualessepuedenhacerprimeroamanoyluegorefinarconlasherramientas adecuadas.

Construirlainterfazdeusuario. Esinteresanterealizarunprototipoprevio,unaprimera versin del programa que se realice rpidamente y permita visualizar el producto para poderloprobarantesdecodificarlodefinitivamente.

Validarlainterfazdeusuario.Sedebenrealizarpruebasdeusabilidaddelproducto,aser posibleconlospropiosusuariosfinalesdelmismo.Esimportante,ensuma,realizarun diseoquepartadelusuario,ynodelsistema.

68

4.3.1

Tcnicas avanzadas para el diseo de interfaces de usuario. El proceso de

diseodeinterfaces deusuariodebetenerencuentamuchosaspectosimportantespara lograr sus objetivos, a continuacin se presentan algunas tcnicas muy tiles en el momentodedisearGUIs:

Presentacindelainformacin.Nosedebencolocardemasiadosobjetosenlapantalla,y losqueexistendebenestarbiendistribuidos.Cadaelementovisualinfluyeenelusuariono sloporsmismo,sinotambinporsucombinacinconelrestodeelementospresentesen lapantalla. Enelejemplo(VaselaFigura20),elnmerodeelementosvisualesque percibenson:enelcasoa)1(elfondo);enb)3(lalnea,loqueest encimayloqueest debajo);enc)son5(elespaciofueradelrecuadro,elrecuadro,lalneayelespacioencima ydebajodesta);finalmente,end)elnmeroseelevaa35,siguiendoelmismocriterio.

Figura20.Elementosdediseodepantallaysupercepcinvisual

69 Color. Es probablemente el elemento de la interfaz que con ms frecuencia es mal utilizado. El color comunica informacin, no es slo decorativo (ejemplo: reforzar mensajesdeerror). Debenutilizarsecombinacionesadecuadas(porejemplo,laspaletas proporcionadas porlossistemas operativos). Elcolordebeatraerlaatencin, pero no cansardespusdeunratodetrabajo. Esespecialmenteimportanteseguirlaslneasde diseoexistentes.Principiobsico:disearprimeroenblancoynegro,yluegoaadirel color.

Audio. Primero es preciso ver cundo es ms apropiado que la informacin visual. Segundo,determinarelsonidoadecuado.Tercero,permitirlapersonalizacin(volumeny desactivacin).Comoenelcasodeloscoloresexistenguasdeuso.Enlugaresdetrabajo abiertos,puedeserpocoefectivo;adems,puedeserembarazosoparaalgunaspersonas.El sonido debe usarse para informar, no cuando no aade nada nuevo (por ejemplo, un mensaje de aviso de correo o de bienvenida, respectivamente, al iniciar una sesin de trabajo).

Animacin.Sedefinecomouncambioeneltiempodelaaparienciavisualdeunelemento grfico. Ejemplosdesuuso:progresodeacciones(copiadeficherosenWindows95, instalacin de programas), estado de procesos (iconos deimpresora), acciones posibles (cambiosenelcursoraldesplazarelratn).Laanimacinpuedeayudarasubrayariconos importantes,mostrarelestadodeunobjetoparticularoexplicarsucomportamiento.

70 Diseo internacional. Debehacerseunusoadecuadodelaterminologa. Haymucho trabajo en este campo. Debe tenerse cuidado con las diferencias culturales (gestos, terminologa,dibujos,formatosdetelfonosocalendarios,etc.).

Eleccindecontroles. Muchasvecesexisteladudadequ controlesutilizar(Vasela Figura21).Enrealidadnoexisteuna nicaformacorrecta.Unaspectoaconsideraresla escalabilidad (men de 10/1000 elementos; ejemplo: programas del men inicio de Windows95).

Ejemplodealternativas:usarunmen debarraodepaleta,permitirarrastrarobjetosono (problema:noexisteindicacinvisualdequesepuedaarrastrarelobjeto:qu objetosse pueden arrastrar? a dnde sepueden arrastrar? qu ocurrir cuando lleguen all? se podrdeshacerlaaccin?).

Figura21.Diferentescontrolesparalosmismosdatos

71

Existen diversasguasdediseosacadasdeexpertos ycomits,quecomplementanlas reglasdeoroestudiadasanteriormente.Porcitaralgunasdeellas:

Demasiadasimetrapuedehacerlaspantallasdifcilesdeleer. Siseponenobjetossinalinear,hacerlodrsticamente. Asimetra=activo,simetra=sereno. Elementosdetamaoycolorsimilaressepercibencomopertenecientesaungrupo. Asumirerroresenlaentradadelusuario. Disearparaelusuario,noparademostrarlospropiosconocimientostecnolgicos. Unosgrficosespectacularesnosalvarnaunamalainterfaz.

4.4 ESTILOSDEINTERACCIN

4.4.1 Estilos de Interaccin Grficos. Los principales estilos de interaccin para las interfacesgrficashombrecomputadorason:

Manipulacindirecta. Losusuariossientenqueestnacargodelasactividadesdela computadora. Cuandorealizanalgunaactividadfsicaenella(clickenalgnobjetopor ejemplo), sta les proporciona un resultado. Continuamente estn recibiendo una

72 retroalimentacin.Lainterfazgrficademanipulacindirectaesaquellaenlacualatravs deaccionesfsicaslosusuariosmanipulanlosobjetosgrficos(sonhechosdeacuerdocon entidadesyexperienciasdelmundoreal. Porejemplo: metforasdelmundoreal)enla pantalla. Unabuenainteraccindemanipulacindirectadaelsentidodecontroldela aplicacin al usuario. Un buen ejemplo de esto puede ser un panel de control o preferenciasenelcualelusuariopuedacambiarloscoloresestndaresdelaaplicacin,lo altodelvolumenenlossonidos,etc.Otroejemplodeestoeselpodermoverelindicador delmouseatravsdelapantallayquenopasenadahastaque lpresioneelbotndel mouse en un objeto. Shneiderman [1992] propuso en su terminologa los siguientes principiosparadescribirlamanipulacindirecta:

Contnuarepresentacindelosobjetosyaccionesdeinters. Acciones fsicas o presin de botones etiquetados en lugar de sintaxis muy compleja.

Rpidas y reversibles operaciones que afectan a los objetos de inters son inmediatamentevisibles.

Conelusodemanipulacindirectasepuedeevitarelusodesintaxiscompleja,porlotanto, sereducenloserrorescometidosconelusodelmismo,ayudandoalosnovatosaaprender msrpidolafuncionalidadbsicadelsistema.Porejemplo,paraborrarunarchivodentro delainterfazdeMacintoshseseleccionavisualmenteelarchivoysearrastrahastaelbote debasura.

73

Manipulacin directa es un estilo de interfaz muy fcil de aprender y muy poderosa, muchas veces es presentada como el mejor estilo de interfaz, pero sin embargo tiene algunaslimitaciones.Laexactituddentrodelamanipulacinesdejadamuchasvecesala habilidadquetengaelusuarioconelusodelmouse(p.eje.ajustarunbotnmovibleenun valorespecificado),requieredemuchoconocimientodelmundoreal(p.eje.esnecesario queunapersonasepautilizarunacalculadoracomnycorrienteparaqueselefaciliteel usodelaqueest representadaenlapantalla),lavelocidadenusuarioexperimentadoses reducidasielusuarioesforzadoautilizarsolomanipulacindirectacuandootrotipode interaccinesmsrpida(p.eje.paraborrartodoslosarchivosconextensin"txt"enuna carpetaprobablementeserequieraencontrarlosvisualmentedentrodemuchosiconosy arrastrarlos hasta el bote de basura siendo ms fcil borrarlos como en DOS con un comando"del*.txt").Comnmentemanipulacindirectaesutilizadoconotrosestilosde interfacescomolaejecucindecomandospormediodemensoporeltecladopermitiendo unamejorusabilidaddelamisma.

Loquetpuedesveresloquepuedesconseguir(WYSIWYGWhatyouseeiswhatyou get). Nodebedehabersecretosparaelusuario,nicomandosabstractosqueprometan resultadosfuturos,ascomosignificantesdiferenciasentreloqueellosvenenlapantallay loquepuedenconseguirenlaimpresora. EnunainterfazWYSIWYGlarepresentacin grficaconlacuallosusuariosinteractanenlapantallaesesencialmentelamismaimagen

74 creada porlaaplicacin. Muchas delas aplicaciones grficas tienen algncomponente WYSIWYG.

Existen muchos editores que tienen interfaces WYSIWYG; principalmente aquellas aplicacionesgrficas.Consideremoselsiguienteejemplo:Ascomoseveesteprrafoen lapantalla,asseverenelpapel,incluyendolaspalabrasbold,italic,ascomolasangra, losmrgenesetc.

EnunainterfazquenoutiliceWYSIWYGseutilizancdigosdecontrolparadecirqueuna palabraserbold,itlica,etc.Elprrafosiguientemuestracomoloscdigosdecontrolse venenlapantalla:Aqusemuestralaspalabras@b(bold),@i(italic).Conesto,nosotros necesitamos imaginarnos en el momento de estar creando nuestro documento en el procesadordetextocomoserelresultadoenimpresorapuestoquenecesitamosutilizarlos cdigosdecontrol.

Las interfaces WYSIWYGtienealgunasdesventajas.Elementos comolaresolucin, la intensidaddelcoloryalgunasotrascaractersticasnosonigualesenunapantallayenun dispositivodeimpresin,porloqueesmuydifcilcrearunacopiaexactadelapantallaen nuestro papel. Otro problema mayor, es que algunas aplicaciones no pueden ser implementadasconpuroWYSIWYG. Lasinterfacesdeprocesadoresdetextossonlas interfacesmscomunesdeestetipo,normalmenteenestetipodeinteraccionesnosotros podemos crear grficas, cambiar tipos de letras, tamaos etc. pero algunas veces no

75 podemoshacercambiosescalaresenlatareadelusuario,(moverdirectamenteeltamaode lasangraarrastrandounbotndederechaaizquierdadentrodelahoja)perospodramos hacerlaconalgnotrotipodeinteraccin,cuandoestosucedeestetipodeinterfacesson llamadas despreciablemente como: lo que t ves es todo lo que puedes conseguir (WYSIAYGWhatyougetisallyouget).

WYSIWYGymanipulacindirectasondistintosconceptos.Porejemplo,larepresentacin deunaimagengrficapuedesermodificadaporlamanipulacindirectadelamisma,yen unaWYSIWYGpuedesermodificadaporalgnotroestilodeinteraccin(eje.comando). Elusodeestosdosconceptosjuntamentehacealainterfazmuypoderosa,fcildeaprender yrazonablementerpidodeusar,comoenmuchasinterfaceshasidodemostrado.

Interfacesdeusuariobasadaseniconos. Uniconoesunarepresentacingrficadeun objeto,unaaccin,unapropiedadoalgnotroconcepto.Porejemplo,unclickenunicono querepresentelaverificacindeortografaenunprocesadordetextorealizaestaaccin. Esteestilodeinterfazsebasaengrficas(iconos)pararepresentarunobjeto,unaaccin, una propiedad o algn otro concepto. No siempre el uso de iconos es mejor para representaralgnconceptooaccin,muchasvecesesmejorutilizartextopararepresentar algo. La Manipulacin directa no est directamente relacionada con iconos, tan manipulableeseltextocomounicono,entonces,nopodemosdecirqueeliconoseamejor queeltextooviceversa,perospodemosdecirquelosiconostienenlassiguientesventajas: iconos bien diseados pueden reconocerse ms rpido que las palabras, toman menos

76 espacioenlapantalla,sisetomamuchocuidadoeneldiseodeiconos,puedeserun lenguajeindependiente,permitiendoalainterfazserusadaendiferentespases. Eldiseodeiconostienealmenostresmetasysuimportanciadependedelaaplicacinen lacualestnsiendoutilizados:

Reconocer. Que tan rpida y correctamente el significado del icono puede ser reconocido.

Recordar.Quetanbienelsignificadodeliconopuedeserrecordadounavezquese haaprendido.

Discriminar.Quetanbienuniconopuedeserdistinguidodelosotros.

Losiconosquerepresentanobjetossonmuyfcilesdedisear(VaselaFigura22a,b,c.). Laspropiedadesdelosobjetospuedentambinrepresentarsefcilmente,porejemplo:la texturadelobjeto,elgrosordeunalnea,eltipodeletraetc. Losvaloresnumricos puedenserrepresentadosporuniconoquerepresenteestosvalorescomouncalibradoroun discoquenosdestainformacin.(VaselaFigura22d,e).

Figura22.Diferentestiposdeconos

77 Las acciones (comandos) tambin pueden ser representados por iconos. Hay varias estrategiasparahaceresto.

Eliconocomandopuedeserrepresentadoporunobjetoqueseautilizadoenelmundoreal paraejecutarestaaccin.Unastijeraspuedenservirparacortaralgunaparteseleccionada, unabrochaparapegarlapartecortada,unalupaparahacerunacercamientoaunaimagen (VaselaFigura23). Estosiconossonmuydifcilesdeaprenderdebidoaqueprimero tienequereconocerloqueeseliconoydespustienequeentenderquesloquesepuede hacer con este. Aunque el reconocer el icono muchas veces es muy fcil, existe el problemaquepuedeserconfundidoconms dealgunaaccin quepuederealizar, por ejemplo,elusodelabrochapuedesignificarelpegaralgoquehasidopreviamentecortado o pintar con algn color algn rea. Estas dos acciones (pegar y pintar) pueden ser razonablesparaelicono,porlotantoestepuedeserambiguo,aunque,dependiendodela aplicacin,algunadelasdostareas(pegarypintar)tendrunsentidomsrazonable.

Figura23.Iconoscomandos

78 Otraformadediseariconosquerealicenunaaccinesmostrandoelcomandodandoel efectoantesydespusdeaplicarlo(VaselaFigura24). Algunosdeestostambinse puedenmostrarporrepresentacionesmsabstractas(VaselaFigura25),enlascualesse puededependerdeconceptosespecficosculturalesparasucomprensin,unejemplode estosesundibujooctagonalsealandostop(alto)opuedesermsgenricocomounaX paraindicar"borradooeliminado".

Figura24.Iconosantesydespusdesuaplicacin.

Figura25.Iconosmsabstractos

79

Los iconos no necesariamente tienen que ser reconocidos. Algunos iconos tal vez no representennadaperounavezmemorizadospodrnserrecordadosydiscriminados.

En muchas interfaces se utilizan iconos para discriminar los archivos de las diferentes aplicaciones,esdecir,todoslosarchivoscreadosporlamismaaplicacintienenelmismo icono.Estoesmuy tilparacuandodentrodeundirectorioocarpetatenemosdiferentes archivos creados por diferentes aplicaciones, se puede saber en qu aplicacin fueron hechosunavezqueseaprendaeliconopormediodelcualsepuedehacerestarelacin.

4.4.2

EstilosdeinteraccinnoGrficos.Existenotrasformasdeinteraccinquenoson

"basadosengrficosperopuedenserutilizadosenaplicacionesgrficas.

MendeSeleccin.Losmenspuedenserusadosenaplicacionesgrficasynogrficas. Laprincipalventajaquetienenesquecuandoseest trabajandoconsolovertextooun iconoenunmensepuedereconocerlapalabraysignificadoyasrecordarsufuncin(ver lapalabraabrirenelmenarchivo,sepuedeabrirundocumento)adiferenciadetenerque recordartodalainstruccinconsusintaxis.Estetipodeinteraccinesmuyatractivapara nuevosusuariosenloscualesnotienenquememorizarmuchoscomandosnisintaxis.

Ellenguajedecomandos.Eslatradicionalmaneradeinteractuarconlacomputadora. Conestatcnicaesfcildeextender(solamentehayqueagregarunnuevocomando).Es

80 bastanterpidadeusarparausuariosconexperiencia.Loserroressonmsprobablescon lenguajedecomandosqueconmens.

Lenguaje natural. Frecuentemente es propuesto como el ltimo objetivo para los sistemasinteractivos.Silacomputadoraescapazdeentendernuestroscomandoseningls (hablados o escritos) cualquier persona puede ser capaz de usarlos. Sin embargo, el reconocerlavozimplicamuchosproblemasas comoelescribirlargassentenciasesmuy tedioso.Tambin,comoellenguajenaturalnolimitaelconjuntodecomandosquedebe manipular este puede ser bastante ambiguo, con esto, los usuarios se cuidan de hacer peticionesquenopuedensercumplidas,guiandoaunafrustracinyhaciendopobreel rendimiento del sistema. Este problema se puede corregir limitando el vocabulario a emplear,conestolosusuariossefamiliarizanconlascapacidadesdelsistema,lograndoas bajarprobabilidaddehacerpeticionesnorazonables(eje.Sistemasoperativos,programas paradibujar).

Dilogodepreguntarespuesta.Lacomputadorainiciahaciendounapreguntayelusuario respondea stapormediodelteclado.Sielconjuntoderespuestasespequeosepuede darlaopcindeseleccionardeunmen laopcinenlugardeteclearla.Unproblemade este tipodeinteraccin eslaincapacidad parairalgunospasosatrsparacorregiruna respuesta,mayoran,solamentesetienenelcontextodelapreguntaparacontestarla,esto contrastaconelllenadodeformas(otroestilodeinteraccin)enelcualenlaformason visualizadosloscamposquesernintroducidos.Considreseelsiguienteejemplo,sienel

81 contextodice:"direccindelapersona",conlaformadedilogodepreguntarespuestano sabremossihayqueincluirlacoloniaenestaparteoesuncamposeparado,encontraste conlaformanosotrospodemosvertodosloscamposqueserncapturados.

Cuadro2.ComparacindealgunosEstilosdeInterfaz

Manipulacin Men Directa Medio Medio Bajo Medio

Llenado Lenguaje deLenguaje Dilogo de Comandos Natural P/R Formas Bajo Alto Bajo Medio Alto Alto Alto Alto Bajo Medio Alto Alto Bajo Bajo Bajo Alto Alto

Tiempo de Bajo aprendizaje Velocidad de Medio uso Propenso errores a Bajo

Extensibilidad Bajo

Tecleo Ninguno Ninguno Alto Alto Alto* (habilidad) *Asumiendoquelaentradaesporteclado,noporreconocimientodevoz.

4.4.3

MEDIDASDEUSABILIDAD

82 Definimos usabilidad de un sistema o herramienta como una medida de su utilidad, facilidaddeuso,facilidaddeaprendizajeyapreciacin paraunatarea,unusuarioyun entornodado. Utilidad. Lautilidad es lacapacidad deuna herramienta deayudara cumplir tareas especficas. Aunque esta afirmacin parece obvia, es importante observar que una herramientaqueesmuyusableparaunatarea,puedesermuypocousableparaotra,an inclusosisetratadeunatareasimilarperonoidntica.Unmartilloyunamazasonmuy similares.Sinembargo,cadaunodeellosesadecuadoparaunatareaymuypocousable paraotras.

Facilidad de uso. La facilidad de uso est en relacin directa con la eficiencia o efectividad,medidacomovelocidadocantidaddeposibleserrores.Unaherramientamuy fcil deusarpermitir asuusuarioefectuar ms operaciones porunidaddetiempo (o menor tiempo para la misma operacin) y disminuir la probabilidad de que ocurran errores. Ningunaherramientaosistemaesperfecto,perounaaltaprobabilidaddeerror puedellegarinclusoaderivarenunaimposibilidaddeusoporfaltadecalificacin,segn culesseanloscriteriosparaevaluarlaherramientaosistema.

Un caso especial deestas necesidades extremas sonlas herramientas demisin crtica comoporejemplodiagnsticomdicoyaeronavegacin.Sonreasquetpicamentesuelen requeriraltsimosgradosdeeficienciayprecisin.Unafallaenestetipodeaplicaciones

83 puedetenerseriasconsecuencias. Sinembargo,atencin: lafacilidaddeusonodebe confundirseconlafacilidaddeaprendizaje.

Facilidaddeaprendizaje.Lafacilidaddeaprendizajeesunamedidadeltiemporequerido paratrabajarconciertogradodeeficienciaenelusodelaherramienta,yalcanzaruncierto gradoderetencindeestosconocimientosluegodeciertotiempodenousarlaherramienta osistema.

Si bien la facilidad de aprendizaje suele tener una relacin directa con la usabilidad, estrictamentehablandoestononecesariamenteesas.Lafacilidaddeaprendizajedebera serunamedidarelativa,yaquehaysistemasmuycomplejosquenopuedenseraprendidos rpidamente. Que un software para control y monitoreo de maquinaria de produccin requiera6mesesdeaprendizajeparaunusuariotpico,noquieredecirqueespocousable. Dadalacomplejidaddeltema,difcilmentepodraaprenderseenmenostiempo.

Porlotanto,loimportanteescompararentrevariasposiblesinterfacesyverculeslaque requieremenostiempoy/oquedamejorretenida.Silaversinsiguiente,sinaumentoenla complejidad del servicio brindado tomara 8 meses de aprendizaje, ahora s estaramos frenteaunproblemadeusabilidad.

Apreciacin. Laapreciacinesunamedidamenosobjetivaquelasanteriores,perosin embargo, no menos importante. Es una medida de las percepciones, opiniones,

84 sentimientosyactitudesgeneradasenelusuarioporlaherramientaosistema;unamedida, sisequiere,desuseduccinoelegancia.

Loimportantedeestamedidanoestenerlaenformaabsolutasino,otravez,compararlao analizarlaenformarelativa.Estacomparacinpuedesercontralacompetencia,contrala versinanteriordelmismoproducto,contraotrasposibilidadesqueseestntomandoen cuenta. Elotropuntoimportanterespectodelaapreciacinestratardeanalizarhasta dondetieelrestodelasmedidas.

Unusuarioalquenolegustaunainterfaz,puedegenerarmserrores,otardarmsen aprenderla. Debemosaprenderasepararlasmedidasestrictasdelasquepuedantener desviacionesdebidasaunaapreciacinnegativa.

4.5.1Mtodosparaconocerlausabilidad.Existendosmtodosmuyrecomendablesa lahoradeevaluarlausabilidaddeunainterfazdeusuario,ellosson:

Evaluacinheurstica. Esunanlisistericodeunexpertoenel readeinterfaces.Se hacesiguiendoguasyverificandoelcumplimientodealgunasreglasbsicas.

85 Segn Jakob Nielsen el creador de la tcnica, la evaluacin heurstica es el nombre genrico deungrupodemtodos basadosenevaluadores expertos queinspeccionan o examinanaspectosrelacionadosconlausabilidaddeunainterfazdeusuario.

Laevaluacinheursticadeunaaplicacinest basadaenlaobservacinporpartedeun expertoenusabilidadoeninterfaceshumanocomputadoradeciertosparmetrosoguas generales.

Testdeusabilidad.Unamedidaobjetivayconcretadelausabilidaddeunaherramienta, sitiooaplicacintomadaapartirdeusuariosverdaderoscontareasreales.

Eltestdeusabilidad,nospermitir:

Verificarlaexistenciadeposiblesproblemasdeusabilidaddeunainterfaz. Encontrarposiblessolucionesparalosproblemasencontrados. Establecer una medida concreta inicial contra la cual comparar a los competidores,futurosdesarrollosdeestemismosoftwareomodificacionesalactual.

Estos mtodos, o enfoques, no son contrapuestos sino complementarios. El Test de Usabilidad se diferencia de la Evaluacin Heurstica en el hecho de que el test toma medidasempricasmientrasqueelanlisisheursticoconsisteenunaevaluacintericade loshechosobservados.

86

EstudiosrecientesenelreadeInterfacesHumanoComputadoraindicanquelosTestsde usabilidadmuestrandndeestnlosproblemas mientrasqueelanlisisheursticoesms eficienteparaproponerposiblessoluciones.

RECURSOSNECESARIOSPARALLEVARACABOUNTEST

Rolesnecesariosparallevaracabountest,debehaberporlomenos3roles:

ElparticipanteoUsuario. Elfacilitadoromonitor. Losobservadores.

Plazos

Cuntotiempocreenquepuedenecesitarseparauntestdeusabilidaddeunsitio?Un mes,dosmeses?Unasemana).

Un test con 6 usuarios incluyendo el test piloto requiere entre 40 y 50 horas de un especialistaconalgodeayudadelstaffdedesarrollo.

Espaciofsicoyotrosrequerimientos

87 Unlaboratoriocompletodeusabilidadescaroycomplicado.Requieremuchoespacio(en m2),unahabitacinconunespejodeunsolosentidodividindola,equipodegrabacinde audioyvideo,etc.Sinembargo,enelenfoquellamadoDiscountusabilityengineeringse planteaunamaneramuchomssimpleymenoscostosadehacertests,basndoseenla regla80/20:el80%delosconocimientosyhallazgosdeuntestcompletoconel20%dela inversin.Paraestetipodetestsslonecesitamosunaoficinaoespacioamplio,unamesa, sillas,yelobjetodeltest.

Etapasdeuntestdeusabilidad

Lasprincipalesetapasdeuntestdeusabilidadson:

1.

Planificacin:Desarrollodelplandeltest,seleccindeparticipantesypreparacin delosmateriales.

2. 3.

Test:Pruebapiloto,ajustesytestdefinitivo. Conclusin:Anlisisdelosdatos,elaboracindelinformeyrecomendaciones.

Losmitos

Todostenemosideaspreconcebidasacercadecmolosusuariosvanausar(onopodrn hacerlo)unsitioosistema.Muchasvecesestasideasnoestnbasadasenobservaciones

88 objetivassinoensensaciones,comentarios,etc.Estospreconceptossonllamadosmitos. Afectan,ysonasuvezafectados,porlapercepcindeloshechosdeuntest.

4.5.2Procesosdeevaluacindelosdiseos.Losprocesosdeevaluacindediseosque se mencionan a continuacin tienen como objetivo aumentar el xito de los mismos, aumentandoelniveldeusabilidadylacalidadenelprocesodedesarrollo.

ProcesoGuide(graphicaluserinterfacedesignandevaluation). ElprocesoGUIDEes unprocesoenelcualsedanlaspautasparaeldiseoylaevaluacindeunainterfazgrfica deusuario,buscandoconelloaumentarlausabilidaddelainterfaz.Eltrminousabilidad, hacereferenciaalacalidaddelainterfaz.

ElprocesoGUIDEutilizaeldiseocentradoenelusuario,elcualconsisteendisearel sistemadetalmaneraqueseaintuitivoyconvenienteparaelusuariofinal,tratandode adaptarelsistemaaltipousuario,ynoqueelusuariosetengaqueadaptaral.

Proceso Rational Objectory (the rational objectory process). El Proceso Rational ObjectoryesunprocesodelaingenieradesoftwarediseadoporlacompaaRational SoftwareCorporationbuscandoincrementarlacalidadenelprocesodedesarrollo,mientras sereduceeltiempodeconstruccin.ElprocesoObjectorycapturamuchasdelasprcticas modernasdedesarrollodesoftwaredetalformaquepuedaseraplicadoaunampliorango deproyectosyorganizaciones.ElProcesoObjectorytomacomobaseelestndarindustrial

89 conocidocomoLenguaje deModelajeUnificado(UMLUnifiedModelingLanguage) paraguiarunaaproximaciniterativadeundesarrollodesoftwarebasadoencomponentes. 4.5 ELCOLOR

Elentendimiento delcolor yelmtododeexplotarlo paracrearelefecto deseadoson herramientas de gran valor. El color enriquece nuestra vida, al proporcionar una experienciavisualnatural.Entenderelcolorpuedeayudarleausarlodeformamsefectiva. Paraqueseveaelcolordebenestarpresentestreselementosfundamentales:luz,unobjeto iluminado,yunobservador.

Loscoloresquevemosestnafectadosporlaintensidaddelaluzyporsucomposicin espectral.Connivelesmsbajosdeiluminacin,losobjetosmuestranmenoscolor.Enun daluminosovemosmscolor,contrasteysaturacin.

Elespectrocromticomuestralagamadelongitudes deondadeenergaluminosaque puedeverelojohumano.Lasvariacionesenlaslongitudesdeondaalteranloscoloresque vemos. CmoIsaacNewtondemostr consusprismas,laluzblancaesunamezclade todosloscoloresdelespectrovisible.

Enrealidad,lasfuentesdeluzquecreemos "blancas"sediferencianensudistribucin espectral. Laluzdelcielo esblanca azulada. Las bombillas detungstenosonblanco amarillento. Para una evaluacin crtica del color, se usan fuentes de luz especial estandarizadasparaevitarladistorsindeloscolores.

90

Para evitardistorsiones,lascondiciones devisinestndarqueempleanfuentesdeluz especialessonmuyutilizadasparaevaluarpruebasdecolorenlaindustriadelaimprentay laedicin.

Lasondasluminosasquealcanzanelojo,estimulanunprocesovisualmuycomplejoque todavanocomprendemosporcompleto. Losconos(cones)delaretinarespondenalos tonosdecolorylaluminosidad.Losbastones(rods)slosonsensiblesalaluminosidad.

Tresclasesdeconosrespondenalasondasluminosas,detalmodoqueproducentodoslos coloresquevemos.

El ojo humanoesunexcelente juez delcolorenlas comparaciones directas. Podemos captardiferencias,especialmenteentrelostonosmssutiles,quesondifcilesdemedir.

Elojoest equipadoconunsistemaparaelbalanceautomticodelcolor,denominado: "adaptacincromtica".Seajustaaloscambiosglobalesdecolor,comoloscausadospor diferentesfuentesluminosas.

4.6.1Caractersticasdelcolor. Podemosexpresartodosloscolorescomocombinacin delostrescoloresprimarios(Rojo,AzulyAmarillo).Loscoloreselegidosysuinteraccin dependerndesisetratadeunsistemaemisororeflector. Elcolornosignificasloel

91 colorprimarioounadeterminadafrecuencia(talcomoseveenelarcoiris),sinotambin todaslasmezclasysensacionesquesomoscapacesdepercibir.Necesitamosalgunamanera dedefiniruncolordeterminadosinambigedad.Unaformaseradefinirloporsulongitud deonda,peroestopresentavariosproblemas:

a.

Solamenteloscolorespuros,elarcoiris,puedenespecificarsedeestaforma.La mayorasonmezclas.

b.

Inclusodosobjetosdelmismocolorsepuedenpercibirdistintossegnlaintensidad delcolorqueemitan:unopuedeserporejemplodeunazulbrillantemientrasqueel otroparecemsoscuroyambossonelmismoazulenlosdoscasos.

Unaposibilidadpararepresentarloscoloresconsisteenutilizarloscoloresprimariospara expresar un color determinado: especificar qu cantidad de cada uno interviene en la mezcla.Estoesloqueseconocecomoel"sistemaRGB",deRed(rojo),Green(verde),y Blue(azul).

steesprecisamenteelqueempleanlosmonitoresencolor;peroladesventajaesquepara nosotros resulta complicado trabajar con este sistema. Una forma ms intuitiva de representar los colores sera el "sistema HSL, el cual trabaja con tres componentes bsicos:matiz,saturacinybrillo,loqueseconocecomoelmodeloHSL:Hue,Saturation andLuminance.

92 Elmatizserefierealcolorens,loquedescribiramoscomorojo,verde,violeta,etc.El brillo se corresponde con nuestra apreciacin subjetiva de claridad y oscuridad. Por ejemploungrisclarotienemsbrilloqueungrisoscuro;elblancoeselcolormsbrillante, elnegroelmsoscuro.Porltimolasaturacinserefierealaslongitudesdequesesuman alafrecuenciafundamental.Cuantomenossaturadoesuncolor,msproporcindeblanco tiene, nos aceramos a los colores pastel. Cuanto ms saturado es un color ms nos acercamosaloscoloreschillonesoelctricos.Unarepresentacingrficaincluyendolas trespropiedadesanteriores,generaeldenominado"espaciodecolor".

Unodeloserroresmshabitualesalahoradedisearunapantallaeslade,intentando aprovecharlaposibilidaddeusarelcolor,acabarabusandode l. Estopuedeocurrir cuando en la aplicacin se presentan, por ejemplo, diferente gama de colores, lo que provocaconfusinalapersonaquevaamanejarla,yaqueacabapreocupndosemsde adaptarsuvistaalcontinuocambiodecolorquealcontenidodelainformacin.Tambin hayquehacerhincapi enevitarlascombinacionesquepuedanprovocarconnotaciones culturalesnegativas,quepuedenllegaraherirsusceptibilidades.

Veamos un ejemplo de combinacin errnea indiscriminada (Vase la Figura 26). La pantallaquesehaelegidoperteneceaunaaplicacinsobrehistorialesclnicos.Disponede dosbloquesdeinformacin:losdatospersonalesdelpacienteylarelacindelascitas anteriores a la actual, cada uno de ellos en un marco (frame). Realmente son dos informaciones que, aunque independientes, mantienen la asociacin de pertenecer a la mismapersona.Sinembargo,eldiseadorhadecididodistinguirclaramentelasdiferencias

93 alestablecerloscoloresverdeyrojocomofondoparaestosmarcos.Laconjuncindedos tonos tan distintos entre s invita a pensar que ambos conceptos son completamente exclusivos,aunqueenlarealidadnoseaelcaso,yaquetantolosdatospersonalescomolas citasanterioresserefierenalmismopaciente.

Figura26.Combinacinerrneaindiscriminada

Otroerroreneldiseodeestapantallahasidoladeutilizarunasetiquetasconuncolor muyparecidoenelfondo.Ocurreenloscuadrosdetextodelosdatospersonales.Elazul esmuysemejantealverdeyporlotantonopermiteunantidadelimitacin. Obligaa forzar los ojos, lo que desde luego agota la vista del usuario en muy poco tiempo. Adems, cuandoseutilizanvariastonalidadesdelmismocolor,comoeselcaso,puede inclusoprovocarconfusin,odarlaimpresindequealgunosdatosfsicamentecercanos estnconceptualmentedistantes.

94 Por ltimo,veamosladiferenciaentreuntextodecoloroscurosobrefondoclaro(como sueleserlohabitual)yalrevs.Laprimerasituacinlatenemosenlosdatospersonalesy lasegundaenlascitasanteriores. Comosepuedeobservar,esmuchomsfciltrabajar consituacionescomoladelmarcosuperior.

Enestaimagenseharepresentadolamismapantallaperoconcoloresmsadecuados. (VaselaFigura27).

Figura27.Pantallaconcoloresadecuados.

Esteproblemadeatropellodeloscoloresnoesexclusivodecadapantallaconsideradade unamanerasingular. Esposiblequeseestudiecadapantalladeformaindividualynos parezcaquelascombinacioneshansidolasadecuadas,queelefectopticoqueproducenes armoniosoynosonsusceptiblesdeprovocarefectosnegativosenelojodelusuarioni

95 desviacionesdesproporcionadasdeatencin.Estoesdebidoaqueaveceselproblemase presentaporquelacombinacinerrneasecomponeentrepantallas.

Noesdereciboquealolargodelaaplicacinelusuariopuedaverqueelpredominiode los tonos en tiempo de ejecucin va variando sin ningn orden lgico y que lleguen, incluso, a provocar interferencias entre las pantallas. Por supuesto, hay que intentar mantenerunacoherencia,buscandosiempretransmitirunasensacindebloquehomogneo durantetodalaaplicacin.Si,porejemplo,losfondosdetodaslaspantallasnopertenecen alamismagamadecolor,provocarsindudaconfusinalapersonaqueenestemomento observaelmonitordesuordenador,apesardequepantallaapantallalacomposicinde tonalidades haya sido la adecuada. Desde luego, el problema de la uniformidad es extrapolablealrestodecaractersticasdenuestraaplicacin.Elusuariodebeencontrarse enunentornohomogneoparapodertrabajar.

Laanteriorreflexinnosllevaaestablecerquecualquiermedidatomadaencuantoalcolor paraincrementarlosaspectosergonmicosdenuestrasaplicacionesdebenserestudiadas tantoanivelindividualdecadapantallacomoanivelglobaldelaaplicacincompleta.

Existenalgunasasociacionesmentalesdeloscoloresenlaspersonas,comosedescribea continuacin:

En principio, los colores clidos, (amarillo, naranja) provocan sensaciones de accin, intervencinorespuestaaunrequerimientoycercanaenelespacio.Porelcontrario,los

96 colores fros (verde, azul, violeta) consiguen crear asociaciones con situaciones ms estticas y dimensiones ms lejanas. En el siguiente cuadro podemos apreciar las relaciones que tradicionalmente se establecen entre los colores ms comunes y ciertas actitudesmentales.

Cuadro3.Asociacionesmentalesdeloscolores

COLORESCALIDOS ROJO AMARILLO NARANJA COLORESFRIOS AZUL VERDE VIOLETA OTROSCOLORES BLANCO NEGRO GRIS Neutralidad,objetividad Oscuridad,muerte Neutralidad,indiferencia Calma,reposo,silencio,tranquilidad Disponibilidad,libertad,proteccin Duelo,espiritualidad,melancola Peligro,sobresalto,alarma Precaucin,atencin Accin,precaucin

Loscoloresprimarios sonelrojo,elamarilloyelazul. Nopuedenserobtenidospor mezcladeotroscolores.Elrojoeselcolordelfuegoydelasangre.Excita,esafrodisaco, peroinvitatambinalaviolencia. Elamarilloeselcolordelsolydeloro.Esuncolor alegre, imagendelailuminacinylapureza. Elazuleselcolordelcieloydelaire. Sugiereimaginacin,libertad,evasinysueo.

97

Loscoloressecundariossonelnaranja,elverdeyelvioleta.Elnaranja(rojo+amarillo) poseelasconnotacionespropiasdelfuegoyeloro,caractersticasdesuscoloresprimarios originales.Elverde(azul+amarillo)eselcolordominanteenlanaturaleza.Evocalas plantas,lahumedad,elreposoylapasividad.Elvioleta(rojo+azul)eselcolorrojo,color delavida,"apagado"porelazuldelcielo. Existentambinelnegroyelblanco,quevanapermitirmatizarloscoloresanteriores,ya suvezcontribuyenacrearotrosnuevos,llamadosterciarios.Elblancoeselcolordela luz,deloespiritualyelevado. Elnegroeslaprofundidad,laoscuridad. Elgrisesla mezcla,niblanconinegro.Indicaequilibrio,tibieza.Perotambinsepuedeasociaralas sombras.

4.6.2Principiosdediseodelcolor.Losprincipiosdediseodelcolorhacenreferencia alasdirectricesopautasaseguirparaunamejorutilizacindeloscolores,ydeestaforma obtenernoslounainterfazagradablesinoademsfuncionalparaelusuario,ellosson:

Organizacin del color. La organizacin del color influye en la consistencia de la organizacin. El color debe emplearse para agrupar los items relacionados. Debe aplicarse una organizacin de color consistente tanto a las pantallas, como a la documentacinyalosmaterialesdeentrenamiento.

98 Los colores similares infieren similitud en los objetos.Sedebe mirar lacompletitud y consistenciaalagruparobjetosconelmismocolor.

Unavezseestableceunacodificacindelcolor,estadebeserusadaentodalainterfaz grficaascomoenladocumentacinypublicacionesrelacionadas.

Economadelcolor.Elsegundoprincipiodelcolor,laeconomadelcolor,sugiereusarun mximo de 5 +/ 2 colores cuando el significado tiene que ser recordado. La idea fundamentalesusarcolorparaaumentarlainformacinproporcionadaenblancoynegro (porejemplo,disearlainterfazparaquefuncionebienprimeroenblancoynegro).

Comunicacindelcolor. El nfasisdelcolorsugiereusarfuertescontrastesenvalory tono para centrar la atencin del usuario en la informacin ms importante. Cuando demasiadasfigurasocamposdelfondocompitenporlaatencindelusuarioseproduce ciertaconfusin.Lajerarquadelosestadossobreiluminado,neutroeinfrailuminadopara todaslas reas delapantalladebensercuidadosamente diseadasparaproporcionarla mximasencillezyclaridad.

Lacomunicacinencolorpugnaconlalegibilidad,incluyendousaruncolorapropiado paralas reascentralyperifricadelcampovisual. Lascombinacionesentrecolores puedenproducirinfluenciasentreellosycambiosenlaeleccindelosmismos.

99 Esaconsejablequeelcolorrojoyelverdenoseanusadosenlaperiferiadelcampovisual sinoenelcentro. Sisonusadosenlaperiferia,esnecesariounmedioparacaptarla atencindelusuario,comouncambiodetamaooelparpadeo,porejemplo.

Elnegro,azul,blancoyamarillosonapropiadosparalaperiferiadelcampovisual,donde laretinaesmassensitivaaellos.

Siseproduceuncambioeneltamaodeloselementoscoloreadossedebetenerencuenta quenuestrapercepcinsobresuluminanciaotonopuedecambiar,ytomarlasmedidas oportunas. Es precisousarcolores quedifieran tanto envalorcomoentono. Las combinaciones rojo/verde,azul/amarillo,verde/azul,yrojo/azuldebenserevitadasexceptosisenecesita unefectovisualespecial.Puedencrearvibraciones,ilusiones,sombrasypostimgenes.

Parasituaciones conpocailuminacinserecomienda textoclaro,lneas finasyformas pequeasomedianassobreunfondooscuro;parasituacionesconiluminacinabundante, porelcontrario,textooscuro(azulonegro),lneasfinasyformaspequeassobrefondo claro. Estascombinacionessonparapresentacionescontransparencias,videos,papelo estacionesdetrabajo.

4.6.3 Simbolismodelcolor. Laimportanciadelcolorescomunicar. Loscdigosde coloresdebenrespetarelusoprofesionalyculturalyaexistentededeterminadoscolores.

100 Las connotaciones varan fuertemente respecto a los diferentes tipos de usuario, especialmentecuandosondediferentesculturas. Lasconnotacionesdelcolor debenser usadasconsumocuidado. Porejemplo:losbuzonesdecorreossonazulesenEstados Unidos,rojobrillanteenInglaterrayamarillosenGrecia.Siseusauniconogrficopara representarelcorreoelectrnico,esconvenienteadecuarsucoloralpasparamejorarla comunicacin.

4.6.4Combinacionesentrecolores.Enelsiguientecuadrovemosciertascombinaciones entrecoloresquepuedenconsiderarsecorrectaseincorrectas. Porejemplo,loscolores clarosquedanbienintegradossiseunenconcoloresoscuros,yaquehayunbuencontraste, peroendeterminadoscasossepuedencombinarcontonostambinclaros,exceptosison demasiadoparecidos,comoocurreconelazulyelverde.Engeneral,digamosquetanto unfondoclarocontextoyfigurasoscurasestanadmisiblecomounfondooscurocontexto yfigurasclaros,peroenelprimercasoseganaenlegibilidad.

Cuadro4.Combinacionesentrecolores.

Rojo Amarillo Naranja Azul Verde Violeta Blanco Negro Gris

COMBINACINCORRECTA Violeta,blanco,negro,gris Azul,negro Blanco Amarillo,blanco,gris Blanco,negro Rojo Rojo,naranja,azul,verde,negro,gris Rojo,amarillo,verde,blanco,gris Azul,blanco,negro

COMBINACININCORRECTA Naranja,azul,verde Blanco Rojo,verde Rojo,verde Rojo,naranja,azul Blanco Amarillo,violeta Rojo

101

Enlacombinacindecoloresoscuroshayquetenermscuidado,porqueesmsfcil confundirseyqueseunancoloresquehaganunmalefecto.Tonososcuroscomoelrojoy elazulpresentadosenunamismapantallaobliganalusuarioaunesfuerzodeacomodacin pticainnecesario.

Cuandopensamosenqu coloresdebemosemplearennuestraspantallasdebemosreparar enlainfluenciaqueundeterminadocolorpuedellegaratenersobreelresto.Loscolores provocansensacionescuandoseabandonasuvisinysepasasintransicinaobservarotro. Porejemplo,siestamosviendoelcolorazulypasamosaverunamarillo, stesever brillante.Sinosepasaanteriormenteporelazul,elamarillosever muchomsplidoy mate.

En general, los colores tienen unas propiedades psicolgicas que actan sobre nuestro subconsciente.Existenalgunosefectosdelayuxtaposicinentrecoloresqueseadmiten deformageneral. Porejemplo,elcoloramarillo,quecomohemosdichoesalegrey brillante,pierdetodasufuerzacuandosecombinaconelblanco.Pararebajarelexcesivo dinamismoqueevocaelnaranjanohaynadacomomezclarloconelblanco.Sinembargo, combinadoconelrojoformauncolorpardodemasiadodenso.Elvioletacombinamuy bienconelrojo,porquedamsprestanciaalaimagennobleyaltivadelvioleta,perosise mezclaconelblancoresultacursi.

102 Veamosciertasrelacionesquesedebenconsideraralahoradeseleccionarlagamade coloresdenuestraspantallas:

Unobjetopequeoparecer anmspequeosisecolocacercadeuna superficiegrande.

claro.

Uncolorclaroparecermsclarosobreunfondooscuroquesobreunfondo

Uncolorllamamslaatencinsiseencuentrasobreuncolormezcladoque siestsobreuncolorvivo.

aparece.

Untonofroparecer msfrocuantomsclidoseaelcolorsobreelque

Cadacolormuestramsclaramentesuscaractersticassisecolocacercanoa sucomplementario.

Finalmente, una breve mencin a un aspecto muy interesante de cara a obtener delimitacionesmsfinasennuestrosdiseos:laescaladegrises. Muchasvecesesms interesantejugarconlosdiferentesgrisesquemezclarotroscolores,debidoaqueelojo humanopercibeconmsdificultadlospequeosdetallescuandoseempleaelcolor,ysin embargo,lacombinacindevariosgrisespermiteladiscriminacindeloselementosde maneramseficazyagradablealavista.

103 Adems,selepuedeaadirazulparasuavizarlasposiblesconnotacionesnegativasquese comentabananteriormente.

Endefinitiva,cuandoestamoshablandodecoloresesmejorpecardeprudentesantesque arriesgarnosaqueseprovoqueunadispersindelaatencinporpartedelusuario.Pero, con unapequeadedicacin,unproyectoqueutiliceunaagrupacinbienestudiada de colores va a mejorar claramente el acabado final, enriquecindolo de una forma muy interesante.

4.6.5 Efectosvisualesenlapercepcindelcolor. Comosemencion anteriormente, existenalgunosaspectosdelapsicologahumanaqueintervienenenlainteraccinhombre computadora, sehaceentonces necesarioconocerlosparautilizarestainformacin a favordenuestrosdiseos,algunosdeellosson:

Lamemoriavisual. Esmuydifcil,pornodecircasiimposiblerecordarlosdiferentes colores.Estoconfirmaelimportantehechodequenuestramemoriavisualesmuypobre encomparacinconnuestramemoriaauditiva. Amenudo staescapazderepetiruna melodaqueslosehaododosotresveces.

La nomenclatura del color es muy insuficiente. Aunque hay innumerables colores, tonalidadesymatices,elvocabulariocotidianoslocuentaconunatreintenadenombres paradesignarlos.

104

Larelatividaddelcolor. Uncolortienemuchosrostrosysepuedehacerqueunsolo coloraparezcacomodosdiferentes,dependiendodeloscoloresqueloacompaen.(Vase laFigura28).

Figura28.Relatividaddelcolor

Intensidadluminosa.Casitodoelmundoescapazdedistinguirunanotamsaltadeuna msbaja,perosiestoseaplicaalcolor,casitodoelmundoresultaraincompetenteparasu utilizacincorrecta.Apesardelacotidianalecturadeimgenesenblancoynegro,son muypocaslaspersonascapacesdedistinguirentreunaintensidadluminosaaltayotrabaja. Imgenespersistentes.Lasterminacionesnerviosasquehayenlaretinahumana(conosy bastones)estnpreparadaspararecibirunodelostrescoloresprimariosquecomponen todosloscolores.

105 Elmirarfijamentealrojofatigar laspartessensiblesaesecolor,porloqueconelpaso repentinoalblanco(integradoasuvezporrojo,amarilloyazul)solamentesedar la mezcladeamarilloyazul.Yesamezclaeselverde,colorcomplementarioalrojo.

El hechodequela persistencia delaimagen ocontraste simultneo (tambin llamado postimagen)seaunfenmenopsicofisiolgicodemuestraquenielojomsentrenadoest asalvodeladecepcincromtica.(VaselaFigura29).

Figura29.Postimagen Lamezcla ptica. Lapersistenciadelaimagenrevisada.ElefectoBezold.Lamezcla ptica esunefectoenelquedoscolores (oms),percibidos simultneamente, seven combinadosyporendefundidosenuncolornuevo. Enesteproceso,losdoscolores originales son primero anulados y hechos invisibles, y despus reemplazados por un sustitutollamadomezclaptica. Lospintoresimpresionistas,porejemplo,nuncapresentabanunverdeens.Enlugarde aplicar pintura verde resultante de la mezcla mecnica de amarillo y azul, aplicaban amarillo y azul en puntitos sin mezclar, de manera que slo se mezclaran en nuestra

106 percepcin.Elquelospuntitosfueranpequeosindicaqueesteefectodependedeltamao ydeladistancia.

ElefectoBezold

Wilhelm von Bezold (18371907) descubri que ciertos colores fuertes distribuidos de manerahomogneatransformabanporcompletoelefectodesusdiseosdealfombras,que hacaparadistraerse.(VaselaFigura30).

Figura30.EfectoBezold Enlaimagensevenladrillosdecolorrojoclarounidosconmorteromuyblanco,yluego losmismosladrillosunidosconmorteronegropuro.Elrojoconblancoparecemuchoms claroqueelrojoconnegro,sobretodovistodelejos. Colorlaminarycolorvolmico.Elcolorlaminaresunefectoqueapareceamododeuna lmina fina, transparente y traslcida interpuesta entre el ojo y el objeto, independientementedelcolorsuperficialdeste.As,porejemplo,lasparedesblancasde unacasaconjardnenundasoleadoaparecenteidasdeunverdebrillante,queserefleja delahierbadelsuelo.

107

El color volmico esunefectoqueexisteysepercibe enlosfluidos tridimensionales transparentesotraslcidos.Unejemplosencilloconsisteencompararelcolordelmismo caf enrecipientesdistintos,talescomolacafetera,lataza,unvaso...est claroqueel marrndelcaf eselmismoentodosloscasos,perosepercibediferenteporesteefecto, quetieneencuentalacantidaddeluz.

LaleydeWeberFechner:lamedidaenlamezcla

Si pretendemos crearunaescaladegrises conunacartulina ytinta china,unamedida bastantelgica(teniendoencuentaelefectodecolorvolmico)seradividirdichacartulina enbandasyaplicarprimerounacapadetintaatodas,luegoatodasmenosla ltima,a todasmenoslasdos ltimas...yas sucesivamente. Lasorpresaesqueel"aumentode profundidad"gradualqueseprometanoapareceenunasucesindeescalonesiguales.

LarespuestaladescubrieronWilheimEduardWeber(180491)yGustavTheodorFechner (180187):lapercepcinvisualde unaprogresinaritmticadependedeunaprogresin fsicageomtrica.

Delatemperaturacromticaalahumedadenelcolor.Delaspolaridadescromticaslas dosmsgeneralessonclarooscuroyelcontrastedetemperaturasclidofro.Aldefinir laubicacindeestoscontrastesdentrodecrculoscromticosobservaremos,ademsdesu

108 distribucin desigual y de los llamados "neutrales" que los separan, que se traslapan ligeramenteentressicomparamosuncrculoconotro.

Encuantoaloclidoylofro,seaceptaenlatradicinoccidentalquenormalmenteelazul parecefroyqueelgrupodeadyacentesamarilloanaranjadorojoparececlido. Como cualquiertemperaturapuedeserledacomomsaltaomsbajaencomparacinconotras, estascalificacionessonslorelativas;porlotantoesposibleencontrarazulesclidosy rojosfrosdentrodesusrespectivastonalidades.

Perocuandoestosindicadoresdetemperatura,elrojoyelazul,secombinanconneutrales cromticos como los blancos, negros y grises, y con sus mezclas, particularmente con aquellasendondeentranlosneutralesdetemperatura,verdeyvioleta,entoncesesfcilque lasinterpretacionespersonalesdelatemperaturaresultentotalmentedispares.

4.6 LA IMPORTANCIA DEL DISEO DE INTERFACES GRFICAS DE USUARIO

4.7.1 ComunicacinVisualEfectivaparaInterfacesGrficasdeUsuario. Elusode tipografa,smbolos,coloryotrosgrficosestticosydinmicossoncomnmenteusados paraexpresarhechos,conceptosyemociones.Estocomponeundiseogrficosistemtico orientado alainformacinqueayudaalagenteacomprenderinformacincompleja.La comunicacinvisualefectivaparaestesistemasebasaenalgunosprincipiosbsicosde diseogrfico.

109

4.7.2ConsideracionesdeDiseo.Existentresfactoresquepuedenconsiderarseparael diseodeunainterfazdeusuariocorrecta:factoresdedesarrollo,factoresdeviabilidady factoresdeaceptacin.Losfactoresdedesarrolloayudanamejorarlacomunicacinvisual. Estoincluyetoolkitsylibrerasdecomponentes,soportesparaunrpidoprototipado,y adaptabilidad.

Los factores de viabilidad tienen en cuenta factores humanos y expresan una fuerte identidadvisual. Estoincluye:habilidadeshumanas,laidentidaddelproducto,unclaro modeloconceptual,ymltiplesrepresentaciones.

Como factores de aceptacin estn la poltica de la corporacin, los mercados internacionales,yladocumentacinyentrenamiento.

4.7.3 ElLenguajeVisible. ElLenguajeVisibleserefiereatodaslastcnicasgrficas usadasparacomunicarelmensajeocontexto.Estoincluye:

DisposicinoLayout:formatos,proporciones,ymallas(grids);organizacin:ya sea2Dy3D.

Tipografa: seleccin de tipos de letra y estilos, incluyendo la anchura fija y variable.

110 ColoryTextura:color,texturayluminanciaaportaninformacincomplejayrealidad pictorial. Imgenes:signos,iconosysmbolos,desdelofotogrficamenterealaloabstracto. Animacin: un display dinmico o cintico: muy importante en la utilizacin de imgenesrelacionadasconelvdeo. Secuenciamiento: el aproximamiento total del secuenciamiento visual al secuenciamientolgico. Sonido:abstracto,vocal,concreto,omusical. Identidad Visual: las reglas adicionales y nicas que proporcionan consistencia de conjuntoaunainterfazdeusuario.

4.7.4 Principios del Diseo de interfaces de usuario. Existen tres principios fundamentalesrelacionadosenelusodellenguajevisible:

Organizar:proveeralusuariodeunaestructuraconceptualclarayconsistente. Economizar:hacerlomximoconlamenorcantidaddeelementos. Comunicar:ajustarlapresentacinalascapacidadesdelusuario.

ORGANIZAR. Esteprincipiosefundamentaenimportantesconceptosdeorganizacin comoloson:laconsistencia,disposicindelapantalla,relacionesynavegabilidad.

111 Consistencia. Existen 4 visiones de la consistencia: consistencia interna, consistencia externa,consistenciadelmundorealycuandonohayconsistencia.Laprimeravisin,la consistenciainterna,afirmaquelasmismasconvencionesyreglasdebenseraplicadasa todosloselementosdelainterfazgrficadeusuario.Losmismostiposdeelementosse muestranenlosmismoslugares.(VaselaFigura31).

Figura31.ConsistenciaInterna

Aquelloscondiferentestiposdecomportamientotienensupropiaaparienciaespecial. Laconsistenciaexternaafirmaquelasplataformasexistentes yconvenciones culturales debenserutilizadasyaplicadasenlasinterfacesgrficasdeusuario.(VaselaFigura32).

Figura32.Consistenciaexternaparaiconosdeherramientasdetexto

Estosiconossondediferentesaplicaciones,perogeneralmentetienenelmismosignificado.

112 Laconsistenciadelmundorealafirmaquelasconvencionesyreglasdebenserconsistentes yconsecuentesconlasexperienciasdelmundoreal,ylasobservacionesypercepcionesdel usuario.(VaselaFigura33).

Figura33.Consistenciadelmundoreal

El ltimopunto,lainnovacin,trataconlacarenciadeconsistencia. Desviarsedelas convenciones existentes slodebehacersecuandoproporcionaunCLARObeneficio al usuario.

Disposicin de la pantalla (Layout). Hay tres formas para disear una disposicin espacialdelapantalla:usarunaestructurademalla(grid),estandarizarladisposicindela pantalla,yusarloselementosrelacionadoscongrupos.

Unaestructurademallapuedeayudaracolocarmens,panelesdedilogoodecontrol. Generalmente el mximo nmero de divisiones horizontales o verticales se ajusta a la expresin7+/2.Estoayudarahacerlapantallamsinteligibleymenossaturada.

113 Relaciones. Conectarlositemsrelacionadosydisociarlositemsindependientesmejora sensiblementelaorganizacinvisual.

Navegabilidad.Existentrestcnicasimportantesdenavegabilidad:

Proveerunfocoinicialparalaatencindelusuario. Dirigirlaatencinalositemsimportantes,secundariosoperifricos. Asistirlanavegacinatravsdelmaterial. Ladisposicinespacialyelcolorayudanacentrarlaatencindelusuarioalas reasmsimportantes.

ECONOMIZAR. En este segundo principio hay que considerar 4 grandes factores: simplicidad,claridad,singularidadynfasis.

Simplicidad. Lasimplicidadincluye nicamenteloselementosquesonmsimportantes paralacomunicacin.Deberaproducirtambinlamenorobstruccinposible.(Vasela Figura34).

Figura34.Simplicidad:Diseocomplicadoydiseomssimple.

114

Claridad. Todosloscomponentesdeberanserdiseadosparaquesusignificadonosea ambiguo,quenollevealequivoco.(VaselaFigura35).

Figura35.Iconosambiguosyclaros. Singularidad. Las propiedades de los elementos necesarios deben ser caractersticas singulares.

Enfasis. Loselementosmsimportantesdebenserfcilmentepercibidos.Sedeberestar nfasisaloselementosnocrticosyminimizarlosparanoocultarinformacincritica.

COMUNICAR. En este tercer principio es donde la interfaz grfica de usuario debe mantenerunbalanceentrelegibilidad,tipografa,simbolismo,mltiplesvistas,ycoloro textura,paracomunicaradecuadamente.

Legibilidad. Lapantalladebeserfcildeidentificareinterpretar,ademsdeatractivay agradable.(VaselaFigura36).

115

Brush Script Large Medium Small

Univers Large Medium Small

Figura36.Textoilegibleylegible. Tipografa. Incluyecaractersticasdeelementosindividuales(tiposdeletrayestilos)y susagrupamientos(tcnicasdeestilo).Sedeberusarunnmeroreducidodetiposdeletra quesernlegibles,clarosysingulares(porejemplo,paradistinguirdiferentesclasesde informacin).

Recomendaciones:

Unmximode3tiposdeletraenunmximode3tamaosdepuntos. Unmximode4060caracteresporlneadetexto. Ajustareltextoalaizquierdaylosnmerosaladerecha.Enlistas,usarel centradodetexto.

Usarmaysculasyminsculassiemprequeseaposible.

Mltiplesvistas.Proveerdemltiplesperspectivasenlapantalladeestructurasyprocesos complejos.Hacerusodeestasmltiplesvistas:

Mltiplesformasderepresentacin. Mltiplesnivelesdeabstraccin.

116 Vistasalternativassimultneas. Conexionesyreferenciascruzadas. Metadatos,metatextoymetagrficos.

Color. Elcoloresunodelosmscomplejoselementosalahoradeintentardisearuna interfaz grfica correcta. Puede ser una potente herramienta de comunicacin usado correctamente.Loscolorespuedensercombinadosparatomarunsentidovisual.Ventajas enelusodelcolorparafacilitarlacomunicacin:

Enfatizarlainformacinimportante. Identificarsubsistemasdeestructuras. Portarobjetosnaturalesdeunmodorealista. Portartiempoyprogreso. Reducirloserroresdeinterpretacin. Aadirdimensionesalacodificacin. Incrementarlacomprensibilidad. Incrementarlacredibilidadyatractivo.

Cuandoelcoloresusadocorrectamentelagentesueleaprenderms.Lamemoriaparala informacinencolorparecesermuchomscapazqueparalainformacinpresentadaen blancoynegro.

117 Tambinexistendesventajasenelusodelcolor:

Requiereunequipamientomscomplicadoycostoso. Lamayoranoseacomodaalavisindelosdaltnicos. Algunoscolorespuedenpotencialmentecausarmolestiasvisualesy postimgenes.

Puede contribuir a asociaciones errneas a causa de diferencias multidisciplinariasomulticulturales.

4.7 MTRICAS

Unainterfazbiendiseadadebefacilitareltrabajodelosusuarios,paraelloespreciso entenderelmodelomentaldelusuarioysushabilidadespsquicas,fsicasypsicolgicas. Losdiseadoresnosonexpertosenestostemasynecesitanunos principios generalesde diseoconsensuadosporlosexpertos,estosprincipiossonconceptosdemuyaltonivelque se plasman en unas reglas de diseo que guan al diseador con el fin de conseguir productosusables.

LamayoradelossistemasdeGUIhanpublicadodirectricesqueindicancmoasociar estosprincipiosabstractosaentornosdeprogramacinconcretos:sonlasguasdeestilo . Lasguasdeestiloproporcionanunmarcoquepuedeguiaralosdiseadoresatomar decisionescorrectasensusdiseos.Puedentenerunagranvariedaddeformasypueden

118 ser obtenidas en diferentes sitios: Artculos de revistas acadmicas, profesionales o comerciales,manualesyguasdeestilodeempresasdesoftware.

4.8.1 Principios. Un principio es una sentencia en un sentido muy amplio que normalmente est basada en la investigacin hecha de cmo las personas aprenden y trabajan.Estnbasadosenideasdealtonivelydeaplicacinmuygeneral.Porejemplo: Asistencia: asistir al usuario en la realizacin de las diferentes tareas. No especifican mtodos para obtener sus objetivos. Son bastante abstractos. Algunos principios conocidosson:

PRINCIPIOSSIMPSON(1985) Definirlosusuarios Dejarelcontrolalosusuarios Minimizareltrabajodelosusuarios Hacerprogramassencillos Mantenerlaconsistencia Proporcionarrealimentacin Nocargarlamemoriadetrabajo Noabusardelamemoriaalargoplazo

119 PRINCIPIOSPREECE(1994)

humano

Estudiarlapoblacindeusuarios Reducirlacargacognitiva Aplicartcnicasdeingenierapararesolverlaproblemticadelerror

Mantenerconsistenciayclaridad

PRINCIPIOSMANDEL(1997)

Colocaralosusuariosenelcontroldelainterfaz Reducirlacargadememoriadelosusuarios Proporcionarpistasvisuales Proporcionaropcionespordefecto Proporcionaratajos Emplearmetforasdelmundoreal Emplearlarevelacinprogresivaparaevitarabrumaralusuario Promoverlaclaridadvisual Hacerlainterfazconsistente

120

PRINCIPIOSDIX(1998)

Facilidaddeaprendizaje Flexibilidad Robustez

4.7.2

Directrices. Lasdirectricesrecomiendanaccionesbasndoseenunconjuntode

principiosdediseo.Sonmsespecficasyrequierenmenosexperienciaparaentenderlas quelosprincipios.

Ejemplo relacionado con el principio de asistencia: Proporcionar ayuda contextualparacadaopcinyobjetosobreelquepuedaposicionarseelcursor.

LasdirectricessonobjetivosmasespecficosquelosespecialistasenIPO concretanapartirdelosprincipiosparausuarios,entornosytecnologasdiferentes.

Permitenasegurarconsistenciaenunsistemaofamilia:Fundamentalpara lasempresasdedesarrollodesoftware.

121 4.8.3 Estndares. Un estndar es un requisito, regla o recomendacin basada en principiosprobadosyenlaprctica.Representaunacuerdodeungrupodeprofesionales oficialmenteautorizadosanivellocal,nacionalointernacional.

Losestndarespuedenser:

Locales Nacionales Internacionales

Elobjetivodelosestndareseshacerlascosasmsfciles,definiendocaractersticasde objetosysistemasqueseutilizancotidianamente.Ejemplos:tecladodetelfono,teclado QWERTY.Todalaindustriafuncionaconestndares.Ejemplo:Construccin.Tambinla industria informtica. Estndares de pantallas, teclados, conectores, incluso mobiliario. Ejemplo:lainclinacindeltecladodebeestarentre0y25grados.

ESTNDARESDELAINTERFAZ

Objetivo:conseguirunsoftwaremsfcilyseguro,estableciendounosrequisitosmnimos defabricacin,eliminandoinconsistenciasyvariacionesinnecesariasenlasinterfaces.

BENEFICIOS

122 Unaterminologacomn: Permite a los diseadores discutir los mismos conceptos y hacer valoraciones comparativas. Elmantenimientoylaevolucin:Todoslosprogramastienenlamismaestructuray elmismoestilo Unaidentidadcomn:Loquehacequetodoslossistemasseanfcilesdereconocer Reduccinenlaformacin:Losconocimientossonmsfcilesdetransmitirdeun sistemaaotro Saludyseguridad:Silossistemashanpasadocontrolesdeestndaresesdifcilque tengancomportamientosinesperados.

Acontinuacinsepresentandostiposdeestndaresutilizados pordiferentes empresas, estndaresdeiureyestndaresdefacto.

Estndaresdeiure

Songeneradospor comits conestatuslegalygozandelapoyodeungobiernoo institucinparaproducirestndares

Parahacerunestndardeiuresehadeseguirunprocesocomplejo: Documentopreliminarpblico Enmiendas

123 Aprobacin(trasciertotiempo,avecesao) Ejemplo:AnsiC.

Comits

EnInformticatienenestatuslegalparadefinirestndaresdeiure:

ISO IEC ANSI IEEE CEN W3C

AsociacinInternacionalparaEstndares ComisinElectrotcnicaInternacional InstitutoNacionalAmericanoparaEstndares InstitutodeIngenierosElctricosyElectrnicosAmericano ComitEuropeoparalaEstandarizacin ConsorcioparalaWorldWideWeb

EstndaresdeiureenIPO

Losestndaresdelainterfazsonrelativamenterecientes Algunosdelosmsimportantesson: ISO/IEC 9126: evaluacin de productos software: caractersticas de calidad y directricesparasuuso ISO 9241: requisitos ergonmicos para trabajar con terminales de presentacin visual(VDT) ISO/IEC10741:interaccindedilogos

124 ISO/IEC11581:smbolosyfuncionesdelosiconos ISO11064:diseoergonmicodecentrosdecontrol ISO 13406: requisitos ergonmicos para trabajar con presentaciones visuales basadasenpanelesplanos ISO/IEC15910:procesodedocumentacindesoftwaredeusuario AlgunosaspectoscubiertosporlaISO9241: Diseodeestacionesdetrabajoyrequisitosdelasposturas Dilogospersonaordenador Requisitosdelteclado Requisitosparalavisualizacinconreflejos Requisitosparacoloresvisualizados Presentacindeinformacin Dilogosdemens Dilogosdemanipulacindirecta Dilogosparacompletarformularios

EstndaresdeFacto Sonestndaresquenacenapartirdeproductosdelaindustriaquetienenungranxitoenel mercadoodesarrolloshechosporgruposdeinvestigacinenlaUniversidadquetienenuna grandifusin.

125 Sonaceptadoscomotalesporsuusogeneralizado. Su definicin se encuentra en manuales, libros o artculos. Ejemplos:

SistemaXWindows,LenguajeC,NormasCUA.

4.8.4

Guasdeestilo.Paraasegurarlaconsistenciadelasdiferentespartesdeunsistema

odeunafamiliadesistemasesfundamentalparalosdesarrolladoresbasarsusdiseosen unconjuntodeprincipiosydirectrices.

Porestemotivoestanimportanteparalasorganizacionesquedesarrollansoftwaredisponer deunaguaquepuedanseguirsusdesarrolladores.Estasguassedenominanguasdeestilo yvaranmuchoensusobjetivos.Puedenserdedostipos:

Guasdeestilocomerciales Guasdeestilocorporativas

Ventaja: aseguran una mejor usabilidad mediante la consistencia que imponen. En el lenguajeindustrialsehacereferenciaalasguasdeestilocomoellookandfeel.

GUASDEESTILOCOMERCIALES

Sonproducidasporfabricantesdesoftwareyhardware,ysonengeneral estndaresdefacto. Macintosh Motif

126 Windows OpenLook CDE,CommonDesktopEnvironment Contienendirectricesqueseconcretanamuybajonivel.

Guasdeestiloapple(1985)

Guasdeestilocua(commonuseraccess)

Publicadasen1987porIBMyMicrosoft SeadoptaronuniversalmenteporlafuerzadeIBM(estndardefacto)

127 Windows,OS/2yMotifsonlosestndaresmsimportantesquesiguenesta

norma.

Guasdeestilomotif

OSF(OpenSoftwareFoundation)

Guasdeestiloopenlook

SUNMicrosystemsyAT&T

GuasdeestiloCDE

CommonDesktopEnvironment InterfazgrficaparaUNIX

128 DesarrolladoporIBM,HP,NovellySUN AprobadoporX/Open,organizacindeestndaresenelmundoUNIX BasadoenestndaresdefactodelaindustriacomoX.11,MotifyTooltalk

Guasdeestilomicrosoft

Guasdeestilojavalookandfeel

Javapermitelaejecucindeunmismoprogramaendistintasplataformas utilizandolainterfazgrficacorrespondiente,graciasalAWT(AbstractWindow Toolkit)

ConlaaparicindelconjuntodecomponentesSwing,partedelasJFC(Java FoundationClasses),sedisponedeunaaparienciagrficapropia,denominadaMetal

AdemsdeMetalexistenotrasapariencias:Motiflookandfeel, Windowslookandfeel, MacOslookandfeel.

GuasdeestiloCUA

129 EstndardefactodesarrolladoporIBMyMicrosoft

Defineloscomponentesdelainterfazquedebenmantenerseentreaplicaciones Objetivos:Usabilidadyconsistenciadelaaplicacin,consistenciaentreaplicaciones.

Modelogrfico

Lasaplicacionescompartenlapantalla Cadaunatieneasignadaunaparteoventana Ventanaactiva:aquellaconlaqueelusuariointeracciona Nivelesdelmodelogrfico: Presentacin Acciones Interaccin

Presentacin

130 Representaelaspectovisualdelainterfaz Lasaplicacionestienendostiposdeelementosquehayquepresentar: Objetos Cualquiercosaqueelusuariopuedamanipular Sonelcentrodeatencindelusuario

Acciones Permitenalusuariocrearomanipularobjetos Serealizanmediantecombinacionesdemensycajasdedilogo

Acciones

Mens Mensdesplegables Mensencascada(nomsdedosniveles)

131 Cajasdedilogo Presentan/recogeninformacin Ventanamvildetamaofijo Apareceduranteelprocesamientodeunaaccindelusuario,cuandose requiereinformacinparacompletarla Seutilizaunaelipsis(...)traselnombredelbotnoelementodemenque abrelacaja Nousanmens.Usanbotonesparallamaralasacciones Botones:confirmar,cancelar,ayuda

Tiposdecajasdedilogo Nomodal Permitealosusuarioscontinuarconsutrabajosincompletar eldilogo decontinuar Modal Requierequelosusuarioscompletenlacajadedilogoantes

132 Cajademensajes

Esuntipoespecialdecajadedilogoqueseutiliza exclusivamenteparamostrarmensajesalosusuarios

Interaccin

Eselnivelatravsdelcuallosusuariosinteraccionanconlos componentesdelainterfaz

Constade: Seleccindeobjeto Losusuariosapuntanaunobjetoquedeseanmanipularylo seleccionandemaneravisible Ejecucindelaaccin Seseleccionaunaopcindemenysiesprecisosecompleta conunacajadedilogo Laejecucindelaaccindebeservisualizada Apuntaryseleccionar

133 Losusuariosinteraccionanconloscomponentesdelainterfaz Apuntanaloquedeseanmanipularyloseleccionan Seutilizatantoeltecladocomoelratn Eltecladoyelratntienenunaindicacinvisualparaindicaralusuariodndese encuentra. Teclado Seleccindecampos(cajadelneasdiscontinuas) Entradadecampos(cursordetexto) Ratn Unpunteroindicalaposicindelratn nfasis Indicacinvisual

Trataderealzarlaimportanciadealgunoselementosdeinteraccinparaqueelusuario cuandointeraccionapuedasaber: Focodelaentrada Opcionesdisponibles Opcionesnodisponibles Estadoactualdelasopciones

Tiposdenfasis: nfasisdecursor

134 seleccionar Seleccinconelteclado Tabulacin,flechas,MayusyCtrl(seleccin),Alt(mens) Accionescomunes Laconsistenciaenaccionescomunesesimportantepara reforzarelmodeloconceptualdelusuario Existenaccionesquesoncomunesalamayoradelas aplicaciones,yqueCUAdefine:Abrirfichero,Imprimir,Tipodeletra. Componentes nfasisdeseleccin nfasisdenodisponible nfasisdelestadoactual Seleccin Seleccinconelratn Clic,Dobleclic,Mayus+clic,Ctrl+clic,Arrastrary

CUAdefineunaseriedecomponentesydescribesus propiedades Botonesderadio(radiobutton) Botonesdecomprobacin(checkbutton)

135 Botonespulsables(pushbutton) Cajadegrupo(groupbox) Campodetexto(textbox) Cajadelista(listbox)

Cajadecombinacin(combobox)

Indicadordeprogreso Cambiodelpuntero Ventanadeprogresodelaaccin

Controldedesplazamiento

136 Ayuda

Permiteresolverlasdudasdelosusuarios Interaccin TeclaF1 Seleccionandoelbotndeayuda Seleccionandoelmendeayuda

Tiposdeayuda Ayudacontextual Tutorial Glosario

Guasdeestiloparalaweb DisearparalaWebesdiferentededisearinterfacesdeusuariotradicionales. AlgunosprincipiossonaplicablesperolaWebtienesusparticularidades. Una caracterstica importante de la Web es la falta de interfaces de usuario comunes.Laprioridadesconseguirunainterfazatractiva,diferentedelasotras. Paraafrontaresteproblemavariasempresasyorganismoshanpublicadosusguas deestiloWeb: Apple IBM

137 Sun W3C YaleCenterforAdvancedInstructionalMedia NationalCancerInstitute(NIC).

Guasdeestiloparalawebapple,ibm,sun

Apple www.geo.tufreiberg.de/docs/apple/web_design/intro.html IBM www3.ibm.com/ibm/easy/eou_ext.nsf/publish/572 Sun sut1.sut.ac.th/StyleGuide/Printing_Version.html

GuasdeestiloparalawebW3C

ElW3CalbergalaIniciativadeAccesibilidadWeb(WAI),patrocinadaporvarias organizaciones

Lasguasjueganunpapelimportanteparacrearsitioswebaccesibles WAIofrecetresguasdiferentes: WebContentAccessibilityGuidelines(WCAG)

138 AuthoringToolAccessibilityGuidelines(ATAG) UserAgentAccessibilityGuidelines(UAAG) WebContentAccessibilityGuidelines(WCAG) Principiosdediseoparahacerlossitioswebaccesibles.Estudianescenariosque puedenocasionarproblemasausuariosdiscapacitados AuthoringToolAccessibilityGuidelines(ATAG) Asistenalosdesarrolladoresdeherramientasdecreacindecontenidoswebpara queestosseanaccesibles UserAgentAccessibilityGuidelines(UAAG) Explicanlascaractersticasdelasinterfacesquebeneficianalaspersonascon discapacidades(navegacinporteclado,opcionesdeconfiguracin, documentacin,comunicacinporvoz)

Guasdeestiloparalawebyale

info.med.yale.edu/caim/manual Esunadelasmsreconocidas Cubretodosloselementosbsicosimplicadosenlacreacindeunsitioweb Secentraenlainterfazyenlosprincipiosdediseogrficosubyacentesaldiseo deunsitioweb

139 GUASDEESTILOCORPORATIVAS

Ayudanalasempresasadarunmismoestiloatodossusproductos. Siunaorganizacindeseadesarrollarsupropioestilocorporativo,primerohade escogerunaguadeestilocomercial.

Estaguaseaumentaconunascaractersticaspropiasqueproduzcanunaimagen coherentedelaorganizacin.

140

5.CONCLUSIONES

Una vez sistematizada y analizada la informacin obtenida en la aplicacin de las encuestas,cuestionariosylasentrevistasycontrastadaconlafundamentacintericase pudoestablecerlossiguientescriteriosamaneraderesultadosyconclusiones.

Losdiseadoresconsideranlautilizacindelcolorcomoalgoclaveeneldiseodelos GUIs, es decir, ven la necesidad de utilizarlos sin embargo, no manejan un referente conceptualquesirvacomoargumentacinoteorizacindelcolor.

En lo relacionado con las estrategias o mecanismos que se deben tener en cuenta al momentodeutilizarloscoloresenundeterminadodiseo,losdiseadorestrabajanydan prioridadalasexigenciasdelusuario,dejandodeunladopatronesquesonnecesariosenla elaboracin de los GUIs, esto obedece a la primaca que ejerce el usuario y al desconocimientodelosprogramadoresenrelacinconelcolor.

141 TambinsepudodeterminarqueloscoloreseneldiseodelosGUIsjueganunpapel importante, los diseadores sabenquesonnecesarios paraofrecerle alos usuarios una interfaz ms atractiva pero carecen de lineamientos para la aplicacin correcta de los colores;deestosedesprendequealnomanejarreferentesbsicossobrelautilizacindel color, los programadores desconocen los efectos nocivos que conlleva la mala implementacindelcolor.

Alserinterrogadossobreelpredominiodeloscolores,losdiseadoresargumentanquese orientanporlastendenciasqueofrecenlosprogramasqueestnactualmenteenelmercado, observndoseconestolafaltadecreatividadeiniciativaquesedebetenerencuentaenel momentodecrearunainterfaz.

Losrequerimientosdelusuariosprevalecenenlaelaboracindeldiseo,peroalavezlos programadoresexpresanlanecesidaddebuscarunequilibrioentrelosestndaresdefinidos para el diseo de GUIs y las necesidades del cliente; se requiere que las personas responsablesdedisearinformenclaraydetalladamentealosusuariossobreloscriterios bsicosaaplicarenundeterminadodiseo.

Paraelaborarcualquierclasedediseoserequiereconocerlasexigenciasynecesidadesdel usuario, de lo contrario la efectividad del diseo sera limitada; en este sentido los programadores expresaron la necesidad de combinar, de armonizar los estndares de calidadconlasexigenciasdelospotencialesusuarios.Estodejaverquessedaunproceso decomunicacinentrelosclientesyelprogramador.

142

Enlorelacionadoconlastcnicasdepresentacinenunainterfazgrfica,losdiseadores manejanelementosquehacenposiblediferenciarunapresentacindeotra,peroelusode stossehaceenformageneralizadayesdeentendersequecadaelemento(conos,mens, color,etc.)guardatcnicasespecficasparasuutilizacinydelaaplicacindelasmismas dependelacalidaddeldiseo.Nosepuedegeneralizarelusodelastcnicasenelproceso deaudioyanimacin,yaquelasinterfacesgrficasexigequesepuntualicesobrelaspartes quelaconforman.

EsdeentendersequeeldiseodeGUIsdependedemltiplesfactoresqueserelacionande maneraintegral,raznporlacualsedebeespecificarenelconocimientodelaspartes precisandoloscomponentesdecadaelementoyas poderdiferenciarunapresentacinde otra.

Con respecto a los principios del diseo de interfaces se pudo establecer que los diseadorestienenencuentaparaeldesarrollodesustrabajoslosconocimientosadquiridos ensuetapadeformacin,losreferentesdelosGUIspreestablecidosylaexperienciamisma quegananatravsdelaprctica;peronoseevidenciaunprocesodeestudiopermanente queayudeenlainnovacindelosGUIs,esdecir,setrabajesobrelabasedeloaprendidoy lamecanizacindeestosconocimientos.

NoseobservaactualizacinenlosprincipiosqueorientaneldiseodelasGUIs,raznms quesuficienteparadeterminarloserroresquesecometenylamecanizacindelosdiseos.

143

Entreotrosaspectossobreloscualessepudoconcluiresquenosecuentaconmaterialde apoyo actualizado que les permita a los diseadores innovar, mejorar el diseo de las interfacesgrficasdeusuario,eltrabajosedaenformamecnica,operativa,generndose conestouniformidadparaimplementarunainterfazgrfica.

CadadiseadortrabajateniendoencuentaunconocimientobsicosobreeldiseodeGUIs, perolohacedemaneraaislada,nosocializaconotrosdiseadoressusexperiencias,se limitanasuscriterios;estonohaceposibleenriquecerlosconocimientosparaeldiseo.

Lasinstitucionesencargadasdeformaralosprogramadoresnosepreocupanporofrecer seminariosdeactualizacinenrelacinconestatemtica(Interfacesgrficasdeusuario)al parecernoseledalaimportanciaquerequiereestapartedeldiseo.

Sobrelabasedeestasconclusiones,queseconstituyenenlosresultadosobtenidosdel diseometodolgico,seconstruy laguaqueofrecealosprogramadoresyestudiantes referentes, recomendacionesyorientacionesprecisasquesedebentenerencuentapara disearunainterfazgrficadeusuarioconcriteriosdecalidad.

144

6.RECOMENDACIONES

Aumentar los recursos destinados al desarrollo de la interfaz, pues es una excelente inversinteniendoencuentalarelacincosto/beneficiomedibleysegura,ansinteneren cuentalosbeneficiosnomediblesendinerocomoelaumentodelasatisfaccin.

Aplicarelcontenidodelaguaparaelsoftwareengeneral,yquelapresenteinvestigacin sirvacomobaseparafuturosestudiossobreeltema.

145

BIBLIOGRAFA

KENDALLYKENDALL. AnlisisyDiseodeSistemas. Mxico.Ed.PrenticeHall. 1991.750p. LONG,Larry. Introduccinalascomputadorasyalprocesamientodelainformacin. Cuartaedicin.Mxico.Ed.PrenticeHall.1995.134155p.p. SOMMERVILLE,Ian.IngenieradeSoftware.Segundaedicin.Mxico.Ed.Addison WesleyIberoamericana1998.251275p.p. UREA,Luis.SANCHEZ,Antonio.MARTN,Mara.MANTAS,Jos.Fundamentosde Informtica.Mxico.Ed.Alfaomega.Ed.Alfaomega.1999.180185p.p.

146

ANEXOS

147

AnexoA.EncuestaNo.1.

148

Lapresenteencuestaesaplicadaconelfindereunirinformacinrelevanteparanuestro proyectodegradotitulado:ELABORACINDEUNAGUAPARALACREACIN DE GUIs IMPLEMENTANDO SUS MTRICAS Y RESALTANDO LA IMPORTANCIADELFACTORHUMANO.

OBJETIVO:Identificarlosnivelesdeconocimientoquemanejanlosusuariosenrelacin conlasInterfacesGrficasdeUsuario(GUI).

DIRIGIDOA:EstudiantesdelaUniversidadFranciscodePaulaSantander.

ConoceelsignificadodeGUI?.............................SI()NO()

149 Sisurespuestafuepositiva,porfavorrespondalassiguientespreguntasmarcandoconuna Xlarespuestacorrecta:

1.

QuesunaGUI? a. Puenteentreelusuarioy elprograma b.Esunapartedelcomputador c.Esunsoftware d.Unnuevosistemaoperativo () () () ()

2.

UnaGUIsirvepara: a. Mejorar la calidad del () () () () software b.Hacerdiseogrfico c.Lainteraccinhombrecomputador d.Viabilizaelmanejodelcomputador

3.

QuventajasofreceelusodeGUIs? a. Ahorrodeenerga,tiempoyespacio b.Rapidezenelmanejoyprocesamientodelainformacin c.Calidaddelaimpresin d.Efectividad,comprensinyaprovechamientodelosprogramas () () () ()

4.

LosGUIssonaplicablesa: a. Loscontroladores b.Dispositivosdeentradaysalida c.Todoslosprogramas(software) d.Hardware () () () ()

5.

SeentiendeporGUI: a. Un programa de ()

150 aplicacin b.Unainterfazgrfica c.Uncontrolador d.Unjuego () () ()

151

AnexoB.EncuestaNo.2.

Lapresenteencuestaesaplicadaconelfindereunirinformacinrelevanteparanuestro proyectodegradotitulado:ELABORACINDEUNAGUAPARALACREACIN DE GUIs IMPLEMENTANDO SUS MTRICAS Y RESALTANDO LA IMPORTANCIADELFACTORHUMANO.

152 OBJETIVO: Verificar los niveles de calidad de los GUIs en cuanto a su diseo y presentacin.

DIRIGIDOA:EstudiantesdelaUniversidadFranciscodePaulaSantander.

Encierreenuncrculolaletracorrespondientealarespuestacorrecta.

1. Una GUI es un diseo que le permite al usuario interactuar con el software aprovechandoalmximosusutilidades,porlotantoestedebeser: a. b. c. 2. Complejoensupresentacin Recargadodecoloresqueayudenaunamejorvisualizacin Consistente,claroypreciso Unainterfaz debetenerunbuendiseoqueleayudealusuarioaexplorar con mayorefectividad todaslasutilidades queelprogramaofrece,enestesentidodebe presentar: a. Grannmerodeventanasquepermitaalusuarioaccederalprogramaconmayor rapidez b.Saturacindeimgeneseiconos c.Esttica,consistencia,flexibilidadyorganizacin

3.

LasdificultadesquemssepresentanalmanejarlosGUIsson:

a. Lentitudenelprocesamientodelainformacin b.Incomprensindelosconos,inconsistenciaenlasventanasyrecargodeimgenes

153 c.Desperdiciodeenerga 4. LosGUIssonefectivosenlamedidaque:

a. b. c.

Guardanhomogeneidad,organizacinyfacilidaddeuso Nomuestrafacilidaddeaprendizaje Nogeneraunabuenaapreciacinenlosusuarios.

154

AnexoC.CuestionarioNo.1.

155 OBJETIVO:Establecerloscriteriosquetienenencuentalosprogramadoresencuantoal manejodelcoloreneldiseodeGUIs.

DIRIGIDOA:Programadoresyestudiantesdeprogramacin.

1.

LoscoloresparaustedsonfundamentaleseneldiseodeGUIs?

2.

Bajoqumecanismosoestrategiasutilizaloscolores?

3.

ConsideraquealnoutilizarcoloreseneldiseodelasGUIs, stassepodran disear?

4. Conocelosefectosnocivosparalosusuariosdelamalaimplementacinyusode loscolores?

156

5. Sonloscoloresunelementoclavealmomentodedisear?porqu?

6. Existencoloresdemayorpredominanciaenelmomentodedisear?

157

AnexoD.CuestionarioNo.2.

158

OBJETIVO:Reconocerlainfluenciayrelacionesentreelusuarioylosprogramadoresen elmomentodedisear.

DIRIGIDOA:Programadoresyestudiantesdeprogramacin.

1.LosrequerimientosdelusuarioprevalecensobrelosestndaresdeldiseodeGUIs?

2.

Explicaustedalosusuariossobreelementosclavesquesedebentenerencuenta paraeldiseo?

3.

Lasexigenciasdelosusuarioscoincidenonoconlosprocesoseneldiseode GUIs?

159 4. Sedebetenerencuenta nicamentelasnecesidadesdelusuario,oprimanotros elementos?

AnexoE.CuestionarioNo.3.

160

OBJETIVO:Identificarlastcnicasdepresentacin,audioyanimacinutilizadasporlos programadoresensusdiseos.

DIRIGIDOA:Programadoresyestudiantesdeprogramacin.

1.

Quelementoshacenposiblediferenciarunapresentacindeotra?

2.

Laspresentacionesguardanentresunejeencomn?Explique.

3. Qupapeljuegalautilizacindesonidoseneldiseodeinterfaces?

161

4.

Consideraquelossonidosdebencumplirunafuncinespecficaosolamenteson decorativos?

5. Loselementosdeanimacinvisualenqufavorecenalusuario?

6. Quconsideracionestieneencuentaalmomentodeescogerlaanimacinvisual?

162

AnexoF.CuestionarioNo.4.

163

OBJETIVO:Conocerlosprincipiosmsusadosporlosprogramadoresenlosdiseosde GUIs.

DIRIGIDOA:Programadoresyestudiantesdeprogramacin.

1.

Qu criterios de organizacin tiene en cuenta para la presentacin de la informacin?

2.

Qu elementos de relacin utiliza para la consistencia entre cada una de las ventanas?

164

3. Consideraquelosdiseosdebenguardarformatospredeterminados?

4.

Qudificultadessepresentanalmomentodeelaborarundiseo?

5. Qucriteriossonindispensablesparatenerxitoconlosdiseos?

6.

Quesperaobtenerdecadadiseo?

165

166

AnexoG.GuaparaeldiseodeInterfacesGrficas