Displaying data with responsive design

Question

I'm displaying details of a product. My current responsive design works well for desktop, tablet and mobile. I'm happy with the clean look on the mobile version but I'm feeling the desktop version is too empty and I'm looking for a way to kick it up a bit.

This is the desktop look:

This is the tablet look:

And this is the mobile:

Any suggestions?

Note: the desktop version is align to the center and in wide screen it's spanning on about half of the screen resolution

Answer 1

You may feel that the desktop version is empty, particularly as you can't help comparing it to the mobile version. But I don't feel that the desktop version is 'too empty' for me it is 'clean and clear' - exactly the sort of design you sweat blood in order to achieve.

There is an important concept in UX behind it, which is called Satisficing. While it is interpreted in different ways, one works as follows:

The higher the information load, the higher the cognitive load, attention, and time required from the users to interpret and comprehend the information; the relationship between these is expressed by the straight 'required' line. But due to time and cognitive limitations (for instance, 3-5 items in working memory), users often have to take shortcuts - there's just as much the brain can process; this is shown by the curved line). Thus, the more information, the more users select what to focus on and the bigger the 'comprehension gap'.

Notice that the illustration is for demonstration purposes only - the exact line shapes are not based on scientific experiments (the overall concept does though). Also, the concept applies slightly less in your case - where the nature of the data is very similar (unlike in, say, a news website).

Yet the point is this - the more information, the higher the cognitive load you impose on the user, and the less attention the user will give each item on the interface.

Answer 2

The simple look on your desktop version, feels Nordic and barren. You focus on content and don't add extras which isn't needed. Being a Swede, having a bachelor in IA I think you have made the best you can do. Don't destroy this almost perfect design with cluttering the image of non-important stuff. In your case - less is more.

Answer 3

You might want to take a look at apple's and google's tech spec pages for their various products.

http://www.apple.com/macbook-pro/specs-retina/

http://www.google.com/nexus/10/

As you can see, they don't have line by line descriptions of every aspects of there products. Instead, they have categories (like your General, Body, Display) and they write paragraphs in there (take a look at apple's "Keyboard and Trackpad" section for example.

You could have a General networking section for example where you would write a paragraph saying

3G network capabilities using HSDPA 850 blablabla. 
4G network is enabled through a LTE network and other blablabla.

That would allow you, I believe, to condense the information in small readable and less dry paragraphs. Adding images could be great too, but I guess it depends on the resources you have.

Answer 4

These were my first thoughts when looking at every screenshot:

• First one: "ok"
• Second one: "ok"
• Third one: "ok"
• "What was the problem again?"

Your layout looks good. Let it as it is. The only thing you could change is using colors to give your information more depth as in:

Darker tones look like the information is "more in the background". But as said: This would only be cosmetic since the structure is flawless.

Answer 5

Do you have any other content on the page, such as product images? In smaller screens this would normally be displayed above or below the table, but in widescreen views you might be able to do a two column layout.

Thus in narrow view you have:

^{download bmml source – Wireframes created with Balsamiq Mockups}

and then in wide view you have:

^{download bmml source}