arc

Document Sample
arc Powered By Docstoc
					 Web Site
Analysis and
  Design
                                Outline
• Part 1: Planning
  – What kind of site?
  – For what audience?
• Part 2: Design
  – Issues
  – Tools
• Part 2: Implementation
  – HTML
  – Putting a site on-line

   Ottawa E-Commerce Overview    A. Rau-Chaplin   0-2
          Goals for this Module
• Understand web sites as structured
  objects
• Enough knowledge to be dangerous:
  Being a good client…
• It is not magic! Demystifying HTML
• Enough skills to post your assignments



  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-3
                         Part 1:
                        Planning
   So you want to create
        a web site?



Ottawa E-Commerce Overview   A. Rau-Chaplin   0-4
Why are you building this site?

• To make money
• To disseminate information
• To stroke your ego




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-5
 Sites designed to make money
• Corporations
  – IBM
• Small Business
  – Rosebridge House
• Non Profit Organizations
  – Canadian Red Cross




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-6
Sites designed to make money:
      Common Qualities
• It is not about art
• It is not about ego
• It can and should be about
  information
• Its mostly about money


  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-7
 Sites designed to disseminate
    information or opinions
• Corporate intranets
  – Banner
• Educational institutions
  – Dalhousie E-commerce Program
• E-zines
• Birds of a feather sites
  – health sites, fan clubs, political, social,
    religious,...

   Ottawa E-Commerce Overview   A. Rau-Chaplin    0-8
  Sites designed to disseminate
 information: Common Qualities
• It is not about art
• It is not about ego (for info sites)
• Its often about ego (for opinion
  sites)
• Its mostly about information
• Its generally not about money

  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-9
                         Questions
• Where do Government sites fit in?
  – Information
      • www.strategis.ic.gc.ca
  – Money Making
      • www.canadapost.ca
      • https://commerce02.procure.com/cpc/cgi-
        win/cata.exe/e
  – Ego ???


  Ottawa E-Commerce Overview   A. Rau-Chaplin     0-10
             Government On-line
• The same but more…
  – Diversity of audience
  – Language
  – Consistence
  – Fairness
                                                   On-line
  – Security
                                                 Real-Time
  – Accountability                               Processing
• Trends             On-line
       On-line      Initiation
             Info
   Ottawa E-Commerce Overview   A. Rau-Chaplin           0-11
                  Other Questions
• What other categories of sites can you
  think of?
• What does a user expect of a money
  making site?
• What does a user expect of an
  informational site?
• How should the category affect the
  sites design?

    Ottawa E-Commerce Overview   A. Rau-Chaplin   0-12
 Who is your target audience?
• Why is it important?
• What kinds of issues does it effect?
• Who is the audience for
  – IBM
  – Canadian Red Cross
  – Worklink




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-13
                 A Single Audience?
• Audience for Business Sites
  –    Current Customers
  –    Potential Customers
  –    Investors
  –    Suppliers (Separate?)
  –    Sales force (Separate?)
  –    ???



      Ottawa E-Commerce Overview   A. Rau-Chaplin   0-14
                           Scenarios
• Audience for Business Sites: Current
  Customers
  – Provide all critical info about your
    products and services
  – Order verification
  – Placing new orders
  – ...
• What tasks? What scenarios? Make a
  list!

   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-15
                            Audience
• Who are they?
• Separate then into subgroups based on
  – Level of interest
  – How they arrived
  – Multiple entry points??
    • Examples: dell,(W7PXM), download.com
  – How are they expected to search for what
    they want?

   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-16
                     Planning Tools
• Principles
• Scenarios




   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-17
                           Principles
• A short listing of what it is all about
  –   Audience
  –   Look
  –   Purpose
  –   Image…
• An aid in making future decisions
• A language for communication
  between player
   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-18
                          Scenarios
• Role-playing
  – The players
  – Their Task
• A story, not a sequence of commands
  – Customer oriented
  – Mixed granularity
