Displaying multiple large images at a time

Question

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

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

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:

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:

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.

Answer 1

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

Or this:

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!

Answer 2

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.