Transcript Lec2 Project Mgmt - Server Configuration

COM531 Multimedia
Technologies
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
managing projects


Ad-hoc approach
When things go wrong…


Work out how to turn things
back right
Why things went wrong?
A disciplined approach
to managing projects
•Consistent method
•Discipline = focus
•Repeatable process
•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
project?
- 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
project
Individual resources will need to be managed in
different ways

Controlling
-
record current progress and compare it with planned
process
-
Consider the implications of changes to the project and
any possible delays
- Consider various options to put your project back on
track

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
‘baseline’
Project Planning





Project development requires
planning to ensure success
Planning ahead reduces workload
Provides structure
Allocates responsibilities
Meets deadlines
advance
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
Objectives
Identify objectives to be accomplished



Identify primary goal and purpose of the
application inform, motivate, teach/train, sell,
other?
Identify specific objectives to be achieved
Provide one line summary of objective
Audience
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
scene/page
Helps identify the elements that need to be produced for
the project
Provides a basis to determine the cost estimates for the
project
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
content
Avoid navigation errors leading the user to
“dead ends”
Identify levels of content the user have to
navigate
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,
prototyping)
• 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 &
Flash
• 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
• Detailed goal
discussion
• Audience discussion
• Usage
• Content requirements
• Technical
requirements
• Visual requirements
• Delivery requirements
• Site structure diagram
• Budget
• Timescale
Helps you make decisions
Site plan
Web site types
Site style versus complexity
Prototyping
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/HTML5/CSS
Technology… Asp/Perl/Php/Coldfusion
Database type…Access/MySql
Off the shelf/custom design/customisation…
Delivery platform... WebTV,Phone,
Playstation
Decision time…Considerations





Hosting… NT/Unix/Linux
Bandwidth usage.. Standard.. Business..
Enterprise
Upload/download times
Backend Ecommerce… Worldpay.. Netbanx..
Paypal
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
performance
NetMechanic - http://www.netmechanic.com/
Free analysis of your web site
NetMechanic
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
flexibility
The current standard
page size was
1024x768 pixels.
Based on average
screen resolutions
worldwide
Source: onestat.com
http://www.onestat.com/html/aboutu
s_pressbox43-screenresolutions.html
1024x768



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
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
differences
• 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
resolution
• 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
positioning
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
Advantages
Easy to achieve - space on sides of main
content can be used to enhance visual
branding with backgrounds
Centered content
Disadvantages
• 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
Advantages:
• Easy to implement; good use of screen real
estate
Disadvantages
• Results in a "canned" layout stifling design
creativity
• 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
Advantages
• Easy to achieve in HTML (100%)
• Offers users with larger screens optimum use
of screen real estate
Fully flexible pages
Disadvantages


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
Advantages
• Makes good use of screen
• Allows for user control of display
Variable number of columns
Disadvantages
• Doesn't work on all browsers and platforms
• Somewhat tricky to implement
• Limited situations where it can be effective
Combinations
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)
• Adobe 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
Page
 Keywords
 HTML tags
 TITLE
 META tags
 KEYWORDS and DESCRIPTION
 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
engines
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
engines
Careful use
Would-be customer gets to your site only to
discover it contains confusing pages or poor
navigation
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
pages.
Some online services are also dubious
Resources
Search Engine Watch
http://searchenginewatch.com/


Try the search engines themselves — they
offer all kinds of information about search
engine optimization, rankings, relevancy,
submission,
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
AdWords.
After that, you pay only for clicks on your keywordtargeted 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 costper-click (CPC) from £0.01 - £50

Good tools to monitor costs
Important to monitor costs versus sales

How it works
https://adwords.google.co.uk/support/?hl=en_GB
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
link.
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
Usability
Nielsen defines five elements of usability
•
•
•
•
•
Learnability
Rememberability
Efficiency of use
Reliability of use
User satisfaction
Accessibility
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
Project
Allows tracking of all the production aspects
affecting the completion of the project
MS Project slides, instructions, free tutorials