Your SlideShare is downloading. ×
0
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Rendering Navigation and Information Space  with  HoneyCombTM
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rendering Navigation and Information Space with HoneyCombTM

1,015

Published on

Presentation I gave at CHI2008, Florence, Italy

Presentation I gave at CHI2008, Florence, Italy

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,015
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×