Rendering Navigation and Information Space with HoneyCombTM

Chapter Copyright 2007 Digital Enterprise Research Institute. All rights reserved. www.deri.org

Digital Enterprise Research Institute www.deri.ie

[email protected] NUI Galway

Rendering Navigation and Information Space

with HoneyCombTM

Sebastian Ryszard Kruk, Bill McDaniel

1


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






3

LMS






3

informalsources

LMS






3

knows

suggest

informalsources

friends

LMS


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 HoneyCombTM

5


What is HoneyCombTM

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



7

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

information overload



7



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



7



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

Why not spherical surface? limited view

how to render boundaries


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



Depending on the context users might want to: select currently centered

lozenge

9




lozenge

rotate the lozenges

9




lozenge

rotate the lozenges

scale the lozenges

9




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

http://hexbrowser.sf.net



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

HexBrowserPrototype implementation in JavaScript and Canvas

Provides basic 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


15

HoneyCombTM


15

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 KrukDERI, NUI Galway, Ireland [email protected]

HoneyCombTM



http://s3b.corrib.org

http://s3b.corrib.org

http://www.jeromedl.org/

http://www.jeromedl.org/

http://notitio.us

http://notitio.us

mailto:[email protected]

mailto:[email protected]

Rendering Navigation and Information Space with HoneyCombTM

Education

Transcript of Rendering Navigation and Information Space with HoneyCombTM