Hacker News new | past | comments | ask | show | jobs | submit login
Flat UI is not the only way forward (maxrudberg.com)
103 points by co_pl_te on Jan 20, 2013 | hide | past | favorite | 67 comments



"[textures and ui effects like shadows and gradients] help you understand behavior from looking at a static screen"

The winner. I wish designers would stop pursuing styles & fads and instead pursue results. Stop worrying what's best for looks or minimalism and start caring about usability and predictability.


From a non-designer's simple point of view, this flat thing is insanity. Designers I find are very willing to follow latest fads and trends without really evaluating or thinking about it.

Someone rebelled and wrote a blog how skeuomorphs are bad, put some pictures of leather textures up for everyone to laugh at. The next thing you know, you get OS UIs (Windows 8), websites and a whole bunch of other interfaces where you have no freakin' idea what to click. It all looks flat and so I end up mousing around elements on the screen like a drunk person stumbling in the dark trying to find how this thing works.

How about a little drop shadow on that button so it looks like, you know, a button? "Oh but it looks like a real world button and we shouldn't have to mimic the real world...blah blah.." -- I don't care about the philosophy of design or whatever the latest thing came from Apple labs, I want to get my stuff done and just knowing what is clickable is helpful.


I completely agree. I have been using a Windows Phone 8 for a month and while I still like live tiles, but the whole experience is annoying. The flatness makes applications difficult to navigate and read after a long work day. Text, buttons, and other widgets are not clearly demarcated and applications tend to become 'text and squares soup'.

I have now put my SIM card back in my two year old iPhone 4 since, although the interface looks a bit daft these days, it has good usability.

(On live tiles: they are cute and give a personal touch to your phone, but they are to small to be informative for many applications.)


Yeah, it's like communism for interfaces: all tiles are equally important and get the same amount of real estate. :)

It makes it impossible to create a taxonomy, because the only thing you can do to organize them is put them in groups.

In Microsoft's defence, Apple haven't done anything to fix the problem of people with several screens of apps, which is basically impossible to navigate enjoyable. I almost always use Spotlight to open apps that aren't in the first two screens nowadays.


> In Microsoft's defence, Apple haven't done anything to fix the problem of people with several screens of apps, which is basically impossible to navigate enjoyable. I almost always use Spotlight to open apps that aren't in the first two screens nowadays.

Those two sentences contradict each other.


From a number-of-interactions required point of view, having to type the app's name is the worst solution I've seen. But it is a solution.


If you are wanting a single screen with access to all of your apps... I'm not sure there is a way to that. iOS provides three ways of opening an app: springboard, spotlight, and Siri. Springboard is pretty good, and when combined with folders you can store quite a lot on just the first page.

I am not aware of a UI idiom that would provide access in a way you imply.


I'd like a single folder for each application type, then an alphabetical list of apps - maybe working something like the contact list. As it is I am stuck with dozens of folders (for each letter of the alphabet, and because of 12 app per folder limit, I have four "Games S" folders.

http://i.imgur.com/aTacOlU.jpg


I actually feel the opposite way. If the search is fuzzy and incremental with good visual feedback there's no way I'd rather launch things than typing their names, except maybe dedicated keyboard shortcuts. Of course, something else is needed for discovering apps.


This is true on a computer, but on a mobile device I suspect you're in the extreme minority; typing an app's name on an onscreen keyboard is an order of magnitude or two more complex than tapping its icon after a swipe or two, especially when familiar with the layout.


No. There is nothing enjoyable (meant to write "enjoyably") about having to use the search feature for something as simple as opening as finding and opening an app.


MS-DOS? Again?


If you're using iOS, limit your home screen to two pages, and only allow a max of 3 or 4 folders.

Since doing this, my experience finding apps has improved significantly. It does mean you have to be frugal when installing new apps (add one, delete one sometimes). But then you're forced to keep only the stuff you use.


I tried to uninstall a bunch of apps a while ago, but since my iPad also got hooked up, the apps keep getting redownloaded and -installed, after I install it in either device.

I haven't looked into fixing it, but I have way too many apps for my own good anyway. But even so, I'd still have a lot of apps on my phone.

That's why I'd like to be able to hide them somehow, for instance by tagging them and only make them appear, if I want something in Games or such. As it is, I have one or two screens full of games.


Settings -> iTunes & App Stores -> Automatic Downloads -> Switch "Apps" to Off.

This is a per-device setting that allows you to prevent the device auto-downloading new music, apps and books.


>Yeah, it's like communism for interfaces: all tiles are equally important and get the same amount of real estate. :)

There are actually three different tile sizes. You may be thinking of iOS.


In Windows Phone 7.8 and Windows Phone 8 user-level application tiles are available in two sizes -- where the size of the tile can be chosen by the user.


