Intranet Home Page Design

flickr-designawards

An important decision for any Intranet project is designing the home page – the default starting point for all activities. What content, navigation and processes should be included. And there won’t be enough room to include everything you’d like so it is just as important to decide what is deliberately not included.

This post is not about styling the Intranet home page. It’s about designing for interaction. From a styling perspective, I always recommend following current established Internet conventions and generally plagiarize from the likes of the BBC web sites for examples. If you want to create a unique visual, then engage a talented web designer. On the side, they can also tidy up any poor usability gotchas that your chosen technology platform contains. Do also budget for periodic styling updates. Those established web conventions continue to change as new trends emerge.  There was a time when it made sense to have all links in blue and underlined at all times. Now you just tend to see an underline when you hover over a link – permanent underlines create too much noise on the page. And whilst it is still better to use a consistent colour for links, it doesn’t have to be blue.  But that’s a whole other topic to debate.

Types of interaction

The challenge with designing an Intranet home page is that you are trying to target multiple different audiences. One screen will never suit all. But you can optimise elements of the page to satisfy the core different reasons for visiting the Intranet home page and how people will interact with it:

Image: the four reasons for visiting an intranet home page
At a simple level, people visiting an Intranet home page will take one of four approaches:

Type Scenario Starting point
1 Known/Directed I’m looking for something specific, take me there! Navigation
2 Known/Undirected I’m looking for something specific, I can find it myself Search
3 Unknown/Directed Having a browse, show me what I ought to know about News / Promotions
4 Unknown/Undirected Having a browse, I wonder what others have been doing Activity Stream

It’s not that dissimilar to shopping. Sometimes you’re in a hurry, sometimes not. Sometimes you have a specific list of items to buy, sometimes you’re just having a look and may not buy anything at all. Sometimes you may end up buying something you would never have anticipated or predicted until you saw it.

The ideal home page should be able to satisfy each of these starting points without over-cluttering the page in the process. Not as easy a feat as you’d think. It’s a balancing act to decide what navigation is going to be the most helpful without creating a crazy nested hierarchy of links. Departments will want to fill the page with their news and promotions – “People need to know about this”. Individuals may disagree and expect more personal updates based on interactions within peer groups or topics of interest/relevance.

Image: sample intranet home page layout

The image above is a basic sample layout with areas for each of the four types of interaction using Internet conventions for placing key elements. The ‘Top Links’ is usually a fixed set of links that appears everywhere, constantly visible from the top right corner, a way of navigating between key sites, applications and services.  Global navigation is for moving around the Intranet. On the home page, the left sidebar provides a way to ‘pin’ popular links such as the help desk, staff directory etc. The right sidebar provides the formal internal news and updates. Promotions to alert people about what’s happening or actions they may need to complete, such as the deadline for completing the annual employee survey. And the centre area is divided between an Internet-like search and beneath it, a personalised activity stream of updates.

Note: this is just one sample layout. For different variations and guidelines to what works and what doesn’t, read Intranet Home Page Variations.

De-bunking some myths

Belief: The home page just needs a search box like the Google or Bing home page

If you look at the statistics for an Intranet home page, particularly where people go next, a search results page will likely dominate. Often accounting for more than 80% of all departures from the home page. That doesn’t necessarily mean that everyone is falling into Type 2 behaviour. Rather, search is the second option for all four types. If the page fails to inform you of what you need, you go to the search box.  Making your home page look like Google may look clever, but is not necessarily wise1. We resort to searching when we can’t easily get straight to the final destination.

If you have a cluttered home page and your statistics show the large percentage of people next visit a search results page, it is telling you that the current content and navigation either are not important to the audience or are confusing. It doesn’t mean you eliminate everything but does suggest a rethink of the layout.

Belief: Everything should be no more than 3 clicks away

This is a legacy of the modem. Back in the days when to navigate to a different page allowed time to go brew a coffee, expecting people to keep clicking through pages led to people giving up. This was a far bigger deal for public facing web businesses but could also impact internal sites. These days, pages are usually much faster to load. Provided people feel they are navigating in the right direction, they will happily click more than three times to get to where they need to be. What matters is the level of confidence they have that they are travelling down the right path versus a time-wasting dead-end. Make sure pages have clear and accurate titles. If it’s a linear process, like a survey, it can help to provide a current progress indicator.

