navigation - Warn desktop user of draggable website

I'm building a site that uses the jQuery iScroll plugin in the main navigation system. (http://lab.cubiq.org/iscroll/examples/simple/). Please note that the plugin is not exactly drag-n-drop.

Right now, I'm just using a different cursor to indicate the page is draggable.

A grab/drag hand similar to this:

How else should I warn the user about the draggable interface?
A DRAG ME message (as cursor) that appears for some seconds when the page loads?
Does anyone have any ideas/references?

EDIT: I could see in the answers some tips and references to other questions where some of the divs inside the page are draggable. But in my case the whole page navigation is draggable. How should I warn in that case?

Here are some examples:

1. A small animation at the beginning. (I don't like this kind of option much)
   


2. A circle appears when pressing the mouse
   


3. Four-arrow cursor + Scroll Sign
   



4. The hand/grab cursor I was proposing
   


5. Hand/grab cursor
   


6. Hand/grab cursor
   


7. Not exactly draggable but I found interesting the way of warning the unusual navigation
   


8. Same as the last one here.

So I think I can come up with various "small" solutions which are:

-Visual instructions like in example#3 and example#8

-Small animation at the beginning as in example#1

-Make a first complete plain screen that will force the user either to drag that page to enter or leave the page like in example#1

-Small tips like in example#2 or making the page auto-drag a little if the user hasn't drag it (proposed in one of the solutions below)

-Making kind of a zoom-out when the user tries to drag like in example#7

-Lack of any scrollbar or button to go next like in example#2. Two opinions with this, either the user realises he must drag or leaves the page. If I put buttons the user will use the buttons to go left/right and probably won't realise the page was draggable like in example#4

This all makes me think of when MAPS websites were not draggable. When they began to be draggable, how did they warn the user?

EDIT 2: I found this article that might be interesting for the subject: http://blog.maxrudberg.com/post/38958984259/if-you-see-a-ui-walkthrough-they-blew-it

Answer

I agree that most answers here apply only to draggable elements. In those cases there are clear conventions for giving such elements affordance. In the situation where the whole canvas can be explored by dragging, the only real convention I know is the hand cursor.

I think the following points are important to keep in mind if you choose to pursue this design:

• You're breaking the convention of the web. There is a clear convention to let the user agent determine the scrolling mechanic. On a tablet or smartphone it's dragging, on a regular pc it's scrolling, which may be implemented as a specific touch gesture or using a specific device like a scroll wheel. You are taking over this task, so it's now your responsibility to ensure that scrolling works well on all conceivable platforms. You can no longer hold the platform and web browser responsible. This is a big investment


• Remeber accessibility. Ususally the platform and browser take care of most of this, but if you take over, you're on your own. Have a strong plan for graceful degradation and progressive enhancement.


• Whatever you do, test the hell out of it on all platforms you can think of. If it's a long-term website, make sure to keep some budget open for when the next big platform comes along.

Nevertheless, you are not the first to make this decision, although in all the examples you give, I would not consider the choice justified. You really need a better reason than wanting to stand out in order to risk such bad UX experiences. Some cases where the paradigm does work:

The common element in these seems to be that there is a very large canvas, where the user will want to place the viewport accurately on a specific area. Zooming in and out is always an important use-case in these examples.

The scrolling mode in these examples is relatively well known. Drag the canvas around, double-click to zoom, etc. Make sure you implement all elements of it, not just the dragging.

The following elements may help to let the user understand that they are in this mode.

• A navigation menu top left. Let the user move up, down, left, right, and set the zoom level by clicking. This is also a visible safety option for when they don't understand they can drag. If you detect that they use these controls a lot, you can give them a small unobtrusive message explaining the dragging option. If you detect that they use the dragging options, you can collapse or hide the controls.


• Alternatively, place arrow keys at the edges of the canvas. Again, this will alert you to users who have missed the dragging option, and give those users a fail-safe to navigate.


• An overview of the whole canvas, showing the current viewport as a red rectangle. (Like the navigator view in Photoshop). This also allows the user to quickly jump to a point that would be too far to drag to.


• Let the content cut off unnaturally at all borders. If it only cuts off at the bottom or the top and the bottom, it will look like a regular scrolling web page. Make sure there are no clean margins for any direction that can be scrolled.


• Consider making the dragging a secondary mode (like in most PDF readers) that can be activated and deactivated explicitly. A button with an open hand is a good convention here.