Multimedia & Website Design Initial Planning (Part 3)

Last Week Gathered a wish list of features for the site Reduced the list based on –Desirability –Achievability Produce a site map Identify Primary Navigation

This Week Produce the Final Deliverables for the planning process Produce layout guidelines for a site using Wireframes Develop System Storyboards

Wire Frame A document to communicate the structure of a page visually Not a completed UI sketch Individual elements clearly labelled

Persistent Navigation Primary Navigation Search International Sites Logo Copyright MarketingMessage Of the Week What is TTA? News

Several levels Bare bones information on page structure Different pages will have different types of content Several Wireframes are required for most sites Include information about the positioning of secondary and tertiary navigation

Persistent Navigation SecondaryNavigation Primary Navigation Search Breadcrumb Trail Logo Copyright Main Content

Class Task #1 Working in groups of 3 or 4 determine a wireframe design for one of these sites as set by the lecturer – –slashdot.org –news.bbc.co.uk –mail.yahoo.co.uk – –

Class Task #2 Returning to The Lightness, work in your teams to develop a home page wireframe for the proposed website Take into account –The site map you produced last time –Your plans for primary navigation Use pen and paper, or if you prefer MS Word

System Storyboards In conjunction with application designers Step by step maps through a web application Analogous to flow charts - used to define a user’s place within a system Indicates the data to be collected at each stage

Login Example New Account Request.asp “Request your login and password here” Success Return to user.asp Error 2 Error.asp “Login Incorrect” Error 1 Error.asp “Username Not found. Request a login” login.asp Request.asp Address login.asp Username Password

Step-by-step process Detailed look at web applications Looks at possible outcomes from each form Notes the type of data collected Identifies errors that are dealt with –Always worth putting effort into error messages

Larger Applications Storyboard every stage of the process Keep track of the data being collected on each page –Consider splitting if too much Depending on complexity, can produce separate storyboards for each step

User POV Examine your detailed plan to see how much effort is expected of the user Is the date being collected excessive? Are individual pages too complex? –Perhaps they can be broken down into smaller steps Will the application be confusing or frustrating

Class Task #3 Many groups suggested a message board as part of The Lightness web site Write a system storyboard for the site which covers the following activities: –Registering for the message board –Changing a user profile

Cost of making changes Rule of thumb - cost of making a change grows exponentially as development progresses Far cheaper to analyse and fix a design fault on a car before you build than to run a product recall and fix later Time spent planning and thinking about the design can really save time and money later

End of the planning process Full set of material developed includes: –Statement of purpose –Identified Users –Use Cases –List of features –Site Maps –System Storyboards –Wireframe Diagrams

What is accomplished? Clearly developed and agreed plan for the site Everybody involved knows what is expected, and the timescales involved Still leave scope for the people implementing the site to make appropriate creative decisions