up vote 2 down vote favorite
share [g+] share [fb]

We're currently developing an app for posting classified ads where the user is able to upload up to 10 photos per ad (from camera or library). The app will be available for Android and iOS (with slight adjustments to the UI).

Once the user has uploaded two or more photos he can sort them manually - and this is where I can't find an elegant solution. My thoughts so far:

  • Tap and hold (iOS Springboard style): Bad discoverability, only power user will find this feature
  • Put up/down buttons next to each photo (see mockup below): So many buttons... feels like 1999
  • Put edit button next to each photo: Looks cleaner but is annoying to use (form should follow function)
  • Put the iOS style lines (how are they called?!) next to each photo to indicate "dragability" : Bad discoverability and it's an iOS pattern that probably shouldn't be used on Android

My questions: Is there a better solution I didn't think of? Thoughts or ideas? What do you think of this wireframe?

enter image description here

link|improve this question
82% accept rate
feedback

2 Answers

up vote 1 down vote

It depends on how much you're prepared to depart from familiarity and other standard methods such as buttons, but you could perhaps combine arrow shaped almost-but-not-quite-buttons with a raised stippled or ridged texture for affordance of drag.

Here are a couple of examples:

enter image description here

If the user drags them that's great, or if the user taps them, just nudge the photo up or down one accordingly.

link|improve this answer
Interesting idea, thanks! Not sure if people will understand this combination but it might be worth trying/testing. – Phil Oct 27 '11 at 7:04
feedback
up vote 0 down vote

It's one thing to have those dragable areas immediately visible, its different to show them after pressing edit button at the top of the app. Showing them after toggling the edit mode immediately gives them context.

I like it how favorites in the phone app on iphone work. Try something like that. You can just adjust graphics of drag symbols for iphone or android.

I remember seeing that crossed double arrows that point in all 4 directions if something is draggable.

link|improve this answer
Thanks for your reply. In our app you're always in "edit mode" because you're uploading pictures and when you're done you leave this screens. And the problem with the way it's handled on iPhone favorites is that many users just don't see/understand it. – Phil Oct 27 '11 at 7:03
What about toggling "sorting/reordering" mode? You enter the mode, reorganize them and you exit the mode. That way any graphical handler that shows up after you press reorder or sort button will be obvious has to do something with sorting? – Damjan Stankovic Oct 27 '11 at 7:24
Yep if nothing else works that is probably the way to go, but I'd really prefer to have the functionality accesible right away. – Phil Oct 27 '11 at 7:34
Yes if its the one they will use frequently i agree – Damjan Stankovic Oct 27 '11 at 7:36
One more thing, if you feel like "So many buttons... feels like 1999" you can always leave buttons on toggled image only, and other can either not have buttons (or have almost invisible buttons). In addition to that you make that each image you add is auto toggled/selected, so you kind of understand that you need to select the image you want to move. That is if there is no action on tapping the image itself :) if there is then this is off.. – Damjan Stankovic Oct 27 '11 at 8:06
feedback

Your Answer

 
or
required, but never shown
discard

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