Rendering Navigation and Information Space with HoneyCombTM

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

Presentation outline

2

Presentation outline

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

Motivation - Informal Learning

3


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



80% of all learning LMS
activities
Finding way through

various paths of
learning material


3



activities
Finding way through

various paths of
learning material
informal
 sources

3



activities
Finding way through

various paths of
learning material
informal
 sources
suggest
knows

friends

3

Motivation - Faceted Navigation

4

Motivation - Faceted Navigation

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

What is HoneyComb TM


5

What is HoneyComb TM


 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

Lozenges, Edges, and Corners

6

Lozenges, Edges, and Corners

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

Information overload vs 3D surface

7


Why we need to take

care about limiting the
view?
limited screen size


information overload


7


Why we need to take

view?
limited screen size




Why not use “scope of

interest”?
no hints on the size


7


Why we need to take

view?
limited screen size




Why not use “scope of

interest”?
no hints on the size


Why not spherical

surface?
limited view


how to render boundaries


7

Information overload and 3D surface

8


 Objectives:
design custom 3D surface


with more “flat” center


with asymptotic edges

 that would almost look like
a sphere from above

8


 Objectives:
design custom 3D surface


with more “flat” center


with asymptotic edges

 that would almost look like
a sphere from above

 Solution:

8

Interaction and Visual Response

9


 Depending on the
context users might
want to:

9


context users might
want to:
select currently centered

lozenge

9


context users might
want to:

lozenge
rotate the lozenges


9


context users might
want to:

lozenge
rotate the lozenges


scale the lozenges


9


context users might
want to:

lozenge
rotate the lozenges


scale the lozenges


 Users can track the
changes in the
visualization

9

HexBrowser - a prototype

10

HexBrowser - a prototype

 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

HoneyComb - Success Stories

11


 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


 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

Evaluation within MultiBeeBrowse

12

Evaluation within MultiBeeBrowse

 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

Summary

13

Summary

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

Future Work

14

Future Work

 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

HoneyCombTM

15

HoneyCombTM

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

Rendering Navigation and Information Space with HoneyCombTM

Recommandé

Recommandé

Contenu connexe

Similaire à Rendering Navigation and Information Space with HoneyCombTM

Similaire à Rendering Navigation and Information Space with HoneyCombTM (20)

Plus de Sebastian Ryszard Kruk

Plus de Sebastian Ryszard Kruk (20)

Dernier

Dernier (20)

Rendering Navigation and Information Space with HoneyCombTM