World Wide Web and Hypermedia

1
World Wide Web and Hypermedia

• CIS 376
• Bruce R. Maxim
• UM-Dearborn

2
Recognizing Potential Hypertext Projects

• A large body of information exists and is
  organized into several fragments
• Fragments are interrelated
• User only needs to access to small number of
  fragments at a time

3
Hypertext Design Problems

• Project content inappropriate for hypertext
• Poor hypertext design (e.g. too many links, long
  chains, dull articles, inadequate overviews)

4
Hypertext Authoring Tool Functionality

• Import
• Edit
• Export
• Print
• Search

5
Web Authoring Tools - part 1

• Full set of direct manipulation editing functions
• Link list management tools
• Link verification
• Range of display formatting
• Availability of search and replace
• Control of color
• Capability to switch between authoring and editing

6
Web Authoring Tools - part 2

• Availability of graphics and video embedding or
  editing tools
• Collaboration possible
• Data compression
• Security control
• Encryption
• Reliability
• Import and export of standard interchange formats

7
Hypertext Design - part 1

• Know users and their tasks
• Ensure meaningful structure comes first
• Multidisciplinary design team
• Respect chunking
• Show interrelationships within and between
  documents explicitly

8
Hypertext Design - part 2

• Be consistent in creating document names
• Work form master reference lists
• Ensure simplicity in traversal
• Design each screen carefully
• Require low user cognitive load

9
Introductory Article Styles

• Advanced Organizers
• Executive overview
• Top down (Table of Contents)
• Menu
• Search engine

10
Web Site Organizational Styles

• Based originator's identity
• Based on originator's goals interpreted by
  designer
• sales
• advertising
• information
• access
• services
• discussion or nurture community
• Number of pages or amount of accessible
  information

11
Web Site Knowledge Structures

• Unstructured lists
• Linear structures
• Arrays or tables
• Hierarchies or trees
• Multi-trees or faceted retrieval
• Networks

12
Web Action Types

• Formulation
• Action
• Results
• Refinement

13
Web Interface Metaphors

• File cabinet
• Books with chapters
• Encyclopedia with articles
• Television with channels
• Shopping mall with stores
• Museum with exhibits

14
Web Page Handles and Widgets

• Labels
• Icons
• Buttons
• Image maps
• Navigation handles on page borders

15
Web Design Challenges - Content

• Understandable
• Interesting and valuable
• Capable of converting web surfers into site users
• Consistent and engaging
• Skilled integration of text, graphics, audio,
  video, and information
• Easily navigated
• Unified in look and feel

16
Essential Web Design Criteria

• Effectiveness
• complete
• organized presentation
• Affectiveness
• captures user attention
• Navigational efficiency

17
First Generation Web Sites

• Content focused
• Ignored flash
• Very few links

18
Second Generation Web Sites

• Flashy features added for their own sake
• Lots of hyperlinks

19
Third Generation Web Sites

• Balances the 3 design components
• Demonstrated a deeper understanding of
• intended audience
• purpose of web presentation
• design challenges
• media opportunities
• information presented

20
Fourth Generation Web Sites

• Increased interactivity
• Providing live access to current content
• Multimedia
• Make use of smart links and knowledge engineering

21
Mutual Understandings Between Designers and Users

• Designer must execute a design that reflects user
• knowledge,
• capabilities
• information needs
• User must have an accurate perception of the
• web site purpose
• information being presented

22
(No Transcript)
23
Attracting Users

• Users form then initial impression of a web site
  within the first 7 seconds of access.
• While at a web site, users continuously evaluate
  their progress toward accomplishing their goals.

24
Web Site Purposes

• Entertainment
• Enable information exchange
• Information
• what
• where
• when
• who
• how
• cost

25
Web Creator Roles

• Presenter (client)
• Information steward
• Designer

26
Web Designer Skill Set

• Understand information (semantics)
• Translate information to structure
• Translate structure to web pages
• Have artistic sense
• Have capacity for language selection and use
• Be able to work with multimedia technology
• Be able to work with client/server technology
  (database, web access, security)

27
Research and Idea Generation

• Define information for each group of expected
  users
• Statement of what web presentation is to do
• List of information resources

28
Idea Generation Techniques

• Brainstorming
• Interviews
• Virtual value chain analysis
• business process analysis
• value added benefits to customers
• Web research

29
Defining Information Domain

• User-centered approach
• identify each user group and determine their
  information needs
• Information-centered approach
• each type of information is classified and then
  clustered according to potential user group needs

30
Important Analysis Questions

• What do potential users want to know about the
  company?
• What do users want to know about the people?
• What do users want to know about company
  business?
• How might users want to interact with our company?

31
Information Decomposition and Information
Structuring

• Decomposition - process of separating information
  into component objects or chunks
• Structuring - process of organizing the chunks
  into a knowledge architecture

32
Chunk Tracking

• Every chunk needs to be tracked somehow
• List or outline
• Group of index cards
• Database
• CASE tools

33
Information Structuring Guidelines

• Chunks organized into a directed graph
• Add cardinality information to each graph node
• Add volatility information to each graph node
• Consider redrawing the diagram as a summary
  diagram
• Create object relationship matrix
• Examine matrix for critical objects
• Revise summary diagram as needed

34
Object Relationship Types

• General to specific
• Isa
• Associative

35
Web Design Process

• Establish content and location of each
  information object using text analysis and
  composition
• Identify and implement hyperlink targets
• Identify and implement multimedia options
• Test and revise

36

• Text analysis
• develop best prose statements to convey intended
  message for each information object
• Text composition
• all objects are organized, rearranged, and
  regrouped until best web site placement is found
  (relies on storyboarding techniques)

37
Storyboarding

• Once a complete set of web pages is storyboarded
  the storyboard are arranged in predicted thread
  order.
• Each thread needs to be analyzed for gaps and
  sequencing problems.
• Testing of final threads is done by walking
  through each thread using the appropriate user
  viewpoint.

38
Web Page Composition

• Layout
• Typography
• Color
• Hyperlinks

39
Hyperlink Types - part 1

• Intra-page
• used assist access to long complex pages
• Intranet
• used to create threads for users
• show business relationships
• breakup long web pages

40
Hyperlink Types - part 2

• Intersite
• value added stuff when another site is
• complete
• accurate
• compatible with your site
• appeals to audience
• supports page goals

41
Linkage Evaluation

• Done by building a linkage diagram and examining
  ratios of actual links to total possible for each
  page.
• Ratio of actual links to total possible links
  should be 40-60.
• 7 plus or minus 2 is another good rule of thumb
  for links from given page.