www.hero.ac.uk

‘Communicating Across Cultures.’

EUPRIOUniversity of Malta

2nd-4th September, 2004.

www.hero.ac.uk

‘Designing a website for maximum impact.’

Christopher HarrisExecutive 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 columnhttp://www.bbc.co.uk/

• Yoox – less traditionalhttp://www.yoox.com/ing/index.asp

• National Geographic – 2 columnhttp://www.nationalgeographic.com/education/

www.hero.ac.uk

Web Design Guidelines.

• Planning• User analysis• Competition and Market analysis• Design

StructureNavigationTextVisual Layout and elementsMedia

• 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 Goals2. Remember Site Goals3. Avoid Unnecessary Intros4. Provide Logical Navigation and Interactivity5. Design for Consistency6. Don't Overuse Animation 7. Use Sound Sparingly 8. Target Low-Bandwidth Users9. Design for Accessibility10.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 technologies- specifications, 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-wales-200

3/

– gives full set of tools

www.hero.ac.uk

How do we compare?

• http://www.webstandardsawards.com/• http://www.webbyawards.com/

businessawards/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 pageshttp://www.ukoln.ac.uk/web-focus/site-rolling-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