Knowledgebase: Website
Web Design
Posted by Craig Dusek on 30 January 2007 07:09 PM
So you have your own web page... Well if you are an accountant you know that GAAP serve as a guideline for how you construct financial reports. How do you know what to do with a website though?

This article will help you with the basics of:

  1. Web Page Groupings

  2. Navigation

  3. Consistency

  4. Content

  5. Graphics

  6. Text

  7. Maintenance

  8. Submission

  9. Homepage Usability

  10. Steps in Designing a Web Site


Questions to Ask when Developing a Web Site



  • Why are we building the website?

  • Who is our target audience?

  • What do they want from us?



Web Page Groupings


The basic flowchart of your website should be:


Web Page Layout


Home Page/Main Page

  • Gateway to your site

  • Make identity of e-business clear and communicate a basic description of the purpose of the Web site

  • Must convey to the visitor


    • the site’s purpose -- who, what, when, where, and why

    • type of content contained in the site

    • how to find the content



Main Topic Page(s)

  • Page that the home page links to

  • Must include link back to home page

  • Must be able to return to any of main topic pages


Subsidiary Page(s)

  • Subsets of a main topic page

  • Must be able to return to home page

  • Must be able to return to any of main topic pages



Real-World Issues



  • Internet data speeds are variable - Despite what you may believe, not everyone is on high speed

  • Customer computer speed may be slow - Many people use computers from home that are several years old

  • Screen resolution and contrast are poor

  • Browser window size is smaller than you think - At the time of this article posing, 20% of Internet users browse with 800x600 resolution. Try setting your monitor to that resolution if you do not currently use it.

  • Software differences (browser incompatibilities) - Huge issue in the 90's, but the w3c.org has laid down some ground rules that MOST browsers stick to

  • Competitive websites set the standards

  • Limitations in the abilities of your customers - Can disabled people view your website?



Site Navigation



  • Navigational Tools


    • graphics -- buttons and imagemaps

    • text -- if using graphics’ links then must also use these

    • Frames - w3c has depricated Frames, but users didn't like them anyways. Don't use frames


  • Display important information prominently on the first screen

  • Always open other people’s sites as a full page or a separate window

  • Must contain all links found on first page on all subsequent pages including a home link (Remember that a search engine does not always take one to the home page, therefore the user must be able to get to the home page from any pg)

  • Avoid scrolling horizontally

  • Main Page (Home Page) should also avoid vertical scrolling, or minimize vertical scrolling

  • Use bookmarks to ease navigation through lengthy documents



Consistency



  • Maintain consistency - On every pg: e-bus name, contact info, logo/trademark, update date, copyright info, navigation elements

  • Size

  • Color

  • Location



Content



  • Why would anyone visit my site a second, third, fourth, fifth, etc. time?

  • Update constantly

  • Contact information

  • Copyright ?

  • Be clear

  • Privacy Policy ?

  • Titles and title bars are very important - Searching based on keywords ( tags)



Graphics



  • Faster is better – web site delays affect user performance and attitude

  • IMG ALT -- identifies the link if the image does not appear

  • Too large / don’t fit on screen


    • keep below 35K in graphics per page

    • length of average monitor screen is 295 pixels

    • width of screen changes -- 640, 800, 1280 pixels


  • No offensive/inappropriate images

  • No underconstruction signs

  • Avoid personal and cutesy pictures on business sites

  • Avoid overused clipart / meaningless graphics

  • Remove blue borders around linked images

  • Once it downloads, it better not be ugly



Text



  • Avoid black background / default gray / anything distracting / bad color combination


    • Background color should be either very light and neutral

    • Colors should reflect the values of the Web site’s audience

    • Available colors for the Web browser


  • Do not mix text attributes / too small / underlined

  • Limit the number of text colors

  • Do not use blinking text

  • When there is too much text, add graphics (to break up the text)

  • By reading a link, it should be apparent where it leads to

  • Pgs short and to the point

  • Concise factual info instead of marketing “fluff”

  • Paragraph breaks, headings, bulleted lists, and ample white space is needed because users’ scan text quickly

  • Narrow margins rather than text that goes from margin to margin

  • Remember that people still print



Maintenance



  • Check for Browser Support

  • Validate the HTML

  • Check Links

  • Spell Check

  • Alternative Text (IMG ALT)

  • Update and Revise



Preparing Site for Submission



  • Create 10 keywords and a sentence that describes your business or site

  • Use tags for keywords and description

  • Use keywords and descriptions at beginning of your page(s)

  • Choose the title for your page very carefully



Usability


