Hypermedia Design Methods

1
Hypermedia Design Methods

• RMM, OOHDM

2
Design Space
usability
evaluation
design
model
3
Hypermedia development
Ad hoc development
Engineering development
Authoring
Hypermedia design
Implementation
4
Screen Based development

• Front Page
• Dream Weaver
• Emphasis on what the page looks like
• De-emphasis on getting the structure right

5
Design Methodologies Models

• Information Based not Screen based
• Engineering for Reuse
• EORM
• HDM Hypermedia Design Methodology
• RMM Relationship Management Methodology
• OOHDM Object Oriented Hypermedia Design Method

6
RMM Relationship Management Methodology

• RMM developed at New York Universitys Stern
  School of Business
• A methodology for the structured design of
  hypermedia systems
• A design model and a set of specified design
  steps
• Based on a combination of entity-relationship
  diagrams, and various concepts adapted from HDM
• RMM doesnt address the entire development
  life-cycle
• Does address the critical stage of design
• http//rmm-java.stern.nyu.edu/rmm/

7
Usefulness of RMM Approach
8
RMM Design Model

• Relationship Management Data Model (RMDM)
• Used to represent, using suitable abstractions,
  the design of a hypermedia application
• Based heavily on HDM
• Design model provides a common notation and a
  basis for comparison / analysis of a design
• Uses
• ER model for the domain concepts
• Slice model for information presentation
  grouping
• Access model for navigation

9
RMM design methodology
Feasibility
Information / Navigation requirements analysis
Hardware selection
ER Design
ER Diagram
Entity Design
ER Diagram
Navigation Design
Conversion protocol design
User interface screen design
Run time behaviour design
RM Diagram or Application Diagram
Construction
Testing and Evaluation
10

• The relevant entities and relationships in the
  application domain
• If the application is driven by a database the ER
  diagram might already be available
• Links between objects are explicit these will
  form the users navigation paths
• If a navigational path across entities is
  required a corresponding relationship must appear
  in the ER diagram

11
RMDM ER Primitives
12
ER example
Has_Co- requisite
Teach
Courses
Programs
Faculty
Has_Pre-Requisite
Taught_ by
Has_type_group
Consists_of
Publish
Publ_by
Are_part_of
Consists_of
Typical Groups
Has_conc
Publications
Course Groups
Concentrations
hasgroup
13
M-Slices

• Determine how the information in the chosen
  entities will be
• Presented to users
• Accessed by users
• m-Slices gt presentation units gt views
• Split entities into meaningful slices and
  organise these into a hypertext network
• Each slice groups one or more attributes of an
  entity
• Each m-slice groups attributes of collections of
  entities
• m-slices model what information is to be part of
  a presentation unit not how this information will
  actually be presented

14
Slices
Video (Faculty)

• Slice view on entity
• Dividing an entity into slices
• A slice will appear as a whole to the user
• ? Coherence and conciseness essential
• Choose one slice to be the head the default to
  anchor links coming into the entity

General
Bio (Faculty)
Video Clip
Biography
Expertise (Faculty)
Expertise (Faculty)
Research Area
15
Links between slices

• Interconnecting slices
• Labelling links
• Structural links navigation between slices
  via uni and bi directional links of the same
  entity
• Traversal of associative link information
  context changes -gt global coherence or global
  navigation
• Traversal of structural link information
  context remains with same entity -gt local
  coherence or local navigation

Video (Faculty)
General
Bio (Faculty)
Video Clip
Biography
Expertise (Faculty)
Expertise (Faculty)
Research Area
16
M Slices

• Many web pages contain a collection of
  information from assorted "entities".
• m-Slices allow the modelling of presentation
  units which incorporate information from a
  collection of entities
• m-Slices can be nested

17
Web page m slice over collection of entities
18
ER model
Issue
Has_Keyword
last name
First name
Middle initial
Keyword
Contributor
Contributes_to
Has_Keyword
Is_author_of
Article
Bib_citation
19
M slice diagram
20
ER Design
Entity Design
Navigation Design

