I can code the front end with the best of them – designing it is another story …
This is a screenshot of a form inside a modal box. I need to mark browser & HTML5 dependencies on each / most of the fields.
This form itself is cross-browser complaint, but the form output depends on the end-users browser – this is intentional and by design!!
Right now I’m using a background image inside the inputs. If it works on the browser the browsers icon is faded by 40%. If it does not work on a browser, that browsers icon is faded by 90%. If I increase the transparencies / fade any more it’s hard to discern if it’s “supported” or not.
I’ve tried icons in a tooltip (tipsy) but it seems clunky and I didn’t care for it. Because it’s a modal box – space is limited!!
I’m just wondering if anyone has a better way of accomplishing what I’m trying to do.
Personally, I would 100% get the icons outside of the inputs, and give them all breathing space (at least 5px-10px in between each one). You essentially have three blocks, 1- Label 2- Input 3- Icons
My first attempt at designing something like this would probably be to put make the label 100% wide, give it some padding and give it a very light grey background color, then put the input and icons block side by side underneath each label. And giving each of these new “big blocks” breathing space in between each other. Don’t worry about it getting to tall, it’s better to be a bit tall than cramped.
You should definitely go on show-and-tell websites, such as dribbble.com and search for different related terms and get some inspiration.
I hope this helps
^ like he said + I would keep them at the right side for easy eye-scanning. And I would make them at 100% – they are really hard to look at right now.
Or even just push them to the right so they get outside the input if you have enough space – that would be ideal.
Something like this?
That is an improvement, but looking at it again, have you considered getting rid of the label completely and using a placeholder instead? I made a very quick mockup of the basic idea of this that may be of help to you, I emailed you the link. Hope it helps!
Yeah, it’s much better in terms of usability. And avoid using placeholders, imagine all the data is filled – the user wouldn’t be able to know what was the placeholder. Placeholders are good for small forms (small contact form, search, etc.). And fade the unavailable ones to 10% or 20%, just to avoid having holes.
Ah yes Aleluja makes a good point about only using placeholders. I would still do what I sent you in the mockup and simply copy the block with icons and put it above the input (but make it half the height) and put the label in that. So you end up with intuitive blocks with a strong hierarchy. Show us your final design when you finish it!
I can’t use placeholder as half the time the values will be filled in – some of which are “True / False” so would be indiscernible.
So, for the time being, I’ve decided to go back to the Tipsy tooltips as I use Tipsy for a lot of other info as well.
Setting the labels, inputs and “browser support” as block elements was causing the modal to stretch more than 2 screen heights on a 30” monitor @ 1920×1200.
In the future I think I will turn this form into a tabbed panel at which time I will take everyones advise and use blocked elements.
Are the tool tips at least better than the icons inside the inputs?
Thank you everyone for the help.