Hacker News Reader

Comment by danso | Hacker News Reader

I love the work that was put into this and there are some elements that I think are done extremely well and stand on their own...but after seeing a page where everything is flat, I've totally joined the non-flat side of the debate, due to the confusion/ambiguity of the interface...the buttons were especially jarring for me.

View on HN

It gets worse on something like Windows 8's Metro where you get to see like 20 different square blocks, each with a different color, that may update all the time too. Try not to get a brain seizure from that.

But as always, your brain maps that information jungle to something familiar if you keep using it and it's not that complicated anymore.

After giving it some time, it's no different than pinpointing maps icon in home screen where there are other icons each with different color. At least I haven't heard anyone using Metro interface enough complaining about finding things. There are just more info on a given Metro home screen than iPhone or Android home screen, and I'm sure iPhone screen is quite complicated for someone using a Nokia 3110 for sometime.

Perhaps for developers it may appear out of place as we are use to complexity. But I believe for a regular user this is killer, a simple spaced out flat design helps make the decision making faster. Again it depends upon how well you use flat ui theme. In flat UI I believe minimalism and spacing is very important.

I recently started using windows phone & win 8 pc. After using it for sometime I have realised that if you are into only few apps & want to use it effectively & productively then this is a great UI. These UI do not encourage more apps usage.

So next time if you are building a simple tool, flat design might be really cool. It makes users believe that there is less effort & it is faster. Again you need to master it to take good advantage of it like very other style. Signup page using flat ui is also a great idea if you ask me.

OT I still find oversized icons, as in Gnome 3, Unity and Windows 8, almost impossible to grok. I never used to be a fan at all of deep nested menus, but a menu is so much more succinct and easier to grasp.

It might just be something about the visual cohesiveness of all the elements.

Actually, Metro works much better because everything is clickable. Every block has an action. UI kits like this are considerably less intuitive.

But everything in this UI kit is clickable. Design and clickability of elements is down to the designer.

I have played with Win 8 Metro only a bit, so I can't speak for it's practical usage, but I own a WinPhone8 (Lumia 920) and the UI i think is not at all overdone, and other than tiles having their non-standard images sometimes, it's all very consistent (except for the few apps that are e.g. ports from Android or iOS, which use non-standard UI, but that's the developers' faults, not Metro's).

You typically won't see so many UI controls on one page without content to balance it.

True, perhaps the presentation of the site would be improved if there was more balanced arrangement of UI and content? That is to say, actually have content?

I guess the OP is assuming everyone knows the Bootstrap convention and so it's just skipping past the bull, so to speak, and showing you the goods. Unfortunately, right now, it's showing the UI elements in exactly the way one would do so to show the weaknesses of flat UI. I think the juxtaposition of the buttons and the menubars floating in space is especially problematic, because it's too easy to think "buttons, more buttons, big extra long buttons"

And then this is immediately followed by the Input elements which, after seeing the first two sections, look just like buttons with a white background and different text-alignment...that's also an unfortunate arrangement.

Anyway, I hate to bag on something that's a proof of concept (and an attractive one at that) and wasn't intended to be as thoroughly documented as Bootstrap...I'm just pointing out that this particular arrangement is more confusing than it needs to be.

In case you didnt know, the work in progress version of bootstrap 3 is more or less flat and what is achieved in "flat-ui" could in bootstrap 3 be achieved by just tweaking the variables.

There's an easy solution for this:

As soon as you interact with the page, be it mouse, touch proximity, or keyboard, you could highlight clickable elements - perhaps with a border, perhaps links with an underline.

Then you have the best of both worlds.

Being able to almost interact with an element to check whether it is interactive is not the "best" of both worlds, it's a compromise.

At least I posit 'a' solution! I'm not a fan of mystery meat navigation, and to be honest - there are plenty of sites - that use quite dumb non-intuitive UIs - including non obvious links and drop down menus. An intuitive navigational mode applied to web pages could really help.

I get what you are saying though. I'd envisage say, as soon as you tap the screen or move the mouse, all the navigational controls would be highlighted - rather than having to hover the mouse over something to see if it's a link or not.

I agree. Flat Ui is good on lists, product display, Forms.. But it gets really weird on buttons, menus, pagination.. Our eyes need lines and 3D separators to those elements. Very good job from DesignModo though :)

I know, it's not a "button" if you don't feel that you can _press_ it. Check what I mean in this image (mod using box-shadow): http://i.imgur.com/ZyiH7AJ.jpg , a few visual clues can help a lot to the user.

For the curious, this is called affordance.

http://en.wikipedia.org/wiki/Affordance

I like the flat button a lot more.

Good for you but understandable user interfaces are (and should be) higher priority than prettiness; the "warning button" looks like a warning message for me.

But of course there are alternatives for visual clues that still look flat-ish: http://i.imgur.com/jXN2tpe.jpg

The problem with your example is context. OP's link to the flat design is lumping all the UI elements together. Essentially, out of context. Even your use of the label was awkward. "Danger Button", the text, is weird. However, if you'd relabeled it Submit, or some other common action word, it would make more sense.

Couple that with the lack of a form.

I'm not saying that flat buttons are superior, or that 3d looking buttons are worse. Simply pointing out that context matters, and even your opinion is worthless. That it looks like a warning message to you is indicative of other problems, not merely the lack of 3d.

The problem with your argument is the need of context; not everyone designing web pages is good at design and contextualization of interfaces, this is not an "opinion", is a FACT. And what it means is that in general, promoting practices such as flat buttons is counter-productive for usability.

I have to admit, I like the flat button also but I appreciate you mocking up different versions. I dont think that a button needs to be raised to make people think they can press it. Look at the iOS settings page as an example. These buttons are completely flat. http://cl.ly/image/2j2m3I2R2x1z

Yes, but those are also the ONLY clickable options (and only visual elements, consistently in a list) on the entire screen. This does not hold true (in most cases) for a website / webapp.

The settings page is very specific context and there are no similar elements that aren't actionable so it is easy to learn that these links are links, not just labels. The arrow on the right side is also a nice cue.

You should not generalize from this example that flat buttonlike constructs are as usable as normal buttons in other contexts.

Also while I personally don't like the flat design, I believe it can work with a caveat: you will need to be much more careful in the design as you offer less conventional cues. In this I believe a design that offers more affordances is less prone to small mistakes.

Those aren't buttons.

If think if the label was "button or message?" your point (which I agree with) would be a lot clearer.

It only takes mousing over the button to get an indicator that it can be interacted with. That combined with placement should be sufficient to communicate purpose.

An over-reliance on a hover state leaves tablet users in the dust, though. I see no reason for completely flat buttons, as it's eminently possible to design ones with subtle depth that play well within the bounds of "distinctly digital". The principle that your users need to touch everything in order to learn their boundaries is a dangerous gamble, and may very well be leaving conversions on the table due to risk-aversion.

The new Blackberry OS is like this with gestures. Sure, you can spend 20 minutes moving your finger(s) in every way imaginable to learn how to use it because there's no chrome (or hardware buttons), but it certainly doesn't instill confidence on the first use. Instead, it presents itself as a challenge: "learn how to use me, I dare you."

> An over-reliance on a hover state leaves tablet users in the dust, though.

Not only that, it requires a mouse user also to hover over all possible elements to just know what's clickable. Kind of like some of the first graphical adventure games.

Or imagine a website where a link only turns blue and underlined as you mouseover it.

"Input" versus "Indicator" is a big problem in FlatUI that needs to be solved, there is no shared visual language yet to signify which is which, and it needs to be possible by just looking (and preferably other modalities as well)

Excellent points. You have won me over.

Google's new design language handles this pretty well using "almost flat" design. They still have a rectangular button (no gradient or rounded corners), but there's a slight drop shadow.

Jarring? Really? Anyways. I think what you're missing is that the flat design principles relying on crafty use of shading and visual hierarchy to structure elements. What I do like about the flat style is that it removes all the visual noise. Were you looking for some faux-leather stitching or something? Maybe a nice, literal notepad theme?

Why the ad-hominem? How about trying some civilised discussion?

>I think what you're missing is that the flat design principles relying on crafty use of shading and visual hierarchy to structure elements.

And what you are missing is that obviously the shading was NOT used in this UI examples.

As for the faux-leather stitching etc, this has been discussed to death. Those use of this kind of ornaments depend on the design fashions of the day -- Apple was universally lauded for introduced some of those back in the day, before flat become the new fad again. And we had that going back and forth several times in the design world (even going as far as from Ancient Greece to Rome, or from classical to baroque to modernism etc). And to clear another misconception some people have, faux leather stitchings have nothing to do with "skeuomorphism".

> And to clear another misconception some people have, faux leather stitchings have nothing to do with "skeuomorphism".

To test my conceptions (which very well may be mis-):

That is, "unless you're interacting with the UI element as if it were stitches", yes?

Yes, that is correct: "Unless you're interacting with the UI element as if it were stitches" -- or cloth.

No, what was jarring was how the elements were under the heading "Buttons," and so my eyes and brain were fighting each other over what to really think. Having to do that with every possible element on a page seems like more work than it needs to be.

Some of the other elements were easier to interpret, such as the movie UI, because icons in the conventional-nav-control are obviously buttons of some type.

Simply disliking the lack of depth in this UI does not imply that he thinks leather stitching would be a better alternative. There is something inherently enjoyable about clicking a button with a bit of depth, even if that depth is subtle. The flat UI perspective often removes that emotional touch. Several prominent designers (@kerem and @craigmod, to name two) have emoted that adding a bit of depth to a button makes clicking it more satisfying. We are in the design business, but that involves making things more than pretty and trendy. Flat design does look beautiful, but there is a growing consensus that in many cases it also removes a bit of soul and energy from a design.

Reply on news.ycombinator.com