DIESEL by wuyunyi

VIEWS: 15 PAGES: 113

									COM531 Multimedia

 Lecture 2 – Project Planning,
Storyboarding and Prototyping
             Web Site Design
Lecture Overview
   Introduction to project planning,
    storyboarding and prototyping
•   Planning a website
•   Elements of web design
•   Web conventions
•   Accessibility & Usability Issues
•   Screen resolutions and site optimisation
        Project Management

    A traditional approach to          A disciplined approach
    managing projects                   to managing projects
   Ad-hoc approach                   •Consistent method
   When things go wrong…             •Discipline = focus
       Work out how to turn things
        back right                    •Repeatable process
       Why things went wrong?
                                      •Achieving clearly defined goals
                                      and objectives
Project Management - steps
   Preparing:
- Getting ready is the secret for success
- Have a clear deliverable of the project
   Planning:
- What’s to be done? – define the tasks to produce the
   deliverable of the project
- Who will do it? – resources (people)
- When should each task be performed?– time
- What will they need to do it? – resources (material, skills)
- How much will it cost? – rates per m,h,d,w
…what happens IF? …for example some tasks are not
   completed as scheduled?
• Communicating
  What’s the best way to communicate project
  details to people who have an interest in the
- GANTT charts
- Calendars
- Built in reports in different formats including customization
   of own reports
- Filters to present information in several ways (selective
   presentation of info, avoid info overload, isolate events)
- Wizards
• Monitoring
    Managing people: people make projects happen
    & succeed
   People cannot contribute if they are:
    - overloaded
    - busy in other projects
    - unavailable due to holidays
   Consider the work allocated to individual
    resources and to see if they are overworked or
    unavailable and what it could mean to your
   Individual resources will need to be managed in
    different ways
   Controlling
-   record current progress and compare it with planned
- Consider the implications of changes to the project and
  any possible delays
- Consider various options to put your project back on
   Reviewing
-   Compare plan & actual: record your progress, recalculate
    your project and indicate where tasks are slipping and
    the impact of delays on your schedule compared to the
Project Planning
   Project development requires      advance
    planning to ensure success
   Planning ahead reduces workload
   Provides structure
   Allocates responsibilities
   Meets deadlines
Project Planning
   Many factors to consider before building and
    developing any multimedia application
   First step is to define project scope
   Essential to develop a consistent approach to
    this process
Project analysis form
Determine the scope of a multimedia project
- Create a project analysis form at beginning of project
- Shows professional approach
- Starts creative process
- Begins implementation process
 -Helps cost estimates
- Helps assess client focus, vision and readiness
Project analysis form
Project analysis form covers three main areas
 objectives

 audience

 production considerations
Identify objectives to be accomplished

   Identify primary goal and purpose of the
    application inform, motivate, teach/train, sell,
   Identify specific objectives to be achieved
   Provide one line summary of objective
Identify intended audience

   Describe by age, sex, educational level etc.
   Identify secondary audience
   Identify main use of application
   Identify any taboos or political factors that must
    be taken into consideration
Production considerations
Identify production considerations

   Primary delivery medium: CD-ROM, Internet,
    PDA, Mobile phone
   Alternate delivery medium
   Delivery platform system configuration
   Web browser limitations, I.E., Netscape, Opera
Production considerations

   Delivery style (entertaining..)
   Existing resources
   Updating requirements & expansion
   Target completion date & project budget
   Other factors
The Creative Process
After determining scope of project the next
stage is the design phase of the project
 Brainstorming
   Gather project team
   Assign a facilitator
   Be open minded
   Capture as many ideas as possible, no matter how improbable or ridiculous
   Record and review

   Concept development
   Storyboarding
   Flowcharts
The value of storyboarding
   Storyboard clearly defines all the visuals, text, animation
    and audio components that will be included in each
   Helps identify the elements that need to be produced for
    the project
   Provides a basis to determine the cost estimates for the
   Detailed storyboard ensures that you and the client are
    in agreement about the content of the project
   Avoids costs of additional changes to the scope of the
    project later on
The value of storyboarding
   Break content into parts that make sense to
    the user
   Identify how the user navigates through the
   Avoid navigation errors leading the user to
    “dead ends”
   Identify levels of content the user have to
Story Boarding
What is a storyboard?
 An organized collection of sketches

 Depicts major site levels / events

Why is it important?
 Details overall concept

 Keeps project on track

 Saves time
Story Boarding structure
5 typical layout structures
 Sequence

 Grid

 Hierarchical

 Web

 Combination
