A Negotiation Architecture for Fluid Documents. 2 Reading Bay-Wei Chang, Jock D. Mackinlay, Polle T. Zellweger, Takeo Igarashi, “A Negotiation Architecture.

Slides:



Advertisements
Similar presentations
CLUE REQUIREMENTS IETF 80 Allyn Romanow
Advertisements

ORGANIZING THE CONTENT Physical Structure
AVL Trees COL 106 Amit Kumar Shweta Agrawal Slide Courtesy : Douglas Wilhelm Harder, MMath, UWaterloo
1 Layers Data from IBM-Rational and Craig Larman’s text integrated into these slides. These are great references… Slides from these sources have been modified.
Requirements and Design
Character Setup Character Setup is the process of creating handles and controls for anything that a character animator will need to adjust in order to.
Chapter Concepts Discuss Fonts Understand Fonts
1 © Wolfgang Pelz UML2 UML Part Two. 2 © Wolfgang Pelz UML2 Chapters Four & Twelve Interaction Diagrams.
Memory Management 2010.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.
© Anselm Spoerri Lecture 14 Annotated Nike Ad Course Review –Course Objectives.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
1 Computer Systems & Architecture Lesson 1 1. The Architecture Business Cycle.
Visualization. CS351 - Software Engineering (AY2004)2 Program visualization Debugging programs without the aid of support tools can be extremely difficult.
Systems Analysis I Data Flow Diagrams
THE PERSPECTIVE WALL Jock D Mackinlay George D Robertson Stuart K Card.
Optimizing picture file size. Three things you can do to lower file size  Lower the resolution  Crop the picture  Save with a file format that uses.
1 An introduction to design patterns Based on material produced by John Vlissides and Douglas C. Schmidt.
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
4.5 Multimedia Production. Learning Outcome 1. Design the structure and user interface for a multimedia project. 2. Produce a successful multimedia project.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
MVC pattern and implementation in java
Lecture 18 Page 1 CS 111 Online Design Principles for Secure Systems Economy Complete mediation Open design Separation of privileges Least privilege Least.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Chapter 16 The World Wide Web Chapter Goals ( ) Compare and contrast the Internet and the World Wide Web Describe general Web processing.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
SMFM ePoster Layout Suggestions and Tips. Thank you for accepting the offer to submit your ePoster. This guide provides some hints and tips about designing.
Fluid Annotations in an Open World Polle T. Zellweger Niels Olof Bouvin Jock D. Mackinlay Henning Jehøj Aarhus University, Denmark.
London April 2005 London April 2005 Creating Eyeblaster Ads The Rich Media Platform The Rich Media Platform Eyeblaster.
Web Site Design Principles
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
1 On-Line Help and User Documentation  User manuals, online help, and tutorials are typically not used  However, well written and well-designed user.
Call to Write, Third edition Chapter Sixteen, The Writing Process: A Case Study of a Writing Assignment.
POWERPOINT DESIGN creating a truly well-designed PowerPoint is easy
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
Database Applications – Microsoft Access Lesson 6A Designing Custom Forms Updated F13 24 slides in presentation 1.
Graphics – Part1. Why use graphics u Different learning styles u Many things are hard to explain in text u Provides interest u Relationships are visual.
DBQ’S MRS. ALLEY Lesson 9- Day 1. What is a DBQ?  A DBQ, document based question, is a question that focuses around one or more documents.  The documents.
Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.
ELPSS RLO Scripting Templates VERSION 3 (Jan 09).
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
Hyper-Hitchcock F. Shipman, A. Girgensohn, and L. Wilcox, "Hyper-Hitchcock: Towards the Easy Authoring of Interactive Video", Proceedings of INTERACT 2003,
Chapter 1 - Getting to know Greenfoot
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 9 Design guidance and design rationale. UIDE Chapter 9 Sources of Design Guidance Standards Standards –User interface standard Design Guidelines.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Creating Graphical User Interfaces (GUI’s) with MATLAB By Jeffrey A. Webb OSU Gateway Coalition Member.
CSMAC Spectrum Sharing Sub- Committee Discussion Materials March 2012.
Visual C# 2012 How to Program © by Pearson Education, Inc. All Rights Reserved.
Hyperbolic Trees A Focus + Context Technique John lamping Ramana Rao Peter Pirolli Joy Mukherjee.
Toolglasses and Magic Lenses. 2 Reading: Eric A. Bier, Maureen C. Stone, Ken Pier, William Buxton and Tony D. DeRose, “Toolglass and magic lenses: the.
Human Computer Interaction
Design Reuse Earlier we have covered the re-usable Architectural Styles as design patterns for High-Level Design. At mid-level and low-level, design patterns.
Ian F. C. Smith Preparing and presenting a poster.
Posters Focus on main points u Don’t use a smaller font to cram more stuff onto the poster. u Cull the most essential information from everything you.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
Certificate in Digital Applications – Level 02 Multimedia Showcase – DA202.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Planning and Design.
WestEd.org The California Infant/Toddler Curriculum Framework: Theory to Practice Putting it All Together: Integrated Curriculum Planning.
44222: Information Systems Development
HighImpactSoft 2010 Organizing a Better Future. Agenda Specify Goals ScopeDefinitions Process Model Preliminary Requirements Issues and solutions TraceabilityPrototype.
Storyboarding For The Win
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Chapter 6 : User interface design
Unit 02 – One World Scenario - DA202
11/18/2018 5:19 PM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN.
Auctions 101 March 2019.
Enhanced agent workspace for messaging
Presentation transcript:

A Negotiation Architecture for Fluid Documents

2 Reading Bay-Wei Chang, Jock D. Mackinlay, Polle T. Zellweger, Takeo Igarashi, “A Negotiation Architecture for Fluid Documents”, Proceedings of UIST ’98, Nov. 1998, San Francisco, pp

3 Never enough screen space This paper looks at making “fluid documents” –dynamically change the allocation of space (and other saliency resources) between primary and secondary materials Architecture to implement this –based on negotiation of (potentially conflicting) requirements

4 Fluid documents Assumes primary and secondary material –footnotes, annotations, or hyperlinks Provides a nice mechanism for presenting secondary material on demand

5 What the system does Mediate salience (visual prominence) of primary and secondary material –Allow user to smoothly change focus between them Animation important –Specific techniques for modifying and sharing salience

6 Video Demonstration From UIST ‘98 video proceedings

7 Advantages Good use of space (user driven) Minimal shift of attention –Close to primary In context –Attempts to disturb primary presentation as little as possible –Smooth transitions between views Lightweight interactive control

8 Initially primary material is focus Takes most of space Captures most of user’s attention Secondary represented by small visual cue only

9 Shifting focus Shifting focus to secondary material: increase salience –Increase size –Move to prominent place –Boldface –etc.

10 Primary material must adjust Reduce salience Examples –Decrease size –Move away from center –Fade to a lighter shade

11 Negotiation process to decide who will do what Four Steps 1) Start with only visual cue (anchor) for supporting material 2) Reader indicates interest in supporting, triggering shift 3) Negotiate salience properties 4) Animate to new state

12 Initial Visual Cue Can follow various conventions –Underlined most common –Also footnote marker –Could also present small preview –Anything that represents the secondary material in small and unobtrusive way

13 UI for Expressing Interest Needs to be lightweight –Stated (but not obtained) goal: just as easy as looking at it System uses rollover + dwell –Roll away and display reverts –Click to hold secondary material open

14 Adjusting Material Most of work here Skip for a second

15 Animated transition Short (1/2 second) –overlaps reaction time Smooth changes –maintain continuity –maintain perception of “object constancy” this is a critical property

16 Adjusting Material Primary and secondary adjust display to change saliency and shift focus Biggest aspect: provide space for secondary Also: pick displays that fit the space & have right saliency

17 Providing space Several approaches (for text) –Block movement (splitting) –Deformation change interline spacing, warp –Outside allocation place secondary away from anchor visually connect (line)

18 Providing space More approaches (for text) –Overlay –Reuse of space May have extra space left over from some other space allocation –Combing techniques e.g., move + interline space e.g., interline space + overlay

