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.
Answer
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).
No comments:
Post a Comment