A Bad UI Pattern | Hacker News Reader

A Bad UI Pattern

kapilkale.com

123 pointskapilkale55 comments

LinkedIn's shy footer is a drop in the bucket of troubles for their dev staff. Things are so horribly broken. For instance, I have a notification that will never go away: http://i.imgur.com/cgJbc.png

Their UI is noisy, broken, difficult to navigate, and seems like it was designed entirely by MBAs who know nothing about their computers, let alone design.

They also had a massive javascript variable coercion bug for a while. I got 10 or so connection requests, all with the text "undefined."

They certainly are the market leaders, but engineering skill is not exactly through the roof...

Not to mention the whole password leak fiasco, and the issue with their iOS app grabbing secure personal data from the users phone.

I have also closed my account twice and I still receive emails from them. Doesn't feel like the engineering is any better on the backend, either :|

LinkedIn is the new Old Myspace.

Yay, more baseless attacks on MBAs!

Just wanted to comment that at Vimeo we had this same problem, but approached it in a slightly different way.

When you first scroll down on the logged in homepage (feed) you get to the footer. It is only after you click "Load more videos" that we begin infinite scrolling.

I think this makes it less intrusive since the user is initiating that they want to see more (rather than clicking on a link in the footer for example).

See: http://cl.ly/image/1d3L3H3c0P2q

On top of that we use html5 push state to make sure that the current url is updated as you scroll up and down the page with infinite scroll.

I'm not saying this solution is perfect, but it has seemed to work fine for us.

There's a trivial technical solution to the auto infinite scroll + page footer problem. Just reveal the footer fixed to the bottom of the viewport when the user scrolls. See Forrst's posts feed: http://forrst.com/posts

It's a bit on the noisy side, but resolves usability issues. The other simple solution is Vimeo's approach (only load more content on request, eg a 'more' button), but for most content feeds that's an unnecessary demand for user attention on the UI instead of the content given the other design options available.

Infinite scroll has more usability issues than the hidden footer, many not solved as easily. Quick partial list:

- the scrollbar loses its utility as a progress bar.

- return the user to their scroll position if they followed a link from it before hitting the browser Back button

- finding the appropriate moments to preload additional results so the user isn't waiting for content in a way that doesn't send the scrollbar into unexpected calisthenics

I don't like the solution on the page you linked. Try using it in Firefox with "zoom text only" enabled and do CTRL++ several times. The footer occupies half of the screen right now. Luckily there's Firebug / Aardvark to get rid of it.

Please don't ever do fixed headers or footers. They drive me crazy. It's like being back in the web of the 90's where frames were all the rage.

With the exception of true, complete web "apps", web pages should be documents that I can scroll without hassle and not have content possibly obscured by a bad implementation.

> On top of that we use html5 push state to make sure that the current url is updated as you scroll up and down the page with infinite scroll.

I have no response to this other than a genuine thank you from the bottom of my heart.

This is hardly the worst UI pattern in existence, especially when you consider that even a poorly implemented autoscroll is an order of magnitude improvement over the UX experience it replaces.

I used to be a big proponent of infinite scrolling, but it breaks down the second I want to send someone a link, or for that matter resume later on where I left off. It also tends to break the "back" functionality, good auto-scrollers will somehow save where you are at but the browser still ends up loading all previously scrolled through content and there is a delay until the scroll bar jumps down to where the user last left off.

It also does not allow me to easily link to a results page. Scenarios like "check out these mid-range priced items here" where I linked to page 4 of 8.

Now having pagination be AJAX based so the entire page doesn't reload unnecessarily, that I am all for!

AJAX pagination + history API preserves the best of both worlds. Too bad most companies seem too lazy to bother.

> even a poorly implemented autoscroll is an order of magnitude improvement over the UX experience it replaces.

I completely disagree. The best possible implementation of infinite scroll is better than pagination, but most infinite scroll implementations are worse to me than pagination.

First of all, the main problem I have with multi-page web sites is not that I have to click a "next" button. That's such a minor inconvenience that it doesn't even register. The main annoyance with arbitrary pagination is that you can't easily search the page. Infinite scroll helps with that, but simply having a single page per chunk of related data (i.e. one page for a blog post) works better.

Secondly, with pagination, or with an ordinary non-infinite single page layout, I can close my browser tab and reopen it, restart my computer, reload the page, whatever, and when I come back, it will be scrolled right there in the same place. I have never seen an infinite scroll implementation that could do that.

Finally, bad implementations of infinite scroll just let the page grow and grow, consuming resources without end. Especially on sites that have a lot of images, this creates a practical limit to how far you can scroll before the site becomes unusable. Even if the site offers an multi-page alternative layout, you then have to find your place again at that time.

