View
57
Download
3
Category
Preview:
DESCRIPTION
Design Patterns for the Hypermedia Domain. Gustavo Rossi*, Fernando Lyardet * , Daniel Schwabe + *LIFIA-UNLP, Argentina + PUC-Rio, Brasil Contact: gustavo@sol.info.unlp.edu.ar. Summary. The problems of Hypermedia Design Existing methods Why recording experience is valuable - PowerPoint PPT Presentation
Citation preview
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Design Patterns for the Hypermedia Domain
Gustavo Rossi*, Fernando Lyardet*, Daniel Schwabe+
*LIFIA-UNLP, Argentina+PUC-Rio, Brasil
Contact: gustavo@sol.info.unlp.edu.ar
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Summary
• The problems of Hypermedia Design• Existing methods• Why recording experience is valuable• An Introduction to Design Patterns• Examples• Pattern mining• A bit of history in our project• Pattern Categories in Hypermedia• Patterns for Hypermedia Systems• Navigational Contexts• Information on Demand• Towards a Pattern Language• Concluding Remarks• References
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
The problems of Hypermedia Design
• We face a new, wide spectrum of applications involving hypermedia.
• How do we structure such applications?• How do we organize the information?• How do we organize navigation?• How do we build good interfaces.• Guidelines exist, but the key is.....
Experience
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Existing Methods
• Why use a Hypermedia Design Method?• What do HDM, RMM and OOHDM have in
common? Methods and design experience
Patterns transcend methods
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Why is recording experience valuable?
• Designers typically reuse good solutions
• It improves documentation• It helps communicating decisions
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
What is a pattern?
• A Pattern is an Abstract solution to a recurrent problem in a context
• A Pattern describes a recurrent design structure they are not new, original solutions, but good
solutions that appear over and over• Patterns are not designs; they must be instantiated• They help to build a common vocabulary
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Brief History of Design Patterns
• The work of Cristopher Alexander• Design Patterns in the OO field• Pattern Languages• Patterns in different fields (interaction design,
testing, organizations, etc) Example - general purpose ones (the Gama et
al catalog): Composite, Bridge, Adapter, Decorator, Observer, etc
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Describing Patterns
• We have used a mixture of the Gang of Four (GOF) format (from the Gamma et al book) and the Alexandrian one.
• Key aspects that must be described: Intent The problem Solution Consequences Known uses
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Pattern Mining
• Patterns are discovered, not invented.• Is it possible to build a catalog for the
hypermedia domain?• Sources for discovering patterns: the
WWW, existing applications, etc...• The importance of abstracting
problems and solutions
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
A bit of history in our project
• Our work in OOHDM• Extending OO applications with
hypermedia• Some patterns in our framework:
Observer Composite Strategy
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
A Framework for Pattern Categories in Hypermedia
Type of applicationsH ypermedia
SystemsH ypermediaappl icationsN avigational
DesignDevelopment
stagesI nterface design
Patterns from the GOF catalogsuch as Obsever, Composite, Bridge, etc, plus more specific ones, such as Navigation Observer and Navigation Strategy
Navigational ContextActive Reference
Interface on DemandInterface groups
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Patterns for Hypermedia Systems
• Node as a Navigational view• Wrapper Node• Link as a Relationship View• Node Class• Link Class• Anchor• Navigation Observer• Navigation Strategy
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Node as a Navigational View
• Problem: How to add navigation capabilitiesto the components of an OO application?
• Forces: Original interface must be preserved,modifying objects in the original application isundesirable.
• Solution: Define a navigational layer build upof objects’ observers that are called nodes.Implement the navigational behavior innodes.
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Node as a Navigational View
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Navigation Observer• Problem: How to create a perceivable
record of navigation• Forces: Hypermedia applications should
record the state of navigation, this recordshould be updtated automatically, different users may choose different perception styles for the history
• Solution: Define a history object for each session, decouple the GUI from the history
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Navigation Observer
self ->record ()
HypermediaComponent
- navigate ()
ConcreteHypermediaComponent
- activate ()
History
- record (object)
AbstractViewer
- viewHistory ()
ConcreteViewer
history subject
(history)
- viewHistory ()
self ->activate ()
- reset ()- backtrack (from)
- goTo (object)
- goTo (object)
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Patterns for Hypermedia Applications
• Navigational Contexts• Active Reference• Information on Demand• Behavioral Grouping• Information-Interaction coupling• Information-Interaction decoupling• Behavior Anticipation
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Navigational Contexts (Sets +Contexts)
• Intent: Provide the user with closed
navigational subspaces containing context-related guidelines.
• The problem: How to organize collections in order to
ease the way we will navigate nodes in the collection.
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Navigational Contexts
Node
Decorator
Context node
Link
• Solution : Decouple nodes from the context in which they are to be explored.
• Define context links and appropiated decorators for each context.
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Navigational Contexts
Context-specific information(a decorator’ s attribute) The “ behavior” of Next
Page depends on thecurrent context (anotherdecorator’ s attribute)
Original node containinggeneral information about“ Sun Flowers”
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Navigational Contexts
• Design and implementation issues: Navigation inside a context Implementing decorators Is it feasible?
• Known uses: Microsoft’s Art Gallery, Portinari Project, A Passion for Art, HDM’s collections, OOHDM, etc.
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Navigational Context in the WWW
Recomendations are shown according to the context (music or books)
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Active Reference
• Intent: Provide a perceivable reference about
navigation, to make it easier.• The problem:
We need a way to help the user understand where he is and where he can go next. Indexes or other access structures provide only partial solutions
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Active Reference
Active Referencesto Regions in LeLouvre
Active Referencesto rooms (salles)in a Region
A Salle andPaintings locatedin it
Solution: Mantain an active an perceivablenavigational object acting as an index to other nodes
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Active Reference in the WWW
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Active Reference....
• Consequences Permanent record of position in navigation
space Management of screen real state to
acomodate active reference• Design and Implementation Issues
Highly dependent on graphical support in implementation environment
Dependent on built-in layering mechanisms
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
News
• Intent: How to tell users of dynamic Web-sites that there is new information?
• The Problem: Most large web-sites are tree-structured. These information spaces tend to be large, and are hardly ever completely navigated by a single user. In this context, new information may be frequently added. Therefore, how is the user provided with instant feedback of any recent changes or additions to the information available, while maintaining a well-structured web-site
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
News• Solution: Structure the home page in such a
way that space is devoted to newest additions. Make those headlines anchors to the new pages
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Landmark
• Intent: How to give easy access to different unrelated sub-systems
• Problem: Hypermedia applications usually contain many interesting entry-points; links to those points do not reflect conceptual relationships, and those links may yield a spaghetti-like structure
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Landmark
• Solution: Define a set of landmarks and make them accessible from every node in the network
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information on Demand
• Intent: Organize the information in a legible
and comprehensible interface. Prevent cognitive overhead.
• The screen is small; playing multiple media may be unfeasible.
• Scrolling may not be a good solution
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information on Demand....
Solution: Let the user control which attributes are shown
Active interface object Attribute shown on demand
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information on Demand
• Design and implementation issues: Navigation vs. Interface How to implement
synchronizations? Implementation may not be easy.
• Known uses: Art Gallery, Portinari Project, Le Louvre, The Way Things Work, etc.
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information on Demand
Active InterfaceObjects controllingthe informationpresented to the reader
When we select “Apropos” we perceiveanother Painting’sattribute
This attribute is nowshown with a smallerrepresentation. Atextual description isincluded
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information on Demand in the WWW
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Behavioral Grouping
Problem: How to organize different types of controls so the user can understand them
Forces: Different kinds of control objects; many different functions, control objects should not interfere with the substantive information
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Behavioral GroupingSolution: Group control interface objects according to their functionality (such as global, contextual, structural, etc.) and make each group perceivable in a different screen area
Information onDemand controls
Context relatedcontrols
Global Navigationcontrols
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Behavioral Grouping in the WWW
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Behavior Anticipation
• Intent: How do you tell the user the effect or consequence of activating an interface object?
• Problem: It is usual to find readers wondering what has happened after activating a control, and the exact consequence of the action performed
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Behavior Anticipation• Solution: Provide feedback about the effect of activating each
interface element. Choose the kind of feedback to be non-ambiguous and complete: different cursor shapes, highlighting, small text-based explanations, etc.
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information/Interaction Decoupling
• Intent: Helps to differentiate contents and various types of controls in the interface
• Problem: A page of a complex application display different contents, and is related to many other pages, thus providing many anchors. It is well known that when too many anchors are provided in a text, the reader is distracted and cannot take profit of all of them
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information/Interaction Decoupling
• Solution: Separate the input communication channels from the output channels, by grouping both sets separately. Within the output group, it is also convenient to differentiate the "substantive information" (i.e. content) from the "status information". This solution not only improves the perception of a node's interface, but also the efficiency of the implementation
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Information/Interaction Decoupling
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
From Patterns to Applications
• How do we incorporate patterns into the development process?
• We can enrich existing methods with high-level primitives expressing patterns
• We can use patterns as active guidelines during the process
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
From Patterns to Applications: Examples
• Navigational Contexts in OOHDM are expressed by specifying type, members and decorators.
• Landmark in OOHDM: Avoiding the spaghetti-syndrome
MusicL
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
A pattern language for hypermedia?
• Why? To help whom?• Is it possible? What do we need to cover?• The community already has the
expertise• This expertise would be useful for WWW
sites designers
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Conclusions and Further Work
• The problem of hypermedia design revisited• Why patterns?• Patterns help us to use a common
vocabulary for expressing complex problem-solution pairs
• We are writing a pattern language for extending object-oriented applications with hypermedia
(that includes previously shown patterns)
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
References• A. Garrido, G. Rossi, D. Schwabe: “Pattern Systems for Hypermedia”. Proceedings of Plop'97. Pattern Languages of
Programs, Allerton, Illinois, September 1997• A. Garrido, G. Rossi: “Capturing hypermedia functionality in an object-oriented framework”. In Object-Oriented
Application Frameworks (R. Johnson, M. Fayad editors). John Wiley and Sons, forthcoming• Gustavo Rossi, Alejandra Garrido, Daniel Schwabe. “Using Object-Oriented Models and Patterns in the WWW”.
Workshop on Software Engineering (on) the World Wide Web. International Conference on Software Engineering, Boston, May 1997
• G. Rossi, D. Schwabe, A. Garrido: “Design Reuse in Hypermedia Applications”. 8th ACM Conference on Hypertext Technology. Southampton, Inglaterra 1997. ACM Press
• A. Garrido, G. Rossi “A Framework for Extending Object-Oriented Applications with Hypermedia Functionality”. Published in The New review of Hypermedia and Multimedia. Taylor Graham, vol 2, 1996
• G. Rossi, D. Schwabe, A. Garrido. “Towards a Pattern Language for Hypermedia applications”. Proceedings of PLoP’96 (Pattern Languages of Program Design), Allerton, Illinois, September 1996
• D. Schwabe, G. Rossi, S. Barbosa , “Systematic Hypermedia design with OOHDM”, ACM International Conference on Hypertext, Hypertext'96, March 1996, Washington, USA.
• G.Rossi, A.Garrido, S.Carvalho, “Design Patterns for Object-Oriented Hypermedia Applications”, Pattern Languages of Programs (PLoP'95), Illinois, Setiembre 1995. In Pattern Languages of Program Design. Addison Wesley, 1996
• Carvalho, G.Rossi, A.Garrido, “Design Patterns in an Object-Oriented framework for hypermedia”, International Conference of the Chilean Computer Society, Arica, Chile, Noviembre 1995
• G. Rossi; D. Schwabe; C.J.P. de Lucena; D.D. Cowan, “An Object-Oriented Model for Designing the Human-Computer Interface of Hypermedia Applications”, Proc. of the International Workshop on Hypermedia Design (IWHD'95), Springer Verlag Worikshops in Computing Series, forthcoming. (available at <ftp://ftp.inf.puc-rio.br/pub/docs/techreports/ 95_07_rossi.ps.gz>).
• D. Schwabe and G. Rossi:, “The Object Oriented Hypermedia Design Model”, Comm. of the ACM, Vol. 38, #8, pp45-46 Aug. 1995. (available at <http://irss.njit.edu:5080/cgi-bin/bin/option.csh?sidebars/schwabe.html>).
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
References• Alexander, S. Ishikawa, M. Silverstein, M. Jacobson, I. Fiksdahl-King e S. Angel: "A Pattern Language". Oxford
University Press, New York 1977• M. Bieber; C. Kacmar, “Designing Hypertext Support for Computational Applications", Comm ACM, August
1995, pp 99-107• Gamma, R. Helm, R. Johnson and J. Vlissides: "Design Patterns: Elements of reusable object-oriented software",
Addison Wesley, 1995• Garzotto, L. Mainetti and Paolo Paolini: “Information reuse in hypermedia applications”. Proceedings of
Hypertext’96, Washington, 1996, pp. 93-104• H. Gellersen, R. Wicke, M. Gaedke WebComposition: An Object-Oriented Support System for the Web
Engineering Lifecycle” Electronic Proceedings of The Sixth International WWW Conference, Santa Clara, USA, April, 1997
• Izakowitz, E. Stohr e P. Balasubramaniam: "RMM: A methodology for structured hypermedia design". Comm. of the ACM, October 1995, pp. 34-44.
• Patterns home page: http://st-www.cs.uiuc.edu/users/patterns/patterns.html• “An Object Oriented Approach to Web-Based Application Design” (D. Schwabe, G. Rossi). To be published in
TAPOS (Theory and Practice of Object Systems), Wiley and Sons, 1998• -“Discovering and using patterns in the WWW” (F. Lyardet, G. Rossi, D. Schwabe). to be published in
Multimedia Tools and Applications, Kluwer, 1998• -“Designing Multimedia interfaces with objects and patterns” (G. Rossi, F. Lyardet and D. Schwabe).
International Workshop on Engeneering Multimedia applications in ICSE’98, Kyoto, Japan, April 1998 (Published by IEEE Computer Society Press)
Design Patterns for Hypermedia. Rossi, Garrido, Schwabe
Mailing Lists
• patterns@cs.uiuc.edu is for presenting and describing software patterns. • business-patterns@cs.uiuc.edu is for presenting and describing business patterns. • ipc-patterns@cs.uiuc.edu concerns patterns on concurrency, distribution, and IPCs. • dacm-patterns@cs.uiuc.edu is about decoupling & complexity management. • patterns-discussion@cs.uiuc.edu is for discussion of patterns in general. • gang-of-4-patterns@cs.uiuc.edu is about the design patterns in the Gang of Four's book. • siemens-patterns@cs.uiuc.edu is about the patterns described by the Siemens guys. • organization-patterns@cs.uiuc.edu is for discussing patterns involving organizations. • e-patterns@cbr.dit.csiro.au concerns patterns and the Eiffel language.• corba-patterns@cs.uiuc.edu is about patterns described in CORBA Design Patterns and
related patterns. • pb-patterns@cs.uiuc.edu is for discussion Power Builder patterns
Recommended