1 chapter 21 hypertext, multimedia and the world-wide web hypertext, multimedia and the world-wide web • – text escapes linearity, words and the page • – navigating hyperspace • – how it all works • web content – static: unchanging pictures and text – dynamic: interaction and applications on the web understanding hypertext finding things web technology static: dynamic: understanding hypertext what is the hyper? rich content: graphics, audio, video, computation and interaction
20
Embed
hypertext, multimedia and the world-wide web - Human … · 2005-12-06 · hypertext, multimedia and the world-wide web hypertext, multimedia ... don’t just show things … do things
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
chapter 21
hypertext, multimediaand the world-wide web
hypertext, multimediaand the world-wide web
• understanding hypertext
– text escapes linearity, words and the page
• finding things
– navigating hyperspace
• web technology
– how it all works
• web content
– static: unchanging pictures and text
– dynamic: interaction and applications on the web
understanding hypertext
finding things
web technology
static:
dynamic:
understanding hypertext
what is the hyper?
rich content: graphics, audio, video,computation and interaction
2
Text
• imposes strict linear progression on thereader
• the author’s ideas of what is best
• often good :-)
… but not always!
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
page 1 page 2 page 3 page 4
this is textor is ithypertextonly linkscan tell
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
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
home
bookmark
external
link
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
back link
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 term also used for simple audio/video
3
animation
• adding motion to images
– for things that change in time
• digital faces – seconds tick past or warp into the next
• analogue face – hands sweep around the clock face
• live displays: e.g. current system load
– for showing status and progress
• flashing carat at text entry location
• busy cursors (hour-glass, clock, spinning disc)
• progress bars
animation (ctd)
– for education and training• let students see things happen … as well as being
interesting and entertaining images in their own right
– for data visualisation
• abrupt and smooth changes in multi-dimensional datavisualised using animated, coloured surfaces
• complex molecules and their interactions more easilyunderstood when they are rotated and viewed on thescreen
– for animated characters
• wizards and help
video and audio
• now 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
– memory OK … hand held MP3 players, TiVo etc.
– but download time needs care – tell users how big!
• very linear
– hard to add ‘links’ often best as small clips or
background
4
audio issues
• formats
– raw sound samples
• huge … used for mixing and editing
– MIDI
• just which notes played and when
– MP3
• uses psychoacoustics - how the ear hears
• issues
– annoying if unwanted
– even more annoying for others!
using animation and video
• potentially powerful tools– note the success of television and arcade games
• but …– how to harness the full possibilities of such media
– different from ‘standard’ interfaces
– this technology when we have much moreexperience.
• so …– need to learn from film makers, dramatic theory,
cartoonists, artists, writers
computation, intelligenceand interaction
• computers??don’t just show things … do things
• examples:– search – the HCI book web site
• not just exercises, table of contents … also search
– interaction
• embedded applications (e.g, puzzle square)
– adaption:• e-commerce sites suggest other things to buy
5
interacting in hypertextProfessor Alan’s puzzle square
@ http://www.hiraeth.com/alan/misc/game/game.html
user clicks arrowsto move squares
icons to reset
arrangement
hot links to
other puzzles
delivery technology
• on the computer
– help systems installed on hard disk with applications
– CD-ROM or DVD based hypermedia
• on the web
– really ubiquitous!
• in many countries, near universal internet access
– not just web pages!
• e.g. many applications have web-base documentation
• … and on the move …
delivery (ctd) … on the move
• 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
• context – who and where
– tourist guides, directed advertising
6
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
(e.g. technical manual for a photocopier)
– technical words linked to their definition in a glossary
– links between similar photocopiers
application areas (ctd)
• education– animation and graphics allow students to see things
happen
– sound adds atmosphere and means diagrams can belooked at while hearing explanation
– non-linear structure allows students to explore at
their own pace
– e-learning
• letting education out of the classroom!!
• e.g. eClass
eClass (formerly Classroom 2000)
an ordinary lecture?
slides, pen marks,
video are ‘captured’
... available laterthrough web interface
7
finding things
lost in hyperspacestructure and navigationhistory and bookmarks
indices, directories and search
lost in hyperspace
• non-linear structure– very powerful …
– but potentially confusing
• two aspects of lostness– 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!
designing structure
• ideas for structure– task analysis to for activities and processes
– existing paper or organisational structures
• going non-linear– paper and organisation single structure
– hypertext – multiple structures• problems with common material, inconsistencies etc.
• clarity of cross structure links v. important
• scent– do hot spots for links make it clear where they are
going to??
8
making navigation easier
• maps
– give an overview of the structure
– show current location – you are here!
• recommended routes
– guided tour or bus tour metaphor
– linear path through non-linear structure
• levels of access
– summary then progressive depth
• supporting printing!
– needs linearised content, links back to source
history, bookmarks, etc.
• 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 favourites for longer term revisiting
• deep links
– bookmarks and external links – into heart of site
– are pages self explanatory? what site? where in it?• e.g. breadcrumbs for context
• frames– difficult to bookmark, search and link to
– but some good reasons for use (see /e3/online/frames/)
indices, directories and search
• index
– often found ion help, documentation, … even books
– selective: not an exhaustive list of words used
• directories
– on web index would be huge! so hand chosen sites
• e.g. open directory project, Yahoo!
• 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
9
complex search
• too many pages for single word …
need to be more selective:
• Boolean search
– combine words with logic: e.g. ‘engine AND NOT car’
• link structure
– Google uses richness of in and out links to rank pages
• recommender systems
– use other people’s choices to guide other people