How do you conquer the challenge of designing for large screen real-estate?

Question

This question is a bit more subjective, but I'm hoping to get some new perspective. I'm so used to designing for certain screen size (typically 1024x768) that I find that size to not be a problem. Expanding the size to 1280x1024 doesn't buy you enough screen real estate to make an appreciable difference, but will give me a little more breathing room. Basically, I just expand my "grid size" and the same basic design for the slightly smaller screen still works.

However, in the last couple of projects, my clients were all using 1080p (1920x1080) screens and they wanted solutions to use as much of that real estate as possible. 1920 pixels across provides just under twice the width I am used to, and the widescreen makes some of my old go to design approaches not to work as well. The problem I'm running into is that when presented with so much space, I'm confronted with some major problems.

• How many columns should I use? The wide-format lends itself to a 3 column split with a 2:1:1 split (i.e. the content column bigger than the other two). However, if I go with three columns what do I do with that extra column?
• How do I make efficient use of the screen real estate? There's a temptation to put everything on the screen at once, but too much information actually makes the application harder to use. White space is important to help make sense of complex information, but too much makes related concepts look too separate.
• I'm usually working with web applications that have complex data, and visualization and presentation is key to making sense of the raw data. When your user also has a large screen (at least 24"), some information is out of eyesight and you need to move the pointer a long distance. How do you make sure everything that's needed stays within the visual hot points?
• Simple sites like blogs actually do better when the width is constrained, which results in a lot of wasted real estate. I kind of wonder if having the text box and the text preview side by side would be a big benefit for the admin side of that type of screen? (1:1 two-column split).

For your answers, I know almost everything in the design is "it depends". What I'm looking for is:

• General principles you use
• How your approach to design has changed

I'm finding that I have to retrain myself how to work with this different format. Every bump in the resolution I've worked through to date has been about 25%: 640 to 800 (25% increase), 800 to 1024 (28% increase), and 1024 to 1280 (25% increase). However, the jump from 1280 to 1920 is a good 50% increase in space--the equivalent from jumping from 640 straight to 1024. There was no commonly used middle size to help learn lessons more gradually.

---

To help focus the question a little bit, I had a project that was somewhat similar to Atlassian JIRA, an issue management system. There were about six different types of records the client wanted to keep, all of them could potentially be related to each other. Gathering data wasn't the core problem, although it did play a part.

The more important side of the problem was creating a system which would suggest potential relationships between the records and helped the analysts recognize patterns in the reported incidents.

There were different types of analysts that focused on the different problem domains, and due to the nature of their exploratory type of work, they didn't know what they wanted. They just knew they had to make sense of a lot of data, draw correlations, and characterize classes of issues.

---

(Originally asked here: https://softwareengineering.stackexchange.com/questions/45864/how-do-you-conquer-the-challenge-of-designing-for-large-screen-real-estate, but told that this might be more appropriate)

---

For the bounty: Stretch your minds a bit. The pat answer "Make everything bigger" has a limit to how useful the answer is. We are talking about users who have to make sense of a lot of data and find relationships between records. If I simply bump up the size on everything they are going to be very limited in what they can see on the screen--particularly because the vertical is so constrained.

Answer 1

The most important thing seems to me to allow views of multiple levels of detail at once and illustrate the relationships between the views. Where screen estate really kicks in, is when you can switch from one level to another by just looking at a different part of the screen, rather than clicking on something.

So first to do I think is getting multiple levels into one screen, and also use the screen estate in both relating the parts and setting them apart (and not make them too crowded or overwhelming). The relations can be made visible by higlighting items in lists and drawing boxes on pictures so you know what details you look at.

The number of columns, well, that really depends on what views you bring into the screen at the time. In more visual settings (image editing, map views) I could imagine it being one main area and make the other columns just a bit wider than usual, to make things like thumbnail view or tool details (think photoshop) less cramped. In issue tracker systems I could imagine the 'details' section of the three column layout be split up even more (either vertically or horizontally) to include things like customer details, replies or related issues.

Also something to consider is that you have more space. It is a promotion of the 'make it bigger', but one you can really use to your advantage. With wider screens, you can (for example) display recognisable thumbnails without pushing other details out of the way, or put more information side by side. (On smaller screens, I never could fit the things I wanted in the column list of my mail app, so I would just see half the subject line, or only the first part of the name.)

Also, when you have more screen estate, you can use more graphs and illustrations. They are annoying when you need to click to get to the info, and then people prefer the data over pictures only (is my experience). But if you can have both...

One more suggestion is to look into topics about data visualisation and dashboard design.

Answer 2

The main problem of "just make everything wider is blocks of text - jumping from end of line far right to beginning of next line far left is painful if not visually assisted.

For issue management, a three-column display actually seems natural (sorry, fogbugz):

A Navigation column with user-configured quick-links (e.g. common filters), a column for a list/tree/whatever of issues, that is not overloaded with columns, and details for the selected issue, or selected issues.

That would call for a 1:2:2 layout, for which 1920 still seems a bit tight.
==> A quick switch to redistribute real estate between issue list and issue details could be helpful here.

Generally, this layout works only with a wide screen. To support other resolutions, you might need to offer some layout choices:

I would recommend preparing for that possiblility, even if your clients say "no, we all have big monitors". Sometimes you have to do wiht just a small laptop, or half-of-a-single-screen.

Answer 3

Design

I think you need to let go of the idea of one long (vertical) page. Instead, think of the browser as a container of blocks, or a canvas. On wide screens blocks align mostly horizontally, on less large screens you have to scroll more. I think it is important to not fall into designing only for large screens. As also small screens are coming more and more used. Instead, make it work on all screens, and let the information flow / find its own way.

I like how for example TaskRabbit places their explaining video. They put it above the fold. Here, I see an understanding of the browser as a canvas instead of as a page.

Information management

I also get inspired by some movies, like the matrix, minority report and other multi-touch interfaces. For example see the minority report, that screen is way bigger then 1920x1080 :-). What they do is use zooming, let the user replace items, and physical distance. The latter is harder for desktop usage though. But the other two are interesting. Especially if you're designing an interface in which people have to manage and analyze a lot of information.

