Flat UI jQuery Theme | Hacker News Reader

Flat UI jQuery Theme

github.com

64 pointsmissenlinx23 comments

The "flat" style being distributed today is a giant step backwards in usability, I can't for the life of me understand why it's so popular. On desktops, it's not clear until you hover that it's even an interactive element. On mobile? Forget it. You'll have better luck teaching your grandmother the difference between client and server side JavaScript.

It's popular because it's more portable across devices and screen sizes, and designers are too lazy to maintain two sets of UIs, one for fingers and one for mouses.

That's mostly true although there's actually no good reason for that, it's perfectly possible to have a non-flat UI without using any images or special image effects, say the new Google UI without the very subtle gradients, it's minimalistic but not flat, right?

> On desktops, it's not clear until you hover that it's even an interactive element.

Have you considered that this is due to you and others being conditioned to believe that beveled/3d elements indicate interactivity whereas flat elements do not? Maybe a change is in order...

Also related to the abandonment of "fake" depth in web design is the latest A-List-Apart article, "Material Honesty" - http://alistapart.com/article/material-honesty-on-the-web

It's more likely that the problem is because there's very little perceived affordance[1] that differentiates interactive elements from inert design.

[1] http://www.jnd.org/dn.mss/affordances_and.html

The fact is that your average internet user is conditioned to think the beveled elements are clickable. Whether or not that ought to be the case is an utterly useless discussion for your 905% of jQuery theme users, people who want to just build a website quickly.

I don't think that is the case at all. I think the goal of flat UI is that the very existence of an element implies that it is interactive. I do agree that there is a problem in that most of us are conditioned to look for gradients, shadows, and other affordances when looking for interactive elements. Perhaps time will solve that.

Sometimes it at least looks stylish. This just looks ugly.

I think with very slight gradients to help indicate clickable areas and such, it can work very well.

Nothing is stopping you from using this as a framework and adding your own styles over the 'flatness'. If anything this is a much nicer base to work off of than if you started with something that had poorly made gradients.

From a usability perspective I don't think this really works at all. For most of the UI elements, the only visual indication that you get that something is clickable (buttons, link, collapsibles) or separate (grouped buttons) is on mouse hover.

But this is for jQuery Mobile, and you don't get mouse hovers on the devices this is targeted for.

I have to agree with img. This theme runs into problems on mobile devices. Depending on your audience it probably is not intuitive to them that many elements are interactive with the absence of mouseover effects. Still nice to see a flat UI port to jQuery UI though. Cheers.

Good article on why a flat ui might be good at: http://alistapart.com/article/material-honesty-on-the-web

Crux of argument can be found in the statement: "Even lighting effects like drop shadows, form shadows, specular highlights, and reflections are dishonest because there’s no light source inside a digital screen that’s manufacturing these lighting effects." The article then puts forward the position that honesty to material creates more timeless design.

Perhaps the crux of its failure can be found in the statement: "A pure CSS button that’s crafted to look like a vintage stereo knob is dishonest."

If your application is a music player, then having anything but a stereo knob to control volume is dishonest. Yes, it is not a hi-fi component made of steel. But you are making a music player. If it doesn't look and feel like a music player, you are dishonest.

The same argument can be used to relate to some of the most basic UI metaphors. A desktop is not a physical desktop. But users would prefer a visual layout of icons representing apps on their mobiles and computers than a list of app names to choose from. A window is not a physical window, either.

So while flash is bad, denying the role of metaphors is just as bad. Maybe worse.

Don't be so dramatic. From a usability perspective, it works enough. Also, interactivity is changing and themes are options. People don't hover or click with touch devices.

Many UI concepts are in flux (again). Link? Button? Collapsible? Let go of what you know and watch people using flat UI.

There are many ways to hint interactions within flat design. As has always been, stick to more abstract interaction fundamentals and processes and don't wed yourself to fads based on current (or old) tooling trends.

It's easy enough to use color, contrast, font, positioning, size, shape, etc. all to indicate interaction points. That's all a gradient button is compared to the text in an old message box.

Also, there are two major thrusts in flat ui that make it compelling. One is the additional focus on content since the UI takes a step back once you spend less time tweaking artificial details. Which leads into the second point others are making. The time and energy spent in details to achieve fake results in a digital context are dishonest at best and grossly out of place from a design perspective. There's a little bit for everyone in there.

This.

"Flat UI is bad for usability" keeps getting repeated as a criticism against the flat UI trend but is not actually true.

Bad UI design is bad for usability, regardless of VISUAL style.

As jack_trades mentions, there are MANY other ways to convey interactivity without artificial depth, texture.

Think about a simple modal. Users know to look at the top-right, sometimes left, for controls for the modal. What difference does it make if the user sees a flat X icon or an X inside a beveled, drop-shadowed button?

Re: desktop vs. mobile; If a user has to hover over an element just to know if it's interactive then perhaps the design has already failed.

The vertical alignment of the text is off and the colors are a bit muddy compared to the vibrant palette of http://designmodo.com/flat-free/ (which was clearly the inspiration for this).

The vertical align is off in his screenshot, but in Firefox it seems to be spot on. Also I wouldn't worry too much about the colors, that's about the easiest thing to change yourself.

I tried porting it to jQM too. https://github.com/iakshay/jqm-flat-ui. Didn't really continue..

jQM is for mobile devices why are you using custom dropdown?

More stuff available in the same kind of flat design style on http://designmodo.com/flat-free/

Wow, great stuff. I was tempted to build this myself. Awesome to see it's already done beautifully!

Nice! This is one of the better looking ones I've seen.

Turquoise? Hope you've got good lawyers because LayerVault will have just sent a DMCA.

Reply on news.ycombinator.com