With so many devices to consume content on, how can publishers and developers maintain a consistent user experience, and how do platforms themselves determine navigation and appearance of content?

One of the most significant hurdles that website managers and publishers are beginning to grapple with is the question of device fragmentation. A single website can now be changed into desktop and mobile versions, apps for the iPhone, Android and Windows Phone, before then being turned into separate apps for the iPad and other tablet devices. Further new channels like television will doubtless not be far off. At the same time, expectations of what clients and users want from websites are increasing so that many of those sites are starting to resemble software applications that cater for more expert users. All of which poses some real challenges on how to retain a consistent user experience across all of these different platforms.

When what I now seem to increasingly be calling the 'desktop web' evolved, websites were initially based on print publications. This didn't really work and over time websites evolved their own set of interaction techniques. By the same token, mobile sites have now evolved enough for it to be clear that they demand as different a set of techniques from desktop websites, as desktop websites do from print publications. What this means is that the mobile web and the desktop web don't have a great deal in common and should in general be kept as separate and distinct entities. Here's some examples of what I mean:

  • On a desktop website, most sites now present their global navigation as a horizontal strip at the top of the page so that users can easily see the key options when they enter the site but aren't distracted by it when reading the content lower down. Have a look upwards to see what I mean. On a mobile site, space is at too much of a premium for this to be viable and the global navigation often ends up being presented as a horizontal list.

  • Desktop websites and software applications not only provide global navigation but they also provide local and contextual navigation within sections. As an example, you might click on a global navigation links for 'books' and then have local navigation options within that section to browse by content type (e.g. ebooks) or by subject. As you drilled down the site, you might also see a 'breadcrumb trail' at the top of the page to remind you where you are in the site and let you click back up a level. If you look at the footer, there might be a 'mini-sitemap' of key pages in that site. If you wanted to checkout an ecommerce transaction, you'd see a progress indicator at the top of the screen to signal what stage of the process you're at and how many more steps you have to go through. All of these local and contextual options don't easily fit onto a mobile device and fall out completely. Instead of breadcrumbs and progress indicators, you get a back button.

  • On a desktop users can use their mouse to hover over a link or button to either see if it is clickable or sometimes to be directly presented with a menu of options from which they can click for a sub-category. This disappears in mobile environments where the touchscreen forces the user to directly select the item. For the same reason, right-clicking to get a contextual window goes.

  • As an extension to the above point, desktop mice allow for extremely precise selection of items on a site or software application. In a touchscreen environment, the human finger is a much blunter instrument which means that navigational links need to be spaced much further apart than would be the case for on a desktop (at least until such time as touchscreen becomes widespread there as well). Where hyperlinks are the dominant navigation mechanism on the the desktop web (to the point where they've been adopted in desktop software applications) they can be too small and fiddly to select on the mobile web, leading to the need to use larger buttons instead.

All of this is just the tip of the iceberg. The next question is that if the mobile site is to be supplemented with an iPhone app, should that adhere to the design conventions of the desktop and mobile sites or to the conventions common for that device platform as mandated by Apple's interface guidelines? To take one simple example; should a software app have a home button like the website does? The question then gets more difficult again if we add in apps for Android, Windows Phone or even Blackberry, as each of these devices have different interface standards for their respective platforms. To take another example; if Android offers some functionality that the iPhone OS doesn't, should the developer use it to give Android users an improved experience or avoid it to make sure that all of the apps offer a consistent experience? Finally, it gets more difficult again if we add in iPad or other tablet applications, as those have interface conventions that represent a midpoint between the desktop and mobile web (indeed, we may end up referring to an additional 'tablet web' before too long). To illustrate what I mean by this, as the iPad is a touchscreen device, all the above caveats about using well spaced out buttons, rather than links, apply. However, the tab bar at the bottom of the screen works much worse on iPad than on iPhone. On the small phone, users are likely to notice the muted icons at the bottom of the screen, even if their attention is on content in the middle of the screen. But the iPad's much bigger screen means that users are typically directing their gaze far from the tab bar and they ignore (and forget) those buttons. So, it's pretty easy to end up with a myriad of platforms that have a range of interaction techniques.

Given the likelihood of mobile internet usage overtaking the desktop web in the next few years, one way that's been proposed to deal with this complexity is to invert the current order in which sites and apps are developed, and to develop for mobile first, only making incremental changes to allow for tablet and then desktop versions. Here's Luke Wroblewski's argument for this:

"Mobile forces you to focus. Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize. So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites. That's good user experience and good for business."

I have to say I'm not entirely convinced. Firstly, it should be self evident that desktop websites ought not to be designed with extraneous clutter in the first place, but many people might quibble with what exactly Wroblewski might consider to be extraneous clutter. I might consider contextual navigation that mobile sites are poorer without and a company whose revenues depended on advertising might cavil at having their ads described in that way. The counter argument is that the case for mobile offering a better user experience than the desktop doesn't have much proof. In usability tests, success rates for tasks are considerably lower on mobile than on the desktop, to the point where Jakon Nielsen described watching the tests are being like stepping into a time machine back to watch tests on desktop websites in 1998. Equally, when reading from an iPhone-sized screen, comprehension scores for complex Web content are 48% of desktop monitor scores There is a reason why most of us prefer screens with a 1280×1024 resolution compared to the 800X600 resolution of a few years ago and I can't say I recall anyone celebrating the enforced simplicity offered by older desktop monitors. A lot of those problems could be addressed by changing page designs to better match the needs of mobile i.e. reducing pages sizes to allow for slower download items, reducing content length to minimise the additional scrolling caused by what Nielsen calls 'the miniscule peephole' that is a mobile screen. But a lot of it just reflects the fact that the mobile web offers a much smaller window onto the world than is the case for desktop sites; Nielsen concluded that even the iPhone provides impoverished usability with only simple tasks being reasonably easy — and only then if users are on well-designed sites that are optimized for mobile.

So, how should website managers and publishers navigate this minefield? My view would be to design first for the platform that best fits your users and the sort of things you want to do. For complicated and immersive tasks, look to the desktop first and then consider offering a simplified version for the mobile web - or even a set of mobile websites for individual tasks. Conversely, for simple and infrequent tasks, look to mobile first. Where mobile is likely to be part of the mix from the outset, look to the mobile web before looking at apps, so as to start with a consistent user experience across all device types, before introducing variations for apps to cater for platform requirements.