World Wide Web and Hypermedia

1. World Wide Web and Hypermedia CIS 577 Bruce R. Maxim UM-Dearborn

2. Based in part on Dix

3. this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell page 1 page 2 page 3 page 4 this is text or is it hypertext only links can tell Text • imposes strict linear progression on the reader • the author’s ideas of what is best • often good, but not always best!

4. this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell this is text or is it hypertext only links can tell bookmark home back link external link 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

5. 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

6. 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

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

8. 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 background

9. 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

10. 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

11. 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)

12. 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

13. 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

14. 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

15. Hypertext Design Problems • Project content inappropriate for hypertext • Poor hypertext design (e.g. too many links, long chains, dull articles, inadequate overviews)

16. 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!

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

18. 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

19. 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

20. 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

21. 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

22. 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

23. Complex Search - 2 • Being search engine friendly • use ‘Meta’ tags • relevant title • Keywords • description • hard to index dynamically generated pages (the hidden web)

24. Hypertext Authoring Tool Functionality • Import • Edit • Export • Print • Search

25. 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

26. 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

27. 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

28. 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

29. Introductory Article Styles • Advanced Organizers • Executive overview • Top down (Table of Contents) • Menu • Search engine

30. Web Site Organizational Styles • Based originator's identity • Based on originator's goals • sales • advertising • information • access • services • discussion or nurture community

31. Web Site Knowledge Structures • Unstructured lists • Linear structures • Arrays or tables • Hierarchies or trees • Multi-trees or faceted retrieval • Networks

32. Web Action Types • Formulation • Action • Results • Refinement

33. Web Interface Metaphors • File cabinet • Books with chapters • Encyclopedia with articles • Television with channels • Shopping mall with stores • Museum with exhibits

34. Web Page Handles and Widgets • Labels • Icons • Buttons • Image maps • Navigation handles on page borders

35. 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 feel

36. 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!

37. 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

38. 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

39. web server user’s machine syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a movie plays (i) page loads (ii) user watches 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

40. Essential Web Design Criteria • Effectiveness • complete • organized presentation • Affectiveness • captures user attention • Navigational efficiency

41. First Generation Web Sites • Content focused • Ignored flash • Very few links

42. Second Generation Web Sites • Flashy features added for their own sake • Lots of hyperlinks

43. 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

44. Fourth Generation Web Sites • Increased interactivity • Providing live access to current content • Multimedia • Make use of smart links and knowledge engineering

45. 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!

46. 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

47. 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

48. 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

49. 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

50. 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!