4

I have a digital signage application in which a portion/row can show a max of 3 blocks of information at a time. The number of total blocks vary from 2 to 6, in which 90% will only contain 2 or 3. On some timed cycle the first three blocks are replaced with numbers 4-6 (if present), possibly with an animation in the future.

Is there a suggested symbol to show "more items exists standby for the update"? and the converse that you are currently viewing the (4-6 group) and it will cycle back to (1-3 group) momentarily? I originally considered ellipsis but it seems old-fashion and almost out of place.

I am already using a highlighted dots series indicator examples here for the overall page indicator so I wanted to avoid using those symbols in a different context on the same page.

Update: I ended up going with a bar/toggle type symbol that denotes the presence of additional content (denoting the presence as recommended). Since the display is not interactive and very little room exists to "preview" the additional content I have a symbol that toggles to show that >1 group exists and which group you are currently on (1 or 2). Rows with only 1 group do not have the indicator.

1
  • 1
    Can you add in an example screenshot / sketch of the interface you're working with? It's very hard to get an idea of what you're referring to without something visual to compare against. Also, requests for icons aren't really on-topic for this site see the faq but I don't think this is quite as straight-forward as an icon request. If you can enhance the question then we should be able to help you out more.
    – JonW
    May 22, 2012 at 8:34

2 Answers 2

2

Rather than using a symbol, why not let your content do the talking for you?

Like questions that deal with how to afford scrolling, this is a question of indicating the presence of additional content. Perhaps unsurprisingly, you can use similar solutions. Affording additional content can be done by either partially revealing it, or by displaying a macroscopic overview of the content itself and the user's relative position within it.

An example of the first would be a faded-out or smaller version of the 4-6 content just entering into the content area of items 1-3 - this indicates that there is more content which the user cannot see fully yet, inviting them to reveal it or wait for it to be revealed to them. For example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

An example of the second might be a smaller set of pictures or text labels representing the full set of options, displayed below the larger versions. An example:

mockup

download bmml source

The important thing to remember is that to afford more content you need to represent it somehow, even if that method is iconic rather than representative (as in the highlighted dots indicator you mention). If you're struggling to find a symbolic representation, consider using the content itself as an affordance.


As an aside, remember accessibility guidelines for automatically animating content - provide controls which allow the user to pause and step through the animation at their leisure. Not all users will appreciate automatic scrolling, and you want to be able to make sure that users without javascript enabled (assuming a js solution) can navigate your content.

1

If you have enough space, you could add navigation buttons within context. These navigation arrows would only be visible when there are more than 3 information elements. To let the user know which elements they are currently viewing you can add text in the group name as Elements 1-3 of 6. Combining this with an enabled arrow 4-6 and a disabled arrow 1-3 is one way to overcome this issue.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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