CLIPS-IMAG, User Interface Engineering Group University of Grenoble, FRANCE

Design method of techniques

(1) Modifiable Treemaps Containing Variable-Shaped Units

(2) Visualization of the results of Laurencea query sub Nimigaytted to a searFchrédér engicine Ve ornin ethre WWW CLIPS-IMAG

Laurence Nigay Glasgow University Frédéric Vernier MERL

Modifiable Treemaps Containing Variable-Shaped Units s Motivation s Algorithm Ð Treemap [Johnson & Shneiderman] Ð Extension s Working example: PARENT Ð Features Ð Demonstration s Conclusion

1 Motivation s Treemap: In real timeTreemap: Each node as a rectangle

> ?

La bel Label

Treemap [Johnson & Shneiderman] s Slice / Dice approach

1 2 3 ...

s Nested Treemap / Non-nested Treemap

2 Extension s Recursive re-arrangement

Eval = 5.5 S el ected opt ion: Mi n (Eval)

Eval = 4.1

Eval = 6.7 … s Evaluation function f( , ) = 0.75 Ð Ratio width/height =1/2 =1/4

PARENT s Directory tree s Shape, Color & text Ð File / Folder: Box proportional to its disk usage Ð Hue: Type of a file Ð Brightness: File age Ð Label : File name s Interaction Ð Drag & Drop for moving a file Ð Double clicking for opening a file

3 1rst Snapshot

Ð Fixed ratio = 0.2 Ð Black stairs (path) Ð 1400 files Ð Alternative view

PARENT

4 2nd Snapshot

Ð Fixed ratio = 1.0 Ð Selected Folder Ð 240 files Ð 8 hues, brighter at the top

Comparison

Ð The same hierarchy using the Nested Treemap algo.

5 Conclusion s New method to visualize hierarchical information Ð Based on Treemaps Ð Containing Variable-Shaped Units s New challenges Ð Selection for multiple files (zone) Ð Animation to show a reorganization

Visualization of the results of a query submitted to a search engine on the WWW s Goal and Design Approach s Navigational techniques Ð Navigational tasks Ð UI design approach Ð Human Factors criteria Ð Characteristics of the output modalities Ð Properties and design space Ð Design rules s Example: our VITESSE system Ð UI design Ð Software design s Usability testing of VITESSE Ð Experimental evaluation of VITESSE Ð Survey of the WWW

6 Goal and Design Approach

s Better understanding of the design of interaction techniques for large information spaces s Design approach (Top-Down and Bottom-Up)

User activities User model

Task analysis

UI design

Software design

Evaluation

Navigational techniques

s Focus on the design of navigational techniques

User activities User model

Task analysis Navigational tasks

UI design Human Factors criteria and design rules Software design PAC-Amodeus model: modifiability of the code Evaluation Usability testing

7 Navigational tasks

s Hierarchical task analysis s Navigational tasks

Information needs Structural responsibility Domain-dependent tasks

Mediated Domain-independent tasks For ex.: searching for a particular piece of information Navigational Navigational tasks Target orientation Elementary tasks Querying Browsing Interaction level: Querying and Browsing Model of information exploration

UI design approach

Human Factors criteria Design space for multimodal systems

Characteristics of output modalities

Design rules

Design of the navigational techniques

8 Human Factors criteria s Observability Ability of the user to evaluate the internal state of the system from its perceivable representation Ð Observability of the "Focus + Context" Ð "The useful information is drawn from the overall relationships of the entire set" Ð Observability of the links and paths Ð "The navigator is guaranteed to always find shortest paths to targets if the outlink-info is everywhere well-matched" George Furnas CHI'97 s Representation multiplicity Flexibility for state rendering. Each representation provides a on the internal state of the system Multiple visualizations of the same space

Characteristics of the modalities s Modality = Output interaction technique (Visualization) s Examples of characteristics

Ð Global / Partial Ð Ability of visualization to show the whole space

Ð Precise / Vague Ð Ability of visualization to show all of the data of each item in the space

