Icon for reordering a horizontal nav on an iOS app?

Question

So, I know that the icon with the three lines is the most common method of letting the user know that a vertical list is able to be moved around. Example here:

I'm wondering how the same kind of concept can be applied to a horizontal list. I have a simple list that looks like this:

But I'm having a hard time figuring out how to let the user know that each item can be held down (until they wiggle) and reordered.

Has this been done before in an app and if so, what is an intuitive way to let the user know that the nav items can be rearranged?

Answer 1

You have to understand the icon first. Just like the toggle next to it it represents physical object. It visualizes the tactile feedback of the uneven surface (think old Nokia battery cover) that lets your fingers allow to drag it.

If you applied this to your problem then this ||| would be your icon. But you also have to follow convention of your OS, and on iOS you use a segmented control as default. Which would indicate you should put the order into a settings menu.

Which leads you to the UX question: how often does a user need to re-order? If it is infrequent, maybe putting it out of sight is a good solution. If it is very frequent, maybe an even easier handling instead of tiny icons is needed.

Other approaches:

Answer 2

I'd go for a similar 3 vertical lines to the right of each item, but then I'd also have a line between each item for more clarity

Answer 3

One thing that should be noted is that with the long press gesture there generally isn't any indication until after the user has long pressed on the item. The indication can then be either the wiggle that you mention or it can be the bars or whatever icon you decide on.

If the bars are visible all the time, the user will expect to be able to rearrange by dragging the bars without having to long press first - Which may be an option.

The standard way to deal with this in iOS is either, as I said, to have no indication at all until the user long presses, or - as tab bars do - have a 'more' tab, which pushes to a new table view where you can edit and rearrange the tabs. This is (at least slightly) more obvious to the user but does involve more clicks and effort, or as KMSTR mentioned - have the order in a settings view somewhere. It all depends on your use case and how often and important it is to be able to rearrange.

Answer 4

On the iPad version of Chrome, and earlier versions of their iPhone App, you can re-order open tabs by holding and dragging, much like you can on Desktop. So if you wanted to structure your navigation items like tabs, that's a pretty recognizable visual metaphor.

Alternatively, on iOS users are trained to understand that the home screen can be reorganized by holding icons; You could use some minor animation when the user loads the menu the first time—a little shake from the last item on the menu—to indicate that it, like the home screen, can be reorganized by tapping and holding. You could have that animation repeat intermittently until a user tries it, even, unless you think that's too annoying.