Gangnam Design vs Lasting Design

by Adrian Zumbrunnen / Jul 29, 2013

Have you ever heard of the song “Gangnam Style” by Korean music artist PSY? Yes you have. Did you go all crazy when it was played in your favorite club? Possibly. Do you still listen to it or sing it in the shower? Probably not. I don’t know of a single Swiss radio station that still plays this song. Now people’s reaction is like “Ahhh. That crazy Korean song from 2012… Again!”

I believe there are some interesting lessons about the ephemerality of trends and design which can help us to understand how perception changes and what impact it has on visual communication.


Designing for change

When I was at the Adobe Digital Marketing Days in Zurich, Dietmar Dahmen from ecx.io presented some interesting facts about changes happening in society that affect our everyday lives. One of the key insights was that we get in touch with new products and advertisements faster than ever before.

In 2013 we are confronted by an average of 5'000 ad messages per day (source). Products and services are updated much faster. Technically speaking, the iPhone 3 might not be the most recent phone there is, but the unprecedented growth of technology and in particular the incredibly fast growing smartphone market make us perceive the phone as older than it actually is.

First we invent technology, then this technology reinvents us.

Technological revolutions like the first computer, the walkman, the iPod and the iPhone didn’t just change the way we use and think about technology. They completely changed the way we embrace it in our daily lives. This socio-cultural change goes far beyond technology though. It makes trends and all of our surroundings become much more short-lived experiences. What we perceive as good today, might already be shitty by tomorrow. Something similar happened to “Gangnam Style”.

Gangnam Design?

So what is Gangnam Design? Recently I was looking for some inspiration on contemporary web design. I browsed some websites and was surprised that so many still elevate fancy, sometimes even crappy graphical design over user experience & accessibility. I encountered sites that…

  • had insane parallax-scrolling (different layers moving at a different pace to create the illusion of depth) at the cost of responsiveness
  • had overwritten the default back / forward behavior of browser in unreasonable ways
  • used iOS toggle switches
  • used the iconic mobile hamburger button on desktop UIs to represent the main navigation
  • had extremely slow loading animated video backgrounds
  • misused CSS3 features just to show off
  • had modal pop-ups filling the whole screen which made me want to restart my browser (thanks to @crazyxhtml)

There are tons of such design examples that make me want to go Rambo. A crazy parallax-scrolling website without any responsiveness and bad accessibility is like a Korean guy sitting on a toilet in a video clip. Sure, it is funny and pretty impressive the first time you see it, but ultimately you will barely notice it anymore and at worst you’d wish you had never seen it. All those short-lived design trends lacking any notable benefit can be summed up as Gangnam Design.

Now I'm not saying we shouldn't use new technologies to build next generation experiences for people, but we should thoroughly think through the consequences and not just use them for the sake of being cool and trendy. Instead I challenge you to ask yourself:

“Is this [ insert fancy feature here ] really important for the final design? Will it distract the user unnecessarily from the content or will it enhance the experience while using your site?”


Some examples

The Boy-Coy Website

Boy-Coy-Apps-website

Boy Coy Apps – Screenshot

The website of boy-coy a creative design studio focusing on mobile apps & game development is a good example of this. (There are tons of websites like this, they just showed up first in Search) Their website is very fancy and they did a remarkable job on using parallax-scrolling. As games use this kind of technique a lot it perfectly makes sense for a game developer studio to make use of such an effect. Nevertheless, it is questionable if it really pays off considering how many people access the web on mobile nowadays. When scrolling the website you will also see that the UX breaks completely because the browser’s back-forward functionality is overwritten while scrolling.

We are empire

we-are-empire

We are empire – April 22th

Another good example is the website of We Are Empire. They use the hamburger mobile button as their main navigation icon. While the hamburger has somehow proven to work on mobile devices, it is risky to use it on desktop, especially for representing the main navigation. The idea of responsive design is to harness the characteristics and advantages of each individual device type, to deliver the best possible experience. So why hide the main navigation when there is enough space available in the first place? I know the hamburger icon looks cool but the UX will completely break if the user doesn’t grasp the conceptual meaning of it. Concepts like this should thus be used with care.

