Website Development Website Design Prototyping

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


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


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


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


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


HO

PEWeb Site Development

• Agree a brief with your client• Gather your information• Prototyping• Implementation• Site maintenance


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


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


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


HO

PEPrototyping

• Create storyboards• Agree upon navigation• Prepare page summaries• Rough working version of a few pages


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


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


HO

PENavigation diagram 1

Intro

DrinksAbout usContactSandwiches

WhiteWrapsFrenchWholemeal HerbalColdHot

Home

All pages link back to the home page


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


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


HO

PENavigation Example 1


HO

PENavigation Example 2


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


HO

PEStoryboards

Paper – Portrait layout

Hand-drawn contents

Project detailsScript

Project Title: Date:Page Title: Filename: Script


HO

PEStoryboard Example


HO

PEStoryboard Example

Project details

Hand-drawn contents

Script


HO

PEUsing Storyboards

• Once drawn use to plan your website– Tables? Sizes?– Frames? Sizes?– Colours? – Fonts? – Size and type of images


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


HO

PEExample


HO

PETemplate• Plan table

layout• Screen grab of

browser


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


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


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…..


HO

PE640 x 480 - horizontal scrolling


HO

PE800 x 600 – just right?


HO

PE1024 x 768 – white space


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


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


HO

PEUseful Links

• www.webstyleguide.com• www.lynda.com/hext.html• www.7sisters.com

http://www.webstyleguide.com/

http://www.lynda.com/hext.html

http://www.7sisters.com/


HO

PEPBL 1

• Your first assessment details


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.


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


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


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


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


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


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.


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


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

Documents

Website Development Website Design Prototyping