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

2. Based in part on Dix 7/16/20152

3. Text imposes strict linear progression on the reader the author’s ideas of what is best often good, but not always best! 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 1page 2page 3page 4 this is text or is it hypertext only links can tell 7/16/20153

4. 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 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 home bookmar k external link 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 back link 7/16/20154

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 7/16/20155

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/16/20156

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 7/16/20157

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 7/16/20158

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 7/16/20159

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 7/16/201510

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) 7/16/201511

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 7/16/201512

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 7/16/201513

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 7/16/201514

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

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! 7/16/201516

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?? 7/16/201517

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 7/16/201518

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 7/16/201519

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 7/16/201520

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 7/16/201521

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 7/16/201522

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

24. Hypertext Authoring Tool Functionality Import Edit Export Print Search 7/16/201524

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 7/16/201525

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 7/16/201526

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 7/16/201527

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 7/16/201528

29. Introductory Article Styles Advanced Organizers Executive overview Top down (Table of Contents) Menu Search engine 7/16/201529

30. Web Site Organizational Styles Based originator's identity Based on originator's goals –sales –advertising –information –access –services –discussion or nurture community 7/16/201530

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

32. Web Action Types Formulation Action Results Refinement 7/16/201532

33. Web Interface Metaphors File cabinet Books with chapters Encyclopedia with articles Television with channels Shopping mall with stores Museum with exhibits 7/16/201533

34. Web Page Handles and Widgets Labels Icons Buttons Image maps Navigation handles on page borders 7/16/201534

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 7/16/201535

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! 7/16/201536

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 7/16/201537

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 7/16/201538

39. 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) page loads user’s machine web server movie plays 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 (ii) user watches 7/16/201539

40. Essential Web Design Criteria Effectiveness –complete –organized presentation Affectiveness –captures user attention Navigational efficiency 7/16/201540

41. First Generation Web Sites Content focused Ignored flash Very few links 7/16/201541

42. Second Generation Web Sites Flashy features added for their own sake Lots of hyperlinks 7/16/201542

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 7/16/201543

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

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! 7/16/201545

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 7/16/201546

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 7/16/201547

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 7/16/201548

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 7/16/201549

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! 7/16/201550

51. 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, " Address List " query.MoveFirst While Not query.EOF Print #1, " " & query("Name") & " ” & query("Address") query.MoveNext Wend Close #1 query.Close 7/16/201551

52. Batch Generation of Web Pages pros: indexable, secure cons: slower turnaround (iii) server returns generated pages (ii) pages copied to web server via ftp (i) pages generated off-line from database user’s machine web serverthird 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 generated pages 7/16/201552

53. 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? 7/16/201553

54. 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 7/16/201554

55. 7/16/201555

56. 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. 7/16/201556

57. Web Site Purposes Entertainment Enable information exchange Information –what –where –when –who –how –cost 7/16/201557

58. Web Creator Roles Presenter (client) Information steward Designer 7/16/201558

59. 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) 7/16/201559

60. Research and Idea Generation Define information for each group of expected users Statement of what web presentation is to do List of information resources 7/16/201560

61. Idea Generation Techniques Brainstorming Interviews Virtual value chain analysis –business process analysis –value added benefits to customers Web research 7/16/201561

62. 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 7/16/201562

63. 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? 7/16/201563

64. 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 7/16/201564

65. Chunk Tracking Every chunk needs to be tracked somehow –List or outline –Group of index cards –Database –CASE tools 7/16/201565

66. 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 7/16/201566

67. Object Relationship Types General to specific Isa Associative 7/16/201567

68. 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 7/16/201568

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) 7/16/201569

70. 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. 7/16/201570

71. Web Page Composition Layout Typography Color Hyperlinks 7/16/201571

72. 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 7/16/201572

73. Hyperlink Types - part 2 Intersite –value added stuff when another site is complete accurate compatible with your site appeals to audience supports page goals 7/16/201573

74. 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. 7/16/201574