9 web design trends for 2020

Written By madmin
Added on 2019/07/22
Comments0

Now, let’s dive into the 9 web design trends we’ll see in 2020:

1. Designing truth

It’s no secret that we’ve entered what many are calling the “post-truth” era, with myriad instances of deepfakes, misinformation campaigns, and outright lies popping up, gaining viral traction, and ultimately shaping the decision-making of millions — all too often driven by prominent individuals who will here go unnamed.

The major social media platforms have each come out with policies — and in some cases, designs — to account for this new flourishing of untruths.

Facebook has decided that it simply won’t intervene with political untruths. To support its stance, the platform has cited everything from the First Amendment to the FCC’s similar stance on political advertising on the TV. Conveniently forgetting that it is neither a) the government (the one that’s actually restricted from censorship by freedom of speech) nor b) the increasingly anachronistic technology that is television.

Facebook’s been (apparently) trying to combat fake news on its platform since 2015, doing so in classic Silicon Valley iterative design style. It first tried to encourage individual users to flag content as “false news” — an odd half-borrowing from President Trump — then by marking some stories as “disputed” — which, according to what it called “academic” research, backfired by reinforcing some users’ belief in the content — then, most recently overlaying the content with a straightforward notice reading:

False Information

Checked by independent fact-checkers.

independent fact checkers

The overlay also provides a prominent CTA to view the fact-checkers’s findings — as well as a secondary button to go ahead and view the false content.

At present, there’s still no plan to flag paid political posts as false.

One interesting thing to note is that Facebook started trying to remedy sharing of false information only after it was shared — the original poster was given no alerts to the fact that the content they wanted to share was disputed. They’ve amended this in subsequent designs to be more proactive in alerting the original sharer — but it’s still intriguing that the notifications focus on the fact that there’s “additional reporting” on the content.

This strategy focuses on encouraging what we call “curiosity clicks.” This encourages engagement with the information, but that’s also its flaw: you have to care enough that there’s “additional reporting” to click through. As a content designer, I have to wonder if it wouldn’t be more effective to name the fact checkers and pull a significant quote on the content. Snopes, for example, does a great job of highlighting what the specific claim is and giving it a straightforward “true” or “false” (with a range of fuzziness between) rating.

snopes fact checker

Twitter has taken a rather more straightforward (and cheerworthy) stance of simply disallowing political advertising on its platform. Though as many people have commented, it’s just not that easy. All kinds of misinformation “earns” its way into our feeds daily, a reality that Twitter seems to have done little to nothing to address.

In the end, what really matters here is not so much what the major platforms are doing to bring clarity and trustworthiness to their platforms, but what you might do to bring more of that into your own work.

Here are a few thoughts on doing that:

Label more prominently and clearly

In a 2016 report on a Stanford study of students’ ability to determine the veracity of information found online, the Wall Street Journal stated:

Some 82% of middle-schoolers couldn’t distinguish between an ad labeled “sponsored content” and a real news story on a website, according to a Stanford University study of 7,804 students from middle school through college.

Much of the “optimization” of ad formats like “sponsored content” has gone into … well, hiding the fact that they’re ads. Just look at the name: “sponsored content.” On a content-driven site, that simply implies that the content was “sponsored” by someone, much as race car drivers are sponsored by various corporations.

The reality, of course, is that these are ads, even if they’re not as direct as banners. And we should label them as such.

And it’s not just our language that could be clearer. Our design work could use some improvements too. Just look at the screenshot above (taken on Dec 3, 2019). Every single story in that shot is a piece of sponsored content, hosted on a different website, but seamlessly integrated into Slate’s own homepage.

The title font for the native news articles and the sponsored stories is the same. But note what’s quite different: the font size and location of the “author.” In the native stories, the author’s name is set reasonably large, above the title. You definitely still see the title first, but the author name cries out for your attention in these real stories.

The sponsored posts, on the other hand? The “author” — or brand, actually — is set much smaller. The fact that the “author” is listed as a brand, rather than as an individual writing for the brand, is telling as well: While we have someone to follow up with (or blame or praise) for real reporting, the sponsored stories are attributed to faceless brands.

Perhaps even more significantly: note that the real articles are practically emblazoned with a category title (e.g., News & Politics). The sponsored stories? Oddly lacking that prominent header.

Make sources more obvious

In the world of journalism, you’ll often hear the mantra:

Consider the source.

Which is not something most students do these days, according to the study:

Many students judged the credibility of newsy tweets based on how much detail they contained or whether a large photo was attached, rather than on the source.

And while that maxim is stressed to young and aspiring journos as a core practice, it could also help us designers help the rest of the world out. What if, for example, every organization’s Twitter profile included a link to their Wikipedia page, or a Google search of their name? What if publications featured an about page that clarified their political stance, history, management, and funding sources? One better: what if they linked to independent commentators on the publication?

These, of course, are just ideas — if nothing else, prompts to consider more deeply how we might encourage readers to act more like journalists and consider their sources in a more objective manner.

