1

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?

  • 1
    Have you considered panning the screen with a click-and-drag interaction? – Nicolas Hung Jun 11 at 15:33
  • I have; I'll probably implement it before any other solution. Is there value to having a visible scroll control as well? For me, a scrollbar is a visual cue that scrolling is possible, and that the mouse wheel will scroll the view, and so forth. Are there any examples of programs with mouse-pan but not scrollbars that I might look at to see how they feel? – Thom Smith Jun 11 at 16:36
  • 1
    A small preview panel of the whole canvas can also help the user to move around the areas he wants along with zoomin & out functions. – raj keshatti Jun 12 at 5:28
  • An interesting design question, and at UXSE we are always looking for ideas and concepts that will stretch the boundaries of current design practices. Have you tried to come up with some sketch or wireframe of your design concepts? This might help with people who are not familiar with the Minecraft style applications. – Michael Lai Jun 12 at 6:20
  • 1
    @Michael Lai The basic UI is nearly identical to a pixel art editor like Pixen (which I currently use for lack of a high-quality dedicated tool). The main differences are a) the infinite canvas, b) textures instead of colors, and c) the kinds of features that would be operated by toolbar buttons or menu commands. But when I have some wireframes (or a tech demo), I'll try to post it. – Thom Smith Jun 12 at 13:21
2

For panning examples:

  1. Whiteboard - Panning and zooming can be done intuitively with MacBook touchpad. However it's unclear how to do it with keyboard and mouse. For this reason, I would advice adding buttons for zooming and panning. Changing the mouse to a "hand" for panning and a "lens" for zooming makes it even more clear. I would also advice supporting common keyboard shortcuts, such has holding space to activate panning, or control for zooming. Find a place to provide information about such shortcuts.
  2. Miro, Previously RealTimeBoard - Supports keyboard shortcut for space+drag to pan and control+scroll to zoom. Also has buttons for panning and zooming. The mini-map in the lower right corner is very useful for orientation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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