Exactly. And I'm pretty sure I've never used an infinite scroll site that didn't have a big, hairy pause that locks up the scroll while additional content loads.

They often break "page down" as well.

Anyone who's used LocalStorage want to comment on whether it could solve this problem by saving the scroll position? It seems doable.

I've used history.replaceState API add a position indicator on long infinite scroll pages into the page hash so you get

  http://somesite/foo#scroll=20121104120000

It has some rough edges, multiple jerky transitions on uncached load, for some reason replaceState is an expensive operation on Chrome, but it was a better experience than the alternative for that page (pagination or forgetful autoscroll)

Agreed. Infinite scrolling is a good replacement for pagination which is otherwise arbitrary.

Page 3 of my Facebook feed would always have different content, and no one would ever link to it so infiniscrolling makes sense.

If I'm sharing an excerpt from an eBook however, page numbers make more sense than an arbitrary % scrolled.

I dunno, I find the iOS keyboard to be higher in my list of annoyances. While typing, there's only one possible word that can be the autocomplete e term? And I have to look up, stop typing, and hit that tiny "x" if I want to override it? (I've overridden the autocomplete for "it's" and its so many times that it's apparently given up trying to autocorrect for that)

And who thought that shaking the device to Undo a simple typo (which the requires you to stop convulsing so that you can press OK or Cancel) was at all natural? I've yet to meet someone who intuitively figured out that feature. I had my iPad for a year before I realized it was my accidental sudden movement while typing that was triggering the Undo.

In terms of total annoyance accumulated in day to day use, I'd say the iOS keyboard is by far the dumbest UI pattern

I'm using an iPhone for about a week now after selling my S3 and waiting for my Nexus 4 to come. Even now I still haven't internalized this behavior. It feels very unnatural and taxing to use.

>I've yet to meet someone who intuitively figured out that feature.

At the risk of being called a Philistine, I think there are a lot of things about the iOS UI that are not made obvious or convenient, even to dudes used to using a lot of tech and nothing is done to teach the user. A rollout of phones from work meant that a tech-savvy friend and myself recently got iPhones around the same time, we trade tales of hidden UI interactions all the time. I maintain that this phone is the mythical device that can fulfill my every last wish of tech, but I just have to find the right number of fingers to hold on the screen as I flip the vibrate switch back and forth to activate the mode that makes it do what I want.

Sorry, but this really isn't relevant to the article. "A bad UI pattern" is not an invitation to rant about your unrelated UI pet peeves...

Well the OP was titled "The Worst UI Pattern in Existence". I offered a current UI that is worse to show how absurd the OP is. Seems plenty relevant

I HATE infinite scrolling, especially when some menu items are only available in the footer. Either duplicate the links up top, statically position the footer, or get rid of infinite scrolling entirely. Designers: Never ever put anything mildly useful under infinitely scrolling content.

You know, i never actually noticed that issue on Facebook. It has such a clusterfuck of an interface that that is the last thing I pay attention to when i'm on Facebook. But i very much agree with the notion that infinite scrolling is a poorly implemented feature on almost all sites which use it. It's almost like it replaced pagination and forgot about the fact that you can't go to a page anymore.

I don't understand why people building these infinite-scroll pages don't just make the footer float at the bottom of the screen. That addresses this problem and lets you keep infinite scrolling.

They don't want to lose the vertical space?

They already lost it when they put critical UX in a footer.

Just hide the footer until a desired amount of scrolling happens.

Perhaps it could be argued that it puts the term and conditions out of reach.

Wrong.

Floating footers/headers are VERY ANNOYING for another reason: when you press Space or PgDown to scroll down, browsers scrolls by 1 screen, scrolling past the content that was hidden under the footer. So you then have to scroll up by a few lines to see it.

In other words, to scroll through a page: Space Up Up Up, Space Up Up Up, Space Up Up Up.

Instead of: Space, Space, Space

IE and Chrome scroll by a little less than a full screen so you get some overlap, as long as you keep your fixed footer very small, like one or half a line of content text, you should still be OK.

When I went to Facebook's HQ for a hackathon, they told me the solution they use for this problem is to smash the escape key. It works for Facebook to reach the footer.

This is pretty common, but yes, it is annoying. Try going to the "About" page on Quora while logged in without accidentally following random users or topics: http://www.quora.com/

A fixed footer could solve this issue.

I never understood why there are so many sites using infinite scroll bars. I don't find it useful to navigate. When I want to find something in the feed after a few days, I need to scroll like crazy.

