Sample Website Goals & Objectives

Craig Borysowich (Chief Technology Tactician)

Mission

Project ABC will provide a Web-enabled sales force automation system.

Goals

The goals of the project include:

Process Focused Goals:

· Improve flexibility and ability to respond to Marketing initiatives.

· Improve system accuracy and responsiveness.

· Improve performance measurement and reporting capability.

· Reduce administrative overhead and cost of commissioning.

· Improve financial analysis, controls, and audit capability.

Business Focused Goals:

· Increase quality.

· Reduce delivery time.

· Reduce cost.

· Implement change faster.

Management Focused Goals:

· Manage risk better.

· Improve reliability of budgets and schedules.

· Provide a better working environment.

Engineering Focused Goals:

· Provide greater integration of engineering principles into the process.

Objectives

Project ABC will replace the functionality of the following pre-existing systems:

· Sales Commissions System,

· Sales Manager Compensation System,

· Branch Unit Commissions and Sales,

· Daily Sales Report.

Project ABC will provide the functionality described in the Project ABC Phase II Business Analysis summary.

Critical Success Factors

The success of the project will be evaluated against the following criteria:

· Decrease time-to-market.

· Reduce new compensation plan development time by 50%.

· Reduce bonus development time by 50%.

· Improve target incentive opportunities.

· Improve representative and branch productivity by 2%.

· Reduce field effort spent on statement review by 50%.

· Reduce unassigned accounts.

· Reduce cost and effort.

· Reduce number of adjustments by 80%.

· Maintain % adjustments flat with new plan/bonus introduction.

· Reduce finance commissions systems front-end support requirements by 50%.

· Reduce system maintenance cost by 20%.

· Eliminate 95% of transactions performed by HQ Commissions Systems.

· Empower field to initiate 95% of transactions.

· Reduce HQ ad hoc programming by 20%.

· Reduce field ad hoc programming.

· Reduce process cycle time.

· Reduce statement distribution time by 50%.

· Process all adjustments within 30 days.

· Calculate all monthly commissions within 12 hours.

· Implement Compensation Plan system changes within 30 days of receipt.

· Reduce number of manual payroll adjustments by 50%.

· Improve financial control.

· Increase audit recovery payments by 10%.

· Reduce growth in commissions expense.

Identifying your Website Objectives

Craig Borysowich (Chief Technology Tactician)

Gain an understanding of the goals and objectives of the organization. Review the organization's mission statement. Focus on:

· what the organization does,

· how they do it,

· why they do it.

Prepare Site Mission Statement

Prepare a statement of the purpose of the site. Make sure the site is aligned with the overall objectives of the organization. Briefly describe in a paragraph or less the main goal. For example, the site may be intended as a reference source, a marketing tool, a training support vehicle or an electronic commerce venture.

Define Goals and Objectives

Expand on the goals identified in the statement of purpose. Be more specific about the objectives and indicate how and when the success of the site is to be measured. Include both short-term (i.e., six months to a year) and long-term (i.e., a year or more) objectives. Consider the implications for ongoing site maintenance. This sample shows the goals and objectives for a Web-enabled sales force automation system.

Identify the Audience

To be successful, the Web site design needs to meet the needs of its potential users. Take into consideration the following factors:

· knowledge,

· skills,

· background,

· needs and expectations,

· frequency of use,

· tools and browsers,

· bandwidth,

· language,

· terminology,

· culture.

Often the site design must be flexible enough to accommodate both the novice and occasional user as well as experienced and frequent users.

Determining What a Website will Include

Craig Borysowich (Chief Technology Tactician) Posted 12/31/2007
Comments (0) | Trackbacks (0)

Prepare a high-level outline of the information content to appear on the site. Identify the sources of the information.

Chunk the Information

Start breaking the information into a logical organization (e.g., chronological, or sequential). Organize the information by a consistent theme such as user audience, task, topic, chronology when age is important (e.g., newsletter), or use a hybrid of two or more groupings.

