EscueladeComputacinDiseodeSoftware

EjerciciodePatronesdeDiseodeInterfacesparamviles.

Profesor:LuisJavierChavarraSnchezEstudiantes:AndrsMarotoB.DavidMurilloS.LuiguiMadrigalV.ArielAriasM.Parte1Busqueladefinicindelossiguientesconceptos(relacionadosconinterfacesgrficas)yluegodetermineunadefinicinensuspropiaspalabras(estasdefinicionesnoestndisponiblesenellibro,usteddebeseleccionaralgunafuenteofuentesbibliogrficasyanotarlascomopartedeestetrabajo):

a. Navigability:LoposeenlasGUIsorganizadas,queledejaclaroalusuariodondecomenzarainteractuarconelprogramaydireccionalaatencindelusuarioaloimportanteyproveeasistenciaenelflujodenavegacindurantetodalatareaarealizar.

b.Effectiveness:Rpidodeusarysepuedemedirobservandoqutanrpidounusuariopuedehacerunatareaespecficadespusdeaprenderla.Minimizarelmovimientodelosojosydelasmanos,quelastransicionesentresistemasdebenfluirlibrementeyfcil,lasrutasdenavegacintienenqueserlomscortasposiblesyanticiparlosdeseosdelusuarioynecesidadesantesdequeestosocurransoncaractersticasdediseoquefavorecenlaefectividaddelaGUI.

c.Learnability:Qutanrpidounusuariopuedeiniciarunainteraccineficienteysinerroresconunsistema.Estrelacionadoconlacurvadeaprendizajeyquetantotiemposenecesitaparafamiliarizarseconlainterfazgrficadelsistema.d.Guessability:Lacapacidaddeintuicinqueunusuarioquenuncahautilizadoelprogramaposeeparatratardecompletarunatarea.Sebasaenlosmodelosmentalesycmoestosayudanaadivinarquesetienequehacerparallegaralobjetivo.PorejemplolasGUIsdelossistemasiOStienebuenguessabilityporquehastaunniode3aospuedepredecircmoabrirunprogramaopasarunafoto.e.Errorresistance:Dificultadparausarlainterfazinapropiadamente.Sepuedemedirobservandoqutanfrecuenteunusuariocometeunerrormientrasrealizaunatarea.Siloserroresdeusuariosoncomunes,elsistemapuedeestardestinadoafallar.f.Usefulness:Esteconceptoempiezacomprendiendoqueesloquenecesitanlaspersonas,quelesgustaraconvertirdemaneramssimpleloqueahoraencuentrandifcil,yprocederaencontrarmanerasdehacerloimposibleposible,lolentorpidoconayudadeunainterfaztil.BibliografaConsultadaHelander,M.,Landauer,T.&Prabhu,.(Ed.).(1997).HandbookofHumanComputerInteraction(Segundaed.)Amsterdam:ElsevierScienceB.V..

Parte2Documentecadaunodelossiguientespatronesdediseodeinterfaces,paracadaunodeellosindique:1.Patrndenavegacinprimario.a.Springboard.

Nombredelpatrn Springboard

Tipodepatrn Navegacinprimaria

Brevedescripcin SeleconocetambincomoLaunchpad.Caracterizadoporserunapginaconopcionesdemenlacualfuncionacomopuntodesaltoentrelosdistintossectoresdelaaplicacin.Sepuedevercomoelmenprincipaldeopcionesdeunaaplicacin.Esneutralconrespectoalsistemaoperativo,trabajaigualdebienentodoslosdispositivos.

Cundoestilestepatrn? Puedeserutilizadoparamostrarinformacindelperfilpersonalenlneaconlasopcionesdemen.Sedebeutilizarundiseodecuadrculaparalosartculosdelamismaimportancia,ountrazadoirregularparadestacaralgunoselementosmsqueotros.Estepatrnestilparacualquiertipodeaplicacin:redessociales,juegos,ecommerce,etc.Paracentralizarlasopcionesyqueelusuariopuedadirigirserpidamenteaestassinbuscarportodalaaplicacin.

Ejemplooejemplosvisualesdelpatrn

SpringboarddeliOS.

b.ListMenu.

Nombredelpatrn ListMenu

Tipodepatrn Navegacinprimaria

