{"id":20281,"date":"2023-02-15T13:25:14","date_gmt":"2023-02-15T18:25:14","guid":{"rendered":"https:\/\/www.ceros.com\/inspire\/?p=20281"},"modified":"2023-02-15T13:25:16","modified_gmt":"2023-02-15T18:25:16","slug":"cursor-design","status":"publish","type":"post","link":"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/","title":{"rendered":"What Clicks: A Journey Into Cursor Design"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Whether you consider it as an extension of your pointer finger or forget that it exists altogether, the cursor is the unsung hero of web interface design. From the antsy blink of an empty word doc to a slanted point whizzing around the <a href=\"https:\/\/www.adobeopoly.com\/adobeopoly\/p\/1\">Adobe suite<\/a>, it\u2019s a simple but all-important piece of our everyday digital lives.<\/p>\n\n\n\n<p>But the cursor can be something more than a simple indicator. It can be a strategic way to guide the user journey or, at the very least, add a little character using unexpected real estate. That\u2019s why some designers are imagining new ways to put the cursor to work.<\/p>\n\n\n\n<p>Let\u2019s examine the point at which the cursor meets design, and see how you can get more from the mouse.<\/p>\n\n\n\n<div style='position: relative;width: auto;padding: 0 0 70.92%;height: 0;top: 0;left: 0;bottom: 0;right: 0;margin: 0;border: 0 none' id=\"experience-63ed24706b6a4\" data-aspectRatio=\"1.41011236\"><iframe allowfullscreen src='https:\/\/view.ceros.com\/ceros-marketing\/cursor-pq1?heightOverride=890' style='position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: 0;padding: 0;border: 0 none;height: 1px;width: 1px;min-height: 100%;min-width: 100%' frameborder='0' class='ceros-experience' title='Cursor PQ1' scrolling='no'><\/iframe><\/div><script type=\"text\/javascript\" src=\"https:\/\/view.ceros.com\/scroll-proxy.min.js\" data-ceros-origin-domains=\"view.ceros.com\"><\/script>\n\n\n\n<h2>UX Design, 50 Years in the Making<\/h2>\n\n\n\n<p>Why, exactly, does the cursor tend to have such a uniform look no matter where you click? After all, <a href=\"https:\/\/www.ceros.com\/inspire\/originals\/brand-website-update\/\">most sites experiment<\/a> with typeface, layout, and color schemes.&nbsp;<\/p>\n\n\n\n<p>The answer goes all the way back to 1968, when an engineer named Douglas Engelbart shared his vision to make computing more interactive. Rather than <a href=\"https:\/\/www.inverse.com\/innovation\/blinking-cursor-history\">manually writing code<\/a> to perform a simple command\u2014say, opening up a different application\u2014he devised a visual control system all relying on cursor and arrow keys. Then came another question altogether: how should it look?<\/p>\n\n\n\n<p>Engelbart was constrained by the low-resolution screens of the day, meaning vertical lines weren\u2019t easy to distinguish while navigating through text. This highlights another lesson from the cursor: prioritize accessibility from the start. <a href=\"https:\/\/www.fastcompany.com\/3026625\/why-the-mouse-cursor-is-tilted-instead-of-vertical#:~:text=So%2C%20when%20Xerox%20and%20its,out%20against%20the%20pixelated%20background.\">So his research team<\/a> tilted it roughly 45 degrees to the left; problem solved. Steve Jobs liked it, using the mouse as an integral differentiator in Apple\u2019s style of intuitive personal computers. Bill Gates was a fan, too, and made it part of the Windows operating system.<\/p>\n\n\n\n<p>Today, however, there\u2019s no reason why the cursor <em>needs<\/em> to have the same appearance, especially since screen technology is eons ahead of where it was in Engelbart\u2019s prime. Yet the trend persists and, consequently, changing up a decades-old browsing convention is a bold move.<\/p>\n\n\n\n<h2>Mouse Trap<\/h2>\n\n\n\n<p>Today\u2019s designers, <a href=\"https:\/\/www.ceros.com\/inspire\/originals\/ux-writing\/\">UX writers<\/a>, and developers generally work together to minimize\u2014but not completely eliminate\u2014friction, or anything that gets in users\u2019 way. So while it may seem foreign and add a shock-value level of friction to use a custom mouse, it also presents an opportunity to change the way users interact with content. Here, the cursor offers us a chance to get philosophical. Is it possible to balance our love for all things familiar with a desire for something novel? You be the judge.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"624\" height=\"390\" src=\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2023\/02\/Koto_AdobeExpress-1.gif\" alt=\"\" class=\"wp-image-20298\"\/><figcaption>Koto&#8217;s bold yellow cursor automatically surfaces a pop-out view of the studio&#8217;s work.<\/figcaption><\/figure>\n\n\n\n<p>Take the creative studio <a href=\"https:\/\/koto.studio\/\">Koto<\/a>, for instance. At first glance, this website seems simple: a company description set over a black background. But when you begin to move their circular yellow cursor, things come into focus. Float over what would traditionally be a hyperlink requiring another click and you get an instant, pop-out view of the studio\u2019s work and clients. That quick view might just win attention that would\u2019ve otherwise faded.<\/p>\n\n\n\n<p>For an even more playful effect, there\u2019s <a href=\"https:\/\/ppp.tokyo.jp\/\">Tokyo-based game design studio PPP<\/a>. It utilizes what\u2019s known as a trailing cursor to give things a lighthearted feel, almost akin to playing a game. In this case, the cursor is also a way to reflect PPP\u2019s mission to build the future of play.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"949\" height=\"573\" src=\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2023\/02\/PPP_AdobeExpress.gif\" alt=\"\" class=\"wp-image-20293\"\/><figcaption>PPP&#8217;s website features a cursor with a colorful trail.<\/figcaption><\/figure>\n\n\n\n<p>Finally, consider one of the biggest cursor experiments in recent memory, the iPad. In 2020 Apple built a cursor for the trackpad generation, using a circle that follows your finger and mimics the sensation of pointing and stopping on apps with a subtle pulse.&nbsp;<\/p>\n\n\n\n<p>Chronicling its novelty in <em>Wired<\/em>, writer Craig Mod <a href=\"https:\/\/www.wired.com\/story\/ipad-trackpad-cursor\/\">describes the iPad cursor<\/a> as a \u201cshapeshifting blob\u201d that enhances the overall experience of using the device as a whole. \u201cYou are never \u201cscolded\u201d by hitting a dead end\u2014you reach a soft bounce at worst,\u201d he said. \u201cAnd so, for me at least, exploration is encouraged.\u201d<\/p>\n\n\n\n<h2>When Does a Custom Cursor Make Sense?<\/h2>\n\n\n\n<p>Of course, there\u2019s such a thing as distracting design\u2014and some critics argue that custom cursors bring an unnecessary strain on users, especially from an accessibility standpoint.&nbsp;<\/p>\n\n\n\n<p>Eric W Bailey, an inclusive design advocate, <a href=\"https:\/\/ericwbailey.website\/published\/dont-use-custom-css-mouse-cursors\/\">warns against them<\/a> for that very reason. \u201cA considered, inclusive design enhances a digital experience for all,\u201d he says. In his view, custom cursors can be an eye-catching feature but often \u201cfall apart under scrutiny.\u201d<\/p>\n\n\n\n<p>If you do want to go forward with your own cursor, he advises creating a checklist to ensure your site still works for people with low vision and those with lower levels of technical literacy. Above all, Bailey notes, \u201cIf the entire experience relies on a custom cursor, I\u2019d say the problem lies a little deeper than surface-level aesthetics.\u201d<\/p>\n\n\n\n<p>To design advanced cursors with unique functions, you\u2019ll need to team up with a developer or beef up your Javascript skills. Luckily, there are also <a href=\"https:\/\/codepen.io\/search\/pens?q=custom+cursor\">libraries of code snippets<\/a> that you can modify to get the ball rolling as you workshop new designs.&nbsp;<\/p>\n\n\n\n<p>The cursor is here to stay, yet that doesn\u2019t mean it has to be static. Consider how customization could add another dimension to your digital design without sacrificing accessibility, then decide if things really click.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<div class=\"myclass\">The computer cursor can be something more than a simple indicator. Let\u2019s examine how you can get more from the mouse.<\/div>\n<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":133,"featured_media":20282,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What Clicks: A Journey Into Cursor Design - Ceros Inspire<\/title>\n<meta name=\"description\" content=\"The computer cursor can be something more than a simple indicator. Let\u2019s examine how you can get more from the mouse.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Clicks: A Journey Into Cursor Design - Ceros Inspire\" \/>\n<meta property=\"og:description\" content=\"The computer cursor can be something more than a simple indicator. Let\u2019s examine how you can get more from the mouse.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Ceros Inspire\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-15T18:25:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-15T18:25:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2023\/02\/2023-02_Ceros_Promo-Tiles-Cursor-Design_Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"1112\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Sam Dart\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\",\"url\":\"https:\/\/www.ceros.com\/inspire\/\",\"name\":\"Ceros Inspire\",\"description\":\"Just another Ceros Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.ceros.com\/inspire\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.ceros.com\/inspire\/wp-content\/uploads\/sites\/5\/2023\/02\/2023-02_Ceros_Promo-Tiles-Cursor-Design_Feature.jpg\",\"width\":1540,\"height\":1112},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/#webpage\",\"url\":\"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/\",\"name\":\"What Clicks: A Journey Into Cursor Design - Ceros Inspire\",\"isPartOf\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/#primaryimage\"},\"datePublished\":\"2023-02-15T18:25:14+00:00\",\"dateModified\":\"2023-02-15T18:25:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/97b9b57bff771ebd7129856844650e8a\"},\"description\":\"The computer cursor can be something more than a simple indicator. Let\\u2019s examine how you can get more from the mouse.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ceros.com\/inspire\/originals\/cursor-design\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#\/schema\/person\/97b9b57bff771ebd7129856844650e8a\",\"name\":\"Sam Dart\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.ceros.com\/inspire\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4d1b6241ec9fa6b1b0c6a1b6fa26c49f?s=96&d=mm&r=g\",\"caption\":\"Sam Dart\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/20281"}],"collection":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/users\/133"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/comments?post=20281"}],"version-history":[{"count":8,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/20281\/revisions"}],"predecessor-version":[{"id":20320,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/posts\/20281\/revisions\/20320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media\/20282"}],"wp:attachment":[{"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/media?parent=20281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/categories?post=20281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ceros.com\/inspire\/wp-json\/wp\/v2\/tags?post=20281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}