EscueladeComputacinDiseodeSoftware

EjerciciodePatronesdeDiseodeInterfacesparamviles.

Profesor:LuisJavierChavarraSnchez

Estudiantes:
AndrsMarotoB.
DavidMurilloS.
LuiguiMadrigalV.
ArielAriasM.

Parte1

Busqueladefinicindelossiguientesconceptos(relacionadosconinterfacesgrficas)y
luegodetermineunadefinicinensuspropiaspalabras(estasdefinicionesnoestn
disponiblesenellibro,usteddebeseleccionaralgunafuenteofuentesbibliogrficasy
anotarlascomopartedeestetrabajo):

a. Navigability
:

LoposeenlasGUIsorganizadas,queledejaclaroalusuario
dondecomenzarainteractuarconelprogramaydireccionalaatencindelusuario
aloimportanteyproveeasistenciaenelflujodenavegacindurantetodalatarea
arealizar.

b.Effectiveness
:Rpidodeusarysepuedemedirobservandoqutanrpidounusuario
puedehacerunatareaespecficadespusdeaprenderla.Minimizarelmovimientodelos
ojosydelasmanos,quelastransicionesentresistemasdebenfluirlibrementeyfcil,las
rutasdenavegacintienenqueserlomscortasposiblesyanticiparlosdeseosdel
usuarioynecesidadesantesdequeestosocurransoncaractersticasdediseoque
favorecenlaefectividaddelaGUI.

c.Learnability
:Qutanrpidounusuariopuedeiniciarunainteraccineficienteysin
erroresconunsistema.Estrelacionadoconlacurvadeaprendizajeyquetantotiempo
senecesitaparafamiliarizarseconlainterfazgrficadelsistema.

d.Guessability
:Lacapacidaddeintuicinqueunusuarioquenuncahautilizadoel
programaposeeparatratardecompletarunatarea.Sebasaenlosmodelosmentalesy
cmoestosayudanaadivinarquesetienequehacerparallegaralobjetivo.Porejemplo
lasGUIsdelossistemasiOStienebuenguessabilityporquehastaunniode3aos
puedepredecircmoabrirunprogramaopasarunafoto.

e.Errorresistance
:
Dificultadparausarlainterfazinapropiadamente.Sepuedemedir
observandoqutanfrecuenteunusuariocometeunerrormientrasrealizaunatarea.Si
loserroresdeusuariosoncomunes,elsistemapuedeestardestinadoafallar.

f.Usefulness:
Esteconceptoempiezacomprendiendoqueesloquenecesitanlas
personas,quelesgustaraconvertirdemaneramssimpleloqueahoraencuentran
difcil,yprocederaencontrarmanerasdehacerloimposibleposible,lolentorpidocon
ayudadeunainterfaztil.

BibliografaConsultada

Helander,M.,Landauer,T.&Prabhu,.(Ed.).(1997).
HandbookofHumanComputer
Interaction
(Segundaed.)Amsterdam:ElsevierScienceB.V..

Parte2

Documentecadaunodelossiguientespatronesdediseodeinterfaces,paracadauno
deellosindique:

1.Patrndenavegacinprimario.

a.Springboard.

Nombredelpatrn

Springboard

Tipodepatrn

Navegacinprimaria

Brevedescripcin

SeleconocetambincomoLaunchpad.
Caracterizadoporserunapginacon
opcionesdemenlacualfuncionacomo
puntodesaltoentrelosdistintossectores
delaaplicacin.
Sepuedevercomoelmenprincipalde
opcionesdeunaaplicacin.
Esneutralconrespectoalsistema
operativo,trabajaigualdebienentodos
losdispositivos.

Cundoestilestepatrn?

Puedeserutilizado
paramostrar
informacindelperfilpersonalenlnea
conlasopcionesdemen.Sedebe
utilizarundiseodecuadrculaparalos
artculosdelamismaimportancia,oun
trazadoirregularparadestacaralgunos
elementosmsqueotros.

Estepatrnestilparacualquiertipode
aplicacin:redessociales,juegos,
ecommerce,etc.Paracentralizarlas
opcionesyqueelusuariopuedadirigirse
rpidamenteaestassinbuscarportodala
aplicacin.

Ejemplooejemplosvisualesdelpatrn

SpringboarddeliOS.

b.ListMenu.

Nombredelpatrn

ListMenu

Tipodepatrn

Navegacinprimaria

Brevedescripcin

