World Wide Web and Hypermedia

1
World Wide Web and Hypermedia

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

2
Based in part on Dix
3
Text

• imposes strict linear progression on the reader
• the authors ideas of what is best
• often good, but not always best!

4
Hypertext - Not Just Linear

• Non-linear structure
• blocks of text (pages)
• links between pages create a mesh or network
• users follow their own path through information

5
Hypermedia Not Just Text

• Hypertext systems additional media
• illustrations, photographs, video and sound
• Links/hotspots may be in media
• areas of pictures
• times and locations in video
• Also called multimedia
• but MM is also used for simple audio/video

6
Animation - 1

• For things that change in time
• digital faces seconds tick past
• analogue face hands sweep around clock face
• live displays e.g. current system load
• Showing status and progress
• flashing carat at text entry location
• busy cursors (hour-glass, clock, spinning disc)
• progress bars

7
Animation - 2

• Education and training
• let students see things happen
• show interesting and entertaining images
• Data visualisation
• abrupt and smooth changes in multi-dimensional
  data visualised using animated, coloured surfaces
  
• complex molecules and their interactions more
  easily understood
• for animated characters and help wizards

8
Video and Audio

• Easy to author
• tools to edit sound video and burn CDs DVDs
• Easy to embed in web pages
• standard formats (QuickTime, MP3)
• Still big but getting manageable
• download time needs care tell users how big!
• Very linear
• hard to add links often best as small clips or
  background

9
Audio Issues

• Formats
• Raw sound samples (used for mixing and editing)
• MIDI (just which notes played and when)
• MP3 (uses psychoacoustics - how the ear hears)
• Issues
• Annoying if audio is not unwanted
• Annoying to nearby users

10
Using Animation and Video

• Potentially powerful tools
• television and arcade games
• Need to figure out
• how to harness the full possibilities of such
  media
• How its different from standard interfaces
• Need to learn from film makers, dramatic theory,
  cartoonists, artists, writers

11
Delivery Technology

• On the computer
• help systems installed on hard disk with
  applications
• CD-ROM or DVD based hypermedia
• On the web
• really ubiquitous (many countries)
• not just web pages (web-based app docs)

12
Mobile Delivery Technology

• Platforms
• mobile phones, PDAs, laptop computers
• Delivery
• CD-ROM or DVD (like desktop)
• cached content (e.g. AvantGo)
• WiFi access points or mobile phone networks
• WAP for mobile phone, tiny web-like pages

13
Application Areas

• Rapid prototyping
• create live storyboards
• mock-up interaction using links
• Help and Documentation
• allows hierarchical contents, keyword search or
  browsing
• just in time learning
• what you want when you want it
• technical words linked to their definition in a
  glossary
• links between similar objects

14
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

15
Hypertext Design Problems

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

16
Lost in Hyperspace

• Non-linear structure
• very powerful
• but potentially confusing
• Two aspects of being lost
• cognition and content
• fragmentary information no integration
  confusion
• navigation and structure
• hyperlinks move across structure where am I?
• No easy solutions
• but good design helps!

17
Designing Structure

• Ideas for structure
• task analysis to for activities and processes
• existing paper or organisational structures
• Going non-linear
• paper and organization single structure
• hypertext multiple structures
• problems with common material, inconsistencies
  etc.
• clarity of cross structure links versus
  importantance
• Scent
• do link markers make it clear where they go to??

18
Making Navigation Easier

• Maps
• overview of structure and mark current location
• Recommended routes
• guided tour or bus tour metaphor
• linear path through non-linear structure
• Levels of access
• summary then progressive depth
• Suppor printing!
• needs linearized content

19
History and Bookmarks - 1

• Revisiting
• hub and spoke access click-back-click-back
• lots of revisiting of pages
• back is 30 of all browser navigation
• but multi-step back and history used less
• bookmarks and favorites for longer term revisiting

20
History and Bookmarks - 2

• Deep links
• bookmarks and external links into heart of site
• are pages self explanatory?
• what site?
• where in it?
• breadcrumbs for context
• Frames
• difficult to bookmark and search

21
Indices, Directories and Search

• Index
• often found in help, documentation, books
• selective not an exhaustive list of words used
• Directories
• On-line web index would be huge!
• Web search engines
• crawl the web following links from page to page
• build full word index (but ignore common stop
  words)
• looks up in index when you enter keywords to find
  pages

22
Complex Search - 1

• Too many pages for single word search
• Boolean search
• combine words with logic e.g. engine AND NOT
  car
• Link structure
• Google uses in and out links to rank pages
• Recommender systems
• use other peoples choices to guide other people

23
Complex Search - 2

• Being search engine friendly
• use Meta tags
• relevant title
• Keywords
• description
• hard to index dynamically generated pages (the
  hidden web)

