Designing effective web pages Online Conference 2006 Phil Bradley

The challenge People and computers require different content People like words and pictures They have a limited attention span People use a language They like variety They’re unpredictable

People and computers require different content

People like words and pictures

They have a limited attention span

People use a language

They like variety

They’re unpredictable

People… Scan more than they read Are intelligent (mostly) Have emotions Are intuitive

Scan more than they read

Are intelligent (mostly)

Have emotions

Are intuitive

Computers on the other hand… Like numbers Like repetition Are not interested in language They’re predictable They’re tireless Pay close attention to detail

Like numbers

Like repetition

Are not interested in language

They’re predictable

They’re tireless

Pay close attention to detail

Computers Are essentially stupid They’re emotionless Have no inherent intuition

Are essentially stupid

They’re emotionless

Have no inherent intuition

How is this reflected in page design? There is a need to balance a desire to write naturally, with a requirement to appeal to search engines. Like it or not, we have to adapt to them in order to get a good ranking. If we don’t, it is going to be much more difficult to be found. If we’re not found – what’s the point?

There is a need to balance a desire to write naturally, with a requirement to appeal to search engines.

Like it or not, we have to adapt to them in order to get a good ranking.

If we don’t, it is going to be much more difficult to be found.

If we’re not found – what’s the point?

How do search engines rank? Meta tags Titles First 250 words Words contained in the <Hx> headers Repetition Keyword density Links to the page

Meta tags

Titles

First 250 words

Words contained in the <Hx> headers

Repetition

Keyword density

Links to the page

Ranking (2) Number of keywords found on the page Proximity of search terms Page rank (for Google) … and about 100 other algorithms

Number of keywords found on the page

Proximity of search terms

Page rank (for Google)

… and about 100 other algorithms

Implications for text We sell hand held terminals for use in a wide variety of sales situations. The units are small and compact and can easily be used by all your staff to inventory the stock, and keep you closely informed about the current situation. Our products are strong and will not break, even if they fall on the ground or get wet! The item is easy to use and your colleagues can be quickly taught how to use them. The units come in a variety of sizes and colours and can be produced with your own logo on them. Buy some today!” (100 words)

We sell hand held terminals for use in a wide variety of sales situations. The units are small and compact and can easily be used by all your staff to inventory the stock, and keep you closely informed about the current situation. Our products are strong and will not break, even if they fall on the ground or get wet! The item is easy to use and your colleagues can be quickly taught how to use them. The units come in a variety of sizes and colours and can be produced with your own logo on them. Buy some today!” (100 words)

Implications (2) The product itself is called: ‘ hand held terminals’ ‘ units’ ‘ products’ ‘ item’ ‘ some’

The product itself is called:

‘ hand held terminals’

‘ units’

‘ products’

‘ item’

‘ some’

Results “ Hand held terminals for use in a supermarket, shops, stores and your warehouse. Our hand held terminals are used by sales assistants, supermarket staff, warehouse keepers for stock auditing and stock inventory. The hand held terminals are robust, high quality, waterproof and durable. Training on the hand held terminals is easy, and your supermarket staff will learn quickly. The terminals can be customised to your specifications and the purchase price is competitive. If you wish to buy a hand held terminal we have another page on our price policy, and buying in bulk is cheap and affordable.” (97 words)

“ Hand held terminals for use in a supermarket, shops, stores and your warehouse. Our hand held terminals are used by sales assistants, supermarket staff, warehouse keepers for stock auditing and stock inventory. The hand held terminals are robust, high quality, waterproof and durable. Training on the hand held terminals is easy, and your supermarket staff will learn quickly. The terminals can be customised to your specifications and the purchase price is competitive. If you wish to buy a hand held terminal we have another page on our price policy, and buying in bulk is cheap and affordable.” (97 words)

Results (2) ‘ Hand held terminals’ (4) ‘ Hand held terminal’ ‘ supermarket’ (2) ‘ staff’ (2) ‘ terminals’ ‘customised’ ‘ shops’ ‘stores’ ‘warehouse’ ‘warehouses ’ ‘ training’ ‘ affordable’ ‘cheap’ ‘price’ ‘buying’ ‘purchase’ ‘ robust’ ‘high quality’ ‘waterproof’ ‘durable’

