Like title case, I don’t tend to use lower case buttons labels that often.
Mean red button game full#
Note: Yes, it is sentence case, and yes, there should be a full stop if it was true sentence case - but for the love of all things good and designy, please don’t add a full stop. I use sentence case for more ‘friendly’ or ‘conversational’ platforms. In terms of tone, I would imagine that it is halfway between ‘professional’ and ‘conversational’. I tend to avoid using title case as it doesn’t read as easily as sentence case. Material Design uses buttons with all caps. I use them for more ‘professional’ type platforms. Here are some general guidelines that I use: You should also decide on what font case to use. ‘Save post’, ‘Next step’, etc, as opposed to ‘Save’, ‘Next’ - but the choice is up to you and your users. I like to keep the ‘verb’ + ‘noun’ structure when writing button labels - this makes the action more prescriptive, e.g. While ‘Back’, and ‘Next’ aren’t verbs, in the context of an interface they seem to work in the same way. Most buttons contain verbs to indicate what the button will do, e.g. And if you are a better person than I, then it helps a lot to decide on your rules early on in a project to avoid having to painstakingly go and change all your button copy later. The trick to button labelling is consistency.
Most designers seem to use the same visual cues for hover and focus states. Luckily, we live in a time where we can make our own custom button states. The default focus state is the blue ‘glow’ that you have undoubtedly seen during your internet explorations. If you were to start typing, only that input field - not another - would start populating.
This means that there needs to be a ‘focus’ state for a button to show that it is ‘clickable, but not clicked yet’.Īnother example of a focus state is when you click on an input field. The user will click ‘tab’ to move around the site, from one navigational link to the next. If your user has poor fine motor skills, they may need to use tabbing navigation. (It was for me anyway.) So the easiest way to explain it is to show its use, then work backwards. The focus state can be a bit confusing to wrap your head around. So if you are designing for an app, don’t worry about this state. Don’t be a N00b tip: Hover states will never be seen on tablet and mobile because your fingers can’t ‘hover’.
0 kommentar(er)
