Title: A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces
1A 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
2Presentation Agenda
- Motivations / Related works
- SketchiXML Requirements
- Output format
- Surveys
- Presentation of the application
- Conclusion / Future Works
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
3Motivations / 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
4Motivations / Related works
- But designing the right User Interface (UI) the
first time is very unlikely to occur - instead, UI design is eminently open iterative
and incomplete
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
5Motivations / 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
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
6Motivations / 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). - Apparition of hybrid approaches, combining the
best of the hand-sketching and computer assisted
user interface design
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
7Motivations / Related works
DENIM(James A. Landay, James Lin, Mark W. Newman,
Jason I. Hong)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
8Motivations / 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 patterns
- Shortcomings
- No shape recognition and interpretation, thus
loosing the effort - No code generation
- No preview mode
- Only dedicated to web sites
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
9Motivations / Related works
JavaSketchIt (Joaquim A. Jorge, Manuel João
Fonseca, Anabela Caetano, Néri Goulart )
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
10Motivations / 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
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
11SketchiXMLs Requirements
- Avoidance of Effort loss
- Large conceptual coverage
- Language neutrality
- Ease of use (naturalness)
- Flexible processing
- Robust scenario editor
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
12UsiXML
- (USer Interface eXtensible Markup Language)
- XML-compliant markup language that describes the
UI for multiple contexts of use - Character User Interfaces, Graphical User
Interfaces, Multimodal User Interfaces, - Language Supporting Multi-Path Development of
User Interfaces - Forward engineering, Reverse engineering,
Middle-out approach,
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
13UsiXML
Transformation paths, steps, sub-steps
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
14Surveys Building the widget catalogue (1)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
15Surveys Building the widget catalogue (2)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
16Surveys Building the widget catalogue (3)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
17Presentation of the application
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
18Conclusion
- 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
19Ongoing / 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
20Questions ?
Visit www.usixml.org
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
21Widgets Catalogue (1)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
22Widgets Catalogue (2)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
23Widgets Catalogue (3)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
24Widgets Catalogue (4)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
25Widgets Catalogue (5)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
26Widgets Catalogue (6)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces