1 / 29

Semantic Scrolling

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. INTRODUCTION.

elia
Télécharger la présentation

Semantic Scrolling

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 INTRODUCTION Why can’t wescroll by tweets? Or by time?

  5. Google Maps Directions. • Side Panel: a list of directions from A to B • Each item maps from a heading in the side panel to a geographic location scroll semantically INTRODUCTION

  6. Example. INTRODUCTION

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

  8. Example. INTRODUCTION

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

  10. Doc Structure

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

  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. Linear data rendered hierarchically • ex. Linear data rendered hierarchically • ex. Hierarchical data rendered linearly • ex. Hierarchical 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

  15. Mechanics

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

  17. 2. Targeting • Relative movements in data • 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)

  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 • Input • Touch, Mouse, Keyboard • Targeting • Relative, Absolute • Interaction Manifestation • Invisible, Invoke, Persistent FRAMEWORK

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

  22. Focus • Certain categories are dull FRAMEWORK • Keyboard inputs, Data storage structure, etc. • Certain combinations are dull • 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 • Render: Linear • Exposed: Hierarchical • Mechanics • Input: Keyboard (hotkeys) • Targeting: Relative • Interaction Manifestation: Invisible

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

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

  27. Demo #2a • 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

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

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

More Related