tum - improving the user experience of model- based web user … · § hci patterns for entering...

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




5. Demo

6. Evaluation

Outline


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


1. Introduction




5. Demo

6. Evaluation

Outline


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§ ….


Guidelines/Best Practices for Forms


§ Present form fields in a single column

§ Arrange list of radio buttons/checkboxes vertically

HCI Patterns for Entering Data


§ 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


HCI Patterns for entering data


§ HCI Patterns for entering data for each pattern collection

1. Introduction




5. Demo

6. Evaluation

Outline


High level architecture


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


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)


UI Form Model


Components Library


§ 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


Textinput

Numberinput

Emailinput

Passwordfield

Atomictemplates Compositetemplates

Signin

Signup

Structuredformats

Commentbox

… …

Atomic Template Example


• Number input template

Renderer


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


UIMLParser TemplateRepository DecisionMaker TagBuilder Prettifier

Pure UI model

generateComponent()

mapping()

Concrete HTML Widget


Loop

The loop takes place until the tree of Widgets is not generated.

prettifyHTML()

Renderer


UIMLParser TemplateRepository DecisionMaker TagBuilder PrettifierUI Model with Components Library

generateComponent()

mapping()



Loop

The loop takes place until the tree of Widgets is not generated.

prettifyHTML()

getTemplate()

1. Introduction




5. Demo

6. Evaluation

Outline


Demo


1. Introduction




5. Demo

6. Evaluation

Outline


Evaluation


§ 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

[email protected]

BSc

Backup


tum - improving the user experience of model- based web user … · § hci patterns for entering...

Documents