Semantic Scrolling How to navigate structured documents

An Introduction

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

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

Google Maps Directions. INTRODUCTION

Example. INTRODUCTION

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

Example. INTRODUCTION

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

Doc Structure

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

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

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

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

Mechanics

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

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

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

Framework

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

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

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

Demo

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

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

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

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)

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

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