• Principle of What is Interaction Design• Principle of What is Web Site Interaction

Design• History of Web Site Design• How Interactive Design apply to Web

Application?• Summary• The End

COSC414 27 Sept 2002, by KKSIM

Principle : What is Interaction Design

– “How should this product work?”

– Art of effectively creating interesting and compelling experiences for others.

COSC414 27 Sept 2002, by KKSIM

Principle : What is Web Site Interaction Design

– What people can do on the site

– What they can participate in

– What the site does to address their needs, interests, goal, abilities and satisfaction.

COSC414 27 Sept 2002, by KKSIM

COSC414

History : Web Site Design

Relation between human & computer has changed with rise of the web.

Early Generation -Text-based data

Today -Animation-Audio-Graphic Design-Movie

27 Sept 2002, by KKSIM

COSC414

How Interaction Design apply to Web Application?

1. Consider who your users

27 Sept 2002, by KKSIM

Determining whom the user is and what to achieve.

Example :Looney Tunes: a web site for kids and people likes cartoon.

COSC414

How Interaction Design apply to Web Application?

2. Browsers & Platforms

27 Sept 2002, by KKSIM

Netscape and Microsoft Internet Explorer.

Macintosh and Window.

Example :COCS 414 project web site

COSC414

How Interaction Design apply to Web Application?

3. Good Interface Design

27 Sept 2002, by KKSIM

• Font Design : • Background Design :Resolution, size, contrast,readability and simplicity,economy of space, and aclean look.

• Colour Design :Rouse users emotion, and draw users attention.

Enliven and visual pleasing

• Categories Information• Efficience of use• Memorability• Satisfy the user• Minimize the error

COSC414

How Interaction Design apply to Web Application?

4. Unique Content

27 Sept 2002, by KKSIM

Design a site different from "general sites" and rarely appeal to the "general public".

Example :plumb design's visual thesaurus (an online, dynamic visual database of words and their synonyms)

COSC414

How Interaction Design apply to Web Application?

5. Creativity & Productivity

27 Sept 2002, by KKSIM

Creating experiences that allow the audience to do something or to make something at your site.

Example :itch: ladybugs crawl

randomly.

COSC414

How Interaction Design apply to Web Application?

6. Animation & Audio

27 Sept 2002, by KKSIM

Explain a message, grab user attention, decorate the web interface, looked fun and pleasing.

7. AlignmentA good alignment makes page layout visual appealing, aids readability and looked professional.Example:Hotwired web site

COSC414

How Interaction Design apply to Web Application?

8. Navigation

27 Sept 2002, by KKSIM

Let user stay oriented and quickly access to the information they need

9. Consistency

Careful:- structure- colour and font style

Example : Yahoo! Mail

COSC414

How Interaction Design apply to Web Application?

10. Avoid Confusion

27 Sept 2002, by KKSIM

• Unclear links : • Design overkill :- No meaningful labels- Do not underline anything, which is not a link.

• Lost in hyperspace :- No clear indication

- Cool graphic design is at best confusing and the functionality hard to find and use.

• Scrolling : - Crucial information should delivers immediately upon the visitor's arrival.

COSC414

How Interaction Design apply to Web Application?

11. Bandwidth

27 Sept 2002, by KKSIM

Goal to have between 30-70 KByte as the maximum per page.

12. Communication & FeedbackDiscussion groups, bulleting boards, IRC chat channels, feedback forms, email address allow to email you or each other and providing FAQ.

COSC414

Summary

27 Sept 2002, by KKSIM

The End