Title: SketchiXML: A Sketching Tool for Designing User Interfaces for Information Systems
1SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
Adrien Coyette University of Louvain Information
Systems Unit Louvain-la-Neuve
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
2Presentation Plan
- Motivations
- State of the Art
- SketchiXML Requirements
- SketchiXML Architecture
- Surveys
- Demonstration
- Future Work/ Conclusion
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
3Motivations (1)
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
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
4Motivations (2)
- But such tools
- do not allow to quickly prototype
- while the most used user interface design
approach remains the trials and errors - Are inaccessible for end-users
- Constraint the creative process
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
5Motivations (3)
- Paper prototyping appears thus to be the best
answer - 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
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
6Motivations (4)
- But non-negligible drawbacks also exist with
paper prototyping - changes are hard to accomplish
- he designer has to redraw the common features
that the design retains - lack of interaction between the paper-based
design and a user (a designer needs to"play
computer" )
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
7Motivations (5)
- 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 by easily creating,
deleting, updating or moving UI elements. - Some research was carried out in order to propose
a hybrid approach, combining the best of the
hand-sketching and computer assisted interface
design, but as we will se trough the state of the
art, this marriage presents a set of
shortcomings.
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
8Low-Fidelity editor
DENIM(James A. Landay, James Lin, Mark W. Newman,
Jason I. Hong)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
9State of the art (1)
DENIM(James A. Landay, James Lin, Mark W. Newman,
Jason I. Hong)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
10State of the art (2)
- 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
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
11State of the art (3)
JavaSketchIt (Joaquim A. Jorge, Manuel João
Fonseca, Anabela Caetano, Néri Goulart )
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
12State of the art (4)
- Advantages
- Performance (speed and accuracy)
- Multi-stroke gestures
- Recognizes rotated shapes
- Computationally light
- Open source
- Requires standard and freely available libraries
- Extensible shape interpretation grammar
- Shortcomings
- Mono-window
- No scenario editor
- Only generates java (and no UI spec)
- Limited widget set
- Shape interpretation can only take as input a
construct made of a maximum of two vectorial
shapes - No zoom
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
13Requirements
- Avoidance of Effort loss
- Large conceptual coverage
- Robust recognition
- Language neutrality
- Ease of use (naturalness)
- Flexible processing
- Context independency
- Well defined editing functionalities.
- Save and export facilities.
- Zooming capabilities
- Robust scenario editor
- Recognition flexibility
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
14Proposal
- SketchiXML as a Multi-Agent System (MAS)
- Adaptive
- Modular
- Flexible
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
15SketchiXML architecture
SketchiXML architecture as a Joint Venture
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
16Surveys Building the widget catalogue (1)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
17Surveys Building the widget catalogue (2)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
18Surveys Building the widget catalogue (3)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
19Surveys Test of the application (1)
Recognition rate of the application
Overall recognition rate for widget 94.12
(only) No difference between end user and
computer scientist
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
20Surveys Test of the application (2)
- Evaluation of the usability of the application
- Evaluation of the time needed to draw a simple
form with the application - The time needed decrease strongly as user get
used to the application (learning effect) - End user are significantly faster than computer
scientist to draw the same user interface - Evaluation of the application with a multiple
choice questionnaire at the end of the test - Most of the participant enjoyed the test
- Most of them found the application easy to use
- Most of the participant were satisfied with the
results (despite the low recognition rate) -
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
21Widgets Catalogue (1)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
22Widgets Catalogue (2)
An Intelligent Tool for Sketching USIXML Based
User Interfaces
23Widgets Catalogue (3)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
24Widgets Catalogue (4)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
25Widgets Catalogue (5)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
26Widgets Catalogue (6)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
27Demo
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
28Conclusion
- 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 - we have also conducted a survey on 60 peoples
from different activity sectors with different
backgrounds, in order to identify how these
people would intuitively represent the widgets to
be handled by SketchiXML - We have conducted a survey on 40 peoples with
different background in order to test the
application - 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 for different platforms, with
tools support for every stages
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
29Future work
- Meet all the requirements elicited in the state
of the art and particularly the Development of a
scenario editor allowing to represent transition
between screen. - Another high potential evolution consists in
developing an evolutionary recognition engine.
SketchiXML uses the CALI library and is thus
restricted to vectorial shape recognition. To
this aim, research in a biometric domain such as
handwriting recognition could provide valuable. - During the sketching process, the possibility to
instantly switch to a runnable version of the
current UI would be useful. Indeed, all informal
design tools providing code generation allow easy
switching from design to run mode, while
SketchiXML requires to invoke a third
application.
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
30Questions ?
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems