PowerPoint Presentation Interface Design

1
L
ecture 3
2
Interface Design

• The capacity for perception depends on the
  amount, the kind and the availability of past
  experiences.... We see familiar things more
  clearly than we see objects about which we have
  no stock of memories.
• Aldous Huxley

3
Topics that will be covered

• Lecture on Interface Design (p.119 Ch.4)
• META Tags (p.119 Ch.4)
• Key words vs. Description
• Place Holders (p.139 Ch.5)
• What are they?
• How to create and place them?
• E-mail Links (p.139 Ch.5)
• Creating e-mail links
• Anchors (p.144 Ch.5)
• What are they?
• How to create and link them?
• Image maps (p.151 Ch.5)
• What are they?
• How to create and link them?

4
Interface Design

• Web pages differ from books and other documents
  in one crucial respect hypertext links allow
  users to access a single Web page with no
  introduction.
• For this reason Web pages need to be more
  independent than pages in a book.
• The best design strategy to follow while creating
  a site is to apply a few fundamental document
  design principles in every Web page you create.
• Here are a few questions you should ask yourself
  when creating a site
• who
• what
• When
• where

5
Interface Design
Who -- who is speaking? Whether the page
originates from an individual author or an
institution, always tell the reader who created
it. What -- All documents need clear titles to
capture the reader's attention. The document
title is often the first thing browsers of World
Wide Web documents see as the page comes up.
When -- Timeliness is an important element in
evaluating the worth of a document. Date every
Web page, and change the date whenever the
document is updated. Where -- Always tell the
reader where you are from. Make sure that you
have an address, e-mail, phone/fax number that
the user can reach you at.
6
Interface design

• Every Web page needs
• An informative title (which also becomes the text
  of any bookmark to the page)
• The creator's identity (author or institution)
• A creation or revision date
• At least one link to a local home page or menu
  page
• The "home page" URL on the major menu pages in
  your site
• Include these basic elements and you will have
  traveled 90 percent of the way toward providing
  your readers with an understandable Web user
  interface.

7
Basic interface design

• Here are a few basic principles that every
  designer should follow while creating a web site
• Clear navigation aids
• No dead-end pages
• Direct access
• Bandwidth and interaction
• Simplicity and consistency
• Design integrity and stability
• Feedback and dialog

8
Basic interface design
The goal is to provide for the needs of all your
potential users The needs and demographics of
the target audience is crucial. It's impossible
to design for an unknown person whose needs you
don't understand.
9
Clear navigation aids

• Users should always be able to return easily to
  your home page and to other major navigation
  points in the site.

10
Clear navigation aids
The menu bar is efficient (offering multiple
choices in a small space) and predictable (it is
always there, at the top of every page), and it
provides a consistent graphic identity throughout
the site.
11
No dead-end pages
Make sure all pages in your site have at minimum
a link back to the main "home" page or, better
yet, a home page link along with links to the
other sections of the site.
12
Direct access
Users want to get information in the fewest
possible steps. Design your site hierarchy so
that real content is only a click or two away
from the main menu pages of your site.
Studies have shown that users prefer menus that
present at least five to seven links and that
they prefer a few very dense screens of choices
to many layers of simplified menus.
13
Bandwidth interaction

• Users will not tolerate long delays.
• Research has shown that for most computing users
  reach frustration in about ten seconds.
• In general, be conservative with Web graphics.
• Even users with high-speed connections
  appreciate a fast-loading page.

14
Simplicity consistency

• Users are not impressed with complexity that
  seems gratuitous, especially those users who may
  be depending on the site for timely and accurate
  work-related information.
• If you need a metaphor for information design,
  choose a genre familiar to readers of documents,
  such as a book or a library.
• The user interface for your Web site should
  follow the general navigation and layout
  conventions of major Web sites because your users
  will already be used to those conventions.
• Users spend most of their time on sites other
  than yours, so avoid highly unusual interfaces if
  you wish to attract and keep a large audience.

15
Simplicity consistency

• An excellent model of interface design is the
  Adobe Corporation Web site. Graphic headers act
  as navigation aids and are consistently applied
  across every page in the site.
• Once you know where the standard links are on the
  page header graphics, the interface becomes
  almost invisible and navigation is easy

16
Simplicity consistency

• For maximum functionality and legibility, your
  page and site design should be built in a
  consistent pattern of modular units that all
  share the same basic layout grids, graphic
  themes, editorial conventions, and hierarchies of
  organization.
• The goal is to be consistent and predictable
  your users should feel comfortable exploring your
  site and confident that they can find what they
  need.

17
Design integrity stability

• To convince your users that what you have to
  offer is accurate and reliable,you have to make
  sure that your site is functional stable.
• Functional stability in any Web design means
  keeping the interactive elements of the site
  working reliably.
• Functional stability has two components
• getting things right the first time as you design
  the site
• keeping things functioning smoothly over time

18
Feedback dialog

• Well-designed Web sites provide direct links to
  the Web site editor or Webmaster responsible for
  running the site.
• Planning for this ongoing relationship with users
  of your site is vital to the long-term success.

19
META Tags

• One of the big challenges is letting the search
  engines know that your site exists. There are two
  ways to getting your site listed
• List is in all the various search engines out
  there
• Insert META tags into your HTML so the search
  engines can find you on their own and correctly
  index your site.
• Many search engines send robots (also called
  spiders) out to search the web for content. When
  you insert certain META tags into your document,
  you make it much easier for the search-engine
  robots to understand how to categorize your site.
• There are two types of META tags
• Key words tags you insert key words that you
  think describe your site
• Key description you insert a paragraph that
  describes your site

20
Placeholders
A Placeholder is an object that you can add to
your page to represent where final content will
be inserted.

• To create a placeholder
• Click to select the area you want to placeholder
  to be
• Click on the image placeholder icon
• In the pop-up box insert the name of the image
  you want to replace the placeholder
• Specify the dimensions of the placeholder
• Press OK

21
E-mail links
Creating an e-mail link will allow the end user
to launch his/her email application and insert
the recipients address into the To field.

• To create an email link
• Click on the area you want to insert an email
  link
• Click on the email Link icon in the Insert panel
• In the popup panel, type the text that you want
  to have linked in the text section
• In the E-mail section, type in the e-mail
  address
• Press OK
• (For more details consult the book p.139)

22
Named Anchors
Named Anchors are a type of link. The time to use
them is when you want to link to sections within
a long page of content.

• Named Anchors have two
• components 1- anchor
• 2- link.
• The anchor and the link work together to make it
  easy to jump to specific areas on the page.
• To create a named anchor
• Click on the location you want to link to
• Click on the Named Anchor icon in the Insert
  panel
• Name your anchor
• Link any text or image to that anchor
• (For more details consult the book p.144)

23
Image Maps
An image map contains invisible coordinates that
allow you to assign multiple links to a single
image. With image maps, you can specify multiple
regions of a single image and have each of those
areas link to a different URL.

• Inserting an image map involves the following
  steps
• Click to select the image you want to have a link
  from
• Locate the properties inspector
• Click on the image map tool
• Draw over the area you wish to link
• Type-in the address of the link in the link panel
• (For more details consult the book p.151)

24
Thank you
The End