Faculty of Sciences and Social Sciences HOPE Website Development Website Design Prototyping Stewart Blakeway FML

Faculty of Sciences and Social Sciences HOPE Session Objectives To be able to describe a website team To be able to describe the stages in prototyping a web page, in particular: – Navigation diagrams – Storyboards – Designing for different monitors – File organisation Forward and backward compatibility is important

Faculty of Sciences and Social Sciences HOPE Emphasis on Information In Al Gore coined the phrase “ Information Superhighway ” NOT “ Design Superhighway ” Web is about delivering information Design must be secondary

Faculty of Sciences and Social Sciences HOPE Backward Compatible Compliant with older browsers without having to make a separate set of pages Design fails gracefully – it is not pretty, but the information is there

Faculty of Sciences and Social Sciences HOPE Forward Compatibility Not committed to one platform / browser Ready for what the future brings – PDA – Mobile phone – TV – Screen readers (for the visually-impaired) – etc

Faculty of Sciences and Social Sciences HOPE Web Site Development Agree a brief with your client Gather your information Prototyping Implementation Site maintenance

Faculty of Sciences and Social Sciences HOPE People Involved There are three groups of people to be considered Client Design team – Will vary according to scale and size of project Users

Faculty of Sciences and Social Sciences HOPE The Team 1 RoleResponsibilitySkills Project Manager  oversees whole project  checks everything running to schedule  organisation  people skills Information Architect  looks after organisation and classification of information on the site  logical  global view  creative Writer  writes content for the site  writing  organises information

Faculty of Sciences and Social Sciences HOPE The Team 2 RoleResponsibilitySkills Designer  creates the graphical look and feel of the site  graphic design  creative Programmer  works with the technical side of the design  coding  technical skills Web Host  in charge of the server where the site is hosted  technical skills Editor  edits the site ’ s content  writing  editing Marketing  deals with promoting the site  organisation  creative

Faculty of Sciences and Social Sciences HOPE Prototyping Create storyboards Agree upon navigation Prepare page summaries Rough working version of a few pages

Faculty of Sciences and Social Sciences HOPE Designing Navigation Helps the designer decide how the user will move around the site It should be: – Easy for your user to learn – Consistent – Provide feedback – Provide clear visual messages Consider alternative navigation

Faculty of Sciences and Social Sciences HOPE Navigation Charts Should represent the movement through the site Can use multiple diagrams To identify movement through main sections To identify movement within sections Otherwise known as a structure chart

Faculty of Sciences and Social Sciences HOPE Navigation diagram 1 Intro Drinks About us Contact Sandwiches White Wraps French Wholemea l Herbal Cold Hot Home All pages link back to the home page

Faculty of Sciences and Social Sciences HOPE Navigation structure The structure adopted might be: – Linear – Hierarchical – Mixture It should be logical Ensure you – Illustrate navigation flow (arrows) – All boxes are appropriately named

Faculty of Sciences and Social Sciences HOPE Breadth v Depth How many clicks to get to a page? How many choices for your user? Wraps Drinks About us Contact Sandwiches White French Wholemeal Herbal Cold Hot Home Drinks About us Contact Sandwiches White Wraps French Wholemeal Herbal Cold Hot Home Order

Faculty of Sciences and Social Sciences HOPE Navigation Example 1

Faculty of Sciences and Social Sciences HOPE Navigation Example 2

Faculty of Sciences and Social Sciences HOPE Storyboards why? To show your client? To help you plan your layout? Usually paper based Should compliment the navigation diagram Identify elements such as: Layout and colour schemes Font size and style The use of other media elements (sound, video) Interactivity

Faculty of Sciences and Social Sciences HOPE Storyboards Paper – Portrait layout Hand-drawn contents Project details Script Project Title:Date: Page Title: Filename: Script

Faculty of Sciences and Social Sciences HOPE Storyboard Example

Faculty of Sciences and Social Sciences HOPE Storyboard Example Project details Hand-drawn contents Script

Faculty of Sciences and Social Sciences HOPE Using Storyboards Once drawn use to plan your website – Tables? Sizes? – Frames? Sizes? – Colours? – Fonts? – Size and type of images

Faculty of Sciences and Social Sciences HOPE Use of Templates Layout shared by more than one page Create one page, the template – Copy and paste content for each page into the template file and use Save As to give the file a new name

Faculty of Sciences and Social Sciences HOPE Example

Faculty of Sciences and Social Sciences HOPE Template Plan table layout Screen grab of browser

Faculty of Sciences and Social Sciences HOPE Home Page Design All major features should appear on screen Preferably no scrolling at all Might include – Name of the site/business – Primary message – Indication of what the site is about – Main navigational options

Faculty of Sciences and Social Sciences HOPE Other Pages Should contain: – Consistent navigation – Link to the home page – Consistent colour scheme – If scrolling, links at the bottom of the page May be a different layout from the home page

Faculty of Sciences and Social Sciences HOPE Monitor sizes Resolution – The number of dots displayed by the monitor Consider the resolution of your site users monitor – 640 x 480 – 800 x 600 – 1024 x 768 At present the majority of monitors – 1152 x 864 – 1280 x 1024 and more …..

Faculty of Sciences and Social Sciences HOPE 640 x horizontal scrolling