‘ Hand held terminals’ (4)

‘ Hand held terminal’

‘ supermarket’ (2)

‘ staff’ (2)

‘ terminals’ ‘customised’

‘ shops’ ‘stores’ ‘warehouse’ ‘warehouses ’

‘ training’

‘ affordable’ ‘cheap’ ‘price’ ‘buying’ ‘purchase’

‘ robust’ ‘high quality’ ‘waterproof’ ‘durable’

All well and good but… You want people to find the site useful You want people to come back to you You want people to link to you You want people to tell their friends SO… You need to further manipulate the page And to do that, you need to …

You want people to find the site useful

You want people to come back to you

You want people to link to you

You want people to tell their friends

SO…

You need to further manipulate the page

And to do that, you need to …

Understand how people read web pages They don’t like to read from a screen So they don’t read, they scan They dip in and out, and jump around a site They like pictures They look for headlines in a page They will scan/read the first sentence in a paragraph

They don’t like to read from a screen

So they don’t read, they scan

They dip in and out, and jump around a site

They like pictures

They look for headlines in a page

They will scan/read the first sentence in a paragraph

Understanding how people read web pages (2) They don’t like to scroll or get lost They want information and they want it now! They have the power – they can leave your site as quickly as they found it – probably quicker! Consequently, presentation becomes important.

They don’t like to scroll or get lost

They want information and they want it now!

They have the power – they can leave your site as quickly as they found it – probably quicker!

Consequently, presentation becomes important.

Reading pages © Poynter Online http://www.poynterextra.org/

What does that page do? Works well with search engines Loads quickly Links are part of the text Allows the user to get where they want to go quickly Presents the subject to the viewer in a graphical format

Works well with search engines

Loads quickly

Links are part of the text

Allows the user to get where they want to go quickly

Presents the subject to the viewer in a graphical format

Be inclusive! Not everyone can see your page Not everyone can use a mouse Include ALT tags for images (and ensure they make sense) Provide various methods for moving around your site Don’t include data in non-friendly formats Test and validate your pages

Not everyone can see your page

Not everyone can use a mouse

Include ALT tags for images (and ensure they make sense)

Provide various methods for moving around your site

Don’t include data in non-friendly formats

Test and validate your pages

SHOCK! HORROR! © http://www.emotioneric.com/ Do I have to re-write all of my webpages then?

Not exactly, no… Certainly look at each page in turn: How important is it to your site? Does the page need to be found? Is it being found already? It may just require tweaking, particularly Title Links Keywords (Synonyms, repetition, positioning)

Certainly look at each page in turn:

How important is it to your site?

Does the page need to be found?

Is it being found already?

It may just require tweaking, particularly

Title

Links

Keywords (Synonyms, repetition, positioning)

What skill sets are needed? A good understanding of search engines How to write good content HTML skills Competence in various new tools Some design ability An understanding of usability issues Think beyond the confines!

A good understanding of search engines

How to write good content

HTML skills

Competence in various new tools

Some design ability

An understanding of usability issues

Think beyond the confines!

Adding extra content A search box to allow people to find material on your site… How about a subject or community search engine?

A search box to allow people to find material on your site…

How about a subject or community search engine?

A map of where your visitors come from – via gvisit.com

A map of where your visitors come from – via gvisit.com

A thumbnail of linked pages thanks to Snap.com

A thumbnail of linked pages thanks to Snap.com

Google gadgets for your webpage

Google gadgets for your webpage

Widgets from the widgetbox.com

Widgets from the widgetbox.com

Embed slideshow presentations with slideshare.net

Embed slideshow presentations with slideshare.net

In conclusion WE understand information, keywords, concepts and search techniques More importantly, we understand people Consequently, we’re perfectly poised to write content better than anyone else Don’t expect to get it right over night – it takes time – in some cases, months!

WE understand information, keywords, concepts and search techniques

More importantly, we understand people

Consequently, we’re perfectly poised to write content better than anyone else

Don’t expect to get it right over night – it takes time – in some cases, months!

For more information: http://www.philb.com [email_address] http://www.philbradley.typepad.com/ http://slideshare.net/Philbradley/

http://www.philb.com

[email_address]

http://www.philbradley.typepad.com/

http://slideshare.net/Philbradley/