4

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?

  • Do your users have to go through each step in turn or can they skip to any step they like at any point? This really affects what you can and what you need to do. – Andrew Martin May 10 '16 at 8:00
  • Each step is required, so yes they must go through each step in order and complete the required fields. In some steps, not all fields are required, but all steps have at least one required field. – j_d May 10 '16 at 8:05
  • Reducing your 6 stepped process to 3 seems like where you need to apply your UX energies. Even if you find a clever way (demos.telerik.com/kendo-ui/tabstrip/scrollable-tabs) to present six progress steps, it would be harder to do the same on mobile devices. Not to mention the attention span of your users. – Adnan Khan May 10 '16 at 9:16
  • @AdnanKhan It's a bit more complicated than that. It's not so much a "checkout" process as a setup process, similar to creating a listing on AirBnb, etc. There is necessarily a lot of information for users to provide, but they are incentivised by actual monetary gain. – j_d May 10 '16 at 9:34
  • @JohnDoe okay, if you have to keep all 6 steps intact, consider breaking the process into 2 views having three steps each. – Adnan Khan May 10 '16 at 9:56
3

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.

enter image description here

And the easiest front-end with jQuery

  • Another easy front-end library to make Accordions with is Bootstrap. – Loyalar May 10 '16 at 14:25
  • be careful with accordions, be aware the user might want to consider more than one panel simultaneously meaning the functionality that closes all the others while one is open may not be desirable – Toni Leigh May 10 '16 at 16:00
0

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:

mockup

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.

  • Sure, but this doesn't address the issue that once all steps are complete, the steps essentially become "tabs" that the user can jump around on. – j_d May 10 '16 at 8:44
  • Again, I think the 'Pagination' model does answer that (steps could become links once the required information for that step is complete) but, ultimately, I think you may need to look at how the process is broken up into steps. Dipak has already suggested using the Accordion model but that also requires screen space - this is something that you're not going to get away from. What ever solution you look at you're going to lose either accessibility or screen space. – Andrew Martin May 10 '16 at 8:51
0

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.

0

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.

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.