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