"...sites work best when they follow the conventions users know from other sites. So the more sites do things a certain way, the more usability will usually increase by complying with that convention."


  • Download Time


    • 10 seconds at most

    • File size of less than 50 KB


  • Page Width - A liquid layout that works at anything from 620 to 1024 pixels

  • Liquid vs. Frozen Layout

  • Page Length - 1 to 2 full screens; no more than 3 full screens

  • Frames

  • Logo placement and size


    • Upper Left hand corner

    • 80x68 pixels


  • Searching


    • Provide on homepage

    • Upper part of page; preferably in right or left corner

    • White box color

    • Call it "search"; "go" also acceptable

    • At least 25 character width of box, but 30 characters is better

    • Simple search; advanced search generally not shown on homepage


  • Navigation


    • One of four main types: left-hand rail, tabs, links across the top, or categories in the middle of the page

    • Use "footnote style" links for copyright and contact information; at most 7 links across the bottom of the page

    • Use a "Site Map" link on the first page, if you have one


  • Routing page

  • Splash page

  • Sign-in - If protected content, either include the word "account" in the name or call it "Sign in"

  • About - Always include this page and call it "About "

  • Contact information - Provide link to contact information and call it "Contact Us"

  • Privacy Policy


    • Include if site collects data from users

    • Call it "privacy policy"


  • Job Openings - If recruiting is important to company, place "jobs" link on home page; otherwise list under "About Us"

  • Help


    • Only offer if site’s complexity demands it

    • Place in upper right


  • Auto-playing music - Don't EVER do this

  • Animation - See also Auto-Playing music

  • Graphics/Illustrations - Between 5-15% of the homepage space

  • Advertising - At most 3 ads (whether external or internal)



Generally Accepted Webauthoring Practices



  • Body Text


    • Color: black

    • Size: 12 pt.

    • Not frozen

    • Font: Sans-serif


  • Background color -- white

  • Link


    • Unvisited color: Blue

    • Visited color: Purple

    • Unvisited links should be the most saturated color; visited links should be a desaturated or less prominent color, but not light gray

    • Use link underlining, except possibly in lists in navigation bars



    Most Violated Homepage Design Rules



    1. Emphasize what your site offers that’s of value to users and how services differ from competitors

    2. Use a liquid layout

    3. Use color to distinguish visited and unvisited links

    4. Use graphics to show real content

    5. Include a tag line that explicitly summarizes what the site or company does

    6. Make it easy to access anything recently featured on the homepage

    7. Include a short description in the window title

    8. Use a "Search" button to the right of the search area

    9. Give the % of change on stock quotes, not just the points gained or lost

    10. Don't include an active link to the homepage on the homepage



    User Pet Peeves




    1. Bad search engines

    2. PDF files for online reading - Users dislike PDF's

    3. Not changing the color of visited links

    4. Non-scannable text

    5. Fixed font size

    6. Page titles with low search engine visiblity

    7. Anything that looks like an advertisement


      • Banner blindness

      • Animation avoidance

      • Pop-up purges


    8. Violating design conventions

    9. Opening new browser windows

    10. Not answering users’ questions - "The ultimate failure of a website is to fail to provide the information users are looking for."



    Steps in Designing a Web Site



    1. Plan objective(s) of the site

    2. Decide on type of site

    3. Choose a host for the site

    4. Decide on the content

    5. Gather content pieces

    6. Test the site

    7. Promote the site

    8. Update and maintain the site



    Bad Web Design


    Bad websites can easily be identified by inadequate response to email inquiries, confusing page layouts, and hidden contact information.

    Good Web Designs However...


    Good Websites can easily be identified by displaying pertinent information prominently, putting the users in touch with a person, and monitored traffic and inquiries with adjusted content accordingly

    References



    • Awad, E.M. (2002). Electronic Commerce: From Vision to Fulfillment, Prentice Hall, Upper Saddle River, NJ.

    • Fister, S. (1999). "Why Web Sites Suck," Training, November, pp. 40-46.

    • Flanders, V. and Willis, M. (1998). Web Pages That Suck, Sybex, San Francisco.

    • Galletta, D.F., Henry, R., McCoy, S. and Polak, P. (2004). "Web Site Delays: How Tolerant are Users?," Journal of the Association for Information Systems (5:1), January, pp. 1-28.

    • Napier, H. A., Judd, P. J., Rivers, O. N. and Wagner, S. W. (2001). Creating a Winning E-Business, Course Technology.

    • Nielsen, J. (2003). "The Ten Most Violated Homepage Design Guidelines," http://www.useit.com/alertbox/20031110/html, (Jan. 13, 2004).

    • Nielson, J. (2004). "Top Ten Mistakes in Web Design," http://www.useit.com/alertbox/9605.html, (Jan. 11, 2005).

    • Nielsen, J. and Tahir, M. (2002). Homepage Usability: 50 Websites Deconstructed, New Riders Publishing.

    • And various websites...

(192 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments:
Help Desk Software by Kayako Fusion