Form Completion/Guide (Animated)
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.
111,805,635,645 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
20 Responses
Pro
Glenn Hitchcock
Experimenting with a way to reflect the form's completion in the Submit button, whilst using transitions to guide their eyes through the form. Not actually Roger Moore's contact information.
about 1 year ago
Pro
Adam Amran
Nice piece of work here, loving the colors ;)
about 1 year ago
Pro
Farzad Ban
Love it.
about 1 year ago
Pro
Jack Bingham
This is a really nice idea. Only thing I don't like is how the arrow shifts the circles to the left. Maybe keep the arrow (greyed out) until completion so the indicators don't move? BTW — how did you animate this — is it a GIF or movie?
about 1 year ago
Pro
Glenn Hitchcock
@Jack Bingham The reason for the left shift was to keep the innards of Submit button centered at all times, and so when the form is complete the movement would trigger the eyes to move down. I do agree as it isn't as nice as something popping out of the dots. Perhaps I should've increased the size of the Submit button?
It's a .gif that I did in CS5 with the Animation panel. Still haven't found a reason it wasn't included in the CS6 beta.
about 1 year ago
Pro
Max Litvin
Cool!
about 1 year ago
That is super neat. Awesome!
about 1 year ago
Very interesting solution. I also like the icons that go along with each form field, but wonder if they are entirely necessary.
I don't mind the shifting of the content in the button, I think it does help draw they eye down there once in the "phone" field. The coloring of the dots was subtle enough that I didn't notice it the first time around, which is good.
about 1 year ago
Pro
Rob Palmer
I love this!
However, a caveat! What happens if I remove the content of the center input field? Will it remove the center dot in the arrow and the arrow head?
Just a thought :-)
about 1 year ago
Pro
Glenn Hitchcock
@Rob Palmer Arrow head would disappear, SUBMIT would fade out again, and the dots would be (On) (Off) (On).
about 1 year ago
Will this beauty be released as a css/ html thing or is it just a experiment? :)
about 1 year ago
Pro
Rob Palmer
@Glenn Hitchcock Thought that would be your solution, cool :-)
about 1 year ago
Ahh this is brilliant! Love every pixel of it.
about 1 year ago
Pro
Ricardo Salazar
Great idea.
about 1 year ago
Pro
Glenn Hitchcock
@Finn Kraft Purely an experiment.
about 1 year ago
@Glenn Hitchcock Oh :(
Looks really sweet though!
about 1 year ago
Pro
David Luhman
Oh my, this is great way to subtle way to show actionable process!
about 1 year ago
Love this idea. The association might be apparent even sooner if the dots also indicated the field in focus (eg. only the active ring/dot is 100% white). Probably overkill, but could be interesting to see.
about 1 year ago
Pro
Shota Mickaia
Really great idea :)
5 months ago
Pro
iffi
Impressive
5 months ago