649

Is this a legacy thing or does a tilted cursor serve a purpose? I can tell that the angle provides a totally vertical left edge which helps when highlighting text but what else apart from that?

EDIT: When the cursor changes to the little hand cursor while hovering over buttons, the angle seems to be smaller. Why the difference?

8
  • 27
    When you're highlighting text, the cursor changes to an I-beam on any decent UI.
    – Kaz
    Commented Feb 18, 2014 at 6:46
  • 10
    I have seen straight cursor in some old DOS GUI apps and have also tried it in Windows and Linux - straight cursor just looks and feels nasty like handling a spoon straightly perpendicular to your face when eating (feeding yourself) or positioning your elbow to the center of your body when giving a handshake... Also can cause some Freudian associations when thought about :-)
    – Ivan
    Commented Feb 19, 2014 at 4:26
  • 4
    Also, consider that some text (for cultural reasons or others) are written vertically, having a straight mouse would hide the next letter after the one you point at. Making it go towards the right side and down makes it very practical in many situations.
    – Aki
    Commented Feb 20, 2014 at 10:30
  • 2
    The historical reasons are given by some great answers here. However, I would like to add that a tilted pointer hides as less information as possible. Of course not in all cases, but generally, data is aligned vertically or horizontally. Therefore, the diagonally aligned cursor is not in the way.
    – danijar
    Commented Mar 1, 2014 at 1:45
  • It was straight by default. I added an underscore at both ends and it turned italics. Weird... Commented Apr 28, 2014 at 18:28

13 Answers 13

779

This is the historical reason:

Concept drawing of the standard mouse cursor at an angle

(Concept drawing taken from document: VLSI-81-1_The_Optical_Mouse.pdf)

The mouse, and therefore the mouse cursor, was invented by Douglas Engelbart, and was initially an arrow pointing up.

When the XEROX PARC machine was built, the cursor changed into a tilted arrow. It was found that, given the low resolution of the screens in those days, drawing a straight line (left edge of arrow) and a line at a 45 degree angle (right edge of arrow) was easier to do and more recognizable than the straight cursor.

10
  • 165
    And of course Bill copied it from Steve who copied it from Douglas ;) Commented Feb 17, 2014 at 13:38
  • 9
    @jjt the right edge of the arrow is 45˚.
    – aaazalea
    Commented Feb 17, 2014 at 17:20
  • 19
    So pixel layout is the real reason :) To make it vertical and still look smooth the cursor would have to be twice as wide. Also that most def. is 45º, just think about the image... it's a grid.. one line goes down down down down, the other line goes down right down right down right. It must be 45º Commented Feb 17, 2014 at 17:41
  • 6
    @AlbertRenshaw: ...at least if you assume square pixels--but that wasn't a given in those days (e.g., it wasn't normally true of an EGA or Hercules card at their maximum resolution). Commented Feb 17, 2014 at 20:55
  • 37
    Your answer got on Gizmodo :) Commented Feb 17, 2014 at 21:48
434

Take your right hand and point to your question.

There, you see.

finger pointing at screen

