: How to suggest a button is for panning, not tapping? 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

@Debbie163

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.



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.

Vote Up Vote Down

@Berumen635

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.

Vote Up Vote Down

@Turnbaugh909

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:



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



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



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.

Vote Up Vote Down