World Wide Web and Hypermedia

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

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

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

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

5. Web Authoring Tools - part 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 • Capability to switch between authoring and editing

6. Web Authoring Tools - part 2 • Availability of graphics and video embedding or editing tools • Collaboration possible • Data compression • Security control • Encryption • Reliability • Import and export of standard interchange formats

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

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

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

10. Web Site Organizational Styles • Based originator's identity • Based on originator's goals interpreted by designer • sales • advertising • information • access • services • discussion or nurture community • Number of pages or amount of accessible information

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

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

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

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

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

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

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

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

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

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

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

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

24. Web Site Purposes • Entertainment • Enable information exchange • Information • what • where • when • who • how • cost

25. Web Creator Roles • Presenter (client) • Information steward • Designer

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

27. Research and Idea Generation • Define information for each group of expected users • Statement of what web presentation is to do • List of information resources

28. Idea Generation Techniques • Brainstorming • Interviews • Virtual value chain analysis • business process analysis • value added benefits to customers • Web research

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

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

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

32. Chunk Tracking Every chunk needs to be tracked somehow • List or outline • Group of index cards • Database • CASE tools

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

34. Object Relationship Types • General to specific • Isa • Associative

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

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

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

38. Web Page Composition • Layout • Typography • Color • Hyperlinks

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

40. Hyperlink Types - part 2 • Intersite • value added stuff when another site is • complete • accurate • compatible with your site • appeals to audience • supports page goals

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