Brevedescripcin EssimilaralSpringboardenqueambossirvencomopuntodesaltodentrodelaaplicacin.Semuestraunmendemaneraverticalconlasopcionesalasquepermiteaccederelsistema.Cadapuntodelmenesunsaltoaotrapantalladelaaplicacin,cabemencionarqueencadaunadeestasdebeexistirlaopcinparavolveralmenprincipal.

Cundoestilestepatrn? Estepatrnestilcuandolasopcionestienenttuloslargosocuandoestosnecesitansubtextos.

Ejemplooejemplosvisualesdelpatrn

Listmenu:TheGrandValleyStateUniversitymobileapp.http://www.gvsu.edu/it/mygvmobileapplications266.htm

2.Patrndenavegacinsecundario.a.PageCarousel.

Nombredelpatrn PageCarousel

Tipodepatrn NavegacinSecundaria.

Brevedescripcin Muestraunanavegacinrpidadeunconjuntofinitodepginasenlainterfaz,conlascualesseinteractapormediodegestossecuencialessimilaresalosdepasarunaspginadeunlibro,arrastrandoeldedoysoltando.Seencuentrandentrodelindicadordepginas,lacualpresentacuntaspginasestndentrodelcarrusel.

Cundoestilestepatrn? Estepatrnestilparalanavegacindepequeascantidadesdepginas,ademsquepormediodesuindicadorvisualsepuedereflejarelnmerodepginaylapginaactualenlanosencontramos.Noserecomiendacuandosetienenmsde8pginas.

Ejemplooejemplosvisualesdelpatrn

b.ImageCarousel.

Nombredelpatrn ImageCarousel.

Tipodepatrn NavegacinSecundaria.

Brevedescripcin EsmuysimilaralPageCarouselensufuncin,soloqueconimgenes.

Cundoestilestepatrn? Elcarruseldeimagenestilparalavisualizacindecontenidovisual,comoartculos,productosyfotos.

Ejemplooejemplosvisualesdelpatrn

3.Formulariosa.SignIn.

Nombredelpatrn SignIn

Tipodepatrn Forms

Brevedescripcin Seutilizaparainiciosdesesin,contienepocasentradasdedatos:nombredeusuariooemail,contrasea,botndeaccin,ayudaconlacontraseayopcinpararegistrar.AlgunaspresentanlaopcindeiniciarsesinconFacebookuotrosserviciosparaacelerarelprocesodecreacindeunacuentaaccediendoalAPIdeestasaplicaciones.

Cundoestilestepatrn? Degranutilidadcuandolaaplicacinrequiereautenticacindeusuarios.Nosepongacreativoconelsignin,apeguesealasprcticascomunesantesvistas,conloscamposnecesariosyasegresedeofrecerayudaporsialusuarioseperdilacontrasea.

Ejemplooejemplosvisualesdelpatrn

b.Registration.

Nombredelpatrn Registration

Tipodepatrn Formularios.

Brevedescripcin ElpatrndicequealigualqueSignindebetenerlamenorcantidaddeentradas,porejemplo,eliminarelconfirmarcorreoycontrasea.Lasolicituddelosdatosdebeserverticalparaquenosetrunquenlosdatos.

Cundoestilestepatrn? Cuandolaaplicacinrequierequesususuarioscuentenconunperfilparamayoridentificacinypersonificacin.Alcumplirconelpatrnsemejoralaexperienciadelusuarioyaqueesteprefierenorealizarprocesoslargosdellenadodedatosparacompletarelregistro.Hacersimpleellogueodeunusuarioqueyaseregistranteriormente.

Ejemplooejemplosvisualesdelpatrn

c.SearchForm.

Nombredelpatrn SearchForm

Tipodepatrn Form

Brevedescripcin Esunpatrnquefomentauncriteriodebsquedalimitadosolamenteacamposesencialesyqueproporcionaparmetrospordefectosensiblesalusuarioyaltiempo.Porejemploeldaactualparahacerunareservacin.

Cundoestilestepatrn? Estilparausuariosquenecesitendebsquedasmsespecficas(sinmuchasentradasocriterios)yquestalesfacilitedemanerarpidalosposiblesparmetrosquetenganpensadoutilizar.

Ejemplooejemplosvisualesdelpatrn

4.TablasyListas.a.BasicTable.

Nombredelpatrn BasicTable

Tipodepatrn Tablasylistas

Brevedescripcin Esunatablaestndarconcolumnasfijasyundiseocuadriculadoalternandoloscoloresdefila,tambinllamadaextraccincebrayconestomejorarlalegibilidaddelatabla.

