Cursors have been around since “The Mother of All Demos” where Douglas Englebart introduced to the world the mouse and the graphical user interface in the late sixties. The mouse cursor allows us to see where we are in space on our computer screen. As a user experience tool, it’s really great at being able to show us what we can do at any point on the screen or what the computer is doing. This article will tell you about some of the ways we can use the mouse cursor on our webpage to improve the user experience of your website.
Syntax
In our CSS selector, we use the following syntax to change the cursor to something other than the default arrow.
cursor: [ url(1.png), url(2.png) ], etc.,
<mandatory keyword value>In between the first set of square brackets, we have a list of urls, separated by commas. This is an optional value. It allows for custom cursors to be used – there are any number of custom cursor creators on the internet to help you create something that’s uniquely yours.
The comma separated list indicates that the browser will try to load the first one. If it can’t find the first one or the url is not correct, it’ll go on down the list until it finds one that works or it’ll be set to the mandatory keyword at the end.
The first parameter – with the urls is optional. The second is not. You must include a keyword that gives a set of instructions to tell which cursor type you would like to see there. Here are some of the available values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>
table {
width:100%;
text-align: center;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
}
thead {
width: 100%;
background: lightblue;
}
tr:nth-child(even) {
background-color: lightgrey;
}
td {
width: 32%;
height: 50px;
padding: 10px;
}
td.test {
color: red;
font-weight: bold;
}
td#auto {
cursor: auto;
}
td#cell {
cursor: cell;
}
td#crosshair {
cursor: crosshair;
}
td#default {
cursor: default;
}
td#none {
cursor: none;
}
td#pointer {
cursor: pointer;
}
td#help {
cursor: help;
}
td#progress {
cursor: progress;
}
td#wait {
cursor: wait;
}
td#text {
cursor: text;
}
td#vertical-text {
cursor: vertical-text;
}
td#zoom-in {
cursor: zoom-in;
}
td#zoom-out {
cursor: zoom-out;
}
</style>
</head>
<body>
<table>
<thead>
<td>Cursor Type:</td>
<td>Description:</td>
<td>Test it Out: </td>
</thead>
<tr>
<td>auto</td>
<td>Automatically figures out which cursor to use based on context.</td>
<td class="test" id="auto"> TEST </td>
</tr>
<tr>
<td>default</td>
<td>Typically an arrow, but depends on platform being used.</td>
<td class="test" id="default"> TEST </td>
</tr>
<tr>
<td>help</td>
<td>Used to indicate help is available</td>
<td class="test" id="help"> TEST </td>
</tr>
<tr>
<td>none</td>
<td>No cursor present</td>
<td class="test" id="none"> TEST </td>
</tr>
<tr>
<td>pointer</td>
<td>Most often used when hovering over link or button to indicate it can be clicked.</td>
<td class="test" id="pointer"> TEST </td>
</tr>
<tr>
<td>progress</td>
<td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td>
<td class="test" id="progress"> TEST </td>
</tr>
<tr>
<td>text</td>
<td>Tells the user text can be highlighted.</td>
<td class="test" id="text"> TEST </td>
</tr>
<tr>
<tr>
<td>wait</td>
<td>Indicates that the computer is thinking and user CANNOT interact with UI...</td>
<td class="test" id="wait"> TEST </td>
</tr>
<tr>
<td>zoom-in</td>
<td>Indicates to user that we can zoom in on something. </td>
<td class="test" id="zoom-in"> TEST </td>
</tr>
<tr>
<td>zoom-out</td>
<td>Indicates to user that we can zoom out on something. </td>
<td class="test" id="zoom-out"> TEST </td>
</tr>
</table>
</body>
</html>The code above only shares some of the available cursors that we can use on our site. Check out the MDN for others.
Conclusion
Today we have gone over some of the different ways to add cursors to your website to assist in improving the user experience. By using the cursor to indicate what can be done on any given point on the page, users know what to expect when they navigate your site. There are many more than the ones mentioned here.
I recommend checking out the different ways you can customize your cursor to fit your needs. And remember: the cursor is just one half of the UX. The other half is actually implementing what the user expects the cursor to do. We’ll get into that another time. Happy hacking!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
