User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to style all the HTML elements by making a custom style sheet. Till now, i have succeeded in making only the radio-buttons and check-boxes. here is the link for the demo. I wanted to know what are the formal guidelines for UI designing while styling these controls so that they appear more clickable. And what more could be done to make the example more pleasant looking.

share|improve this question

closed as too broad by JohnGB, rk., greenforest, Matt Obee, Gala Jul 9 '13 at 14:58

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.If this question can be reworded to fit the rules in the help center, please edit the question.

Welcome to Unfortunately, your question is too broad. If you have a specific problem, please ask about that. – JohnGB Jul 9 '13 at 11:52
I second @JohnGB, you should try GraphicDesign forums for that. And btw get rid of the dropshadow from the input field. – Nash Vail Jul 9 '13 at 13:07
This question appears to be off-topic because it is about graphic design. – Gala Jul 9 '13 at 14:58
up vote 0 down vote accepted

For this particular case, I would implement the following tweaks (some may be due to my personal preference, though):

  • I am not sure about having checkmark inside the radio button - it's totally uncommon, so I would switch to a dot instead. Right now only the shape of the radio button gives a clue that it is a radio, not a checkbox
  • switching the state should change the state inside the checkbox/radio instead changing the style of the element totally
  • you have a hover state while an element is not selected - it would be nice to provide the same for an element that is selected as well
  • I would block highlighting the field name (if someone double-clicks on text, the option gets highlighted).
share|improve this answer
" switching the state should change the state inside the checkbox/radio instead changing the style of the element totally", @Dominik, I didn't understand this part of your answer, do you mean that the blue icon shouldn't be there at all? and also what do you mean by highlighting the field name? wouldn't it be more convenient if the user just clicks on the link and the option gets selected? – Anuj Kaithwas Jul 9 '13 at 10:56
Yes, kinda. This may be my personal perception, though. The whole idea of checkbox is taken from real life (paper forms) where you just put a mark inside a box. In this case, there is an overlay placed over a box, which - for me - is a little bit disturbing. But as I said, it may be just my perception. Functionally it does not matter, user will know what has happened. Maybe it would be enough to keep the border visible in the selected state. – Dominik Oslizlo Jul 9 '13 at 10:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.