I've been playing around with different concepts for a simple guided tour of our app. It would consist of a few steps. Each step would explain an element or feature with a small tooltip. The main goal is to render a smooth tour, and motivate the user to go through all the steps.
To do so, I had this idea of showing a little progress bar. I think this would be an interesting way to show the progress instead of a standard "Step 3 of 5" text. Of course, if you have a lot of steps this wouldn't work.
6 months ago
Great design!!! I like the light of current step!
Love that subtle indicator glow.
@Vincenzo Petito @Housseynou Fall thanks guys!
That indicator is brilliant! Awesome work.
Very Smart Execution. Just a thought though, how about taking the black part in the bottom which consists circles of steps in the top and separating the next button from there and keeping it exactly below the content in the white container? This way i would know on what step i am on and also after reading the descriptions i can always have the next button in the bottom of my content.
For now what i see does work as a user, it serves rightly in the bottom but i think the steps section can be separated from there and kept some where on the top.
Beautoful!! ang great UI!
@Jonathan Moreira Great!
@Kartik Mahant makes sense mate. The reason why I put the progress bar at the bottom it's because it belongs to the "tour information" panel. The top part belongs to a specific step, so the content would change based on the step. The bottom wouldn't, it's like an overview of where you are in the tour with a way to navigate through by clicking on next. So having the timeline on the top part would in my opinion break this logic as the timeline is an information of the tour itself, not the step. Not sure what I'm saying makes sense, kinda hard to explain, but anyway thanks for the input!
@Jonathan Moreira well i didn't gave much thought on the title of the shot :) what you say does make sense in that context.
But seeing the entire app would make more sense then a part of it and my thought were based on the shot itself. But thanks for clearing it up on that. Appreciate it.
Thanks @Simon Aleksander @Daniel Klopper and @Adrian Brand!
@Kartik Mahant no worries man, yeah hopefully it'll be soon enough, we are still in stealth mode working hard on the pre-beta.
@Jonathan Moreira good to hear about it. And all my best to you guys. Hope to see it live soon :)
Love the progress bar concept! @Jonathan Moreira ! Is that how the user can click back to one of the previous steps?
@Clifton Lin thanks! The idea is to make him go forward only. The circles won't be clickable, as we don't want it to go from step 1 to step 3. So it's either he continues the tour step by step by clicking next, or he quits it by clicking the "x" button. There would still be a button to re-start the tour if necessary.
This one looks great. Maybe add a Skip button to reduce annoyance factor?
by Alex Paxton
Replaced the 5 dots progress indicator with a progress bar. My rationale is that users will be deterred from clicking on the progress bar itself.
Although, in the context of a full layout, having the "Next" button be a louder color makes perfect sense, here I have taken it down a bit.
6 months ago
looks so cute
@Anton Kudin thanks man, actually the user just needs to click on the 'x' to close the tooltip and stop the tour. Also it's the user who chooses to run the tour, we don't force him.
by Malte Westedt
Made it a little different, each step has its own loading progress bar.
check out the retina version.
Hope you like my rebound. :)
by Marcos Paulo Pagano
by Jason Li
by Naim Chayata
by nurul amin russel
Here goes my rebound. @2x
by Charles Treece
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.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.