Next-Generation Web Design: Principles, Models, and Audience-Centric Approaches

1. Next-Generation Web Design • Ian Graham • UofT http://www.utoronto.ca/ian/ • Groveware http://www.groveware.com/

2. Theoretical Understanding Hypermedia Design models Design principles Practical Design goals/function Audience Design templates Management tools Administrative structure Basic Issues

3. Third-Generation Design • Not much different from second • Principles and Practices for Large Sites • Design issues and approaches • Maintenance • Administrative structures and logistics • Planning

4. Relation to Application Design • Very Similar in Approach • Focus here is on largely static content • Management tools are different • (may not be any) • Usually separate from Web application • Interfaces simpler, less function-driven • Importance of navigation, clear design is the same

5. Understanding Hypermedia • The Web as Hypermedia • The Web is a simple form of hypermedia • Simpler because the technology is simpler • More complex because of the interrelationships possible with hyperlinks • Essential Features • Mix of disparate media • Nonlinear exploration by viewers

6. Web Design Models • Linear • Tree-Like • Dynamic StructureUse different approaches where appropriate. They can be mixed together on the same site.

7. Linear Hypermedia • Markup enforces linear structure (examp1) Table of Contents next …. prev

8. Linear Hypermedia • Appropriate for: • “Naturally” linear content (converted book, documentation, lengthy content) • Advantages • Simple navigation, easy to understand • Disadvantages • Limited navigational flexibility,inappropriate for more complex content

9. Tree-Like Content • For hierarchically-structured content • Markup, page structure defines the hierarchy • Web site with subjectareas • Web site as a catalog, or index • acts as a “drill-down” database interface

10. Tree-Like Content H

11. Tree-Like Content • Some examples(examp2, examp2a, examp3 • Design issues • Need extra navigational tools for the user • Design must distinguish location, place within the collection • Need to carefully design hierarchy according to desired functions

12. Tree-like: Design Issues • Common design for all documents • Distinguishing design features for different places in the hierarchy • Consistent navigation • model • tools • placement

13. Dynamic Structure • Documents generated dynamically, from a document database. • Customized content, based on user preferences • Content automatically updated as new content is added. • In principle, allows for content structured using complex database queries.

14. Dynamic Structure: Issues • Cost • Need sophisticated backend databases • Need structurally marked-up data (SGML, XML) • Complex programming to generate content • Design • Complex design for navigation, indexing

15. Basic Issues • Theoretical • Understanding Hypermedia • Design models • Design principles • Practical • Design goals/function • Audience • Design templates, issues • Management tools • Administrative structure

16. Practical Site Design • Site Goals • What functions/services to provide? • What audiences do I want to serve? • Above two items are intimately related • One or multiple sites? • Sites (or site areas) devoted to audience abilities and/or interests

17. Audience -- Who are they? • General public/casual visitors • Simple navigation (unfamiliar with site structure) • Easy-to-find resources • Main resources “on top” • Easy to use tools (search tools, navigation, etc)

18. Audience -- Who are they? • Area/Technical experts? • Technically richer design (more expert users) • Main resource “on top” • Complex tools (deeper understanding of how they work) • Possible compromises • Simple tool with link to complex one (example4)

19. Audience -- What Wanted? • Different audiences have very different interests. For example: • Prospective students • Course/program information; funding; visa issues • Current students • Campus events; course info; exam schedules; library resource access; pub hours

20. Site Design • Different sites for different audiences • Easy when content is mutually exclusive -- use a tree for the different areas. H H1 H2 H3

21. Different Sites/Audiences • Difficult when content is shared • Three possible solutions • Dynamic content, generated according to path explored (gets all the backlinks right) • Multiple backlinks representing parents • Multiple copies of same content

22. Audience-Tailored Content Some Examples: • My Yahoo! • http://edit.my.yahoo.com/config/login • Personal Lycos(examp6) • http://personal.lycos.com/default.asp?startpage=

23. Software Issues • Need to maintain user profiles • Server stores user information, interests • Privacy concerns • Complex software to track interests • Relevant only if lots of “flat” data • E.g: -- A Web site that is a gateway into a large collection of data

24. Design Issues • Customization is coarse • Broad topics, categories • Not designed for specific “special interests” • Not designed to be comprehensive • Easy for user to “forget” account ID, settings, indeed just about everything about their “personal settings”

25. Design Issues: Technology • Design must work. • Advanced features often don’t • Need to balance design with functionality • First: choose required function • Second: choose technology • User skills, equipment, environment • Speed to download, speed to run

26. Problematic Technologies • Just about everything • Java/Active-X (slow to download, often problematic on slow machines) • Streaming Video (slow, poor quality, high cost) • Streaming Audio (not bad, actually) • Multimedia plugins (often slow) • Many do not support these data!

27. Design Issues: Storyboard • Mock-up design with storyboards • Model large site design, links, pathways • Understand structure at modest cost • Explore design possibilities • Page design mockups • Navigation experiments (“hide” the other pages) • Plan large site, then remove “future” parts

28. Design Issues: Templates • Design collection of standard pages • Representing sections, subsections, etc. • Define library of required graphical elements • Define design document, specifying rules for page design • Can hand-code from template, or auto-generate content.

29. Site Management • Use Distributed Management • Give management responsibility to content owners • Centrally-mandated design, templates, etc. • Areas of ownership • Site manager controls division of responsibilities, coordination.

30. Site Management H

31. Distributed Management • Advantages • More up-to-date content • Less strain on central resources • Units “compete” to be more up-to-date • Disadvantages • Careful coordination skills required • Requires technically sophisticated central management, scheduling.

32. Management Tools • Working and Publish Site Areas • Software to publish updates from working to published area • Tools to back off changes if problems • Tools for restricting access • Revision control utilities • Document-specific updates

33. Implementation Development Published Backup

34. Tools Examples • Netscape Site Publisher • Microsoft FrontPage 98 • NetObjects Fusion • SoftQuad HoTMetaL Publisher • Intranet suite/management tools

35. Management Structures • Central manager for site content, design, policy issues • (with a committee, where necessary) • Systems development staff to install/test software, manage system • [Contract] graphics design staff • Mail-based (or other) network between central staff and content providers

36. Next-Generation Web Design • Ian Graham • http://www.utoronto.ca/ian/ • http://www.groveware.com/ • ian.graham@utoronto.ca Tools Overview http://www.utoronto.ca/ian/books/html4ed/extra/extra.html