• How many scenarios?
  – Enough to cover the main audience with
    “typical” motivation.

  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-19
                             Part 2:
                             Design

        Issues and Tools




Ottawa E-Commerce Overview    A. Rau-Chaplin   0-20
                                Outline
• Part 1: Planning
  – What kind of site?
  – For what audience?
• Part 2: Design
  – The home page
  – Navigation
  – Using Storyboards, site maps, page
    layout grids
• Part 3: Implementation
   Ottawa E-Commerce Overview    A. Rau-Chaplin   0-21
                       Types of pages
                               Main Page
                               Home Page

    Main Topic             Main Topic               ...   Main Topic
       #1                     #2                             #n

                                           •Tree Structure
Subsidiary       Subsidiary                •Depth?
   #1a              #1b                    •Content view

      Ottawa E-Commerce Overview   A. Rau-Chaplin                  0-22
                         Home Page
• The sites purpose
  – what, when, who, where and why
• What kind of content is contained in
  the site?
• How to find the content?
• Am I the target audience?
• Put the most important content up
  front!
  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-23
                   Main Topic Pages
•   All about navigation
•   Important topics go here
•   Dynamic content
•   Defines the sub domain!




     Ottawa E-Commerce Overview   A. Rau-Chaplin   0-24
                Subsidiary Pages
• Subsets of the main topic page
• You are now two levels down!
  – Make clear where the user is
  – Make clear when on the site and off
  – User may arrive here first!
• Example:
  – CNN News


  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-25
                       On Every Page
•   Content matters
•   Writing style matters
•   Structure matters
•   Consistence matters
•   Aesthetics matter

• Above all else restraint matters
• Good design = simple
     Ottawa E-Commerce Overview   A. Rau-Chaplin   0-26
                                Outline
• Part 1:
  – What kind of site?
  – For what audience?
  – Analysis of Tuns Press
• Part 2: Design
  – The home page
  – Navigation
  – Using Storyboards, site maps, page
    layout grids
• Part 3: Implementation
   Ottawa E-Commerce Overview    A. Rau-Chaplin   0-27
                         Navigation
• The first screen…
• Navigational tools…
• Consistence !!!!!!!




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-28
                 The first screen
• Grab them now!
  – The back button is only a click away!
• Display important information
  prominently
• You establish navigational aids here
• You establish expectations here
• Not just navigation, content too
• Not necessarily only one first screen!
  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-29
               Navigational Tools
• Four main navigational tools
  –   Navigational graphics
  –   Text
  –   Frames
  –   Page layout




   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-30
  Navigational tools: graphics
• Buttons
  – any graphic that is a link
  – tell them where they are going BEFORE
    they get there
  – a button should look like it’s a button!
  – buttons have a grammar, they repeat!
• Image maps
  – may not repeat
  – where should I click???
  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-31
         Navigational Tools: Text
• Excellent navigational aids
• Light, fast, clear where before jump
• Still requires visual structure
  – Don’t do paragraphs of links!
• Even if you have image links you still should
  have corresponding text ones
  – Loads first, even if page stopped loading
• Use clear concise language, people scan pages
• Don’t do “click here for …”
     Ottawa E-Commerce Overview   A. Rau-Chaplin   0-32
                       Consistence

• Good design is about taking a
  small number of ideas and pushing
  them through all aspects of a
  design

•It is everything!
• Remember its about communications!

  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-33
     Consistence in Navigation
• Consistent look
  – Size, shape, color,
• Consistent position
  – Top, left side, bottom
• Consistent operation
  – Two buttons with the same label go to
    the same logical place


  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-34
        Not just coding html!




Ottawa E-Commerce Overview   A. Rau-Chaplin   0-35
                    Design Process
• Design
  –   Principles
  –   Scenarios
  –   Storyboard
  –   Site map
  –   Main pages
  –   Page layout grid
  –   Check lists
• Mockup/Prototype
• Evaluate
  – Usability Study
   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-36
 Example:
 WillieBoy
 Surfgear




Place Holder Page
      Ottawa E-Commerce Overview   A. Rau-Chaplin   0-37
                               Design
• Design Principles
  – A short listing of what it is all about
      •   Audience
      •   Look
      •   Purpose
      •   Image…
• Scenarios



  Ottawa E-Commerce Overview    A. Rau-Chaplin   0-38
                        Storyboard
• Don’t code before you think!
• PLAN, PLAN, PLAN…
• What is the structure of the site to
  be?
• What are main topic pages?
• What is the main navigation form?



  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-39
Storyboard: Site Structure




Ottawa E-Commerce Overview   A. Rau-Chaplin   0-40
                        Main Page




Ottawa E-Commerce Overview   A. Rau-Chaplin   0-41
              Page Layout Grid




Ottawa E-Commerce Overview   A. Rau-Chaplin   0-42
                             Mock-up




Ottawa E-Commerce Overview    A. Rau-Chaplin   0-43
         What every site needs…
•   Privacy statement
•   Company info
•   Search
•   …




     Ottawa E-Commerce Overview   A. Rau-Chaplin   0-44
                       Design Process
• Design
  –    Principles
  –    Scenarios
  –    Storyboard
  –    Site map
  –    Main pages
  –    Page layout grid
  –    Check lists
• Mockup/Prototype
• Evaluate
  – Usability Studies
      Ottawa E-Commerce Overview   A. Rau-Chaplin   0-45
                           Usability
• Wear the rubber meets the road
• Buying on the web?
  – 60-80% of transactions pend
• The web page model
  – From browsing to processing
• 80% of software in interface
• The heart of customer centric design
• The Science/Art of usability
  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-46
                Cognitive Processing
                                       Goal

    Intention to act                        Evaluate interpretations


 Sequence of actions
                                                       Interpret perception

Execution of actions                      Perceive state of the world


                                    The World
       Ottawa E-Commerce Overview     A. Rau-Chaplin                 0-47
   Human Information Processing
          Person                                      Computer

             Execute                                    Read/Scan


Goals                                                             Process



            Evaluate                                     Output

        Ottawa E-Commerce Overview   A. Rau-Chaplin                 0-48
Norman’s 7 Principles for making
    difficult tasks simple
• 1) Use knowledge in the world and the head
  – Example: letters on a keyboard vs. knowledge of
    touch typist
  – Reminding is ok!
  – The limits of short term memory: 7  2
• 2) Simplify the structure of tasks
  –   The shape of the decision tree
  –   Wide vs. deep structure
  –   Wide: Select an ice cream flavor
  –   Deep: Complete a multi-step transaction
   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-49
Norman’s 7 Principles for making
    difficult tasks simple
• 3) Make things visible and give feedback
  – How many times have you been on a page and sat
    their wondering what you are meant to do next?
  – Get the visual hierarchy right
  – Think about relative size, color, shape,
    placement
  – People don’t read pages they scan them!
  – Give each action an immediate and obvious
    effect
  – Not just visual cues, also audio …

   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-50
Norman’s 7 Principles for making
    difficult tasks simple
• 4) Get the mappings right
  – Mapping = relationship between two
    things (normally object + controller)
  – Use Natural mappings that take
    advantage of physical analogies and
    cultural standards




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-51
                         Mappings




Ottawa E-Commerce Overview   A. Rau-Chaplin   0-52
Norman’s 7 Principles for making
    difficult tasks simple
• 5) Exploit the power of constraints
  – Constraints can make design easier: Lego
  – Physical constraints
       • Example: The slider moves only up or down
  – Semantic constraints
       • Rely on meaning of situation to control set of possible
         actions
       • Example: Red on a balance sheet
  – Cultural Constraints (Conventions)
       • Left to right vs. right to left
  – Logical Constraints
       • Check all steps on a process

   Ottawa E-Commerce Overview   A. Rau-Chaplin               0-53
 Norman’s 7 Principles for making
     difficult tasks simple
