4

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.

2
  • What are the aircraft names in the lower left,are they options which the user can choose?
    – Mervin
    Aug 6, 2012 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, 2012 at 17:21

2 Answers 2

2

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!

0

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.

3
  • 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, 2012 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, 2012 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, 2012 at 21:42

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.