Belief: Nobody reads the internal newsletter

Actually… sometimes, in some organisations, very few people do. But that’s usually because it is also distributed via email (or even paper!) and most people read it there instead. Either redesign so that the email contains links to the online version or acknowledge that it doesn’t also need to also occupy a chunk of the home page and downgrade to a navigation link.

I do a lot of interviews with end-users because I often start client projects with an ‘organisational analysis’ phase to understand how information and technology is currently being used in everyday work. And an issue that is repeatedly raised is wanting to hear more news and updates about what is going on in the organisation – from senior management and across different business areas. People are often far more attached to their companies than they are given credit for.  It’s not that nobody reads the newsletter because they’re not interested, it’s that the delivery format has not changed in the past decade or two. Time for a refresh!

The future Intranet home page

Digital, social and mobile trends are transforming the workplace and some people are beginning to wonder if intranets are a dying concept. It depends on the definition. If you think of an Intranet as just an internal corporate web site for publishing content, then yes, it’s in trouble. But for me, an Intranet is a web-based platform that leverages technologies originally designed for the open Internet and uses them for beneficial purposes internally within an organisation. Managing content, communications and processes. Often the bits and pieces that fall in the gaps between enterprise applications. But also as a unifying layer across those applications. In that respect, a web-based approach is likely to remain popular for quite some time yet. Whether you call it an Intranet, portal or something else is up to you.

What is likely to happen is the recognition that most intranets contain sections. And as people go increasingly mobile, those sections are likely to become ‘apps’. There may still be an intranet home page. But increasingly, the portal is going to be the home screen of the device.  Some of the apps on display will be provided by the intranet platform. Some will be directly provided by business applications. The end user shouldn’t need to care about the difference. They tap, find what they need and get stuff done.

Image - Intranet on a mobile device

The image above shows a possible future portal – apps to launch from a mobile device. The blue icons are managed by the intranet platform. The red icons indicate business applications. In reality, you wouldn’t show the difference, the user shouldn’t care. And of course, no intranet home page would be complete without some external content sources, like the weather! 🙂 courtesy of the Met Office for in the UK.

You could probably even fix the background image to show the official company logo and current message. But try and resist the temptation. Let people smile when they switch on their devices…

I hope you enjoyed this post. Thanks for reading!

1 For a discussion of the difference between clever and wise, read: From data to knowledge and beyond…

Related blog posts

Flickr image at the top of this post: Winners of the International 2008 Information Style Awards kindly shared by Wonderlane

What really matters on a tablet

Touch a tablet

…is how responsive the screen is to interaction: visual, touch and motion.  That’s where Apple is succeeding and others, Android- and Windows-based devices, are failing compete. It also needs to be ‘Instant On’ like a mobile phone, but most have at least cottoned on to that.

— Update 30th March —

Steven Sinofsky has just posted on the Windows 8 blog details about Touch hardware and Windows 8, expanding on information first shared during the Build conference last October.  We attended that conference and have a Samsung Windows 8 tablet prototype in our R&D lab.  The touch sensitivity is certainly far superior to previous Windows devices we’ve worked with. But not as superior as the iPad (v1) that I’m still using for day-to-day tablet activities.

Somebody has added a great comment to Steven Sinofsky’s post:

Is there any support for great track pad for the laptops ? Many people (programmers, businesses) have the traditional laptops (may be with touch screen in future) but having a great quality touch with same gesture support will be THE feature for Windows PCs going forward

Spot on question. My primary hardware devices at the moment are an Apple MacBook Air, Apple iPad (v1) and Apple iPhone 3GS. All three have comparible sensitivity in the touch department. No, the MacBook Air does not have a touch-screen but the trackpad is so good that I no longer use a mouse.  The same cannot be said for any Windows-based laptops I’ve worked with.   Microsoft needs to get better at linking the experience (hate using that word but can’t think of a better one) across different form factors. A tricky challenge when you’re dependent on many different hardware vendors.  And given Microsoft is not great at achieving this across software, or even their own web sites, the odds of that happening are not great.

— original post —