Edit: They updated their site. No hamburger anymore on desktop version. Huraaayy!

VW Website

vw

VW animated video background

Then we have animated video backgrounds. Lots of websites make use of this technique nowadays. It might even get you an award. My advice is, don’t design for awards, design for the user instead. What’s the point of having an animated video background that loads extremely slow and drains the battery of people’s mobile device? Tons of news issues coming up as well. If you use this technique, make sure you use it reasonably.

Avoiding Gangnam Design

There are many more bad examples to discuss but you can use this as a guideline:


The more fancy & trendy stuff you add to your design, the higher the chance you are doing Gangnam Design.


Design trends, new technologies and evolving interaction principles have a very strong connotation in the time they become available. Sustainable and longer lasting design happens when we critically ask ourselves whether this new thing really enables the communication and accessibility of contents, or if it is just for the sake of a temporary “wow” at the cost of accessibility.

In my next post I want to highlight the principle of designing for simplicity and how simple design can strike & amaze us and perhaps even make us better humans.

Stay tuned & thanks for the ride! If you read and liked the article, you can follow me on twitter.

Leave a comment

I'm thrilled to read about your thoughts. You can comment & follow me on Twitter.

danilo

great article..

Vedi

If the hamburger concept works on mobile, why shouldn’t it work for desktop? Focus on content first! Lots of navigation items can be distracting if always visible.

azumbrunnen

@vedi: I’m not saying it doesn’t work on desktop, otherwise I wouldn’t use it on my own blog. I’m just saying that it’s pointless to make use of this technique if you have enough space to directly display the navigation (especially MAIN)

Ray Mitchell

Great points. I’m waiting for the world to realize that “flat design” is Gangnam design. In a few minutes, people will tire of websites that look like children’s coloring books.

azumbrunnen

haha yeah quite intrigued to see what the future brings

Joël Bez

I agree with your statement but would like you to dig a bit deeper in the subject.

Don’t you think this is exactly what harms our field because it becomes a paradox?

The designs that ‘work’ the best (for the users) are not the ones chosen when presented for web projects. The decision makers for such projects will usually go for the fanciest (gangnam design).

azumbrunnen

I know what you mean and actually I have heard this argument over and over within the advertising business… Agencies complain that their best ideas never see the light of day because the customer chose the safety version.

The problem is that customers often don’t have the same perception and understanding of design that we have and that’s why it is our job as designers to communicate, argue and sell our work. Designing great stuff means understanding the underlying problem. It’s our job to get this understanding across.

Moritz Z.

@joel Every skilled designer knows, that the hardest part in good design is not building it, but teaching your customer what’s good about it.

Sammy

The design lesson is spot on, but the analogy with PSY lacks something – the Gangnam video is sooo awesome that it raises expectations to an unreasonable level, level that it cannot even match itself after a number of views/listens. But that doesn’t take anything away from its quality – it did what it was supposed to do and then some, because in fact, what it was supposed to do was to become a global hit and then fade away into oblivion, and that’s exactly what it did and it was the best song/video in history in this respect – it was best at acheiving its objective. Same goes for a website – what is it supposed to do – is it a long term corporate web presence framework that will endure for years and years and will be used by millions of people with a high return rate, then yes, the design should focus on usability over wow! factor… Is it a presentation website for a small make it or brake it niche design boutique with the only purpose of conveying a look into their creative abilities and portfolio which any one user will only use once to get the contact details, then it’d better have some wow factor to it and follow the #now trends, because otherwise that phone will never ring and that inbox will never be swamped with inquiries or requests… So I guess what I’m sayin’ is that IMNSHO, it is ok to use ‘Gangnam Design’ for summer-hit websites, and you’d best avoid it for century enduring symphonies :))

