Rendering Navigation and Information Space with HoneyCombTM

transcript

Digital Enterprise Research Institute www.deri.ie

sebastian.kruk@deri.orgDERI NUI Galway

Rendering Navigation and Information Space

with HoneyCombTM

Sebastian Ryszard Kruk, Bill McDaniel

sebastian.kruk@deri.orgDERI NUI Galway

Rendering Navigation and Information Space

with HoneyCombTM

Sebastian Ryszard Kruk, Bill McDaniel

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

Motivation - Informal Learning

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

informalsources

suggest

informalsources

friends

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?

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

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

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

Information overload vs 3D surface

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

Information overload and 3D surface

Objectives: design custom 3D surface

with more “flat” center

with asymptotic edges that would almost look like

a sphere from above

Solution:

a sphere from above

Solution:

Interaction and Visual Response

Depending on the context users might want to:

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

lozenge

rotate the lozenges

lozenge

rotate the lozenges

scale the lozenges

lozenge

rotate the lozenges

scale the lozenges

Users can track the changes in the visualization

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

HoneyComb - Success Stories

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

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

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%)

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)

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

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

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 KrukDERI, NUI Galway, Ireland sebastian.kruk@deri.org

HoneyCombTM

Rendering Navigation and Information Space with HoneyCombTM

Education