Transcript Hypertext

Hypertext, Multimedia,
and the WWW
Material from
Authors of Human Computer Interaction
Alan Dix, et al
Overview
 Hypertext allows documents to be linked in a
non-linear fashion.
 Multimedia incorporates: sound, images,
video, etc.
 WWW is a global hypermedia system.
 There are ways… to convey information
statically and dynamically.
 Applications of hypermedia
 Hypermedia design and its problems
Understanding Hypertext
 Traditional text is linear


nature of media (papyrus, friezes,
book, etc.)
humans experience time linearly
 Sometimes user wants own path
through text


tutorials usually linear
online documentation and help
systems, do not have to be
Understanding Hypertext
 In a book…


Table of contents and indices
Reader skips back and forth
 Hypertext gets around these limitations




Text structured as a mesh rather than a line
Incorporate other media --> Hypermedia
Link pages together
Example: On-line manual

terms are linked to definitions in glossary
$Rich Content
 More dynamic material




animations
video clips
audio clips
computer applications
Rich Content: Animations
 Uses

animated cursor



non-cursor process indicators


indicates process in progress
eg. watch, hourglass
eg. moving slider
show system state
 Shows changes in data sets or discontinuities
 Cartoon character guiding user through steps
Rich Content: Video and Audio
 Home PCs have



editing software
scanners
digital cameras
 Audio used for background music, sound effects
or voice over
 Formats: QuickTime and RealPlayer and
RealAudio, etc.
 Usually embedded in text or web page
 Graphics may be hyperlinks themselves
Rich Content: Audio and Video
 Problems
 Memory and bandwidth



compression algorithms
sound harder to compress
MP3 uses knowledge of human auditory system

Sound obtrusive

Designers don’t have enough experience with
moving pictures



television is passive
computer applications may be active
may apply drama theory
Rich Content: Computation,
Intelligence and Interaction
 Computer can do more than show things, it can
do things!



Search
Embedded games or apps
May interact with other apps
 Actively shapes the experience of the user
Delivery technology
 Hypermedia systems on CD-ROM


large capacity, access slower
e.g., Encarta
 DVD delivered material
 Web pages

e.g. Microsoft’s on-line help
 Mobile devices



PDAs, mobile phones, notebooks
Need hypermedia on the move (memory issues)
Resize on smaller screens
Applications of Hypermedia
 Rapid Prototyping
 Web pages, Macromedia Flash and Director,
and Hypercard used to design interfaces for
applications by providing prototypes
 Help and Documentation
 supports quick reference, full explanation - online
manuals, etc.,
 organizes information hierarchically
 supports browsing
Applications of Hypermedia
 Education and e-learning
 Computer-aided learning - student controlled
 distance learning
 augmented learning
 Collaboration and community
 Shared resources
 Yahoo! Groups
 E-Commerce
 on-line stores
Finding Things
 Recall Hypertext is non-linear



Can lose track
Get ‘lost in hyperspace’
Two elements contribute to lost feeling


Cognitive - related to content
Navigation and structure
Finding Things
 Cognitive - related to content


Problem: fragmented information
Solutions / Guidelines:




Write each page as if written in isolation
Put material within context
Make cross links
Have a small description and link to fuller one
Finding Things
 Navigation and structure

Problems



easy to lose track of where you are or have been
printout in linear format
Solutions / Guidelines:




Include links to home
Provide a map of the hypertext document
Weave site map into layout (sidebar)
Provide pdfs for printing and put URLs in footnotes
Finding Things
 More Solutions / Guidelines

Include History and back buttons


Use Bookmarks





20% of web browsing involves back up (most
frequently more than one page back)
long term revisiting
deep linking - bookmarks to non-home pages in web
sites --> design for this!
DON’T USE FRAMES!
Use Electronic Indices, Directories
Include Search
Web Technology and Issues
 Basics
 HTML - static web content
 XML - dynamic web content
 Browsers may require plug-ins
 Servers and Clients Issues
 Compatibility - Clients run different (maybe older)
browsers

Network Issues

Bandwidth - measure of the amount of information
that pass down a channel in a given time (56Kbs)

Latency - time from client to server to client
Web Technology and Issues
 More network issues

jitter - variability in latency

lossy - underlying internet protocols are lossy, i.e.,
they lose information

Higher level software, eg. TCP, detects and resends
Web Technology and Issues
 Web usability guidelines

Keep pages short


not for bandwidth, but because users won’t know
there is more
Provide rapid feedback

make interaction happen at client
Static Web Content : Content
 Most vital issue is the CONTENT!