Identify the Features

Identify the functional requirements of the site. These are the high level business processes that the site will support.

Tips and Hints

The content and features included on each site depend on the site objectives and must be defined for each site. Here are some common elements that frequently occur on Web sites to consider when planning your site:

· home page,

· what's new page,

· submenu pages for large sites,

· link page to other related sites,

· frequently asked questions page.

Organizing Website Content

Craig Borysowich (Chief Technology Tactician) Posted 12/31/2007
Comments (0) | Trackbacks (0)

Develop an organizational structure for the site as a container to hold the information content and functionality. The structure should:

· show hierarchy (importance and generality),

· show relationships between the chunks of information,

· be functional (usability).

For example, consider the following organizational structures proposed in the Web Style Guide:

· linear,

· hierarchical,

· tabular,

· web.

Linear Structure

A linear structure presents the information in the order it is intended to be read. Generally, this approach does not work in an on-line, hyperlinked environment. However, it is useful in some cases to present a small amount of information where order is important (e.g., the steps to follow in a process).

Hierarchical Structure

A hierarchy classifies the information and presents it as a tree structure to the user. For example, a hierarchy can be based on priority with the most important information appearing higher in the tree and the least important on the bottom. It can also subdivide the information by going from the more general to the more specific.

Tabular Structure

A tabular structure presents information in a grid. The reader follows either a vertical path to obtain more detail on a specific topic, or a horizontal path to view information on the same level for a closely related topic. There is no hierarchy of importance to the information.

Web Structure

A web essentially has no structure. The user can jump easily from one element of information to any other element. This type of structure relies on the user's knowledge of the information for navigation.

Comparison

COMPARISON OF WEB SITE ORGANIZATIONAL STRUCTURES

Structure	Pros	Cons
Linear	· simple structure · works well for narratives that flow in a logical or chronological order · useful for presenting sorted information (e.g., glossary)	· in general, works best for small sites or for displaying indexes
Hierarchical	· provides a structure for organizing complex information · hierarchical organizations are familiar and easy to understand · easy for users to remember the site structure	· requires thought and planning to develop the right organization
Tabular	· works for presenting information topics using the same categories (e.g., course curriculum, catalog)	· user must understand the relationships between the information categories
Web	· most flexible	· least structured · confusing to use, relies on the user's knowledge of the information to navigate the site

Sub-Sites

For very large Web sites, consider using sub-sites as a way to further divide the main site. The elements within a sub-site share the same organizational structure and graphical look and feel. Sub-sites within the main site may vary in their organizational structure.

Sample Design Concept for Process Management Tool Demo Website

Craig Borysowich (Chief Technology Tactician)

Market a process management tool by creating a demonstration of the tool on the organization's Web site.

Goals

The demo must be:

· interesting,

· interactive,

· informative,

· easy to follow.

Proposed Structure

Create an interesting, fun, flashy animation that evokes the common feelings of being frustrated, confused and overwhelmed by the demands of large and complex projects. Contrast this anarchy and chaos with the order and control that process management brings to these endeavors. This provides a compelling argument on behalf of the product, helping to create the context in which the product functions and a rationale for purchasing the product.

Create a map of the tool or a custom illustrated graphical flowchart that explains the uses of each component and how they work together. Build one component at a time on the screen briefly explaining how each works and how powerful they are combined together.

The components of this map or graphical flowchart remain on the screen becoming "hot areas" that the user can drill down into to get more information. It is at this point we feel it would be helpful to show the actual screen grabs and content from the product.

Creative Concept

In keeping with the idea of a knowledge-based solution, the visual metaphor of the human brain being bombarded and over-loaded with information speaks to that part of us that has been overwhelmed by the rigors of complex challenges. The brain is visually stressed by the deluge of inputs and reacts in an erratic fashion finally breaking apart into four sections.

