WEB Design

1
WEB Design

• WEB based interfaces offer
• Familiarity, popularity is growing quickly
• Portable and low maintenance interfaces
• Access to a large audience
• Effective use of existing infrastructure
• Ease of development
• They are seen as strategic for commercial success!

2
WEB Design

• Three basic criteria
• Effectiveness
• Well organised, complete and accurate.
• Affectiveness
• Captures the viewers attention by being
  interesting, stimulating, and enjoyable.
• Navigational Efficiency
• Easy to find desired information.

Material in this lecture adapted from Conger,
S.A. and Mason, R.O. Planning and Designing
Effective Web Sites. Course Technology, Cambridge
1998.
3
WEB Design

• Viewers
• Surfers
• People who access and view pages.
• Users
• People with a defined interest and will act on or
  make use of information found.

4
WEB Design

• Three environments
• Internet
• The international network of computers.
• Intranet
• A network of computers within a single
  organisation.
• Extranet
• A network of computers that connect organisations
  with similar interests.

5
WEB Design

• Three basic purposes
• To inform
• Viewer obtains facts, learn, or understand.
• Emphasis on completeness, clarity, simplicity.
• To entertain
• Viewer wants to have fun.
• Emphasis on whimsy, surprise, action and variety.
• To enable exchange
• Viewer wants to perform a useful action.
• Emphasis on advertising, persuasion, fast access.
• Search facilities are used to assist the viewer.

6
WEB Design

• Limitations
• A Web Screen is very small.
• Viewers form their impression of a screen in 7
  seconds.
• The connection to the server is Stateless
• Bandwidth
• Humans can only deal with 72 concepts

7
WEB Design

• Steps for development
• 1. Research and idea generation
• 2. Information Decomposition and Structuring
• 3. Text analysis and Composition
• 4. Linkage analysis and composition
• 5. Multimedia analysis and composition
• 6. Maintenance and improvement.

8
WEB Design

• 1. Research and idea generation
• Identify and define the users
• Identify the information they want.
• The outputs are
• A definition of information content for each user
  group.
• A statement of purpose for each web presentation.
• A list of information sources.

9
WEB Design

• 2. Information Decomposition and Structuring
• Decompose information into chunks, or objects
• Structure information based on business needs and
  users information needs
• Using the information objects, build an
  information structure diagram
• Test the information structure for logic ease
  of use

10
Decompose information into chunks, or objects

• Each chunk will express a single, complete idea
• Each chunk will be one web page.
• Each chunk is mutually exclusive collectively
  exhaustive
• Reduce information to its simplest form

11
Structure information based on business needs and
users information needs
Information Structure Diagram
A personal resume web site
12
Structure information based on business needs and
users information needs

• Model the providers view of the structure.
• Map user pathways.
• Major pathways for primary objects
• Secondary routes for detailed views
• Return paths to previous stops
• Linkages between objects vary between 10 - 80 of
  those possible
• gt 80 suggests a confusing site
• lt 10 suggests inadequate pathways
• Some suggest 72 linkages is ideal
• For clarity in large systems, detail pages are
  left out of the Information Structure Diagram.

13
Test the information structure for logic ease
of use

• Use storyboards or cards
• Gather potential users, form focus groups
• Collect comments and suggestions
• Improve the structure as required
• Testing guards against inadequate designs

14
WEB Design

• 3. Text Analysis and Composition
• Text Analysis
• Development of prose statements that convey the
  desired message.
• Make sure the text is accurate and complete.
• Text Composition
• All information objects with complete text are
  arranged and grouped to serve the best interests
  of the site.

15
Text Analysis Guidelines

• For effectiveness, Text must be
• Complete or comprehensive
• Accurate (or labelled with an accuracy level)
• Easy to read
• Clear
• Useful to a defined audience
• Concise
• Tone determines a sites affectiveness.

16
Text Composition

• Determine
• Layout
• consider placement of text and other media
• proximity, alignment, contrast and repitition
• Typography
• typefaces (fonts) and type style (italics, bold)
• Type size
• Color
• Grouping
• location, alphabetic, time, quantity
• presenter designed categories

17
Text Composition

• Page formatting
• Menus Maps
• Frames

Table of Contents Dallas Overview Accommodation
Restaurants Day Trips Shopping Events
18
WEB Design

• 4. Linkage analysis and composition
• Identify links
• interpage
• intrasite
• intersite
• Decide on links composition
• Be direct, use few words
• Chose words that reflect the linked to object
• Chose words that reflect the image of the
  organisation
• Observe the 72 rule for links
• Too many links overwhelm users
• Too few links may reduce usefulness

19
WEB Design

• 5. Multimedia Analysis and Composition
• Requires careful study and skillful production
• Beyond the scope of this subject.

20
WEB Design

• 6. Maintenance and improvement.
• Maintenance required for many reasons
• Competition
• Changing information
• Lifetime and usefulness of information
• New technologies
• New content is identified
• User suggestions, comments