Upload
luis-esteban-fernandez
View
19
Download
3
Embed Size (px)
DESCRIPTION
Ejercicios para la creación de interfaz movil
Citation preview
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