Practical Design Tips for Intranets, Extranets and Collaborative Web Sites


Published on

Some practical design tips for active web sites within organisations such as intranets, extranets, social nets, team and project sites. How to organise page layouts and what to avoid. Tips can be implemented using most content management systems, from WordPress to SharePoint. Public web sites are used to demonstrate (good and some not so...)

Published in: Technology, Design
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Practical Design Tips for Intranets, Extranets and Collaborative Web Sites

  1. 1. Practical design tips forintranets, extranets andcollaborative web sitesSharon RichardsonJoining Dots www.joiningdots.comNovember 2011 @joiningdots
  2. 2. Before we get started…These tips are for organisations deploying a platform fordelivering active web sites such as intranets, extranets,team and project workspaces, and social networks.Active sites contain a lot of content, are frequentlyupdated and include actions such as sharing links,contributing content and filling out forms/doing stuff.Active sites benefit from a consistent layout so thatvisitors don‟t have to figure out where to go if theyhave arrived looking for a specific item.Public web sites will be used to demonstrate.
  3. 3. …andThese tips are based on popular formats and most canbe easily applied using most content managementsystems, from WordPress to SharePoint.This presentation does not cover magazine-style newsreaders or „brochure-ware‟ sites that are designed fora very different (more controlled) style of interaction.(We may use the odd one as an example).This version of the presentation was created for theweb and includes additional text to replace thelack of someone (me) to present it verbally. 
  4. 4. A framework for page layouts
  5. 5. A standard page layoutHeader Logo Global navigation links Search Account/login & key linksPage Content (text, media)Content Local navigation (current site hierarchy) - or – Local search (filter current page) Contextual navigation: actions or links/ details relating to current page content Promotional navigation: highlights unrelated to the current page contentFooter Formal links, Copyright, Ts & Cs etc.
  6. 6. HeaderVisible throughout the site. Typically contains:• Logo on the left followed by a title or headline• Static links (admin, login, help) in the top right corner (or spanning the width at the top of the header)• Global navigation bar (used across current site hierarchy) below the logo and title• Search box on the right of the global navigation barGlobal navigation is usually a bar, single colour/shading
  7. 7. Header StylesStandard Site Title/HeadlineHeader The standard site header includes a logo for the site on the left, along with a site title or headline. The top-right corner usually contains key static links, such as Help or a link to your account (or login prompt). Some web sites today include social media links to the right of the site title/headline, such as a news feed (RSS), and links to Twitter, Facebook, Google+ etc. The header usually includes a global navigation bar and search box. It may vary based on page content.
  8. 8. Header StylesSearch-focused Site title/headline makes way for a larger search box. (Common for search results pages)Doublenavigation Site Title/Headline For multiple site hierarchies. The Top Links bar is visible on all sites, the global navigation is for the current site hierarchy. Search box may moved to Top Links (top right corner).
  9. 9. Header StylesMinimalist There is no header, just a single global navigation bar, visible on all sites. May not even have separate key links. Good for putting focus on the content.Distracting Opposite to minimalist, distracts eyes away from the content. Only use if you have a good reason to distract.
  10. 10. Page ContentTypically contains:• Content – what you‟re supposed to be reading.• Local navigation, usually on the left, occasionally below the global navigation bar. Used to navigate through the current site or filter the current page• Contextual navigation, usually on the right of the page: actions, related links and information, relevant to the current page• May include promotional navigation – latest updates or highlights unrelated to current page content
  11. 11. Page ContentStandard Local navigation is on the left. Contextual navigation is embedded with the page content, positioned on the right. A classic page displaying content. Local navigation provides a hierarchy for the site. Contextual navigation promotes recommended content regardless of hierarchy.
  12. 12. Page ContentSearchResults When displaying search results, instead of local navigation you often have local search filters that can refine the results currently being displayed. There may also be a sidebar on the right displaying other results or options (or adverts).
  13. 13. Page ContentContentdriven Pages focused on content may not have any local navigation at all or it is placed beneath global navigation. If there is contextual navigation, it will contain suggested actions relating to the content e.g. Buy it, Highlighted Information or Links to related content.
  14. 14. Page ContentPromotiondriven The start of the page area is dominated by promotional navigation, highlighting other items you may want to look at. Not contextual as may not be related to the current page content, e.g. list of recent articles published. Use with caution, can clutter and hide page content.
  15. 15. Page ContentFeaturefocus(example) When promoting specific features, a completely different style of page layout may be used, such as full-width, no navigation (other than in the header) and content in sections. Popular for the Home Page and specialist areas.
  16. 16. Page ContentDoubleNavigationSidebar Some web sites (usually blogs) use a double sidebar on the left or right for all page navigation instead of a split (one left, one right) or single side bar (left or right). Useful for displaying recent activity/ key links without scrolling. But only if there are plenty of useful links/ activities to share…
  17. 17. Page Content: Formatting Title (Header 1) Sub-title (H2) Paragraph content goes here…. (p) More paragraphs… and links.For the page content, use consistent formatting for keyelements such as headings, paragraphs andimages/media files.Use as few different layout styles as possible for consistency.
  18. 18. Page Content: Text Title Sub-title Paragraph text with a link in the middle…Titles and main headings should be significantly larger thannormal paragraph text.Paragraph text size should be the same or slightly largerthan text in the browser menus/tabs. Usually 9 – 10ptdepending on the font. (If user needs larger, same shouldapply to application menus, use Accessibility Settings.)Decide how text links will behave (e.g. blue, underline onhover). Avoid using bright blue or underlines for normal text.
  19. 19. FootersStandardFooter The footer is usually standard across all pages. On public web sites, it often contains the more formal links, such as terms and conditions, privacy policy, copyright notice, and links specific to an audience that aren‟t suited to the global links at the top of the page, e.g. Resources, Developers, Advertisers, Partners etc. The footer is rarely visible without scrolling. Few active sites adopt fixed page heights (for good reason). Don‟t rely on it for important common links. Niche audiences (expert visitors) tend to know when to go looking for it.
  20. 20. The Home PageTypically uses a dedicated page layout• Same Header and Footer layout as for all other sites and pages for consistency• Use the Page area to promote what matters and latest information updates. Consider removing all in- page navigation if not relevant as a starting point• The only page that may use a fixed height depending on the layout and content• Don‟t assume people will start here when visiting
  21. 21. Sample Page LayoutsSome ideas to consider
  22. 22. Minimalist Home Page Site Title/HeadlineRisky for internal sites. Must make sure promotion changesat least weekly or people will rarely take any notice
  23. 23. Busy Home Page Site Title/HeadlineAction and news oriented focused on what people visit for.Eliminate left navigation if want to simplify/reduce noise
  24. 24. Social Network Home Page Site Title/HeadlineTwitter- and Facebook-esque, a „what‟s happening‟ ofinterest across the organisation
  25. 25. Team/Project Home Page Site Title/HeadlineFocus the home page on the purpose of the site, updatesrelating to the site and key activities to complete
  26. 26. Search Results PageOne site likely to have a different header, to make room forsearch results. Should still have Top Links bar.
  27. 27. Standard Content Page Site Title/HeadlineEliminate page navigation if it isn‟t relevant. But usually haveat least one sidebar to jump between pages within the site
  28. 28. Alternate Content Page Site Title/HeadlineFocus on the content and can be an excuse to drop inpromotional nav (you don‟t know what you don‟t know)
  29. 29. Feature Page Site Title/HeadlineTending towards brochure-ware. Use with caution forinternal sites, few needs require this layout
  30. 30. All product names, logos, brands and other trademarks referred to on the following pages are the property of their respective trademark and copyright holders.Examples from the webSome good, some not so… 
  31. 31. Notes on ExamplesUnless there is a reason to show something, Iavoided using Home pages and concentratedpages within sites to demonstrate:• Article pages (news sites)• Timelines of comments (social media)• Item pages (e-Commerce, action-oriented)• Information pages (product brands)
  32. 32. BBC News
  33. 33. BBC Radio
  34. 34. BBC SitesStandard Top Links bar visible on all sites, colour varies basedon site hierarchy. (News is red, Radio is grey).On BBC News, Contextual navigation is embedded to theright of the page content (Related Stories). The right side ofthe page is for Promotional navigation: Top Stories, Features& Analysis. Local navigation is below global navigation.BBC Radio is using a Feature Page Layout showing what iscurrently on air.One possible flaw: the Mobile link next to the site logoA good example for organisations. The BBC is tax-fundedhence no need for distractions that other news sites rely on. Tip: use a standard Top Links bar everywhere for large site hierarchies
  35. 35. Yahoo Home Page
  36. 36. Yahoo News
  37. 37. Yahoo SitesHome page does not share the same style of Header that allsites beneath it use. (Sub-sites consistent with each other)Global navigation is placed on the left on home page. Linksabove the search box in the Header are for refining results.Could cause confusion because there are two „News‟ linkson the Home page.News page has similar structure to BBC News but with amuch larger header to fit in advertising.Big plus: all sites beneath Home have a link in their Header togo back to the Home page (top-right corner). The sitesdon‟t have a full Top Links bar but do have common links. Tip: all Headers should share some consistency.
  38. 38. Huffington Post entire-fle_n_1064985.html
  39. 39. Guardian News activist-camp
  40. 40. Huffington Post vs GuardianBlog vs News Paper. Lots of similarities, some differences.Header has to make room for advertising that funds the sitebut one uses a very large logo, the other keeps it small. Inboth cases, there is a Top Links bar easily missed.Global navigation is like BBC News – simple bar with 2 levels(2nd level is local navigation). This format is standard acrossmost news sites: portal, paper, blog.Blog uses promotional navigation above the page content,a scrolling bar of latest headlines and social media links areprominent in the header as well as the article. Newspaperlooks a bit too newspaper-y for the web. Tip: Avoid excessively large headers if you can Bonus: For news articles, avoid navigation on the left
  41. 41. Facebook
  42. 42. FacebookNote the minimalist header.Standard page structure with local navigation on the left.On the right, it is personalised rather than contextual (to theuser instead of based on the content).Local navigation is standard but the links are personalisedbased on who is logged in (groups, lists).At the top of the page area is „Update Status‟, action to dosomething. Activity is essential for Facebook. Directly belowthe Status bar is a timeline of recent updates from „friends‟.It‟s quite a boring web site design but functional and peopleseem to be using it a lot more than glossier sites… Tip: Personalise the page content for social sites
  43. 43. LinkedIn
  44. 44. LinkedInThe header is not as minimalist as Facebook but logo area iskept very small.Page layout is quite different. No local navigation on theleft, plenty of promotional navigation in the page.Note the top of the page area (i.e. directly below globalnavigation), like Facebook, is reserved for encouragingactivity – update your status.The rest of the page is quite choppy. Either look at theimage on the previous page or go to your own LinkedInpage. Feel how your eyes move. If they work like mine, theyjump all over the place. Not focused on content. Tip: Place what matters at the top of the page area If you have a timeline, put it on the home page
  45. 45. Twitter
  46. 46. TwitterAnother minimalist header. Spot the trend… social sites gominimal, news sites go maximum.Like LinkedIn, no navigation on the left side of the page.Twitter has a much cleaner layout. Again, the actiondominates the top of the page – „What‟s happening?‟Followed by a timeline of tweets from people you follow.The navigation on the right is part personalised (your profile,recommendations to follow) and part promotional(promoted and trending topics).Another quite boring site design that works. In all 3 cases,you need to login to view these pages making them similarto how internal web sites work at organisations… Tip: A site doesn‟t have to be pretty to work well
  47. 47. YouTube
  48. 48. YouTubeAnother minimalist header. Not sure white works for globalnavigation but all focus is on the page area.No local navigation and on the right, the contextualnavigation (once you get past the advert) is really a set ofsearch results based on the current video you are viewing.Most of the page is taken up by the video playing. Directlybeneath are some metadata about the video: whouploaded it and when, how many times it has been viewed,how many like versus dislike it.Beneath the video is a timeline of comments, similar tosocial networks. You don‟t have to login to view videos butyou do if you want to comment or upload your own. Tip: If the content matters, make it prominent
  49. 49. Amazon: Search (and do a search)
  50. 50. Amazon: Item Williams/dp/0321534042/
  51. 51. AmazonToggle between Search and Item slides: note how much ofthe header is identical versus changes.Two different page layouts. Search has local navigation onthe left containing search filters to refine your results. Itemsdon‟t have local navigation to put focus on the content.Contextual navigation on the right, plenty of options to buywhat you‟re looking at.Item pages have a standard layout: image on the left,details in the middle, buy it on the right. With details belowthat you usually have to scroll down to view. Tip: keep elements in the same place on pages and keep layout variations to a minimum
  52. 52. eBay: Search (and do a search)
  53. 53. eBay: Item and click on an item
  54. 54. eBayBe careful to make sure your header can fit a width of1,024px, preferably 800px to be certain. Toggle between theSearch and Item pages and you can see the links at thetop-right have been cut-off on the search results page.(Note: this seems to have been fixed on a return site visit)And never have 2 search boxes visible on some pagesunless one is clearly for a different purpose to the other…Notice that eBay item pages have the same 3-columnlayout for content as Amazon just with elements in adifferent order. Image is also on the left. The centre area isdominated by Buy/Bid options with seller details on the right.It works because it is still consistent throughout. Tip: Make sure your header fits most display sizes
  55. 55. Starbucks
  56. 56. Starbucks on Facebook pt 1
  57. 57. Starbucks on Facebook pt 2
  58. 58. Starbucks site vs Facebook pageStarbucks has 10x* more visitors to its Facebook page thanto its web site. (Coca Cola has a 100x ratio…)Web site is brochure-ware. Dare to hover over the globalnavigation… Shop and search only available in the USFacebook page has same highlights as web site but thedifference is the focus on people. From posting pictures ofthemselves supporting a campaign to asking when newproducts are being released..People are finding more useful information on the Facebookpage than on the web site for many product brands… * Wall Street Journal, May 2011 Tip: Social and brochure-ware don‟t mix. If you want people to participate, lose the glossy format
  59. 59. Microsoft
  60. 60. Microsoft Office
  61. 61. Microsoft SharePoint
  62. 62. Xbox
  63. 63. Microsoft pt1Where to start…• Top Links bar only appears on• Some global navigation links stay within, some head to product sites• Each product site appears to be designed differently. Consistency you don‟t want – no shared top links, no link back to, different search box position, different header size• Xbox is excused as it is a completely separate URLAt least it is possible to buy retail products direct online now.Easiest to find if you are on the site tho‟… Tip: Decide where search sits and keep it there
  64. 64. Microsoft pt2On to Office• Count the number of different fonts on the page• Yes the Excel logo really is being cut-off at the top• Current home page is the ugliest of all examples hereAnd SharePoint• For a major product, it‟s hard to find. No visible link from or• Another site, another header, another search position• Global navigation behaves differently (hover vs click)• Pale orange links on a white background? Tip: Choose fonts and colours wisely
  65. 65. Microsoft pt3Note Xbox use of a feature page layout for the Home pageWhy XBox can be different to other Microsoft sites:• Entire site is branded differently. The only Microsoft reference is in the footer of the pages.• It has its own domain – versus being a subdomain under• It has never been branded as Microsoft XBoxAll product sites ending should share aconsistent design, at least in terms of search and top linksbar (compare to BBC sites) and include a link back to theroot Home (even Yahoo manages to do that). Tip: Either be consistent or contrast, don‟t muddle
  66. 66. Apple
  67. 67. Apple Store (US)
  68. 68. Apple Store (UK)
  69. 69. AppleUses a minimalist header: logo and global navigation thatdoubles as top links because it is the same everywhere,even the online store.Talking of the online store – international sites are virtuallyidentical to the US site but with local terminology (cart vsbasket). Compare to Starbucks site with a shop that onlysells to the US and Microsoft that uses different site designsfor different countries.The pages are designed more like brochure-ware. Nosocial media integration. But products do include actionssuch as Buy and Download. If you‟re going to makebrochure-ware, don‟t forget its purpose. Tip: A rare example of useful brochure-ware but the sacrifice is not being social.
  70. 70. Lessons from examples• Busiest sites are not the prettiest but all use a consistent layout, focusing on content and activities• Most inconsistent design across sites: Microsoft (should borrow the BBC web design team)• Many newspapers and blogs have cluttered headers and navigation surrounding/burying content• Product sites that aren‟t selling direct are finding people prefer visiting their Facebook pages+ Culture counts (recently read that Chinese visitors prefer very busy/cluttered sites to minimalist designs)
  71. 71. Lesson for SharePoint projectsStop trying to implement designs to make it not look likeSharePoint unless you truly want a brochure-ware site. Ifit‟s a public web site, people will still go to the „it looksjust like Facebook‟ page on Facebook.Yes SharePoint has some butt-ugly design features„out of the box‟ but then so do most social networks. Fix what matters and don‟t break what works. “Investing in shiny corporate web sites is a form of narcissm” – Lee Bryant, Headshift DellB2B Social Media Conf, Nov 2011
  72. 72. RecommendationsHeader and Footer• Consider the size of your header. Avoid big logos• It helps to have a link back to your root home page everywhere (up in the Top Links area)• Most Content Management Systems (CMS) will need a top links bar, for admin and login. Make use of it.• Global navigation should be a tabbed bar below the site logo and title, single colour (or shaded)• Don‟t put anything you want people to see in the Footer
  73. 73. RecommendationsPage Content• The best sites have only a handful of different page layouts for arranging content: Home, Search Results, Items, News/Features• Don‟t assume people will always start from the root Home page• Make actions you want to encourage clearly visible and consistent on all related page layouts• Avoid distracting backgrounds (same for Header too) including slow loading media and background images
  74. 74. RecommendationsIn-page navigation• If you decide you want local navigation on the right instead of on the left, make it so for all site templates – consistency minimises training.• In-page promotional navigation can distract people from the current content. It has limited uses on internal sites (usually only works with news or brochure-ware).• Don‟t place static links (i.e. same regardless of content) in the main content area. Static links should be in the Header if they are applicable to all sites, and in Local Navigation if applicable to current site hierarchy.
  75. 75. Still want to do something different?Companies with brochure-ware sites see moreactivity on their Facebook pages. Who are youdesigning for?Don‟t try to apply a brochure-ware design to anactive web site without help. Apple‟s sites are arare example that works (but no social media).Even big companies get it wrong. Who knows whyMicrosoft thinks pale orange links on a whitebackground look good.
  76. 76. The EndSharon RichardsonJoining Dots www.joiningdots.comNovember 2011 @joiningdots