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

UI development and usability are inherently tied. A complete interface cannot be achieved without thorough investigation and testing. However, it’s not just about the grand designs or complex functionalities; sometimes, the simplest elements that we frequently interact with hold stories and research worth knowing.

UI development: The Tale Behind a Simple UI Element

We often overlook everyday UI elements, assuming their existence is due to a designer’s whim or a random choice. But that’s rarely the case. Even the most straightforward icons or buttons have tales to tell. They’re the product of countless hours of research, design iteration, and testing.

Behind every UI development, there’s a reasoning—a purpose. Research helps ensure that the design meets its intended function and serves the users efficiently. Over time, with technological advancements and changing user behaviors, these elements might need adjustments. Staying updated and understanding the history helps in making informed design decisions.

The Leaning Cursor: A Legacy of User Interface Design

The iconic “arrow” cursor universally found on our screens has a peculiar tilt. It points towards the upper left, while its “tail” orients towards the lower right. This angle is no random detail but a nuanced aspect of design, typically set between 25 and 30 degrees. But the question that naturally arises is – why is the arrow tilted in this particular manner and not upright?

This, dear reader, is a sterling instance of the profound impact of user interface research on everyday digital interactions.

A Primer on Cursor Orientation

To appreciate this leaning cursor’s significance, it’s necessary to understand its context within the broader scope of user interface design. Every element we interact with on a digital interface – be it buttons, menus, or indeed the humble cursor – is the result of careful design choices. These decisions are informed by a combination of user behavior studies, technical requirements, and aesthetic considerations.

So why the tilted arrow? What purpose does this slant serve?

UI Development and Usability concerns

In order to fully grasp the significance of the leaning cursor, it’s essential to first frame it within the wider narrative of user interface design. Every component we interact with in a digital interface – buttons, menus, or the humble cursor itself – is born out of meticulous design decisions. Such decisions are shaped by a blend of user behavior analysis, technical constraints, and aesthetic sensibilities.

Now, let’s address the question at hand: why does the cursor tilt? What function does this lean perform?

UI Development and Usability Concerns

The concept of the cursor can be traced back to 1981, accredited to an engineer from Xerox, Douglas Englebart.

In its earliest rendition, the cursor pointed upwards in a strict vertical alignment, devoid of any incline.

The image here depicts the first known visual representation of a cursor. Its almost invisible appearance gives us a clue to its initial design – a straightforward vertical alignment. Following some preliminary tests, this design was modified by the same company, adding a distinct inclination.

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 or check our articles on UX History.

But what gives rise to its inclination?

Taking a look back at the past, we are reminded of the early days of computing, when the resolution of the screens was quite limited. Beyond the pixel scarcity, screens were monochromatic. In this primitive landscape, the vertical cursor bore an uncanny resemblance to other characters.

Upon closer examination, you’ll find the cursor shared the same dimensions as the characters on screen. It essentially behaved like another character in this digital interface. There was no resemblance of the floating behavior we associate with today’s cursors. Instead, the cursor moved in an almost rigid manner, reminiscent of the way we navigate our screens using arrow keys.

The illustration below offers a glimpse into the past. It is a snapshot of a cursor from a Xerox document, clearly demonstrating the features discussed above:

In the image above, the cursor exhibits its final tilt and appears to “float” in its basic form. Notice that the drawn pixel aligns with the pixel of the arrowhead.

Back then, this shift presented a notable change in UX design.

The comet’s tail (or rather, the cursor)

For clarity on the issue, refer to the subsequent image. Here, I’ve zoomed into the cursor from the previous image and removed the “tail.”

When we venture back to the days of monochromatic monitors, we come across an interesting aspect. The cursor, an integral component of the user interface, bore the same color as the font. They were indistinguishable in terms of color.

Now, let’s turn our attention to this cursor. It adopts a different hue, doesn’t it? However, the critical question that arises is: can we discern it effortlessly from the rest of the screen’s content?

Another thought to mull over is the direction of the cursor’s arrow. It may seem like a simple question, but during the early stages of this novel technology, it was anything but.

What might appear to be a minor problem was actually a significant challenge. It wasn’t just about aesthetics or user preferences, it went beyond that. It turned into an essential consideration, particularly for the novel technology that was still finding its feet.

This seemingly small problem led to a transformative moment in user interface design and UI development. A technology that was born during this era, and a concept we continue to employ today as if it’s an inherent part of our interaction with devices. The cursor, as inconsequential as it might seem at first, was and continues to be, a cornerstone of UI development. It’s a reflection of the trials and triumphs that accompany the evolution of technologies.

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

Or the Model F from IBM, 1982:

Observing both types of keyboards, the presence of cursor arrows becomes evident. These are familiar features from our current keyboards. The keys bear arrows with tails, reminiscent of our mouse cursor, creating a visual relationship. Essentially, the mouse could potentially substitute or complement these keys, maintaining the same directional indication.

The Influence of Small UI Elements

This is a small example of how a seemingly small UI element has influenced further user interface development. Often, people mistakenly interchange user interface development with design, but they are not always identical. A seemingly minor feature like the arrowed cursor has influenced how user interfaces have evolved, paving the way for future growth and refinement.

Fabio Devin

Fabio is Bachelor in Marketing, Master in Human Computer Interaction and a UX Evangelist.

He worked for some of the biggest companies in the world. As such, he has developed entire systems and businesses for clients of all sizes.