Faculty of Sciences and Social Sciences HOPE 800 x 600 – just right?

Faculty of Sciences and Social Sciences HOPE 1024 x 768 – white space

Faculty of Sciences and Social Sciences HOPE Pixels or percentage? Fixed design – layout remains the same – Better control of layout – May require horizontal scrolling – May get large areas of white space Flexible design – The whole window is filled – Don’t need to worry about monitor resolutions – Length of text may get too long (on large monitors) – Less coherent or predictable design

Faculty of Sciences and Social Sciences HOPE File Organisation Good practice to: – Call Home page index.htm – Store images in a separate folder – Store other media in separate folder – If large site create folders for pages – Use short meaningful names No spaces Be consistent - use lowercase Use relative path names

Faculty of Sciences and Social Sciences HOPE Useful Links

Faculty of Sciences and Social Sciences HOPE PBL 1 Your first assessment details

Faculty of Sciences and Social Sciences HOPE The Scenario Ace Training Ltd is a small company, which delivers technical computer-training courses at its training centre in Manchester, and on customer premises throughout the UK. Despite being an IT training company, Ace has been slow in implementing IT in its head office, and has only now decided that a web site would be useful for marketing purposes. One of the sales assistants (Sue Devlin) has produced a prototype which she showed to her manager (Kris Kochanski). Kris raised the issue at the weekly management meeting and the board has decided that a web site should be implemented.

Faculty of Sciences and Social Sciences HOPE The Contract Ace Training Ltd has called in your team to advise them. They require your team to: Evaluate the prototype (and fix any bugs). Design an improved version, identifying good usability and design principles. Implement a number of your suggested improvements. Present your results, both orally and as a brief report. Ace Training has asked a number of other teams to advise them; it is a competitive situation, and the best solution will be awarded a (small) prize

Faculty of Sciences and Social Sciences HOPE Deliverables An improved Web site A team report explaining: – Site map and storyboard for new site – Principles of good web site design with references – List of improvements with justifications A presentation: – Demonstrating your web site – Explaining its purpose – Explaining how you improved the prototype, relating particularly to usability/ HCI criteria

Faculty of Sciences and Social Sciences HOPE Principles of good web site design with references Some research indicates that graphics distract users from completing their goal (Zhang, 1999), while other research suggests that users successfully ignore graphics when extracting necessary textual information (Diaper and Waelend, 2000). Diaper, D. and P. Waelend (2000) "World Wide Web working whilst ignoring graphics: good news for web page designers", Interacting with Computers, Vol. 13, No. 2:63-181, Zhang, P. (1999) "Will you use animation on your web pages?", In Doing Business on the Internet: Opportunities and Pitfalls (Sudweeks, F. and Romm, C.T. editors), Springer, Berlin, 35-51, Good Pass

Faculty of Sciences and Social Sciences HOPE Principles of good web site design with justification Some research indicates that graphics distract users from completing their goal (Zhang, 1999), while other research suggests that users successfully ignore graphics when extracting necessary textual information (Diaper and Waelend, 2000). This leads to the conclusion that although graphics are not necessarily compulsory in web design it is of the opinion that they do enhance the users experience and the user can ignore the graphics and extract the information required if necessary. Therefore after consultation with the group it was decided that we would use graphics to enhance our pages although we would use them sparsely. Diaper, D. and P. Waelend (2000) "World Wide Web working whilst ignoring graphics: good news for web page designers", Interacting with Computers, Vol. 13, No. 2:63-181, Zhang, P. (1999) "Will you use animation on your web pages?", In Doing Business on the Internet: Opportunities and Pitfalls (Sudweeks, F. and Romm, C.T. editors), Springer, Berlin, 35-51, Excellent Pass

Faculty of Sciences and Social Sciences HOPE Presentation You are assessed on 14 points The assessment is peer assessment, you will present your website and solution to the seminar class Your peers will list 3 good points and 3 bad points

Faculty of Sciences and Social Sciences HOPE Presentation Criteria Consistency of page structure and design throughout site. White space is used actively to enhance design and structure. Structure: Appropriate amount of information on each page, logically arranged. Most important information is in the centre of the screen in the viewable area at normal screen resolution. Simplicity: No unnecessary graphics and distracters (e.g. animated gifs) Evidence that accessibility issues have been considered. (e.g. Alt tags for images, colour blindness, dyslexia) Text is legible (font size, contrast, sans serif) Suitability: The overall design is applicable to the stated audience/ user and visually appealing.

Faculty of Sciences and Social Sciences HOPE Presentation Criteria Standards: Evidence that pages meet the W3C XHTML validation criteria. Portability: the pages have been tested on more than one browser (e.g. Firefox and IE) Affordance: It is obvious what you can click on as a link. Visibility: it is intuitive where a link will navigate Reliability: Links work correctly (no broken links) Simplicity: It is easy to navigate around the site. Reduced cognitive load: The user always knows where they are on the site (e.g. breadcrumbs) Structure: It is clear where the user can go to from any page & browser back button unnecessary

Faculty of Sciences and Social Sciences HOPE NEXT ? PBL1 (Seminar) – Get organised into Groups of 3 (maximum 4) – Download the PBL 1 Website, Criteria and Presentation Criteria – Start the critical analysis of the current website – Design the storyboards – Implement the navigation charts