Next-Generation Web Design

Ian GrahamUofT

http://www.utoronto.ca/ian/Groveware

http://www.groveware.com/

Basic Issues

Theoretical Understanding

Hypermedia Design models Design principles

Practical Design

goals/function Audience Design templates Management tools Administrative

structure

Third-Generation Design

Not much different from secondPrinciples and Practices for Large

Sites Design issues and approaches Maintenance Administrative structures and logistics Planning

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

Understanding Hypermedia

The Web as Hypermedia The Web is a simple form of

hypermediaSimpler because the technology is simplerMore complex because of the

interrelationships possible with hyperlinks

Essential FeaturesMix of disparate mediaNonlinear exploration by viewers

Web Design Models

LinearTree-LikeDynamic Structure

Use different approaches where appropriate. They can be mixed

together on the same site.

Linear Hypermedia

Markup enforces linear structure (examp1)

next

prev

Table of Contents

….

Linear Hypermedia

Appropriate for: “Naturally” linear content (converted book,

documentation, lengthy content)Advantages

Simple navigation, easy to understandDisadvantages

Limited navigational flexibility,inappropriate for more complex content

Tree-Like Content

For hierarchically-structured content

Markup, page structure defines the hierarchy Web site with subject areas Web site as a catalog, or index

acts as a “drill-down” database interface

Tree-Like Content

H

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

Tree-like: Design Issues

Common design for all documentsDistinguishing design features for

different places in the hierarchyConsistent navigation

model tools placement

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.

Dynamic Structure: Issues

Cost Need sophisticated backend databases Need structurally marked-up data

(SGML, XML) Complex programming to generate

contentDesign

Complex design for navigation, indexing

Basic Issues

Theoretical Understanding

Hypermedia Design models Design principles

Practical Design

goals/function Audience Design templates,

issues Management tools Administrative

structure

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

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)

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)

Audience -- What Wanted?

Different audiences have very different interests. For example:

Prospective students Course/program information; funding; visa

issuesCurrent students

Campus events; course info; exam schedules; library resource access; pub hours

Site Design

Different sites for different audiences Easy when content is mutually exclusive

-- use a tree for the different areas.H

H1 H2 H3

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

Audience-Tailored Content

Some Examples:

My Yahoo! http://edit.my.yahoo.com/config/login

Personal Lycos (examp6)

http://personal.lycos.com/default.asp?startpage=

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

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”

Design Issues: Technology

Design must work. Advanced features often don’t Need to balance design with functionality

First: choose required functionSecond: choose technology

User skills, equipment, environment Speed to download, speed to run

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!

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

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.

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.

Site Management

H

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.

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

Implementation

Development Published

Backup

Tools Examples

Netscape Site Publisher

Microsoft FrontPage 98 NetObjects FusionSoftQuad HoTMetaL Publisher

Intranet suite/management tools

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 staffMail-based (or other) network between

central staff and content providers

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