Software, Systems, and Solutions

"We do not run your business. We make your business run better."

Skip Repetitive Navigational Links

e-Business Models

  • A number of different business models are being implemented on the Internet these include the:
    • Storefront Model
    • Brokerage/Auction Model
    • Advertising/Portal Model
    • Manufacturer: Manufacturers to buyers directly
    • Subscription: Pay for access
    • Utility: Pay as you go

Storefront Model

  • The storefront model combines transaction processing, security, online payment and information storage to allow merchants to sell via the Web.
  • Most e-Commerce storefronts use the shopping cart to allow users to accumulate products they wish to purchase.  
    • Shopping carts utilize cookies stored on the client machine to record information on the products selected.
  • Online product catalogs allow users to browse the products and services the merchant has to offer.
    • Product catalogs are often contained in a database on the merchant server and then put into dynamic web pages based on user requests.  
  • Storefront business models include:
    • Virtual Merchants -- a business that operates only over the web.
    • Catalog Merchants -- the migration of mail-order to a web-based order business.
    • Surf-and-Turf or Click-and-Mortar-- traditional brick-and-mortar establishment with web storefront. 
    • Bit Vendor -- a merchant that deals strictly in digital products and services and conducts both sales and distribution over the web (online entertainment, online learning, or software).

Brokerage/Auction Model

  • Brokers are market-makers: they bring buyers and sellers together and facilitate transactions. A broker makes its money by charging a fee for each transaction it enables. 
  • Common e-Businesses based on the brokerage model include:
    • Auction Broker -- A site that conducts auctions for sellers. Auctions can vary in terms of the offering and bidding rules.
    • Reverse Auction -- The "name-your-price" business model. Prospective buyer makes a final bid for a specified good or service, and the broker seeks fulfillment.
    • Buy/Sell Fulfillment -- Customers place buy and sell orders for transacting financial instruments. Also, online travel services fit into this category.
    • Buyer Aggregator -- Brings together individual purchasers from across the Internet to transact as a group so they can receive the volume discounts. 
    • Virtual Mall -- A site that hosts many online merchants.
    • Classifieds -- A listing of items for sale or wanted for purchase, typically run by local news content providers.
    • Search Agent -- An agent (i.e., an intelligent software agent or "robot") used to search-out the best price for a good or service specified by the buyer, or to locate hard to find information.

Advertising/Portal Model

  • The web advertising model is an extension of the traditional media broadcasting model. The broadcaster, in this case, a web site, provides content (usually, but not necessarily, for free) and services (like e-mail, chat, forums) mixed with advertising messages in the form of banner ads. 
  • The banner ads may be the major or sole source of revenue for the broadcaster. The broadcaster may be a content creator or a distributor of content created elsewhere. The advertising model only works when the volume of viewer traffic is large or highly specialized.
    • Generalized Portal -- high-volume traffic (ex: search engines, directories content driven sites). 
    • Personalized Portal -- Allow customization of the interface and content. 
    • Specialized Portal -- Provides a well-defined user base. 
    • Attention / Incentive Marketing -- pays visitors for viewing content and completing forms. 
    • Free Model -- Give users something for free to create a high volume site for advertising opportunities. 
    • Bargain Discounter -- sell goods at or below cost, and seek to make a profit through advertising.

Web Site Design Principles

  • Design for the Medium, remember the destination is a computer not the printed page.  Research indicates that users read hypertext very differently than printed information. 
  • Design for the whole site not just individual pages.  Your choices of colors, fonts, graphics and page layout should communicate a visual theme that orients users to your site's content.
  • Design for the User and only include content on your site that is of direct benefit for your intended audience.  Give away something valuable: information, software, advice or humor. Create an interface that will be familiar and easy to use.

Plan the Overall Site

Specification Document

  • Why are you building the site?
  • What is the business model for the site?
    • What is the goal for the site: Billboard, Publishing, Special interest, Virtual Gallery, E-commerce, Product support, Intranet or Extranet...
    • If you are generating revenue what will be the primary source of revenue? The secondary?  
    • Is the business exclusively web based or the extension of a brick-and-mortar business?
  • How will you judge the success of the site?
  • Who is the target audience?
  • What are the limiting technical factors  affecting your site?

Plan for a successful implementation 

  • Creating portable file naming conventions. 
  • Build a relative file structure that can be transferred to your Web server without a hitch.

Select a basic information structure for your site 

  • Manually diagram your site based on "Standardized" site plans then customize to develop the best structure for your site.
  • Linear Information Structure: Lets you guide your user along a path.  Good for books or sequential presentations:

  • Tutorial Structure: Similar to linear structure except there are several predefined paths the user can travel.

  • Web Structure: A content structure used by smaller sites which provides links to every page on the site.  This type of structure requires clear navigation information.

  • Hierarchical Structure: One of the most common. It lends itself to large content collections because the Section pages break-up and organize the content at different levels.

  • Cluster Structure: Similar to hierarchical except each section is an island of information organized in a Web structure.

  • Catalog Structure: Accommodates electronic shopping.  Users browse or search for items and add them to their shopping cart, they can review the items in their cart then checkout.

Planning Site Navigation

  • Work from the users point of view.  Think about where the user wants to go within your Web site and make it easy for them to get there.
  • Add plenty of links to make your Web site quickly accessible. Link to internal bookmarks/targets as well as to whole pages.
  • Provide plenty of location cues to let users know where they are within your site:
    • Yahoo has a complicated directory structure.  They use text based links to let you know where you are and how you got there:

    • clearly indicates that you are browsing Books in the subject for Computers and the Internet.  They also give clear links back to other parts of the Books site and the whole site.

  • Use consistent text based navigation bars to link users to other pages on your site.  Use other text based links to help users move through a long page of information or through a Table of Contents.
  • If you use graphical navigation links: 
    • Reuse the same images to reduce download time.  
    • Use the ALT attribute to provide alternative navigation options for users. 
    • Have a consistent text only link/navigation bar at the bottom of every page.


  • Keep a flat hierarchy: Do no make users navigate through to many layers to find the information they want.
  • Consider providing a site map that graphically shows Users the lay-out of your entire site:

Design for the Medium 

Craft the look and feel

  • Make your site consistent and easy to use.
  • Better sites  support the way users want to approach the problems.  (Research shows users will leave sites that have unique designs or terminology). 
  • Content design requires that the Web designer determines the best approach to describing each unit of information.
  • Use a standardized Information architecture. An example that has already happened is the "About the company" area of most corporate Web sites. 

Make your Design Portable

  • To be successful, you Web design must be portable and accessible across different browsers, operating systems and computing platforms.

Design for Low Bandwidth

  • Plan your pages so they are accessible at a variety of connection speeds.  
    • Break large pages into smaller units.
    • Use fewer graphics
    • Use the ALT attribute with your images so that the user has information to look at while the graphics are downloading.  

Plan for clear presentation & easy access to information

  • Highlight keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
  • Use meaningful sub-headings (not "clever" ones)
  • Use bulleted lists
  • Only one idea per paragraph (users will usually skip over any additional ideas)
  • Start with the conclusion, then add details.
  • Have half the word count (or less) than print writing
  • Limit the number of fonts and colors used on the site.

Use the Power of Hypertext Linking

  • When writing on the Web you have the power to put hypertext links anywhere in your document to guide users through you information.
  • Provide links anywhere you think it will help end-users find the information they want more quickly.
  • Provide links that will allow users to jump through a long document quickly

Plan the Page Structure & Content

  • The final step is defining the unifying themes and structure that will hold your pages together.  This includes:
    • Choices of colors, fonts and graphics
    • Page Layout
    • How much content to include

Create Smooth Transitions

  • Plan to create a unified look among the sections and pages of your site.  Web sites should have:
    • Consistent background graphics
    • Consistent placement of navigation information
    • Consistent font usage
    • Logo that brands the site
  • The two screen shots below show the unified look of the National Gallery of Art's Web site:

Use a grid to Provide Visual Structure

  • The structure of a Web page is imposed by the grid or page template you choose for your Web page design.
  • Most web pages use tables to lay content out in logical areas.
  • Tables are also used to create active white space.  White space between content areas to guide readers attention to important content (space between each of the cells in the table).

Top Banner or Logo Space:   Relative Screen Importance=2



Main Content Area



Can be in a single block

or in multiple grids


Bottom Navigation Link Space

Choose the Amount & Location of Content

  • You can only crowd so much information onto a single Web page.  Consider the type of site and the information the user is looking for when deciding what information to include on a single Web page.
  • Most sites try to have Web pages that are no more than 2 browser height's high with the most important information "above the fold" (on the first screen).
  • The Altavista page below is an Search/Information page and attempts to crowd a lot of information on a single page with little Active White Space:

  • The Web site for Eddie Bauer has navigation information and links on the home page with a large image in the main content area to highlight their products.  It has a much less cluttered feel.