Bloomberg parallax scrolling

over 1 year ago from , Just a regular designer

I think it's worth noting the parallax scrolling of the Top News on the left side of the homepage: it's slightly faster than the rest of the page. I find it's a creative and subtle example of what parallax can do for the UX!

http://www.bloomberg.com/

29 comments

  • Numecca .Numecca ., over 1 year ago

    .

    0 points
  • Jesus GallentJesus Gallent, over 1 year ago

    Good idea!

    0 points
  • Jonathan ShariatJonathan Shariat, over 1 year ago

    If you scroll slow enough it allows you to see information in both columns. You can read the left then the right, then back again.

    That being said, if you just want to scroll down at normal speed, its very distracting/disruptive.

    0 points
  • Dan CortesDan Cortes, over 1 year ago

    Is it parallax scrolling if there's no parallax effect? Serious question, I'm not sure anymore. Everyone calls all non-standard scrolling effects parallax.

    0 points
    • Joe TurnerJoe Turner, over 1 year ago

      "The apparent displacement of an observed object due to a change in the position of the observer.." Still counts for me!

      0 points
      • Dan CortesDan Cortes, over 1 year ago

        Given that when you're looking at a 2d screen, there's no change in the position of the observer, no. Traditionally, as in before everyone took it to mean non-standard scrolling, parallax scrolling was the simulation of depth via animating separate layers of a computer at different speeds.

        Unless you're suggesting that Bloomberg's designers want visitors to perceive the 'Top News' section as being closer to the viewer than the rest of the site, then no, that's not parallax scrolling.

        0 points
        • Rick LanceeRick Lancee, over 1 year ago (edited over 1 year ago )

          The window is the observer; the side bar is displacing as the window moves, so it fits the description.

          0 points
          • Dan CortesDan Cortes, over 1 year ago (edited over 1 year ago )

            The Top News section is just moving faster on the same plane and the user is the observer. Kinda like how a bird's eye view of two cars going at different speeds wouldn't be parallax either.

            0 points
  • Tristan HarwardTristan Harward, over 1 year ago

    I find this works quite well for a couple reasons.

    First, it's appropriate for the brand and the type of content. It ends up looking like a news ticker, analogous to the types in NYC and Times Square that are all scrolling by at different speeds, based on how important they are or how quickly you need to consume them.

    Second, it actually calls attention to sidebar in a subtle but clear way, which makes a pane of content (good content—not ads or useless fluff) more discoverable and useful because it's moving at a slightly unexpected pace. It could be distracting when trying to read the content in the center, but it turns out it's not—when reading content, I'm generally not scrolling. All is well.

    Overall, highly creative and unique. An excellent UX device. I'll say, don't copy this exactly necessarily, but think of the process they must have used: what analogies could you take from your industry that could be subtly integrated into the UX to call attention to content and context effectively, and make users nostalgic for older versions of UIs in your space? That's an opportunity for some honest delight.

    0 points
  • Nicholas Mandelbaum, over 1 year ago

    we designers are biaised anyways, I'd like to see reactions from non-tech, non-designers…why not their target audience actually! Thanks for your remarks. It's not a clear win for sure. Worth exploring? Definitely.

    0 points
  • Todd SielingTodd Sieling, over 1 year ago

    I found it distracting. It was hard to focus on either the sidebar or the body when they scrolled out of sync. But I wouldn't rule it out as something worth exploring a bit more.

    0 points
  • Charlie PrattCharlie Pratt, over 1 year ago

    This is a cool use of parallax scrolling. The result for me, however, was dizziness.

    0 points
  • Charlie SneathCharlie Sneath, over 1 year ago

    I love Bloomberg.

    I think it's important to remember that Bloomberg's audience is used to information overload; many financial analysts are glued to their Bloomberg Terminal all day:

    0 points
    • Dave LucianoDave Luciano, over 1 year ago

      I've heard of the terminals before--but have never actually seen them. Are they actually run on Bloomberg hardware? I see "Bloomberg" labels on the monitor and computer to the right. I always assumed that it was just software you could run on any of your own computers.

      0 points
  • Brendan McDonaldBrendan McDonald, over 1 year ago (edited over 1 year ago )

    I found this dizzying. News sites in general don't have very strong hierarchy; if you compare the front page of a newspaper in print to the same publication's presence online you'd find that the online version always crams more in--to the detriment of the user experience, IMO. Front pages and magazine covers are pretty focused experiences; news website are not.

    I think the parallax effect, while pretty and smooth, calls quite a bit of attention to itself and keeps me from consuming the main block of content--which is generally considered to be the most important content. Any time you break a pattern, you tell users something is special. Since only a slim part of the page gets the parallax treatment, that content becomes elevated in hierarchy. Since this content is summary content, the pattern is misapplied here. I'm not sure what advantages this approach offers over more common patterns, but the downsides seem very obvious indeed.

    There may be something worth exploring in this scrolling pattern, but I certainly hope it is not implemented elsewhere as it is on this site.

    Edit: for clarity

    0 points
    • Jeremy Miller, over 1 year ago

      I think the UI would benefit from reversing the parallax direction; i.e. have the sidebar be the "far" point of reference and the main content the "near" point. I totally get why you find it dizzying - the implication with their implementation is that the sidebar is closer to the foreground than the main content.

      0 points
    • Andrea PeratoAndrea Perato, over 1 year ago

      That is a good point of view, I didn't actually realize how much attention I was giving to the column, even tho It should be a side section. "Any time you break a pattern, you tell users something is special." is a good quote :) I think it would benefit if the color of the titles wasn't purple. How else could the UX improve? Anyway I reckon it would take really just a little time to get used to it and put focus on the rest of the page.

      0 points
    • Miguel SolorioMiguel Solorio, over 1 year ago

      I agree that the scrolling sidebar is distracting. I wasn't able to read anything because my eyes kept bouncing back to the sidebar.

      0 points
  • Khaled Islam BouyaKhaled Islam Bouya, over 1 year ago

    It's a great way to balance between the side bar and the main content. But isn't that scrolling too fast for the user to perceive anything?

    0 points
  • Ollie BarkerOllie Barker, over 1 year ago

    Definitely well done. Great if you don't know if two columns will have equal height.

    0 points
  • Duncan RussellDuncan Russell, over 1 year ago

    This was introduced with their site redesign a wee while back. It's an excellent way to avoid a sidebar of shame without worrying about getting the content to balance perfectly across each column.

    0 points
  • Andrea PeratoAndrea Perato, over 1 year ago

    Very functional and smooth, this is a great use of an inflated technique..

    Thanks for sharing

    0 points
    • Joe BlauJoe Blau, over 1 year ago

      What OS/Browser are you using? It's stuttering and choppy on my rMBP / Safari 8.

      0 points
      • Jeremy Miller, over 1 year ago

        very smooth on 2015 rMBP/Chrome 45.0.2454.93

        0 points
      • Calum SmithCalum Smith, over 1 year ago

        I've got the same in Safari on a 2015 rMBP, but Chrome handles it fine. Safari's always a bit odd with parallax effects, because of the way it handles scrolling—it'll keep moving the page downward even when it's not rendering, meaning whenever it doesn't necessarily recalculate the position every time the image moves. Makes for choppiness, but I'm not sure there's much to be done about it.

        0 points
      • Andrea PeratoAndrea Perato, over 1 year ago

        I was on chrome but also very smooth on safari now that I tried.. MBB retina 13

        0 points
      • Braden HammBraden Hamm, over 1 year ago

        Great on rMBP with Chrome.

        0 points
  • Özgür ÖzerÖzgür Özer, over 1 year ago

    Yes it's very creative to use limited areas. I'll use this idea for my future projects.

    0 points