dynamic user interfaces · n mbui techniques provide conceptual separation between the different...
TRANSCRIPT
![Page 1: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/1.jpg)
Dynamic User InterfacesDynamic User Interfaces
José A. José A. MacíasMacíasComputer Engineering DepartmentComputer Engineering DepartmentUniversidad Universidad AutónomaAutónoma de Madridde Madrid
SpainSpain
![Page 2: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/2.jpg)
OutlineOutline
nn Why Graphical User Interfaces (GUI) ?Why Graphical User Interfaces (GUI) ?nn HumanHuman--Computer InteractionComputer Interactionnn Modeling GUIsModeling GUIsnn Dynamic WebDynamic Web--Based User InterfacesBased User Interfacesnn Dynamic Web Page AuthoringDynamic Web Page Authoringnn PEGASUSPEGASUSnn PERSEUSPERSEUSnn DESKDESK
nn ConclusionsConclusions
![Page 3: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/3.jpg)
Why GUI?Why GUI?
![Page 4: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/4.jpg)
Why GUI?Why GUI?
ComputerGraphical User InterfaceEnd-User
Interaction
![Page 5: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/5.jpg)
Why GUI?Why GUI?
nn The GUI is a chief component in mostly The GUI is a chief component in mostly today’s software development projectstoday’s software development projects
nn It determines the success or failure of any It determines the success or failure of any software applicationsoftware application
nn Almost 48% uptake of code lines Almost 48% uptake of code lines correspond to GUIcorrespond to GUInn [Myers, 92][Myers, 92]
![Page 6: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/6.jpg)
Why GUI?Why GUI?
Data Data ManagementManagement
ApplicationApplicationLogicLogic
GUIGUI
70% uptake of total software development effort concerns GUI design
![Page 7: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/7.jpg)
HumanHuman--Computer InteractionComputer Interaction
nn GUI increasing led the GUI increasing led the CS world to get more CS world to get more involved in GUI design involved in GUI design as time goes byas time goes bynn New discipline appears: New discipline appears:
HCIHCInn PsychologyPsychologynn SociologySociologynn DesignDesignnn Artificial IntelligenceArtificial Intelligencenn Software EngineeringSoftware Engineeringnn ErgonomicsErgonomicsnn ……
nn Main TopicsMain Topicsnn Cognitive Aspects of Cognitive Aspects of
InteractionInteractionnn UsabilityUsabilitynn AccessibilityAccessibilitynn UserUser--Centered DesignCentered Designnn DevicesDevicesnn AI applied to new AI applied to new
interaction algorithmsinteraction algorithmsnn ……
![Page 8: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/8.jpg)
Modeling GUIsModeling GUIs
nn Creating and maintaining GUIs takes too much timeCreating and maintaining GUIs takes too much timenn Same problem than past software crisis about amounts of Same problem than past software crisis about amounts of
GUI code to manageGUI code to managenn Then appear Interface Builders and GUI programming Then appear Interface Builders and GUI programming
libraries libraries nn These tools manage the Interface information all togetherThese tools manage the Interface information all togethernn The GUIs are still difficult to maintainThe GUIs are still difficult to maintainnn GUI programming results complex, and some aspects cannot be GUI programming results complex, and some aspects cannot be
managed very wellmanaged very wellnn User’s TasksUser’s Tasksnn User’s Interaction ModelsUser’s Interaction Modelsnn …. In general: …. In general: Interaction Behavioral informationInteraction Behavioral information
![Page 9: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/9.jpg)
Modeling GUIsModeling GUIs
nn SolutionSolutionnn Split up the GUI information into different Split up the GUI information into different
conceptual levelsconceptual levelsnn Create specifications for GUIs creation, Create specifications for GUIs creation,
independent of the programming languageindependent of the programming languagenn Provide with automatic mechanisms for GUI Provide with automatic mechanisms for GUI
generation and maintenancegeneration and maintenance
Model-Based User Interface Approach
![Page 10: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/10.jpg)
Modeling GUIsModeling GUIs
Dialog Model
Task Model
PresentationModel
User and PlatformModels
DomainModel
GraphicalUserInterface
RuntimeSystem
![Page 11: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/11.jpg)
Modeling GUIsModeling GUIs
nn MBUI Approach MBUI Approach nn Allows for defining, separatelyAllows for defining, separately
nn Interface knowledgeInterface knowledgenn Interface presentationInterface presentation
nn Is more efficient regarding the production cycleIs more efficient regarding the production cyclenn Allows for reserve engineering processesAllows for reserve engineering processes
Models GUIsGeneration
Modification
![Page 12: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/12.jpg)
Dynamic WebDynamic Web--Based User InterfacesBased User Interfaces
nn Dynamic User Interfaces concern all kind Dynamic User Interfaces concern all kind of automatically generated user interfacesof automatically generated user interfacesnn Dynamic Web PagesDynamic Web Pages
nn The WebThe Webnn NavigationNavigation--oriented Universal GUI oriented Universal GUI nn More used even than desktop GUIsMore used even than desktop GUIsnn Easy to use for most of endEasy to use for most of end--usersusersnn Easy to deal with for most of programmersEasy to deal with for most of programmers
nn Available collections of widgets and programming Available collections of widgets and programming languageslanguages
![Page 13: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/13.jpg)
Dynamic WebDynamic Web--Based User InterfacesBased User Interfaces
nn The World Wide WebThe World Wide Webnn 1st Generation1st Generation
nn 2nd Generation2nd Generationnn 3rd Generation3rd Generation
80% uptake of dynamically generated
web pagesWeb Structure
![Page 14: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/14.jpg)
Dynamic WebDynamic Web--Based User InterfacesBased User Interfaces
nn Increasing necessity, by nonIncreasing necessity, by non--expertexpert--inin--CS CS users, in creating and modifying their own users, in creating and modifying their own web pagesweb pagesnn Designers, creative jobsDesigners, creative jobsnn Administrative staff working on DBAdministrative staff working on DB--based web based web
pagespagesnn Occasional programmers creating their own Occasional programmers creating their own
small web pages for different purposessmall web pages for different purposesnn … and, in general terms, people who need to … and, in general terms, people who need to
go beyond usual web page navigationgo beyond usual web page navigation
![Page 15: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/15.jpg)
Dynamic WebDynamic Web--Based User InterfacesBased User Interfaces
JSPJSP
ASPASPJAVAJAVAPHPPHPXMLXML
XSLTXSLT CSSCSS
XHTMLXHTML
Non-expert-in-programming web author
80% uptake of dynamically generated
web pages
Web Structure
![Page 16: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/16.jpg)
Dynamic WebDynamic Web--Based User InterfacesBased User Interfaces
How one can easily author dynamic Web-based pages?How one can easily author
dynamic Web-based pages?
![Page 17: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/17.jpg)
Dynamic Web Page AuthoringDynamic Web Page Authoring
nn Most of existing Authoring tools provide partial Most of existing Authoring tools provide partial solutions solutions nn Mostly focused on static authoringMostly focused on static authoringnn It is not easy to split up knowledge and procedural It is not easy to split up knowledge and procedural
information regarding generationinformation regarding generationnn Procedural behavior is hard to be depicted visuallyProcedural behavior is hard to be depicted visually
nn The provided solution should be endThe provided solution should be end--useruser--basedbasednn Gentle Slope of ComplexityGentle Slope of Complexity
nn Tradeoff between expressivity and easeTradeoff between expressivity and ease--ofof--useusenn Avoid the user from facing up to programming and Avoid the user from facing up to programming and
specification languagesspecification languagesnn WYSIWYG EnvironmentsWYSIWYG Environmentsnn NonNon--intrusive user assistance during interactionintrusive user assistance during interaction
nn Compatibility, reuse and integrationCompatibility, reuse and integration
![Page 18: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/18.jpg)
Dynamic Web Page AuthoringDynamic Web Page Authoring
nn 1) Dynamic generation mechanisms1) Dynamic generation mechanismsnn Splitting up contexts and presentationSplitting up contexts and presentation
nn MBUI approachMBUI approach
nn Defining complex relationships between components and Defining complex relationships between components and knowledge unitsknowledge unitsnn High level domain and presentation knowledge High level domain and presentation knowledge
nn 2) Authoring dynamic web documents2) Authoring dynamic web documentsnn Direct manipulation environmentDirect manipulation environmentnn Artificial Intelligence techniques to infer the user’s intentsArtificial Intelligence techniques to infer the user’s intentsnn Automatic changes and modifications to underlying Automatic changes and modifications to underlying
modelsmodels
![Page 19: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/19.jpg)
Dynamic Web Page AuthoringDynamic Web Page Authoring
....
PERSEUSPERSEUS -- PPresentation ontology resentation ontology buildbuildERER for for cucuSStomtom llEEarningarning ssUUpportpport SSystemsystems
DESKDESK -- DDynamic web documents by ynamic web documents by EExample xample using using SSemantic emantic KKnowledgenowledge
PEGASUSPEGASUS -- PPresentation modelling resentation modelling EEnvironment nvironment for for GGeneric eneric AAdaptive hypermedia daptive hypermedia SUSUpportpport SSystemsystems
HADESHADES –– HHypermediaypermedia ADADaptiveaptive EEducational ducational SServererver
![Page 20: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/20.jpg)
PEGASUS Presentation
<HigherCategory id="Internet"><subCategories><HigherCategory ref="Connectivity"/><HigherCategory ref="Communications"/><HigherCategory ref="E-Mail"/>...
</subCategories></HigherCategory>
<HigherCategory id="E-Mail"><subCategories><LowerCategory ref="E-Mail Clients"/><LowerCategory ref="E-Mail Parsers"/>
...
<% if (availableSpace > 5) { %><widget type="Table" columns="3"
dataflow="wrap"><list> <%= subcategories %> </list>
</widget><% } else { %>
<table><tr><td> <%= id %> </td></tr><tr><td> <%= subcategories %> </td></tr>
</table><% } %>
...
Domain Model Presentation Model
PEGASUS Underlying ModelsPEGASUS Underlying Models
An example ofdynamic web pagegeneration by PEGASUS
![Page 21: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/21.jpg)
DESKDESK
Summary Web Pages
Changes Madeby user
XML
DESK Front-End
DESK Back-End
Local Authoring ToolEdition Mechanisms
Remote Authoring ToolInference Mechanisms PEGASUS
DynamicHTMLGeneration
Modifications toUnderlying Models
333111
666
222555
444
![Page 22: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/22.jpg)
PERSEUSPERSEUS....
Creating domainknowledgewith PERSEUS
AtomicFragment
Topic
DomainObj
Fragment
Painter Artwork
![Page 23: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/23.jpg)
DESKDESK
nn WYSIWYG environment for dynamic web page WYSIWYG environment for dynamic web page designdesignnn Allow for changes to page appearance Allow for changes to page appearance nn Allow for authoring domain knowledge Allow for authoring domain knowledge
nn AIAI--based techniquesbased techniquesnn The end user provides an example of what s/he The end user provides an example of what s/he
expects, the authoring tool infers changes in page expects, the authoring tool infers changes in page generation proceduregeneration procedure
nn Detection of patterns by means of a specialised Detection of patterns by means of a specialised assistant (agent) that tracks the user’s actionsassistant (agent) that tracks the user’s actions
nn DESK runs under PEGASUSDESK runs under PEGASUSnn PEGASUS is the dynamic page generation systemPEGASUS is the dynamic page generation systemnn DESK does the inverse pathDESK does the inverse pathnn Uses PEGASUS models for disambiguationUses PEGASUS models for disambiguation
![Page 24: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/24.jpg)
ConclusionsConclusionsnn GUIs have become an important concern as time goes byGUIs have become an important concern as time goes bynn It’s necessary to provide mechanisms and tools in order to It’s necessary to provide mechanisms and tools in order to
specify, create and automatically maintain GUIsspecify, create and automatically maintain GUIsnn MBUI techniques provide conceptual separation between MBUI techniques provide conceptual separation between
the different aspects of a GUIthe different aspects of a GUInn Dynamic User Interface is a result of information Dynamic User Interface is a result of information
adaptivityadaptivity and automatic generationand automatic generationnn It’s hard to describe procedural information visually, so It’s hard to describe procedural information visually, so
authoring Dynamic Webauthoring Dynamic Web--Based User Interfaces become a Based User Interfaces become a complex taskcomplex task
nn Some authoring tool have been provided, mainly focused Some authoring tool have been provided, mainly focused on static aspecton static aspect
nn PEGASUS and DESK tools allow for automatic dynamic PEGASUS and DESK tools allow for automatic dynamic web page generation, providing also with easyweb page generation, providing also with easy--toto--use use mechanisms for dynamic web page authoringmechanisms for dynamic web page authoring
![Page 25: Dynamic User Interfaces · n MBUI techniques provide conceptual separation between the different aspects of a GUI n Dynamic User Interface is a result of information adaptivity and](https://reader033.vdocument.in/reader033/viewer/2022043003/5f8417acea7cba40716da878/html5/thumbnails/25.jpg)
Contact InformationContact Information
nn José A. José A. MacíasMacías IglesiasIglesiasnn [email protected]@uam.esnn http://http://www.ii.uam.es/~jamaciaswww.ii.uam.es/~jamacias
nn Authoring Tools and PapersAuthoring Tools and Papersnn DESKDESK
nn http://http://astreo.ii.uam.es/~atlas/desk/desk.htmlastreo.ii.uam.es/~atlas/desk/desk.html
nn PERSEUSPERSEUSnn http://http://astreo.ii.uam.es/~atlas/perseus/perseus.htmlastreo.ii.uam.es/~atlas/perseus/perseus.html
nn PEGASUSPEGASUSnn http://http://astreo.ii.uam.es/~castells/pegasusastreo.ii.uam.es/~castells/pegasus//