4

Hello UX'ers

I work as a full time UI/UX designer in a smaller company. We are currently going through a major re-design phase and one of the biggest addition we are adding to our platform is "step by step" process. An example of such process would be a user joining a team.

The other day I had a random thought that I couldn't find any research about, nor any use cases of other companies and inspiration sites (Such as Behance and Dribbble) using this idea.

My idea revolves around modals and how a step-by-step process could function. Normally step-by-step processes are located within the same modal. My idea is to visualize the next and previous steps more for the user, without making them make any decisions for the next step - So, showing part of step 2 as a modal on the right side of the users screen. Like-wise I would show part of the previous step on the left side of the screen.

If the description and prototype is not informative enough, I'll gladly add more details!

I have made a quick prototype of the idea at the bottom.

My question to you guys would be, have you seen anything like this before? Can you provide any pros and cons of such a solution?

Password: Stack123

Prototype link: https://xd.adobe.com/view/7e7fb4f5-9bed-40c4-42ed-04c329ccfbec-084e/

Improve this question
2
  • 2
    I haven't seen anything like this (that I remember). I quite like the idea, as it gives a taster for the next step in the process with the ability to see where they've come from. It makes the process a touch more intuitive. <!-- Is this going to be based on a responsive framework? If so, how would it work on a mobile device vertically? Would you stick to a standard modal format on mobile? -->
    – Brom Sulaiman
    Sep 4, 2018 at 15:54
  • 1
    While the adobe mockup is awesome, please try to do the Balsamiq mockups that embed directly into this site (so its captured permanently with this question and doesn't require the link to be correct/active/etc.).
    – J. Dimeo
    Sep 4, 2018 at 16:56

2 Answers 2

Reset to default
2

depends what you're building. If an introduction to a service you'll need something that walks the user through each system feature and this will most likely be a different interaction.

For simple content I think your approach is OK though.

For larger content issues you may want to consider the new GDS step-wise approach e.g.

https://www.gov.uk/learn-to-drive-a-car

Improve this answer
3
  • My idea would be used for the platforms step-by-step flows such as creating a profile and signing up for something. I am big on Hicks law and providing them with all steps and their inputs will be too much information. Not that the flows are filled with a ton of information, but it will most certainly take a lot longer than just providing the user with the necessary information and input fields
    – Martin Capion
    Sep 6, 2018 at 7:26
  • then you're talking about 'onboarding' ...in which case highlight areas of the interface that need exploration
    – colmcq
    Sep 6, 2018 at 8:35
  • No, it's not onboarding. We use function orientated onboarding. This process could be a step-by-step enrollment process, for a user to sign up to e.g. an event. Through the steps we utilize thing like Hicks law etc. to give them an easy and fast enrollment process even though they have to go through several steps.
    – Martin Capion
    Sep 6, 2018 at 9:33
2

If you go this route, I would encourage you to think about vertical scrolling instead of what is essentially horizontal scrolling. Ideally, there would also be an outline view/panel as a sidebar that shows where the user is in the overall flow.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • 1
    The use of a vertical solution does provide some pros and I quite like the idea, but what about the natural flow users are used to of going left to right? Step-by-step flows normally go from left to right. Likewise you could make the argument that everyone is used to the vertical scrolling after Facebook became such a big thing. Will vertical scrolling be more of a benefit than a liability or vise versa?
    – Martin Capion
    Sep 6, 2018 at 7:23
  • 1
    If the 3 things in the UI were coordinated and animated (e.g. you could click the steps in the outline in the left to skip to a step, the next and previous would do an animated scroll and update the scrollbar, scrolling would highlight the step in the outline, etc.) I think that would very quickly acclimate the user to the vertical flow. This pattern is increasingly common with single-page websites that vertically scroll as the user clicks links, often oriented horizontally, so I think the pros outweigh the cons
    – J. Dimeo
    Sep 6, 2018 at 13:38

Your Answer

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

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