ics2208 lecture2
TRANSCRIPT
![Page 2: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/2.jpg)
Topic 2: Overview• What is the Model-based Interface
Development?
• UI models: task, abstract, concrete, final
• Benefits of MBID
• UMs & Intelligent Interfaces
![Page 3: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/3.jpg)
Model-based Interface Development
• What is the Model-based Interface Development?
• UI models: task, abstract, concrete, final
![Page 4: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/4.jpg)
Model-based Interface Development
![Page 5: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/5.jpg)
Model-based Interface Development
![Page 6: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/6.jpg)
Benefits of MBID• Benefits from using a step-wise development
lifecycle:
• reducing gap between requirements & implementation;
• coordinating the involvement of multiple stakeholders;
• Producing well structured systems;
![Page 7: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/7.jpg)
Benefits of MBID• Benefits from using explicit abstract models:
• planning an adequate level of abstraction;
• improving communication by explicit models;
• supporting UI quality;
![Page 8: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/8.jpg)
Benefits of MBID• Benefits from exploring alternative designs:
• supporting creation and creativity;
• enabling the production and comparison of alternative designs for multiple contexts of use while preserving quality (e.g., consistency);
![Page 9: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/9.jpg)
Benefits of MBID• Benefits resulting from code generation:
• enhancing development productivity;
• capturing and reusing expert knowledge throughout UI development life cycle;
• reducing errors;
![Page 10: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/10.jpg)
Benefits of MBID• Benefits from using models at runtime:
• defining and enacting method for UI development process;
• knowledge about creation of modeling languages;
• usage of frameworks and tools;
![Page 11: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/11.jpg)
Benefits of MBID• Maintenance of modelling language and
transformations:
• systematic and explicit definition of meta-models and transformations;
• maintenance of modelling languages and code generators;
• Reuse of models, meta-models, and transformations;
![Page 12: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/12.jpg)
Use Cases • UC1: Car rental; The car rental example consists
of a scenario in which the interactive system permits users to rent a car. In this sense, various contextual information can be used to adapt application aspects, and to properly display the list of cars to rent, enabling users to make choices and to accomplish the main task
• context 1: at home using desktop pc
• context 2: smart phone (noisy environment/user walking)
![Page 13: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/13.jpg)
Car rental
Screenshot of Context 1
Screenshot of Context 2
Models involved Car rental process
![Page 14: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/14.jpg)
Use Cases • UC2: Digital Home; Digital home refers to a
residence with devices that are connected through a computer network. A digital home has a network of consumer electronics, mobile, and PC devices that cooperate transparently.
• context 1: at home using desktop pc
• context 2: smart phone (noisy environment/user walking)
![Page 15: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/15.jpg)
Digital Home
Screenshot of Context 1
Screenshot of Context 2
The task model for the digital home
![Page 16: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/16.jpg)
Use Cases • UC3: Omitting minimalistic UIs through the use of an
universal interaction device in production environments; The SmartFactoryKL (see Figure UC3.1) is an arbitrarily modifiable and expandable (flexible) intelligent production environment, connecting components from multiple manufacturers (networked), enabling its components to perform context-related tasks autonomously (self-organising), and emphasising user-friendliness (user-oriented).
• Context 1: Physical environment is that of a production environment (industrial factory), platform is a tablet PC (+ modules or field devices from different vendors), one single user
![Page 17: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/17.jpg)
Digital Home
Screenshot of Context 1
Screenshot of Context 2
The task model for the digital home
![Page 18: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/18.jpg)
SmartFactory KL
Screenshot of Final UI Models in SmartFactory KL
![Page 19: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/19.jpg)
Use Cases • UC4: Story Editor; The production of e-learning tools for
deaf people meets with several difficulties, connected to the need to resort only to the visual channel, without saturating it, and to the adoption of different cognitive strategies developed within the community - the use of a user interface abstract model in the development of the interactive story editor, to be used by tutors and teachers to organise the course material and path, and which generates interactive pages for the students.• Context 1: The generation of a course by a teacher,
possibly involving in the process tutors who will then have to assist the learners. Learners and tutors will then interact with the generated web pages
![Page 20: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/20.jpg)
Digital Home
Screenshot of Context 1
Screenshot of Context 2
The task model for the digital home
![Page 21: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/21.jpg)
Story Editor
Workflow and generated page for the story
Models in Story Editor
![Page 22: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/22.jpg)
Use Cases • UC5: Augmented Reality Widgets; Post-WIMP
interactors running inside a web application: A mixed reality furniture online shop that can be controlled by gestures and supports inter-reality migration of interactors. In the web furniture shop, a customer can choose between different furniture and fill up a shopping cart. By a drag-and-drop gesture using both hands one can drag furniture interactors virtually out of the monitor displaying the web shop and drop them into an augmented reality to see if the furniture really matches in space and color to the user’s environment. An augmented reality frame that surrounds the shopping cart allows to seamlessly switch between realities while crossing it during the drag and drop gesture.
![Page 23: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/23.jpg)
Digital Home
Screenshot of Context 1
Screenshot of Context 2
The task model for the digital home
![Page 24: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/24.jpg)
AR Furniture shop
Shopping cart Web application
Two handed gestures to drag
and drop furniture
![Page 25: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/25.jpg)
Use Cases • UC6: Interactive music sheet using head gestures;
When learning to play a musical instrument, or when playing one, a music sheet is used to give guidance as to how to perform the musical piece. However, as songs become longer and more intricate they may span across several sheets, forcing the player to stop playing to turn the page. Although this may become easier as one becomes more experienced with the instrument, it is a barrier for inexperienced players that can be tackled easily using a different mode to turn the pages other than your hand.
![Page 26: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/26.jpg)
Digital Home
Screenshot of Context 1
Screenshot of Context 2
The task model for the digital home
![Page 27: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/27.jpg)
Interactive music
Models used for the Widgets Use Cases
Head tracking interactor
![Page 28: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/28.jpg)
Generic Requirements for MBID
1. Completeness
2. Consistency
3. Separation of concerns
4. Extensibility
5. Concision
6. Correlability
![Page 29: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/29.jpg)
Model-based UI tools• ConcurTaskTrees Environment (CTTE),
http://giove.isti.cnr.it/tools/CTTE/home
• Task/Design time/Java application
• Model-based lAnguage foR Interactive Applications Environment (MARIAE), http://giove.isti.cnr.it/tools/MARIAE/home
• Task, AUI, CUI, FUI/Design time/Java application
![Page 30: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/30.jpg)
UMs & Intelligent Interfaces
• Complexities of intelligent interfaces include:
• knowledge representation
• architectures for knowledge-based systems
• human factors
![Page 31: ICS2208 lecture2](https://reader035.vdocuments.site/reader035/viewer/2022062400/58a652351a28ab6e368b6cb1/html5/thumbnails/31.jpg)
UMs & Intelligent Interfaces
• There are three key benefits that a model of an intelligent interface offers:
1. it establishes the knowledge requirements of the interface,
2. it prescribes the functionality provided by the system, and
3. it defines the concept of an intelligent interface