I find Android to be a good middle ground. Enough cues to make actions obvious, but not totally over the top like iOS. It also has widgets, which are similar in functionality to live tiles.


Well, to be fair, iOS store launch apps all looked like the System Preferences app. It wasn't till apps went out of their way using design as a differentiator that it had beautiful unique apps.

Windows Phone barely gets any attention, so the apps that get written for the platform use all the stock UI widgets, making everything look boring and bland. Plus XAML has a pretty steep learning curve if you try to do anything outside of the simple templates Microsoft provides.


> The next thing you know, you get OS UIs (Windows 8), websites and a whole bunch of other interfaces where you have no freakin' idea what to click.

Thank you! I feel like nobody is allowed to say it on the internet, because Microsoft finally released a phone UI that isn't objectively terrible, but I find Metro goddamn confusing on a phone. The "People" app is a disaster. Little bits of text hanging off the side of the screen, no indication about what's clickable anywhere. My mom is supposed to use this?


It may be important to remember that flatness is not something that came out of Apples labs. To the contrary, the 'clickable' look on buttons was invented at Apple (Xerox had flat buttons). And the reason, surprise, surprise, was and always has been usability. I don't see them reversing that any time soon. That skeumorphism has seriously gotten out of hand in iOS 6 is a different debate. Ive will fix this.


What aggravates my particular swimsuit area is that no one who rattles very loudly on this topic seems to realise that there is more to skeumorphism than flat and textured.

By way of example: one of my favourite skeumorphs is Apples "head shake" when you enter the wrong password to unlock a Mac.

Flawless execution.

I know that something went wrong, I know what went wrong without ever reading a manual, it's friendly and gets the point across without big red Xs and intrusive DONGGG!! noises.

The fake leather stitcing stuff is dumb. I think that there are many designers who are guilty of throwing the baby out with the bathwater though.


This very page has over a dozen different click-able targets, and only one is a button with a shadow. Yet we seem to be able to find our way around just fine...


With due respect to pg, HN's UI is not something to aspire to, though it has subtle things that make the difference between "meh, but usable" and "omgwtf".

The problem I've found with Windows 8 is that there is no visual difference between clickable text/icons and nonclickable text icons. The whole experience comes one of trial and error where you tap on random things like an idiot to see what elicits a response and what doesn't.

The web's way of solving this problem is by underlining text that can be clicked. HN violates this in many places, but at the very least text links underline when moused over - not ideal, but works, and is something that doesn't exist in touch-land.

Ditto, we've been using rollover effects for years to demarcate clickable icons from the unclickable. This entire strategy is now kaput thanks to touch.

We don't necessarily have to have drop shadows, but what we do need is a consistent and unambiguous language that clues the user into how the UI operates. Windows 8 currently lacks this in a really, really bad way. We can do this without skeumorphs, but we still need to do it.

And therein lies the greatest problem with this flat design trend - many designers are going flat without remembering that skeumorphs carry a lot of user hinting that you have to replicate.


Hn is also aimed at an audience who's HTML heuristics are perfectly honed to detect a link, whatever it may look like.


> This very page has over a dozen different click-able targets, and only one is a button with a shadow.

I remember initially HN didn't strike as a particularly intuitive site. It worked and I am using it because of the community and the content, I am used to it by now.

Ok maybe there some value in having users slowly discover cool features by randomly trying to click things. I don't know. But at least it, seems, the core functionality should be somewhat obvious.

Buttons on the web for every link don't work, but I like some special markup to show links (traditionally it is the underlining but anything else can work as well).

To me there is often a tension between making something looking cool and making it functional. I'll admit the look of the flat interfaces maybe cleaner (whatever that means...) but unless it is meant to just be looked at, it also has to be functional.


Note that HN is abiding by common customs that many people on the internet will have encountered a lot: usernames are clickable, things in the header/footer are clickable, "action words" without context are often links (i.e. "link", "parent", "flag", "comments").


It may surprise you, but a part of design is fashion [trends].

My Ski jacket from about 10 years ago still works really well. At the time it looked great, but now it's outdated in style, although it still works great.

So as a designer, yes I worry about trends, because if I don't then you'll end up picking a jacket that works and is on trend over a jacket that just works (other things being equal like price etc).

Design is not a single input discipline. Many factors go into making a design for a product... including trends and fads.


That is the argument by which design becomes regarded as frivolous.

Frivolity has it's place in life. But it is only a subset of design.

Therefore, I think it's ok to disparage articles on the silly aspects of design, when posted to HN, especially when they're met with religious battle type fervent loyalty.


Ignoring any aspect of design will make you look frivolous. Yes, exploring trends are a subset of design but they are just as important as any other aspect of design.

