Progress Indicator Ideas
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
112,694,492,260 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
25 Responses
Not quite feeling it yet, but definitely heading in the right direction...
If you have any other ideas, I've attached the PSD for you to have a play with (including a few other ideas).
almost 2 years ago
Proud of you. Its coming along nicely, not too sure about the top progress bar. My least favourite of the four. I like the second but feel the numbers look a bit out of place.
almost 2 years ago
Pro
Tyce Clee
I second that from Karl re the 2nd bar being the best of the lot. How would it look without the 3 and 4 numbers, just greyed out circles?
almost 2 years ago
Second on the left for me, too.
And I like the numbers. They reinforce the interdependences of the process.
almost 2 years ago
I like all of them, nothing wrong with the first, just different from the others.
almost 2 years ago
Assuming more info is accessible by clicking the nodes, could the bottom left be used as a hover state for the second node of middle left?
Heck, you could keep the numbers hidden in the remaining nodes until hovered, too.
almost 2 years ago
Pro
Fares Farhan
Nice work Jesse.
+1 for the first, it has clean and straightforward presentation, but maybe with number 4's progress bar end.
p.s : I think I'm gonna steal this.
almost 2 years ago
Pro
Kevin Ohlin
3rd one looks like you should be able to drag the indicator from one stage to the next. I like the 2nd one.
almost 2 years ago
Pro
Natan Nikolic
I'd go with the 3rd option and inverse the current step. Green icon on white bulb that is.
almost 2 years ago
Pro
João Oliveira Simões
I really think the second one is perfect. Wouldn't change a pixel.
almost 2 years ago
Pro
Ionut Zamfir
Awesome!
almost 2 years ago
The second is the best imo :) anyways looking very nice
almost 2 years ago
Pro
Sean McCabe
Another vote for the second.
almost 2 years ago
Interesting... when you reach the 'Delivery' marker are you actually done or 'almost' done, if I remember correctly you'd still have to pick to 'deliver now' or 'schedule for delivery' and also pay if you have no credits. In other words... do you need another step after delivery to best convey how much is left to be done?
I'm just thinking that otherwise you will end up with a scenario where the bar is complete but you still have some steps to work through.
almost 2 years ago
Pro
Phil Coffman
I'm leaning towards the middle one on the right in your "spectrum.png" attachment. To mean it combines all of the best parts: shows what's been completed, your progress with the green line, maintains the "2" for the 2nd step (keeps the context), and shows the remaining steps.
almost 2 years ago
Pro
Kuba Stanek
1st looks most obvious and it's making process feel shorter.
almost 2 years ago
Pro
Jason Long
I'm also digging #2. Nice work all around.
almost 2 years ago
I like #1 and #2. Very nice work man.
almost 2 years ago
Pro
Tyler Galpin
J. Dodds - the middle variation is the most effective. It's easy to get carried away with progress indicators since they are super fun.
The middle version is subtle, clean, and straight-to-the-point.
I CHOOSE YOU, NUMBER TWO!
almost 2 years ago
Ahahahah. Thanks everyone, and thanks for making my morning, Tyler :D
almost 2 years ago
@Tyler: So glad that wasn't a picture of a poop.
almost 2 years ago
Pro
Morgan Allan Knutson
Two is great! I feel like a fourth option could be large bubbles with flat iconography inside of each, e.g. a truck for delivery.
almost 2 years ago
Good stuff. I like the 3rd one most of all. Thanx for sharing)
almost 2 years ago
Rebound
Progress
by Jan Beck
Little refinement for a project
over 1 year ago
thanks!!!
10 months ago