Transcript Global E-Commerce

Corporate Website
The Bigger Picture

Identify the site’s business objectives
› Selling products or services
› Educating consumers
› Providing technical support
› Collecting information from visitors
› Offering a virtual community to customers
› Directing consumers to other useful sites
› Recruiting talented employees
8-2

Understand who will visit the site
› Demographics is necessary. Do Market analysis.
If possible collect demographics

Understand what visitors will do at the site
› Primary audience consists of the targeted
customers identified in business plan
› Secondary audiences




Vendors
Strategic partners
Investors
General public
8-3

Design the site to accommodate the most
common technological constraints
› Experienced or novice users
 Try customizing cite according to the expertise of the
user level of expertise CREATE SHORTCUTS
› Browser and version commonly used
› Internet connection speeds
 Too much dynamic content slows data retrieval speed
› Screen resolutions used
 Fixed-width pages
 Pages that resize with the browser window
8-4

Home page should answer basic visitor questions:
› Who are you?
› What do you do?
› Where can I find what I want or need?
› Why should I be interested in your products or
services?
8-5

Secondary pages
› Customer login page
› Products or services
pages
› “Shopping cart” page
› Shipping and return
policy pages
› Customer support
pages
› Contact information
pages
› “About Us” pages
8-6

Secondary pages (continued)
› Privacy policy and acceptable use pages
› Frequently asked questions (FAQ) pages
› Employment opportunities pages
› “What’s New?” pages
› Customer stories or case studies pages
› Affiliate program pages
› Help pages
8-7

Linear structure
› A series of pages linked in sequential order
8-8

Webbed structure
› Pages are linked together without regard for
how the content fits logically
8-9

Pure hierarchical structure
› Similar to business organizational chart
› Information is organized in levels
› Home page at Level 1 (top-level)
› Main topic pages at Level 2
› Additional details about main topics at
remaining levels
8-10
8-11

Mixed hierarchical structure
› Combines structured organization with cross-
linked pages
8-12

Site organization
› Should enable visitors to find actionable
content quickly and easily
› Be neither too flat nor too deep
› Logical and intuitive

Avoid a structure that is either too flat or
too deep
› Try not to go beyond 4 levels of depth.
› Structure that is too flat is uninteresting
› Structure that is too deep is difficult to navigate
8-13

Web site storyboard
› Used to test a Web site organizational plan
› Manual mock-up of site’s organization
 Index cards, sticky notes, sheets of paper
represent individual Web pages
 Use push pins or tape to fasten cards, notes, of
sheets of paper to white board or corkboard
 Create connecting lines indicating links
› Look for illogical links, orphan pages, missing
pages
8-14
8-15
Web accessibility – Designing Web
pages so that Web resources are
available to people with disabilities
 W3C guidelines for accessibility

› Visual or auditory content is supported by
alternative content
› Color alone should not indicate a link
 10% of users are color blind
› Adequate contrast for
background/foreground colors
8-16
8-17

W3C guidelines for accessibility
(continued)
› Simply worded text
› Movement, scrolling, and blinks can be
turned off without loss of information or
navigation
› Navigational links are clear and consistent
› Page content is consistent across all pages
8-18

Web usability
› Designing Web pages to help all visitors
accomplish their goals at a site quickly and
easily

Consistency across all pages
› All pages should have a common “look and
feel”(Put company logo and have a
consistent layout)
› Elements in same position
› Standard color scheme
8-19

Navigational elements (internal links)
› Embedded text links
› Clickable table of contents and top-of-page
›
›
›
›
›
links
Navigation bars
Navigation menus
Navigation tabs
Breadcrumb trail
Site map
8-20

Embedded text links
› Link positioned inside a paragraph
› Text in link should clearly describe what
page visitors will see
 Use Fax Phones
 Do not use Click here

Clickable table of contents and top-ofpage links
› Use to navigate topics on a long Web page
› Allow visitors to read subtopics and return to
the top of the page without scrolling
8-21

Navigation bars, menus,
and tabs
› Navigation bar is a
series of graphic or
text-based internal
links
› Often found at the
top or bottom of Web
page
› Navigation menu is a
list of internal links
› Navigation tabs are
similar to file folder
tabs
› Both are used to
conserve space on a
page
8-22

Breadcrumb trail
› Hierarchical
navigational outline
› Provides visitor with
feedback on path
taken to current
page
› Use in conjunction
with other
navigational
elements
8-23

Site map
› Web page that shows a summary of all the
linked pages at the site

Rollover links
› Hidden links that appear when mouse is
“rolled over” an animated image
› Avoid rollover links
8-24

Page layout
› Fixed-width pages fit in a maximized browser
window for a specific screen resolution
› Liquid design creates pages that size with
the browser window
 Use tables (arrangement of columns and rows)
 Use CSS (cascading style sheets)
8-25

Page length
› Keep pages short to avoid vertical scrolling

Splash pages and frames
› Avoid them

Search function and forms
› Add access to search function on all
relevant pages
› Use forms to collect information
8-26

Writing for the Web
› Use simple, direct language
› Avoid industry jargon
› Use bulleted and numbered lists
› Use dark text color on light background
› Use a familiar font
› Use at least a 12-point equivalent font
› Check spelling and grammar, and
proofread
8-27
Choose color scheme carefully
 Use images, audio, and video sparingly
and only when they support the Web site
message
 Avoid background images
 Add alternative text to image links
 Add related text links to support image
links

8-28
Carefully assess costs of in-house Web
design and development compared to
outsourcing costs
 Outsourcing benefits

› May save time and money
› Provides greater access to experienced
specialists familiar with current best practices
and trends
› May provide access to usability analysis
8-29
Go to
http://www.archive.org/web/web.php
 Check the earlier versions of
www.amazon.com; www.yahoo.com;
www.google.com
 What drives the change? Although in
some case they look drastic, but over a
period of time the changes seem subtle.

8-30