Enter the process management tool - a powerful, flexible, and comprehensive solution for transforming chaos into order. The fragmented brain comes back together forming the ordered brain, which, like a jigsaw puzzle comprises the four main components of the tool. The brain then becomes a navigational tool allowing the user to visit each tool component.

Designing the Navigational Metafor for a Website

Designing the Navigational Metafor for a Website

Craig Borysowich (Chief Technology Tactician)

The navigational metaphor helps the user to quickly gain an understanding of the site organization and provides assistance in moving about the site.

Choose a Familiar Theme

Design a metaphor that works for the target audience. Choose a theme that is generally familiar to people (e.g., restaurant, library, museum, or bookstore). When preparing sites for a target audience with specialized knowledge, design a metaphor that is related to the specialty.

For example, consider the creative concept used to market a process management tool on a Web site.

Design the Graphics

Prepare the graphics to support the chosen metaphor. Use the Web Graphics Design technique to assist in this task.

Storyboard

Mock-up the flow of the major site constituents using a storyboard.

Pay Attention to Labels

Labels are the words used to identify the content and features of the site. When designing the labeling scheme, consider the following:

· Use the same style (i.e., font, capitalization, and punctuation) throughout the site. Make sure that the wording of the labels also remains consistent.

· The labels need to fit in with the overall theme. They should also behave the same throughout the site.

· Use terminology that is familiar to the target audience. Re-use existing categorization schemes for the subject area (e.g., taxonomy in biology).

· Avoid using general categories and terms that may have more than one meaning. Make the labels specific so that the audience knows what to expect.

Tips and Hints

Keep the theme simple. Place buttons and objects where they make sense. The user should naturally move to the area holding the information of interest.

Avoid using the organizational metaphor. While the organizational hierarchy of your company may make sense to you, it is unlikely to be meaningful to outsiders viewing the site.

Designing Website Navigational aids

Designing Website Navigational aids

Craig Borysowich (Chief Technology Tactician)

The navigational metaphor provides an intuitive means for the user to move about the site and find information of interest. Navigational aids provide more direct assistance with site navigation. The first step in designing the navigational aids is to decide what pages are linked together. Consider the use of the following aids when designing your Web site.

Hyperlinks

Site navigation is essentially provided through the use of hyperlinks. A hyperlink provides the capability to jump from any page on the site directly to any other page, internal or external to the site. All of the navigational aids include hyperlinks to support movement about the site.

Navigation Bar

A navigation bar is a row of hyperlinks that provides access to the top pages of the main sections on the site. The bar is normally accessible from every page on the site and permits the user, with one mouse click, to move to the start of another section. The bar consists of icons or text hyperlinks and is consistently placed in the same spot on every page.

Site Map

Site maps provide a graphical representation of the architecture of the site to convey the higher level conceptual organization of the information (i.e., one or two levels deep in the hierarchy). The graphical representation should preserve the navigational metaphor. The site map provides hyperlinks to the content represented in the graphic.

Tables of Contents

A table of contents presents up to three or four levels of the organizational hierarchy and includes textual hyperlinks to the pages listed in the table. The contents are presented in an order that maps to the site organization structure.

Site Indices

Site indices provide a detailed view of the content and flatten the hierarchy of the organizational structure. The textual hyperlinks are sorted in alphabetical order, just as would be done for an index found in a book. These indices are intended to provide assistance to repeat users who are looking for the location of a specific piece of information in the content. Generally, the index is constructed so that it can be viewed on one page and contains up to 40 or 60 entries.

Search Engine

Search engines provide the capability to index the entire site and support searching the full text of the content using terms of interest to the user. Pages satisfying the search are displayed as a hyperlinked result list.

Frames

Frames provide a way to divide the browser window into separate regions that scroll independently and that contain separate HTML files. One use for frames is to isolate the site's navigation bar into its own frame. The navigation bar then stays on the screen while the pages requested through hyperlinking are displayed in other sections of the screen.

