Design Patterns for the Hypermedia Domain

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

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

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

4. Existing Methods • Why use a Hypermedia Design Method? • What do HDM, RMM and OOHDM have in common? • Methods and design experience Patterns transcend methods

5. Why is recording experience valuable? • Designers typically reuse good solutions • It improves documentation • It helps communicating decisions

6. What is a pattern? • A Pattern is an Abstractsolution 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

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

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

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

10. A bit of history in our project • Our work in OOHDM • Extending OO applications with hypermedia • Some patterns in our framework: • Observer • Composite • Strategy

11. A Framework for Pattern Categories in Hypermedia Patterns from the GOF catalog such as Obsever, Composite, Bridge, etc, plus more specific ones, such as Navigation Observer and Navigation Strategy Navigational Context Active Reference Interface on Demand Interface groups

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

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

14. Node as a Navigational View

15. Navigation Observer • Problem: How to create a perceivable record of navigation • Forces: Hypermedia applications shouldrecord 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

16. Navigation Observer

17. Patterns for Hypermedia Applications • Navigational Contexts • Active Reference • Information on Demand • Behavioral Grouping • Information-Interaction coupling • Information-Interaction decoupling • Behavior Anticipation

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

19. Navigational Contexts • Solution : Decouple nodes from the context in which they are to be explored. • Define context links and appropiated decorators for each context.

20. Navigational Contexts

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

22. Navigational Context in the WWW Recomendations are shown according to the context (music or books)

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

24. Active Reference Solution: Mantain an active an perceivablenavigational object acting as an index to other nodes

25. Active Reference in the WWW

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

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

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

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

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

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

32. Information on Demand.... Solution: Let the user control which attributes are shown Attribute shown on demand Active interface object

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

34. Information on Demand

35. Information on Demand in the WWW

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

37. Behavioral Grouping Solution: Group control interface objects according to their functionality (such as global, contextual, structural, etc.) and make each group perceivable in a different screen area

38. Behavioral Grouping in the WWW

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

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

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

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

43. Information/Interaction Decoupling

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

45. From Patterns to Applications: Examples • Navigational Contexts in OOHDM are expressed by specifying type, members and decorators. • Landmark in OOHDM: Avoiding the spaghetti-syndrome Music L

46. 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 WWWsites designers

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

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

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

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