Mobile WebApp - Gradient vs. flat regarding UX

Question

Recently, I've looked at a lot of sites to figure out patterns used in mobile web design.

I've noticed that if the app is using lists or buttons, most designs use a gradient background.

Is there any reason for this regarding UX or is this only a design choice?

I am building a WebApp and in my opinion the flat style looks nicer.

Here the 2 versions: Flat:

Gradient:

Answer 1

Good design is about creating something useful that works. The school of style in which it is designed (flat or skeuomorphic), is just a matter of fashion. But all styles may not work for all projects, so it shouldn't be forced.

The thing to be kept in mind is that "Flat design is simple by nature and works well with an overall minimalist design approach. It has a distinct look and feel without all the extras. It relies on a clear sense of hierarchy in the design and placement of elements to make successful projects easy for users to understand and interact with."

In the case of mobile applications, the interface has fewer buttons and options, which makes the flat interface easier to use.

Some key principles of flat design from Carrie Cousins article on designmodo (link is at the end)

• Each UI element should be simple and easy to click or tap. Interaction should be intuitive for users without a lot of in-design explanation.
• Because of the simple nature of element in flat design, typography is extremely important.(see example - plover.co)
• Flat design is simple by nature and works well with an overall minimalist design approach. (See example).

If your application can follow these principles, go for it. If you need a different, more complex approach or the presence realistic elements in your design, avoid flat design. (I am not saying that flat design cannot be used to achieve complex designs, but it would require more effort and creative insight to do it)

P.S. You might want to look into "Almost" Flat Design. It is essentially flat design with some minor affects to give it more flexibility. (see example)

Source: Carrie Cousins article on Principles of Flat Design (designmodo)

Answer 2

With so little space having visual clues like gradient are useful. For example it may be better that you dont have a gradient on the table with check boxes but do have gradients on the wide grey + / - sections which are clickable.

The gradient gives the impression of something raised that can be clicked on whilst not taking up extra space.

You can also use shading to sharpen edges (as you are doing in your flat version anyway) and shadows to show that one section is part of another. It looks like the table of checkboxes appears when you click on the grey section - if you have a drop shadow between the grey Werkstattarbeiten section and the checkboxes below it appears like it is an extension of the heading.

Unless of course you design for Microsoft metro...

Answer 3

There is no such guidelines from Apple, and you can count on Apple's UI development guidelines for many such things http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40006556

Personally for me gradient for background color of the content or the header looks cooler than gradient for the button. Also, I guess it depends on your personal choice and imagination of the designer more than anything else.