Transcript Faculty of Sciences and Social Sciences HOPE Home Page Design

HOPE
Website Development
Website Design Prototyping
Stewart Blakeway
FML 213
[email protected]
http://hopelive.hope.ac.uk/computing/
0151 291 3113
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Session Objectives
HOPE
• 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
Emphasis on Information
HOPE
• 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
Backward Compatible
HOPE
• 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
Forward Compatibility
HOPE
• 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
Web Site Development
HOPE
•
•
•
•
•
Agree a brief with your client
Gather your information
Prototyping
Implementation
Site maintenance
www.hope.ac.uk
Faculty of Sciences and Social Sciences
People Involved
HOPE
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
HOPE
The 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
HOPE
The 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  technical skills
where the site is hosted
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
Prototyping
HOPE
•
•
•
•
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
Designing Navigation
HOPE
• 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
Navigation Charts
HOPE
• 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
HOPE
Navigation diagram 1
Intro
Home
Sandwiches
Wholemeal
French
Wraps
Contact
About us
White
Drinks
Hot
Cold
Herbal
All pages link back to the home page
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Navigation structure
•
The structure adopted might be:
HOPE
–
–
–
•
•
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
Breadth v Depth
Home
HOPE
• How many
clicks to get to
a page?
• How many
choices for your
user?
About us
Order
Drinks
Sandwiches
Wholemeal
French
White
Wraps
Hot
Wholemeal
French
Contact
Cold
Herbal
Home
Sandwiches
Contact
Drinks
About us
Hot
www.hope.ac.uk
Cold
White
Wraps
Herbal
Faculty of Sciences and Social Sciences
HOPE
Navigation Example 1
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
Navigation Example 2
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Storyboards why?
HOPE
•
•
•
•
•
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
HOPE
Storyboards
Paper
– Portrait layout
Project Title:
Date:
Page Title:
Filename:
Script
www.hope.ac.uk
Hand-drawn
contents
Project details
Script
Faculty of Sciences and Social Sciences
HOPE
Storyboard Example
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Storyboard Example
Project details
HOPE
Hand-drawn
contents
Script
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Using Storyboards
HOPE
• 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
Use of Templates
HOPE
• 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
HOPE
Example
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Template
HOPE
• Plan table
layout
• Screen grab of
browser
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Home Page Design
HOPE
• 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
Other Pages
HOPE
• 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
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…..
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
640 x 480 - horizontal scrolling
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
800 x 600 – just right?
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
1024 x 768 – white space
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Pixels or percentage?
HOPE
• Fixed design
– layout remains the
same
– Better control of layout
– May require horizontal
scrolling
– May get large areas of
white space
www.hope.ac.uk
• 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
File Organisation
HOPE
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
Useful Links
HOPE
• www.webstyleguide.com
• www.lynda.com/hext.html
• www.7sisters.com
www.hope.ac.uk
Faculty of Sciences and Social Sciences
PBL 1
HOPE
• Your first assessment details
www.hope.ac.uk
Faculty of Sciences and Social Sciences
The Scenario
HOPE
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
The Contract
HOPE
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
Deliverables
•
•
An improved Web site
A team report explaining:
HOPE
–
–
–
•
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
Principles of good web site
design with references
HOPE
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
Good Pass
Business on the Internet: Opportunities and Pitfalls (Sudweeks,
F. and
Romm, C.T. editors), Springer, Berlin, 35-51, 1999.
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Principles of good web site
design with justification
HOPE
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
Excellent
Pass
on the Internet: Opportunities and Pitfalls (Sudweeks, F. and Romm, C.T.
editors), Springer, Berlin, 35-51, 1999.
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Presentation
HOPE
• 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
Presentation Criteria
•
•
HOPE
•
•
•
•
•
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
Presentation Criteria
•
•
HOPE
•
•
•
•
•
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
NEXT ?
HOPE
• 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
www.hope.ac.uk
Faculty of Sciences and Social Sciences