People put things on web they shouldn’t
Information gets outdated
Attractive useless material is still useless

Content should be worth reading
Content should follow guidelines from Media
Theory as to not offend (see next slide)

Provide a paper copy in a different layout

Static Web Content: Text
 Fonts – Use fonts that work on different machines
 Styles


Use structures styles such as headings
Use cascading style sheets (CSS)


allow fine control
use carefully
 Color is important, but often abused



client machines - limited color palettes
color-blindness
emotional cultural reactions to color
Static Web Content: Text
 Text-placing options




Use justification/indentation for horizontal
positioning
Use tables for vertical positioning
Prevent long lines (layout tables with max widths)
Realize math equations still a problem
Static Web Content: Graphics
 Obtaining graphics



Web: archives of images, icons, backgrounds,
etc.
Paint and image manipulation applications
Scanners and digital cameras
 Using graphics




Use carefully
Take longer to download (takes 50x longer)
Browsers take advantage of caches
Don’t use complex backgrounds - offer little
Static Web Content: Graphics
 Some browsers turn off downloading images, so
use text alternatives
 Specify size of image in advance

so browser can layout text and leave spaces for
images to download after
 Use JPEG - lossy compression technique and
faster as a result
 Images can be ‘hot’, ie., be links

‘hot’ images not easily identified
Static Web Content: Icons
 Icons should represent functionality
 Put icons in groups, consistency is important
 Use ‘library’ of standard icons

already have associations
 Don’t use icons with no reason

under construction icon
Static Web Content
 Graphics and Color


limited palettes on older PCs and PDAs
Use standard 216 color web palette

reduce complex color images to approximations
 Movies and Sound


not all machines can play, so do not rely on
movies or sound to convey information
limitations on speed

streaming media helps
Dynamic Web Content
 Static web is good from usability standpoint


consistent and predictable - every time user comes
back to web page it is the same
…but it is boring
 Active web is here - need to design appropriately



“frames suck [Nielsen]”
Applets, timed refreshed pages, rollovers annoying
Are we interacting with computer system or
information?
Dynamic Web Content
 Four forms of Active Web
1.
Simplest forms


2.
3.
4.
movies, animated gifs, streaming audio
have least interaction
Actual content fixed, user changes presentation
Generation of pages from database content
Ability to update database information through
web
Dynamic Web Content
 Consider users view



What is changing?
Who is changing it?
How often is it changing?
 Consider technological view

Where is computation happening?

Impacts pace of interaction
 feedback and feedthrough
Dynamic Web Content: User View
 What changes?



Media stream - fundamental nature of medium
presentation or view
actual content
 By whom?



Automatic - by computer
site author
user
 How often?

Months? Days? While you watch?
Dynamic Web Content : Tech View
 Where are computations done?
 Client - java applets, Flash plug-ins, JavaScripts, etc.
 Server - CGI scripts (Perl), C, Unix, Java, ASP, PHP
 Another machine
 People
 What’s best ?


depends on designer’s expertise
depends on security
Dynamic Web Content
 Fixed content - local interaction and changing
views

Applets give client-end interaction, but not wellintegrated into page

Alternatives JavaScript, Flash, ActiveX

Uses



interaction widgets such as roll-over buttons
dancing histograms
with DHTML parts of page can move, change size
Dynamic Web Content
 Search

Not at client end


Can’t put all information on client’s machine
Don’t want users to have full privileges to
information

Submit forms to server where CGI programs
perform search and generate web pages to
return results to user

Underlying content does not change, variable
factor is user’s input
Dynamic Web Content
 Automatic Generation


Database generated web sites
Keep content and layout separate




Keep content updated
Make use of existing data sources
Use templates or layout descriptions
Provide security, because database server
needs to be protected
Dynamic Web Content
 Dynamic Content

Most ‘active’ web pages are those where content
reacts to and is updateable by user

Use Java-applet/JDBC method or CGI method
Examples: reserve seats at a theater, enter credit
card details



May require authentication
Back button shouldn’t perform another transaction
Summary
 There is a powerful non-linear quality to hypertext
 A poor structure can confuse users


“Lost in hyperspace”
Caused by incremental development of sites
 Now have multimedia in form of web pages


WWW – publish globally and cheaply
Also useful for prototypes
 Dynamic web content poses usability challenges

What is static and what is changing?
 Use guidelines in this lecture for assignment
Definitions
 Hypertext – links documents in a non-linear
fashion.
 Multimedia incorporates: sound, images,
video, etc.
 Hypermedia –has hypertext and incorporates
other media
 Rich Content - has dynamic material, such as
animations, video clips, audio clips, computer
applications