por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... ·...

Red Colaborativa para soportar los procesos de enseñanza-aprendizaje en el área de Interacción Humano - Computador a nivel Iberoamericano

UNAÑODEWEBINARSSOBREHCIENESPAÑOL

PatronesdeInterfazdeUsuariopor:

JaimeMuñozArteaga(PhD)([email protected])

Aguascalientes,México30Mayode2019

InteracciónHumano-ComputadoraDefinición

•  Disciplinarelacionadaconeldiseño,implementaciónyevaluacióndesistemasinformáticosinteractivosparausodesereshumanosyconelestudiodelosfenómenosmasimportantesconlosqueestárelacionado–  (ACMSIGCHIcurricula,1992,p6)

PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga

2

UsodeMetáforas

•  Caracteres,numéricos,caracteresespeciales

•  Lecturadeizq.ader.vslecturadeder.aizq.odearribaabajo

•  Fechasyformatos•  Tiposdemoneda•  Pesosymedidas

•  Nombresytítulos•  Puntuaciones•  Secuenciadeordenamiento•  Iconos,botones,colores•  Etiqueta,tono,formalides,

etc

3PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga

Másdefiniciones

•  Interacciónestodoloqueelusuarioestaenrelación,veyhaceconelsistemainformático

•  Lenguajedeentradaparaelusuario,unlenguajedesalidaparaelordenadoryunprotocoloparalainteracción.

•  Componenteatomarenlainteracción:–  Laadaptaciónconlastareasdelusuario–  Lametáfora–  Loscontrolesysuscomportamientos–  Navegacióndentroyentreventanas–  Estilosdeinteracción–  Principiosyguíasdediseño–  MultiplestiposdeFeedback


5

•  Lospatronesdediseñopermitendiseñarelcódigodelapartenointeractivadeunsistemacumpliendocriteriosdecalidaddelsoftwareorientadoaobjetos,porejemplo“elfavorecerlacomposiciónsobrelaherencia”y“diseñarparaelcambio”(Gammaetal.1995).

•  Lospatronesdeinterfazdeusuarioespecificanlasbuenasprácticasparadiseñarlainteracciónenbasealosrequerimientosdelusuariotomandoencuentacriteriosdesatisfaccióndelusuariocuandoutilizaunasistema(aplicación)interactivocomoporejemplolafacilidaddeuso,laasistenciaencasodeerrores,lafacilidaddeaprenderyeltiempoderespuestadelaaplicación.EjemplodepatronesdeinterfacesWIMP,webyparadispositivosmóviles[Welie1999].

Patrones de diseño para el software y para la interfaz de usuario


6

PatronesdeInterfazdeUsuariodeTidwell


[Tidwell2000]

PatronesdeInterfazdeUsuariodeWelie


8

Patróndeinteracción:Wizard[Welie1999]


ExperienciaenCompras[Welie1999]


Canalesdecomunicaciónenunsistemainteractivoenlínea

10

[Muñozetal.2008]


Patronesdeinteracciónparalaretroalimentaciónvisual

Semántico

Sintactico

Léxico

Estado delsistema

Notificación

Activación

Navegación

Estado deldialogo

Feedbackcontextual

Espacial

JerárquicoGrafosTemporal

InicialProgresoFinal

InformaciónValidaciónAdvertenciaCrítico

ProactivaReactiva

DirectaSequencial

Deshacer/Rehacer

InformativoNo modal/Modal

ModificaciónMotivación

Feedbackinmediato

Trazado

Espera

DesignaciónSelección

Patrones deinteracciónpara laretrolimen-tación visual

Despliegue demensajes

11

[Muñozetal.2002]


12

Patróndeinteracción:Mensajedevalidación [Muñozetal.2002]


13

Patróndesplieguevisualmensajeinformativos [Muñozetal.2002]


14

Patrones:KeypadySonido


[Muñoz,Martinezetal.2006]

CasodeAplicación:

Ambientedesimulacióndeseñales


Ambientedesimulacióndeseñales

16

[Muñozetal.2004]


GestióndeServicios

17

[Muñozetal.2004]


Visualizacióndelasvariablesdeestado

18

[Muñozetal.2004]


CasodeAplicación:Seguridadensitiosweb


Patronesdeinteracciónenseguridad

20

[Muñozetal.2008]


PatrónCódigodeAcceso

21

[Muñozetal.2008]


Identificacióndesitioswebseguros

22

[Muñozetal.2008]


AmenazasDurantelaNavegación

23

[Muñozetal.2008]


24

FeedbackInmediato[Mendoza,Muñozetal.2008]


Patrón:SolicituddeActividad


[Luna,Mendoza,Muñozetal.2016]

26

ComparativodePatronesdeInteracción

CPIDM=CategorizacióndePatronesdeInteracciónparaDispositivosMóviles



27

Conclusiones•  Lapatronesdeinterfacesdeusuariospermiten:

