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

2. 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

3. 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

4.  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

5. 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

6.  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

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

8. 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

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

10. 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

11.  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

12. 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

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

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

15. Output re-use: UsiXML

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

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

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

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

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

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

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

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

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

25. 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

26. 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

27. Questions ? Generating Abstract User Interfaces from an Informal Design Visit www.usixml.org