Feels like the tick and cross should have green and red on for instant recognition. Even just a subtle tint
5 months ago
@Murat I'm experimenting with starting with the simplest option first, and then adding complexity including color only where necessary. My first instinct is exactly what you said, but its a worth experiment so I'm trying to honor my constraints :)
Love the loading thingy! Yeah I also agree with @Murat Mutlu about the indication like adding a green color to the checkmark and the success message, and a red color to the "x" and the error message. Great job though!
Nice work! (speaking of patterntap heehee) I think you'll dig this (old) example of form validation from Livestream. It pretty-much changed the way I looked at validation. —not that it's the best example, but a fantastic way to keep the user moving-forward on a process, and even saving/returning to finish the process in the future. (see 'save for later' on the bottom) https://www.evernote.com/shard/s11/sh/fd752d53-36f6-49ef-b33d-b747bc058688/a894260e58857b6015c8c60ac8680cc3
@Matthew Smith I work in a similar way - contrast first, then colour if necessary. This is looking great!
Speaking of which, I wonder would the ticks and crosses work better on the same contrast level as the field border? At the minute they draw considerable attention beside the text, it makes them feel a bit like an action rather than a label (not label in the HTML/semantic sense - you know what I mean) :)
@David Merfield Lots of ways to skin a cat don't you think?
@Jordan Moore Probably a healthy thought. I was concerned that the grey might still feel in process rather than Finished!
@Matthew Smith Good call actually, a faded grey might lead you to think "this isn't quite finished" which would probably attract more attention, or the need to action than the solid darker colour.
In that case, I think it's spot on! The solid colour trumps the partially transparent grey I was thinking about :)
@Matthew Smith, like how you're using both labels and then placeholder text for additional hints/help -- I do the same. Seen too many times when sites only use the placeholder text.
Also baymard.com has some good articles about mobile form usability, including: http://baymard.com/blog/mobile-form-usability-label-position. They are usually worth the read.
@Matthew Smith you can keep true to your constraints by perhaps adding color only to the X (red). The "plus" isn't something I need to take action on, so not important to highlight. Just a thought.
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–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter