10

This question is a bit more subjective, but I'm hoping to get some new perspective. I'm so used to designing for a 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 wide screen 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 eye sight 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 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 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.

gnat
  • 21,442
  • 29
  • 112
  • 288
Berin Loritsch
  • 45,784
  • 7
  • 87
  • 160
  • Could you just make the UI controls bigger to fill the empty spaces...? – FrustratedWithFormsDesigner Feb 09 '11 at 15:17
  • @Frustrated: Wouldn't that defeat the purpose, unless you were designing for, say, a touch screen? – Michael K Feb 09 '11 at 15:20
  • @Michael: well, OP doesn't seem to want to change the number of visible controls as it would make the program harder to use, and also doesn't like having any empty space. If there's no *new* features to fill the space with, then the space needs to be filled with...? – FrustratedWithFormsDesigner Feb 09 '11 at 15:23
  • 2
    It's more a matter of trying to expand my mind for new controls and ways of interacting with the site. Just making everything bigger kind of defeats the purpose. Then you have the "big shiny red button syndrome" or text that feels like you are reading one big heading. When trying to balance the concerns of design, it really is a complex problem. – Berin Loritsch Feb 09 '11 at 15:27
  • Will your webapps need to run on a smaller resolution as well? – Tyanna Feb 09 '11 at 15:37
  • For the two most recent projects, all internal access is on standard monitors--so no. They specifically requested 1080p interfaces. A future iteration would have a "portal" for their clients to access a window of information. The data demands are much smaller and we would need to support 1024x768 for just that piece. – Berin Loritsch Feb 09 '11 at 15:51
  • 1
    @Berin: If they made a specific request for the Super-sized interface size and that's the ONLY major change, tell them you have concerns about the layout and design and ask them if they have ideas about how the space could be best utilized. After all they are the users and they must have had a *reason* for making this specific request. Maybe they'll say "put a dashboard widget in the empty space" or something like that... send a mockup screenshot with a huge blank space a text saying "What do you want here?" Make sure your concerns about this design are known. – FrustratedWithFormsDesigner Feb 09 '11 at 16:10
  • That's basically what I did. It's an interesting enough design challenge that I would like to be more prepared the next time around to provide some intelligent proposals. – Berin Loritsch Feb 09 '11 at 16:12

3 Answers3

4

I'd say, if you can not use the additional space by adding more information/controls, i would say make the existing content and control bigger.

Why? Because according to Fitt's law bigger things are easier to use.

Maybe also ask on https://ux.stackexchange.com/ or https://graphicdesign.stackexchange.com/

Community
  • 1
LennyProgrammers
  • 5,649
  • 24
  • 37
2

I'm not a UI expert, but I use a 1920x1080 screen every day with Eclipse. Eclipse has a very easily configurable interface, and here are some of my observations when switching between 1280 and 1920:

  • At both resolutions, I want to see the window I'm working in the same size. On the smaller resolution, I tend to hide the extra panels, while on the higher resoultion, I put out more panels.
  • I would prefer slightly bigger buttons. They would take up less space proportionally on the larger monitor and make my mouse actions faster.
  • I often expand previews to use the whole screen, i.e. code on left, preview on right. That ends up being a two-column format. Other than that, I use 3-column with a footer:
    1. Left: File navigation
    2. Center: Code (Largest, probably 2/3 of screen width)
    3. Right: Code navigation and tasks
    4. Footer: Status (Console, servers, etc. Pretty short, maybe 1/5-1/6 screen height)

I sometimes also put views and controllers next to each other in 2-column mode, but that is definately programmer specific. :)

When on a larger screen, I want to use that to see as much information as I can, while still being easy to find. More space around components helps with differentiating between information collections. Icons on tabs are one way to help attract attention to what each component means.

Michael K
  • 15,539
  • 9
  • 61
  • 93
1

This is how I'd approach this issue.

I would start by chunking my data into logical blocks. I might even go so far as to create a different ascx file for each logical block. Each block would know how it likes to be displayed (min/max widths). I would do this b/c I don't like rewriting code and if there is a chance that the app would need to be expanded to support multiple resolution sizes, then this would help make it easier on a control by control basis.

Next, I would create a new style sheet for the larger resolution. Make buttons and heading bigger. Add more white space around elements. This way switching between the two resolution types is just a style sheet swap away.

Now comes the hard part, the layout. As you said, the layout will be very different with that amount of real-estate. The cop-out answer would be to allow the user to place the elements where they want, like an iGoogle page. The user could pick 2 or 3 columns as they see fit. As I don't know what types of screens you're building I don't know if this would really work for you.

The second cop-out answer would be to hire a UI expert to help you design these pages. Having worked with a UI specialist in the past, I can say it is 100% worth it to get an expert opinion on things like this. They can pinpoint problems and suggest solutions before the client even views the product.

If I had to do it on my own, I would place fixed items on the sides, and have the middle area grow to fill the rest of the space. Have any data that can grow fill the middle section.

Not sure how helpful this is to you, but I hope it gives you some ideas.

Tyanna
  • 9,528
  • 1
  • 34
  • 54
  • This is probably the most reasonable answer I got across both UI and programmers for this question. It's a lot more useful than "make everything bigger" which is what the UI folks told me. NOTE: aspx is a technology specific term, but chunking the UI into separate files is the proper approach. – Berin Loritsch Feb 14 '11 at 12:52