19 Multiple expansions (and nesting) May require changes in all participants –Negotiation gets harder –Algorithm will deal with this piece-wise to keep simple

20 Negotiation Primary and secondary material may be of different types with different kinds of display capabilities –All examples are text, but the architecture handles general things –Two parts don’t have specific knowledge of all other types built in

21 Negotiation -- GChar Objects Uses a “GChar” object –“Graphical Characteristics” –Describes desired/proposed/granted display properties –Always includes space, but normally also includes other salience properties (e.g., color) Exact properties are display type dependent

22 Negotiation -- GChar Objects Primary & Secondary may be different display types –Again: encapsulated -- one type does not know about every other type would make new types very hard How do they communicate capabilities and requirements?

23 Negotiation -- GChar Objects Solution is to use hierarchical classes of GChar objects –All subclass of GChar which has only size information –Specific display types add additional information to specific subclasses e.g. text adds color and font info –Communicate via closest superclass of the GChar’s that two objects use

24 Negotiation -- GChar Objects Two kinds of GChar objects used –Specific / Exact (SpecificGChar) used for specific proposal / result –Range (RangedGChar) use to communicate acceptable bounds for various properties

25 Negotiation -- Proposal Objects Proposal object has (at least) –SpecificGChar for preferred state –RangedGChar for acceptable range –These always include space aspects –May also include other aspects e.g. color, font properties

26 Negotiation Objects Process of negotiation represented by a Negotiation object –Used to represent result –Drives animation & return animation –Used as basis for future negotiation Basically a cache

27 Encapsulation of Negotiation Each material object has a list of possible presentation strategies –Typically a prioritized list –Each can evaluate a RangedGChar can it do it what is closest / best that fits it Display strategy info remains encapsulated in each object

28 Encapsulation of Negotiation Each potential primary object (essentially all) also has set of space-making strategies –Similar story on capabilities and encapsulation

29 Negotiation Steps Four steps in negotiation –Initial proposal (by secondary) –Guideline selection (by primary) –Presentation strategy choice (sec) –Space-making strategy choice (prim)

30 Negotiation -- Initial Proposal Secondary indicates to primary that it would like to expand –Submits a Proposal object SpecificGChar: a priori preferred size & salience properties RangedGChar: sizes and properties it can do display with

31 Negotiation -- Guideline Selection Primary determines which subclass of GChar to use Considers its set of space making strategies –Tentatively picks one –Typical policy: one with most space Tries to provide most flexibility

32 Negotiation -- Guideline Selection Sends a proposal back –Ranged: the guidelines max space that can be given property ranges with most leeway –Specific: a specific recommendation takes into account preferred state of both primary and secondary important for expressing properties

33 Negotiation -- Presentation Strategy Choice Secondary picks a final presentation strategy –Original choice may work –May have to consider its list of possible presentations to find one Fits within space given As close as possible to suggested properties

34 Negotiation -- Presentation Strategy Choice Secondary sends back proposal with final choice –Specific GChar only

35 Negotiation -- Space-Making Strategy Choice Based on final choice of secondary, primary picks a space-making strategy –May be tentative choice –May be able to do better if secondary did not use all its space, etc. Strategy does placement

36 Negotiation Critical: details of decision algorithms embedded in objects –Allows type specific strategies, but still fitting in general framework –Set of strategies for each type Neither dictates, but not symmetrical –E.g., secondary never knows about primary’s presentation (size, etc.)

37 Negotiation Multi-level negotiations handled pair-wise –Negotiation with grandparent is handled inside “guideline” and “space choice” steps of parent –Negotiation with grandchildren similarly handled inside “initial” and “presentation choice” steps of child

38 Negotiation Negotiation stops after one round of four steps –can fail  fallback strategy e.g., separate window –claimed rare because primaries build to provide wide ranges Could renegotiate based on knowledge of needs –still limited rounds  fail  fallback strategy

39 Recap Good use of space Keeps disruption of attention to a minimum Negotiation makes best use of available resources Architecture encapsulates details  allows extension

40