But we can also consider carefully the criteria young students are using to evaluate credibility, and encourage our social media teams to make updates information-dense, and pair them with large, engaging graphics.

Finally, and to bring this closer to home for web designers crafting publishing experiences (that is, any designer who works on a site with a blog, case studies, etc.): consider making your authors and their credentials much more obvious in your content-driven experiences. This can not only boost your site’s credibility and give readers a point of contact, but also arm readers to better evaluate your authors’ content. A thoughtfully curated list of contributors then becomes a marketing asset, akin to the list of blurbs on every mass-market book cover.

Use “related content” to provide context and contrast

Related content — a familiar content pattern often appearing in the middle or at the end of blog posts and news articles, often under a heading like “You might also like…” — gives designers a powerful tool for adding easily accessible nuance to a reader’s understanding of a topic.

How? By ensuring two things:

  1. That opinion pieces are contextualized by the stories they comment on, or by contrasting opinions
  2. That news stories get additional color through the opinion pieces through the pieces that comment on them

Using related content to provide extra context on fact- and opinion-based pieces helps work against our age’s increasingly obvious preference for “bite-sized” information. Bite-sized data helps us quickly get a basic understanding of issues in a world fraught with issues — but it also means that we often lack a nuanced understanding of said issues.

When we rely solely on our favorite “influencers’” hot-takes on Twitter, we start to look a lot like a pitchfork-and-torch wielding mob, all too ready to take one charismatic voice for the font of truth. But the more that content creators and designers can point readers to extra information and contrasting opinions, the more we can encourage nuanced understandings that rely more on information and reason than on emotion.

To sum up:

  • Label your content types clearly to help readers create a mental model of your content and better distinguish between organic and promotional materials
  • Contextualize and promote your sources so readers know where your content comes from and can better evaluate its credibility
  • Use related content to add context and promote nuanced understandings of topics

All the above said, it’s worth remembering that misinformation isn’t a fixed target, a fact captured beautifully by Tom Rosenstiel, director of the American Press Institute and senior fellow at the Brookings Institution:

Whatever changes platform companies make, and whatever innovations fact checkers and other journalists put in place, those who want to deceive will adapt to them. Misinformation is not like a plumbing problem you fix. It is a social condition, like crime, that you must constantly monitor and adjust to. Since as far back as the era of radio and before, as Winston Churchill said, ‘A lie can go around the world before the truth gets its pants on.’

Which is to say: if you want to play a role in fighting misinformation in 2020, prepare for the long haul, and be ready to update your strategies and tactics as the information landscape continues to change.

2. Accessibility is (finally) key


Before I dive in here, I have to offer a confession on behalf of Webflow: We did not build Webflow with accessibility in mind. But we’ve recently hired two accessibility specialists and formed a team around the effort to make accessibility a first-class citizen in Webflow. Stay tuned for more on that.

Web accessibility — the practice of ensuring that websites and web applications are usable by everyone, regardless of their abilities — has long been a vital part of the web design and development process in mature organizations. Particularly in governmental and publicly funded institutions, where Americans with Disabilities Act (ADA) compliance has long been a legal requirement.

But with high-profile cases like the Domino’s lawsuit and others gaining broad notice, the writing is on the wall: soon, all websites will be required to meet ADA requirements — making accessibility a compliance issue, not just a “nice to have.”

And while I don’t want to overplay the impact this will have on our profession — as numerous relatively minor interventions in our processes and skillsets will have significant impact on the accessibility of our products — I don’t think we can afford to underplay this fact either. Because while relatively small efforts will have significant impact, the changes required of us to make more accessible sites will affect literally every step of the design process, and the workflows of every participant in that process.

Don’t believe me? Check out Vox’s accessibility checklist, which outlines the ways every web professional, from designers to QAs to editors, can contribute to building more accessible websites and applications.

But the work of accessibility requires far more than checklists and automated checks via browser plugins. Because much of the work of accessible website design can’t be checked via software. And because web design, outside of web app development, is essentially all about publishing, accessible web design means reconsidering the ways we publish too. If we create videos for the web, we need to consider captioning, transcripts, and other non-visual equivalents we can offer. If we host podcasts, we’ll need to think about how we can make our content available to those with low or non-existent hearing. If we publish infographics and charts, we’ll need to think about how we can make the content of these mediums available to those who can’t see them.

And designers, long used to relying on visual formats and low-contrast aesthetics to do their work, will have to stretch to account for this more inclusive paradigm. We’ll have to think long and hard about the limitations of visual formats not only for the differently abled, but for those for whom visuals aren’t nearly as transparently legible as they are to designers (myself included!).

Blind spots abound in the design process, and these holes are often based on our disciplines. As a writer, I often find it difficult to account for those with a less broad vocabulary, as well as those who prefer visual formats. (Even the turn of phrase I opened this paragraph with could be seen as ableist.) Designers, similarly, tend to overlook the value and power of a single sentence, especially when paired with an equally powerful visual.

