1. Semantic Scrolling How to navigate structured documents

2. An Introduction

3. In the World of Data Data exists in multiple forms INTRODUCTION Many ways of navigating data What is Semantic Scrolling?

4. A hypothetical example. Let’s look at Twitter Scrolling by pixels Why can’t we scroll by tweets? Or by time? INTRODUCTION

5. Google Maps Directions. INTRODUCTION

6. Example. INTRODUCTION

7. Microsoft Word Search. Little known function of the navigation panel  Move through document by Graphics, Tables, Equations, etc. INTRODUCTION

8. Example. INTRODUCTION

9. How to categorize? By the document structure? INTRODUCTION By the mechanics?  rendering, storage etc.  Input, Interactive elements, etc.

10. Doc Structure

11. 1. The Data Structure Linear – one level of detail DOCUMENT STRUCTURE Hierarchical – multiple levels of detail Data Structure = how the data is stored

12. 2. Rendering Rendering = how the data is represented to the user for consumption DOCUMENT STRUCTURE Linear & Hierarchical applies here as well  ex. Linear data rendered linearly  ex. Hierarchical data rendered linearly  ex. Hierarchical data rendered hierarchically  ex. Linear data rendered hierarchically

13. 3. Exposed Exposed = how the data is represented to the user for navigation DOCUMENT STRUCTURE Linear & Hierarchical applies here as well Note: How a document is Exposed can be independent from how it is Rendered

14. Putting it Together DOCUMENT STRUCTURE DataRenderedExposedExample DataRenderedExposedExample Linear -Simple lists Hierarchy-Lists w/ categorization DataRenderedExposedExample Linear -Simple lists Hierarchy-Lists w/ categorization HierarchyLinear -List of nodes in tree (ordered?) Hierarchy-eBooks table of contents DataRenderedExposedExample Linear -Simple lists Hierarchy-Lists w/ categorization HierarchyLinear -List of nodes in tree (ordered?) Hierarchy-eBooks table of contents HierarchyLinear-List of nodes in tree (ordered?) Hierarchy-Semantic zooming, i.e. expand / collapse tree at a depth

15. Mechanics

16. 1. Inputs Touch: MECHANICS Mouse:  tap, swipe, drag, pinch, etc.  click, drag, mouse wheel, secondary buttons Keyboard: (not really interesting)  arrow keys, hot keys

17. 2. Targeting  up-down semantic movements in data (up/down level of detail) MECHANICS  prev-next semantic movements in data (across same level of detail) Absolute movements in data (random access) Relative movements in data

18. 3. Interaction Manifestation Invisible – interaction is done to the content direction, no other feedback MECHANICS Invoke – an element is invoked for the semantic scrolling to take place Persistent – a persistent element exists for semantic scrolling

19. Framework

20. Doc Structure & Mechanics FRAMEWORK DataRenderedExposed Linear Hierarchy Linear Hierarchy Linear Hierarchy Input  Touch, Mouse, Keyboard Targeting  Relative, Absolute Interaction Manifestation  Invisible, Invoke, Persistent

21. Size of the design space FRAMEWORK Total Doc Structure categories = 6 Total Mechanics categories = 18  Input = 3, Targeting = 2, IM = 3 So, 108 categories in total? NOT EXACTLY

22. Focus Certain categories are dull FRAMEWORK Certain combinations are dull  Keyboard inputs, Data storage structure, etc.  Ex. Keyboard & persistent/invoked  Ex. Touch & absolute movement Focus: Mechanics that compliment certain document structures

23. Demo

24. Demo #1 overview Document structure DEMO  Data: Hierarchical Mechanics  Render: Linear  Exposed: Hierarchical  Input: Keyboard (hotkeys)  Targeting: Relative  Interaction Manifestation: Invisible

25. Demo #1 DEMO Purpose:  Show the backend scrolling algorithm  Document has 4 levels of detail (LOD)  Parts, Chapters, Sections, Subsections  Scrolling at a certain LOD will scroll through the parts of the document at that LOD and higher, but not lower.  Like a depth limited tree traversal  Prevents jumps, gives context

26. Demo #2 overview Document structure (same document) DEMO  Data: Hierarchical Mechanics  Render: Linear  Exposed: Hierarchical  Input: Touch  Targeting: Relative  Interaction Manifestation: Invisible

27. Demo #2a DEMO Purpose:  Touch gesture for relative movement with 2 taps scrolling  2 taps to right = more fine (higher LOD)  2 taps to left = more coarse (lower LOD)

28. Demo #2b DEMO Purpose:  Touch gesture for relative movement with 2 finger scrolling  Width of space between 2 fingers determines LOD

29. FINAL SLIDE Additional comments? THE END Thank you for your time.