A Sketching Tool for Designing Anyuser, Anyplatform, Anywhere User Interfaces

1
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
2
Presentation 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
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
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
4
Motivations / 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
5
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

A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
6
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).
• 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
7
Motivations / Related works
DENIM(James A. Landay, James Lin, Mark W. Newman,
Jason I. Hong)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
8
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 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
9
Motivations / 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
10
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

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

• (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
13
UsiXML
Transformation paths, steps, sub-steps
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
14
Surveys Building the widget catalogue (1)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
15
Surveys Building the widget catalogue (2)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
16
Surveys Building the widget catalogue (3)
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
17
Presentation of the application
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
18
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
19
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
20
Questions ?
Visit www.usixml.org
A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces
21
Widgets Catalogue (1)


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


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


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


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


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


A Sketching Tool for Designing Anyuser,
Anyplatform, Anywhere User Interfaces