SketchiXML: A Sketching Tool for Designing User Interfaces for Information Systems - PowerPoint PPT Presentation

1 / 27
About This Presentation
Title:

SketchiXML: A Sketching Tool for Designing User Interfaces for Information Systems

Description:

Considerable importance of user interface in application development ... SketchiXML uses the CALI library and is thus restricted to vectorial shape recognition. ... – PowerPoint PPT presentation

Number of Views:113
Avg rating:3.0/5.0
Slides: 28
Provided by: ADR58
Category:

less

Transcript and Presenter's Notes

Title: SketchiXML: A Sketching Tool for Designing User Interfaces for Information Systems


1
SketchiXML 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
2
Presentation 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
3
Motivations (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
4
Motivations (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
5
Motivations (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
6
Motivations (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
7
Motivations (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
8
Low-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
9
State 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
10
State 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
11
State 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
12
State 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
13
Requirements
  • 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
14
Proposal
  • SketchiXML as a Multi-Agent System (MAS)
  • Adaptive
  • Modular
  • Flexible

SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
15
SketchiXML architecture
SketchiXML architecture as a Joint Venture
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
16
Surveys Building the widget catalogue (1)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
17
Surveys Building the widget catalogue (2)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
18
Surveys Building the widget catalogue (3)
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
19
Surveys 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
20
Surveys 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
21
Widgets Catalogue (1)


SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
22
Widgets Catalogue (2)


An Intelligent Tool for Sketching USIXML Based
User Interfaces
23
Widgets Catalogue (3)


SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
24
Widgets Catalogue (4)


SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
25
Widgets Catalogue (5)


SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
26
Widgets Catalogue (6)


SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
27
Demo
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
28
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
  • 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
29
Future 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
30
Questions ?
SketchiXML A Sketching Tool for Designing User
Interfaces for Information Systems
Write a Comment
User Comments (0)
About PowerShow.com