Upload
richard-stanley
View
217
Download
0
Embed Size (px)
Citation preview
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!
Search Engine Optimisation
Search Engine Optimisation
• 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.
Search Engine Optimisation
• 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…!
Search Engine Optimisation
• 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
Search Engine Optimisation
• 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
Search Engine Optimisation
• A Search Engine cannot see text in– Graphics (logos, banners, etc.)– Flash animations– Video– Audio (oh, really…)– Graphic links– Links depending on dynamic code
Search Engine Optimisation
• 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
Search Engine Optimisation
• So, I’m about to write material for my website…
• …what should I actually do…?
Search Engine Optimisation
• 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!
Search Engine Optimisation
• 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?
Search Engine Optimisation
The Global Catastrophe
Bla bla bla bla bla…
Search Engine Optimisation
World War II : The Global Catastrophe
Bla bla bla bla bla…
Search Engine Optimisation
• 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
Search Engine Optimisation
• 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
Search Engine Optimisation
• 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
Search Engine Optimisation
• 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
Search Engine Optimisation
Search Engine Optimisation
• Most important in page rankings – other pages that link to your page!
• How to achieve that…?
Search Engine Optimisation
• 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
Search Engine Optimisation
• 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
Search Engine Optimisation
• 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…
Search Engine Optimisation
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
Links and navigation
• Fundamental types of site structure– Linear– Hierarchical (shallow)– Hierarchical (deep)– …and combinations
Links and navigation
• 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
Links and navigation
• 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
Links and navigation
• 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…
Links and navigation
• 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
Links and navigation
• …and combinations!• Many sites willl need to
use both types of organi-sation
• Web-shop– Presentation (hierarchical)– Sales (linear)
Links and navigation
• Links in general serve two purposes:– Links to other, external websites– Navigation within the website
Links and navigation
• 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
Links and navigation
• 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
Links and navigation
• 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
Links and navigation
• 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…?
Links and navigation
• Where do we put a menu…?
?
Best for reading…
Normal in software…
Links and navigation
• 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
Links and navigation
• Example: What will the below buttons do, on a website with linear structure…?
Links and navigation
• Why use metaphors…?– More intuitive– Usability– Align navigation with
general visual design
Links and navigation
• Find your local weather forecast…
Links and navigation
• What will a 5-year old prefer…?
…or text links?
Links and navigation
• 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
Links and navigation
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
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
• 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
• 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 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
• 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