EssimilaralSpringboardenqueambos
sirvencomopuntodesaltodentrodela
aplicacin.Semuestraunmende
maneraverticalconlasopcionesalasque
permiteaccederelsistema.Cadapunto
delmenesunsaltoaotrapantalladela
aplicacin,cabemencionarqueencada
unadeestasdebeexistirlaopcinpara
volveralmenprincipal.

Cundoestilestepatrn?

Estepatrnestilcuandolasopciones
tienenttuloslargosocuandoestos
necesitansubtextos.

Ejemplooejemplosvisualesdelpatrn

Listmenu:
TheGrandValleyState
Universitymobileapp.
http://www.gvsu.edu/it/mygvmobileapplic
ations266.htm


2.Patrndenavegacinsecundario.

a.PageCarousel.

Nombredelpatrn

PageCarousel

Tipodepatrn

NavegacinSecundaria.

Brevedescripcin

Muestraunanavegacinrpidadeun
conjuntofinitodepginasenlainterfaz,
conlascualesseinteractapormediode
gestossecuencialessimilaresalosde
pasarunaspginadeunlibro,arrastrando
eldedoysoltando.
Seencuentrandentrodelindicadorde
pginas,lacualpresentacuntaspginas
estndentrodelcarrusel.

Cundoestilestepatrn?

Estepatrnestilparalanavegacinde
pequeascantidadesdepginas,adems
quepormediodesuindicadorvisualse
puedereflejarelnmerodepginayla
pginaactualenlanosencontramos.

Noserecomiendacuandosetienenms
de8pginas.

Ejemplooejemplosvisualesdelpatrn

b.ImageCarousel.

Nombredelpatrn

ImageCarousel.

Tipodepatrn

NavegacinSecundaria.

Brevedescripcin

EsmuysimilaralPageCarouselensu
funcin,soloqueconimgenes.

Cundoestilestepatrn?

Elcarruseldeimagenestilparala
visualizacindecontenidovisual,como
artculos,productosyfotos.

Ejemplooejemplosvisualesdelpatrn

3.Formularios

a.SignIn.

Nombredelpatrn

SignIn

Tipodepatrn

Forms

Brevedescripcin

Seutilizaparainiciosdesesin,contiene
pocasentradasdedatos:nombrede
usuariooemail,contrasea,botnde
accin,ayudaconlacontraseayopcin
pararegistrar.Algunaspresentanla
opcindeiniciarsesinconFacebooku
otrosserviciosparaacelerarelprocesode
creacindeunacuentaaccediendoalAPI
deestasaplicaciones.

Cundoestilestepatrn?

Degranutilidadcuandolaaplicacin
requiereautenticacindeusuarios.

Nosepongacreativoconelsignin,
apeguesealasprcticascomunesantes
vistas,conloscamposnecesariosy
asegresedeofrecerayudaporsial
usuarioseperdilacontrasea.

Ejemplooejemplosvisualesdelpatrn

b.Registration.

Nombredelpatrn

Registration

Tipodepatrn

Formularios.

Brevedescripcin

ElpatrndicequealigualqueSignin
debetenerlamenorcantidaddeentradas,
porejemplo,eliminarelconfirmarcorreoy
contrasea.Lasolicituddelosdatosdebe
serverticalparaquenosetrunquenlos
datos.

Cundoestilestepatrn?

Cuandolaaplicacinrequierequesus
usuarioscuentenconunperfilparamayor
identificacinypersonificacin.Alcumplir
conelpatrnsemejoralaexperienciadel
usuarioyaqueesteprefierenorealizar
procesoslargosdellenadodedatospara
completarelregistro.

Hacersimpleellogueodeunusuarioque
yaseregistranteriormente.

Ejemplooejemplosvisualesdelpatrn


c.SearchForm.

Nombredelpatrn

SearchForm

Tipodepatrn

Form

Brevedescripcin

Esunpatrnquefomentauncriteriode
bsquedalimitadosolamenteacampos
esencialesyqueproporcionaparmetros
pordefectosensiblesalusuarioyal
tiempo.Porejemploeldaactualpara
hacerunareservacin.

Cundoestilestepatrn?

Estilparausuariosquenecesitende
bsquedasmsespecficas(sinmuchas
entradasocriterios)yquestalesfacilite
demanerarpidalosposiblesparmetros
quetenganpensadoutilizar.

Ejemplooejemplosvisualesdelpatrn

4.TablasyListas.

a.BasicTable.

Nombredelpatrn

BasicTable

Tipodepatrn

Tablasylistas

Brevedescripcin

