Scannability: A case for uppercase

Published

June 29, 2018

Marjolein ‐ UX Designer

I’ve put together this article about scannability as a result of a conversation I had recently with a Product Owner of one of WORTH’s clients who wished to only use lowercase characters in the application we were developing, like for example in table headers. They felt this would be “easier on the eye.”

I’ve put together this article about scannability as a result of a conversation I had recently with a Product Owner of one of WORTH’s clients who wished to only use lowercase characters in the application we were developing, like for example in table headers. They felt this would be “easier on the eye.”

As a UX Designer, I couldn’t really get behind this approach. However, I didn’t have solid arguments or research to support my position, other than the assertion that using lowercase letters is simply “not user friendly.” To support my position, I did some reading to defend my belief that uppercase characters need to be part of a user-friendly, scannable User Interface. In this article, I pin-point important reasons in favour of using uppercase characters in UI design and describe how these should be applied.

SCANNING & HIERARCHY

To begin with, just because people can read and understand content doesn’t mean that they will. During the average page visit, users actually only read 28% of words on screen - they scan, rather than read. If a visitor wants to find content, identify controls, or to complete a task, they will scan until they have determined where they need to go. Therefore, scannability of words is key.

UX designers can help users accomplish their objectives by designing a clear visual hierarchy. Visual hierarchy refers to the arrangement or presentation of elements in such a way that implies importance (e.g. where the eyes should focus first, second, etc). To create a visual hierarchy for text we can make use of methodologies, such as styling (bold, italic, color, size) and markup (h1, h2, etc., ankers, buttons). However, the foundation of communication and interpretation of text is the use of characters, which in turn form a word, which in turn form sentences.

The value of mixed-case typesetting

Figure 1 illustrates the “Onion-Layer” model of legibility. The upper half (grey background, where users search where to go to or what to do) addresses single letters and words. Here it is all about a legible text setting and the recognition and distinction of letters. Hence, in this area, uppercase letters perform very well. They have a very simple and distinguishable letter skeleton, without leaving room for ambiguity. On the other hand, lowercase letters might be more troublesome in this regard. Just think of the similar outer shapes of ‘e,’ ‘o’ and one-storey ‘a.’ Differences between these can easily blur together under poor viewing conditions. Therefore, mixed-case typesetting (using both upper- and lowercase characters) increases the recognition and distinction of letters.

scan image 1 Figure 1: Onion-Layer model of legibility

To increase visual hierarchy, recognizability and distinguishability of letters and words mixed-case typesetting (upper- and lowercase) is necessary.

WORD RECOGNITION

Secondly, to facilitate ease in scanning text, we need to know something about word recognition.

Fixation point

To begin with, as you might know, the human eye does not move continuously along a line of text. Instead, it performs “saccades” - rapid eye movements from one word or phrase to the next. This is caused by the fact, that only the fovea—the central part of our retina—allows for a sharp and detailed visual perception (Figure 2).

scan image 2 Figure 2: Only the fovea - the central part of our retina - allows a sharp and detailed visual perception

In a typical page scan, just four to five letters around the fixation point are viewed with 100% acuity.

Still, an experienced reader will also gather information in advance from outside the fovea. This is called “peripheral vision” and while reading, this can include up to 15 letters, which are unfortunately too blurred and distorted to be read in a true sense. However, capitals can be found! This is due to the Bouma shape.

Bouma

Secondly, in typography, a “bouma” is the shape of a cluster of letters - often a whole word - or the envelope around a word (Figure 3). Some typographers believe that when reading, people can recognize words by deciphering boumas, not just individual letters. They also believe that the shape of the word is related to readability and/or legibility. Evidently, this is a natural strategy to increase efficiency in reading.

scan image 3 Figure 3: When reading, people can recognize words by the support of deciphering boumas (not just individual letters) when using ascending and descending characters and not all capitals

scan image 4 Figure 4: The same paragraph set in mixed-case and in uppercase

In Figure 4, the same paragraph is set in mixed-case and in uppercase and the latter has been scaled down so it takes up roughly as much space as the mixed-case text. Which text can you pick up more information from?

The mixed-case text clearly offers much more information. Even though the single letters are not clearly recognizable, we complete the remainder of the words in the whole paragraph.

text in italicWhen not focussed on the next word(s) that come after the word you are focussed on, due to the bouma shape, uppercase characters (when using in mixed-cased typography) can be found and provides therefore faster scanning possibilities.

TITLE-CASE VS. SENTENCE-CASE

Thirdly, in order to create hierarchy and provide text scanning possibilities that are supported by word recognition, designers must make use of mixed-case typesetting.

There are two main methods which govern the use of uppercase characters. I will leave the type-set “All uppercase” out of this discussion, because this has proven to be more difficult to read:

  • Title-case: We capitalise the first character of each “important” word, following the rules of The Chicago Manual of Style.
  • Sentence-case: We capitalise only the first character of the sentence.

You can find examples of both methods in Table 1:

Title-case Sentence-case
Manage your Account Manage your account
New File New file
Move to Trash Move to trash
Always on Top Always on top

Table 1: Examples of title-cased and sentence-case styled labels

The key benefits of the Title-case method:

  • Provides anchor points for scanning texts (identifies which words are scannable)
  • Lends weight to important anchor points (identifies which words are important)
  • Extends fixation duration on important anchor points (to make a well informed decision)
  • Readers can jump easily to the next word that they can find through the fixation point (to make a well informed decision)

Figure 5 illustrates screenshots of typical applications which demonstrate that title-cased styled typography is quite common. However, you cannot use title-case in every application, nor every interface element.Also, the use is dependent on style-guide and tone-of-voice, as we tend to view title-case as more formal. When not using title-case, we use sentence-case. So, in each interface, we apply the use of uppercase characters in a mixed-case typesetting.

scan image 5

Major software applications using title-cased styled typography. If not, sentence-case is used. So, in every single interface, the use of uppercase characters are used in a mixed-case typesetting.

Below, in table 2, you will find the style guide which we at WORTH will be using in the concerned applications regarding applying title-case and sentence-case:

Title-Caps Sentence Caps
Button names Alternate text (ALT text) used to describe images
Column headings Check box labels
Command button labels Dialog box introductory or explanatory text
Floating toolbars File names
Icon labels Group box labels
Menu names and menu commands InfoTips
Palette titles List box entries
Tab titles List box labels
Title bar text Messages
Toolbars and toolbar button labels Option (radio) button labels
ToolTips Status bar tips
Page titles Text box labels
Navigational elements -

A WORD OF ADVICE TO IMPROVE SCANNABILITY

In order to create textual hierarchy, as well as more legible, scannable texts and words, it is key to provide word recognition. Ultimately, this enables users the opportunity to make well-informed decisions. Therefore, it requires the use of uppercase characters in the UI in a mixed-case typesetting.

There are two methods whereby we can use uppercase characters in a User Interface: Title-cased and sentence-cased.

The title-cased methodology provides the most benefits for scanning elements and texts in a UI:

  • Provides more anchor points for scanning texts (what words to scan)
  • Lends more weight to important anker points (which words are important)
  • Extends fixation durations on important anker points (to make a well-informed decision)
  • Enables transition to the next word with a fixation point (to make a well-informed decision)

Get in touch

We'd love to hear
from you

This field is required
This field is requiredThe email address is invalid.
You must consent to the Privacy Policy

Thank you

We will get back to you as soon as we can.