Upload
arnold-rice
View
223
Download
1
Tags:
Embed Size (px)
Citation preview
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
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
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.
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
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/ [email protected]
Tools Overview
http://www.utoronto.ca/ian/books/html4ed/extra/extra.html