This article takes a critical, research-based look on what design trends are and a quartet of arising trends that will influence web-based interface design in 2017 (chats, personalization, small steps & big leaps and the Grid).
So you like trends?
Dear designer, I wonder what was on your letter to Santa. I know, as surely as Santa rewards nice kids around Christmas, designers expect loads of soft promises about future design trends. As the story with Santa, you know that’s just mostly b******it. And why is that?
I’ve recently been watching a trending LinkedIn thread around seven 2017 trends. Almost everyone loathes them, if not only find them boring. The thing is, most of the design trends are so well known and annually celebrated that they are nearly meaningless. 2012, 2014, 2016 – same, same. So why the heck I’m posting about it? Don’t shoot me before you’ve given me the chance to deliver a message that attempts add a new flavor into the mix.
What are web design trends alike?
As you well know, trends are just a part of the hype talk. They sound nice in presentations, but without anybody using the concrete design patterns associated with a abstract trends, the trends remain, well, just nothingness. Nada.
With a small team of SC5 designers, we plunged into design research this autumn to uncover the nature of design trend expression. We looked at a score of popular websites across domains (BBC, Spotify, Amazon and the like, see the deck below).
We found that there are indeed trends that have become prominently expressed over the years, such as increasing reliance on visual storytelling or card based design. But we also found that any individual pattern (in contrast to trends) was rarely repeated across multiple designs.
However, our main conclusion was that the number of commonly used UI design patterns is so big that any human based methodology of dissecting and objectively assessing their popularity. Stanford based startup Apropose did this type of systematic trend foresight analysis algorithmically, but they’ve pivoted their offering to a new direction of late. So, a real evidence-based foundation for calling out trends is at least hidden from the public, even though this investigation could in theory be done by machines.
Are trends linear or cyclical?
The question that most poked my nerve as a result of the trend study was the true nature of these trends. While we tread upon web design, are the lives of design trends linear or cyclic?
Take an analogy from fashion design. It is claimed, that fashion trends come back every 20 to 40 years. Web has hardly been around for more than 20 years, but it seems that it has some cyclic tendencies as well.
I’ve got two examples to backup my case. First is the card-based design. This is something people did in early 2000’s under the name of “custom windows” or other small containers embedded often in “portals” which would stack up to fill the screenful. Cards thus have a clear precedent!
The second is the hero image, which in its present form seems to go back to around 2009. It relates to a bigger trend of visual storytelling or “striking visuals” as some bold individuals call them. Now I ask, how many of you remembers the heart stopping Flash sites of early 2000’s? I rest my case as I know some trends have no technologically enabling precedent, which means that we are now seeing them for the first time. But not necessarily the last time.
The moment you’ve all been waiting for – Four waves of trends
Okay, you’ve been nice at least on some occasions in 2016 so here’s your treat. I present to you, the four waves of web design trends that will touch water the shores in 2017:
- Hopefully dies out wave
- Going nowhere wave
- Cool wave
- Hot before it gets cool wave
I’ve picked some example trends riding each wave. I’ll have a few words about each, even though you kinda know these things already, don’t you.
1. Hopefully dies out wave
Legacy technologies and design solutions are a pain. Now that we’re quite through with IE 6/7/8/9 support, there are several evil web design patterns that folks still cling on to. New York Times still has a mobile website, the 2016 has been dreadful for the amount of “SUBSCRIBE TO MY EMAIL LIST OR LEAVE MY WEBZITE” model screen takeover and some even respectable pages paginate their content. I really hope we’d get some relief from these UX traps the next year.
2. Going nowhere wave
Some trends never leave us. Such as the layout designs that consider alternative device viewport sizes, display pixel densities and the swiping finger. And they will stick around. At least I don’t see any reason to banish them, and I personally do favor long scroll over pagination any day – even if this means more display ads embedded on the page.
3. Cool wave
There are trends that are just getting conspicuous in the mainstream. Increasing visual content in large images, video thumbnails, autoplay video and animation is clearly one of them. Making desktop look like mobile is another. I personally like material design, for which reason I decided to say it’s cool. Huh, there you have it!
4. Hot before it gets cool wave
Finally the stuff that is inevitable happening and we designers need to deal with using patterns that haven’t yet matured. Conversational interaction is surfacing in several channels both in text and spoken language. Most large companies have already introduced a web-based customer service chat as an alternative for emails or phone calls. The design are pretty bad – that’s why I recently wrote a guide to avoid the most obvious pitfalls. This change is driven by both business needs and technology. The latter is mostly related to machine learning, that is enabling both artificial intelligence powered chats as well large scale personalization of services.
Machine learning also relates to my trend self-labelled trend called “small steps, big leaps.” It refers to automation inside intelligent applications in attempts to leapfrog the user from the first steps of long, repetitive interaction pattern directly to its end point. For example, import a big pile of images to a canvas and arrange them meaningfully to rows and columns. Computer can probably learn your small steps, but how will it help you to make the big leap?
And finally, the Grid, a new CSS based layout definition markup. The sole example of a new web technology that will likely start to show in more experimental layout models, as soon as it gets some mainstream browser support in early 2017. Demos look very promising.
I can’t wait until 2017!
Text: Lassi A. Liikkanen, Data-Driven Design Specialist at SC5, @lassial
Visuals: Sami Rouhiainen, SC5