1. PBA Front-End Week 5

2. 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!

3. Search Engine Optimisation

4. 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.

5. 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…!

6. 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

7. 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

8. 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

9. 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

10. Search Engine Optimisation So, I’m about to write material for my website… …what should I actually do…?

11. 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!

12. 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?

13. Search Engine Optimisation The Global Catastrophe Bla bla bla bla bla…

14. Search Engine Optimisation World War II : The Global Catastrophe Bla bla bla bla bla…

15. 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

16. 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

17. 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

18. 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

19. Search Engine Optimisation

20. Most important in page rankings – other pages that link to your page! How to achieve that…?

21. 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

22. 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

23. 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…

24. Search Engine Optimisation

25. 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

26. Links and navigation Fundamental types of site structure – Linear – Hierarchical (shallow) – Hierarchical (deep) – …and combinations

27. 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

28. 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

29. 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…

30. 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

31. Links and navigation …and combinations! Many sites willl need to use both types of organi- sation Web-shop – Presentation (hierarchical) – Sales (linear)

32. Links and navigation Links in general serve two purposes: – Links to other, external websites – Navigation within the website

33. 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

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

35. 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)this – Make sure that visited links are distinguishable (e.g. like this) – Avoid writing sentences around links: Bad: Click here for more informationClick here Good: The tiger lives in the junglejungle

36. 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…?

37. Links and navigation Where do we put a menu…? ? Best for reading… Normal in software…

38. 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

39. Links and navigation Example: What will the below buttons do, on a website with linear structure…?

40. Links and navigation Why use metaphors…? – More intuitive – Usability – Align navigation with general visual design

41. Links and navigation Find your local weather forecast…

42. Links and navigation What will a 5-year old prefer…? …or text links?

43. 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

44. Links and navigation

45. 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…?

46. 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

48. 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…?

49. 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

50. Page composition Header variations

51. Page composition Breadcrumb navigation

52. 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

53. Page composition Search

54. 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” – …

55. 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

56. Page composition

57. Page footers Usually contains useful, ”static”, information – Author information – Copyright statements – Contact details – Useful general links – …

58. 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)

59. Page composition

60. 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!

61. 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

62. Page composition More than one template might be necessary… …but should have consistent ”look and feel”

63. Page composition

64. Secondary page templates In principle like internal page templates Help establish ”a sense of the vertical dimension in the site”… What does that mean!?

65. Page composition

66. 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

67. Page composition The home page itself… Four main elements – Identity – Navigation and Tools – Content – Timeliness

68. 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

70. 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!

71. Page composition

72. 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

73. 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…

74. Gestalt Laws

76. 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

77. Gestalt Laws Law of Proximity Elements that are close to each other will be perceived as one single structure

78. Gestalt Laws Is this… …four vertical columns… …or… …seven horizontal rows… …or… …28 unrelated dots…?

79. Gestalt Laws Is this… …four vertical columns… …or… …seven horizontal rows… …or… …28 unrelated dots…?

80. Gestalt Laws Law of Similarity Elements that look similar will be perceived as one single structure

81. Gestalt Laws Is this… …12 unrelated columns… …or… …six groups of two columns, alternating between white and yellow?

82. Gestalt Laws Law of Closure Humans have a tendency to perceive an incomplete structure as complete (to close or fill the gaps)

83. Gestalt Laws Is this… …five unrelated circle fragments… …or… …a circle?

84. Gestalt Laws Is this… …five unrelated circle fragments… …or… …a circle?

85. Gestalt Laws How many triangles do you see in the pictures…?

86. Gestalt Laws Law of Closure (variant) Elements within a bounding structure will be perceived as one single structure

87. Gestalt Laws Is this… …six groups of two columns, alternating between white and yellow… …or… …three boxes con- taining a varying number of dots?

88. Gestalt Laws These three laws… – Law of Proximity – Law of Similarity – Law of Closure …are used very often in web design!

89. Gestalt Laws Law of Proximity: These menu items are related, and are physically close

90. Gestalt Laws Law of Similarity: These menu items are related, and they look similar

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

92. Gestalt Laws Law of Closure: Do we have a outline of a box here…?

93. Gestalt Laws Law of Closure: Do we have a outline of a box here…?

94. Gestalt Laws Law of Prägnanz (or Good Form) Humans tend to order a set of elements into one simple, recognisable form

95. Gestalt Laws Is this… …a triangle and a square.. …or… …three geometric figures… …or… 11 linies…?

96. Gestalt Laws Is this… …a mysterious face on the surface of Mars… …or… …just a random effect caused by light and shadow…?

97. Gestalt Laws Law of Isomorphism (or Past Experience) Past experience and context has an influence on how we perceive an element

98. Gestalt Laws Is this… …the letter ”B” …or… …the number 13…?

99. Gestalt Laws You are on a Danish website… What do you expect to happen, when you click on these icons…?

100. 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

101. Gestalt Laws How did we produce this figure…?

102. Gestalt Laws How did we produce this figure…? + =

103. Gestalt Laws How did we produce this figure…? +=

104. Gestalt Laws Law of Figure and Ground We tend to organize our perceptions by distinguishing a figure from a ground

105. Gestalt Laws Is this… …a vase... …or… …two faces in silhouette?

106. Gestalt Laws http://www.slideshare.net/rogerpitiot/gestalt-theory

107. Gestalt Laws