Ð Distortion / Non distortion Ð Existence of a distortion function (e.g., Fisheye views)

9 Design space: The CARE properties s Complementarity, Assignment, Redundancy, and Equivalence of modalities (visualizations) available in an output multimodal user interface s Complementarity Combination of modalities s Redundancy s Assignment Choice of modalities s Equivalence

Design rules s Selection rule pu re modality

Ð S1 The modality used to visualize the focus of interest must be precise s Combination rules co mbined modality Complementarity

Ð C1 A precise modality must be used in a complementary way with a global modality (focus + context)

Ð C2 Spatial continuity: Visual continuity between two modalities used simultaneously in a complementary way

Ð C3 Temporal continuity: Visual continuity while changing modalities

10 How do we apply the rules s C3 Temporal continuity

Redundancy

Modality

Sonic modality Modality 2 Intermediate modalities Modality 1 Time

The VITESSE system s VITESSE visualizes the results of a query submitted to a search engine on the WWW s 7 modalitites (visualization techniques) s Animation computed to guarantee visual continuity s Same navigational tools

11 Pure modality

Planar transformation Polar transformation

Pure modality

Polar transformation on the X-axis Planar transformation on the Y-axis

12 Combined modalities (complementarity)

s C1 A precise modality must be used in a complementary way with a global modality (focus + context) s C2 Spatial continuity: Visual continuity between two modalities used simultaneously in a complementary way

Combined modalities (complementarity)

13 The VITESSE system

VITESSE: Software design s PAC-Amodeus model

DC : (Netscape : network) Root Cement Keywords cgi Representation Navig. Query multiplicity Tools

Network

FCA: Information Query PTC: HTML HTML HTML Page AWT (Abstract String Page interpreter Windowing Toolkit) Network FC: FC: LLIC: Search Engines JAVA interpreter Alta Vista, Lycos W.W.W. OS graphic system

14 VITESSE: Software design s The Dialogue Controller

Root Non-distorted space P Cement A Representation Selected tool Distorted space multiplicity A P A P A P A P Representation RS 1 RS 2 multiplicity A P Navigation Morphing tools A RSi P

d1(x) a.d1(x)+b.d2(x) d2(x) Time t Time t+i Time t+11

s PAC-Amodeus provides the design rules/ergonomic criteria. s PAC-Amodeus supports the assessment of the design rules/ergonomic criteria.

Experimental evaluation of VITESSE

s 600 hotels in a local database

15 Experimental evaluation of VITESSE s Based on scenarios (600 hotels in a local database), including the two navigational tasks : querying and browsing s 17 participants, non computer scientists s Four types of usage: 1- Exclusive usage of the birdeye view Ð more elementary actions and more time 2- Combined usage of the birdeye view with another one Ð after time the users did not return to the birdeye view (cognitive ) 3- Exclusive usage of a distorting view Ð spherical view (familiar shape) 4- Test/Retry usage Ð visiting web pages without previously obtaining information

Survey on the web s Predictability criterion: Ð Icon study: Could users understand the icons without testing the program? Ð http://iihm.imag.fr/demos/IconStudy/ s Observability criterion: Ð What are the information types to be presented? Ð What do you expect from the WWW Search engine ? Ð http://iihm.imag.fr/demos/UserStudy/

16 Observability: Survey on the web

Observability: Survey on the web s Name, URL have their rankings clustered close to the top of the order.

100% delay

90% keywords opinion 80% link 70% url 60% size

50% percent hit

40% more like name 30% language 20% first two 10% date

0% category

17 Conclusions

A comprehensive set of design rules

s CARE : combination of navigational techniques (complementarity)

s Characteristics of navigational techniques (modalities)

s Human Factors criteria

Future work s Extensions of VITESSE : s Collaborative navigation Ð Asynchronous collaborative navigation : Ð opinions of others about a web page Ð Synchronous collaborative navigation

18 Extension: Asynchronous collaborative navigation

Extension: Synchronous collaborative navigation

19 If you want to test it...

http://iihm.imag.fr/demos

20