World Wide Web and Hypermedia CIS 577 Bruce R. Maxim UM-Dearborn 7/16/2015 1.

World Wide Web and Hypermedia

CIS 577

Bruce R. Maxim

UM-Dearborn

04/19/23 1

Based in part on Dix

04/19/23 2

Text

• imposes strict linear progression on the reader

• the author’s ideas of what is best• often good, but not always best!

this is textor is ithypertextonly linkscan tell




page 1 page 2 page 3 page 4


04/19/23 3

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





home

bookmark

external link





back link

04/19/23 4

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

04/19/23 5

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

04/19/23 6

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

04/19/23 7

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

background04/19/23 8

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

04/19/23 9

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 it’s different from ‘standard’ interfaces

• Need to learn from film makers, dramatic theory, cartoonists, artists, writers

04/19/23 10

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)

04/19/23 11

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

04/19/23 12

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

04/19/23 13

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

04/19/23 14

Hypertext Design Problems

• Project content inappropriate for hypertext• Poor hypertext design (e.g. too many links,

long chains, dull articles, inadequate overviews)

04/19/23 15

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!

04/19/23 16

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

04/19/23 17

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

04/19/23 18

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

04/19/23 19

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

04/19/23 20

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

04/19/23 21

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 people’s choices to guide other people

04/19/23 22

Complex Search - 2

• Being search engine friendly– use ‘Meta’ tags– relevant title– Keywords– description

• hard to index dynamically generated pages (the hidden web)

04/19/23 23

Hypertext Authoring Tool Functionality

• Import• Edit• Export• Print• Search

04/19/23 24

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

04/19/23 25

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

04/19/23 26

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

04/19/23 27

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

04/19/23 28

Introductory Article Styles

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

04/19/23 29

Web Site Organizational Styles

• Based originator's identity• Based on originator's goals

– sales– advertising– information– access– services– discussion or nurture community

04/19/23 30

Web Site Knowledge Structures

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

04/19/23 31

Web Action Types

• Formulation• Action• Results• Refinement

04/19/23 32

Web Interface Metaphors

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

04/19/23 33

Web Page Handles and Widgets

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

04/19/23 34

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 feel04/19/23 35

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!

04/19/23 36

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

04/19/23 37

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 quality=20

04/19/23 38

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

(i) pageloads

user’s machineweb server

movie plays

syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a



(ii) userwatches04/19/23 39

Essential Web Design Criteria

• Effectiveness – complete– organized presentation

• Affectiveness– captures user attention

• Navigational efficiency

04/19/23 40

First Generation Web Sites

• Content focused• Ignored flash• Very few links

04/19/23 41

Second Generation Web Sites

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

04/19/23 42

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

04/19/23 43

Fourth Generation Web Sites

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

engineering

04/19/23 44

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!

04/19/23 45

What happens where?

• Architectural design is about what happens where, this affects:– feedback

• seeing results of one’s own actions

– feedthrough• seeing effects of other people’s actions

– also affects complexity of implementation and hence maintenance

04/19/23 46

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

04/19/23 47

Technology

• client– applets , Flash, JavaScript & DHTML

• server– CGI scripts, Java servlets , JSP, ASP, PHP, etc,

• another machine– author’s machine, database server, proxy

• people– socio-technical solutions

04/19/23 48

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

04/19/23 49

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!

04/19/23 50

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, "<h1>Address List</h1>"query.MoveFirstWhile Not query.EOF Print #1, "<p>" & query("Name") & " ” & query("Address") query.MoveNextWend

Close #1query.Close04/19/23 51

Batch Generation of Web Pages

• pros: indexable, secure• cons: slower turnaround

(iii) server returnsgenerated

pages

(ii) pages copied to web server

via ftp

(i) pages generated off-line from

database

user’s machine web server third machine




generated pages

04/19/23 52

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 -> server script -> update data

• Issues– authentication and security– multiple transactions due to ‘back’ button– right pace/control – want human in loop or not?

04/19/23 53

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

04/19/23 54

User Understanding ofPresentation

DesignerUnderstandingof Users

Low High

Low No effectivecommunication

Relationship withwrong audience

High One-wayintelligence

Mutualunderstanding

04/19/23 55

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.

04/19/23 56

Web Site Purposes

• Entertainment• Enable information exchange• Information

– what– where– when– who– how– cost

04/19/23 57

Web Creator Roles

• Presenter (client)• Information steward• Designer

04/19/23 58

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)

04/19/23 59

Research and Idea Generation

• Define information for each group of expected users

• Statement of what web presentation is to do• List of information resources

04/19/23 60

Idea Generation Techniques

• Brainstorming• Interviews• Virtual value chain analysis

– business process analysis– value added benefits to customers

• Web research

04/19/23 61

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

04/19/23 62

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?

04/19/23 63

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

04/19/23 64

Chunk Tracking

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

04/19/23 65

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

04/19/23 66

Object Relationship Types

• General to specific• Isa• Associative

04/19/23 67

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

04/19/23 68

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

04/19/23 69

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.

04/19/23 70

Web Page Composition

• Layout• Typography• Color• Hyperlinks

04/19/23 71

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

04/19/23 72

Hyperlink Types - part 2

• Intersite – value added stuff when another site is

• complete• accurate• compatible with your site• appeals to audience• supports page goals

04/19/23 73

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.

04/19/23 74

World Wide Web and Hypermedia CIS 577 Bruce R. Maxim UM-Dearborn 7/16/2015 1.

Documents

Transcript of World Wide Web and Hypermedia CIS 577 Bruce R. Maxim UM-Dearborn 7/16/2015 1.