PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your...

PBA Front-End

Week 5

Search Engine Optimisation

• Search Engine Optimisation (SEO)– Making your website visible

to search engines (Google)– Get your website to the top

of the result list!


• SEO is an obvious way to make users aware of your website– Technical aspect: Making sure the proper words

can be found on your website by search robots– Marketing aspect: Making sure your website

contains the words a typical user will use when searching for a website in your category. Getting other sites to link to your site.


• How is a page found by a Search Engine?

• Web Crawlers follow links – so make sure there are links to all your pages

• How is a page ranked by a Search Engine?

• Secret…!


• Page rankings– Internal factors – title, headings, body text, alter-

native text, keyword distribution, domain name– External factors – links from other pages. The

higher ranked the linking page is, the more the link will count. How often users click on the page in a search result list


• How can I know which keywords a typical user will use when searching for a similar website?

• Ask them!• A job for the Usability Lead• Google Adwords – suggestions

for keywords


• A Search Engine cannot see text in– Graphics (logos, banners, etc.)– Flash animations– Video– Audio (oh, really…)– Graphic links– Links depending on dynamic code


• A Search Engine may bypass a page if it– Has a very complex structure– Is heavily dynamic (CSS, JavaScript)– Contains many broken links– Contains complex/auto-generated links– Is flooded with keyword repetitions– Is created server-side– Loads very slowly


• So, I’m about to write material for my website…

• …what should I actually do…?


• Avoid writing consciously for SEO• Write for the readers, not for the engines• External factors are given more importance

than internal by modern search engines (Google)…

• …so the material must be interesting and relevant for actual human readers!


• Still, you can often hit two birds with one stone

• Review titles, headers, page bodies, etc – do they actually contain relevant words

• Take the user’s point-of-view – what would the typical user be looking for?


The Global Catastrophe

Bla bla bla bla bla…


World War II : The Global Catastrophe

Bla bla bla bla bla…


• Where to put keyword/phrases:– Page titles– Major headings– First content paragraphs– Text for links to other pages– Alternative text for images– HTML file names and directory names


• Grammatical form matters (Tiger <> Tigers)• Case does not matter (Tiger == tiger)• Context does not come automatically!• A Tiger is also a– Carnivore– Large cat– Panthera– Threatened species


• Enough is enough!• Delicate balance between

plentiful mentioning of keywords and ”keyword spamming”

• Exact limit unknown…• Rule of thumb, at most 5-8

% of total word count


• We can also ”optimise” the use of keywords with regards to humans

• Users do not divide their attention uniformly over a web page (eye-tracking studies)– Golden triangle– F pattern

Cat


• Most important in page rankings – other pages that link to your page!

• How to achieve that…?


• If the site is part of a large company– Request that main (often visited) company

pages link to your pages– Get included in site maps, etc.– Get featured in a ”what’s new” section on the

company home page


• If the site is a stand-alone site– Find link partners: You link to the partner, the

partner links to you (link building)– Potential link partner could be a ”complemen-

tary” company, not a competitor– Example: you sell swimsuits, the partner sells

sunglasses– Should be worthwhile for both sides


• Create links from other websites yourself– Find popular (and preferably

relevant…) blogs, forums, etc, and leave comments including links to your own website

– Sign up your website to link catalogs

• A delicate balance…

Links and navigation

• Most websites cannot be contained within a single web page

• Information Architect should– Decide how to split content

across multiple pages– Decide how to navigate

between the pages


• Fundamental types of site structure– Linear– Hierarchical (shallow)– Hierarchical (deep)– …and combinations


• Linear structure – the user is ”forced” to visit the pages in a certain order

• Well suited for – Instructions / Guides– Surveys / Questionnaires– Ordering and Payment– Subscription– …?

Page 1

Page 2

Page 3

Page 4


• Hierarchical structure (shallow)

• Can navigate to many pages from a given page

• Distance from start page to ”end” pages is low (< 3)

• Well suited for small websites (< 10 pages)

S

A.1

A.2

A.3

A.4

B.2

B.1


• Hierarchical structure (deep)• No fundamental difference -

navigate to many pages from a given page

• Distance from start page to ”end” pages is can be high

• Breath vs. depth…


• How to organise a website with 1000+ pages…

• Very ”wide”– Few clicks to end pages– Many links on each page

