In semantic vocabulary the "button" is a wrong term which belongs rather to UI components. Button-like UI component could be presented as tabs, links, etc. There is common quality for all of them: the goal. Which is ACTION.
There are PRIMARY actions which serve the main flow with one DEFAULT variation. Default action is emphasized in UI to highlight what would happen if you hit ENTER key or say "Submit", in the scope of current form or document. There is usually only one primary action on page/form/section.
NORMAL actions are serving various usual routine flows in app. On page usually there is more than one action. Usually it is implemented as a button.
ALTERNATIVE actions meant to swing the flow from usual. Often used for closing dialogs or cancel the multi-step flow.
DANGEROUS actions would need emphasizing of potential danger for the flow they trigger. Often in red spectrum text, outline or even background. Delete, change the password or access key would be good samples for this kind of action.
GHOST. The least important, de-emphasized in comparison with NORMAL. Often does not have own background and outline. Toolbar buttons are usual sample for such.
Synonyms and mixing up terms:
PRIMARY often used as a term for default action. In such case the "secondary" is used as a surrogate for primary and "tertiary" as surrogate for alternative.
ALTERNATIVE called a "secondary".
"info", "success", "warning", "danger" - all referring to different specialized flows. Which could be justified if your application has many flow "flavors" and some are common. In usual application there is no need for such generalization as flows actually meant to be limited and clear in understanding.
HTML elements for actions
There are semantic HTML tags which match the proposed actions categorization.
PRIMARY
button type="submit"
input type="submit"
input type="image"
NORMAL
button
button type="button"
button type="reset"
input type="reset"
input type="button"
Among other popular surrogates for buttons are A, LI, even DIV.
NOTE: using unconventional HTML tags when there is a normal one in standard would break accessibility and user convenience. It would lead to warnings in most of developer`s IDE.
The rule of thumb for substitution of button with A hyperlink would be the missing onClick handler and URL in href.
CSS properties
Width and height are dictated by usability requirements: it should be distinctive enough among page elements, be large enough to be clickable by mouse pointer and comfortably tappable by finger. That defines minimal dimensions.
Do not define width or height directly! It is a dangerous technique. The text inside would either be trimmed or overflow the action area. Even if you do not have that effect on your screen, on some user environments the text could be completely different due to translator, text size customization by device and/or by user. If you could not omit defining the action UI outer dimensions be polite and use min-width and min-height instead. But in usual app it is enough to use padding and inherit the text size.
Font size & line height. Better to be left unchanged for the reasons of respecting the device manufacturer and user choice. The line height is good when it matches the font. There is no need to define line-height manually but if you want to override some 3rd party lib, there is no better value than 1EM. Otherwise on some devices user would see the text cut-off. The ideal value for font-size would be 1REM.
Padding is the primary property to define action UI dimensions. With 1REM as ideal value, there are some cases when it should be tuned up: icons and images would use more vertical space than text. The text button takes 3REM: 1REM for text 1 REM for top and bottom padding. As icon meant to be 2x larger of text, the padding for iconized button would be .5REM. For image there is no need for padding as whole image would fill the space of 3REM.
TBD:
- relation of action types with emotional and branded palette.
- CSS properties example with dark/light variations
No comments:
Post a Comment