Step UI when the list of steps is wider than screen width?

Question

So I really like Semantic UI, and take a lot of direction from them when I can. I have a stepped-process checkout, and have taken after their "Ordered Step" UI.

However, sadly, even their component is broken - it doesn't overflow-x in an appealing way, and I think the vertical step component looks terrible.

How do people deal with a stepped-process whose content is wider than pagewidth?

Eg:

---

Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Step 6

Where pagewidth only allows three steps to be visible at once? Are there any examples in the wild of this? I really like the step mentality, I think it moves users through a logical process and gives a sense of progress, etc.

Just setting overflow:scroll is an option, and works well on touch devices, but it's not so intuitive on a desktop. Also, as users flow through the steps, they only have access to previously completed steps, and the "current" step. However, when a user has completed all steps, I give them access to click back through each step and change things if needed. This makes it even less intuitive when some steps are literally offscreen... Advice?

Answer 1

Try using accordion steps if horizontal tabs are not fitting the screen width; many e-commerce websites like http://www.flipkart.com/ use them for checkout process.

And the easiest front-end with jQuery

Answer 2

Considering the fact that a user cannot skip steps or deviate in any way from the prescribed order, you only need show the current step and the total number of steps to allow the user to understand how long the process is and how far through they are.

The kind of stepped sequence proposed on the site that you shared will only work for process with a short number of steps - if you make it longer than 5 the block of steps start to look like a daunting process that users will actively refuse to complete.

A more compact but meaningful solution may be the sort usually employed in pagination. Something like:

^{download bmml source – Wireframes created with Balsamiq Mockups}

A more scaleable solution for small spaces.

It is important to note that the user should always be aware of how many steps it takes to complete the process.

Answer 3

Six steps is a long process to go through. So I'd have two suggestions.

First, consider if the process can be shortened. Perhaps some steps are not essential or can be consolidated into a single step.

Second, there's little benefit of trying to show many steps on a single screen. It produces unnecessary clutter, invites the user to skip some steps, and requires special treatment on mobile. It'll be better to frame user interaction. Put one step on a single screen, give an option to go back and forward. And show progress: for example, at the very bottom of the screen display six interconnected dots, each with name of a step, and highlight the steps that the user went through already. This clearly sets the expectations and shows what's exactly left to be completed.

Answer 4

Depending on your situation, Steps can be dynamic, i.e. an answer in one step may increase or decrease the following steps.

I tend to treat step UIs like a conversation between the user and the system, so by choosing your questions carefully can help you reduce the number of steps.

Alternatively organise your steps vertically rather than horizontally by using a side menu (e.g. vertical tabs) and you can still jump between the completed Steps.