{"id":13292,"date":"2017-10-27T10:23:56","date_gmt":"2017-10-27T09:23:56","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13292"},"modified":"2020-11-12T12:26:45","modified_gmt":"2020-11-12T12:26:45","slug":"buttons-shouldnt-hand-cursor","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/buttons-shouldnt-hand-cursor\/","title":{"rendered":"Buttons Shouldn\u2019t Have a Hand\u00a0Cursor"},"content":{"rendered":"

<\/p>\n

There is this belief that the hand cursor means \u201cclickable\u201d, but this is incorrect and potentially problematic. My hope is that by the end of the article, you\u2019ll never want to use the hand cursor for buttons ever again.<\/p>\n

The hand does not mean clickable<\/h2>\n

It\u2019s no accident that browsers don\u2019t give buttons (and other elements) a hand cursor \u2014it\u2019s because they\u2019re not meant to. Take a look at the following screenshot:<\/p>\n

\"\"<\/a>

Chrome on Mac\u00a0OS<\/p><\/div>\n

Almost every element is interactive and clickable \u2014 the menu, the tabs, the whitespace, the browser buttons, the bookmark bar and Google\u2019s search box \u2014 but, none of them have a hand cursor.<\/strong><\/p>\n

There are more interactive and clickable elements not shown above\u2014 select menus, sliders, checkboxes, radios, labels, images, empty space (e.g right click \u2014 view source) and text \u2014again, none of them have a hand cursor.<\/strong><\/p>\n

The same goes for any computer you have ever used. You can tap, drag, select, press, left click and right click on a plethora of different elements including buttons. However, buttons are not afforded by a hand cursor displaying on hover.<\/strong><\/p>\n

\"\"<\/a>

\u201cLicense Agreement\u201d is a link and uses the hand cursor. The buttons\u00a0don\u2019t.<\/p><\/div><\/center><\/p>\n

Affordance is provided by the way something looks regardless<\/em> of the cursor. Remember, the cursor is only available when hovering with a pointing device such as a mouse.<\/p>\n

This is why, for example, checkboxes are never round<\/a> (and radios are never square). This is also why links are typically underlined. This is why links do, in fact, have a hand cursor.<\/strong><\/p>\n

What the authorities say<\/h2>\n

Microsoft\u2019s design guides<\/a> talk about weak affordance:<\/p>\n

\"Text and graphics links use a hand [\u2026] pointer [\u2026] because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link.\"<\/span><\/p>\n

To avoid confusion, it is imperative not to use the hand pointer for other purposes.<\/strong> For example, command buttons already have a strong affordance, so they don\u2019t need a hand pointer. The hand pointer must mean \u201cthis target is a link\u201d and nothing else.<\/p>\n

Apple\u2019s Human Interface Guidelines<\/a> states that the hand cursor should be used when \u201cthe content is a URL link\u201d. W3C User Interface guidelines<\/a> says the same thing again with \u201cThe cursor is a pointer that indicates a link\u201d.<\/p>\n

The hand cursor is for\u00a0links<\/h2>\n

The hand (and often underlined text) signifies a link. Links are not buttons. Links came along with the web. To help users understand that they are different, they are given the hand cursor. It serves as an extra clue. Here\u2019s why:<\/p>\n

    \n
  1. Clicking a link opens a web page or resource.<\/li>\n
  2. (On desktop) I can right-click<\/em> on a link and do many things (that I can\u2019t do with a button). Open in new tab\/window, save a link, copy address, add to reading list, bookmark it and more.<\/li>\n
  3. (On mobile devices) I can tap and hold on a link and get a similar context menu as per the previous point.<\/li>\n
  4. A link also tells me that I am just<\/em> going somewhere else. I am not modifying any data or making changes<\/a> in anyway (like a button is likely to do).<\/li>\n<\/ol>\n

    Summary<\/h2>\n

    When a button has the hand cursor, it subtly suggests that the user is interacting with a link when they\u2019re not. If you want to give visual feedback when the user hovers, you can do so with other style changes such as background colour. <\/p>\n

    <\/div>
    <\/svg><\/div>

    \"A well-designed button does not need a hand cursor to help the user realise it does something.\"<\/p><\/span><\/blockquote>\n

    The hand cursor is reserved for links. This is because they are unique in their behaviour. Browsers and Operating Systems have done the work for you \u2014 because contrary to popular belief \u2014 browsers know best.<\/p>\n

    Links have always been handled this way since the web came along \u2014 this is the convention of the web that you need not innovate on. You can rest easy knowing that browsers have you covered. This leaves you and your team to solve real<\/em> problems.<\/p>\n

    \"By the way, because forms are such an important part of the web, I am writing an entire book about how to design and build them. If you want me to let you know when it\u2019s finished <\/em>subscribe here<\/em><\/a> and I will keep you posted. Thank you.\"<\/span><\/p>\n

    This article was originally published on Adam's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    There is this belief that the hand cursor means \u201cclickable\u201d, but this is incorrect and potentially problematic. My hope is that by the end of the article, you\u2019ll never want to use the hand cursor for buttons ever again. The hand does not mean clickable It\u2019s no accident that browsers don\u2019t give buttons (and other elements) a hand cursor \u2014it\u2019s… Read More ￫<\/a><\/p>\n","protected":false},"author":82,"featured_media":13293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-13292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n