24
Hypertext Authoring Tool Functionality

• Import
• Edit
• Export
• Print
• Search

25
Web Authoring Tools - 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
• Able to switch between authoring and editing

26
Web Authoring Tools - 2

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

27
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

28
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

29
Introductory Article Styles

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

30
Web Site Organizational Styles

• Based originator's identity
• Based on originator's goals
• sales
• advertising
• information
• access
• services
• discussion or nurture community

31
Web Site Knowledge Structures

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

32
Web Action Types

• Formulation
• Action
• Results
• Refinement

33
Web Interface Metaphors

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

34
Web Page Handles and Widgets

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

35
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

36
The Message and the Medium

• content is king
• the dot.com catch phrase (but widely ignored)
• the message content should be
• appropriate to the audience, timely, reliable ,
  .
• generally worth reading !
• the medium page and site design
• good design essential to attract readers
• bad design may mean good material never seen
• printable!

37
Text

• Text style
• generic styles universal serif, sans serif,
  fixed, bold, italic
• specific fonts too, but vary between platforms
• cascading style sheets (CSS) for fine
  control(beware older browsers and fixed font
  sizes)
• color often abused!
• Mathematics needs special fonts and layout

38
Graphics

• formats
• JPEG for photos
• higher compression but lossy
• get artefacts
• GIF for sharp edges
• lossless compression
• PNG supported by current web browsers
• and action
• animated gifs for simple animations
• image maps for images you can click on

JPEG quality20
39
Movies and Sound

• problems
• size and download like graphics but worse!
• may need special plug-ins
• audio not so bad, some compact formats (MIDI)
• streaming video
• play while downloading
• can be used for broadcast radio or TV

40
Essential Web Design Criteria

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

41
First Generation Web Sites

• Content focused
• Ignored flash
• Very few links

42
Second Generation Web Sites

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

43
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

44
Fourth Generation Web Sites

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

45
Active Web

• Early days of the web
• static pages mostly text
• some gateways (ftp, gopher)
• usability one simple model
• dynamic content
• what is the model/metaphor ???
• passive pages or active interface
• each leads to different user understanding
• no easy answers!

46
What happens where?

• Architectural design is about what happens where,
  this affects
• feedback
• seeing results of ones own actions
• feedthrough
• seeing effects of other peoples actions
• also affects complexity of implementation and
  hence maintenance

47
User View

• What changes?
• media stream, presentation, content
• By whom?
• automatic, site author, user
• other users - feedthrough
• How often?
• pace of change days, months, seconds

48
Technology

• client
• applets , Flash, JavaScript DHTML
• server
• CGI scripts, Java servlets , JSP, ASP, PHP, etc,
• another machine
• authors machine, database server, proxy
• people
• socio-technical solutions

49
Security

• For computation
• code and data at same place!
• Problems
• data - needs to be secure
• web-server - least secure machine
• client machine even wors
• Networks worst of all

50
Automatic Generation

• Dilemma
• hand crafting (leads to web stasis)
• so need database driven sites
• Options
• client-end applet or Flash access remote DB
• server-end CGI driven by web forms (limited UI)
• hybrid solutions
• CGI generated pages can contain JavaScript etc.
• JavaScript can write web pages on the fly!

51
Batch Generation

• For slow varying data
• update local database
• periodically generate pages and upload
• Technologies
• C, Java, Python, Visual Basic

Set db openDatabase("C\test.mdb") sql
"select Name, Address from Personnel" Set query
db.OpenRecordset(sql) Open "out.html" For
Output As 1 Print 1, "lth1gtAddress
Listlt/h1gt" query.MoveFirst While Not query.EOF
Print 1, "ltpgt" query("Name") "
query("Address") query.MoveNext Wend Close
1 query.Close
52
Batch Generation of Web Pages

• pros indexable, secure
• cons slower turnaround

53
Dynamic Content

• Really active web pages
• data updated as well as presented on the web
• Presentation
• any of the previous means CGI, applet-JDBC
• Update
• web form/interface -gt server script -gt update
  data
• Issues
• authentication and security
• multiple transactions due to back button
• right pace/control want human in loop or not?

54
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

55
(No Transcript)
56
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.

57
Web Site Purposes

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

58
Web Creator Roles

• Presenter (client)
• Information steward
• Designer

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

60
Research and Idea Generation

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

61
Idea Generation Techniques

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

62
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

63
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?

64
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

65
Chunk Tracking

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

66
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

67
Object Relationship Types

• General to specific
• Isa
• Associative

68
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

69

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

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

71
Web Page Composition

• Layout
• Typography
• Color
• Hyperlinks

72
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

73
Hyperlink Types - part 2

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

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