Almost Flat Design | Hacker News Reader

Almost Flat Design

matthewmooredesign.com

215 pointsmtmoore5551 comments

The issue isn't skeuomorphic vs. flat design. Let's reframe it to be about the inclusion of affordances and constraints. What makes a tool easy and intuitive to use is the careful attention given to both enable and restrict the user from performing a set of actions. When a user clearly sees what he/she can or cannot do, they understand the purpose of what's in front of them. Gradients and dropshadows help with that, but even ignoring these aesthetic qualities, we have a whole host of other concepts to utilize, like consistency, proximity, structural heirarchy, and more conceptual digital analogs of real world entities.

Let's compare apples to apples: the iOS home screen to that of Windows. Let's go further and ignore the aesthetic differences, like gradients and dropshadows. What are we left with? The iOS screen has a table of app icons, all consistent in size and alignment. It's easy to see that at the highest level, these are all applications I can access. Let's look at Windows, more specifically the screenshot in the blog post. We see no consistency in size, and further, that grouped set of minicons on the left are of a confused relationship. 3 are music apps, and the fourth looks like maybe text messaging. The iOS apps are laid out in a way where a user can easily tell what is tappable from what is not tappable -- "this is an actionable element in a sea of inactionable whitespace." Contrast this with the billboard-like layout of the Windows Phone UI. You are bombarded with colors and pictures and icons, mere millimeters away from one another, leaving a user in confusion and sensory overload because it's difficult to isolate the various elements. The iOS app screen has an icon and a text label for every single app. The Windows Phone does not. It almost seems like tiles are arbitrarily assigned to be little/big or to have icon-labels/photos. After playing around with a friend's Lumia for some time, I'm still confused when I stare at the screen of a Windows Phone.

I'm not trying to spark an Apple vs. Microsoft debate. I'm trying to show that stripped of all gratuitous skeuomorphism and subtle aesthetic qualities, UIs can still be usable given they clarify to the user what they can or cannot do. I could've done the same mini-analysis with an Android home screen compared to a Windows one and Android would've come out on top for many of the same reasons.

I don't think the tiles in Windows 8 and WP8 are confusing, it's very easy to understand that they all have one function and that is to open an app.

Contrast this with the billboard-like layout of the Windows Phone UI. You are bombarded with colors and pictures and icons, mere millimeters away from one another, leaving a user in confusion and sensory overload because it's difficult to isolate the various elements.

This is true -- but only in the context of a random person put in front of a random Windows Phone device for the first time. However that's a fairly rare occurrence over the lifetime of a highly personal device, and I feel Microsoft has made the right decision in prioritizing personal organization.

Tile sizes and placements are indeed "arbitrarily assigned" simply because they're chosen by the user. Anecdotally, everybody I know with a Windows Phone has tinkered with the tile layout. The lack of whitespace is not a problem when you've placed all those items there yourself. The ability to vary tile sizes further improves spatial orientation within the customized screen.

(Think of items on your desk -- in order to tell them apart, do you insist that they are all the same size and at least 20 cm away from each other? Probably not, because those items have some other meaning to you than simply "object on my desk").

Another misunderstanding about Windows Phone is the content of the tiles. In screenshots it looks garish to have some tiles in a solid color and others filled with photos. In practice there's a strong consistency at work: any tile that is non-flat is displaying the user's own content. Furthermore these tiles usually also have an element of motion so that the non-flat content is not static. (For example, the People tile shows the user's contacts with varying animations, and the Pictures tile shows the user's photos as a slideshow with smooth panning.)

I completely agree with your point here about what the functional purpose of a user interface is. I would also agree that almost all styles of design have the potential to accomplish all the functional goals of an interface, except, perhaps, flat design.

