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
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.
No comments:
Post a Comment