• Very ”deep”– Many clicks to end pages– Few links on each page


• …and combinations!• Many sites willl need to

use both types of organi-sation

• Web-shop– Presentation (hierarchical)– Sales (linear)


• Links in general serve two purposes:– Links to other, external websites– Navigation within the website


• Why link to other websites?• Unless that is the specific purpose of the

website, limit the number of external links– Users leave your website (will they come back?)– No control over the linked-to website (form,

content,…)• Integrate relevant material into your own

website, if possible


• How can we ”serve” links to the user…?– Classic, explicit link (www.cnn.com)– Text-anchored link (read about tigers here)– Part of a navigation structure, e.g. menu– As a graphic or using other types of metaphors

http://www.cnn.com/

http://www.cnn.com/


• Advice on text links– Avoid too many text links in bodies of text – move

to the end of section if possible– Make sure links stand out (e.g.like this)– Make sure that visited links are distinguishable

(e.g. like this)– Avoid writing sentences around links:• Bad: Click here for more information• Good: The tiger lives in the jungle

http://www.cnn.com/

http://www.cnn.com/

http://www.cnn.com/


• Menus is a very common way to organise a set of ”similar” links

• Most users are used to menus from various software products

• Are menus old-school…?


• Where do we put a menu…?

?

Best for reading…

Normal in software…


• What is a metaphor?• One explanation: A metaphor is defined as a

figure of speech, or something that we use to replace normal words in order to help others understand or enjoy our message

• In the context of a website: Wrapping a link into e.g. a graphic, to make the function of the link more intuitive


• Example: What will the below buttons do, on a website with linear structure…?


• Why use metaphors…?– More intuitive– Usability– Align navigation with

general visual design


• Find your local weather forecast…


• What will a 5-year old prefer…?

…or text links?


• Using metaphors, we assume that the user actually understands the metaphor…– Law of Isomorphism– Culture, bckground, …

• Usability tips– Provide helpful text i mouse-over tooltip– Link should react to mouse-over

Page composition

• Now we know about– Colors– Fonts, texts and editorial style– Links and navigation– …

• How do we put it all together on a specific web page…?

Page composition

• No single page composition ”style” will fit all purposes…

• …BUT for mainstream web pages, a fairly common page composition ”pattern” has emerged over the years

Page composition

• Isn’t it boring just to use a ”standard” page layout…?

• Maybe, but consider– It is a well-established layout– Not all parts are mandatory– Still many degrees of freedom left

(colors, graphics, text,…)– Can you really ”beat” the standard…?

Page composition

• Page header– Establish site identity– Global navigation (Home, about, contact,…)– Search, shopping cart,…– Home link (easy way home)– Acts like a ”miniature version” of the web site

Page composition

• Header variations

Page composition

• Breadcrumb navigation

Page composition

• Breadcrumb navigation– ”Where am I…?”– Particularly useful with large, deep, websites– Not really necessary on small websites– Enables the user to skip back to levels high up in

the hieratchy tree– ”Doesn’t the Back button do that…?” – yes, but

using the Breadcrump is easier

Page composition

• Search

Page composition

• Scan columns (what’s that…?)• Columns at the edge of the

page where users will ”scan” for useful information– Contact information– Advertisments– ”News of the day”– …

Page composition

• Main content area• Hard to provide general rules, but– Include clear page title– Update breadcrumb navigation– Include go-to-top links on long pages– Use general rules for text formatting– Include dates where relevant

Page composition

Page composition

• Page footers• Usually contains useful,

”static”, information– Author information– Copyright statements– Contact details– Useful general links– …

Page composition

• I have a web site to create, where do I start on page composition…?

• Create page templates to be filled with actual content

• Start with ”internal” page templates!• Work from the inside towards the (unique)

home page (landing page)

Page composition

Page composition

• Why not start with the home page…?• Home page is ”unique”, only one instance• Internal pages will occur in many instances• The internal pages will thus dominate the

users experience of the site• Do not let the design of a single page ”hijack”

the entire site design!

Page composition

• Internal page templates• Created by Information Architect (and

possibly Art Director)• Main purposes– Logical fit to the information architecture– Provide consistency across the website– Establish ”look-and-feel” of the website

Page composition

More than one template might be

necessary…

…but should have consistent ”look

and feel”

Page composition

Page composition

