design patterns for the hypermedia domain

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: [email protected]


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


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


Existing Methods

• Why use a Hypermedia Design Method?• What do HDM, RMM and OOHDM have in

common? Methods and design experience

Patterns transcend methods


Why is recording experience valuable?

• Designers typically reuse good solutions

• It improves documentation• It helps communicating decisions


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


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


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


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


A bit of history in our project

• Our work in OOHDM• Extending OO applications with

hypermedia• Some patterns in our framework:

Observer Composite Strategy


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


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


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.


Node as a Navigational View


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


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)


Patterns for Hypermedia Applications

• Navigational Contexts• Active Reference• Information on Demand• Behavioral Grouping• Information-Interaction coupling• Information-Interaction decoupling• Behavior Anticipation


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.


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.



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


Navigational Context in the WWW

Recomendations are shown according to the context (music or books)


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


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


Active Reference in the WWW


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


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


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


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


Landmark

• Solution: Define a set of landmarks and make them accessible from every node in the network


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


Information on Demand....

Solution: Let the user control which attributes are shown

Active interface object Attribute shown 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.



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


Information on Demand in the WWW


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


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


Behavioral Grouping in the WWW


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


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.


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



• 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


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


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


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


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)


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


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)


Mailing Lists

• [email protected] is for presenting and describing software patterns. • [email protected] is for presenting and describing business patterns. • [email protected] concerns patterns on concurrency, distribution, and IPCs. • [email protected] is about decoupling & complexity management. • [email protected] is for discussion of patterns in general. • [email protected] is about the design patterns in the Gang of Four's book. • [email protected] is about the patterns described by the Siemens guys. • [email protected] is for discussing patterns involving organizations. • [email protected] concerns patterns and the Eiffel language.• [email protected] is about patterns described in CORBA Design Patterns and

related patterns. • [email protected] is for discussion Power Builder patterns

design patterns for the hypermedia domain

Documents