The last year has been good for slick designs. We have seen the popularization of big visuals, full-width / full-bleed images, background videos, which commit so many antiquated notions we have about the fold to distant memory.

Screenshot of a full-width above-the-fold image that includes a puppy with title text overlay

These align with the goal to remove complexity from the screen, reflected in our resistance to skeuomorphism — that on the heels of material design returned full-circle.

Parallax is here in a big way, paired often with pages that scroll infinitely.

[codepen_embed height=”268″ width=”600″ theme_id=”0″ slug_hash=”qdGZJr” default_tab=”result” user=”eehayman”]See the Pen <a href=’http://codepen.io/eehayman/pen/qdGZJr/’>Full Page Parallax Scroll Effect</a> by Emily Hayman (<a href=’http://codepen.io/eehayman’>@eehayman</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

And, of course, there’s the design element at the crux of Pinterest, every social network, and the like – maybe a more ubiquitous trend than anything: the card. Cards contain content that can stand alone – a title, blurb, author and publication information, sharing options, images – which do not necessarily have to relate to the cards above or below it.

Cards

Our vocabulary for talking about design hearkens back to the things we find in our homes: cards, canvases, bars, blocks, drawers. For instance, the side-drawer navigation is seen as a solution to invasive menus by shuffling some content off-screen. Often, these menus are toggled by a switch.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”klnjw” default_tab=”result” user=”oknoblich”]See the Pen <a href=’http://codepen.io/oknoblich/pen/klnjw/’>Flexbox Off Canvas Menu</a> by Oliver Knoblich (<a href=’http://codepen.io/oknoblich’>@oknoblich</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

They come in various flavors. Each – let’s go ahead and admit it – awfully swanky.

Luke_Wroblewski_on_Twitter-_-Mystery_meat_of_mobile_navigation-_the_hamburger___kebab.__3-3__http---t.co-L3l5ZvgmyU-_2015-09-10_15-22-42

However, whatever it is that inspires one to adopt the latest-and-greatest, whether it is cool, pervasive, or through flat-out demands from stakeholders and clients, the questions with which we tend to occupy ourselves  — “does it look good” or “can it be done” — aren’t the ones we should be concerned with.

Does it work?

This differs from whether the design functions — yes, the carousel goes around and around and around. What matters, instead, is whether folks look at the carousel, engage with it, share its content. In so many words, does the carousel turn clicks into cash? Probably not.

We know because we can plot both qualitative and quantitative data that we use to determine the measure of an overall user experience. The value of the user experience is holistic. Is it easy to use, does it have utility, is there demonstrable need, is it easy to navigate, is it accessible, credible, secure, desirable, ethical?

And we care because a good user experience is good business.

A sketched infographic demonstrating aggregation theory

Aggregation Theory by Ben Thompson (www.stratchery.com)

By extension, this means that the most important factor determining success is the user experience: the best distributors / aggregators / market-makers win by providing the best experience, which earns them the most consumers / users, which attracts the most suppliers, which enhances the user experience in a virtuous cycle.Ben Thompson

Of businesses that invest in a superior customer service:

  • 14.4% more customers are willing to purchase the product,
  • 15.8% fewer customers are willing to consider doing business with a competitor,
  • 16.6% more customers are likely to recommend their products or services.

There is a demonstrable need for research-y folks to join dev operations and infuse the decision-making process not just with data but user-centric data using a myriad of research methods.

And, so, in the process of user research we find that while carousels are popular for stakeholders / clients, while carousels are must-have features for any Themeforest theme’s success, that rather than add a sense of pizzazz to a website they pull the overall measure of the user experience down.

The convenience of the design convention, the power [and ease] of jQuery, the wow-factor and high-level professionality associated with a slick animation leads to intuitive leaps of faith that carousels as design-elements actually work. This is largely because people’s capacity for cruft is diminishing. We are pretty adept at ignoring content we didn’t seek out. It is how we have adapted to too much bullshit.

Web designers recoiled similarly and thus embraced “content first.” Do away with the drop shadows, the clutter, flatten the design, and embrace the content – even radically so. Attractive copy. No sidebars.

Screenshot of an article on medium.com

An article on medium.com

For many, even having a menu bar was a little too much, and for good reason. When there are more than a few menu items, the cognitive load is pretty high.

Eye-focus map of how many menu items can be scanned per fixation

Out of sight, out of mind

In fact, large menus – we figure – have such a high interaction cost that – perhaps – it detracts from the whole shebang. Facebook fire-started the hamburger-menu bandwagon, Google jumped on board, NBC, Time Magazine …, it’s hard to miss. But, hey, our hearts are in the right place.

A screenshot of a teacher resources page

What seems so obvious now is that menus that are out of sight are out of mind. So, engagement invariably drops.

Better designed clutter

The persistence of the hamburger menu’s popularity is because sweeping one’s content problems under the rug is mighty attractive.  Easy, lazy, and looks pretty good. Think of the attraction and the strange logic: with less on the page we can put more on the page. Eschew the clutter for better designed clutter. This is the impetus for the big visuals that started this spiel.

I mean, just look at that gallery.

I mean, just look at that gallery.

But big visuals have big implications. The web is getting really, really heavy. Images are the culprit, and the device with which we increasingly access the web is smaller and less powerful than its under-the-desk ancestor. Almost 90% of web traffic is mobile in many places around the world, and in terms of device complexity for which web designers must accommodate – shit’s getting weird.

 

The speed with which a website loads is more important than ever. Millisecond delays negatively impact conversion – whether the goal of the site is to sell a product or get emails on a list. Bloated sites cost their owners money.

So the tragic irony of content-first big-visual designs, if implemented poorly, kind of suck. Performance is a real problem that tanks a user experience that might otherwise have gone favorably.

Function before Feng Shui

The issue at hand is not the aesthetic of the web design. For many of us that aesthetic is precisely its allure. Our web is increasingly capable. We flex and bend its boundaries to celebrate its power to tell stories, to affect.

The issue is that we tend to prioritize the look and feel of the web – its art – over its purpose.

But the quality of our websites are determined not by their aesthetic but by their success at achieving goals for which they are intended. The page meant to enlist volunteers to some noble purpose is poorly made if its design distracts from signup. OKCupid’s lagging carousel-of-single-people can prevent the smartphone dependent population from finding love.

The irony, I realize, of my subheading is that feng shui is meant to harmonize a person with his or her stuff, designed-to-purpose that in our lingo intends to improve the overall user experience by not just desirability but usability and utility.

The artfulness of a web design matters, but when poorly implemented it matters negatively.

Figuring out whether certain design decisions work toward the purpose of the application or site is the key challenge to its success. It is the question of design efficacy with which we must concern ourselves first, resisting the compulsion to gawp at the groovy layout and remember that design is not art – design is function.


Also published on Medium.

Michael Schofield Michael is a deep-thinking beach-bum developer librarian doing and writing [sorta] impressive things around design, development, and the user experience. You should ask him to speak or do a workshop.