User Experience: Size Matters

7 July 2011, by

There are a lot of messy desks in the world. But I’d guess that desks are becoming less messy these days, especially compared to the days when computers didn’t exist and paper was plentiful. Most of us today won’t have experienced working in an office without computers.

Using desk space

Desks are often nice and big compared to the average computer screen, and it’s easy to push stuff out of the way for later and make space for what’s important now. Or if I want, I can lay stuff out easily if I need to look at lots of things at once. Compare that to most computer screens which are only big enough to display one or two applications at a time.

In the future though, screens will be bigger, and we’re not too far away from having giant monitors that span our entire desks. But screen sizes aren’t just getting bigger. A lot of screens now fit in our pockets. In fact, mobile is so pervasive that even Google are advocating creating for mobile first.

So how do we cater for such a wide range of screen sizes, from mobiles to tablets, laptops, desktops and even 50-inch HD TVs being used as monitors? Developing the same application multiple times, potentially in multiple programming languages is annoying and expensive.

Well a new CSS web page layout technique using media queries seems quite promising in making things easier. It allows developers to create pages that change what is displayed in response to changes in the width of the browser window, and is being termed responsive web design.

A good example of a site that uses media queries to full effect is Try opening it and dragging to increase or decrease the width of the window. Notice how stuff appears and disappears based on the width. If it’s not working for you and you’re using Internet Explorer then please don’t.

We, the people of Earth, at some point in the past thought it a good idea to adopt standardised paper sizes and it makes a lot of sense to have a range of standard screen sizes too. Measured in displacement units (in Europe, we’re keen on the metric system) rather than pixels, since pixels vary in size from display to display.

But just because we happen to run an application on a screen of given size, it doesn’t mean that the application should assume it needs to use all of the space available to it. I think one reason people love mobile phone apps is because of how simple and usable they are. With limited screen estate on mobile apps, and it being hard to type and fill forms in, functionality is stripped down until only the important and frequently used actions are available.

Why should mobile apps only run on mobiles? Applications should be designed to run at a certain size rather than on a particular platform. I can think of many times while sat at my laptop when displaying 5-6 small windows all running mini apps would have been less hassle than having a single maximised browser open with six tabs.

Several mini-app windows open simultaneously

As screen sizes increase, applications simply won’t need to take up the full screen, and being able to resize and lay windows out will become very important.

And let’s face it, there’s a lot of room for improvement in this area.

Why would I opt for opening multiple tabs so that only one tab is visible at a time and then proceed to flick repeatedly between the tabs like some sort of madman, when I really just want to see them all at once?

Because we’re still using computers where users are forced to drag a window from its title bar to position it, and then move to the corner of the window to resize it. Oh and then move back to the title bar to nudge it a bit more.

Praise the Lord that Windows 7 has some neat features for resizing and positioning windows to automatically fill half the screen or the entire screen by dragging to the side or top of the screen. A powerful feature and a real novelty. I’m a PC by trade, not a Mac, but I hear Apple have had similar functionality for years. Maybe Microsoft Googled for it.

Even then, these improvements are just the tip of the iceberg. Simple actions to move, resize and switch between applications should place minimum cognitive load on users and shouldn’t distract from the task at hand. You could say it should feel as easy as moving paper around on a desk.

Tags: , , , ,

Categories: UX / Design


Leave a Reply

* Mandatory fields

one × = 4

Submit Comment