2

For a while now I've been wondering what the next design style will be after Material design.

Skeuomorphism was just overdoing it, which resulted in the countermovement Flat design. Flat design brought back simplicity, but is also overdoing it. Simplifying too much has its drawbacks (what's clickable!?). Material design adds depth but still has some drawbacks.

I'm mostly interested in the visual clickability of things. How do I know what is clickable? By just looking and not moving the cursor.

It's very doable by using old tricks, but it makes the design look like it was done 4 years ago. Do you have examples how you solve this?

Example: enter image description here

Community
  • 1
Martyn
  • 2,348
  • 10
  • 22
  • 4
    Ethereal design. All elements only appear out of the corner of your eye... – A. Sim Dec 03 '15 at 05:14
  • 3
    The examples you provided look great. The thing that will determine their success is the rest of your interface. Keep it simple, task focused, and meticulously organized. Fashion has nothing on function – plainclothes Dec 03 '15 at 05:56
  • Just as the sun is above us, the light source for "3D" objects on screen is above is. So the shadow on a 3D object falls below. So in the illustration, above, here's what I see: the shadow on the blue rectangles shows them to be cutouts (holes in the white page) with a blue layer behind the cutouts. And I read the × glyph as a Close or Remove function. Since the × is on the layer behind, the combination seems counterintuitive to me: where would the blue layer be removed to, and what would fill the hole in the while layer? These are my personal observations about what I see in the example. – JeromeR Dec 03 '15 at 12:15
  • I'm confused. Are you visiting sites that are just button styled elements? Is that why you don't know what's clickable? – UXerUIer Dec 03 '15 at 18:14
  • @Majo0od I am designing highly complex web applications. I want to make it really obvious to the user what is clickable and what is not. This will help them to achieve their goals easier. My question is about how do you keep a modern design-style but also convey that something is unmistakably clickable. – Martyn Dec 03 '15 at 18:44
  • You should be able to convey that by the styling of the said element. For instance a button will look like a button, or will look like something that's interactive (color, styling, etc). But it's up to you to create that standard. – UXerUIer Dec 03 '15 at 18:46
  • Yes I agree. But would there be a universally excepted standard that defines something is interactive? – Martyn Dec 03 '15 at 18:57
  • Visual styling to make a button look raised (hence clickable) needn't look 4 years dated. But a flat button without visual cues will soon be dated and functionally impaired. – obelia Dec 04 '15 at 02:34

6 Answers6

2

I'm not really a fan of trends, but Ghost CTAs are now the trend. Also specially across mobile apps you will see there's even no outlines for some buttons. the user's understanding of it something if it is clickable or not hugely depending on context and familiar patterns

enter image description here enter image description here

JeromeR
  • 6,386
  • 23
  • 36
Blue Ocean
  • 10,679
  • 4
  • 35
  • 71
1

I have to bring this up everytime Skeuomorphism is mentioned.

Note that Skeuomorphism is not the opposite of flat design. Flat design can be as skeuomorphic as any other visual design style.

"Realism" is perhaps the term to use.

A simple example would be iOS's calculator app.

iOS3's calculator has a realistic visual style. iOS7's calculator has a flat design style.

Both, however, are skeuomorphic in that they are mimicking the behavior and interactions of a real physical calculator with buttons and an LCD screen.

As for what makes something 'clickable'--that all depends on the greater context of your visual design. The usual key is that the items one can interact with are visually distinct in some way.

DA01
  • 41,799
  • 5
  • 81
  • 142
  • 1
    I'm not saying flat design is the opposite of skeuomorphism, but a countermovement. It took off at the same time when skeuomorphism was being unnecessarily excessive and thus seems like a reaction to me. – Martyn Dec 03 '15 at 09:21
  • And my point is that flat design is also skeumorphic much of the time. – DA01 Dec 03 '15 at 14:33
1

I don't think that material design is going anywhere or replaced by some other trend anytime soon, instead it is growing rapidly across multiple platforms. Google is amending its guidelines constantly.

Coming to the problem of usability, that how would user recognize if something is clickable or not. Flat design initially had this kind of usability issue however Flat 2.0 is overcoming those big time and that's what material design is doing. Also Google never said they are rules but guidelines, if you feel anything is inappropriate or your users are having hard time with it you better break the guideline on those spots and follow what suits your app and users better. Text also plays a vital role in overall usability scenario as said earlier.

Checkout this amazing article at nngroup discussing about Skeuomorphism, Realism, Flat and Flat 2.0.

Aman
  • 100
  • 7
1

Skeuomorphism is good when it is fairly minimalist and only shows affordances on things that are clickable, draggable, etc. It is bad when it goes completely over the top and starts styling things like real-world objects unnecessarily.

Great article about it here: http://gizmodo.com/skeuomorphism-will-never-go-away-and-thats-a-good-thin-1642089313

Flat design is OK as long as it still has a way of displaying affordances. If it doesn't show affordances, then it will be less usable.

Material design looks like a sort of halfway house between skeuomorphism and flat design.

https://www.google.com/design/spec/material-design/introduction.html#introduction-principles

http://designmodo.com/flat-vs-material/

Yvonne Aburrow
  • 2,135
  • 11
  • 24
  • 1
    Skeuomorphism isn't on one end of a spectrum with flat design on the other. The 'spectrum' is really realistic design v flat design. Both (or neither) can be skeuomorhpic. – DA01 Dec 03 '15 at 16:56
  • 1
    That said, +1 for that gizmodo article. I think that's one of the few articles that makes a very clear distinction between the various ways the term 'skeumorph' is being used today. I like their term mimetic to refer to the visual aesthetics. – DA01 Dec 03 '15 at 16:58
0

A very important aspect of making a CTA recognizable as something to be clicked is - the Button text. Secondly, it giving a hint as in what/where will it take the user to. This is far more important than the appearance of the CTA.

So in your example, you could improve the CTA buttons, by using better button texts. As a thumb rule, generally the button text should start with a Verb.

Hence, instead of,

a) Calendar - Use, View Calendar, Open Calendar etc (context driven).

b) Top 20 Films - Use, See Top 20 Films etc depending upon the context its used within.

Again, the idea is to focus on helping the user with the CTA, and not just trying to make it look good. With this intent of putting context around the CTA, and using some good practices (see links below), its not a tough nut to crack.

Some good reads:

1) http://www.uxbooth.com/articles/good-call-to-action-buttons/

2) https://www.uie.com/articles/trigger_words/

3) https://www.newfangled.com/ctas-and-user-experience/

Amit Jain
  • 3,909
  • 1
  • 14
  • 31
  • 1
    But the point that @Martijn hints at is a very good one: You can say less when the UI communicates clearly. Adding verbs in front of every possible destination noun can lead to a visual mess. When dealing with complex, internationalized apps, you don't have room for that kind of extraneous language. – plainclothes Dec 03 '15 at 07:42
  • 1
    Appreciate your point @plainclothes, but I don't see why this something extraneous. Modern/Complex apps also have to help the user right? So instead of saying, Profile - doesn't View Profile seem a better solution. How does this lead to visual mess, and why is there no room for that kind of intent? Certainly its not a rule or anything, but an important aspect to be considered.

    Design helps in communicating its a button, but there is a lot riding on the button content itself, which should not be discounted. Be it simple, complex, local or any internationalized app/interface.

     – Amit Jain Dec 03 '15 at 07:54
  • I side with Amit on this, but admit that it's somewhat opinion based and heavily context based. In general, though, I like my buttons to be clear as to what will happen when you interact with them and verbs often make things clearer. – DA01 Dec 03 '15 at 16:54
-1

If you want to predict the "future of UI trends" I think you have to go one level deeper and see where technology will go. Flat design is just a result of the need to have scalable objects to support responsiveness. It's not that flat design is "hip" because it's aesthetic. It's more because leading companies embrace the approach which results in "being hip" because everyone is copying the new direction (that doesn't have to be negative).

So now we know there are watches, car interfaces but also bigger screens, the question is, what will be next and how will people interact? Movement and speech based interaction are becoming more popular or the and the synergy between your watch, phone, fridge and oven will be more important. But how will this affect the UI design culture?

Bas Wallet
  • 1
  • 2
    Flat design does not originate with responsive design. They just happened to have large overlaps in their timelines. – DA01 Dec 03 '15 at 16:53
  • You didn't really answer his question. You just brought up more questions lol – UXerUIer Dec 03 '15 at 18:37