Improve Steppers usability

[cananda]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

I'm working with a Form that has large inputs and I have broken them into 6 steps. I have a request for the following improvements for Stepper component

• to explore content in other steps, we have to click through all the steps via the next button. It would be great if the step headers and/or the step number could be clickable to jump to that step directly.

• stepper should be configurable to be horizontal or vertical steps

• Allow sub-header for Step header to show a short description on what to expect

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

https://mantine.dev/core/stepper/

[endigo9740]

See also: #222

[endigo9740]

Hi @cananda, I had a chance to revisit #222 today, so you might review my update in that post.

Per your request above, I want to address each point in detail below:

to explore content in other steps, we have to click through all the steps via the next button. It would be great if the step headers and/or the step number could be clickable to jump to that step directly.

This is correct, unlike an accordion the stepper has a linear order for which the steps must be completed. If I can skip from Step 1 to step 4 then what purpose does the Stepper server versus an accordion? Currently the visible state of completion is tracked based on the step you're on. If we wanted users to be able to navigate prior completed steps, this might be possible to jump around. However, we would have to decouple the current step state from the "furthest progressed" state. Though I have concerns about how useful that would be.

stepper should be configurable to be horizontal or vertical steps

Unfortunately I have a pretty strong opinion on this one, I don't believe horizontal steppers are good UX. In fact they really LIMIT your UI options on mobile devices. Without introducing horizontal scrolling, which has it's own issues, this means on the smallest mobile screens you have a fixed number of total steps that could be displayed. Even if you go down to just showing the Step numeral. Here's a mock of what I mean:

At some point you just run out of space with horizontal options. However, with vertical Steppers you have unlimited space because scrolling is easy. On touch you swipe, on mouse you can use a mouse wheel.

Allow sub-header for Step header to show a short description on what to expect

These are pretty easy to add using the existing slots. Here's how I'd handle that:

<svelte:fragment slot="header">
	<div class="grid grid-cols-1 gap-2">
		<h2>Step 1</h2>
		<h4>Getting Started</h4>
	</div>
</svelte:fragment>

And here's what that would look like displayed in the UI:

However, if you think a dedicated slot is necessary for subheaders let me know. I'll see what I can do.

[endigo9740]

FYI I've shared this post in the #contributor channel on Discord and encouraged more feedback on this topic. I'll let this ticket remain a few days longer to gather responses from you and others @cananda.

[endigo9740]

Closing this due to inactivity. If these issues are pressing to you let me know and I'll consider reopening this ticket. Thanks.

[cananda]

@endigo9740 Thank you for looking into this. From a UX perspective, we should let the developers decide how they want to use these components and as a framework, we should provide props for flexibility. If I were designing a 3 step process, it might more apt it to be horizontal. All we need to do is provide that capability as a configuration and let the developer decide as they know their UI better.

I have a 8 step process and I like the Stepper component more than Accordion. In my steps, there is data input needed that is not handily available and hence viewing fields of other steps will help my users gather in advance if they have visibility. It also gives endusers visibility into other steps and may decide not to continue at all or ask questions ahead. It would be frustrating if they find out something that they wouldn't like to do or agree to in the last step.

Providing props for horizontal vs vertical or expandable headers solves this request

[endigo9740]

From a UX perspective, we should let the developers decide how they want to use these components and as a framework, we should provide props for flexibility

Just to be clear, I was speaking from a UX perspective. I strongly believe horizontal steppers are not good UX. Also reminder that this is an open source project. Skeleton is primarily maintained by myself, but anyone can contribute. If you think this is something valuable to add, then a PR would be welcome. Unfortunately I just don't think this is something I can make a priority right now. I hope you can understand.

[pietz]

@endigo9740 I'm super grateful for your work on skeleton. I think it's the best UI kit for Svelte as of today. Sadly, I'm not a JS developer. That's actually why I'm using skeleton in the first place! It allows me to build nice frontends without much JS experience. That's pretty cool if you think about it. That also means, I currently cannot support this project with code or PRs.

I just wanted to add a comment regarding your UX opinion. I totally get your explanation above and it might easily be that you're right about this in 80% of the cases. But as a developer building an UI kit, you should know that UX always depends on the use case and that people might use elements in slightly other ways than you expect. You might conclude that some of this is bad UX but others may disagree with your opinion. UX is a fluent field.

As you said yourself, with just 3 steps a horizontal stepper might be a justified solution. That alone should be reason enough to consider including it in skeleton. My point here is not to fight for this single feature but for you to be open minded about UI elements that you wouldn't use. Others might want to use them. Others might think it's great UX. And as the maintainer of a package like this, you probably want to give people the freedom to do all sorts of stuff with skeleton.

Good look mate

[endigo9740]

edit

After thinking this over I don't think my response was appropriate or constructive. Your feedback has been heard and we'll try to get some of these changes in place in the future when we can. Just note there are some other priorities right now, which can be tracked in the pinned issues and on our Discord if you're curious.

Thanks,
Chris