Image Maps

Image maps are graphics that include hyperlinks to jump directly to different locations on the site. Hot spots on the map are specified using pixel coordinates. Some uses for image maps include navigation bars, graphical interfaces/menus, site maps and navigation mechanisms from home pages.

Rollovers and Visual Cues

Sites include visual cues to indicate when an element is a hyperlink that can jump to another area of the site. Some standard cues include the hand symbol, the bounding box around linked graphics, and underlined text.

It is sometimes difficult for users to distinguish a graphic element that is a hot link from one that is a static image on the page. Buttons can be designed to look clickable using visual cues (e.g., a bevelled 3D button). An alternative approach is to use rollover buttons that behave differently. When the cursor passes over a rollover button, it responds by generating a different graphic or sound to indicate that the button is clickable.

Tips and Hints

Don't overwhelm the users of the site by including all of the navigational aids listed above. Choose those that are most appropriate to the target audience. Limit the choices presented and try to make the site navigation obvious and intuitive.

Keep in mind that Web browsers include a built-in set of navigation controls (e.g., bookmarks, history lists, forward buttons and back buttons). Try not to duplicate these functions when designing site-specific navigational aids.

Designing Webpage Layout

Craig Borysowich (Chief Technology Tactician)

Create a layout for each type of page (e.g., marketing page, search page, or data entry page) on the site. The layout organizes the elements to appear on the page and identifies where they are to appear.

Create a Layout Grid

Start by creating a grid that maps to the browser window and monitor size used by the target audience. The most commonly used browser window size is a 1024x768 pixel screen. The actual space available for a Web page is a little less than that since some of the screen is taken up by the browser and its buttons.

Design a grid that is expandable and collapsible so that varied monitor and browser window sizes can easily be accommodated. Use this grid system to maintain consistency throughout your Web site.

Placement and Style

Decide where to put standard elements (e.g., corporate logos, navigation bars, link to home page) that are to appear on each page. Establish guidelines for placement and style of major headings, subtitles and navigation buttons. Indicate where major blocks of text and graphics will appear on the page.

Test the Layout

Gather sample text and graphic content and experiment with placement of the information in designing the page layout. Try the layout with both the most complex and the simplest pages on your site to make sure the layout works well in either situation.

Test the layout with different sized browser windows and monitors. Make sure that the elements fit proportionally within a page when the window is expanded or collapsed. For example, when expanded, ensure that the elements do not appear to be floating in too much empty space. When collapsing window size, the elements should not be jammed too close together.

Tips and Hints

Aim for a modular design so that new content can be added to the site without redesigning the basic page layout.

Since users tend not to scroll down or across a web page, place important navigational elements as close to the top and left of the page as possible.

In general, pages closer to the top level of a site organization tend to emphasize the graphic and navigational elements of the site and act as a sort of menu and summary to guide users to the actual content. The lower level pages focus on the content and tend to de-emphasize the navigational elements.

The page layout appears as a pattern of text and graphics to the reader when viewed on-line. Keep in mind that regular, repeating patterns tend to be more visually pleasing than uneven, inconsistent patterns.

Don't overcrowd the page. Allow for empty space. Balance the style and content of the page.

Creating Style Sheets for Webpages

Creating Style Sheets for Webpages

Craig Borysowich (Chief Technology Tactician)

Consistency is an important success factor in Web page design. Style sheets provide a means to ensure consistency throughout a Web site and allow the designer to specify typographically controlled effects (e.g., font, position, color, or underlining) on Web pages.

Style sheets also facilitate site maintenance. By collecting style information in a separate page, the look and feel of an entire site can be changed by editing one page instead of the many documents that link to the style sheet.

Use

Styles apply at different levels within HTML documents and on a Web site:

· Element Level. Style applies to a single HTML tag.

· Document Level. Style applies to an entire document and is placed in a style block at the top of the page.

