Some usability reminders about using capitals and writing menus

Recently, I’ve seen a few no no’s on clients’ websites I’ve been working on. Old school usability errors. Surprising these still linger. Many would want to smack their heads on the table, curse and generally wonder at the minds of those in charge of said websites. Well I say, wait! Don’t shout “WTF!” Often a reason or two.

USING CAPITALS. EVERYWHERE

This is a commonplace. And I swear it’s on the increase. The thing is, text in all capitals looks pretty. Its very symmetrical. It looks right. But folks can’t read capitals as well as lower case or leading case. And that’s it, plain and simple. For example:

• try not to use it on anything you are trying to make easy to scan i.e. headings and titles
• Try not to use it on anything you are trying to make easy to scan i.e. headings and titles
• TRY NOT TO USE IT ON ANYTHING YOU ARE TRYING TO MAKE EASY TO SCAM I.E. HEADINGS AND TITLES

Did you pick out the word ‘scam’ before you’d read the whole sentence? Now imagine this is in the context of a page of text and images all jarring for your attention.

Designer/client: “But I want to use it for my titles!”
“Why?”
“…well, it lines everything up. It just looks better”

I know. Look at my primary navigation up above. I use capitals too. ‘Cos it looks pretty. But, its dangerous! Uniformity is not good for reading text. This is really very important on web pages because “79% of Web users scan rather than read” and reading online is “about 25 percent slower than reading from paper” [Why Web Users Scan Instead of Read]. “Ah but! What about iPads, Kindles?” Well “The iPad measured at 6.2% lower reading speed than the printed book, whereas the Kindle measured at 10.7% slower than print” [iPad and Kindle Reading Speeds].

The excuse “But it’s our brand!”
Unfortunately, it still applies. So you need to either stop it and take digital to heart or have separate brand guidelines for digital. But bear in mind this: do you want your most critical brand statements to be difficult to read?

Rule of thumb
Try not to use it on anything your trying to make easy to scan i.e. headings and titles.

As an aside, “aoccdrnig to a rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht frist and lsat ltteer is at the rghit pclae” [Language Hat].

Writing essays in tab menus

Sometimes it’s difficult to come up with the right title that encapsulates the page you’ve written. But, given that you did spend all that time writing it, it’s just if not more important that folks can find said article. Menu items need to be easily scanable otherwise users won’t read/see them.

Rule of thumb
Menu items must be one or two words, but ideally one. That’s it. Not three, nor four. And five is right out. And if your navigation is horizontal it’s even more important. This applies to tabs too.

Best practice recommends “the labels are short and use plain language, rather than made-up terms. Tab labels should usually be 1-2 words. Short labels are more scannable; if you generally need longer labels, it’s a sign that the choices are too complicated for a tab control” [Tabs Used Right]

Screenshot of example

Better tab titles would be: “Benefits” and “Guarantee”. Bear in mind that the above screen-shot is taken out of context. The context of a whole page that someone’s trying to scan through. Not read, scan. Users have a task they are trying to accomplish. That task is probably not on this page. The critical page is the article or content page. The final destination where all the juicy-task-answering-info is to be found. This page is merely a stepping stone. Imagine the user’s foot is falling onto the page. She doesn’t have long before her foot lands. She’s looking where to put it. Confusion may cause her to stumble. And no one likes to stumble. She will most likely back off and try another bridge i.e. website, to answer her need.

The excuse “but the CMS does it!”
This bad practice is too often compounded by content management systems [CMS] which auto-generate menu titles from page titles. Don’t blame the tool, but probably don’t allow it to do it. Additionally, try and apply this best practice to breadcrumb trails too. Don’t use the full title, just use a cut-down version that’s easy to scan. I use just “post” or “article” in the breadcrumb trail above to indicate to the user where they are in the navigation. Keeps things simple.

There’s often a reason for usability bad practices online. Often folks taking the path of least resistance “I’m just following the brand guidelines”. I take this as a reminder: as long as the path of least resistance allows for usability bad practices, they shall remain alive and kicking.