At least, pages offered some time frame where one would now around which page to look. Maybe offering a page system using arrows would allow us to easily move from a page to another, reducing the negative aspects of the page, or giving the choice to the users whether they want infinite scrolling. Nevertheless, it is useful for very dense feed where things go crazy and a thousand pages would be added in a week.

I'm a big fan of the dropbox.com website. They have a footer full of links on the homepage, which is basically a minimalist site map that helps them avoid having a navigational header on the landing page.

Once you login, though, the footer basically goes away and is replaced with a small left-side, fixed "footer" that really contains non-task related links in a drop-up menu.

This seems like a very clean solution to the problems outlined in the article.

I noticed this on LinkedIn's website while I was interviewing with them and looking for the contact link. I wasn't sure if it was appropriate to point out such a flaw during the interview, so I never said anything. My internet connection was sufficiently fast that I couldn't ever chase down the footer so I just gave up and emailed my recruiter asking for the information I needed.

I most often encounter this when looking for an "advertise" link. If I'm looking for TOS or something I can deal with three scrolls because chances are I'm going to look for it once, but I think facebook having their facebook ads section as a part of this is extremely annoying (if i dont remember the url).

How about when the bottom is reached the footer becomes fixed with an X over to the right to close it? That way you never need to chase it and if you want to scroll without it you can just close it. Or rather than requiring a click it can become unfixed after a number of seconds?

There is one link in facebook.com footer that I need to access occasionally (developers). But not so regularly as to bookmark it. So when I do need it, I do a middle-click scroll, move the mouse to the bottom of page and try to click on that link. It works after 2-3 clicks.

Yes, abysmal.

Tumblr is a good example of a website that has solved this problem. In the Dashboard, they have a footer a lot like the footer #2 in the Facebook example. It also makes use of the jump to top jquery plugin that makes using infinite scroll a breeze.

http://imgur.com/ is guilty of this

Is there any site designed from the start to autoscroll that has a footer?

It seems like these sites implemented autoscroll after existing for years and left the footer as a vestigial organ that no longer serves any purpose.

The problem is that they do still serve a purpose.

Bad work, whoever changed the title of this submission. Don't keep it up.

I recently came up with a solution for this problem on my site. When you scroll down a few pages, the footer appears in a fixed position.

See: http://fandalism.com

you are talking about bad ui pattern?

why no one talks about the new youtube????

Infinite scrolling in itself is considered by some to be a terrible UI pattern.

I understand the 'need' due to the tiny screen size of most smartphones but why oh why force it down the throat of desktop users?

With infinite scrolling I'm losing one important ability: I can't just check where the scrollbar is and "come back" later to that place. It's hard to explain but it's something I can do very easily. With infinite scrolling I'm screwed.

Couldn't this be solved by serving, right from the start, a page that has a gigantic height (e.g. 5 000 pixels tall or 10 000 pixels or any unit you find suitable) and then if you scroll down "too fast" you see that the stuff is "loading..." ?

This wouldn't be "infinite" but I sure wouldn't be as confused.

Indeed infinite scroll is annoying in the presence of footer, or in the case of huge pics to be downloaded, or when doing scroll bookmarking.

Another bad UI pattern at this blogging site is the lack of a home page link. It pushed me to struggle on my tablet just to see who the guy is.

I've seen people talk about infinite scroll usually as an alternative to pagination. Outside of infinite scroll and pagination, are there any better UI patterns for the desktop web?

Main problem I see with infinite scrolling is that it is simply impossible to scroll by dragging scrollbar, as once you get near the end of page it shrinks and jumps around. Combined with arrow keys repurposed for something else than scrolling (G+) and PageUp/PageDown scrolling by slightly more than viewport (because of fixed elements on top/bottom) it makes some sites highly unusable without scroll wheel (which reasonable laptops does not have :)).

I agree about the importance of ability to come back and immediately navigate to the same scroll position. Especially since most browsers have a built in capability to do this, which I have learned to rely on.

Most techniques of dynamically loading content or messing with the scrolling seem to break this, the worst being badly implemented "address bar hiding scripts" for mobile devices. You return to the page using the back button and the browser scrolls you to your previous position on the page. Then that script kicks in and scrolls back to the top.

I hate it on smartphones too - it has the exact same issues on them as it does on the desktop. Scroll down a few screens on Facebook, tap a link, read it, hit the back button - welcome to the top of the feed! (This isn't an issue if your phone has enough RAM to keep the FB app open at the same time as your browser, but sadly low-end Android phones barely have enough RAM to hold one app)

Reply on news.ycombinator.com