Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
The wireframe really puts a focus on each control. Using a soft theme the buttons won't be so 1999 and look like part of the design. –  Barfieldmv Jun 20 '12 at 6:33
add comment

5 Answers

If you're worried about discoverability why not include a concise tutorial during the install/set-up? It only needs to be a single screen with a couple of diagrams but it would solve the problem and simplify your controls.

So many mobile devices and apps these days have them that as long as it's not a total UX blocker it wouldn't seem out of place.

share|improve this answer
add comment

We can use standard behavior for "Delete" option like swipe to left on the row like image below.

In sorting we can have simple sort icon (like drag). No need "Done" or "Save" button, if he drag top/bottom it will save automatically.

enter image description here

share|improve this answer
    
This is nice... the delete button should always not be shown so your photo can breathe more or you may add photo descriptions replacing the delete button. –  rjmcb Jun 20 '12 at 8:05
    
Thanks @jrmcb, also, delete is not primary action, so it can be hidden by default. –  jelumalai Jun 20 '12 at 10:44
add comment

I think Pinterest's waterfall style is a good idea. In this way, users can see more pictures at a time. And it's also good to allow users to drag picture around to resort the pictures.

Pinterest's style: http://pinterest.com

share|improve this answer
2  
Can you describe this approach rather than just referencing pinterest and giving a link? In two years time there's no guarantee that pinterest will be relevant to this question anymore, but if you can describe the functionality you are referring to and only cite pinterest as a source then the answer will always be accurate. –  JonW Jun 20 '12 at 7:38
add comment

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.

share|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
add comment

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.

share|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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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