Cundoestilestepatrn? Estilcuandosedebenpresentarvariosdatosdeunsoloelemento,porlotantoestosdatospuedensercolumnasymostrarloqueelusuariorequiera.Tambinparamostrarestadsticas.

Ejemplooejemplosvisualesdelpatrn

b.CascadingLists.

Nombredelpatrn CascadingLists

Tipodepatrn Tablas&Listas

Brevedescripcin Unatablarbol(debajodeunaopcinsepresentanlassubopciones)puedeserunpocoincmodadeutilizarenlapantalladeuntelfonomvil,cascadinglistproveelamismaestructurajerrquica.Lainformacinsepresentaenunasolacolumnaconmltiplesfilas.

Cundoestilestepatrn? Estilcuandoexisteunaestructurajerrquicaentrelainformacinquesedebepresentar.Esdecircadaopcintieneunconjuntodesubopcionesyasuvezcadasubopcintienevariassubopciones.

Ejemplooejemplosvisualesdelpatrn

5.Bsqueda,ordenamientoyfiltros.a.ExplicitSearch.

Nombredelpatrn ExplicitSearch

Tipodepatrn Bsqueda,ordenamientoyfiltros

Brevedescripcin Hacereferenciaalaaccinderealizarlabsquedayvisualizarlosresultados.Sedamediantelaopcindebuscarenlapartesuperiordelapantallaylosresultadossemostrarnbajoestebuscador.

Cundoestilestepatrn? Estilcuandolaaplicacinrequieredebsquedasespecficasentregrancantidaddedatos,ademsquefacilitalaobtencindedatosalusuario.Setienequeofrecerunbotnparacancelarlabsquedayparavaciarlabsqueda.

Ejemplooejemplosvisualesdelpatrn

b.OnscreenSort.

Nombredelpatrn OnscreenSort

Tipodepatrn Bsqueda,ordenamientoyfiltros

Brevedescripcin Estepatrnmuestraunacantidadlimitadadesolucionesdeordenamientodeinformacinpormediodeunsoloclick,lascualessedespliegancadaunaporseparadoenunasolapgina.

Cundoestilestepatrn? Estilcuandoelusuariodeseaverlainformacinordenadademaneraespecfica,visualmentefcildeentenderyporseparado.

Ejemplooejemplosvisualesdelpatrn

c.FilterDrawer.

Nombredelpatrn FilterDrawer

Tipodepatrn Bsqueda,ordenamientoyfiltros

Brevedescripcin Casi,peronotaneficientecomoonscreenfilter.FilterDrawermuestrauncajn,dondesemuestranopcionesparafiltrarinformacin.Puedesersimple(pocasopciones)ocomplejo(variasopciones).

Cundoestilestepatrn? tilcuandoelusuariodeseaonecesitausarvariosfiltrospararefinarlainformacinqueselepresenta.

Ejemplooejemplosvisualesdelpatrn

6.Feedback&Affordance.a.Feedback.

Nombredelpatrn Feedback

Tipodepatrn Feedback&Affordance

Brevedescripcin Sedebeproveerunaadecuada,clarayoportunaretroalimentacinalusuarioparaqueestesepaelresultadosdesusaccionesyqueestrealizandooharealizadoelsistema.Puedevariardesimplesindicadoresdeprogresoymensajesdeconfirmacin,aanimacionesyefectosmssofisticados.

Cundoestilestepatrn? Estilcuandolosprocesosqueestrealizandoelsistemasondeimportanciaydebidanotificacinalusuario,porejemplo,Elregistrohasidoexitoso,ascomotambinestadosdealgunatareadeunaaplicacincomoporejemploelavancedesuinstalacin.

Ejemplooejemplosvisualesdelpatrn

b.ErrorMessages.

Nombredelpatrn ErrorMessages

Tipodepatrn Feedback&Affordance

Brevedescripcin Estepatrnpresentalosmensajesdeerrorpormediodemaneramsinteractivayqueelusuariopuedacomprender(nomedianteerroresdecdigosdeprogramacin),ademsdesugerirdemaneraconstructivaunaposiblesolucin.

Cundoestilestepatrn? Estilcuandoelusuarionoescapazdecomprendersimplesdilogosocdigosdeerror.

Ejemplooejemplosvisualesdelpatrn