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
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
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
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
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
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
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
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
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
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
Collections of HCI Patterns
© sebis161208 Matthes English Master Slide Deck 11
HCI Patterns for entering data
© sebis161208 Matthes English Master Slide Deck 12
§ HCI Patterns for entering data for each pattern collection
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
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
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
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
UI Form Model
© sebis161208 Matthes English Master Slide Deck 17
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
Components Library
© sebis161208 Matthes English Master Slide Deck 19
Textinput
Numberinput
Emailinput
Passwordfield
Atomictemplates Compositetemplates
Signin
Signup
Structuredformats
Commentbox
… …
Atomic Template Example
© sebis161208 Matthes English Master Slide Deck 20
• Number input template
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
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()
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()
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
Demo
© sebis161208 Matthes English Master Slide Deck 25
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
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
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
Backup
© sebis161208 Matthes English Master Slide Deck 29