UI development and Usability Theory: Why is the cursor tilted and has a “tail”?

Last Modified: Mar 13th, 2020 - Category: UX, Theory, UI Design, UX Theory
UI development and Usability Theory: Why is the cursor tilted and has a "tail"?

UI development and Usability have a direct relationship, as no interface will be complete without proper investigation and testing.

This article shows how a simple UI element we use everyday has a very interesting history and a lot of research behind it.

Introducing… the almighty CURSOR!

user interface theory: the cursor

The “arrow”  cursor is always tilted, with its top tip to the left up and the “tail” to the right down.

We can see the steep inclination (it is between 25 and 30º), with the direction mentioned above.

However…. Why is the arrow tilted and not right? 

This is a classic example of user interface research in action!

UI Development and Usability concerns

The cursor was invented in 1981 by an engineer from the Xerox company named Douglas Enlglebart

Originally, the cursor pointed upwards but vertically, without any inclination. 

Here is the first image we know of the first cursor (almost invisible, unfortunately). It was vertical, and after the first tests, it was changed by the same company by adding inclination.

UI development: original cursor from 1981 Xerox

If you like the history of technology and data documentation, you can see the original Xerox PDF document The Optical Mouse, and an Architectural Methodology for Smart Digital Sensors .

But then, why is it inclined? 

Well, remember that the resolution of the screens was very low. In addition to that, monochromatic, so the vertical cursor was very similar to other characters. 

If you look closely, the cursor was the same size as the characters, and in fact, it was just another character. 

It didn’t even float in any way like modern cursors, but instead slid vertically and horizontally, similar to when we use the positional arrows on our keyboard.

In the following image you can see a cursor example from the Xerox document cited above:

Final and definitive cursor developed by Xerox UX Department

In the upper image, we can see the final cursor has its definitve inclination and “floats” (in a very rough and rudimentary form). As you can see, the drawn pixel is the same arrowhead’s pixel. 

But by that time, this was a revolution that changed everything!

The comet’s tail (no, sorry, the cursor)

To understand the problem, see the following image, where I take the detail of the cursor that we see above and take out the “tail” .

Usability concerns on UI design

You can see that this cursor has a different colour, but it was the same colour as the fonts, since they were monochromatic monitors. 

But even with this aggregate of a different hue … can you see the cursor properly? 

And more importantly: where does the arrow point?

This was no minor problem, in fact it was of fundamental importance for this new technology. And it also was a cornerstone in UI development. A technology that was born at that time and that we continue using naturally today. 

The answer, of course, was to add the tail. This tail gives directionality and is related to the concept of archetype developed by Carl Jung: it is in our collective unconscious that an arrow is an arrow and where it should point.

Digital equivalences and usability concerns

In addition, a tilted cursor, becomes a digital equivalent of another analogue process. Let’s look at the computer keyboard Plato 1976

UI development: Plato keyboard
Image: in: User: Aumakua at the English Wikipedia., Public Domain

Or the Model F from IBM, 1982:

Model F keyboard preceded the cursor
Image: Raymangold22 – Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=37430686

In both keyboards, we can see the cursor arrows, as we have them in our current keyboards. The keyboards have arrows with their tails, and the mouse will replace (or at least complement) these keys. Thus, the visual relationship will be the same: a triangle (or arrowhead) with a tail indicating orientation.

Disclaimer: This content was translated to English from the original we wrote in Spanish, available in UXpañol

We can improve your business!

Let us help you with the best solutions for your business.

It only takes one step, you're one click away from getting guaranteed results!

I want to improve my business NOW!