Title: World Wide Web and Hypermedia
1World Wide Web and Hypermedia
- CIS 577
- Bruce R. Maxim
- UM-Dearborn
2Based in part on Dix
3Text
- imposes strict linear progression on the reader
- the authors ideas of what is best
- often good, but not always best!
4Hypertext - 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
5Hypermedia 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
6Animation - 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
7Animation - 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
8Video 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
9Audio 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
10Using 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
11Delivery 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)
12Mobile 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
13Application 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
14Recognizing 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
15Hypertext Design Problems
- Project content inappropriate for hypertext
- Poor hypertext design (e.g. too many links, long
chains, dull articles, inadequate overviews)
16Lost 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!
17Designing 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??
18Making 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
19History 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
20History 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
21Indices, 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
22Complex 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
23Complex Search - 2
- Being search engine friendly
- use Meta tags
- relevant title
- Keywords
- description
- hard to index dynamically generated pages (the
hidden web)
24Hypertext Authoring Tool Functionality
- Import
- Edit
- Export
- Print
- Search
25Web 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
26Web 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
27Hypertext 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
28Hypertext 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
29Introductory Article Styles
- Advanced Organizers
- Executive overview
- Top down (Table of Contents)
- Menu
- Search engine
30Web Site Organizational Styles
- Based originator's identity
- Based on originator's goals
- sales
- advertising
- information
- access
- services
- discussion or nurture community
31Web Site Knowledge Structures
- Unstructured lists
- Linear structures
- Arrays or tables
- Hierarchies or trees
- Multi-trees or faceted retrieval
- Networks
32Web Action Types
- Formulation
- Action
- Results
- Refinement
33Web Interface Metaphors
- File cabinet
- Books with chapters
- Encyclopedia with articles
- Television with channels
- Shopping mall with stores
- Museum with exhibits
34Web Page Handles and Widgets
- Labels
- Icons
- Buttons
- Image maps
- Navigation handles on page borders
35Web 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
36The 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!
37Text
- 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
38Graphics
- 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
39Movies 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
40Essential Web Design Criteria
- Effectiveness
- complete
- organized presentation
- Affectiveness
- captures user attention
- Navigational efficiency
41First Generation Web Sites
- Content focused
- Ignored flash
- Very few links
42Second Generation Web Sites
- Flashy features added for their own sake
- Lots of hyperlinks
43Third 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
44Fourth Generation Web Sites
- Increased interactivity
- Providing live access to current content
- Multimedia
- Make use of smart links and knowledge engineering
45Active 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!
46What 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
47User View
- What changes?
- media stream, presentation, content
- By whom?
- automatic, site author, user
- other users - feedthrough
- How often?
- pace of change days, months, seconds
48Technology
- 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
49Security
- 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
50Automatic 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!
51Batch 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
52Batch Generation of Web Pages
- pros indexable, secure
- cons slower turnaround
53Dynamic 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?
54Mutual 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)
56Attracting 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.
57Web Site Purposes
- Entertainment
- Enable information exchange
- Information
- what
- where
- when
- who
- how
- cost
58Web Creator Roles
- Presenter (client)
- Information steward
- Designer
59Web 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)
60Research and Idea Generation
- Define information for each group of expected
users - Statement of what web presentation is to do
- List of information resources
61Idea Generation Techniques
- Brainstorming
- Interviews
- Virtual value chain analysis
- business process analysis
- value added benefits to customers
- Web research
62Defining 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
63Important 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?
64Information Decomposition and Information
Structuring
- Decomposition - process of separating information
into component objects or chunks - Structuring - process of organizing the chunks
into a knowledge architecture
65Chunk Tracking
- Every chunk needs to be tracked somehow
- List or outline
- Group of index cards
- Database
- CASE tools
66Information 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
67Object Relationship Types
- General to specific
- Isa
- Associative
68Web 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)
70Storyboarding
- 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.
71Web Page Composition
- Layout
- Typography
- Color
- Hyperlinks
72Hyperlink 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
73Hyperlink Types - part 2
- Intersite
- value added stuff when another site is
- complete
- accurate
- compatible with your site
- appeals to audience
- supports page goals
74Linkage 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.