Presentation I gave at CHI2008, Florence, Italy

1. Digital Enterprise Research Institute www.deri.ie
Rendering Navigation and Information Space
with
HoneyCombTM
Sebastian Ryszard Kruk, Bill McDaniel
sebastian.kruk@deri.org
DERI NUI Galway
Chapter 1
 Copyright 2007 Digital Enterprise Research Institute. All rights reserved. www.deri.org

2. Digital Enterprise Research Institute www.deri.ie
Rendering Navigation and Information Space
with
HoneyCombTM
Sebastian Ryszard Kruk, Bill McDaniel
sebastian.kruk@deri.org
DERI NUI Galway
Chapter 1
 Copyright 2007 Digital Enterprise Research Institute. All rights reserved. www.deri.org

3. Presentation outline
Digital Enterprise Research Institute www.deri.ie
2

4. Presentation outline
Digital Enterprise Research Institute www.deri.ie
Motivation

Browsing courseware augmented with informal learning

Multilevel History of Faceted Navigation

Designing HoneyCombTM

 Hexagon lozenges
 Active edges and corners
 3D surface
 Interactions and visual response
Prototype of HoneyCombTM

 Success stories:
 MultiBeeBrowse
 eLITE/Didaskon Learning Path
Evaluation, Conclusions & Future Work

2

5. Motivation - Informal Learning
Digital Enterprise Research Institute www.deri.ie
3

6. Motivation - Informal Learning
Digital Enterprise Research Institute www.deri.ie
Informal learning is

80% of all learning
activities
Finding way through

various paths of
learning material
Visualization technique

for learning objects,
courseware relations,
and history of learning
3

7. Motivation - Informal Learning
Digital Enterprise Research Institute www.deri.ie
Informal learning is

80% of all learning LMS
activities
Finding way through

various paths of
learning material
Visualization technique

for learning objects,
courseware relations,
and history of learning
3

8. Motivation - Informal Learning
Digital Enterprise Research Institute www.deri.ie
Informal learning is

80% of all learning LMS
activities
Finding way through

various paths of
learning material
informal
Visualization technique
 sources
for learning objects,
courseware relations,
and history of learning
3

9. Motivation - Informal Learning
Digital Enterprise Research Institute www.deri.ie
Informal learning is

80% of all learning LMS
activities
Finding way through

various paths of
learning material
informal
Visualization technique
 sources
for learning objects,
suggest
courseware relations,
and history of learning
knows
friends
3

10. Motivation - Faceted Navigation
Digital Enterprise Research Institute www.deri.ie
4

11. Motivation - Faceted Navigation
Digital Enterprise Research Institute www.deri.ie
Previous and next page

- common approach to
history
What if I browse, refine,

go backward, refine
again, and ... discover
previous refinement
was more accurate?
What if we want to bind

results of two previous
queries?
4

12. Motivation - Faceted Navigation
Digital Enterprise Research Institute www.deri.ie
Previous and next page

- common approach to
history
What if I browse, refine,

go backward, refine
again, and ... discover
previous refinement
was more accurate?
What if we want to bind

results of two previous
queries?
4

13. Motivation - Faceted Navigation
Digital Enterprise Research Institute www.deri.ie
Previous and next page

- common approach to
history
What if I browse, refine,

go backward, refine
again, and ... discover
previous refinement
was more accurate?
What if we want to bind

results of two previous
queries?
4

14. Motivation - Faceted Navigation
Digital Enterprise Research Institute www.deri.ie
Previous and next page

- common approach to
history
What if I browse, refine,

go backward, refine
again, and ... discover
previous refinement
was more accurate?
What if we want to bind

results of two previous
queries?
4

15. What is HoneyComb TM
Digital Enterprise Research Institute www.deri.ie
5

16. What is HoneyComb TM
Digital Enterprise Research Institute www.deri.ie
 Visual paradigm
based on the concept of hexagon lozenges

uniformly tiles the plane

 Design objectives
information and actions in lozenges, edges, corners

support intuitive navigation

limit information overload

infinite & intuitive 3D surface

adapt to user context

visual response to user actions

5

17. Lozenges, Edges, and Corners
Digital Enterprise Research Institute www.deri.ie
6

18. Lozenges, Edges, and Corners
Digital Enterprise Research Institute www.deri.ie
Information item = hexagon

lozenge
One type of representation - no

nodes and links
Hexagon - maximal number of

edges to cover plane
Lozenges, edges, and

corners can be active:
 New lozenges can be created
through the interaction with
edges and corners
 Tooltip can hold details of the
information item
 Double-click on lozenge brings it
to the center
6

19. Lozenges, Edges, and Corners
Digital Enterprise Research Institute www.deri.ie
Information item = hexagon

lozenge
One type of representation - no

nodes and links
Hexagon - maximal number of

edges to cover plane
Lozenges, edges, and

corners can be active:
 New lozenges can be created
through the interaction with
edges and corners
 Tooltip can hold details of the
information item
 Double-click on lozenge brings it
to the center
6

20. Information overload vs 3D surface
Digital Enterprise Research Institute www.deri.ie
7

21. Information overload vs 3D surface
Digital Enterprise Research Institute www.deri.ie
Why we need to take

care about limiting the
view?
limited screen size

information overload

7

22. Information overload vs 3D surface
Digital Enterprise Research Institute www.deri.ie
Why we need to take

care about limiting the
view?
limited screen size

information overload

Why not use “scope of

interest”?
no hints on the size

7

23. Information overload vs 3D surface
Digital Enterprise Research Institute www.deri.ie
Why we need to take

care about limiting the
view?
limited screen size

information overload

Why not use “scope of

interest”?
no hints on the size

