Design & UX
Article

Breaking Bad Habits: Ineffective UX Patterns

By Annarita Tranfici

It isn’t always true that what becomes a hot trend is good for UX. Just because everyone is implementing a particular icon, navigation menu or pattern, it doesn’t mean that people will understand it, and that it will be a good solution for their personal project.

Often the wide adoption of a given convention is driven by a chain of copy and paste, rather than well-considered reason.

In this screencast, Annarita will focus on some ineffective UX patterns to wary of when building websites. All are still prevalent across the web but, however she will look into some considerations you may need to make when considering including these patterns into your next web project.

We’ll be looking at:

1. The Hamburger Icon – a three-bar icon used to indicate a menu
2. Image Carousels
3. Infinite Pagination

  • Zach

    So Google and Facebook just copy/pasted the “hamburger” icon onto their mobile sites? If some of the most visited sites have adopted that icon for the menu, I’m sure that it’s because they have proven users understand it. I do agree that carousels and endless scrolling are inefficient though.

    • Aurelio De Rosa

      I don’t think the video asserts this. I think the message is that many websites have used it without testing and some studies have proven this pattern to be ineffective. So, before you adopt what you might think is a convention, you’d better test it on YOUR users.

    • http://www.Izzmo.com Izzmo

      The video clearly stated that users whom are regular and recognize the way the site works will understand what the hamburger icon implies, but if they are new users to a unfamiliar site, then they may not know what it does. Without going into more data or analysis, it’s hard to see where they are coming from, since that icon does seem ubiquitous on the web.

    • Frederik Van Zande

      Another thing the hamburger icon lacks as a descent navigation option, is the point of orientation.
      It’s optimal visitors do know where they are in a website, and the active navigation item shows them that (or breadcrumbs). By only placing the hamburger icon you loose that.

      We only use the hamburger Icon with “menu” or the type of navigation written next to it if no selection is made, or the active section / page when you’re not on the homepage.

      We do use some scripts that enable short & long versions of a navigation label (semantic markup with schema.org meta tags), and some that change the floating direction when the site scales to tablet or pc screens.

  • http://dokdeleon.com/ Dok de Leon

    I get the points on carousel and infinite scrolling. I’m not so sure about the “Hamburger Icon”. I call it Menu Icon, actually – like a drop down bullet-less list. I’m pretty sure most website users are the same people who frequent google and facebook. If the problem is user recognition, the icon in question has caught on, iMO.

  • Carlos Mosqueda

    I think there are some valid points when it comes to some of this stuff. HOWEVER, I did take a look at the company the presenter works for and put in her profile. I am not sure that site is very ‘User Friendly’ and the design itself is very dated. That said, if I were to follow the advice from a presenter in which they are giving UI/UX advice, I would expect the same quality to be presented on their own company’s design or the company’s design where they are employed at.

    • Aurelio De Rosa

      What the company is? In her profile there isn’t a link to a company or something like that as she’s a freelancer (we have worked together several times in the past). So, I’m not sure of what company you’re talking about.

  • Xia

    This is very interesting but, wouldn’t it be better to have the content of the video as part of the article? I mean, it’s all static images and text, and I don’t think I would need 12 minutes to read it all…

  • seba

    In case of the hamburger icon: How does issue 1 differs from issue 2. It’s 2 times saying not everyone might understand it.

  • girl007

    I think the article covers a lot of cliches that have been repeated over and over again and I am wondering why it was even published. Hamburger icon: it took a while but most part of people who uses a mobile device have been exposed to this icon, so they learned that it has something there, it is very common and it makes people learn what it means. Carousel, you are not supposed to add a very long text, even the code of most of them do not allow a lot of content, just a headline and a paragraph of text. It is very useful when you have featured articles in the hierarchy of content. It is way much easier to visualize than scrolling the page from the top to the bottom, and leaves clear to the visitor what it is a featured content, Way much better to figure out the hierarchy than a 4×4 grid layout. Endless scroll down: depends for what you are using. If it was something people do not stand facebook or pintrest would have never achieve this level of popularity. UX expert that comes from European languages background? Really?! So what’s next? Are you going to invite a butcher to write about best practices to code in javascript? Every unreliable source! BTW this video is a crappy UX pattern for this content.

  • Aurelio De Rosa

    You’re comment is full of cliche and nonsense.

    Bruno Skvorc, the editor of the PHP channel of SitePoint has the same degree. Peter Paul Koch the current most expert mobile consultant and not only doesn’t have a computer science education. He studied Ancient History at the University of Amsterdam, specializing in the later Roman empire (5th century AD). Bruce Lawson, developer evangelist for Opera, has a similar story. If you think that a degree makes a developer you’re completely wrong.

    In regard of your points, you haven’t provided a single study or data to support what you’re saying. So I guess that you’ve just posted random sentences without having any real clue of what you’re saying. And because you like so much carousels, so you should view this website http://shouldiuseacarousel.com/ and also read http://weedygarden.net/2013/01/carousel-stats/

    UX experts talk with facts in hands, not wild guesses.

  • WebDevR

    I agree infinite scrolling is a gimmick. But for some applications with “infinite” timelines like Facebook, it can work.

    I also agree most people probably gloss over image carousels but they do allow for combining information in one space. When I visit a news home page with a carousel, I typically pause to see a few of the items, so it works for me. Additionally, marketing departments love “interactivity”, a place for BIG pictures, and things that move. So sometimes the developer doesn’t have a choice in the matter.

    Regarding the hamburger menu icon, I respectfully disagree. Some things become a “convention” not merely because of widespread usage, but because of the acceptance by users. The first time I clicked on or touched the menu icon, I immediately knew in every site or app I visited that it was likely a menu. It didn’t need to be spelled out for me. Do we have to have the PLAY and PAUSE buttons of this video spelled out for us? No. People learned that the triangle meant play and the two vertical bars meant pause. They became conventions. The menu icon isn’t going away anytime soon.

    I’ll tell you what should be avoided… stupid static headers that won’t go away like the “New Relic” header on this very site!

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.