–  capitalizarbuenasprácticaseneldiseñodelainterfazdesistemasinteractivos

–  Ofreceraldiseñadorunprimersoportedeespecificaciónparaidentificarlasdiversasformasderetroalimentaciónenestetipodedispositivos.

–  Catalogarlainformación,ylosserviciosquepuedetenerunasistemainteractivoconformealatareadelusuario.


1.  Patronesdeinteracciónparaaplicacioneseducativasparausuarioscondiscapacidad

2.  Patronesdeinteracciondesitioswebseguros3.  Patronesdeinteracciónparaaplicacionesgroupware4.  Patronesdeinteracciónparasitiowebmulticulturales5.  Patronesdeinteracciónparalarehabilitacióndemanos6.  Patronesdeinteracciónparaelmodeladoysimulación7.  Patronesdeinteracciónparadispositivosmóviles8.  :

28

[Muñozetal.2004]

[Muñozetal.2009]

[Bernal,..Muñoz2013]

[Muñozetal.2016]


[Muñozetal.2018]


[Luna,Mendoza,Muñoz2016]

Patronesdeinteracciónendiversasáreas…

¿Preguntas?Graciasporsuatención:-)

2929

Jaime Muñoz Arteaga, PhD ([email protected])

Universidad Autónoma de Aguascalientes Centro de Ciencias Básicas

Sistema de Información, Edif. 26 Av. Universidad #940,

Cd. Universitaria, CP. 20131 Aguascalientes, México Tel (+52) 449-9108417


Referencias•  VanWelie,Martijn,vanderVeer,Gerritt,andEliëns,Anton:Usabilityproperties inDialogueModels.6th.Eurographics

workshoponDesign,SpecificationandVerificationofInteractiveSystems.UniversityofMinho,SpringerVerlarg.(1999)239-254.

•  Yahoo!DesignPatternLibrary,http://com2.devnet.scd.yahoo.com/ypatterns/,Consulta3dejuniode2006.•  TidwellJ.DesigningInterfaces:PatternsforEffectiveInteractionDesign,O'ReillyMedia;Secondedition(January9,2011)•  Hilbert, D.M., Redmiles, D.F., Extracting usability information from user interface events. ACM Computing Surveys.

Volume32,Issue4,2000.•  ZayraJaramillo-Bernal,CesarA.Collazos,KarlaArosemena,JaimeMuñozArteaga,MethodologicalFrameworkforDesign

andEvaluationofInteractiveSystemsfromaMulticulturalandEmotional,ACM,Clihc2013•  E. Gamma, R. Helm, R. Johnson, and J. Vlissides. Design Patterns: Elements of Reusable Object-Oriented Software.

Addison-WesleyBook,1995.•  JaimeMuñozArteaga,AlbaE.MedinaMedina, JosefinaGuerrero, JuanMuñozLopez,Patronesde Interacciónparael

DiseñodelaRetroalimentaciónVisualdeSitiosWebSeguros,IXCongresoInternacionalInteracción,Albacete,2008•  Jaime Muñoz Arteaga and Gustavo Rodríguez , “Patrones de Interacción: Una Solución para el diseño de la

RetroalimentaciónVisualdesistemasInteractivos,”CICcongress,DistritoFederal,México,November25-29,2002•  JaimeMuñozArteaga,RobertoCarreraM, GustavoRodríguezG.CarlosCastañedaRamirezyHéctorPérezG,Análisisy

DiseñodeAmbientesdeModeladoySimulaciónUtilizandoelParadigmadePatrones, reviewofUAA:ComputaciónyCiencia,AguascalientesMéxico,November2004,p.19-28

•  Jaime Muñoz Arteaga, Héctor Cardona Reyes, Francisco Acosta Escalante, Hand Rehabilitation Patterns for DesigingInteractive Environments- IEEE Latin America Transactions Review, Vol 14, No. 2, February 2016, pp 222-229 (ISSN:1548-0992),DOI:10.1109/TLA.2016.7530433

•  JaimeMuñoz-Arteaga,RicardoMendoza-Gonzalez,JeanVanderdonckt,FranciscoÁlvarez-Rodriguez,AMethodologyforDesigning Information Security Feedback Based on User Interface Patterns, Journal of ADVANCES IN ENGINEERINGSOFTWARE(JAES),Elsevier,December2009,Vol.40,pp1231-1241,ISSN0965-9978,doi:10.1016

•  JaimeMuñozArteaga,Fco.J.MartínezRuiz,JoséA.HernándezAguilar,PatronesdeInteracciónparaDispositivosMóviles.2006,MexIHC2006,1er.TallerdeInteracciónHumano-ComputadoraenMéxico

•  E.Gamma,R.Helm,J.VlissidesandR.Johnson.DesignPatterns:ElementsofReusableObject-OrientedSoftware.Addison-WesleyProffessionalComputingSeries,1995.


por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... ·...

Documents

Transcript of por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... ·...