This is a very small part of something I've been working on internally. While I'm aware of the better naming conventions for First/Last name, I'm more interested in feedback on the required field indicators.
I'm used to an orange star being next to something, so I like the coloured version. The boss prefers the flat grey. It's a bit hard to take context here but the overall design is somewhat muted, so this little cluster of colour is a bit exciting for a change. Anyway, thoughts? Grey? Orange?
about 2 years ago
I like the required field indicator beside the actual field, how ever my first impression was that it was a processing status in ajax validation as the user fills in the info. It looks good in orange though : )
Maybe a bit old school but users may be more used to seeing the * beside the actual label.
The grey is a lot less intrusive, it makes the red a lot more prominent when something goes wrong. The orange does lift the whole form a bit.
Gut instinct says go with with the grey.
@Daniel The aim is to establish a "one stop shop" for feedback. Inline feedback is a bit of mess everywhere at the moment. You can have required field indicators (* or (Required)), inline error messages, error overlays, big red fields, ticks and crosses etc.
Hopefully in one small area you can convey all of that.
Fields that are required. (*)
Fields that are currently validating against the server (spinner)
Fields that passed validation (username available, passwords/emails match)
Fields that fail criteria (too short, don't match, etc)
Hovering over the indicator can reveal a contextual tooltip telling you exactly what went wrong, but 9 times out of 10 you probably just forgot to fill in a missing field - which is why a tooltip removes the clutter from the interface.
It's been 22 days so I'm not sure if the ship has set sail on this one, but neither color is doing it for me. They both look nice, but I don't know that as asterisk means 'required' unless it's in red superscript. And it looks like you're already using red for something else. I realize it's not as sexy, but any way to sneak the word 'Required' in there? Or as least 'Req.'?
@Ted I know what you mean, and I think what @Koodoz wrote on the other shot is pretty valid too. He mentioned them looking raised and clickable, and whether that was intentional.
If you read the comment above you'll see I'm trying to create a one-stop-shop feedback area, so that the user knows if it's required, is sending to the server, has something wrong etc. That means we have to avoid using words if possible.
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