I'm building a feature where the user is asked to send customized messages to their friends. The process involves two steps:

  1. Selecting a friend (will have autocomplete / suggestions)
  2. Selecting customizations for that friend and hitting Send.

After the user hits send, they should be prompted to refer another friend (with an message indicating the previous message was completed successfully). This cycle can continue for as long as the user wants.

I want only want the user to focus on one step at a time (either selecting friends or selecting customizations), so I want to hide or deemphasize the other panes.

There will be a few other panes as well, such as showing that the first message was sent (an acknowledgement pane), and a detailed instructions pane (which will be shown at first, but should probably be hidden later -- the individual components will have simplified instructions)

I am struggling with the best way to do this.

I've thought of a few approaches:

  1. Use an accordion: when the user enters either 1 or 2, the other pane collapses into just a header.
  2. Use an accordion, but hide step 2 during step 1. The idea here is that when you start selecting recipients (step 1), you shouldn't even be concerned about the message customization step (step 2), so it won't even be visible. Then, when you do enter step 2, step 1 collapses and step 2 slides out.
  3. Use scrolling: when you select a recipient, the viewport scrolls down to center on step 2 (which has been visible all along). After sending a message, the panes reset, and the viewport scrolls back to center on step 1.

I don't like the accordion approaches because it might not be clear that the user can go back to view previously collapsed panes (such as the instructions pane). Scrolling has the advantage that if the user wants to go back, they already know how to scroll up the page.

I don't like the scrolling approach because if we're scrolling back UP the page when transitioning from step 2 to step 1, while resetting panes for step 1 and 2, we'll be mixing spatial and temporal history -- sometimes, scrolling up/down "goes back/forwrad in time" e.g, travel to earlier/later states, but other times, scrolling indicates a resetting of states altogether.

Any thoughts?

  • Have you give consideration to the multi-step wizard form?
    – Brendon
    May 22, 2013 at 12:54
  • How about 3., but with scrolling further down to a "new copy" of the first step? May 22, 2013 at 13:10
  • @Brendon, I'm not sure this would fit the wizard pattern because there are really only two steps (select recipient, customize message), but they can be repeated arbitrarily many times. In actuality, the two steps could be combined in one (e.g., think about writing an email -- you select a recipient and then 'customize' a message, all in one step), but I'm splitting them because I think that helps focus. Do you have any examples of wizards applied to cyclical tasks?
    – Sherwin
    May 23, 2013 at 4:26
  • @UlrichSchwarz Thanks for the suggestion, my worry there is that after a message is sent, it should be immutable, so it doesn't really make sense for them to scroll back to see previous messages.
    – Sherwin
    May 23, 2013 at 4:27

1 Answer 1


What you're trying to do isn't actually cyclical. Technically it might look like that, but to the user it doesn't. A user does repeat the task over and over, but each repetition actually moves him forward through what he's trying to accomplish (e.g. send stuff to all friends) and forward through time.

Think of it as moving down list, adding an entry for each message that has been sent.

I don't think it makes sense that someone should choose a friend before choosing a customization or vice versa. Just allow the user access to both options at once, but only activate the submit button when both choices are made. But you could make it a little two screen wizard if you like, that's easy enough.


download bmml source – Wireframes created with Balsamiq Mockups

Just an idea: you could put the main instructions at the top of the list and make it scroll out of view as the users adds sent messages. Presumably, once he's sent a few messages he'll not need the instructions anymore.

  • Thanks for this suggestion -- this makes sense. I'll give it some more thought but I like this approach.
    – Sherwin
    May 24, 2013 at 19:59

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.