9

Does anyone know the name of the pattern where you add indicators that there is important content outside of the viewport?

I am trying to find some inspiration but for the love of God I can't find anything. The only example I can think of is Slack (see picture).

I need a solution that works both vertically and horizontally. The horizontal scroll is actually a carousel of columns that snap to a fixed position, it is not a continuous slide motion.

Any inspiration would help, it doesn't need to be a solution to my particular problem.

Slack example

  • how would it be for it to work "vertically and horizontally" ? are you looking for a implementation or just the pattern? (or both?) – Alejandro Veltri Jul 16 '18 at 14:42
  • There's also google hangouts chat windows, where it pops up a grey oval saying "New messages" when you scroll up but a new message has been received. – spacetyper Jul 16 '18 at 16:12
  • @AlejandroVeltri just the pattern, a metaphor that is not dependent on the direction. I assume most vertical solutions can be adapted. – Ovidiu Berdila Jul 16 '18 at 18:17
  • In the old days, we had scroll bars that gave you a sense of how much you were seeing, how much there ways, and approximately where you were. But somebody didn't like the "clutter" of these useful indicators, so now we've got a generation of users that don't know about them. – Adrian McCarthy Jul 16 '18 at 21:08
  • @AdrianMcCarthy maybe I was not clear enough. What I'm looking for is not just an indicator that there is more content, I should have stressed the IMPORTANT more. I'm talking about situations where the content that is not in the viewport needs to grab your attention. – Ovidiu Berdila Jul 17 '18 at 8:32
10

This is called a Contextual Notification.

It does not require the user to take action but informs them of something. It announces a significant event while not requiring something from the user nor triggered by their immediate actions. Its simply informative.

For more information see NNg's article and their explanation as well as the differences between that and other types of notifications and alerts.

These can be displayed vertically or horizontally around the screen where applicable.

12

Destiny won a Platinum award for UI design. This is the method they implemented to show there was something interesting offscreen:

Destiny offscreen indicator

It tracks around the screen as the camera spins, appearing on the closest edge. Just like technology likes to draw inspiration from science fiction, it makes a bit of sense for "slick UIs" to draw inspiration from video game HUDs.

2

Probably if it's really important content, it should't be outside the viewport, or at least the content that is shown on it should be always more important than the one that isn't.

In the example you provided, it's supposed that the list is ordered form top to bottom from 'more important/most likely to be selected option' to 'less important..." option.

In that case, the pattern that I can think could relate would be progressive disclosure

  • Initially, show users only a few of the most important options.
  • Offer a larger set of specialized options upon request. Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.

In case all the options are really important, it probably won't be a good idea to let the user miss it by not showing them all by default.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.