When I'm asked to design something of course I test and make sure it's functional. But I equally make sure it's current and appeals to whoever it should be selling to. Both are important - neither are frivolous.


> Design is not a single input discipline. Many factors go into making a design for a product... including trends and fads.

The problem is that sometimes (usually?) it's 99% fashion, 1% usability studies....


This is a well established paradigm among designers. Different textures to represent different states. Designing Actionable buttons requires gradients and shadows.


"Flat UI" seems like an immense reluctance to give Microsoft credit for their work on Metro.

I am reminded of this definition of Microsoft's Metro aesthetic by Andrew Kim: http://static.squarespace.com/static/50271a61c4aab6c54f9af5e....

~ http://www.minimallyminimal.com/blog/2012/7/3/the-next-micro...


As a UX person I still give MS a fail on Windows 8. Yes it has a clean, aesthetic look. But it lacks usability. And any design that is not primarily focused on usability is best described as Kitsch. Even if it has all square angles.

That does not mean I think Apples god-awful "tape deck" interface or the horrors that are games center or find my friends are any good.

I am sick of designey people calling everything good that has a straight line. To paraphrase Steve Jobs, design is how it works.


The Windows interface used to be clean and usable. Then they saw Mac OS X's Aqua and panicked, scrambled and came up with the turd that's XP, losing the "clean"; kept polishing that turd and came up with Aero in Vista, losing the "usable". It's a cautionary tale. With Metro Microsoft is at least getting the "clean" back, maybe the next iteration will bring back "usable". One can always hope.


Windows 8 is horrible. I am not going to fight you on that one as someone who's had plenty of trouble with it.

But it's not too much of a step back from Windows 7, so I find the more strict, general design philosophy to be a vast improvement; the gradients and Aero crap on Windows 7 and below was just so ugly to look at.

Windows's interface is horrible as always, and I don't envy people new to Windows who bought a Surface. Yikes.


Semi-off topic, but I find it interesting that Kim actually just took a job with Microsoft this week. I'd like to see what they are going to do with him.


His forté is in hardware, and he's been hired to work in the Xbox division, so I hope his touch will affect the look of the next Xbox console/controller and other peripheral products.

I really dislike what Microsoft did with the Xbox design in general, and a combination of Kim and the Metro aesthetic seems like the perfect antidote to that.

EDIT: Kim also shares my views on the Xbox design, it looks like: http://static.squarespace.com/static/50271a61c4aab6c54f9af5e....


Microsoft design "theory" is "we can't beat Apple at their game, so let's run in the opposite direction because no one else is there, and pretend we think it's a good idea". It is like joining a contest to win "most beautiful house for miles around" and entering in the Sahara desert dsection


That's far too reasonable and moderate an attitude to enrage, goad or inspire a new Movement.

I hope more people adopt it.


Another point to consider: I think regular users prefer a bit of textures, gradients and real-life counterparts. It gives the UI a more friendly appearance.

Never forget we're just monkeys.


Yes - if you watch non-techie people use tech, often the biggest obstacle is just starting to use the thing. Then when they do, their persistent fear clouds their ability to learn/use the thing well. This makes me think that approachability is one of the biggest problems to overcome in UI.


Those thing give UI something called affordance http://en.wikipedia.org/wiki/Affordance


It's pretty much the modern equivalent of the argument for always underlining links to communicate that it can be clicked.

Dustin Curtis's flat approach to buttons and links is to use rounded borders: http://svbtle.com. This will probably be how buttons will - and should - work in a flat design.


> Dustin Curtis's flat approach to buttons and links is to use rounded borders: http://svbtle.com

Of course, they're so dim that I can barely see them at all... ><


On the underline thing. While its not a need to have, it helps me recognize links without thinking.


It's always a great rule of thumb. Especially with touch devices that obviate :hover-based signalling.



That word is worth knowing. Thank you.


The "leather" on iCal, FMF is distracting and should be eliminated.

An user-selectable UI stylesheet similar Pixate and Teacup for RubyMotion would allow the user to select a view most comfortable for them: be it plain or fancy, retro or modern, or even accessibility-enabled.


What I'd really like to see in iOS UI in the future would be uniformity in design choices.

Many of Apple's own apps adopt different design styles instead of adopting a single design language. Also, cleaning up "over-designed" skeuomorphic interfaces might help a lot.


I would love to read a short history of how the current skeuomorphic interfaces came to be on iOS. There are a few good ones, but others are so amateurish in comparison that it's as if an entirely separate company pushed it out. I'm thinking of GameCenter, which even though I know is a major part of official iOS, I sometimes disable because my reflexive action is to disable spammy-looking apps.

