4

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

Improve this question
1
  • 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, 2012 at 6:33

5 Answers 5

Reset to default
4

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.

Improve this answer
1
  • Interesting idea, thanks! Not sure if people will understand this combination but it might be worth trying/testing.
    – Phil
    Oct 27, 2011 at 7:04
1

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

Improve this answer
2
  • 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, 2012 at 8:05
  • Thanks @jrmcb, also, delete is not primary action, so it can be hidden by default.
    – jelumalai
    Jun 20, 2012 at 10:44
0

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.

Improve this answer
5
  • 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, 2011 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, 2011 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, 2011 at 7:34
  • Yes if its the one they will use frequently i agree
    – Damjan Stankovic
    Oct 27, 2011 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, 2011 at 8:06
0

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

Improve this answer
1
  • 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, 2012 at 7:38
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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