Generating Abstract User Interfaces Generating Abstract User Interfaces from an Informal Designfrom an Informal Design

Adrien Coyette

University of LouvainInformation Systems Unit

Louvain-la-NeuveBELGIUM

Presentation AgendaPresentation Agenda

1. Motivations / Related works

2. SketchiXML Requirements

3. Output: UsiXML file

4. Presentation of the application

5. Conclusion / Future Works

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Motivations / Related Motivations / Related worksworks

Considerable importance of user interface in application development (50% to 70 % of the application code [Myers and Al, 2000] )

Apparition of many high fidelity graphical user interfaces editors on the market

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

But designing the right User Interface (UI) the first time is very unlikely to occur

instead, UI design is eminently open iterativeiterative and incompleteincomplete

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Motivations / Related Motivations / Related worksworks

Paper ( or whiteboard) used most of the time:familiar and unconstrained approach

fast to learn and quick to produce

focus on basic structural issues instead of unimportant details

it is very appropriate to convey ongoing, unfinished designs, and it encourages creativity,

can be performed collaboratively between designers and end-users

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Motivations / Related Motivations / Related worksworks

The idea of developing a computer-based tool for sketching UIs naturally emerged from these observations

Such tools would extend the advantages provided by sketching techniques (easily creating, deleting, updating or moving UI elements).

Apparition of hybridhybrid approachesapproaches, combining the best of the hand-sketching and computer assisted user interface design

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Motivations / Related Motivations / Related worksworks

DENIM(James A. Landay, James Lin, Mark W. Newman, Jason I. Hong)

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Motivations / Related Motivations / Related worksworks

JavaSketchIt (Joaquim A. Jorge, Manuel João Fonseca, Anabela Caetano, Néri Goulart )

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Motivations / Related Motivations / Related worksworks

Avoidance of Effort loss

Large conceptual coverage

Language neutrality

Ease of use (naturalness)

Flexible processing

Robust scenario editor

…

SketchiXML’s SketchiXML’s RequirementsRequirements

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

UsiXMLUsiXML

(USer Interface eXtensible Markup Language)

• XML-compliant markup language that describes the UI for multiple contextsmultiple contexts of use

Character User Interfaces, Graphical User Interfaces, Multimodal User Interfaces,…

•Language Supporting Multi-Path DevelopmentMulti-Path Development of User Interfaces

Forward engineering, Reverse engineering, Middle-out approach,…

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Task and DomainTask and Domain

Abstract User Interface

Abstract User Interface

Concrete User Interface

Concrete User Interface

User InterfaceCode

User InterfaceCode

Reification

Abstraction

Translation

Code Generation

Code Reverse Engineering

Forward Engineering

section 4.1.1section 4.1.2

section 4.1.3

Reverse Engineeringsection 4.2.1

section 4.2.2section 4.2.3

Context Adaptation

section 4.3.1section 4.3.2

section 4.3.3

Task and DomainTask and Domain

Abstract User Interface

Abstract User Interface

Concrete User Interface

Concrete User Interface

User InterfaceCode

User InterfaceCode

Reification

Abstraction

Translation

Code Generation

Code Reverse Engineering

Reification

Abstraction

Translation

Code Generation

Code Reverse Engineering

Forward Engineering

section 4.1.1section 4.1.2

section 4.1.3

Reverse Engineeringsection 4.2.1

section 4.2.2section 4.2.3

Context Adaptation

section 4.3.1section 4.3.2

section 4.3.3

Transformation paths, steps, sub-steps

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

UsiXMLUsiXML

Shortcut to launch SketchiXML.bat.lnk

Presentation of the Presentation of the applicationapplication

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

ConclusionConclusion

We have introduced a new and innovative sketching tool that generates a user, platform, and environment independent output

We have met most of the requirements that were identified as important shortcomings of existing tools

SketchiXML extends a set of tools based on UsiXML, allowing to initiate the design process from the early design phase to the final concrete user interface, with tools support for every stages

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Future workFuture work

Extends current functionalities ( i.e. a scenario editor allowing to represent transition between screen)

Developing an evolutionary recognition engine as SketchiXML is currently restricted to vectorial shape recognition. To this aim, research in a biometric domain such as handwriting recognition is considered.

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Questions ?Questions ?

Generating Abstract User Interfaces from an Informal DesignGenerating Abstract User Interfaces from an Informal Design

Visit www.usixml.org