![Page 1: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/1.jpg)
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
![Page 2: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/2.jpg)
InteracciónHumano-ComputadoraDefinición
• Disciplinarelacionadaconeldiseño,implementaciónyevaluacióndesistemasinformáticosinteractivosparausodesereshumanosyconelestudiodelosfenómenosmasimportantesconlosqueestárelacionado– (ACMSIGCHIcurricula,1992,p6)
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
2
![Page 3: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/3.jpg)
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
![Page 4: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/4.jpg)
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
44PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 5: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/5.jpg)
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
5PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 6: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/6.jpg)
6
PatronesdeInterfazdeUsuariodeTidwell
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
[Tidwell2000]
![Page 7: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/7.jpg)
PatronesdeInterfazdeUsuariodeWelie
77PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 8: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/8.jpg)
8
Patróndeinteracción:Wizard[Welie1999]
8PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 9: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/9.jpg)
ExperienciaenCompras[Welie1999]
99PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 10: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/10.jpg)
Canalesdecomunicaciónenunsistemainteractivoenlínea
10
[Muñozetal.2008]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 11: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/11.jpg)
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]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 12: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/12.jpg)
12
Patróndeinteracción:Mensajedevalidación [Muñozetal.2002]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 13: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/13.jpg)
13
Patróndesplieguevisualmensajeinformativos [Muñozetal.2002]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 14: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/14.jpg)
14
Patrones:KeypadySonido
14PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
[Muñoz,Martinezetal.2006]
![Page 15: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/15.jpg)
CasodeAplicación:
Ambientedesimulacióndeseñales
15PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 16: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/16.jpg)
Ambientedesimulacióndeseñales
16
[Muñozetal.2004]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 17: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/17.jpg)
GestióndeServicios
17
[Muñozetal.2004]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 18: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/18.jpg)
Visualizacióndelasvariablesdeestado
18
[Muñozetal.2004]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 19: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/19.jpg)
CasodeAplicación:Seguridadensitiosweb
19PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 20: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/20.jpg)
Patronesdeinteracciónenseguridad
20
[Muñozetal.2008]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 21: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/21.jpg)
PatrónCódigodeAcceso
21
[Muñozetal.2008]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 22: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/22.jpg)
Identificacióndesitioswebseguros
22
[Muñozetal.2008]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 23: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/23.jpg)
AmenazasDurantelaNavegación
23
[Muñozetal.2008]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 24: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/24.jpg)
24
FeedbackInmediato[Mendoza,Muñozetal.2008]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 25: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/25.jpg)
Patrón:SolicituddeActividad
25PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
[Luna,Mendoza,Muñozetal.2016]
![Page 26: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/26.jpg)
26
ComparativodePatronesdeInteracción
CPIDM=CategorizacióndePatronesdeInteracciónparaDispositivosMóviles
26PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
[Muñoz,Martinezetal.2006]
![Page 27: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/27.jpg)
27
Conclusiones• Lapatronesdeinterfacesdeusuariospermiten:
– capitalizarbuenasprácticaseneldiseñodelainterfazdesistemasinteractivos
– Ofreceraldiseñadorunprimersoportedeespecificaciónparaidentificarlasdiversasformasderetroalimentaciónenestetipodedispositivos.
– Catalogarlainformación,ylosserviciosquepuedetenerunasistemainteractivoconformealatareadelusuario.
27PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 28: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/28.jpg)
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ñoz,Martinezetal.2006]
[Muñozetal.2018]
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
[Luna,Mendoza,Muñoz2016]
Patronesdeinteracciónendiversasáreas…
![Page 29: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/29.jpg)
¿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
PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga
![Page 30: por : Jaime Muñoz Arteaga (PhD)hci-collab.com/wp-content/uploads/2018/12/HciWebinars... · 2019-06-26 · Interactive Environments- IEEE Latin America Transactions Review, Vol 14,](https://reader034.vdocumento.com/reader034/viewer/2022050315/5f77f7aa8448c4782550d934/html5/thumbnails/30.jpg)
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.
3030PatronesdeInterfazdeUsuariopor:Dr.JaimeMuñozArteaga