Hypermedia Design Methods

1
Hypermedia Design Methods

• OOHDM
• Patterns

2
OOHDM

• Object-Oriented Hypermedia Design Method
• A design method -- a series of activities for
  carrying out the design and implementation of
  hypermedia applications
• Four stages of development
• Incremental process
• Relies on an understanding of OO design
• Emphasis on reuse
• Emphasis on OO software engineering patterns
• http//www.inf.puc-rio.br/schwabe/

3
OOHDM Cornerstones

• Navigation objects are views of conceptual
  objects
• Use of appropriate abstractions to organise the
  navigation space, including navigation contexts
• Separate interface issues from navigation issues
• Recognition that some design decisions need only
  be made at implementation time

4
OOHDM Methodology
5
OOHDM

• Products
• Classes, subsystems, relationships, attribute
  perspective
• Nodes, links, access structures, navigational
  contexts, navigational transformations
• Abstract interface objects, responses to external
  events, interface transformations
• Running application

Conceptual Design
Navigational Design
Abstract Interface Design
Implementation
6
OOHDM

• Formalisms
• Object-Oriented Modelling constructs Design
  Patterns
• Object-Oriented Views Object-Oriented State
  charts Context Classes Design Patterns User
  Centred Scenarios
• Abstract Data Views Configuration Diagrams
  ADV-Charts Design Patterns
• Those supported by the target environment

Conceptual Design
Navigational Design
Abstract Interface Design
Implementation
7
OOHDM

• Mechanisms
• Classification, composition, generalisation,
  specialisation
• Classification, Aggregation, generalization and
  specialization. Mapping between conceptual and
  navigation objects
• Mapping between navigation and perceptible
  objects
• Those provided by the target environment

Conceptual Design
Navigational Design
Abstract Interface Design
Implementation
8
OOHDM

• Design Concerns
• Modelling the semantics of the application domain
• Takes user profile and task into account
  emphasis on cognitive aspects. Build the
  navigational structure of the application
• Modelling perceptible objects, implementing
  chosen metaphors describing interface for
  navigational objects. Define lay-out of interface
  objects
• Performance completeness

Conceptual Design
Navigational Design
Abstract Interface Design
Implementation
9
Conceptual Design

• Conceptual model of the application domain built
  using OO modelling techniques
• Augments OO models (UML) with primitives for
  users and tasks
• Two kinds of objects
• Node candidates in the navigational model
• Those that provide computational support for the
  application
• Result conceptual schema built out of subsystems
  (packages), classes and relationships

10
Conceptual Design
Generalisation
Perspectives
Aggregation
11
Conceptual Design
12
OOHDM Navigational Design

• Describes the navigational structure in terms of
• (a) Navigational class schema
• Nodes, links, indices, guided tours
• Nodes are derived from views on conceptual
  classes
• Links are derived from views on relationships.
• (b) Navigational context schema
• Induced from navigational classes
• Classes and Contexts take into account users and
  their tasks
• Different navigational models may be built for
  the same conceptual schema to express different
  views.
• (c) Navigational Transformations spec shows the
  way the navigational space changes when the user
  navigates
• Which nodes activated and which deactivated
• Statechats, object charts

13
Relationships between Objects
14
Navigational Model

• Which objects will be navigated, which attributes
  they possess, and what are the relationships
  among these objects and the ones defined in the
  conceptual schema.
• defining nodes and links as object-oriented views
  of conceptual objects and relationships.
• What kind of composition structures exist among
  navigational objects and how are they related?
• What is the underlying structure of navigation?
  In which contexts will the user navigate?
• navigational contexts, an architectural primitive
  for organizing the navigation space.
• Navigated objects may look different according
  the context in which they are visited. InContext
  classes decorate navigational objects using
  the Decorator pattern
• Which connections and access structures exist
  among objects that will be navigated (links,
  paths, indices, guided-tours, etc.)
• How does navigation proceed when the user jumps
  from one object to another

15
Node objects are views
Super class
Node class
Conceptual class

• NODE Story FROM StorySt INHERITS FROM Person
• author String SELECT Name FROM PersonPr
  WHERE Pr Is Author of St
• author_bio String SELECT Bio FROM PersonPr
  WHERE Pr Is Author of St