Once you've adequately addressed the functional purposes of an interface, you are free as a designer to design it however the heck you want to. Usually the rest of these design decisions should be made through the lens of brand image and how you want your users to feel. The rest of the design process is practically a science (ie how the average person scans a page, perceives content hierarchy, expects certain UI elements to perform certain actions, etc). So the bulk of the truly creative portion of design is subjective, and designers should remember that. Yes, designers are always forced to be creative when solving UX and architecture design challenges, but ultimately the result is not subjective. Your objective goal is to help the most amount of users understand your website and accomplish their goals. When designing the style of your website, you're deciding how to influence people's emotions. An almost flat design like Google's is great for Google (and I truly mean that, I really love their design aesthetic as of late in their apps), but that's not because an almost flat design aesthetic would be great for every website. The almost flat design aesthetic makes me think of digital products, modern companies, and a subtle, friendly personality. This works for Google as it does for many other companies, but it might not work for yours.

Find your brand image. Craft your own emotional experience for users that is unique to you and your company. And when you find something you like, don't tell other designers it's better than their styles ;)

I'd been toying around with a post like this of my own after getting tired of hearing bitching from both "camps" in the design community (skeuomorphic vs flat), so I'm glad to see this. The current trend has become totally flat design, but as with most things in life, this is all about balance.

Completely flat design has no sense of layers or depth. This is important because users need to know where they are at any given time within your application, they will feel lost otherwise.

Completely flat design is also flawed when it comes to call to actions and various controls. Sure, a big red button in a sea of gray stands out, even if flat. The problem is when you can't have just one big red button (or you don't want a rainbow of buttons, which will look awful). You need your call to actions to stand out, and a perfect method of doing this is by giving said button depth or weight. It suddenly stands out from the flat design around it.

> Completely flat design has no sense of layers or depth.