Esunatablaestndarconcolumnasfijas
yundiseocuadriculadoalternando
loscoloresdefila,tambinllamada
extraccincebrayconestomejorarla
legibilidaddelatabla.

Cundoestilestepatrn?

Estilcuandosedebenpresentarvarios
datosdeunsoloelemento,porlotanto
estosdatospuedensercolumnasy
mostrarloqueelusuariorequiera.
Tambinparamostrarestadsticas.

Ejemplooejemplosvisualesdelpatrn

b.CascadingLists.

Nombredelpatrn

CascadingLists

Tipodepatrn

Tablas&Listas

Brevedescripcin

Unatablarbol(debajodeunaopcinsepresentan
lassubopciones)puedeserunpocoincmodade
utilizarenlapantalladeuntelfonomvil,cascading
listproveelamismaestructurajerrquica.
Lainformacinsepresentaenunasolacolumnacon
mltiplesfilas.

Cundoestilestepatrn?

Estilcuandoexisteunaestructurajerrquicaentre
lainformacinquesedebepresentar.Esdecircada
opcintieneunconjuntodesubopcionesyasuvez
cadasubopcintienevariassubopciones.

Ejemplooejemplosvisualesdelpatrn

5.Bsqueda,ordenamientoyfiltros.

a.ExplicitSearch.

Nombredelpatrn

ExplicitSearch

Tipodepatrn

Bsqueda,ordenamientoyfiltros

Brevedescripcin

Hacereferenciaalaaccinderealizarla
bsquedayvisualizarlosresultados.Se
damediantelaopcindebuscarenla
partesuperiordelapantallaylos
resultadossemostrarnbajoeste
buscador.

Cundoestilestepatrn?

Estilcuandolaaplicacinrequierede
bsquedasespecficasentregran
cantidaddedatos,ademsquefacilitala
obtencindedatosalusuario.

Setienequeofrecerunbotnpara
cancelarlabsquedayparavaciarla
bsqueda.

Ejemplooejemplosvisualesdelpatrn

b.OnscreenSort.

Nombredelpatrn

OnscreenSort

Tipodepatrn

Bsqueda,ordenamientoyfiltros

Brevedescripcin

Estepatrnmuestraunacantidadlimitada
desolucionesdeordenamientode
informacinpormediodeunsoloclick,las
cualessedespliegancadaunapor
separadoenunasolapgina.

Cundoestilestepatrn?

Estilcuandoelusuariodeseaverla
informacinordenadademanera
especfica,visualmentefcildeentendery
porseparado.

Ejemplooejemplosvisualesdelpatrn

c.FilterDrawer.

Nombredelpatrn

FilterDrawer

Tipodepatrn

Bsqueda,ordenamientoyfiltros

Brevedescripcin

Casi,peronotaneficientecomoonscreenfilter.Filter
Drawermuestrauncajn,dondesemuestran
opcionesparafiltrarinformacin.Puedesersimple
(pocasopciones)ocomplejo(variasopciones).

Cundoestilestepatrn?

tilcuandoelusuariodeseaonecesitausarvarios
filtrospararefinarlainformacinqueselepresenta.

Ejemplooejemplosvisualesdelpatrn

6.Feedback&Affordance.

a.Feedback.

Nombredelpatrn

Feedback

Tipodepatrn

Feedback&Affordance

Brevedescripcin

Sedebeproveerunaadecuada,claray
oportunaretroalimentacin
alusuarioparaqueestesepael
resultadosdesusaccionesyqueest
realizandooharealizadoelsistema.
Puedevariardesimplesindicadoresde
progresoymensajesdeconfirmacin,a
animacionesyefectosmssofisticados.

Cundoestilestepatrn?

Estilcuandolosprocesosqueest
realizandoelsistemasondeimportanciay
debidanotificacinalusuario,porejemplo,
Elregistrohasidoexitoso,ascomo
tambinestadosdealgunatareadeuna
aplicacincomoporejemploelavancede
suinstalacin.

Ejemplooejemplosvisualesdelpatrn

b.ErrorMessages.

Nombredelpatrn

ErrorMessages

Tipodepatrn

Feedback&Affordance

Brevedescripcin

Estepatrnpresentalosmensajesde
errorpormediodemaneramsinteractiva
yqueelusuariopuedacomprender(no
medianteerroresdecdigosde
programacin),ademsdesugerirde
maneraconstructivaunaposiblesolucin.

Cundoestilestepatrn?

Estilcuandoelusuarionoescapazde
comprendersimplesdilogosocdigosde
error.

Ejemplooejemplosvisualesdelpatrn