Progress indicator (mobile and desktop)

[ulde01]

Review 2019-02-27
At the review, Design working group decided to WAIT with publishing this component so we can evaluate the use (read further down on this thread). We will keep it in Design library, under Components/Upcoming for a while.

You are still welcome to use it, but please give us feedback on how it worked.

Need
A step indicator that shows progress in a flow. Today we have wizards which take-over the complete focus for the user. This indicator is a way to gently guide the user forward without loosing context.

Specification

• Used for mobile and desktop
• Height 8 px
• Filled step: Dark Green 1
• Unvisited step: Grey 8
• Gap between steps: White 2 px

Description
See details on Design library: http://designlibrary.sebgroup.com/components/upcoming/progress-indicator/#usage

Ulrika,
Design management

• Vanilla Progress indicator (new component) vanilla-pattern-library#25
• Bootstrap Progress indicator (new component) bootstrap#105
• Anymore?

[hjalmers]

related to #8 (comment) (ordered action list)

[ghost]

This discussion is connected to #22 right?

[henrikhoglundseb]

Here is a version that I have designed for advisory tool. A "softer" version of a step indicator that is placed together with the content. This is more of a supportive component that will add to how long / much progress I have made in a flow. Not where the user is in the flow.

[ghost]

@henrikhoglundseb I think that it could be good to add a text that says where in the flow I am. Just a short "Step 3/6" I guess the user gets that information from the start, for example "Just 5 steps to set up your account, start here"? Of course this might be a question about how many steps there are to complete.

[danielvictorin]

@henrikhoglundseb What crossed my mind was a "scroll indicator" like: https://www.w3schools.com/howto/howto_js_scroll_indicator.asp (Don't know how built-in that solution is on the market yet though). But I think that feeling will be gone anyway with Jessy-Js comment. Otherwise its quite innovative and minimalistic which is cool.

[ghost]

@danielhakanssonseb I like that, but it would fit a one page solution of a form right?
This is more a stepper, new page for each step...

[danielvictorin]

Yea, I think so as well. Henriks solution is smooth. How does the page behave when clicking "nästa fråga"? Is it a total page refresh or is it angular routed? Im thinking, if its routed "next step" could be filled with some ease-effect and extra highlighted for those users that hasnt really seen it yet?

[henrikhoglundseb]

It should be possible to use the component both if the page is refreshed or if the content is updated with a JavaScript framework. In that case should the green bar animate until it’s next possession. Writing out the step 3/5 is a good idea. I will iterate and se where to place this.

…

Sent from my iPhone On 30 Jan 2019, at 16:43, Daniel Håkansson <notifications@github.com<mailto:notifications@github.com>> wrote: Yea, I think so as well. Henriks solution is smooth. How does the page behave when clicking "nästa fråga"? Is it a total page refresh or is it angular routed? Im thinking, if its routed "next step" could be filled with some ease-effect and extra highlighted for those users that hasnt really seen to it yet? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#6 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AscDjxwIVga1vHzgOWM5R75hHqoRe-X4ks5vIb2agaJpZM4ZCYds>.

[Reytolstoy]

My step indicator looks like this in the advisory tool for company..

[TheresaHedlund]

I have nothing current that I'm working on. Just some insights since before. Take it or leave it :)
I guess there might be some different needs, a simple one (like Henrik's) and maybe one that is more adjustable;

• Show image/checkmark/number?
• Show text label?
• How many steps in total?
• Which one is active/where am I?
• Which steps are done/active/left to do?
• Possible to add number/image and/or description for each step
• When you don’t have to do them in order? Ex step 3 is done but not 1 and 2.

For a simple one there's usually good to;

• Starting the progress bar with some progress already
• Slow down the transition speed so the user notice the increase

[hjalmers]

Personally I prefer the step indicator provided by @reyhanetol #6 (comment) as just having an animated progress bar might be confused for or mixed up with the loading bar which we've defined here in Design Library, and it's also frequently used in apps built on material design (see progress bar).

Would be nice to make the steps more even though and remove the size restriction tied to the length of the text, i.e. some steps look more complex/challenging just because the step title is longer.

[henrikhoglundseb]

@JessiNygrenWalhed @danielhakanssonseb @TheresaHedlund @reyhanetol Lets have a fika and work on this component. I will book a meeting.

[ghost]

@henrikhoglundseb @TheresaHedlund @reyhanetol Let´s have that meeting. Can we find a time next week?

[ulde01]

I am changing the name for this component to Progress indicator (instead of Step indicator). This component is almost ready.

[henrikhoglundseb]

https://designlibrary.sebgroup.com/components/upcoming/progress-indicator/#usage

The procress indicator atom is out in the design lib. Its basicly just a description and a green and white line.

@reyhanetol @TheresaHedlund @danielhakanssonseb if you want you can use this for your project taking the atom making it into a component.

[didzisspruds]

As agreed in the last meeting I'm adding an example with context of Progress / Loading indicator (this is what we consider to implement in Baltic's IB). The context: the loader + text is the central / only element in the page. There is a label which provides explanation to the user what is happening.

It would be needed to have something in our library which could support such context / situation.

P.S. Might be that a separate card is needed for this.

[ulde01]

I am closing the discussion for this component for this design version. (You can still add your opinions and feedback but it will be for the next version)

Specification
This is the specification for the Progress indicator:

• Used for mobile and desktop
• Height 8 px
• Filled step: Dark Green 1
• Unvisited step: Grey 8
• Gap between steps: White 2 px

Review
At the review, Design working group decided to WAIT with publishing this component so we can evaluate the use. We will keep it under Components/Upcoming for a while. You are still welcome to use it, but please give us feedback on how it worked.

Ulrika,
Design management