I design a web application to plan Minecraft builds. Basically, it's a pixel editor, except that each tile has a texture instead of a color. I turn to desktop browsers, although I want to keep tablets in mind.
One of my goals is to present the canvas as an infinite plane. (This is a key feature that distinguishes this design from existing alternatives.) The Minecraft world is infinite, so it makes no sense to specify a finite size in advance, and it's annoying a pointless hurdle.)
The canvas is zoomable and must be "scrollable" in both dimensions. The user should be able to view and edit any part of the canvas – even a million tiles away from the origin.
Scroll bars do not work perfectly here. The artboard has neither beginning nor end, and the origin point is not important to users, so there are no objective reference points. The filled-in areas of the canvas can serve as useful subjective reference points, and a scroll bar can be useful for navigating those areas.
I read a great question about infinite scrolling patterns, and although she did not deal with this particular case, it was very enlightening. After some consideration, I think that the application must support:
- Move the view to any given point.
- Move / zoom the view to include the entire padded area.
- Move the view precisely within and immediately outside the populated area (for example, a screen view, a measure that depends on the zoom).
A traditional scroll bar also gives the size of the view in relation to the entire document, which does not make sense to us. It might be useful to specify the size of the view in relation to the populated area, but I am not convinced.
Moving to a point or zooming / scrolling to see all the content can be implemented using buttons, menu commands, or whatever. The trick is to find a surface for scrolling behavior that is intuitive to use but meets the demands of the infinite level.
What I'm thinking at the moment is a kind of "peeling bar". Visually, it is a scroll bar (and can be implemented with native widgets). The button is locked in the middle when the user is not scrolling. If the user moves the button manually, the view is scrolled accordingly, and when it releases, the button jumps back to the center. This allows precise linear scrolling despite the lack of objective reference points.
As indicated, the user can not scroll over an unlimited distance in a single operation. To support this, the canvas area may be scrolled until the user releases the button or moves it away from the end.
Are there any good examples of infinite layer scrolling? And does the widget that I propose seem to be a reasonable compromise?