Design & UX
Article

5 Fancy (But Useless) Web Components You Should Avoid

By Daniel Schwarz

Every time one web design trend dies out, it seems a tour bus of new trends appears on the horizon. It’s also perfectly natural to want to mimic those trends as if they were the latest, cool, new rock band whose 'look' you absolutely must copy. Deep down we all want to be rockstars, right?

But like great music, good web design shouldn’t be all about flashy tricks and visual theatrics. It must actually perform well.

Let's take a look at five trendy web components that have been hyped up way too much by hipster designers.

Carousels have been losing traction for a while now – certainly the traditional concept of a carousel anyway.

xxlmag

Today we tend to view them in the format of “homepage sliders”, which solve some of the user experience flaws that smaller, content-based carousels have. More space means bigger tap targets, and the larger overall frame means that we don’t need super-fancy transitions to steal focus.

So what exactly is wrong with carousels?

Despite the fact that we’ve adapted and improved carousels over time, the fact remains that we usually have little control of how we navigate carousels.

Sometimes we've finished reading a slide long before it's ready to move on. Other times we're still reading a slide as it's ripped away from us. And our readiness may vary day-to-day or even hour-to-hour as we tire. Unfortunately, there simply isn't one correct timing for all people every day.

Alternative Idea: Complex Grids

Scrolling has become a dominant feature of website navigation, especially on mobile where to click/tap interactions aren’t as reliable. Grids allow the user to scroll and scan through content quickly while being subjected to a mixture of text and images. Our brains tend to feel more familiar with this type of concept because we navigate our social media feeds in the same way.

A fantastic example is the Mashable website although it’s not uncommon these days to see big fashion brands like JD Sports and H&M ditching the carousels too.

Mashable Complex Grids

2. The Scrolljacker

In my view, scrolljacking is one of the more unpleasant experiences a user can be made to deal with. Make no mistake, when used to intensify a scroll-based animation of some sort it can create a beautiful user-controlled story. However, there are cases where the user doesn’t actually feel like he or she is scrolling.

World of Swiss is one of those examples, especially as the website offers a normal click-based navigation that the average user would understand.

World Of Swiss ScrollJack

For those that don’t know, 'scrolljacking' is a web design technique that overrides the default behaviour of user scrolling, causing the screen to scroll faster, slower or even sideways. It’s not a common website feature so it’s reasonable to assume that a significant percentage of users will be confused when scrolling behaviour is not as expected.

Sure, it might be a “cool effect” but it serves no actual value.

Alternative Idea: Leave Scroll the Hell Alone

Just leave it alone. Scrolling is as easy as it always has been!

3. The Immersive 3D Experience

Immersive web design is the act of manipulating the human senses and altering the mental state of the user. It’s about impressing the user in such a surreal way that they become engaged in the experience, first physically through user interactions and then mentally because of how the mesmerising experience unfolds in terms of storytelling, ambiance, 3D wonderment and animations.

Immersive web design is often used to show off expensive luxury consumer items such as clothes and cars, but it’s also very common in the film and entertainment industry too.

Here’s a perfect example of some of the downsides.

Batman Game Website

Batman: Arkham Knight offers a rather disappointing experience by screwing with the default scroll behaviour, locking the carousel to the user, using cryptic icons, mildly illegible text and obscure buttons; all for the sake of barraging the user with flashy visuals.

Immersive web design blurs the lines between components and slideshows, where it might seem more applicable to simply call it an “experience” – like an interactive story of sorts.

While this can be a beautiful (and converting) experience, implementing such high-end effects without vigorous testing can be a recipe for disaster.

Most people have years of hard-earned experience with traditional website memes, so if it doesn’t look and act like a website, then you're likely losing visitors to competitors that chose to build something more instantly recognizable.

Alternative Idea: Build the Best of Both Worlds

I would recommend something modestly immersive with a clear fall-back that relies on simple clicks and scrolls to navigate– perhaps like the World of Swiss example I showed you before.

Insurgent Immersive Example

Insurgent does it much better because the interactions are automatic to the user and the default behaviours have not been thrown out. If none of this fanciness is for you, the menu is always fixed to the top of the webpage and you can navigate in the way that you’re used to.

4. The “Hello, Click Me, Click Me! Modal

Why on earth would we want to subscribe to a newsletter after spending only seconds on a website? We haven’t seen the content yet, we don’t know if it’s valuable or not and we don’t know if we’d be willing to subscribe, like or follow in order to read more content as it’s added.

Even if the modal fades, slides, bounces, flips and rotates all at once, users are not impressed.

Alternative Idea: Mid-Scroll CTA’s

I first encountered this idea on InVision App’s blog: mid-scroll call-to-action’s. Basically, this works by having a component fixed to the top and/or bottom of the webpage, but it only appears after scrolling down.

InVision Mid-Scroll CTA

InVision App has been swapping out different types of CTA’s in these sections to test which has the better conversion rate – at the moment there is a link-based call-to-action in the bottom-right corner but a couple of weeks ago this was a subscribe form.

Scroll-based call-to-action’s are much more effective than unsolicited popup modals because the user has had time to digest the content; he or she can make an informed decision as to whether they’d like to subscribe/follow/convert and the website can swap out sub-components depending on where the user is. For example, InVision only includes share buttons on articles.

5. The Hidden Mobile Navigation

It seems that we’ve moved steadily away from dropdown boxes on mobile devices and that’s fantastic – they were too big, too invasive and hard to escape from once opened.

And so the hamburger icon came into existence. Whether you agree with its use or not, there’s no denying that it’s become quite recognisable. It’s here to stay.

But is it the best option? Off-canvas solutions are larger and less invasive, and that’s brilliant, but there’s a saying that’s always stuck with me: “out of sight, out of mind”. Also, it takes a click to open the menu before the user can even begin searching for something new, so that’s another obstacle right there.

Here’s an example of an off-canvas navigation by Panagiotis Tsamoudakis.

Off-Canvas Example

It looks amazing, but it’s actually quite inaccessible unless you have stretchy fingers and the ability to open it with your mind (when scrolled down). Also, it couldn’t be used for menu’s with a huge amount of links – I’d estimate 15 would be close to the maximum.

So what do you choose, more space or more obstacles?

Alternative Idea: Combine Off-Canvas with Contextual Menu’s

Actually, there is no right or wrong, but there is such thing as relevant and irrelevant suggestions. A contextual menu displays items according to where you are in the website, meaning that you can still implement that sleek off-canvas menu and link to things that the user might not necessarily need at-hand.

What defines something as relevant or irrelevant largely depends on how users typically search for things. Do they click? Search? Sort? Let's take a look at Facebook’s Android application.

Facebook Context Menu

In the contextual menu, there are five clickable icons. Four of these icons are very specific and users tend to click on them several times a day.

Everything else can be accessed from the final icon – the hamburger icon. It appears on the right-hand side so that we don’t have to stretch out to reach it, and the lengthy friends list actually appears in a completely different menu; the ultra-trendy off-canvas menu. Facebook has even adapted the hamburger icon’s design so you can tell the difference.

Facebook’s example tells us that while hidden-navigation looks wonderful, it can’t be used as a way of lazily linking to everything at once. In smaller websites, mobile or not, you should consider avoiding off-canvas navigation altogether.

Conclusion

Just because we can design and code all the things, it doesn’t mean that we should. Although it can be quite exciting to try out new trends, a reasonable amount of thinking, testing and debating needs to happen before you decide to implement it.

Here are three things to ask yourself before building a component:

  • Is this a necessary component?
  • What is the best way to access this component?
  • When should this component be accessed?
Daniel Schwarz
Meet the author
Daniel Schwarz is a full-time design writer and digital nomad. When he’s not writing about design and code, he’s actually doing it (sometimes) at Airwalk Studios, a creative studio of which he’s the founder. 24 years of age, originally from London.
  • Paweł Zagrobelny

    Nice article. Indeed visiting World of Swiss is a horrible experience. It’s like art for the art itself. Not useful at all.

    • http://sitepoint.com Alex Walker

      I suspect it’s been cited in web design articles – both positive and negative – more than almost any other site in the past 12 months. There has been 4-5 references to it on SitePoint alone.

      • Carl Vaillancourt

        haha, their marketing employees are going “we need to find a way to exclude those web design critics from our analytics, its screwing up our stats!”

  • http://www.andymercer.net Kelderic

    I agree with most points, but I’m not ready to give up on image carousels. There are a lot of ways to address the pain points you mention. Arrows on the left and right sides, plus dot navigation at the bottom. Adding support to swiping on mobile, and having a small semi-transparent progress bar along the top to show how long until change … all these things can be unobtrusive but also very informative to the user.

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      Navigation dots and arrows need to be relatively large so that users can tap easily, something that is rarely ever done right even on desktop. Mobile devices don’t really have the space for these elements, so there isn’t much room to make them larger, and swiping on a mobile website isn’t something that users would even attempt because it’s a). not common, and b). not obvious that a carousel is swipe-able. Most of all, that’s a lot of interactions for a component that, more often than not, doesn’t add any real value to a website. Personally, I think we’re edging towards card-based layouts because we can access the content by scrolling, which is an easier interaction to complete. Some awesome tips on carousels, Kelderic, I think on a desktop site those enhancements would definitely be the way to go, but only in special cases.

      • http://www.andymercer.net Kelderic

        To the first part, arrows being large, I typically hide them on mobile, and show on desktop, with the idea being that users are used to more stripped down interfaces on mobile. To swiping, I have only recently started experimenting with it, but I started because I noticed during user testing that it was common for users to attempt to side swipe and be frustrated when swiping didn’t work. Many mobile apps use a sideswipe pattern, so I’d say that users are increasing used to the idea.

        While I do like card layouts, I think that on mobile it tends to increase page length. While we have accepted very very tall pages as becoming more normal, I still think that compactness isn’t a bad thing as long as it’s still easy to use.

      • http://www.andymercer.net Kelderic

        Sideways swiping is going to leap forward in 2016 when Chrome and FF finally support scrolling break points btw. Chrome had it, but then disabled it to rework it.

        • https://mrdaniels.ch/warz/ Daniel Schwarz

          Very interesting what you said about scroll and and swiping. I did user testing on carousels too, and I found the complete opposite. Saying that, this was two years ago and maybe the audience type was different (older, I would suspect). I’d love to revisit carousel trends a little down the line and mention some of your observations.

          Any idea when scrolling bp’s will become more common?

          • http://www.andymercer.net Kelderic

            I replied but it said it was waiting for approval due to links (to CanIUse and Bugzilla), and now it’s not appearing at all. So I guess I’ll respond again without the links.

            Sometime this year, hopefully.

          • https://mrdaniels.ch/warz/ Daniel Schwarz

            I’ll make sure to keep a lookout on caniuse, thanks man.

  • simon codrington

    Thanks for the article Daniel. Building something that works great and provides some level of interactivity for mobiles isn’t an easy task. I think a more minimalistic approach to design / these fancy elements would benefit everyone (especially on mobile when a good portion of time these components fail)

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      It’s true. While mobile usage has indeed overlapped desktop usage, a huge statistic of that is huge social media sites like Facebook, Twitter, Instagram and so on. Smaller sites still don’t really see the light of day because there isn’t a huge design team doing lots of user research.

  • M S i N Lund

    You forgot no 1:
    “Adapting” the text and content to the screen resolution.

    Tired of just seeing a smiling face and half a row of text on your crappy old 12″ XGA-screen?

    Buy a spanking new modern 40″ UHD-screen!!

    Its having… about 20 of your old screens on your desk!
    Dude this is going to be AWESOME!

    And get rewarded with….

    An even huger and larger smiling face,
    and an even huger and larger and huger half a line of text.
    *scroll*
    *scroll*
    *scroll*
    *scroll*
    *scroll*
    *scroll*
    *scroll*
    Next sentence.

  • https://mrdaniels.ch/warz/ Daniel Schwarz

    Thanks Arun, very kind words :)

  • Layerform

    Nice article Dan! :)

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      Cheers!

  • http://atulmy.com/ Atul Yadav

    Yes, nobody ever clicks on Hamburger menu anymore. Whats hidden shall remain hidden.

  • Beyond Cynicism

    Wow – someone might have applied the same consideration to this post. Has anyone tried clicking either side of the main content? I made the mistake of clicking on the left and everything goes whizzing up and down the screen at supersonic speed. I swear I heard the sonic boom!

    Very disorientating – and rather disappointing given the subject matter of the post.

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!