Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

WebDesign

VIEWS: 7 PAGES: 29

									Web Site Design

    MIS 7223

    Fall 2002
       Outline

   Site Types
   Web Page Groupings
   Navigation
   Consistency
   Content
   Graphics
   Text
   Maintenance
   Submission
   Steps in Designing a Web Site
                                Site Types
 Money Sites
      corporations
      small businesses
      nonprofit organizations
 Information/Opinion Sites
      corporate intranets
      educational institutions
      health sites, fan sites, political/religious/social sites
 Ego Sites
      personal page
      opinion sites
      art, music, fan sites
                             Money Site
 Make sure the visitor has every opportunity to spend
  money at the site
 Make sure it looks professional, is easy to navigate, and is
  marketed properly
 Audiences
      Current Customers
      Potential Customers
      Investors
      Your Sales Force
      activists
      information-seekers
      donors
            Information/Opinion Site

 Follow graphics and text guidelines
 Focus on content delivery
 Must be organized
      easy to navigate
      not a mile long!
 Audiences
      employees
      students
      etc.
                             Ego Site

 Have restraint -- use only the necessary elements
 Audiences
      the creator of the site
Questions to Ask when
Developing a Web Site

Why are we building the website?

  Who is are target audience?

  What do they want from us?
                  Web Page Groupings


                                    Main Page
                                    Home Page


           Main Topic        Main Topic          Main Topic        Main Topic
              #1                #2                  #3                #4


Subsidiary Page   Subsidiary Page     Subsidiary Page   Subsidiary Page
     #1a               #1b                 #3a               #3b
                        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 and to all 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
         Navigation through Your Site
 Navigational Tools
       graphics -- buttons and imagemaps
       text -- if using graphics’ links then must also use these
       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?
                             Content

   Update constantly
   Contact information
   Copyright ?
   Be clear
   Privacy Policy ?
   Titles and title bars are very important
       Searching based on keywords (<META> tags)
               How to Add Content

   Update constantly              Questions and Answers
   Contests/Sweepstakes           History
   Tours                          Free Offers
   Demonstrations                 Unique Information
   Recipes                        Links
   Art made from the product      Coupons
                                   Tie-Ins
                            Graphics
 Faster is better
 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 or black ?

    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
                             Text Cont.

 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
   Update and Revise
      Steps in Designing a Web Site

   Objective(s) of the site
   Type of site
   Host for the site
   Decide on the content
   Gather content pieces
   Test the site
   Promote the site
   Update and maintain the site
Page Plan of Attack

       Logo
       Key Image
       Buttons
       Text
      Recipe for a Successful Web
                  Site
                         Compatibility
 Content
                         Visual Design
    freshness counts
                         Interaction Design
    quality counts
                            feedback and
 Information Design
                             control
    organize
                            creativity and
    be clear
                             productivity
 Performance               communications

                            adaptivity
                 Web Site Structure
                 for an E-Business
   E-business’s name
   Slogan, logo, or trademark
   Stmt of mission or purpose
   Info on products or services
   Press releases and testimonials
   Employment info
   Contact info
   Maps to physical locations
   Web site map
   Customer support info
   Purchase or customer info forms   Napier, et al., 2001
                Effective Web Design

 Maintain consistency
      On every pg: e-bus name, contact info, logo/trademark, update date,
       copyright info, navigation elements
 Navigation
      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
 Home page
      Make identity of e-business clear and communicate a basic
       description of the purpose of the Web site


                                                            Napier, et al., 2001
                Effective Web Design

 Color
      Don’t use too many different colors
      Background color should be either very light and neutral or black
      Should reflect the values of the Web site’s audience
      Available colors for the Web browser
 Text
      Pgs short and to the point
      Concise factual info instead of mktg “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

                                                             Napier, et al., 2001
                   Web Design Tips

   Keep it simple
   Use a lot of white space (not cluttered)
   Colors are browser safe and fit the Web site’s message
   White or black background colors
   Same color scheme across all pages
   Avoid background images that obscure the text
   Avoid frames unless absolutely necessary
   Make certain that viewers can quickly scan text
   Make certain that fonts and font sizes and text formatting are
    consistent across all pages
                                                     Napier, et al., 2001
     Preparing Site for Submission

 Create 10 keywords and a sentence that describes
  your business or site
 Use <META> tags for keywords and description
 Use keywords and descriptions at beginning of your
  page(s)
 Choose the title for your page very carefully
             Bad Web Design

 Inadequate response to email inquiries

 Confusing page layouts

 Hidden contact information

                                (Fister, 1999. Training)
             Good Web Design

 Display pertinent information prominently

 Put the users in touch with a person

 Monitor traffic and inquiries, and adjust
  content accordingly
                                 (Fister, 1999. Training)
                       References

 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.
 Napier, H. A., Judd, P. J., Rivers, O. N. and Wagner, S. W.
  (2001). Creating a Winning E-Business, Course
  Technology.
 Nielsen, J. and Tahir, M. (2002). Homepage Usability: 50
  Websites Deconstructed, New Riders Publishing.
 And various websites …

								
To top