www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Website Development Website Design Prototyping Stewart Blakeway FML 213 [email protected] http://hopelive.hope.ac.uk/ computing/ 0151 291 3113
Feb 14, 2016
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEWebsite DevelopmentWebsite Design Prototyping
Stewart BlakewayFML [email protected]://hopelive.hope.ac.uk/computing/0151 291 3113
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PESession 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEEmphasis on Information
• In 1995. Al Gore coined the phrase
“Information Superhighway”NOT
“Design Superhighway”
• Web is about delivering information• Design must be secondary
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEBackward 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEForward Compatibility
• Not committed to one platform / browser• Ready for what the future brings– PDA– Mobile phone– TV– Screen readers (for the visually-impaired)– etc
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEWeb Site Development
• Agree a brief with your client• Gather your information• Prototyping• Implementation• Site maintenance
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPeople Involved
There are three groups of people to be considered
• Client• Design team– Will vary according to scale and size of project
• Users
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEThe Team 1
Role Responsibility Skills
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEThe Team 2
Role Responsibility Skills
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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPrototyping
• Create storyboards• Agree upon navigation• Prepare page summaries• Rough working version of a few pages
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEDesigning 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PENavigation 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PENavigation diagram 1
Intro
DrinksAbout usContactSandwiches
WhiteWrapsFrenchWholemeal HerbalColdHot
Home
All pages link back to the home page
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PENavigation structure
• The structure adopted might be:– Linear– Hierarchical– Mixture
• It should be logical• Ensure you– Illustrate navigation flow (arrows)– All boxes are appropriately named
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEBreadth v Depth
• How many clicks to get to a page?
• How many choices for your user?
WrapsDrinksAbout usContactSandwiches WhiteFrenchWholemeal
HerbalColdHot
Home
Drinks
About us
ContactSandwiches
White WrapsFrenchWholemeal HerbalColdHot
Home
Order
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PENavigation Example 1
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PENavigation Example 2
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEStoryboards 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEStoryboards
Paper – Portrait layout
Hand-drawn contents
Project detailsScript
Project Title: Date:Page Title: Filename: Script
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEStoryboard Example
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEStoryboard Example
Project details
Hand-drawn contents
Script
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEUsing Storyboards
• Once drawn use to plan your website– Tables? Sizes?– Frames? Sizes?– Colours? – Fonts? – Size and type of images
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEUse 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEExample
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PETemplate• Plan table
layout• Screen grab of
browser
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEHome 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEOther 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEMonitor 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…..
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE640 x 480 - horizontal scrolling
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE800 x 600 – just right?
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PE1024 x 768 – white space
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPixels 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEFile 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEUseful Links
• www.webstyleguide.com• www.lynda.com/hext.html• www.7sisters.com
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPBL 1
• Your first assessment details
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEThe 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.
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEThe 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEDeliverables
• 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPrinciples 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, 2000.
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, 1999.
Good Pass
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPrinciples 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, 2000.
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, 1999.
Excellent Pass
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPresentation
• 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPresentation 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.
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PEPresentation 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
www.hope.ac.uk Faculty of Sciences and Social Sciences
HO
PENEXT ?
• 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