Windows 8 suffers particularly strongly from this because it's got a lot of software that wasn't originally designed for the Metro style. Outlook (http://i.imgur.com/7fWEmvm.png) is one of the worst examples.

There are so many small things that would help give a hierarchy to the design, like using a darker shade of gray in the ribbon background and maybe the sidebar. Without visual cues it's a mess that you have to stare at to understand.

That screen shot just pains me to look at it.

Even obvious details are wrong like one set of reply buttons being flat and another set with gradients. This is really sloppy.

It's possible that isn't the final version; I just found the screenshot on GIS. But as far as I know it still looks like that in RTM.

Definitely isn't RTM.

Here are those sections in RTM. http://imgur.com/Uz5xi0t http://imgur.com/k3Comek

edit: It appears the reply buttons do squish like that on narrower screens though, but it's at around 1000px wide or less, so that's really a non-point in this day and age. Gradient issue isn't there though.

It is possible that some of those buttons are from add-ins like CRM, which haven't updated to the new look and feel. Visual Studio 2012 has the same problem.

Although this by no means affects your main point about the organisation/visual hierarchy.

Indeed, I looked at the image before fully reading the comment and thought it was an older version of Outlook.

Windows Phone has a lot problems as well. I open the Photos Enhancer app for example and it's impossible to know what is clickable or not. You effectively have to keep tapping on text/images until something happens.

The whole flat design approach still needs a lot more thought.

Same in Android actually.

To be fair that interface has WAY bigger problems than being flat. Even if you unflattened it, it would still be a horrible interface.

Not really a fair argument.

This isn't a perfect comparison because it's a larger screenshot, but the non-flat interface is 2010 was laid out the same way. In my opinion, it's a much clearer interface: http://cdn-static.zdnet.com/i/story/61/44/001475/out14-revis...

The application in your screenshot doesn't suffer from a lack of gradients and drop shadows. The problem is the almost uniform treatment of every element of the interface. This isn't a problem with "flat design" ( whatever that is ) but poor typography. One can ( and should ) create a clear visual hierarchy through type and color without resorting to shadows to give it more "depth".

Man. After LayerVault's post, the term has taken on a life of it's own.

Minimalism never precluded the use of effects or interactions to create depth (and I'd argue that "Flat Design" never precluded this either). Just because skeumorphism was one extreme, doesn't mean everything has to use another extreme as a baseline. Using the "flat" end of the spectrum is entirely unnecessary. A name isn't neessary for everything...

Also, for what it's worth, I much prefer Andrew Kim's characterization of the spectrum as skeumorphic to digital [1]. Digital doesn't have the connotations that "flat" has

[1]see: http://bit.ly/VfSQ7T

I agree. I also think it is important to distinguish between skeumorphim that is purely aesthetic, such as the leather in find my friends, and skeumophism that informs function, such as the bookcase in iBooks/Newsstand, or the calendar app. They are equally pixel heavy, but I find the former in bad taste.

Great post, though you really did pick an extreme screenshot for the iOS example. Something like Messages, Mail, or Calendar would be a more representative screenshot.

It did remind me how much "find friends" and Game Center make my eyes bleed though.

+1 to that, I made the same comment at the same time :)

That's a good point guys. I didn't really intend for the Find Your Friends screen to represent Apple's UI aesthetic as much as an extreme example of real-life metaphors. It's pretty clear Apple is going away from that look as fast as they can.

You didn't? It's the only screenshot a section with W8, Android and iOS. Really looks like a representation to me.

Actually, the screenshots are iOS, iOS Google App, and WP8.

Same thing for Windows Phone. Obviously, it's on every marketing material from Microsoft, but I don't see it as the killer feature of the OS, especially on WP8. The tiles have three different sizes, can be pictures or not, can be animated or not... The result is a mess. Highly connected and informative, certainly, but a mess nonetheless.

Can you explain why the tiles of Windows Phone is a mess?

* Constantly animating with new information often leads to overload (see: marquee tag)

* Lack of affordances mask what actions can be taken by tapping on a given tile

* Lack of differentiation between the functions of different tiles leads to a confusing experience

Other than the animations, what is the difference between tiles and app icons on every other mobile OS?

Tiles convey information. I don't think iPhone does this. Android has had this since the beginning I believe. E.g., you can add a weather tile to see forecasts. Or the clock tile.

The constant animation I can agree with somewhat.

Tapping a tile and the functions of different tiles isn't confusing because all tiles upon tapping have the same function, open the app. You can't actually interact with a live-tile in any way, though maybe you are suggesting that the animations of the tiles is suggestive that you can take an action on the tile other than open the app. In this regard, a WP tile is the same as an app icon on any other platform.

Having said that, I think the challenge in WP8 vs WP7 is the 3rd size for the tile (WP7 had only two sizes, square and landscape). The smaller sized tile does allow more info/apps/tiles to be shown on the homescreen, but it certainly clutters up the interface and makes it somewhat overwhelming.

I've been doing "almost flat" for years because it's the simplest expression of a design without gutting affordances.

Things that are interactive look interactive, and these attributes are only used for that practical purpose and never for pure decoration.

I really don't understand why this is even a debate. Do we need a daily post talking about how Apple's overwrought, realism aesthetic is tacky (it often is) and how flat design is too flat (which it is)?

This issue has officially reached dead horse status.

> Apple's overwrought, realism aesthetic

Well it's not like you've helped the issue with misleading, blanket statements like this. The problem with iOS/OSX is specific apps e.g. Game Center, Podcasts. The core OS itself is pretty neutral:

http://www.teehanlax.com/blog/ios-6-gui-psd-iphone-5/

I don't think we should avoid having opinions on this; I just think it's overdiscussed.

In the spirit of you calling me out, I will say that most of what Apple does (particularly in iOS) is beautiful and usable.

Cached Version, http://thequeue.org/cr?id=http%3A%2F%2Fwww.matthewmooredesig...

Coral Cache: http://www.matthewmooredesign.com.nyud.net/almost-flat-desig...

Google Cache: http://webcache.googleusercontent.com/search?q=cache%3Ahttp%...

(Since it appears dead)

Great post! I learned a lot and its interesting to see the drastically different directions Apple, Google, and MS are taking. Remember when everybody would just rip off everything Apple did? What would say the opposite of flat design is? 3D Design? Skeuomorphism? What would you consider Twitter Bootstrap? http://twitter.github.com/bootstrap/getting-started.html#exa...

I'd say it's Almost Flat. Colors are typically mainly solid, with mild gradients, and there are pervasive but understated borders with round edges, etc.

It looks like it's going flatter in v3 according to this tweet from @mdo the other day: https://twitter.com/mdo/status/291831248576458752

The screenshot you used to illustrate apple's design is particularly ugly... doesn't do them justice.

I got a Resource Exceeded warning the first time I tried to load the page.

http://www.matthewmooredesign.com.nyud.net/almost-flat-desig... if you get the same.

1. As the first comment on his blog is saying. The first image is a pretty bad representation of Apple's design.

2. When you use box-shaddow (or dropshaddow), then it's not flat design anymore.

I feel like Matthew just wants to coin his "Almost Flat Design" term when there is no need. Design has always been in the middle, except when it was extensively making use of boxshaddow or making everything flat. Then we give it names.

He has a point though, Windows with metro and mobile is doing Flat Design like nobody ever dared and as much as it's beautiful to see, it's a pain to see for a UI designer. Too bad he doesn't write more about this.

Not really trying to coin the term, I just gravitated to it when I was thinking about this topic. I've actually been thinking about this for a few months and two thoughts have dominated my mind:

1. As a UI designer, I love flat design. Probably that's partly due to it being new and refreshing, but I do appreciate cutting down the visual noise to a minimum and focusing on the content. 2. As a UX designer, flat design is extremely problematic for all the reasons I discussed in the post.

I'm happy this has started such a discussion and hope it can help other designers form their own opinions with this whole flat movement.

I prefer Apple's approach in all comparable apps simply because they do a better job of separating content from control. I dislike Google's grey on grey and Microsoft's "some text are buttons, take a stab at it" approach.

I must be strange because I fell that gamecenter is a pretty good metaphor and easily puts purpose into context when shown to the user (start a match on letterpress on the ipad and you get a gamecenter popup). I dont understand the find my friends leather, but it is really just a skin on top of a standard set of ios controls, it doesnt take away from usability.

I've been thinking a lot about this also. Metro seems too flat, the lack of depth really makes it hard to know what can be pressed. I've added small drop shadows to my own Metro-like interfaces and they make a lot of difference!

I also have had an idea for a new kind of "flattish" UI based on layered construction paper that is lit and shadowed by a simulated overhead light. The idea would be to let natural lighting algorithms do their thing in giving the otherwise flat interface depth.

I wish one would make a bootstrap theme of "Almost Flat" - It almost there, except the buttons, perhaps the popups can vet a "wash" as well.

I'm in the process of doing this for a project I'm working on. Once I'm done I'll put it up on github.

So tl;dr is basically "Most big, popular, respectable sites already implement 'Almost Flat Design'"

Was really hoping for an A/B test on this. Not, oh, we use it too.

I'll say it again...the variance in iOS app design (I'd argue that GameCenter is even worse than Find my iPhone) is so wide that I wonder what the product design management structure is (or was, post-Forestall) at Apple. How could any senior manager look at the designs for iTunes, App Store, Messages, iPhoto, etc., and then at Game Center, Find my iPhone, and conclude all is well? There must have just been no single person in charge of overall UX, I guess?

Hacker News DDoS :(

In the immortal words of Charlie Brown, "I killed it..."

I agree 100% this whole skeuo vs mini is a scam.

We need both where it is appropriate and think about the user first that's what design is about, and not just throw designs because they are trendy , what used to be trendy always sucks in the future.

Let's take at ReadWrite , TNW , Mashable new designs. They are flat , boring , with huge ugly flat color blocks that may look good on ipad or whatever , but not on my pc, frankly i ended ud reading only the register which still looks like a real online magazine to me. Iguess the others tried to appify their blog like Qwartz , except how much people read Qwartz ? I have a tiny 13'' screen i want as much infos as possible , not negative spaces all over the place.

Ask developpers about the latest Visual Studio version too, i'll guess used to it probably but how does it make that software look better? a little of relief would add to usability,now it feels like windows 3.1 or something, with ugly colors.

Reply on news.ycombinator.com