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

Desktop

This is the tablet look:

tablet

And this is the mobile:

enter image description here

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

share|improve this question
    
Why do you feel it needs to be "kicked up". I think it is fine as it is. Don't add stuff just because you can (have the room for it). –  Marjan Venema Dec 22 '13 at 11:03

5 Answers 5

up vote 3 down vote accepted

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:

An illustration showing the gap between the required and available cognitive load with growing information load

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.

share|improve this answer
    
+1 Thank you very much for the graph. May I ask what your source was? –  uxfelix Dec 23 '13 at 8:29
    
The graph is an original work, but largely based on Satificing per Simon Herbert (and some related works). –  Izhaki Dec 23 '13 at 11:37

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.

share|improve this answer

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.

share|improve this answer

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:

enter image description here

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

share|improve this answer

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

and then in wide view you have:

mockup

download bmml source

share|improve this answer
    
I don't have more content, only textual data. –  Itay Gal Dec 23 '13 at 8:55

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.