I'm not against all skeuomorphic designs....in Game Center's, the design is just bizarrely tacky.


It gets worse. The contacts app on an iPad doesn't use all vertical space in order to keep the aspect ratio of the booklet it imitates believable.

Very amateurish indeed, I'm baffled people praise Apple for UIs.


I've always looked at it from the perspective of who I'm designing for. From a functional standpoint, certain users respond to certain affordances in a design. For some, gradients and shadows are helpful when trying to discover points of interaction. For others, a flat colored element with a certain shape and hover color dictates the same thing.

The fight between styles is unnecessary. Think about who is using what you make and their level of understanding. More importantly, though, never let aesthetics inform functionality. Rather, let functionality inform the aesthetics.


I love these design discussions on HN, brings out many different specialties.

I know this isn't specifically a Microsoft thread, but I can't help myself...

I find myself wishing Microsoft would return to its hardcore productivity app roots, and I don't feel Windows 8's Metro design serves me. Give me desktop apps with multiple child windows and allot only a single, thin button bar and the menu bar for the mouse clickers. Let me Ctrl-Tab/Ctrl-Shift-Tab between my stack of child windows and Alt-Tab between my stack of processes.

Isn't this a form of minimal? To focus one's app and UI design on keyboard accelerations and freeing up a maximum amount of screen real estate for editors/data presentment? A throwback productivity-focused design like that would demonstrate real bravery. Microsoft has already committed to balancing touch with a keyboard and touchpad with their tablet design, so this could be possible.


Yes, Flat UI has its place and not the only way forward. One thing everyone is missing is the author's statement about all knowing Jonny Ive being and an expert in industrial design. UI design is a whole new beast.... That means having a UI with only 10 shades of grey will be the best look


Ahh, well said. I think you nailed exactly the thinking inside Apple design.

Most everyone agrees that Calendar and Find My Friends UI adornments are way over the top. Still, their target market is grandma and not us, so the kitschy-ness of it all isn't as dramatic when you keep that in mind.


Aren't corporations and designers in them just "design fascists"? "This is the ultimate design that is only good for everybody in the world, for a little girl and a brutal middle-aged man, you are not allowed to have your own taste". Maybe everybody must also wear the same gray-colored minimalistic clothes?


flat ui is a design trend and like all trends it'll go away.


Basically, but it can still be a good one. Dieter Rahms had a pretty good design trend going for instance. :)

All design is going to feel dated somehow, even though we can't imagine it in the moment, but I think the flat design is going to age very gracefully compared to a lot of the design memes today.


I disagree, there is a lot of design that still feels quite modern, especially within furniture (Dieter Ram’s famous shelving system holds up quite well for instance). If you go for a timeless style it’s usually the technology limitations (size for the product for instance) that gives away the design.


I meant design within software is always going to feel dated eventually, because we don't have finalized hardware products like Ive's and Rams's products.

There isn't really an idea of software design that's extricable from the viewport, and that what I mean is going to make it look dated eventually.


And that "Regalsystem" is from 1960. Claude Garamond's typeface from ~1550 [1] still is the high standard for book typefaces. This is excellent design.

[1] http://en.wikipedia.org/wiki/File:Original-CG.gif


Wrong. Good design is timeless.


True, and very interesting. None of the software currently out could be called timeless. Maybe timeless user interface design has simply not been found yet? Closest are probably the first apps that came out with the Macintosh. But everything since then... Nah.

This is in stark contrast with Apple hardware which is pretty much universally timeless designs. Particularly the iPhone 4 and 5 - I am willing to bet they will still look great 20 years from now.


> I am willing to bet they will still look great 20 years from now.

Good design is timeless because it holds inherent characteristics that are not subject to time, it's not exactly about how great it looks or think it would look years from now, this is a side-effect.

I'll give an example. If you compare an IKEA spoon and a renaissance spoon, you'll notice quite a few differences besides the 1800 one looking dated. The recent ones handle better, have better weight, avoid spills, use materials that don't tarnish, etc.

Now contrast this with the japanese hashi (chopsticks). It consists of a pair of bamboo sticks cut at a certain angle and it's design hasn't changed for centuries. It has been perfected, reduced to the essentials, and does it's job still to this day. It's timeless, good design, and by consequence looks great - it's form and shape unconsciously emanate all these characteristics to us.

> True, and very interesting. None of the software currently out could be called timeless. Maybe timeless user interface design has simply not been found yet?

UIs are relatively new, but I would argue command prompts are one example of UI that withstood the test of time, while the WIMP metaphor seems to be fading away with touch devices.


I totally agree. But as design trends define the look of a decade, apps kind of need to adapt too or risk looking "old-school"




Consider applying for YC's W25 batch! Applications are open till Nov 12.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: