The Endless Wasted Corners of Games

One commonly used principle in interfaces is Fitts’ law. It can be boiled down very simply: the ease with which you can access a click target (like a button) is decided by how close it is to the current cursor position and how big it is. A nearby or big target is easier to reach than a far away or tiny click target. Very straightforward when you think about it.

There’s one more aspect, though: the edges and especially the corners of your screen are effectively huge. To click on a tiny button on your screen, you have to move your mouse to the general area (often starting with a large, imprecise mouse movement) followed by a slower precise movement to get to the right target, making sure not to overshoot. But if the button is in the top right of your screen, all you have to do is make one huge imprecise movement towards the top right. If you overshoot, it’s fine because the cursor hits the corner and stops. It’s easy to click on the corners of your screen, even though they’re often the furthest points from the cursor. It’s no accident that the Windows 7 start button is in the very bottom left corner, the close window icon is in the top right, and the show desktop button is in the bottom right. But do any games make use of this?

No click targets in the corners of Diablo III.

No click targets in the corners of Diablo III.

Let’s look at various games from the past few years which use the mouse cursor heavily, and what they put in their corners.

The Edge-Scrollers

Civilization V has no click targets in its corners. However, this is because moving the mouse to the corner performs a different action: edge-scrolling. Moving the mouse to the edges (which, like corners, are very easy to move to) pans the camera around the world map, and the corner pans diagonally. So although it’s not clicking, the edge-scrolling mechanism is making efficient use of the ease of accessing edges and corners. Many other games, like Starcraft II, XCOM:Enemy Within and Invisible Inc, use edge-scrolling. Divinity: Original Sin is another edge scroller, but it tries to make double use by also placing some click targets near the edges (e.g. the travel button on the right-hand side). This is not a good combination; if you overshoot the button slightly, you’ll accidentally pan the screen away from what you were looking at.

Civilization V has no click targets in the corners as it uses them for edge-scrolling.

Civilization V has no click targets in the corners as it uses them for edge-scrolling.

I’m not totally convinced by edge-scrolling. On the one hand, it’s a very logical mechanism: you want to access an item, you move your mouse cursor towards it, and if it’s near or beyond the edge of the screen, the view automatically moves to accommodate your mouse cursor movement without need for further input. But on the other hand, you usually want the item of interest towards the centre of the screen. To achieve that with edge-scrolling, you have to move your mouse to the edge, wait until the item comes into view, and once it’s central enough, pull your cursor back from the edge to the newly-centred item. It is surely quicker to scroll with keypresses, or a hold-mouse-button to pan mechanism, allowing you to leave your mouse cursor central.

(This is the sort of thing that can only be settled empirically with automatic observation; self-report on preferences between such mechanisms is generally unreliable. A quick search didn’t turn up any experiments or data on scrolling methods in games.)

The Rest

Let’s move on to games which don’t use edge scrolling. In Football Manager 2014 (the latest I have to hand) the top corners are used in the menu screens for back and continue, which are amongst the most used actions. However, no use is made of the bottom corners, and during matches, none of the very corners are clickable.

FTL has no controls in the corners. A couple of clear candidates are the hyperspace jump button and the open all doors button, which are already near the edges, and are generally hit in a panic.

FTL has no edge-scrolling, but also makes no use of the corners for click targets.

FTL has no edge-scrolling, but also makes no use of the corners for click targets.

Hearthstone puts the friends and settings menus near the corners, but again doesn’t extend the click targets into the corners. Diablo III (first screenshot in this post) has no controls in the corners or along the edges. During the fight, you’d never want your cursor to stray too far from the centre, as that’s what you use to target enemies. But it seems sensible to put controls like inventory, chat, or similar in the corners, which you might click between fights.

Keyboard Shortcuts

There’s an argument to made that keyboard controls usurp the use of the mouse, and thus it doesn’t matter too much where the mouse targets are. In FTL, time is so essential that I tend to use keyboard shortcuts for many actions. But few users actually make much use of keyboard shortcuts in interfaces. Research has shown that GUI users tend to use mouse pointer interactions to perform tasks even when keyboard shortcuts are faster.
Although gamers tend to be fairly proficient computers users, I suspect that the pattern holds and many still don’t use keyboard shortcuts in games that are predominantly mouse-based. (Any there are game designers who collect metrics who have published such details?)

The Elephant in the Window

So, it looks like the usability of some games could be greatly improved by putting interface elements in their corners. Except… there is a giant caveat to all this. The reason that corners of the screen are easy to hit is that the mouse stops there. If you have a non-maximised window in your interface, and the mouse is not captured within that window, the corners are no easier to hit than any other target on the screen, but they are now far away. So the corners of full-screen games are excellent places to put interface elements; but the corners of non-maximised windows are among the worst places!

This can be solved by capturing the mouse in the window, but when you play a game windowed you usually want to be able to easily access other windows, whether you have a webpage you’re reading and want to scroll, or a video you want to pause or an email you want to click on, or a chat window to type in. Newly released Heroes of the Storm has an interesting option to help with this (although it seemed buggy when I tried it):

hots_mouse_confine

The existing corner mechanisms do tend to suffer badly in windowed mode. In games like Civilization or Invisible Inc where edge scrolling is often your primary way of zipping around the map, playing in windowed mode disables the edge-scrolling and suddenly forces you to use arrow keys or some other method. Having a hold-middle-button to pan mechanism is a much more useful mechanism in windowed mode. Again, it would be interesting to collect metrics to know how many people play windowed vs full screen in different games. I’d presume FPS, RTS and similar are almost always full-screen, and long-running strategy games are often windowed, but I’d take data over guesses.

Recommendation

So: should game makers put things in the corners of their game? I’ve discussed my skepticism over edge-scrolling above, so now let’s focus on the rest. In general, many games — like in that first screenshot of Diablo III — already do put some controls near the corners of the screen, to keep them from clogging up the centre. But for aesthetic reasons, designers won’t put them right in the very corner, which would make them clickable from the corner in full-screen. There’s a simple solution to this though: invisibly extending the click targets to let them be clickable from the corner. Here’s your cursor near a corner button in Hearthstone. Clicking here does nothing, which is fine:

fitts_hearthstone_menu_near

When your cursor reaches a mouse target, you usually get an indication, like the cursor changing when you hover over a web link. Here, you get a colour highlight on the button and a tooltip, so you easily know you’ve reached a point when you can click the button:

fitts_hearthstone_menu_on

If you move past the button and into the very corner, the highlight disappears again as the button isn’t pressable (drawing the cursor on for explanation purposes):

fitts_hearthstone_corner_none

But why not? What might the user want to press in this tiny piece of screen beyond the button in the corner, other than the button itself? You can make this apparent by providing the same highlight when the cursor is in the very corner, and allow the click to trigger the button:

fitts_hearthstone_corner_highlight

This may seem a bit odd, but it’s not without precedent. In Windows 7, the close-window button is not drawn to the very edge of the screen, and the start button is similarly not drawn at the very edge (it’s a circle, so definitely doesn’t reach the corner). Yet both are clickable from the corner because it’s a reasonable thing to do which makes the targets much easier to hit. Doing this loses nothing when a game is in windowed mode, but some speed is gained in full-screen mode.

More reading on Fitts’ Law: a visualisation, and a nice explanation.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s