Story Boarding structure
Sequence Layout
Story Boarding structure
Grid Layout
Story Boarding structure
Hierarchical Layout
Story Boarding structure
Web Layout
Story Boarding structure
Combination Layout
Paper Composite
Screen prototyping
Story Boarding examples
Planning a website
• Define goals of site
• Brainstorming (team activity)
• Narrow goals and concepts (storyboarding,
• User feedback
• Implementation
• Evaluation
Web design facets
Five areas cover major facets of web design
• Purpose – the reason the site exists
• Content - deals with the form, structure and
  organisation of site content
• Visuals - deals with screen layout i.e. HTML &
• Technology - refers to interactive elements,
  consider client side & server side scripting
• Delivery – deals with issues relating to site
  reliability, platforms and download times
Formal Planning
Requirements leads to site plan document

Site plan document considers
• What kind of content?
• What look/feel/theme?
• Programs/applications
• Visitors type
• Known restrictions

- useful to combine this with storyboards
Site plan document
• Short goal statement   • Technical
• Detailed goal            requirements
  discussion             • Visual requirements
• Audience discussion    • Delivery requirements
• Usage                  • Site structure diagram
• Content requirements   • Budget
                         • Timescale

            Helps you make decisions
Site plan
Web site types
Site style versus complexity
Prototyping is common in almost every field of
  engineering design
Useful for complex, application/user centred,
  expressive designs

Purpose of prototyping:
   To identify user interface and other requirements - almost impossible
    to specify in advance
   Provides continuous feedback on the current design situation
   In HCI there will never be fully satisfactory design guidelines
    applicable in all circumstances
Merits of Prototyping
 Requirements capture
    Interface and functional requirements

 Reveals problems / prevents gross mistakes

 Allows evaluation and discussion which fosters
  innovative ideas (from designers and users)
 Users enjoy prototyping and feel involved

 Suggests level of user support

 Results in better usability

 Reduced deadline effect

 Fewer lines of code
Decision time…Considerations
   Design… HTML/Flash/DHTML/CSS
   Technology… Asp/Perl/Php/Coldfusion
   Database type…Access/MySql
   Off the shelf/custom design/customisation…
   Delivery platform... WebTV,Phone,
Decision time…Considerations
   Hosting… NT/Unix/Linux
   Bandwidth usage.. Standard.. Business..
   Upload/download times
   Backend Ecommerce… Worldpay.. Netbanx..
   User consideration …. Novice to expert
Website features

                   more detail in tutorial
Design fast loading web sites
   Always be aware of download times

   Minimize the use of images. Very often simple
    designs are the best

   Optimize images for the web

   Using tables creatively can lead to interesting
    designs. Tables have fast download times because
    it is just HTML code
Design fast loading web sites
   Don't use animated gifs unless it is necessary
   Use background images instead of big
    images whenever possible
   Use CSS Styles to maximum effect
   Use Flash sparingly
   Keep checking your load time and site
   NetMechanic - http://www.netmechanic.com/
   Free analysis of your web site
NetMechanic Load times
Decision making aids
• Audience information, view stats logs, user profiling
• Google analytics http://www.google.com/analytics
Web conventions
Web conventions
More……Screen resolutions
• Developing fixed-size Web pages is a
  fundamentally flawed practice
• Results in Web pages that remain at a
  constant size regardless of the user's
  browser size
• Fails to take advantage of the medium's
The current standard
  page size was
  1024x768 pixels.
Based on average
  screen resolutions
Source: onestat.com
   Statistics are used to justify layout sizes for
    Web pages.
   Currently, about 50%+ of the Web population
    can view a page at 1024x768 without
    unnecessary scrolling
   Resulting in a majority of sites created to
    meet this assumption
Screen resolutions
Viewable Browsing Area
Screen resolution wrong statistic to determine
optimum display size for Web pages.
• More appropriate metric would be viewable
  browsing area
• Viewable browsing area isn't the same as
  screen resolution. Many factors lead to a
  discrepancy between the two measurements:
Viewable Browsing Area
Viewable Browsing Area
• Standard toolbar areas: Navigation buttons URL input
  field use space. These can take up 120 pixels vertically
• Windows status bar: MS Windows users frequently
  show their system status bar
• Sidebar areas: Standard with Internet Explorer 5.0 and
  Netscape 6.0 Allow users to see bookmarks etc.
  Variable take up 160 pixels of horizontal space
• Browser companions: Programs such as Google's
  toolbar provide useful information, such as related
  items, use variable amount of space
Viewable Browsing Area
• Any or all of these factors can reduce viewing areas
• Web page designers account for this by developing
  pages that are about 770x430
• Still, pages size is fixed and don't fit many user-end
  settings and conditions
• Comparison of screen resolutions and average
  viewable browsing areas reveals significant
• Generally, as monitor resolutions increase, average
  viewable browsing areas tend to level off
• Next chart demonstrates this relationship
Viewable Browsing Area
Viewable Browsing Area
• Users with large resolution screens tend to
  have multiple browsers or applications open
  at smaller sizes and jump back and forth
  between them
• On average, users don't surf with viewable
  browsing areas equal to their screen
• Aim for optimum solution
The Challenge of Web Design
• Designing Web sites for all sizes seems like
  an impossible task
• Idea of accommodating a wide range of
  viewable browsing areas is frightening
• Web page creators continue to insist on
  absolute positioning of page elements
Basic guidelines
   Optimize for 1024x768, which is currently the most
    widely used screen size
   Do not design solely for a specific monitor size
    because screen sizes vary among users. Window size
    variability is even greater, since users don't always
    maximize their browsers
   Use a liquid layout that stretches to the current user's
    window size
Relative positioning
An alternative to absolute positioning is relative

This allows pages to contract and expand to fit
a variety of viewable browsing areas
Centered content
This approach centers content with unused
areas of a fixed-size layout to either side

Easy to achieve - space on sides of main
content can be used to enhance visual
branding with backgrounds
Centered content

• No real added benefit to the user in terms of
  gained screen space
• There's no more or no less content on a
  screen and workspace isn't maximized

Examples: yahoo.com and aol.com
Left justified
Placing less important content on the right

• Layout in which the main content and main
  navigation areas occupy the left-hand side of
  a page.
• Extra features i.e. ads appear to the right
Left justified
• Easy to implement; good use of screen real
• Results in a "canned" layout stifling design
• Horizontal scroll bars unattractive
Example: cnn.com
Fully flexible pages
Fully flexible pages ("liquid" pages)

• This approach allows pages to fully expand
  and contract
• Liquid pages are the best examples of
  relative positioning
Fully flexible pages

• Easy to achieve in HTML (100%)
• Offers users with larger screens optimum use
  of screen real estate
Fully flexible pages

   With larger resolutions, text passages
    become harder to read
   Has "cheap, HTML-feel"

Examples: cnet.com and ebay.com
Variable number of columns
For text-heavy sites, it may be desirable have
one, two, or three columns of text


• Makes good use of screen
• Allows for user control of display
Variable number of columns

• Doesn't work on all browsers and platforms
• Somewhat tricky to implement
• Limited situations where it can be effective
The above techniques can also be combined to
arrive at unique solutions for a given situation

• Left navigation is fixed
• Content is flexible

Example: WebReview.com
Resolving the Issue
• A range of sizes must be considered when
  developing Web pages
• Tools available to serve page specific
  resolutions (Javascript)
• Macromedia Flash (Issues)
• Problem set to get worse with increased
  range of alternative browsing devices
Web Hosting
 Brower wars
Internet Explorer Vs Netscape Vs Firefox Vs Opera Vs Chrome Vs Safari
Search Engine Optimization
    Target search engines

•    Yahoo, Google, MSN
Click throughs on searches
                    •According to research, the top
                    result on any search engine gets
                    42.1% of the click throughs; the
                    second 11.2%.

                    •More than 50% in 2 results

                    •10th result only garners 3% of
                    click throughs.
Search Engine Optimization
   Yahoo/Google/MSN directories accounts for
    the majority of traffic referred to most sites -
    get your site listed here and your traffic can
    literally double overnight
   Portal sites like Excite, Lycos, and AltaVista
    still draw lots of traffic but together
    Google/Yahoo/MSN outweigh the entire rest
    of the field
Submit your Site
   There are a lot of automated search engine
    submission services that you can use to
    submit your site to as many search engines
    as possible. Example: Submit It

   http://www.submit-it.com/
Pay for Rankings
   MSN and other sites have introduced a pay
    for inclusion service
   One option to consider
Getting Ranked (Organic)
Focus on the following elements of your web
 Keywords

 HTML tags


 META tags


 Links
Title tag
   TITLE makes a big difference, especially with
    Google. It should be short (less than 40
    characters seems to work best)

   More importantly it should match the search
    queries people will be using to find your site
Title tag
Title tag
   Good TITLE tag that will generate traffic from
    people searching for "picasso":

   <TITLE>Pablo Picasso</TITLE>
Title tag
   This is a mediocre one:

   <TITLE>Artstuff: Pablo Picasso</TITLE>
Title tag
   This one will put you out of business:

   <TITLE>Artstuff: Your Number One Online
    Resource for Fine Art Solutions!!!</TITLE>
META NAME="Keywords"
   For a page promoting Picasso, something
    like this would work

   <META NAME="keywords" content="Pablo
    Picasso, Pablo, Picasso, painting, cubist,
    painting, ceramics, collage, Spain, Guernica,
    Paris, 20th century, Girl Before a Mirror">
META NAME="Keywords"
   Repeating the most important keyword twice
    seems to work with some search engines, but
    repeating more than that will cause some of
    them to ignore the whole page
   What keywords are people searching for? It's
    important to focus on the right ones
   Main point is that you need to match the top
    keywords people use
META NAME="Keywords"

     Be careful of Keyword spamming
META NAME= Description
   This field gets used for the page summary so
    don't cram it with keywords
   An inappropriate description on a search
    engine's results page could discourage
    people from clicking through to your page,
    even if it scores high
META NAME= Description
Page Text
   Include search terms you want to match near
    the top of the page
   But cramming in a list of spam-style
    keywords can also backfire
   Can result in being barred from search
Links from other sites
   Look at the top results for the terms you most
    want to match
   Will those sites link to you from their domain?
   If they do, some of their relevance will rub off
    on your pages
Gateway pages
   Pages optimised for keywords/individual
   Careful use
   Would-be customer gets to your site only to
    discover it contains confusing pages or poor
   Important for trust
Don’t buy snake oil
   Some off the shelf software solutions are less
    than useful
   Search engine developers buy copies of the
    same software, learn how to recognize its
    output, and then demote your site or block it
    altogether when they spot that pattern in your
   Some online services are also dubious
 Search Engine Watch

   Try the search engines themselves — they
    offer all kinds of information about search
    engine optimization, rankings, relevancy,
Google Adwords
Google Adwords
   In the Google AdWords programme, cost of your
    campaigns depends on how much you are willing to
    pay and how well you know your audience.
   Nominal, one-time activation fee for Google
   After that, you pay only for clicks on your keyword-
    targeted AdWords ads or for impressions on your
    site-targeted AdWords ads.
   You can control your costs by setting how much you
    are willing to pay per click or per impression and by
    setting a daily budget for spending.
Google Adwords
   e.g. a new advertiser paying in GBP can
    activate his/her AdWords account with just
    £5.00 and can then choose a maximum cost-
    per-click (CPC) from £0.01 - £50

   Good tools to monitor costs
   Important to monitor costs versus sales
How it works
Design Considerations
   http://www.ulster.ac.uk/

   http://www.manutd.com/

   http://www.amazon.co.uk/

   Eliminate design errors by knowing what you
    like – review, review, review
Design Considerations
Design Considerations
Design Considerations
Blind Link (Not intuitive)

The black spots are buttons that link to information
found on other web pages. As the cursor "rolls over“
each one, a pop-up appears with text indicating
which information site it will link to.
Unknown Link (Not intuitive)

This logo was a link to the NASA web site. Most
users thought it was just an image to identify the
site as a NASA site.
Image with Text (Intuitive)

The images shown here would not be intuitive
enough if they were shown without some text
description. The text is needed to clarify the
Other considerations
• Usability definition

Usability is the extent to which a site can be
used by specified group of users to achieve
specified goals with effectiveness, efficiency
and satisfaction in a specified context of use
Nielsen defines five elements of usability

•   Learnability
•   Rememberability
•   Efficiency of use
•   Reliability of use
•   User satisfaction
Legal requirement

• To cater for users with restricted vision,
  hearing, movement or other disabilities

• IBM Accessibility slides for guidance (see
  lecture week 3a for further detail)
ALT tags
Design Considerations

 Simple

 Clean

 Consistent
Design time allocation
Allocate about one third of the production time to the
   creative and planning process

Any less could cause you to miss something that could
  greatly affect the cost or time needed to complete
  the project

Experience has shown any more than this tends to be
  counter productive
Project Management software
   For large projects that involve a team, Use
    project management software i.e. Microsoft
   Allows tracking of all the production aspects
    affecting the completion of the project

   MS Project slides, instructions, free tutorials

To top