Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm developing a desktop application which will show details of various types of aircraft. Previously, the application looked like this:

Old UI, with harrier selected

When the user mouses over the image in the top right, arrows appear which can be clicked to cycle through all the images of harriers. Several aircraft have an image showing their silhouettes, like this (please excuse the horrible quality for now):

Silhouette of harrier

Currently, this image is just in the list along with normal photos, and can be viewed by cycling through them. I recently spoke to the client, and he wants me to make it so that the silhouetted image is distinct from the main image in some way. It's been left up to me to decide how to do this, so I first tried sticking it in a separate box like this:

New layout, still with harrier

As I see it this has the advantage of removing a lot of the excess white space that was in the original layout, but I think it looks a bit too cluttered for my liking.

Another option looks like this:

A second option, with the bottom two sections swapped around

Other options I can think of involve perhaps making the silhouette diagram pop up when a different button is clicked, or allowing the user to switch between viewing photos and silhouettes.

So, I'm looking for recommendations of what would be the best way to show this information.

share|improve this question
    
What are the aircraft names in the lower left,are they options which the user can choose? –  Mervin Johnsingh Aug 6 '12 at 16:55
    
Yes, that's a list box with selectable options. I was an idiot when I first started and decided to make all the controls myself. –  Tharwen Aug 6 '12 at 17:21
add comment

2 Answers

I think a good layout alternative with the block you currently have would be something like this:

enter image description here

Or this:

enter image description here

First of all, I put the navigation menu on the top left corner, which is usually where navigations are expected (of course this vary tremendously, but it's a good place because the eye tends to go to the right, in this case the aircraft itself). In the second one the name is repeated in the details and the silhouettes, which I think are great and add a lot to the application. In the first one, I did one big block with the silhouettes and the details (but I would also add a title to the top image, otherwise it's not clear at first glance). That way if you don't have the silhouettes you can still fill the block with the details.

Having said that, I would completely re-think the menu because it's not clear which option is selected. You could use a different background or change the font style. I would also remove the white border in the image and make it stretch to fill the container (if your images have irregular sizes, I would edit all of them to the same). There are quite a few things you can do to improve the text readability, right now all your info is in blue and looks like it has the same importance (should the menu have the same color as the details? How about the title?). Hope it helps!

share|improve this answer
add comment

in your new design switch the bottom panels around so the panel sizes line up. you also get that way two text panels on left and two graphic panels on right.

[edit] and remove the line between the two graphic panels

only if the additional images had a lot more information, such as technical drawings, would i choose to add another switch etc to show them.

share|improve this answer
    
I've updated the question with a screenshot of that. I don't really like the way it forms a grid though. –  Tharwen Aug 6 '12 at 16:23
    
Why should the display of technical drawings differ from the silhouettes? You may have a good point but what is the reasoning behind your statement? For example you state that you should line the panels up - why is this preferable? Does neatness of layout increase the awareness of the various images on screen? It's fine to have opinions and preferences but your answers will be better and probably garner more upvotes if you are able to base you opinions of research or studies. –  JonW Aug 6 '12 at 20:56
    
the silhouette images can be considered secondary information to the primary full color photos, by their nature of being smaller, black and white and fewer details. that is why it would seem superfluous to raise their prominence with ui controls. –  Chris Aug 6 '12 at 21:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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