• .... (other attributes preserved from the
  conceptual class Story
• toAuthor Anchor (Is Author of)
• END

Variables to express logical conditions
Anchor object
Subject of query expression
Logical expression
Attributes of class
16
Navigational Class Model
17
Navigational Class Model
18
Navigational Contexts

• Chief structuring primitive of navigational
  space.
• A set of nodes, links, context classes and other
  (nested) navigational contexts
• Defines - Traversal order of its elements
• Defines - Existence or not of access structures
• Defines Members
• Extensional definition -gt Enumerate its members
• Intensional definition -gt Define a property that
  all nodes and links in the context possess
• Navigational contexts organize the navigational
  space in consistent sets that can be traversed
  following a particular order
• Defined in such a way as to help the user to
  perform her intended task.

19
Context definition

• Simple class based
• All stories dated today
• Class based group - a set of contexts, each of
  which is a simple class based context
• Stories by Type
• Link based same class and belong to a
  relationship
• All stories by Carole Goble
• Link based group a set of contexts, each of
  which is a link-based context
• Stories by author
• Enumerated - context elements transcends classes
• Guided tour
• Dynamic context elements inserted during
  navigation
• History, shopping basket

20
Navigational Context Schema
Contexts on story
context switch
No context switch
Index to its components
Indices
Set of nodes
21
InContext Classes

• Nodes enriched by InContext Classes
• Allow a node to look different and present
• different attributes (including anchors), and
• different methods (behaviour)
• when navigated within a particular context.

22
Specification of InContext
23
Nodes and Contexts
InContext Classes
24
Navigational Context Schema
Protected access
dynamic contexts
25
OOHDM Abstract Interface

• Perspectible objects (e.g. A picture, A city map
  ) defined in terms of interface classes
• Interface classes
• Aggregations of primitive classes (e.g. Text
  fields, buttons)
• Aggregations of interface classes
• Interface objects
• Map to navigational objects
• Interface behaviour
• Specify how to handle external and user generated
  events
• Specify how communication occurs between
  interface and navigation objects
• Separate navigational transformations and local
  interface transformations

26
Abstract Data Views
Inheritance in Abstract Data Views
Aggregation of Abstract Data View
27
Abstract Data Views
Alternatives, so not shown together
Active controls
- Implements the interface of the InContext Class
Theme -Implements navigation controls inside the
Navigational Context Paintings of a Theme
28
ADVs and real interface objects
29
OOHDM Implementation

• Maps objects to implementation objects
• A database server may contain the conceptual
  objects
• Navigational nodes could be views
• Contexts require state information and predicates
  over nodes
• Interface implemented using HTML, javascript,
  templates etc
• OOHDM-Web case tools

30
OOHDM vs RMM

• OOHDM requires a real understanding of OO
  modeling
• OOHDM emphasises navigational and abstract
  interface design
• OOHDM uses objects as a modelling construct and
  encourages reuse
• OOHDM uses general hypermedia design patterns for
  arbitrary application domains

31
General Architectural Patterns

• Decorator
• Observer

32
Navigation/Orientation Patterns

• Active Reference
• Provides a perceivable and permanent reference
  about the current status of navigation.
• Cycle
• The reader returns to a previously visited node
  and departs along a new path
• Link Destination Announcement
• Avoids unnecessary link firing by providing
  information about the
• destination.
• Counterpoint
• Two voices alternate, interleaving, giving the
  reader the option to either follow one or to jump
  from one to the other.

33
Interface Patterns

• Behavioral Grouping
• How to organize the different types of controls
  in the interface so the user can easily
  understand them?
• Information-Interaction Coupling
• How do we make clear what is the object affected
  by a control in a nodes interface?

34
Further Reading

• HDM Garzotto, Mainetti and Paolini. Hypermedia
  Application design A structured approach. In
  Designing User Interfaces for Hypermedia Springer
  Verlay (1995)
• RMM Isakowitz, Stohr and Balasubramanian RMM A
  methodology for Structured Hypermedia Design CACM
  vol 38, no 8 (Aug 1995)
• OOHDM Schwabe, Esmeraldo, Rossi, Lyardet
  Engineering Web Applications for Reuse in IEEE
  Multimedia vol 8 no 1 (Jan-Mar 2001) pdf
• Schwabe and Rossi An Object Oriented Approach to
  Web-Based Application Design in TAPOS pdf
• German and Cowan Towards a unified catalog of
  hypermedia design patterns in Proceedings of the
  33rd Hawaii International Conference on System
  Sciences 2000 pdf
• Perzel and Kane Title Usability Patterns for
  Applications on the World Wide Web in PloP 99
  Conference. pdf

35
Further Reading

• Bernsteins hypertext patterns
• http//www.eastgate.com/patterns/Print.html
• Hypermedia Design Patterns Repository
• http//www.designpattern.lu.unisi.ch/HypermediaHom
  ePage.htm
• Hypermedia Development Workshop Series
• http//www.eng.uts.edu.au/dbl/HypDev/
• General Web Resource Webmonkey
• http//hotwired.lycos.com/webmonkey/