I'm building a feature where the user is asked to send customized messages to their friends. The process involves two steps:
- Selecting a friend (will have autocomplete / suggestions)
- 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:
- Use an accordion: when the user enters either 1 or 2, the other pane collapses into just a header.
- 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.
- 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.