Hyperflat Design is not great Web Design

The trend away from skeuomorphic design toward flat design has in many ways been refreshing and enjoyable. And yet, it’s worth noting that flat can be taken too far, to the detriment of usability. Take for example Microsoft’s modern.ie site — see the commented screenshot below or check it out yourself.

Modern.ie Screenshot
An example of Microsoft taking flat design too far. Usability cues have gone missing.

I would argue they’ve taken interface design hyperflat, and in so doing have left users without important usability hints.

Yes, the gradients and shadows of yesterday have often been overdone. But there is such a thing as subtlety and sophistication, without complete abdication. Used well, gradients, shadows, and hover effects give users important visual cues for navigating your website’s interface more efficiently and effectively.

Letterpress Game Screenshot
Even in this otherwise “flat” design, shadows convey depth and provide visual cues to users.

In other words, if you’re going to make use of flatness in design, do it while still giving your users the visual cues they need. Thus John Gruber has recently written on the topic of flat design:

Letterpress … is a perfect example. It is indeed, mostly flat … But Letterpress does have Z-axis depth: when you drag a letter tile, it pops up and has a drop shadow under it until you place it. There’s nothing “flat” about that. What Letterpress rejects is not depth, but depth as mere decoration. The visual “raising” of a tile as you play it is a natural visual cue, a way of emphasizing what it is you’re moving.

Visual cues are the key here.

Count me in favor of what Matthew Moore has called “almost flat design.” At times Apple has taken its skeuomorphic usability enhancements too far. But Microsoft’s position is worse. I think Moore is right — Google’s interface design gets it just about right.

Google Plus Screenshot
Google’s use of edges, bevels, shadows and hover effects, while not overdone, give users important usability cues.

Of course there are other examples. One I’ve recently enjoyed is Andy Clarke’s recent Stuff & Nonsense redesign. Check out his homepage, and you’ll see some elements that are flat, some with edges, some with shadows. All links and buttons have hover effects, begging to be clicked. Then there’s that one gorgeous button, darn near unavoidable in its lusciousness. (No Skitch arrows needed.)

Andy Clarke Stuff and Nonsense Screenshot
Some flat, some edges, some shadow, all buttons and links with hover effects. And one unavoidably gorgeous button!

What’s going on here? Is it flat or not? With the times? Or behind? One could be forgiven for suspecting that Clarke has subordinated such questions and privileged the point and purpose of the communicative task at hand. While obviously interacting with current trends, the design is enslaved to none of them. Rather it brings past, recent, and current conventions together under the auspices of time-tested and user-empowering design strategies, including visual affordances, interactive feedback, and visual hierarchy.

Clear, straightforward, expressive, and inviting, the design speaks a visual language that is easy to understand and navigate — it looks great to boot — and it leaves no uncertainty about the most important action items on the page.

For my money, that’s great web design.

Recommended Related Reads

I’ll add to this list as time goes by:

Elements of a responsive web — or responsive web design’s role in the larger quest

Web GadgetsHi everyone,

I’ve been doing a fair bit of research on the latest thinking in responsive web design. Heady and exciting stuff.

One thing that quickly becomes clear is that responsive web design (see Ethan Marcotte’s book and add Luke Wroblewski’s Mobile First and Andy Clarke’s 320 and Up) is one key element in a larger matrix of elements that together make for a responsive web.

Other key elements include at least these:

  • Responsive Content — content carefully crafted and optimally adapted for your device (see Sara Wachter-Boettcher and Jeffrey Zeldman)
  • Responsive Asset-Delivery — just the files you need for your device, and make it quick! (see Paul Irish on this)
  • Responsive Interactions — the way things are going, we may need to capture clicks, swipes, pinches, waves, fist-bumps, back flips, and on and on (seen Leap Motion?)
  • Responsive Workflow — none of the above happens very well without informed participants working collaboratively to achieve great results (see Viljami Salminen’s “Responsive Workflow”)

I’ve probably left a few things out. But these categories help me get a handle on what’s going on and what everyone’s trying to make happen. It’s taking a lot of work, and it’s exciting to watch. (Don’t miss Aaron Gustafson’s Adaptive Web Design and Brad Frost’s recent how-to, demo, and reflection.)

I’m intrigued enough that I’ve started a little project to try to track these discussions:

  • RockinResponsive.com — currently only a homepage, but I intend to shape it into a great curated collection of “the best hits on the road to a responsive web”
  • @RockinResponsiv — I’m actively favoriting, tweeting, and retweeting here

Design for 3 Screens — Make That 5: Jakob Nielsen’s Alertbox


Mobile use will rise, but desktop computers will remain important, forcing companies to design for multiple platforms, requiring continuity in visual design, features, user data, and tone of voice.

via Transmedia Design for 3 Screens — Make That 5: Jakob Nielsen’s Alertbox

Responsive Web Design vs. Mobile Site: Which is better, when?

Responsive Web Design vs. Mobile Site: Which is better, when?

Over the next few weeks we at A Little Code will be experimenting with best ways to optimize sites for multiple devices. Here are a few initial thoughts.

Hitting the Limits of Responsive Web Design

Initially, we’ve found that for a site with a number of interactive elements, such as drop-down navigation, slideshows, javascript overlays, etc., the approach to Responsive Web Design recommended by Ethan Marcotte — adding media queries for mobile devices at the end of things — isn’t up to the task.
Continue reading “Responsive Web Design vs. Mobile Site: Which is better, when?”

iPad Usability: Year One — report from Jakob Nielsen

Jakob Nielsen has released a new study on iPad usability and interface improvements. From the article:

A year after our first usability study of iPad apps, it’s nice to see that iPad user interfaces have become decidedly less whacky. It’s even better to see good uptake of several of our recommendations from last year, including apps with:

  • back buttons,
  • broader use of search,
  • homepages, and
  • direct access to articles by touching headlines on the front page.

Read the results:  iPad Usability: Year One (Jakob Nielsen’s Alertbox).