5

There are a few icons for directional pads, but after conducting user testing, users kept wanting to tap on it instead of swipe/pan for movement.

What have people done to suggest a component should be used for swiping or panning instead of tapping?

This control is for camera movement similar to Minecraft's where you pan on the screen to rotate the camera and need a control to move the body.

The hope is to avoid using a tutorial and to make the interface self-explanatory.

5

I'd likely use some type of directional arrow. If they can swipe/pan in any direction, I'd have four arrows to show that. The following image from a google search is similar to what I'm imagining:

enter image description here

If users can zoom as well you could pair it with a magnifying glass (though I'd connect the arrows):

enter image description here

If it's just two directions you can use the same concept but with less arrows:

enter image description here

To do this in 3D, just add a third line to represent the Z direction and corresponding arrows set. You could even have that rotate based on where the user is looking so they can keep track of the direction they are going. Just make sure to offset it to start so that all 3 axes are visible.

It would be helpful to see the design you had that users wanted to click, but you can make things look less like buttons by removing outlines, removing backgrounds, and connecting them together.

  • Should have clarified this, but it's for camera movement similar to Minecraft's where you pan on the screen to rotate the camera and need a control to move the body. – Crashalot Mar 3 '16 at 19:16
  • @Crashalot That is very much something you should have clarified. I'm not familiar at all with the movement - could you link to an image or video of what you mean? – Zach Saucier Mar 3 '16 at 20:43
  • Sure, here ya go: youtube.com/watch?v=eLfYVF5TcF0 – Crashalot Mar 3 '16 at 21:21
  • @Crashalot So the user can look around in 3D and needs to uses their keyboard to move around? – Zach Saucier Mar 3 '16 at 21:34
  • 1
    @Crashalot For that you could use lines in 3 dimensions with arrows on both sides - the same as above but in 3D instead of 2D – Zach Saucier Mar 4 '16 at 0:31
2

If you are making a touchpad, they are typically inset rectangles or round rects. The inset helps to avoid it looking button-like. They are very common in music software and there is a hardware example on all MacBooks.

You can make them more obvious by putting a glow where the finger touches, and/or putting a subtle grid overlay and/or add chart-like rulers or labels to the edges to show that there are various touch positions, that the entire surface is not the same.

Ideally, though, you would enable the user to swipe on content directly instead of creating a swipeable widget. Whatever they are controlling, let them just touch that thing directly if that is at all possible. Of course that depends on your app.

On iOS there is a touchpad in Korg iMS-20 that is perfectly done and very obvious.

iOS Korg iMS-20 app screenshot showing touchpads

  • Should have clarified this, but it's for camera movement similar to Minecraft's where you pan on the screen to rotate the camera and need a control to move the body. – Crashalot Mar 3 '16 at 19:15
2

Most of the time, games use curvy arrows to make their users understand they can rotate the view. They can be vertical or horizontal only.

The curve usually shows they need to "drag" the arrow to rotate the view rather than swipe. That's quite an universal way to explain what the arrows are used for.

3d arrow pan example 2

And if you need an extra button for the control (up/down/right/left), you could add a button in the middle of your curvy arrow and this could show the new controls. Or these extra arrows could be added around the rotating ones.

That's a very rough example with all the controls together within a compass. But the left/right/up/down could also be separate, around the app screen or as a separate compass depending of the UI and how much room you have for this.

example compass direction 3D

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.