Subject
Year
: L0182 / Web & Animation Design
: 2009
Introduction to Web
Session 01
Learning Outcomes
At the end of this session, the students will be able to :
• Understand the basic of a good web design
Bina Nusantara
Course Outlines
•
•
•
•
•
•
•
•
Hypertext and Hypermedia
User Interface
Good Interaction Design
World Wide Web
Home Page
Website
Top Ten Mistakes in Web Design
Advantages of Using Web
Bina Nusantara
Introduction
• Hypertext was first introduced by Vannevar Bush, on
July 1945, in his paper which titled “As We May Think”.
• Bush said that:
– There would be information rush
– Necessity to build a tool that would allow easily cross reference
inside and inter documents
– The proposed information exploration tool was named Memex.
Bina Nusantara
Hypertext and Hypermedia
• Hypertext is:
– A series of text chunks connected by links which offer the reader
different pathways.
• Hypermedia is:
– Derived from hypertext, extends the notion of hypertext link to
include links among any set of multimedia objects, including
sound, motion video, and virtual reality.
Bina Nusantara
Hypertext and Hypermedia
• Hypertext extends traditional linear text with:
–
–
–
–
–
–
Bina Nusantara
Chance to jump to any connected articles
Easy to backtracking
index and table of content that can be click
String searching
Bookmarks (favorites)
The other navigation tools
Hypertext
• The first step to build an effective hypertext is to choose
a project in which includes The Golden Rules of
Hypertext :
– There is a large body of information organized into numerous
fragments
– The fragments relate to each other
– The user needs only a small fraction at any time
Bina Nusantara
User Interface
• User Interface is a linkage between a human and a device or system
that allows the human to interact with that device or system.
• The user interface provides means of :
– Input, allowing the users to manipulate a system
– Output, allowing the system to produce the effects of the users'
manipulation.
• Currently, the following types of user interface are the most common :
– Graphical User Interface (GUI) accept input via devices such as
computer keyboard and mouse and provide articulated graphical
output on the computer monitor.
– Web User Interface (WUI) accept input and provide output by
generating web pages which are transmitted via the Internet and
viewed by the user using a web browser program.
Bina Nusantara
Good Interaction Design
• To improve the usability of an application it is important to
have a well designed interface.
• Ben Shneiderman's "Eight Golden Rules of Interface
Design" :
–
–
–
–
–
–
–
–
Bina Nusantara
Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialog to yield closure
Offer simple error handling
Permit easy reversal of actions
Support internal locus of control
Reduce short-term memory load
Good Interaction Design
• According to Patrick Lynch, 1995
– Balancing the structure and the connection between menu or
home page and the content of the page or between graphic and
the linked document.
– The purpose is to build a natural and well structured menu
hierarchy and pages for users, and not to divert the usage of the
web site.
Bina Nusantara
World Wide Web
• World Wide Web (commonly shortened to the Web) is a
system of interlinked hypertext documents accessed via
the Internet.
• With a Web browser, a user views Web pages that may
contain text, images, videos, and other multimedia and
navigates between them using hyperlinks.
Bina Nusantara
Home Page
• Home Page is the main page of a Website.
• Typically, the home page serves as an index or table of
contents to other documents stored at the site.
Bina Nusantara
Website
• Website is a site (location) on the World Wide Web.
• Each Website contains a home page, which is the first
document users see when they enter the site.
• The site might also contain additional documents and
files.
• Each site is owned and managed by an individual,
company or organization.
Bina Nusantara
Top Ten Mistakes in Web Design
• Jakob Nielsen's Top Ten Mistakes in Web Design
(2005) :
–
–
–
–
–
–
–
–
–
–
Bina Nusantara
Legibility Problems
Non-Standard Links
Flash
Content that is not Written for the Web
Bad Search
Browser Incompatibility
Cumbersome Forms
No Contact Information or Other Company Info
Frozen Layouts with Fixed Page Widths
Inadequate Photo Enlargement
Advantages of Using Web
•
•
•
•
•
•
•
•
•
•
•
•
Global audience
Operates 24 hours, 7 days a week
Relatively inexpensive
Product advertising
Distribute product catalogs
Online surveys
Announcements
Online discussion forums
Obtain customer feedback
Immediate distribution of information
Multimedia
Formatting capabilities
Bina Nusantara
Bina Nusantara
Bina Nusantara
Bina Nusantara