So when, as you say, the computing-power can't help them much in their analysis, I think tools to let the users manage it themselves become more important. And those tools, for example zooming and replacing, require a lot of space. (And leave white space!)

Examples

Some rough sketches with these ideas. I'm sure you can think of more, and more relevant to your application.

Browser as container, with information controls for the user:

Or, group types of information together:

Answer 4

Check out SmugMug for some ideas. Their site does an excellent job of adapting to your screen's horizontal and vertical resolution. It'll adjust the number of thumbnails per page, as well as the size the medium photo.

You'll also notice that it tends to maintain something close to a 50/50 split between the thumbnails to the left and the medium-size photo to the right as you resize the window. Obviously you're not designing an online photo gallery, but perhaps a similar layout could be used.

Answer 5

A larger screen real estate is a double-edged sword. The advantage is that you have more space to show users more information. But the disadvantage is that you're showing users more information, which can hurt user efficiency if the information you're showing users isn't relevant to their task and is instead there to fill up the space.

Principle 1: Make sure the information in all three columns directly relate to each other. In other words, the navigation path for all three columns should connect with each other. Information shows up in a column as a direct result of an action in another column.

Principle 2: Naturally, the beginning of the navigation path should start in left column. This means that your left column should be the main menu or the home screen where users go to start their task and select their main items. Once that happens, the middle and right columns should open. The middle column should go deeper and show more detail of the items selected from the left column. The last and right column should show the most information and is the main working area where users will do their task.

Principle 3: The order and sizes of your column should be designed in a way that reflects this information structure. Therefore, your left column should be the skinniest, the middle one should be slightly fatter and the third column should be obese.

Principle 4: The right column is the column you want users to do most of their tasks in. This is because it has the most space, contains the most information and is the last column of their navigation path. The middle column is where you would want to show a preview or status of the task the user is doing. The left column can also give status cues, but they should be at at the broadest level.

I made a wireframe to help illustrate this better (I couldn't post the image here because it wouldn't let me): http://imgur.com/YbVbj?full

Answer 6

You might want to take a look at Google's "Designing for (Google) TV" web page — a general set of rules for web pages aimed at 720p or 1080p screens.

It contains all of the general gnaff such as "make sure you can use arrows for navigation", but the relevant points are the things like "Don't use font sizes smaller than 18px for 1080p screens".

I think in essence it's trying to say that you should design it in exactly the same way, but use bigger elements and font sizes. Too much information on the screen looks crap, and HD/high res screens always need bigger fonts.

Answer 7

Jira (I'm using it as well) solves this question by simply making all elements bigger, so if there are two columns the elements of the columns simply becoem wider, on different screen resolutions. I think this is not the best solution, because on a really wide screen it would loog really odd...

So If I were you I would try to make an interface which is center aligned, and has some white space on left and right side as well:

This way you can play with white space:

• 1680: 75% (1260) of the screen is content, 25% is white space on the two sides
• 1920: the (1440) same scale can be applied - 75% to 25%

With this soulution your content would only increase with around 14%, and you could have the white space on both sides. All content elements in the middle should become bigger (with 14%) to comply with the visibility requirements, but white space and center aligning would significantly enhance ux!

• your UI would not be too crowded
• you do not have to design the whole UI for different screen resolutions
• you will have to apply an x1.14 multiplier

I'm using 1680*1050 - but I don't except any browser applications to fill the whole screen, because I'm not used to it... all websites, and almost everything is optimized for lower resolution. And I really need white space.

Jira has no real white space, in 1680, all elements look tooo big, with only a few content. With applying white space the whole interface would be easier to use!

Answer 8

General principles you use

• Chunking, grouping information, making secondary elements less prominent in the design, eg: the menu row at the top of this page has a dark background. Another example is this site which uses the full screen with panels on each side to store secondary information and navigation.

• Look for ways to flatten the structure of information to reduce the number of clicks to access away common tasks

How do I make efficient use of the screen real estate?

You could use a dockable toolbar with tools for analysis. You could have one ore more that could be selected during setup of the data / analysis then hidden.

How do you make sure everything that's needed stays within the visual hot points?

You could have a very large display and show a section of in a view port that users could navigate around, eg: google maps

Answer 9

Ok here is a principle from a study from 1996:

1. When a user switches from working with 1 screen to 2 screens productivity jumps 40% (in coders). So, that is a powerful argument for more pixels. Now, why does productivity jump? because they waste less memory and time flicking between tabs or apps (less context switching). Context switching expensive. So if you want to make use of your new 'land' use the new pixel areas you have been given to reduce frequency / risk / probability of "context switching". That might mean counterintuitive things like, making your app window smaller so other apps that your app usually works with fit comfortably together in the same screen. You can see an example of this with GMAIL, a few years ago the gmail compose email editor, became tinier not larger.

2. make your app friendlier to the other apps (this is derived from 1). Look how your app can optimize the whole not just your app

3. hope that helps.

PIC: As screen size exploded, the gmail composer window downsized...