The reality is: we learned our skills in a context that assumed there was such a thing as a “normal.” That you could apply your skills to communicate to “everyone” in your preferred format because “most people” can process your preferred format just fine.

website accessibility
Disability can be permanent, temporary, or situational.

But the fact is that is much as 26% of the United States’ population experiences some form of disability, according to the Centers for Disease Control and Prevention (CDC). And as Microsoft has so eloquently communicated via their inclusive design content, 100% of the population may experience temporary or situational disabilities. And the fact is that none of us are getting any younger, and the older we get, the higher the chance we’ll experience a more or less permanent disability becomes.

There is no health; physicians say that we
At best enjoy but a neutrality.

–John Donne, “An Anatomy of the World,” 1611

The world (and its advertising) may turn around the healthy and young, but we can no longer afford to design solely for them.

3. Content gets its due in web and product design

I’ve been a content professional working on the web since 2006, and in those (almost) 14 years, one debate has defined my experience of the profession:

Does design or content come first?

This so-called debate has never failed to flummox me, for several reasons. And it’s incredibly relieving to me to see that designers are increasingly coming to understand what has always seemed obvious to me: that the “content,” or rather, the “message,” has to come before the design. Because, otherwise, there’s literally nothing to design.

On the other hand, this debate is confusing and frustrating because, in reality, it’s not even the real question. Neither content nor design come first. Because you really can’t create content or design till you have a strategy. And you can’t have a strategy until you have a goal: a purpose that the thing you want to publish should fulfill.

To clarify this, I like to point back to web design and publishing’s predecessor: print publishing. Before you can design a book, you need a book to design. And before you can write a book, you need a point: an idea or truth that you wish to convey to your audience.

It’s important to point out here that a website is not, in fact, a book. Its material expression, functionality, and distribution are vastly different than a book. But in terms of purpose, a book and a website are very much the same: they both exist to convey information to an audience. (No, I’m not talking about web apps here.*)

The core difference is that the website hopes to gather some information from its audience in exchange for the information (or functionality) it offers: typically, an email, that uniquely modern key to an individual’s identity, and to communication with that person.

But to get, you have to give. You need to offer some value, and even the teams behind the world’s most popular digital products realize that quality content makes for an incredible source of value, allowing you to draw the attention of even those your product (isn’t yet) for.

Of course, content isn’t just blog posts. (Nor is it just words, but that’s a whole other post.) Content also plays a key role in your product’s overall user experience, and increasingly, platforms are feeling the pain of getting content wrong.

Here’s an example I ran across just the other day, on LinkedIn (where I once worked, for transparency):

linkedin

Notice anything? I sure do! And I could go on and on about the flaws of this interface, but I’ll restrict myself to the single most important one:

What the heck do I do if that’s not my “correct” or “active” email address?

I’m being asked to take action on this information if necessary, but there’s no obvious way for me to do anything but “remove” my phone number! The content and the interface are completely misaligned, ensuring that — at best — LinkedIn might get an accurate, current phone number from me.

But, ironically, what this UI does best for me, the user, is to remind me that LinkedIn has my phone number (why tho?!) and, better yet, give me a chance to dissociate it from my profile. (I originally wrote “delete it from their database,” but a colleague rightly pointed out … it almost certainly doesn’t do that.)

I’m just going to guess that wasn’t their goal.

But I’m not here to complain about LinkedIn’s content. I’m here to stress the centrality of content to the overall user experience of any digital environment. Hopefully the above does the trick, but to reinforce my point, here are a few content-related highs and lows from 2019:

Nothing has made me want to cancel @Dropbox more than the condescending, passive-aggressive use of “Oops!” to mean that *I* have to change something.

“Oops” means “I fucked up”, not “You fucked up.”

Talk to your customers like adults, please.

View image on Twitter

My understanding of “good UX writing” is “call them out so hard they choke on their coffee and tweet about it”

View image on Twitter
See Olivia Dolphin’s other Tweets
Alicia Ostarello@aliciaostar

The delightful power of good UX writing. @AlaskaAir, give your writer a high-five!

View image on Twitter
See Alicia Ostarello’s other Tweets

I don’t, personally, share Alicia’s praise here.

nilay patel

@reckless

Btw, the lowest APR for Apple Card is 12.99 percent after Fed rate cut, seeing a few stories quoting a higher rate. But I just signed up and it is indeed 12.99.

View image on Twitter

nilay patel

@reckless

Hey how badly does Apple want to be your default card in Wallet? It doesn’t say “no thanks,” at this prompt, it says “Set as default later”

View image on Twitter
85 people are talking about this

Most telling, perhaps, is the increasing prominence of content strategy and UX writing in the brands of some of today’s most recognizable brands. Just look to the design publications and publicly-shared design systems of brands like Facebook, Dropbox, Google, and Shopify and you’ll see the word content — and its dedicated creators — getting their fair share of name drops.

facebook design blog
dropbox design blog

*But a content-first viewpoint still has dramatic effects on web apps: Just look at Twitter, where a single content decision — limiting character count — has done everything to define both the glory and horror of that platform.

Comments