Download HERO - University of Malta

‘Communicating Across Cultures.’
EUPRIO
University of Malta
2nd-4th September, 2004.
www.hero.ac.uk
‘Designing a website for
maximum impact.’
Christopher Harris
Executive Director, HERO.
© HERO 2004 & original authors
www.hero.ac.uk
HERO
The HERO website aims to be:
• the primary internet portal for academic research and
higher education in the UK
• the natural entry point for enquiries about higher
education in the UK for the widest possible range of
customers
• a showcase for the diversity and quality of research and
higher education in the UK
• HERO Aimhigher RAE
www.hero.ac.uk
“To create a website that is both
commercially effective, usable and
aesthetically pleasing is one of the most
difficult things to do. I think it is an
extraordinarily difficult thing to achieve”
Vincent Flanders, creator of WebPagesThatSuck.com.
www.hero.ac.uk
“Web design is not about art, it's about
making money (or disseminating
information). To make money, you don't
want to design a site that might confuse
someone. You want your visitors to
quickly find what they're looking for and
then write you a check. (It's the same
with disseminating information.) ”
http://www.webpagesthatsuck.com/dailysucker/
www.hero.ac.uk
What are we trying to do?
•
•
•
•
•
•
design the digital landscape
information architecture
information design
interaction design
interface design
http://www.boxesandarrows.com/about
www.hero.ac.uk
Expectations
• Jakob's Law of the Web User Experience:
users spend most of their time on other sites,
so that's where they form their expectations
for how the Web works.
• Do the same as everybody else: if most big
websites do something in a certain way, then
follow along, since users will expect things to
work the same on your site.
Jakob Nielsen, cofounder of Nielsen Norman Group
www.hero.ac.uk
Think user
• “Think about the customer. Meet the customer
when they arrive, and make their experience
the best it can be. Then make it even better.”
• But – a consensus has already been reached
on the rules of reading a site – boring?
• So – don’t confuse the user, do the same as
everybody else: if most big websites do
something in a certain way, then follow along,
since users will expect things to work the
same on your site.
www.hero.ac.uk
KISS
• follow the conventions for screen design
(blue underlined things are hypertext
links).
• With conventions, site visitors can use
their brainpower to think about their
problem and how to solve it, rather
than how to use the website.
• adapt the site's organizational structure
to the individual user's problems.
www.hero.ac.uk
Your site needs to be:
•
•
•
•
Easy to navigate
Load quickly
Informative
Readable on all browsers and
computers
• Accessible to all – Visionary design
• Reflects what you want to say about
your university
www.hero.ac.uk
‘Standard layout’
The basic structure of Microsoft’s home page design is a
model that many use for their own site design:
• Header + 3 columns + Footer.
• Header that spans all the way across the top of the
page.
• Left column containing mostly navigation.
• Main column for content.
• Right column for extra material.
• Footer that sits below all three columns and also spans
the entire width of the page.
• A variation is to use a 2-column variation, with a
sidebar to the left or right of the main column.
www.hero.ac.uk
Examples
• BBC – 3 column
http://www.bbc.co.uk/
• Yoox – less traditional
http://www.yoox.com/ing/index.asp
• National Geographic – 2 column
http://www.nationalgeographic.com/education/
www.hero.ac.uk
Web Design Guidelines.
•
•
•
•
Planning
User analysis
Competition and Market analysis
Design
Structure
Navigation
Text
Visual Layout and elements
Media
• How do I continue to attract and engage
users?
www.hero.ac.uk
Approaches to design
• Make the site's purpose clear: explain
who you are and what you do.
• http://www.eyewire.com/
• Write a window title with good visibility
in search engines and bookmark lists.
• Begin link names with the most
important keyword.
• Use meaningful graphics.
www.hero.ac.uk
10 Tips
1. Remember User Goals
2. Remember Site Goals
3. Avoid Unnecessary Intros
4. Provide Logical Navigation and Interactivity
5. Design for Consistency
6. Don't Overuse Animation
7. Use Sound Sparingly
8. Target Low-Bandwidth Users
9. Design for Accessibility
10.Test for Usability
Source: Macromedia
www.hero.ac.uk
Mistakes
• Splash pages
• Too much ‘design’
http://fingertips.newdamage.com/
• Not thinking globally
• Forgetting the top is all that counts
• Poor navigation
• Not making links links
• Not testing on all browsers and systems
• Too much content. http://www.refdesk.com/
www.hero.ac.uk
Why do it?
•
•
•
•
•
•
•
•
•
Spinning logos
Animations
3D graphics
Music
Clip art
Java
Large graphics
http://www.safeplaces.net/
http://www.desktopimage.com/
www.hero.ac.uk
Standards
• The World Wide Web Consortium (W3C)
develops interoperable technologiesspecifications, guidelines, software, and tools.
http://www.w3.org/
• “a grassroots coalition fighting for standards
that ensure simple, affordable access to web
technologies for all.”
http://www.webstandards.org/
• Forward Compatibility: Designing & Building
With Standards: Jeffrey Zeldman, New Riders
2003. Berkeley, CA
www.hero.ac.uk
On-line manuals
• Web Style Guide 2nd edition ( Yale )
http://www.webstyleguide.com
www.hero.ac.uk
‘Content is King’
• People will return if your site is
constantly updated with new and
relevant information. Information is
conveyed using the written word and
supporting images.
• Good design holds the eye. Then
functionality and content takes over.
www.hero.ac.uk
Evaluation Techniques
• always test your design with real users
as a reality check. People do things in
odd and unexpected ways, so even the
most carefully planned project will learn
from usability testing.
www.hero.ac.uk
Evaluation
• Benchmarking Web Sites
– "Benchmarking Web Sites" workshop for
University of Swansea
– http://www.ukoln.ac.uk/web-focus/events/workshops/rsc-wales2003/
– gives full set of tools
www.hero.ac.uk
How do we compare?
• http://www.webstandardsawards.com/
• http://www.webbyawards.com/business
awards/finalists.html
• PC Magazine Top 100 sites.
http://www.pcmag.com/article2/0,1759,1554010,00.asp
• http://www.web100.com/
www.hero.ac.uk
UK universities
• Rolling demo of home pages
http://www.ukoln.ac.uk/web-focus/siterolling-demos/universities/
www.hero.ac.uk
HEIST Award Winners 2000/02
Sheffield Hallam University http://www.shu.ac.uk/
University of Glamorgan http://www.glam.ac.uk/
Bournemouth University http://www.bournemouth.ac.uk/
University of Bradford http://www.bradford.ac.uk/external/
Lambeth College http://www.lambethcollege.ac.uk/
Middlesex University http://www.mdx.ac.uk/
Nottingham Trent University http://www.ntu.ac.uk/
Richard Huish College http://www.richuish.ac.uk/
University of Ulster http://www.ulster.ac.uk/
Wakefield College http://www.wakcoll.ac.uk/
www.hero.ac.uk
Web use in marketing
• design, web standards and usability are
great - but it's really about marketing
and you want people to identify with
more than a URL.
• Do you know your site’s impact?
• Does it replace or complement?
www.hero.ac.uk
PR
• Will a journalist, working on deadline,
find the answers on your site?
• Consider conducting your own usability
survey with friendly reporters. This will
probably be an eye-opener.
www.hero.ac.uk
Maximise press relations
• most journalists now turn to the Web first for
basic information. Half begin by visiting a
target's Web site; the rest turn to search
engines.
• So what does a reporter want from that initial
Web site contact?
–
–
–
–
Find a PR contact. (name and telephone numbers!)
Check basic facts, spellings, ages, location,etc.
Discover the spin on events.
Download images to illustrate stories.
• This material should be easy to find - no
passwords or registration.
www.hero.ac.uk
I like
• http://www.play-create.com/
• http://www.smart.com/
• http://www.apple.com/
www.hero.ac.uk
KISS 2.
• Content
• Ease of use
• Speed
www.hero.ac.uk