Ryan Block at gdgt outlines why he thinks the new iPad retina-display specs are a big deal:

The core experience of the iPad, and every tablet for that matter, is the screen. It’s so fundamental that it’s almost completely forgettable. Post-PC devices have absolutely nothing to hide behind. Specs, form-factors, all that stuff melts away in favor of something else that’s much more intangible. When the software provides the metaphor for the device, every tablet lives and dies by the display and what’s on that display.

So when a device comes along like the iPad that doesn’t just display the application, but actually becomes the application, radically improving its screen radically improves the experience. And when a device’s screen is as radically improved as the display in the new iPad, the device itself is fundamentally changed

Whilst the article emphasises the new retina-display introduced with the latest iPad, the same can be said for other sensory inputs and outputs – the sensitivity of the screen to touch (for swiping, input etc.) and reaction of apps to motion.

The first mobile phone I used that involved a pure touch-based user interface, i.e. no physical keyboard, was the HTC Hero running Google’s Android OS. For me it was a step change in how I used a phone and I loved it from the start. The ability to quickly swipe across screens and retrieve or view different data, whether it was to check emails, find a contact, follow a map, send a Tweet… it was a jump in productivity for me. Until…

… the iPad launched.

Having always been a fan of tablets and frustrated by the lack of progress, it was an easy decision to get one and see if the device was worthy of the hype.  I still have it 2 years later and it’s an integral part of my daily work.  I don’t still have the HTC Hero.  Because once I started using the iPad, the way I touched screens altered. The iPad was way more responsive (read: reacted to a much lighter touch) than the HTC Hero. All of a sudden, I’d go to swipe the screen on the phone and it wouldn’t respond. I’d have to swipe again, but harder.  It was nothing compared to the lack of sensitivity on Windows touch-enabled phones but it was enough to be annoying.

Then there’s the thought behind motion on Apple devices. I was delighted the first time I moved the iPhone from my ear to look at the screen (on a dreaded automated call that required keyboard input) – the keypad automatically appeared. On the HTC Hero, I was forever accidentally cancelling calls because it didn’t do that, you had to push a button to reactivate the screen and I’d invariably press the button that ended the call. Doh!

That’s why 2 years later, I now also have an iPhone, albeit the ageing 3GS model. Everything about how it responds to my actions trumps the alternatives I’ve tried.  That’s the challenge facing Apple’s rivals. Tablets will, in one form or another, become a standard part of the typical workplace in the coming years.  And they are setting the bar for what people have become used to.  Alternatives need to either be a lot cheaper or do something fundamentally different that the iPad can’t.

Related blog posts

Design flaws and why best practices fail

Just before Christmas, I was having lunch with a friend and former colleague (no prizes for guessing where from). As per usual, out came the gadgets. Including my iPod and his Zune.

Let’s rewind back to when I first got an iPod. It seemed obvious how to scroll through the menus – move your finger around the wheel. Less obvious was how to adjust the volume when playing music. It took a couple of attempts at prodding the forward and rewind buttons, despite the labels telling me they were not the volume controls, before realising that the same action to scroll through menus applied to adjusting the volume.

The iPod

No manual required and all pretty logical really. The colour and texture help guide your finger around the wheel. You immediately discover that the centre of the wheel is the button you click to select. And the remaining actions are clearly labeled – press menu to get the menu, forward to go forward, rewind to go backwards and play/pause to play or pause.

So fast forward to the present and the Zune. My friend hands over the Zune and then sighs as I attempt to use it like an iPod. The Zune looks vaguely like an iPod but isn’t an iPod.

The Zune

The big button in the middle isn’t quite a circle but is a long way from being a rectangle with rounded edges so we will refer to it as the circle for the rest of this post. Net result. I try moving my thumb in a circular motion to scroll through the menu. That doesn’t work. You press the top of the circle to go up the menu and the bottom of the circle to go down the menu. Once shown how, you can also swipe up and down to accelerate through the menu. There are two other buttons. One has the familiar play/pause icon. The other has an arrow. Can’t remember what it does but would assume it’s simliar to the MENU on an iPod.

The reason the iPod wheel is so easy to use is that the shape is logical to the action. The reason the Zune is so confusing is because the shape does not match the action. Compare the two images below.

