Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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