Hacker News Reader

Comment by prof_hobart | Hacker News Reader

Apple's rather tacky overuse of it in recent years has given the whole thing a bad name, but the current trend for totally flat design goes (in my view) far too far the other way.

Skeuomorphism isn't simply a binary thing. There's all manner of different ways represent the real world, and different degrees of doing it.

Using some general attribute of real-world objects (e.g a shadow) is quite different from simple switch toggle to represent an on-off option, which is again quite different from a photo-realistic lightswitch to represent the same thing.

The "almost" flat design that is mentioned at the bottom may be a step back in the right direction, but as it stands I find most totally flat design pretty poor from a usability point of view.

View on HN

What I don't like about flat design is that suddenly there's no way to distinguish between interactive (clickable) and static (non-clickable) items.

Looking at this: http://dribbble.com/shots/917819-iPad-Calendar-Login

There's no indication that the blue button is interactive and the calendar icon is not. Both are bloody flat! I have to hover mouse pointer to find this out on the web app. Even worse in mobile - I have to try clicking stuff just to figure out if they are "clickable". I find it very frustrating.

I think by now it's safe to assume that the button under the form would be the clickable element.

His argument is that "the button" has no depth and therefore is not perceived as a button.

My argument is that the bright color makes it stand out without using depth (or rather, using depth in another dimension than Z), and that it's the checkmark icon that might make it feel non-interactive (checkmarks feel more like feedback than action, even on checkboxes, where it's the box itself that makes it register as actionable). A "login" or "proceed" label would have worked, or as an icon, something giving sense of proceeding further, like a play or fast forward button would have worked better in conveying the sense of action. Still, the structure of the UI makes it clear that this is a two-field form and that the third item means "go ahead", which creates a cognitive dissonance with the "feedback" feeling of the checkmark.

Right, and I think the key part of envex's statement is "by now". Meaning that in this stage of history, the ubiquity of pseudo-3D graphical interfaces means people are able to pick up on the subtler affordances of flat design. And as you say, the bolder colors and flow help, but even with that I don't think this sort of design could have worked 10 or 20 years ago.

It's sort of like how art went (very roughly) from realism to impressionism to abstract art. People got used to the meticulous accuracy of paintings, and so artists cashed in on that cultural context to start getting abstract.

People get UI mechanics enough now that a huge rectangle with monochrome iconography is all you need to convey "clickability" to the average user.

OK, I see your point. However... :)

* How about colour blind people? Shades imitating 3D still could be perceived and interpreted correctly, yet "bright colours dimension" doesn't work anymore.

* Calendar icon above the form might imply that I could see the calendar without logging on (quite handy feature, btw). But I don't know if it's clickable just by looking at it. Does it need to be blue to be clickable? Are all clickable items blue in this app?

* "Bright colour" convention as clickable is also confusing. Blue is clickable in this app, but another app might decide that red is clickable. And the green. And all shades in between. Seriously, I don't want to put any mental effort just to find a button to click.

* "icon [...] giving sense of proceeding further". That' dangerous as well. Are we going to have a convention here? Or leave it to creative souls to define the "sense"? And let ordinary people guess what the designer meant?

Yeah I know, design is a serious topic and hard to get right... :)

What do I press if I can't remember my password?

I use a WP7 phone and it seems to have a very good convention for flat design - if you put a brightly colored box around something, it's clickable. A white box? Text. If it's text sitting against the black background? Not clickable. Not much wiggle room for design there, but it's consistent and familiar.

Reply on news.ycombinator.com