A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces Adrien Coyette, Jean Vanderdonckt University of Louvain Belgian Laboratory of Computer-Human Interaction Louvain-la-Neuve BELGIUM

Presentation Agenda 1.Motivations / Related works 2.SketchiXML Requirements 3.Output format 4.Surveys 5.Presentation of the application 6.Conclusion / Future Works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

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 A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

 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 Motivations / Related works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

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 Motivations / Related works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

 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 Motivations / Related works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

DENIM (James A. Landay, James Lin, Mark W. Newman, Jason I. Hong) Motivations / Related works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

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 Motivations / Related works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

JavaSketchIt (Joaquim A. Jorge, Manuel João Fonseca, Anabela Caetano, Néri Goulart ) Motivations / Related works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

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 Motivations / Related works A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

 Avoidance of Effort loss  Large conceptual coverage  Language neutrality  Ease of use (naturalness)  Flexible processing  Robust scenario editor  … SketchiXML’s Requirements A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

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,… A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Transformation paths, steps, sub-steps UsiXML A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Surveys : Building the widget catalogue (1) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Surveys : Building the widget catalogue (2) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Surveys : Building the widget catalogue (3) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Presentation of the application A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

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 A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Ongoing / 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. A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Questions ? Visit A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Widgets Catalogue (1) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Widgets Catalogue (2) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Widgets Catalogue (3) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Widgets Catalogue (4) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Widgets Catalogue (5) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

Widgets Catalogue (6) A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces