Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flat UI: Free Web User Interface Kit

designmodo.github.com

Post reply on HN
Print view View original

171–180 of 201 posts

Re: Flat UI: Free Web User Interface Kit

#171

Post by r4dius »

ErikRogneby wrote: post #168
jQueryIsAwesome wrote: post #119

Earlier quoted context omitted.

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

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."

Re: Flat UI: Free Web User Interface Kit

#172

Post by jjsz »

Hey guys, don't know if you read the comments of your social networks or hacker news first but I've sent an email to your info@ email regarding this post and also posted on your recent social networks' updates. Hoping to hear back from you. Again, thank you for putting this out! :-)

Re: Flat UI: Free Web User Interface Kit

#174

Post by jfarmer »

jQueryIsAwesome wrote: post #106
danso wrote: post #59

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.

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

Re: Flat UI: Free Web User Interface Kit

#177

Post by zephjc »

mtgx wrote: post #112
danso wrote: post #59

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.

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.

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).

Re: Flat UI: Free Web User Interface Kit

#178

Post by bjourne »

jamra wrote: post #115

I am building a demo site with this just to test things out. I feel like a grid is missing from the demo. I would also like to see how he does the single color background like in the screenshot. I don't see a way I can recreate that given the toolset.

If by grid, you mean "table" I've built one with it. Might put it on github after I've fixed the rough edges. The design inherits bootstraps css so it includes a grid layout by default.

Re: Flat UI: Free Web User Interface Kit

#179

Post by swalling »

antoniopratas wrote: post #152
throwaway420 wrote: post #37

Earlier quoted context omitted.

Related to your point about UI discoverability, I really like this article on the concept of "Almost Flat Design". http://www.matthewmooredesign.com/almost-flat-design/ This points out how important and useful the subtle and tasteful use of gradients and shadows can be within flat designs.

that's the most realistic post of them all. And basically what he says here, is what everyone should be doing. Design for your objective, your message, not for a trend. Use flat elements if they are an advantage to your project, use realism if it benefits your message. Basically, use whatever you want that may help you accomplish your objective.

Well put.

Re: Flat UI: Free Web User Interface Kit

#180

Post by ktsmith »

swalling wrote: post #128
ktsmith wrote: post #85

Earlier quoted context omitted.

I don't like the flat menu/buttons. I don't find anything about these flat menus or buttons to be particularly intuitive. There's no visual cues to let me know that there's sub menus there's no visual cues to let me know the buttons are clickable until I am already interacting with them (hover/mouse over etc).

"There's no visual cues to let me know that there's sub menus" It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level. "there's no visual cues to let me know the buttons are clickable until I am already interacting with them" Excep…

> It is a fairly common pattern in nav menus to have an indicator -- the unread count or down arrow in this case -- at the top level, but not at the second or third level, and instead rely on simply hovering on the submenu to open the next level.

It's equally common to have an arrow or other indicator next to menu items to indicate that there is a second or third level of items available. Using the menu items in OSX from your own example you can see that items with sub menus have a triangle pointing to the right where the menu will expand. The problem with leaving off these indicators is that some users won't realize there are more options and give up before finding what they are looking for. The menu text must be very clear that there are more options.

> Except one of the most powerful cues, action verbs in button copy.

I agree that button text is a very huge part of interaction as even with visual cues that an item is interactive the text is going to tell you what the action is. That being said we've all seen or used badly designed interfaces where interactive elements have bad labels. Additional visual cues can help to overcome a bad label. Google is rolling out mostly flat designs where interactive elements at least include some gradient or distinct outlines that help show which items are interactive. I find those interfaces to be much easier to navigate than all flat interfaces.

Post reply on HN