I have an app which lets the user create Live Wallpapers (iOS). You can create a Live Wallpaper from Animated Photo or Video. There are basically four steps:

  1. Choose photo (Selection between Photo or Video)
  2. Crop photo to Lock Screen aspect ratio -> Click Next
  3. Choose Dynamic Effect to apply on the selected cropped photo -> Click Next
  4. Click on "Create" and it'll produce the Live Wallpaper

My current design, separates each action into a "stage".

Should I combine steps 2 + 3 into the same "stage"? How can I decide if they fit together, or will it produce a design that is "too complicated" for the user to handle?


In general I try to reserve stepwise operations for things that must be performed in a specific order; the user should be free to perform other operations in any order they choose to.

In your example, step 1 obviously has to precede step 2 -- you can't edit an image before selecting it. And step 4 is obviously the last step. But there's no particular reason why step 2 must occur before step 3, and in fact the user may wind up wanting to do only one of them, or neither, or repeat both actions a few times as they narrow in on the look they want. ("Gonna crop that bit out, now add that effect, hmm, maybe that'd look a little better if I cropped it further, hmm, now I wonder if it'd look better that other effect...")

That said, cropping and selecting an effect are, of course, separate tasks each requiring their own UI widgets -- so logically grouping those widgets to make it clear that they are separate tasks is important, even if they are displayed together in the same "stage".

If these were complex tasks requiring lots of individual widgets, it might still make sense to separate them into their own "screens" (or panels, or popups, or tabs, or whatever other grouping mechanism fits with the rest of the app's UI), especially on small-screen devices where you have limited space to work with -- but it seems important to not present that as a stepwise process unnecessarily.

But in your case, it's easy to imagine both tasks being performed simultaneously without too much confusion or apparent complexity (one possibility: image preview up top with overlaid drag-handles for cropping area; carousel of applicable effects below, update the displayed image as the user adjusts either one, and a 'save' button at the end to cap it off.)

(A very relevant current example would be image editing in iOS's Photos app: it divides image editing into separate 'tabs' -- crop+rotate / prebuilt effects / color adjustments / 3rd party add-ons -- with nothing in the UI suggesting those need to be used in a particular order, or used at all.)

  • Hey Daniel. Thank you for your feedback! I'd usually go with your statement, Tho i've missed an important details. That's true "("Gonna crop that bit out, now add that effect, hmm, maybe that'd look a little better if I cropped it further, hmm, now I wonder if it'd look better that other effect...")". But the key point is that those actions dosen't take time (immediate). What i've forgot to say, that the "apply the effect" is a "long" process, about 2-3 seconds, so it's not immediate. Giving this fact, do you still think in the same way? Or i'm missing the point? :)
    – Roi Mulia
    Nov 12 '16 at 18:20
  • That'd mean adding a progress bar or some other indicator that the "effect" is in progress, but otherwise wouldn't change my answer; the "use these features in any order instead of having to go step by step" is the important bit. Nov 12 '16 at 19:42
  • Another issue, after cropping and choosing the effect (resulting in a live wallpaper). The user cannot crop the "Live Wallpaper", he have to crop the original image again, and re-apply the effect. Meaning it's not quite reversible. Heres a simulation of making a live wallpaper, and than recroping. % Crop photo -> choose effect -> delay 4 sec -> created Live Wallpaper #The user decides to change the crop# -> reverting back to original image (crop widget) -> crop image -> choose effect -> delay 4 sec -> created new live wallpaper. Makes more sense now? Sorry for the length and thank you! :)
    – Roi Mulia
    Nov 12 '16 at 19:53
  • I definitely wouldn't "revert the effect" when re-cropping an image: the user didn't ask for the effect to go away, they asked for the image to change size. Keep the already selected effect (by re-rendering it at the new crop size if necessary) instead of making the user manually select it again -- unexpected side effects are to be avoided at all costs. Nov 12 '16 at 20:29
  • 1
    Hey @JustAnotherPM ! Thank you for your respond. I've decided to go with this direction(like Daniel said). Basically, on the same page - you can crop the image, and select an effect. Than you click on "Create" (placed top-right on the nav bar). When the Live Wallpaper is ready, it'll preview it on a overlay on-top of the "edit" screen. Than the user can choose either to save it, or go back and keep editing, that way, the "effect" is already selected, so he can change the crop, or vise-verse keep the crop and select different "effect". What do you think? :)
    – Roi Mulia
    Nov 14 '16 at 12:45

I would separate steps 2 and 3 like what you are currently doing.

The core actions being performed in the two steps are distinct. Step 2 is manipulation of the image's dimensions, while step 3 is applying post-effects. These two actions are not logically grouped, and so user intuition likely won't be that they are combined.

You might consider combining steps 1 and 2, as they directly manipulate the content of the photo (as in the content to be shown, instead of adding content to the photo with the effects).

  • I'll try and combine step 1 + 2, let me check if it works out in UI Terms :)
    – Roi Mulia
    Nov 12 '16 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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