• Secondary page templates• In principle like internal

page templates• Help establish ”a sense of

the vertical dimension in the site”…

• What does that mean!?

Page composition

Page composition

• Secondary page act as sub-section home pages

• They must provide navigation to underlying sub-section, and to main home page

• They should establish some level of identity – could be alternative landing pages

Page composition

• The home page itself…• Four main elements– Identity– Navigation and Tools– Content– Timeliness

Page composition

• Where should your focus be…?– Does CNN need to establish identity…?– Does Google need to worry about timeliness…?– Does Coca-Cola need to worry about content…?

• The exact balance between the element will be completely situation-specific

• General design principles still apply• Consistent with secondary and content pages

Page composition

• And finally…do not put a fancy Flash animation ”in front of” your website

• Users will be annoyed – some will go away, others click ”skip intro”

• Can prevent web crawlers from getting access to the real page – and thus the website!

• Avoid!

Page composition

Gestalt Laws

• The standard page compo-sition ”pattern” seems to be well-established; it works!

• But…why does it work…?• Because it employs many of

the Gestalt Laws

Gestalt Laws

• Gestalt Laws are a part of Cognition Psychology – how we percieve things in the surrounding world

• Gestalt (from German) means ”a whole structure or form, that emerges when a set of smaller, simpler components are combined in a certain way”

• Not a perfect translation…

Gestalt Laws

Gestalt Laws

• The Gestalt Laws are a set of statements about perception of elements in a certain context

• About ten laws – we will discuss some of them in the following

Gestalt Laws

• Law of Proximity• Elements that are close to each other will be

perceived as one single structure

Gestalt Laws

• Is this…• …four vertical columns…• …or…• …seven horizontal rows…• …or…• …28 unrelated dots…?

Gestalt Laws

• Law of Similarity• Elements that look similar will be perceived as

one single structure

Gestalt Laws

• Is this…• …12 unrelated

columns…• …or…• …six groups of two

columns, alternating between white and yellow?

Gestalt Laws

• Law of Closure• Humans have a tendency to perceive an

incomplete structure as complete (to close or fill the gaps)

Gestalt Laws

• Is this…• …five unrelated

circle fragments…• …or…• …a circle?

Gestalt Laws

• How many triangles do you see in the pictures…?

Gestalt Laws

• Law of Closure (variant)• Elements within a bounding structure will

be perceived as one single structure

Gestalt Laws

• Is this…• …six groups of two

columns, alternating between white and yellow…

• …or…• …three boxes con-

taining a varying number of dots?

Gestalt Laws

• These three laws…– Law of Proximity– Law of Similarity– Law of Closure

• …are used very often in web design!

Gestalt Laws

Law of Proximity:These menu items are related, and are physically close

Gestalt Laws

Law of Similarity:These menu items are related, and they look similar

Gestalt Laws

Law of Similarity:These menu items are related, and they look similar (but different from the other types of menu items)

Gestalt Laws

Law of Closure:Do we have a outline of a box here…?

Gestalt Laws

• Law of Prägnanz (or Good Form)• Humans tend to order a set of elements

into one simple, recognisable form

Gestalt Laws

• Is this…• …a triangle and a

square..• …or…• …three geometric

figures…• …or…• 11 linies…?

Gestalt Laws

• Is this…• …a mysterious face

on the surface of Mars…

• …or…• …just a random

effect caused by light and shadow…?

Gestalt Laws

• Law of Isomorphism (or Past Experience)• Past experience and context has an

influence on how we perceive an element

Gestalt Laws

• Is this…• …the letter ”B”• …or…• …the number 13…?

Gestalt Laws

• You are on a Danish website…• What do you expect to happen, when you

click on these icons…?

Gestalt Laws

• Law of Good Continuation• When there is an intersection between two

or more objects, we tend to perceive each object as a single uninterrupted object

Gestalt Laws

• How did we produce this figure…?

Gestalt Laws

• How did we produce this figure…?

+ =

Gestalt Laws

• Law of Figure and Ground• We tend to organize our perceptions by

distinguishing a figure from a ground

Gestalt Laws

• Is this…• …a vase...• …or…• …two faces in

silhouette?

Gestalt Laws

http://www.slideshare.net/rogerpitiot/gestalt-theory




Gestalt Laws

PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your...

Documents

Transcript of PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your...