• Design of the structures supporting navigation
• Each relationship appearing in the E-R diagram
  is analysed to determine whether it is
  appropriate
• If so it is replaced by one (or more) RMDM access
  primitives
• High level access structures group together items
  of interest
• menu-like access to the various material
• m-slice idea
• Designers have to identify the components and the
  way in which they are most likely to be accessed
  means that an understanding of the users and
  their context is typically quite important.
• Individual hard-coded links prohibited

21
(Original) RMDM Access primitives
Specify access between slices of an entity
Provides menu-like mechanism supporting access to
other parts of the application (navigation
maps) M-slices replace this
Each have logical predicates specifying which
entities participate
22
RMDM Access primitives
Only entity instances of faculty whose rank
attribute is associate professor participate in
the guided tour
Conditional index of same entity instances
Conditional index AND guided tour of same entity
instances
23
RMDMdiagram
24
Replace ER relationship by access structure
25
High level access structures
Main Menu
Faculty
Courses
By name
Faculty Submenu
By rank
Courses
Faculty
26
RMDM Access primitives

• Experience has highlighted several problems.
• Unable to model certain types of structures
• presentation units where information from
  multiple entities is combined e.g. previous web
  page
• Solution -gt m-slices
• Encourages explicitly top-down approach which
  isnt always desirable
• Resource based reuse
• Solution -gt Application diagrams

27
RMDM diagram
Home page
this site
Issue
issue
Keyword
Contributor
Article
28
Applica-tion Diagram
29
Merging entity and navigation steps

• Bottom up
• Designer initially focuses on each entity and
  then on the more general access mechanisms
• Top down
• Designer focuses first on the general structures
  during the slice design
• Converts these into lower-level presentation
  units
• In practice its iterative top-down and bottom-up
• Designer have to identify the components and the
  way they are most likely to be accessed
• Understand user and user context.

30
RMM design methodology
Feasibility
Information / Navigation requirements analysis
Hardware selection
ER Design
Entity Design
Navigation Design
Conversion protocol design
User interface screen design
Run time behaviour design
Construction
Testing and Evaluation
31
Conversion and Interface

• Step 4 Conversion Protocol Design
• Develop a set of conversion rules
• Govern how to transform each element of the RMDM
  diagram into an appropriate object in the
  implementation environment
• Focuses on structural transformation
• Step 5 User Interface Design
• Each object in the final RMDM diagram is used as
  the basis for the design of suitable interface
  components
• Considers actual presentation - look-and-feel
  look of anchors, button layouts, positioning of
  video and images, etc

32
Final Steps

• Step 6 Run-time Behaviour Design
• Consider the functionality which supports the
  run-time behaviour. Includes
• history lists
• link traversal
• possible inclusion of search engines
• dynamically generation vs static generation of
  pages etc.
• Step 7 Construction and Testing
• Application is actually constructed and evaluated

33
RM-CASE

• RM-CASE supports various contexts equating to
  the stages of development
• Supports "hyperbase population and simulation
• Allows quick prototyping and evaluation
• Supports a very iterative approach to development
  
• Improves traceability within the development
  process

34
Limitations and Strengths

• Strengths
• Relational model is well understood and supported
  
• Is not tied to a specific implementation
• Hypermedia model relates well to domain

• Weaknesses
• Restricted to a specific class of applications
• Focuses on design and implementation phases of
  hypermedia product lifecycle
• Limited expressiveness (especially compared to
  OOHDM)

35
RMDM Remarks

• Effective Navigation and Browsing
• Cognitive Management during Browsing
• Information Contextualisation
• Link and Content Validity
• Information Structure
• Management of different media
• Application maintenance
• Reuse
• Supporting the full life cycle and process
• Cognitive Management during productivity

36
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

37
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/