• 6) Design for errors
  – People make errors!
  – Human language provides for automatic
    error correction … machines rely do!
  – Slips vs. mistakes
  – Slips result from automatic behavior
    • Typically right goal wrong action: easy
  – Mistakes result from conscious deliberation
    • Maybe wrong goal:hard to detect and fix

    Ottawa E-Commerce Overview   A. Rau-Chaplin   0-54
Norman’s 7 Principles for making
    difficult tasks simple
6) Design for errors cont…
• What is a designer to do?
  – Understand the causes
  – Allow for “undo”
  – Make it easier to discover the errors
    that do occur
  – Errors are often a users approximation
    of a solution. Help them get there!

  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-55
Norman’s 7 Principles for making
    difficult tasks simple
7) Standardize
  – When all else fails rely on
    standardization
  – Then it only has to be learnt once!




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-56
                   Usability Testing
•   Formative testing – during “design”
•   Aim: Improve the interface
•   Fixed tasks
•   “Speaking aloud” protocol
•   Post session questionnaire
•   Small number of subject 5-12
•   Fantastic potential for improvements

     Ottawa E-Commerce Overview   A. Rau-Chaplin   0-57
                            Exercise
• Pick a site and deconstruct it

• Outline the following…
  –   Type of site?
  –   Principles
  –   Possible list of Scenarios
  –   Basic Site map
  –   Basic Page layout grid

   Ottawa E-Commerce Overview   A. Rau-Chaplin   0-58
               Part 3:
           Implementation
            It is not magic!
           Demystifying HTML




Ottawa E-Commerce Overview   A. Rau-Chaplin   0-59
                               HTML
• Web documents are defined by the
  HyperText Markup Language (HTML)
• A language of tags
  – <greeting>Hello</greeting>
• Derived from SGML
• Fixed vocabulary
• Describes the structure of a
  document NOT a page layout language
  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-60
                               HTML
• Used as a Page Layout Language!
• Created in
  – A text editor
  – WYSIWYG Editor
  – Via a translator from some other format




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-61
Basic Structure of an HTML
         document
<HTML>
<HEAD>
   <TITLE>My first page</TITLE>
</HEAD>
<BODY>
A simple page with just this
sentence.
Nothing Fancy.
</BODY>
</HTML>

 Ottawa E-Commerce Overview   A. Rau-Chaplin   0-62
              Headings in HTML
• Headings
  – <H1>, <H2>, <H3>, <H4>, <H5>, <H6>


• Example
  <BODY>
  <H1>This is my main title.</H1>
  This text comes after the main title.
  <H2>The is a sub heading
  Here is a little old bit of text.
  <H2>This is another sub heading
  </BODY>
  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-63
                    Lists in HTML
• Type types
  – Ordered Lists <OL>
  – Unordered List <UL>
• Example
    <BODY>
    <H1>This is my main title.</H1>
    Three colors
    <UL>
       <LI>Yellow</LI>
       <LI>Blue</LI>
       <LI>Green</LI>
    </UL>
    </BODY>
  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-64
                 Images in HTML
• Can embed images in html documents
• Formats: .gif, .jpg
• Example
    <BODY>
    <H1>My Oldest Son.</H1>
    <IMG SRC=“max.jpg”>
    </BODY>




  Ottawa E-Commerce Overview   A. Rau-Chaplin   0-65
                  Links in HTML
<BODY>
<H1>My Oldest Son.</H1>
<IMG SRC=“max.jpg”>
Max goes to
<A HREF=“www.dal.ca”>Dalhousie Univ.</A>
Which is in Halifax.
</BODY>




Ottawa E-Commerce Overview   A. Rau-Chaplin   0-66
                               Sources
• Web Pages that Suck by Vincent
  Flanders & Michael Willis
• See www.webpagesthatsuck.com
• The Design of Everyday Things by
  Donald A. Norman, 1988
• Jakob Nielsen Alertbox at
  www.useit.com/alertbox/
• Html Guides:
  www.cwru.edu/help/Help_www2.html
  Ottawa E-Commerce Overview    A. Rau-Chaplin   0-67

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:9/28/2011
language:English
pages:67