tum - improving the user experience of model- based web user … · § hci patterns for entering...
TRANSCRIPT
![Page 1: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/1.jpg)
Chair of Software Engineering for Business Information Systems (sebis) Faculty of InformaticsTechnische Universität Münchenwwwmatthes.in.tum.de
Improving the User Experience of Model-Based Web User Interfaces Using Explicit Form ModelsMaster Thesis – Final Presentation
Sirma Gjorgievska, 13.02.2017, Munich
![Page 2: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/2.jpg)
1. Introduction
2. UI generation approaches
3. Guidelines and HCI Patterns for forms
4. Proposed solution
5. Demo
6. Evaluation
Outline
© sebis161208 Matthes English Master Slide Deck 2
![Page 3: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/3.jpg)
Introduction
© sebis140122 Matthes Slides sebis 2014 3
Developing web forms using Model Based UI approaches
üAllow defining web forms at a very high level using models
üAutomatic generation of the UI based on models [1]
ü Less effort for creating forms
× Most of the existing approaches don’t use explicit Form Models
× Often produce low-quality forms
[1] Beyond Data Models for Automated User Interface Generation - Angel R. Puerta
![Page 4: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/4.jpg)
Introduction
© sebis140122 Matthes Slides sebis 2014 4
§ The design of forms is often poorly thought out
§ Many forms don’t support§ Best practices§ HCI patterns
Bad user experience
![Page 5: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/5.jpg)
1. Introduction
2. UI generation approaches
3. Guidelines and HCI Patterns for forms
4. Proposed solution
5. Demo
6. Evaluation
Outline
© sebis161208 Matthes English Master Slide Deck 5
![Page 6: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/6.jpg)
UI Generation Approaches
§ Graphically interactive approach § Example: Form.io, JotForms, Netbeans…§ Users cannot entirely control the appearance of form elements
§ Code inspection approach§ Example: MetaWidget, AspectFaces, etc.§ Most of them contain fixed collection of UI widgets § Users cannot modify the style and presentation of the generated form
§ Model-based UI approach§ Declarative interface model can be used as a basis for building user
interfaces§ Most of the applications produce low quality forms
© sebis161208 Matthes English Master Slide Deck 6
![Page 7: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/7.jpg)
1. Introduction
2. UI generation approaches
3. Guidelines and HCI Patterns for forms
4. Proposed solution
5. Demo
6. Evaluation
Outline
© sebis161208 Matthes English Master Slide Deck 7
![Page 8: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/8.jpg)
Guidelines/Best Practices for Forms
§ General reusable solution to a commonly occurring problems within forms
§ Improve the user experience and speed up the development process
§ Extensive literature review of more than 20 different sources
§ Identified 20 guidelines (best practices for forms):§ Group related information§ Present form fields in a single column§ Minimize number of fields§ Distinguish between optional and required fields§ Use field length as affordance§ ….
© sebis161208 Matthes English Master Slide Deck 8
![Page 9: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/9.jpg)
Guidelines/Best Practices for Forms
© sebis161208 Matthes English Master Slide Deck 9
§ Present form fields in a single column
§ Arrange list of radio buttons/checkboxes vertically
![Page 10: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/10.jpg)
HCI Patterns for Entering Data
© sebis161208 Matthes English Master Slide Deck 10
§ Address some of the shortcomings of guidelines:§ Lack of context of problem § Difficulty to select appropriate guideline
§ Patterns explicitly focus on context of a problem
§ Tell the designer when, how and why the solution can be applied
§ Important mean for gathering usable and useful UI designs
§ Identified 8 HCI Pattern Collections
§ Assess level of completeness of the HCI Pattern Collections
![Page 11: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/11.jpg)
Collections of HCI Patterns
© sebis161208 Matthes English Master Slide Deck 11
![Page 12: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/12.jpg)
HCI Patterns for entering data
© sebis161208 Matthes English Master Slide Deck 12
§ HCI Patterns for entering data for each pattern collection
![Page 13: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/13.jpg)
1. Introduction
2. UI generation approaches
3. Guidelines and HCI Patterns for forms
4. Proposed solution
5. Demo
6. Evaluation
Outline
© sebis161208 Matthes English Master Slide Deck 13
![Page 14: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/14.jpg)
High level architecture
© sebis161208 Matthes English Master Slide Deck 14
Components Library
Renderer GraphicalUserInterface
UI Form Model
UI Designer
Bindings
Devices
Pattern1
Pattern2
HCI Patterns GuidelinesGuideline1
Guideline2
… …
PatternN GuidelineN
End-user
![Page 15: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/15.jpg)
UI Form Model
UI Form Model is a declarative model of a form, which provides an abstract description of a desired form
§ Structure§ Hierarchical structure of interaction elements
§ Style§ Non-functional aspects (e.g. color, font, size)
§ Content§ Describes text, characters or images which are associated with a
certain UI widget
§ Behavior§ Interactions with the end user
© sebis161208 Matthes English Master Slide Deck 15
![Page 16: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/16.jpg)
UIML
§ Description language for User Interfaces
§ Can be used to describe any type of UI (device and platform independent)
§ Standardized by OASIS, latest version 4.0 (2008)
© sebis161208 Matthes English Master Slide Deck 16
![Page 17: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/17.jpg)
UI Form Model
© sebis161208 Matthes English Master Slide Deck 17
![Page 18: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/18.jpg)
Components Library
© sebis161208 Matthes English Master Slide Deck 18
§ Components Library stores different templates
§ Templates are based on:§ HCI patterns for entering data§ Guidelines (best-practices) for designing forms
§ Written in UIML
§ Benefits of Components Library§ Reduces the amount of UIML code needed to develop a UI§ Ensures a consistent presentation within UIs§ Helps designers create better models, which elements are based
on HCI patterns
![Page 19: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/19.jpg)
Components Library
© sebis161208 Matthes English Master Slide Deck 19
Textinput
Numberinput
Emailinput
Passwordfield
Atomictemplates Compositetemplates
Signin
Signup
Structuredformats
Commentbox
… …
![Page 20: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/20.jpg)
Atomic Template Example
© sebis161208 Matthes English Master Slide Deck 20
• Number input template
![Page 21: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/21.jpg)
Renderer
© sebis161208 Matthes English Master Slide Deck 21
UIMLParser
TemplateRepository
DecisionMaker
TagBuilder
(1)Mainprocessingstep (2)Post-processingstep
Prettifier
§ Read and compile UI Form Model and Components Library into a HTML5 form
§ Two processing steps: Main processing step and Post-processing step
![Page 22: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/22.jpg)
Renderer
© sebis161208 Matthes English Master Slide Deck 22
UIMLParser TemplateRepository DecisionMaker TagBuilder Prettifier
Pure UI model
generateComponent()
mapping()
Concrete HTML Widget
Concrete HTML Widget
Loop
The loop takes place until the tree of Widgets is not generated.
prettifyHTML()
![Page 23: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/23.jpg)
Renderer
© sebis161208 Matthes English Master Slide Deck 23
UIMLParser TemplateRepository DecisionMaker TagBuilder PrettifierUI Model with Components Library
generateComponent()
mapping()
Concrete HTML Widget
Concrete HTML Widget
Loop
The loop takes place until the tree of Widgets is not generated.
prettifyHTML()
getTemplate()
![Page 24: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/24.jpg)
1. Introduction
2. UI generation approaches
3. Guidelines and HCI Patterns for forms
4. Proposed solution
5. Demo
6. Evaluation
Outline
© sebis161208 Matthes English Master Slide Deck 24
![Page 25: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/25.jpg)
Demo
© sebis161208 Matthes English Master Slide Deck 25
![Page 26: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/26.jpg)
1. Introduction
2. UI generation approaches
3. Guidelines and HCI Patterns for forms
4. Proposed solution
5. Demo
6. Evaluation
Outline
© sebis161208 Matthes English Master Slide Deck 26
![Page 27: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/27.jpg)
Evaluation
© sebis161208 Matthes English Master Slide Deck 27
§ Compare our proposed solution to other industry solutions - JSONFormsand Form.io
§ Measure coverage of HCI Patterns for entering data for each solution
66.67%
33.33%
80.56%
0.00%
10.00%
20.00%
30.00%
40.00%
50.00%
60.00%
70.00%
80.00%
90.00%
Coverage(%)
Form.io
JSONForms
Proposedsolution
![Page 28: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/28.jpg)
Technische Universität MünchenFaculty of InformaticsChair of Software Engineering for Business Information Systems
Boltzmannstraße 385748 Garching bei München
Tel +49.89.289.Fax +49.89.289.17136
wwwmatthes.in.tum.de
Sirma Gjorgievska
17132
BSc
![Page 29: TUM - Improving the User Experience of Model- Based Web User … · § HCI patterns for entering data § Guidelines (best-practices) for designing forms § Written in UIML § Benefits](https://reader034.vdocuments.net/reader034/viewer/2022050601/5fa85c192bee141400596b98/html5/thumbnails/29.jpg)
Backup
© sebis161208 Matthes English Master Slide Deck 29