4 ways tablet computing is influencing web design

The future popularity of tablet computers was predicted more than ten years ago, but it took the genius of Apple to bring it to the mainstream. It’s the same trend we’ve seen many times before: Apple makes a groundbreaking innovation and within a fairly short space of time it becomes the norm, as we are now seeing with the iPad and tablet computing – a trend which looks to be far more important than the “flash in the pan” of netbooks.

Tablet computing presents some major changes in user interface, and this is already taking effect in the world of website and web application design.

1. Larger target areas:

Clearly, tablet computers are primarily touchscreen devices. Websites and applications have until recently been built for an environment that comes with a mouse – that groundbreaking device that allows users to target tiny areas of the computer screen with ease. Touchscreen devices require larger clickable areas that are easy for fingers to deal with, and less densely arranged clickable areas so that only one can be touched at a time. In turn, this requirement results in the use of larger text and the use of buttons over text links.

In terms of the visual design of web sites and web applications this often means a bolder, simpler look and feel, which arguably looks more action-oriented.

Generally look and feel will tend more towards the “appy” end of the spectrum.

2. No hover effects:

The rise of JavaScript libraries such as JQuery, and the growth in dynamic, responsive websites has meant that many modern websites make use of on hover/mouse over effects. These are the visual changes and animations that occur when a user positions the mouse cursor over an area of a website, but does not click. Popular effects have included tooltips – small ‘speech-bubble’ looking things that often display helpful metadata which would clutter the interface if it was shown all the time – and animations that indicate that an item is clickable.

Tablet computers render these obsolete to a certain degree, a fact which both reduces one area of interactivity from a website but which might drive innovation in other areas.

3. Orientation-free websites:

Most tablet computers on the market adapt screen orientation to match the way the user is holding it. If you hold it in portrait, then whatever is on the screen is displayed in portrait mode, and the same goes for landscape.

Many websites already cater for this by default, because they are fairly portrait in layout, and just result in a higher fold line when viewed on a wider, landscape oriented screen. Applications and sites have the opportunity to take it further, and dynamically change layout depending on the way the user is holding their device. A better user experience (and a more conversion optimised experience) will often be driven by providing a different layout depending on whether the site or app is being viewed in portrait or landscape.

For the nuts and bolts of web design, this means extra CSS to define the different layouts, and a lot more UX and usability thinking in the planning and wire-framing stages of web development.

4. Gesture based input:

Touch screen computing has opened up a new world of input options. Multi-touch actions, swipes and pinches are all very intuitive when using your hands to navigate through an interface. In general, most of these actions are not even possible with a mouse and if they are, they are nowhere near as intuitive. There are some however, that can make sense in certain situations for both mice and fingers. Swiping gestures, or perhaps rather, dragging gestures are one such input action. We should begin to see more ‘dragable’ elements in websites and applications.

These can range from simple switches and ‘buttons’ such as this alternative to CAPTCHA to panels that can be dragged out to display hidden content.

In two years time it is likely that there will be a plethora of (mostly Android based) tablet computers available, with very high adoption rates.

The ratio of websites being browsed on tablets as opposed to more traditional computers will rise, and more and more people will become familiar with the tablet computer browsing experience.

Web design will not change overnight, but it will change, and designers who fail to take tablets into consideration will miss out on an opportunity that is growing by the day.