On the left is how the iPod works. 6 possible actions all contained on a single wheel: 5 buttons and a circular sliding motion. Your thumb is guided around the wheel by using a different texture for the wheel than the rest of the iPod (including the centre of the wheel). The circular motion works both clockwise and anti-clockwise, as you would expect. Four buttons at North, South, East and West and a fifth button in the middle.

On the right is how the Zune works. 8 possible actions: On the circle there are 5 buttons and two sliding motions. There are 2 additional buttons either side of the circle. The sliding motions are up/down and left/right, not that you would know from the look and feel of the circle. The motions do not match the shape. And you have to assume that there are buttons on the circle, because there is no indication icon-wise.

Why did Microsoft choose to use a circle on the Zune?

I have zero formal design or usability qualifications. But if I were given the spec of designing a large ‘button’ interface that you press at the top to go up, the bottom to go down, and can stroke up or down to accelerate (and similar applies for left and right), I would have used a shape that matched the action. Something like this:

My version of the Zune

And it’s a small point, but if you can’t fit the word ‘menu’ on a button and you are Microsoft, why wouldn’t you just use the same icon you use on Windows? Most people would figure out what it means… They certainly wouldn’t mistake it for the rewind button.

There’s an ironic twist to this. Two years ago, a YouTube video appeared – What if Microsoft designed the iPod packaging? It is hilarious and embedded at the end of this post in case you’ve not seen it. It was later revealed that the video came from within Microsoft. When the Zune launched, it shipped in a simple box.

So why did Microsoft choose to use a circle on the Zune? Was it to make it look like the iPod? A daft decision when the form does not match the function.

This is a common mistake and not just confined to design or usability. How many organisations implement a ‘best practice’ on the basis it worked for a similar organisation, and yet fail? It is rare to find a perfect match in terms of context and conditions. Instead, it is better to apply lessons learned but adjust them to your own situation, not bend your situation to fit the lesson. Apple’s lesson was that form and function should be as simple as possible and align. Microsoft followed the form but changed the function. Wrong.

If Microsoft designed the iPod packaging

To click or not to click

One of the topics I spend some time on when delivering enterprise search workshops is helping organisations to identify and understand when you want people to click on a search result versus not.

When someone is seeking interactive help – for example: I want to submit a question to an internal discussion forum – then you want the search results to display that forum as the first link on the page, with enough information for the user to be confident that it is the right forum. I click on the link, enter the forum, post my question and start a conversation. Similarly, when someone is seeking detailed information – for example: I need last year’s budget – you want enough information displayed in the results page for me to be confident that the 10Mb file I am about to download over a flaky Internet connection is the right one.

When someone is seeking a snippet of information – for example: I want to know the telephone number for a customer – then you can improve productivity by displaying enough information in the search results for people to not have to click anything. I don’t need to view a page or open a document about the customer, I just want the telephone number because I need to call them.

This can be done within SharePoint Server 2007 (and it’s sibling Search Server 2008) using managed properties. You can modify the results pages to display additional information by tweaking the XML that determines what and how information is displayed.

Interestingly, Yahoo has made an announcement to enable similar behaviour on their Internet search engine – An open approach to Search. Web site owners can submit data and Yahoo will display their results in a more informative format. Here is the example (‘before’ on the left/’after’ on the right) given on their blog post:

From a user perspective, the ‘after’ is a big improvement. If that’s the restaurant I was looking for, I can see it has some good reviews and I’ve got the telephone number to make a reservation. But I’m not sure the web site owner will agree. That result isn’t from the restaurant itself, it is from a review/directory site. The argument behind search engine optimisation (SEO) is that many people start their Internet journey at a search engine. If you want your web site to be the next destination, then you need to be at the top of the search results. In this example, improving the visual display of search results means that there is no next destination. The search engine becomes the start and end. If you have a web site with a business model dependent on online advertising revenue (dependent on people visiting your site), the search engine just ate your lunch.

Naturally, there is a solution. If you are an intermediary web site, you need the search result to display information that will still bring a visitor to your site or keep you in the loop of the transaction. In this example, perhaps being able to offer a 10% discount on the meal if booked through the review site…

Technorati tags: Search ; Enterprise Search