Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

The only thing I could think of was saying: "Scroll to see full menu" above. What are some other ways people are doing it?

share|improve this question
3  
Arrows? Context would matter a great deal. Can you post a sample? –  Scott May 12 at 21:04
2  
Why do you need that? There are no scrollbars on mobile and OSX, people aren't confused. –  bjb568 May 12 at 21:10
2  
It is a problem someone else caused that we cannot fix, so we have to work around it. –  Morgan May 12 at 21:12
    
@bjb568: I've used a few apps where I didn't realize I could scroll in a specific direction. If the screen cuts off part of what I can see in one direction or another it's clear, but sometimes things line up with the screen borders just right, and users don't realize they can/must scroll. Took me a while to realize I can scroll sideways on the new Facebook app for instance. –  Mooing Duck May 13 at 0:00
    
@MooingDuck Facebook doesn't count, it's crap :P But yeah, you do have to stuff like what Confused said. –  bjb568 May 13 at 0:38

5 Answers 5

People relate well to physical relativity in user interfaces. In other words, if you want an interface to feel natural, or make its controls obvious, you can use the appearance of physical realism to do it. Proper icons are always a must-do as well, for obvious functionality.


How would a scroll area look physically? Simple! A layer of content below an outer frame. To achieve that look, you might use a box shadow on the outer layer.

  • Tip: When creating CSS box-shadows, you can put multiple shadows together with commas. Use a light far shadow with a stronger short one for a nice effect. Use RGBA (opacity-control) for a light touch!

Next, without a scroll bar, the best practice that comes to mind would be to use JQuery with a clickable scroll box attached to the edges of frames who have content that scroll, having the box show up when inner elements protrude outside of the box in any of the four directions.

If you want the bar to be absent or hidden by default, keep it either hidden or lightly opaque until the scroll area is hovered over or tapped, and then have the scroll mechanism appear.

  • Easy Use: The box should activate (begin scrolling the child element) lightly on hover event, and fully on a mouse-down.

Here's a demonstration:

enter image description here

For long scroll areas, accelerated scrolling is a must via this practice, otherwise the users ability to navigate the content quickly will be inhibited.


After fiddling with this, I think I may create a JQuery plugin for, and use this practice for my next web app.

share|improve this answer

Make sure that the default amount of content first displayed shows an item at the bottom (assuming vertical scrolling) that's only partially revealed, thereby informing the user there's more below, and they can reach/reveal it.

share|improve this answer
    
Windows (/Phone) 8 seems to do this horizontally pretty often - when a title takes up more than the available horizontal space, it encourages you to swipe left/right to see more options. –  Katana314 May 13 at 1:26
1  
Possibly with a slight fade-out/opacity gradient at the bottom to indicate that there's more. –  WChargin May 13 at 2:02

Here is what I would try:

A soft gradient that goes over a little of the content. This indicates that there are more below. In addition, you can of course add a little arrow.

enter image description here

share|improve this answer
    
At first I thought this was similar to another answer but it's not. Another good option. +1 –  DumbNic May 13 at 21:17
    
Thanks - i did check the other answers to make sure i did not repeat. –  Benteh May 13 at 22:00

How obvious you want to make it will come down to who you think the audience will be and what the context is.

Usual way-finding techniques such as arrows and graphics that continue beyond the fold can help the user journey. Alternatively, you could go for an anchored menu/nav system, which many single page sites use.

The most blatant and ugly solution would be a popup which informs users to scroll down for more content, then hides when the actor scrolls (cookie notification style).

share|improve this answer

Another option is to change the cursor when hovering over the element to something that indicates scroll, such as a moving arrow that points and indicates downwards, or something that indicates 'read more by scrolling'.

Of course this only works for desktop.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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