Generating Abstract User Interfaces from an Informal Design Adrien Coyette University of Louvain Information Systems Unit Louvain-la-Neuve BELGIUM

Presentation 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 Design

Motivations / Related works 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 Design

 But designing the right User Interface (UI) the first time is very unlikely to occur iterativeincomplete  instead, UI design is eminently open iterative and incomplete Generating Abstract User Interfaces from an Informal Design Motivations / Related works

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 Design Motivations / Related works

 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). hybridapproaches  Apparition of hybrid approaches, combining the best of the hand-sketching and computer assisted user interface design Generating Abstract User Interfaces from an Informal Design Motivations / Related works

DENIM (James A. Landay, James Lin, Mark W. Newman, Jason I. Hong) Generating Abstract User Interfaces from an Informal Design Motivations / Related works

Advantages: Support for scenario-based design Several levels of granularity Good documentation Toolbox of generic widgets Mature product, based on experimental testing Zooming facility from local design (e.g. a web page) to a global design (e.g., a portion of a web site or n entire web site) Storyboarding facilities based on patternsShortcomings: No shape recognition and interpretation, thus loosing the effort No code generation No preview mode Only dedicated to web sites Generating Abstract User Interfaces from an Informal Design Motivations / Related works

JavaSketchIt (Joaquim A. Jorge, Manuel João Fonseca, Anabela Caetano, Néri Goulart ) Generating Abstract User Interfaces from an Informal Design Motivations / Related works

Advantages: Performance (speed and accuracy) Multi-stroke gestures Recognizes rotated shapes Computationally light Open source Requires standard and freely available libraries Shortcomings: Mono-window No scenario editor Only generates java Limited widget set Shape interpretation can only take as input a construct made of maximum two vectorial shapes Generating Abstract User Interfaces from an Informal Design Motivations / Related works

 Avoidance of Effort loss  Large conceptual coverage  Language neutrality  Ease of use (naturalness)  Flexible processing  Robust scenario editor  … SketchiXML’s Requirements Generating Abstract User Interfaces from an Informal Design

UsiXML (USer Interface eXtensible Markup Language) multiple contexts XML-compliant markup language that describes the UI for multiple contexts of use Character User Interfaces, Graphical User Interfaces, Multimodal User Interfaces,… Multi-Path DevelopmentLanguage Supporting Multi-Path Development of User Interfaces Forward engineering, Reverse engineering, Middle-out approach,… Generating Abstract User Interfaces from an Informal Design

Transformation paths, steps, sub-steps Generating Abstract User Interfaces from an Informal Design UsiXML

Presentation of the application Generating Abstract User Interfaces from an Informal Design

Output re-use: UsiXML

Surveys : Building the widget catalogue (1) Generating Abstract User Interfaces from an Informal Design

Surveys : Building the widget catalogue (2) Generating Abstract User Interfaces from an Informal Design

Surveys : Building the widget catalogue (3) Generating Abstract User Interfaces from an Informal Design

Widgets Catalogue (1) Generating Abstract User Interfaces from an Informal Design

Widgets Catalogue (2) An Intelligent Tool for Sketching USIXML Based User Interfaces

Widgets Catalogue (3) Generating Abstract User Interfaces from an Informal Design

Widgets Catalogue (4) Generating Abstract User Interfaces from an Informal Design

Widgets Catalogue (5) Generating Abstract User Interfaces from an Informal Design

Widgets Catalogue (6) Generating Abstract User Interfaces from an Informal Design

Conclusion 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 Design

Future 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 Design

Questions ? Generating Abstract User Interfaces from an Informal Design Visit