19

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.

9
  • 4
    Berin, the question definitely belongs here instead of on programmers.stackexchange.com. However, it is a bit general and broad. Maybe it's better to provide a real world design and then ask how that design can be adapted to a wider screen?
    – Hisham
    Feb 10, 2011 at 6:00
  • Let's take for example something similar to JIRA (issue management software). The important bits aren't just the different types of issues, but rather how they relate to each other, and if there are new items that fit a certain profile I am looking for? Feb 10, 2011 at 13:34
  • 1680x1050 is a common resolution, and fits reasonably in the 25% pattern (31% wider than 1280, 14% narrower than 1920)
    – MSalters
    Feb 11, 2011 at 12:33
  • @MSalters, You may be right. According to these stats w3schools.com/browsers/browsers_resolution_higher.asp and these stats marketshare.hitslink.com/report.aspx?qprid=17 the number of users at 1080p are outnumbered by the 1680x1050 resolution. Some observations, though: most new screens are wide format (16:9), and most new desktop monitors are 1080p. It's the laptop/netbook/touchpad/phones that are making up the other resolutions. While my needs were customer specific, 1080p is fast becoming a new standard we need to consider. Feb 11, 2011 at 13:32
  • So that's it? Make everything bigger? I got more thought provoking answers at programmers.stackexchange.com . There is more than simple readability and legibility for UIs, I even narrowed the field a bit to help get a better response. Feb 14, 2011 at 12:46

9 Answers 9

12
+100

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.

2
  • Good answer, but for the sake of being ungrateful I'll say I would have appreciated some added illustrations :3 May 16, 2012 at 18:08
  • This is not a good answer, there is not even an illustration to show the point, and all he says is like "it depends", that is not helpful!
    – Jones G
    Mar 14, 2020 at 19:35
7

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):

enter image description here? No I won't.

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:

ok ok, 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.

5

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: Browser as container, with information controls for the user

Or, group types of information together: Group types of information together

2
  • Well presented, but in my experience, users don't like "managing windows" (though they usually don't actively mind, either). Watching people working on such an interface certainly is a pain.
    – peterchen
    Feb 17, 2011 at 9:44
  • I think that depends what tools you give them. If you give them actions on 'windows' like 'archive', 'pass on to', 'show details', etc., then it doesn't feel like 'managing windows' but more like 'taking action'.
    – Lode
    Feb 17, 2011 at 14:38
1

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.

1

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

0

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.

4
  • I'm not designing for regular consumers. I'm designing for analysts. I agree that making font sizes larger is necessary for readability--but just making everything bigger isn't really solving my user's problems. Feb 10, 2011 at 14:09
  • If you're designing for a given group of people, why don't you ask their needs, opinions, from them? Feb 14, 2011 at 13:08
  • A 1080p large screen TV that people are going to be viewing from several feet away is COMPLETELY different than designing for a 1080 pixel high monitor that will probably be no more than 18 inches from the user. I don't think most of that applies to a standard application in the slightest. Feb 14, 2011 at 16:25
  • Interesting link, but IMO the OP is right that their premises - users might not understand scrolling, and sit further away from the screen - do not apply here.
    – peterchen
    Feb 14, 2011 at 16:30
0

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%

enter image description here

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!

0

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

0

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... GMAIL COMPOSER DOWNSIZED SINCE 2015

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.