· Site Level. A master style sheet defines style rules for any HTML document that links to the style sheet.

Create and maintain the master style sheets centrally. Use them to apply updates across an entire site.

Ensure that team members are aware and make use of the master style sheets. Allow individuals the freedom to create individual styles for documents and tags to apply effects that are isolated to single documents.

Cascading Style Sheets

The IETF (Internet Engineering Task Force) proposal to extend the capabilities of HTML to support page layout using typography is known as cascading style sheets. This term describes how style sheets behave. A style sheet has the ability to overlap and overrule other style sheets. For example, a document style sheet overrules a master style sheet in applying style definitions.

Tips and Hints

Web browsers include varying degrees of support for style sheets. You need to be aware of the capabilities of the browsers in use by your target audience when implementing style sheets.

See Also

The official specification for Cascading Style Sheets is available on the World Wide Web Consortium (W3C) site.

Creating the Web Page

Craig Borysowich (Chief Technology Tactician)

Create each individual Web page by incorporating the content, graphics and features required within the layout specified for the page type. Web pages are created by hand using text editors and word processors. There are also a variety of editing tools specifically designed for formatting Web pages.

The most popular format for constructing Web pages is HTML but there are alternate formats to consider for publishing electronic documents.

Dynamic Versus Static Web Pages

When creating HTML documents, you have the option of creating static pages that are stored and viewed in the format created by the author, or creating dynamic pages that change as the information is collected and displayed. Dynamic HTML is gaining popularity due to its support for keeping content more current in real time and for its use in developing interactive, Web-based applications.

Keep in mind the following when deciding what features to implement:

· Web browser versions in use by the target audience,

· browser capabilities,

· support for HTML extensions.

HTML Extensions

The HTML specification focuses on the structure of the HTML document rather than on its presentation. The intention is to permit HTML to be run on many different types of systems. For example, the specification defines tags that label parts of the document as headings, paragraphs or lists. The styles applied to each individual element in the HTML is left to the browser or other programming software used to view the information.

Browser manufacturers, in response to needs of page designers to control the style and formatting more directly, have added extensions to the HTML specification. Additional tags and attributes have been defined that permit the designer to control the style and formatting of the HTML document (e.g., fonts, line breaks, font color, font size and alignment). Some of these extensions are finding their way into the latest version of the HTML specification. Be aware that the extensions used by one browser may not work within another.

Writing Content for the Web

Craig Borysowich (Chief Technology Tactician)

In contrast with written documentation, Web content is non-linear. Rather than reading through material sequentially, the target audience accesses each page on a Web site using hyperlinks. The user chooses a path for navigating the site and may at any time link to another site on the Web.

Guidelines

With this in mind, here are some general guidelines for creating Web content:

· Split the information into coherent chunks that can standalone and connect the information using hyperlinks.

· Be concise. Keep individual chunks (i.e., the pages) short. Aim for the equivalent of one to three printed pages of text for each Web page.

· Use nested headings, i.e., a general heading followed by sub-headings.

· Use meaningful names for the headings and for the title of the Web page. The titles and headings are indicative of the content within.

· Highlight keywords in the text using typeface variations or color for emphasis.

· Use bulleted lists.

· Present just one idea per paragraph of text.

· Avoid writing sentences using "click here" to designate a link. Write the sentence as you normally would and place the hyperlink next to the most relevant word in a sentence.

· Don't overuse hyperlinks. Incorporate the most important and relevant hyperlinks within the main body of the text. Add a section at the bottom of the document for additional links that may be of interest to the reader.

Using Typography in Web Page Design

Craig Borysowich (Chief Technology Tactician)

The choice of font and the options for using typography on Web pages is improving. Originally, the HTML specification did not include options for specifying typographic elements, limiting the designer to use the default fonts available on most systems. Extensions to HTML and revisions to the specification now include capabilities to specify fonts.