Why not spherical

surface?
limited view

how to render boundaries

7

24. Information overload and 3D surface
Digital Enterprise Research Institute www.deri.ie
8

25. Information overload and 3D surface
Digital Enterprise Research Institute www.deri.ie
 Objectives:
design custom 3D surface

with more “flat” center

with asymptotic edges

 that would almost look like
a sphere from above
8

26. Information overload and 3D surface
Digital Enterprise Research Institute www.deri.ie
 Objectives:
design custom 3D surface

with more “flat” center

with asymptotic edges

 that would almost look like
a sphere from above
 Solution:
8

27. Information overload and 3D surface
Digital Enterprise Research Institute www.deri.ie
 Objectives:
design custom 3D surface

with more “flat” center

with asymptotic edges

 that would almost look like
a sphere from above
 Solution:
8

28. Interaction and Visual Response
Digital Enterprise Research Institute www.deri.ie
9

29. Interaction and Visual Response
Digital Enterprise Research Institute www.deri.ie
 Depending on the
context users might
want to:
9

30. Interaction and Visual Response
Digital Enterprise Research Institute www.deri.ie
 Depending on the
context users might
want to:
select currently centered

lozenge
9

31. Interaction and Visual Response
Digital Enterprise Research Institute www.deri.ie
 Depending on the
context users might
want to:
select currently centered

lozenge
rotate the lozenges

9

32. Interaction and Visual Response
Digital Enterprise Research Institute www.deri.ie
 Depending on the
context users might
want to:
select currently centered

lozenge
rotate the lozenges

scale the lozenges

9

33. Interaction and Visual Response
Digital Enterprise Research Institute www.deri.ie
 Depending on the
context users might
want to:
select currently centered

lozenge
rotate the lozenges

scale the lozenges

 Users can track the
changes in the
visualization
9

34. HexBrowser - a prototype
Digital Enterprise Research Institute www.deri.ie
10

35. HexBrowser - a prototype
Digital Enterprise Research Institute www.deri.ie
 HexBrowser
Prototype implementation of HoneyCombTM

JavaScript + Canvas (tested on Firefox 1.5+)

Open source project: http://hexbrowser.sf.net/

 Implementation of core concepts
Active lozenges, edges, and corners

Projection on 3D surface

Rotation (mouse scroll) and Zooming (with alt/command)

Visual tracking of operations and changes

Easily extendable and customizable for end applications

10

36. HoneyComb - Success Stories
Digital Enterprise Research Institute www.deri.ie
11

37. HoneyComb - Success Stories
Digital Enterprise Research Institute www.deri.ie
 MultiBeeBrowse
visualizing browsing history overview

refining queries by opening new lozenges through edges

binding results of two queries through corners

part of JeromeDL and notitio.us systems

11

38. HoneyComb - Success Stories
Digital Enterprise Research Institute www.deri.ie
 MultiBeeBrowse
visualizing browsing history overview

refining queries by opening new lozenges through edges

binding results of two queries through corners

part of JeromeDL and notitio.us systems

 eLITE/Didaskon
visualizing learning path and options

new Adobe Flash prototype in preparation

11

39. Evaluation within MultiBeeBrowse
Digital Enterprise Research Institute www.deri.ie
12

40. Evaluation within MultiBeeBrowse
Digital Enterprise Research Institute www.deri.ie
 First user evaluation as a part of MBB evaluation
20 participants

comparing faceted navigation systems: MBB, BrowserRDF,

Longwell
one of four tasks (simple query, browsing, finding similar

results, binding results) required HoneyCombTM view to be
used
Results - users found the interface:

very (45%) or quite (50%) interesting

pretty useful (60%)

easy to use (75%)

12

41. Summary
Digital Enterprise Research Institute www.deri.ie
13

42. Summary
Digital Enterprise Research Institute www.deri.ie
HoneyCombTM parading:

 Allows to represent a graph with limited number of connections
between nodes
 Defines interactions with lozenges, edges, and corners
HexBrowser

 Prototype implementation in JavaScript and Canvas
 Providesbasic rendering and interaction concepts of
HoneyCombTM
 Easy to extend and customize for end applications
First positive reactions to HoneyCombTM used in faceted

navigation (MultiBeeBrowse)
13

43. Future Work
Digital Enterprise Research Institute www.deri.ie
14

44. Future Work
Digital Enterprise Research Institute www.deri.ie
 Improved implementation
Adobe Flash for browser independence

Ability to move hexagon lozenges

Bug-view supported by the HoneyCombTM implementation

 Integration with Didaskon project
 User study evaluation
Evaluate HoneyCombTM parameters: surface, lozenge sizes,

response times
In the context of eLearning applications, like Didaskon

14

45. Future Work
Digital Enterprise Research Institute www.deri.ie
 Improved implementation
Adobe Flash for browser independence

Ability to move hexagon lozenges

Bug-view supported by the HoneyCombTM implementation

 Integration with Didaskon project
 User study evaluation
Evaluate HoneyCombTM parameters: surface, lozenge sizes,

response times
In the context of eLearning applications, like Didaskon

14

46. HoneyCombTM
Digital Enterprise Research Institute www.deri.ie
15

47. HoneyCombTM
Digital Enterprise Research Institute www.deri.ie
HexBrowser prototype: http://hexbrowser.sf.net/
MultiBeeBrowse (part of S3B project): http://s3b.corrib.org/
JeromeDL (uses MBB with HoneyCombTM): http://www.jeromedl.org/
notitio.us (uses MBB with HoneyCombTM): http://notitio.us/
Sebastian Ryszard Kruk
DERI, NUI Galway, Ireland
sebastian.kruk@deri.org
15