27
  • 91
    What if I'm left-handed? Commented Feb 17, 2014 at 18:49
  • 70
    Ok, that's your hypothesis. Can you give evidence that this is actually the reason, or even had any basis behind the 2D, small, on-screen arrow? Surely if this was the case then it wouldn't be an arrow at all, it'd be a finger?
    – JonW
    Commented Feb 17, 2014 at 18:58
  • 41
    Clearly no one is left handed ;-)
    – Akrikos
    Commented Feb 17, 2014 at 18:58
  • 41
    The average you is not left handed. :(
    – jturolla
    Commented Feb 17, 2014 at 19:57
  • 62
    I actually like this answer the best. I understand the technical answers and I viewed Doug Engelbart's demo where the pointer is indeed vertical. However, this mimics the hand better, looks more natural -- and in addition, it does not obscure the pixels right below the target, which the user is presumably more likely to want to see than pixels to the southeast of the target, when viewing it, due to the heuristic that many graphics employ horizontal and vertical guides. Also, why does it have to cite sources, when it has a picture of a hand? Commented Feb 17, 2014 at 21:24
200

In addition to Bart's answer, I'd like to add one more reason.

The reason the arrow was tilted to the left was so that the click position was easier to calculate, because the origin of the cursor's bitmap was in the upper left. This saved the mouse tracking subroutine a calculation on every click (its not much but it helped on older machines).

Source

14
  • 4
    @PatomaS: That was a later generalization when machines became fast enough.
    – MSalters
    Commented Feb 17, 2014 at 15:13
  • 84
    While this certainly sounds plausible, your source is just a Reddit post that has no citations in it, so could just be totally made-up.
    – JonW
    Commented Feb 17, 2014 at 15:33
  • 23
    Although this is a theoretical benefit, I highly doubt it seriously informed the decision. Even by the standards of the 1970s, adding two offset numbers is an extremely trivial operation that could easily fit within the mouse update interval. Remember, just like today, there were other pointers in use depending on the application (e.g. text selection, row selection, paintbrush) and they didn't all have (0, 0) origins but worked just fine nonetheless.
    – nmclean
    Commented Feb 17, 2014 at 17:05
  • 50
    @nmclean is right, this answer is completely incorrect. The cited Reddit post is merely a direct copy of this Yahoo! Answers post from 2009, and that post also had no citations. On the contrary, here are two examples of Alto cursors that do not have the hotspot at (0,0): a cross in a circle and a right-pointing arrow. Commented Feb 17, 2014 at 18:45
  • 6
    With regard to the calculation time, my ballpark estimate is that it the custom hotspot took between 4 and 8 instructions at 400,000 instructions per second, or between 1/50,000 and 1/100,000 second for each mouse update: news.ycombinator.com/item?id=7253841 Commented Feb 17, 2014 at 21:35
135

Low level visual cognition

In addition to the various answers given, there is also sense in a tilted mouse pointer if one considers the visual processes in our brain.

Visual information arriving from our eyes is first processed in the primary visual cortex by the V1 area, then by the V2 area. These two areas recognise low-level visual features (hue, lightness, size, orientation, etc.).

The popout effect

As visual information is processed by these areas, some visual irregularities truly pop out (ie, they are highly distinguishable), which greatly helps visual search (trying to find an item in a visually busy field). The popular name for this phenomenon is the popout effect.

A famous research from 1988 - A. Treisman, and S. Gormican: Feature analysis in early vision: Evidence from search asymmetries summarises many of these popout effects, and the irregularities they involve.

Orientation

One such irregularity is orientation, and it is neatly explained by the following illustration:

3 images showing many vertical lines and how a tilted line pops out

You should find it next to impossible to find the search target in 1 (a straight line in a group of straight lines). But rather easy in 2 - finding a tilted line in a group of straight lines. In 3 it should be equally next to impossible to find the tilted line in a group of tilted lines (of the same angle).

Since vertical and horizontal orientations are the most common ones on screens (and in life in general) a tilted mouse pointer will be more easily found.

More information can be found in Chapter 2 (What we can easily see) of Visual Thinking for Design, Ware 2008.

14
  • 68
    I have a feeling that this answer is totally unrelated to the real reason for the tilt, but it is cool nonetheless. However, whenever I need to find my mouse, I just wave it about wildly until I see it moving.
    – naught101
    Commented Feb 20, 2014 at 1:23
  • 5
    @naught101: I do that too. We should have animated (spinning?) mouse pointers so they really stand out and we don't need to wave the mouse about to see where the pointer is :-)
    – Brendan
    Commented Feb 20, 2014 at 8:30
  • 2
    MIT Lisp Machines had a cool feature to help find the mouse cursor: if you moved the mouse back and forth quickly, the cursor would magnify (the documentation described it as "big like Godzilla").
    – Barmar
    Commented Feb 20, 2014 at 23:45
  • 2
    @cr0ybot you can already do something like that in Windows. I had a synaptics driver and it had an option to show circles around pointer when certain key was pressed. I don't have that PC right now but may be googling might help.
    – user13107
    Commented Feb 21, 2014 at 3:19
  • 8
    @user13107 I'm sure that's actually a standard feature. Control Panel|Mouse|Pointer Options|Show location of pointer when I press the CTRL key. Another option that helps find the mouse (though imho it's less effective and more annoying than the former): Display pointer trails. Commented Feb 21, 2014 at 8:36
85

I've always thought that the arrow cursor is shaped similarly to your hand if you were point (naturally) at the screen with your (as typically dominant) right hand.

I have no support of this other than my own subjective experience but it strikes me as a natural shape when trying to relate real world interaction into a low resolution computer screen where rendering something resembling a hand would be impossible.

[Edit: Someone stole the only thunder I've ever had on StackAnything. Thanks!]

Hand pointing at screen

6
  • 2
    I think this is an actual "non-historical" answer. Otherwise we would've seen reverse-angle and straight cursors in abundance.
    – Den
    Commented Feb 17, 2014 at 17:17
  • 3
    @Den We have not seen user interface operating systems themselves in abundance. Most of the world is based on several operating system hegemonies.
    – Kaz
    Commented Feb 18, 2014 at 6:44
  • 3
    @Kaz - most of games have custom cursors. Old Dungeon Keeper is a perfect example - it's literally a hand shaped cursor pointing the way your hand would - inclined to the left. I am sorry but this answer is the only correct one.
    – Den
    Commented Feb 18, 2014 at 11:46
  • 7
    It's curious how this answer got 2 upvotes but a same answer with an image got 122.
    – jinawee
    Commented Feb 20, 2014 at 15:12
  • 5
    @jinawee: Because people like pictures and don't read words as much. And the one with the hand has an arrogant 'there, I proved it' attitude - despite neither that one or this one being based on any actual evidence, just reverse-engineered guesswork.
    – JonW
    Commented Feb 20, 2014 at 17:06
54

In case anyone wonders : some less known interfaces did use a straight arrow as pointed in Reddit

enter image description here

enter image description here

3
  • 21
    So strange, I wouldn't even think that the cursor could move.
    – jinawee
    Commented Feb 20, 2014 at 17:09
  • 1
    Nobody seems to have mentioned that the browser's "finger" pointer (indicating a link) that we have today is straight, and not at an angle. Commented Feb 4 at 10:16
  • It is not only found in older software. Some modern apps feature straight arrows as well. Example speakworldlanguages.github.io Commented Jun 2 at 2:33
22

Also, there is another answer to this question. As a rule, the arrow mouse cursor must have one sharp tip (vertex) - because it is an arrow :)

On the other hand, it is better for a mouse cursor to look good and slick.

But drawing sharp tip on a rectangular pixel based display is very hard, especially without anti-aliasing.

The 0 degrees (horizontal or vertical) and 45 degrees lines are the only possible lines that look smooth without anti-aliasing.

That is why almost all arrow mouse cursors are based on one straight and one 45 degrees lines. As a result, the bisector line has angle of 45/2 = 22.5 degrees.

The tail of the arrow is much harder to be drawn well, but it is not so important as well.

4
  • 4
    An arrow with edges that are vertical and horizontal, or that are +/- 45 degrees, would also clearly identify a point without aliasing issues, but would obscure more of the screen underneath. Having one edge vertical and one 45 degrees reduces the obscured width.
    – supercat
    Commented Feb 17, 2014 at 20:15
  • 1
    @supercat - Yes. And also, such arrow will have angle of 90 degrees and will look too "pointless" and as a result ugly. 90 degrees arrows are OK for some tasks, but not for mouse pointers (IMO).
    – johnfound
    Commented Feb 17, 2014 at 21:23
  • 2
    Drawing a sharp anything is difficult with antialiasing. If you want sharp, you game the aliasing. :)
    – Kaz
    Commented Feb 18, 2014 at 6:43
  • 1
    @Arne - It must be 22.5 in order to be OK. But is usually drawn as 2px:1px ratio. That is why it looks a little bit wrong angled.
    – johnfound
    Commented Feb 23, 2014 at 22:39
8

It is a right-handed world.

It used to be that if you switched our right/left click buttons the arrow would point towards the right (opposite of the images cited).

This supports that the arrow mimics a hand pointing while providing angular contrast. Without a reference, it is an extension of the desktop metaphor.

1
  • 4
    Thanks for reminding all those of us that are left-handed that it is a right-handed world. Like we didn't already know. Glad someone else has noticed this, though. I wonder why, when you change the mouse buttons over to use the mouse with your left hand, the direction of the mouse pointer doesn't change any more? Commented Dec 2, 2015 at 9:44
6

Well, the cursor is a pointer, and mimics pointer angles from real life (~30-45° to the vertical).

Pointers in the real-world

Importantly, that angle serves to guide the eye down the length of the pointer, in the direction going "into" the screen, towards a single point, in the same way as perspective drawings do:

Perspective drawing

On the contrary, a straight arrow seems to point in the general up-direction, targeting no one point in particular. Have you ever used, or seen someone use, a pointer stick vertically upwards? That is indeed awkward, and reserved for moments where the object being pointed to is high up and well beyond the height of the person and the length of the stick combined, and can be vague in conveying what is actually being pointed at.

5

The fact that the mouse cursor is slightly tilted to the left makes a lot of sense. A very interesting fact:

If it were straight, it would take a nanosecond more to place the cursor on the desired object. Human mind is generally used to perceiving elements from left to the right, that is why the cursor is designed into the opposite direction, anticipating the intent of interaction with the element you are about to click on.

A nanosecond of time optimization is the closest thing to the absolute idea of irrelevance. With that I agree. However, on a perception level, it makes a huge difference.

The tilted cursor becomes similar to an athlete who's always on the start position, ready to take off towards anything you want to click on at any time.

It's a sensation that gives you so much comfort without you realizing why.

Semiotics, Cognitive Science and Psychology are all embedded into the simple and subtle decision of keeping the tilted cursor, just to simplify by a bit your experience.

Why was it tilted in the first place? Well, in its history, it seems like it was only an accident determined by some technical limitations:

Why Your Mouse Cursor Looks The Way It Does

1
  • Light travels one foot in a nanosecond, so I don't think it can make a perceptible difference.
    – user67695
    Commented Sep 18, 2017 at 19:28
3

The angle, the cursor is inclined at gives a better feeling of pointing something. A cursor straight at 90 degree would not provide a good effect.It provides improved appearance on low resolution screens.

Also the position calculation would become a lot easier when done from the top left corner of the pixel.

3

A straight cursor would also obscure more of the object underneath raising the same issues when designing for touch interfaces

0

It is actually straight

To understand that the cursor is actually straight (one edge parallel to the Y-axis), you must know that the upper left corner of the screen is the origin (0, 0) in computer graphics. Given the constraints that the entire cursor must be visible from the origin and an arrow head that is 45 degrees wide (an esthetic decision) there are only two straight orientations possible, the one we have or one rotated 45 degrees with the top edge parallel to the X-axis, as opposed to the left edge parallel to the Y-axis.

The feeling that the cursor is crooked in any way stems in part from the 45 degree head width and in part from the fact that only vertical or horizontal lines rasterize without any pixelation.

3
  • 1
    How do you get from this "origin (0, 0)" bit to the fact that there are two orientations possible? Are you under the impression that cursors can only extend down and right for some reason?
    – remram
    Commented Feb 4 at 19:30
  • Given a 45 degree wide cursor one of the edges has to be either vertical or horizontal. There are only two ways to do that with the tip at (0, 0).
    – akarve
    Commented Apr 3 at 19:22
  • Said intermediate orientations are not straight since they are not parallel to either edge of the monitor. And we are talking about straight orientations in this post.
    – akarve
    Commented Apr 5 at 2:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.