azumbrunnen

nice input sammy. while I agree with the summer hits I dont think you should ever sacrifice usability at the cost of fancyness. why not just make a website that still works well on mobile?

Michael Havard

Kind of following along with what Sammy was saying. I think some designs are similar to experimental music. There’s a niche market that the artist is trying to reach, there’s a statement they are trying to make, or they are attempting to push the boundary a bit and see if the experiment brings about something more timeless.

So today we have classical music that’s tried and true and timeless, but back when it was composed some of it was very experimental, some of the listeners screamed and threw things and hurled insults at the composers. It’s only with time and repeated listening that people began to appreciate the work for what it was. That’s one challenge of design; Finding that right balance in experimentation and patience.

If you don’t experiment then it’s hard to differentiate from the billion other designers/products out there. If you go too far you might get criticized out of a job. But if you find that right combination of building on proven foundations and mixing in some experimentation, you might just have created the next layer of the foundation for those who come after you.

Adrian

very nice comparison. totally agree that in order to go to the next level, experimentation is key. there are some fundamental traps that can be avoided though. excluding users because they don’t understand or can’t access your site properly is a no go.

Manu

That’s exactly what I think when I encounter parallaxes. “Nice work but what’s the use?”.
In many areas of design, it seems that more attention is given to impressing with cutting-edge techniques than to transmitting a message using basic usability requirements.
This is especially an issue in architecture where, unlike in web design, most design choices cannot be undone. How many buildings designed in the last forty years look abhorrent today whereas 200-year-old buildings are still magnificent?
This is not really an issue in web design as choices are evolvable and reversible.

Anthony

Great article, but I’m reading on Chrome (Win7) at 1920×1200 and I see a hamburger in the top left… Is this meant to be ironic? ;)

Adrian

Haha not really. In fact this is not a corporate website. If you don’t understand the conceptual understanding of the button, you will still be able to perfectly read the article in a distraction-free style.

Allan

Most of this aside I don’t see this website as being UX enduring, hamburgers are fine, if you want a more user friendly journey throw in a title next to it that says “menu” on desktop. All that aside, the hamburger in the case of this site doesn’t pull out to any kind of navigation but goes to a blog index page. Essentially this is fine but you wouldn’t expect it, this jump seems to take you completely out of the user journey. After this point there doesn’t appear to be anyway of navigating back to the page except to find the article in the blog post list, as long as you don’t have more than five articles this remains pretty easy, but beyond that point I imagine it will become much harder. was this intentional and was there any reasoning behind it?

Adrian

@allan thanks a lot for your thoughts. Actually the basic question you need to ask yourself is: is this a website or an app? Whether the answer to this question is yes or no is actually not that important.

The important thing is that accessibility remains in tact. the back and forward button keep on working.

Basically it’s exactly the same behavior as a page reload but the transition is progressively enhanced. The conceptual model of the burger is a list of things. My blog entries are a list of things. The application/website/blog remembers the scroll position within the list of blog posts which further enhances scanning of articles. I think that the transition helps to further understand how information flows on my site. Check out Readability.com for example.

Another thing to note is that the way I approached this is totally accessible. If you enter the website on an article level, the article is displayed immediately. No unneeded transition. But the transitional concept remains in tact. Try it out.

Adrian

@manu very nice comparison with architecture! totally agree.

Allan

Yeah iv had a proper look around and actually look in on my phone, its pretty solid and because the website remembers the scroll position it has a very nice seamless feel. I wasn’t really questioning the accessibility just the Ux. When i came into the site the first i came in at an article level, i’m using a 27″ mac, the jump wasn’t what i was expecting and its not apparent that the list saves your current position but even so if you have come in from an article level it doesn’t know where you came in anyway. I like the concept and i’ll be really interested to see where this goes in the future.

Adrian

Thanks man! Sure, follow me on twitter. I’ll follow back so we can keep in touch!