I'm designing 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 am targeting desktop browsers, though I would like to keep tablets in mind.
One of my goals is to present the canvas as an infinite plane. (This is a key feature that differentiates this design from existing alternatives. The Minecraft world is infinite, and so declaring a finite size ahead of time doesn't make sense and is a pointless hurdle. In addition, expanding a pre-sized canvas is annoying.)
The canvas is zoomable, and it must be "scrollable" in both dimensions. The user should be able to view and edit any part of the canvas they like — even a million tiles away from the origin.
Scrollbars do not work perfectly here. The canvas has neither beginning nor end, and the origin point isn't important to users, so there are no objective reference points. The populated areas of the canvas might serve as useful subjective reference points, and a scrollbar might be useful for navigation within those areas.
I read a great question about infinite scrolling patterns, and although it didn't address this particular case it was very enlightening. After some consideration, I think that the application needs to support the following:
- Moving the view to an arbitrary specified point.
- Moving/zooming the view to include the entire populated area.
- Precisely moving the view within the populated area and immediately outside it (say, one screenful, a measure that depends on the zoom).
A traditional scrollbar also indicates the size of the view in relation to the entire document, but that doesn't make sense for us. It could be useful to indicate the size of the view in relation to the populated area, but I'm not sold on that.
Moving to a point or zoom/scrolling to see all content can be implemented using buttons, menu commands, or whatever. The trick is finding an interface for scrolling-like behavior that's intuitive to use but meets the needs of the infinite plane.
What I'm thinking of at the moment is a sort of "scrub bar". Visually, it's a scrollbar (and could be implemented using native widgets). The knob is locked to the center when the user isn't scrolling. When the user manually moves the knob, it scrolls the view accordingly, and when they release it, the knob snaps back to the center. This allows for precise linear scrolling despite a lack of objective reference points.
As specified, this does not allow the user to scroll an unlimited distance in a single operation. To support this, if the user drags the knob to either extreme end, the canvas could continue scrolling until the user released the knob or moved it away from the end.
Are there any good examples of infinite plane scrolling out there? And does the widget I suggest seem like a reasonable compromise?