Options for Including Fonts

To display a font specified within an HTML document, the Web browser must support the font and the font must be present on the user's system. Several techniques support the inclusion of more sophisticated fonts. The Web browser vendors supply fonts that can be freely downloaded from their Web sites. Another technique involves embedding the font, or the relevant parts of the font, into the HTML file to download with the Web page.

Guidelines

Some general guidelines for typography in Web page design:

· Use typography to create visual contrast on the page. For example, varying the size of the font and using empty space effectively helps create contrast and patterns on the Web page that are visually pleasing.

· Don't overuse an effect. For example, use bold to make things stand out but don't make everything bold or the effect is lost.

· Use as few heading styles as possible. Ideally, create a style for a main heading and one sub-title. Apply the style consistently throughout the site.

· Don't use uppercase headings. These are difficult to read.

· Shorten the line length of text so it can easily be viewed and read. Restrict the text line length to about 40 to 60 characters, depending on the Web browser and monitor sizes used by the target audience.

· Be aware that users assume a change in effect, such as a different color or font size, has some meaning. Apply these effects with care.

· Avoid using special characters such as "smart quotes" and the "em" dash as these are not supported in the HTML basic character set.

· Consider rendering typographic effects as bitmap graphics if you are unable to create them using the available fonts.

Implementing Graphics in Webpage Design

Craig Borysowich (Chief Technology Tactician)

There are a variety of ways to enhance Web pages by incorporating graphics. For example, use graphics to:

· create small background strips or repeating tiles,

· add larger background images using photographs,

· embed graphical images to enhance the textual content,

· serve as the main content for the page (e.g., imagemaps),

· create icons for navigating the site.

Guidelines

Some general guidelines for incorporating graphics in Web page design:

· Adding graphics to Web pages makes the user wait longer for the page to download. Make sure the images are compelling and add value to make it worth the wait.

· Avoid background graphics that use high-contrast patterns making the text on the page difficult to read.

· Limit the background graphic size so that it does not take too long to download. As a rule of thumb, limit the size to about 10K.

· Avoid dithering by mapping graphics to the 216-color browser-safe palette.

· Use GIF format for images that use few, flat colors (e.g., icons) and JPEG for complex images (e.g., photographs).

· Use techniques such as interlacing, caching, and streaming to speed download time of graphics and multimedia files.

· Exploit HTML attributes to give the impression of faster download speeds. For example, use low source images to load a light version of a graphic before the final version downloads. Download non-graphical content first by manually setting the width and height of images in the HTML file.

Designing a Home Page

Craig Borysowich (Chief Technology Tactician)

The home page is the first page that is downloaded when a Web site's domain name is typed by a user. It is generally the page that can be directly accessed from any other page on the site.

Purpose

The home page often has one or more of the following uses:

· grab the attention of the visitor to the site,

· provide site navigational support,

· identify the organization owning the site through graphics or text,

· highlight what's new on the site,

· provide users with a feedback link or contact point.

Approaches

There are a variety of approaches to meeting the needs of the home page including:

· Highlight and provide direct links to as much of the site content as possible.

· Keep the home page simple and provide links only to the site's main sections.

· Provide a cover page or graphical image similar to a magazine cover to set the tone but not provide much information.

· Split the home page into a series of multiple entry pages tailored to the needs of each audience (e.g., new users versus repeat users).

Issues

There is no one absolutely correct way to design a home page. The designer needs to balance style and content. Some issues to keep in mind include:

· Size of the browser window is limited and can easily be overcrowded if too many functions are included in the home page.

· Large graphic files may be compelling and attention-grabbing to new users but repeat users who want to navigate directly to an area on the site may not wait for them to load.

· Presenting too much information on the home page confuses and overwhelms the target audience.

· Limiting the site to one home page removes the possibility of designing pages that are customized to particular audiences.

· Promotional billboards that change frequently are useful to support marketing campaigns.