Курсор с рукой
Курсор в виде руки с указательным пальцем, насколько я понимаю, впервые появился в браузере. Подчёркнутый текст не давал достаточного аффорданса, поэтому пользователю нужно было как-то намекнуть, что «слово кликабельно».
В какой-то момент ЦСС дал возможность указать форму курсора для любого элемента на странице, и многие стали лепить эту руку над чекбоксами и другими элементами, на которые можно нажать. Я был противником этого: у меня была уже устойчивая привычка, что рука означает ссылку, и, следовательно, кликнув, я уйду со страницы. Мне было некомфортно нажимать на чекбокс «пальцем», я хотел надёжную стрелочку.
На кнопках рука смотрелась совсем бредово: я и так вижу, что могу нажать («не лохи летят»).
Сейчас на дворе веб 2.0 («Javascript now works», как говорит Джефф Этвуд), и кругом стоят пунктирные ссылки, которые никуда не ведут, а что-то делают на текущей странице. Естественно, что такие ссылки нуждаются в курсоре-руке, никакого дискомфорта это не вызывают.
Проблема теперь в том, что я не знаю, как сформулировать правило, по которому выбирается курсор между рукой и стрелкой. Делать руку у всех «кликабельных» элементов — западло. Пока лучшее, что мне приходит в голову — довериться браузеру (тогда у всех ахрефов будет рука).
я считаю, что нужно просто оставлять нативные курсоры, чтобы не ломать ментальную карту:
- ссылки (какие бы они не были) — лапа.
- кнопки и прочие UI — поинтер.
Иногда кнопка (та, которая button) бывает так застилизована, что подсказка в виде руки совсем не лишняя. Для кнопок лучше оставлять указатель по умолчанию если оформление самой кнопки оставлено по умолчанию.
А иногда ссылки стилизуют под внешний вид кнопок (это мне не совсем понятно, но тем не менее), и тогда вообще попытка сформулировать какое-то правило заводит в тупик.
Делать руку у всех «кликабельных» элементов — правильный выбор.
А как же «не лохи летят»?
«Делать руку у всех „кликабельных“ элементов — западло» — охерительный довод!
Я, как понимаете, думаю прямо наоборот, так как логическая связка: рука — можно кликнуть и что-то случиться вполне естественна для всех, кроме, почему-то, дизайнеров интерфейсов.
Узнал новое слово, спасибо! Правда не понял зачем его нужно было применять.
По-моему все просто: если клик по чему-то приведет к изменению внешнего вида страницы, то при наведении на это что-то должна быть рука.
А лохи тут не при чем. Рука — это как ховер у ссылки — она дает понять, что уже можно нажимать. Удобнее так.
Кстати, насчет комментов. Ты как-то писал, что на одном сайте плохая форма. Со своей тоже не мешало бы разобраться. Например, мне очень интересно, кто такие комментаторы, какие их сайты. А у тебя только имена и фамилии.
Я стараюсь делать так:
- Ссылки, ведущие на другую страницу: <a href=.
- Команды, которые запускают действия, изменяющие что-либо в базе: кнопки (input, button, графические. )
- Команды, которые делают просто что-то на страничке (ajax-загрузки, javascript эффекты. ): <span onClick=’’>Команда</span> или $().bind() с пунктирным подчёркиванием и курсором pointer.
Как вам такой подход?
Cознательные и интуитивные усилия по созданию значимого порядка — будет решением выбора руки или стрелки.
Я все кликабельное делаю рукой, не западло 🙂
Точнее, правильно заметил Roman выше. Не просто кликабельное, но и функциональное.
input type=«text» тоже.
Курсор над кнопкой, как мне кажется, тоже должен быть рукой. Потому что кнопка может быть в режиме disable, а если её вид отличается от стандартного и не прорисованы все состояния кнопки, то пока не попробуешь нажать — не поймёшь.
Конечно состояние hover тоже должно быть у кнопок, но различия и в виде курсора тут не помешают.
В интерфейсе ОС элементы управления выглядят одинаково во всех приложениях, сравнительно легко к ним привыкаешь и лапка не нужна. На вебе значительно большее разнообразие элементов управления, и они на всех сайтах выглядят по разному, там сложнее выработать такую же узнаваемость как в ОС, поэтому лапка для всех нажимаемых элементов не помешает, пример — кнопка поиска на этом сайте.
Для тех кому западло тоже есть решение, они могут петь песни, танцевать танцы, и рассказывать что лапку в Firefox 3 на стандартной кнопке не сделаешь даже при желании.
Кстати, только что обратил внимание, что для label все-таки курсор с рукой имеет смысл — он подсказывает, что это часть контрола, а не просто текст. Ведь часто бывает, когда жмешь на подпись к чекбоксу, а он не меняет своего состояния, и приходится целиться в маленький квадратик, а тут курсор у подписи сразу помогает не сомневаться: сработает или нет?
Да, это соображение мне в голову тоже приходило.
// input type=«text» тоже. //
Так это не функциональный элемент, в том смысле, что при клике ничего не изменяется на странице.
То, что после клика можно вводить текст в поле — с этим и браузеры справляются, изменяя курсор на символ ввода текста.
Как не изменяется? В поле начинает курсор мигать, а на маке оно ещё и обводится рамочкой.
На кнопках рука смотрелась совсем бредово: я и так вижу, что могу нажать («не лохи летят»).
Илья, а как насчет кнопки, которую я сейчас нажму, чтобы отправить этот комментарий? 🙂
Наверное, шаблоны эти я верстал исходя из принципа, что всё, что нажимается, должно быть с рукой. Я вот Контроль+Энтер жму всегда, даже не замечал, что у меня такая хрень 🙂
В спецификации CSS2 про свойство cursor всё написано — какие курсоры когда использовать.
В частности, когда курсор над текстом, который можно выделить — курсор должен быть text.
Наверное, изначально была логика: «рука = действие», а «стрелка = локализация» (сама стрелка ничего не делает, она только помогает локализовать место где будет сделано следующее действие, например при mousedown на текcте курсор станет текстовым и позволит выделять текст, при right-click-e на картинке предложит что-то с ней сделать и т. д. ). Если это предположение правильно, то логично использовать руку для всех действий, изменяющих состояние странцы (нажимания на ссылки и кнопки, JS раскрывание-схлопывание в аккардеонах и табах, дозагрузка и т. д.). Веб-то уже не из страниц состоит :-).
Можно даже еретически продолжать: когда «JS really works» то стандартных курсоров в браузере даже маловато! Потому что части страниц стали «контролами», иначе говоря рубильниками, переключателями и микшерами-ползунками отражающими состояние одновременно. А браузеры дефолтно дают практически только 3 курсора на все многообразие управления, которое наворачивают web-2-нольщики. А как же текст-как-интерфейс? Или даже шире: объект как естественный интерфейс?
В адобовских программах, например в индизе, курсоры действительно отражают состояние и помогают работать эффективнее. Их там не менее двух десятков. Использовать же свои, загружаемые курсоры — как-то боязно, из-за браузерной и платформенной разноголосицы (Кстати кто-то в реальных веб-проектах использовал свои курсоры?).
Чекбоксы и прочая — это стандартный и устоявшийся элемент интерфейса, по которому понятное дело что надо кликать. И для них курсор в виде руки сыграет скорее злую шутку: если на форме много элементов и они стоят плотно, то она сразу станет похожа на рекламный баннер с нарисованными фальшивыми элементами интерфейса.
Текст, даже подчеркнутый, таковым не является. Там рука уместна.
Пунктирное подчеркивание для ссылок, которые просто что-то делают на странице — это хорошо и правильно.
Вот кстати вопрос. В каком-нибудь браузере наконец догадались сделать удобным выделение текста ссылки мышкой? Ну например с зажатым альт+шифт?
Почему «наконец», в Опере это работало всю жизнь безо всяких альт+шифт.
Олежик, в «Опере» текст ссылки выделяется мышкой безо всяких «альт-шифтов».
Курсор в виде руки с пальцем впервые появился в HyperCard в 1987 году. HyperCard, a graphical hypermedia database tool, released with System 6, introducing the pointing-finger cursor [ http://www.granneman.com/techinfo/background/history/ ]. HyperCard had a significant impact on the web as it inspired the creation of both HTTP itself (through its influence on Tim Berners-Lee’s colleague Robert Cailliau), and JavaScript (whose creator, Brendan Eich, was inspired by HyperTalk). It was also a key inspiration for ViolaWWW, an early web browser [это уже википедия].
Олежик, как уже сказали, в Опере ссылки выделяются. Хочется только добавить, что это особенно полезно с функцией «Перейти по ссылке», когда какой-нибудь форумный движек или хабр не правильно автоматически определяет ссылку, обрезая части, например, после запятой и половина ссылки становится текстом.
Эдзо Хогусава, спецификация стилей также упоминает возможность задавать внесистемные курсоры (как рисунки), описывать курсоры можно с помощью масштабируемой графики.
А кое-какие браузеры уже поддерживают такую возможность; можно посмотреть тест:
http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-interact-cursor-01-f.html
смотреть в последних сборках вебкитовских оборзевателей интернета.
Рука — это знак того, что уже можно кликать, именно так. Кнопки, чекбоксы и текстовые поля, разумеется, не нуждаются в курсоре-руке, потому что и так понятно, что что-то произойдёт, если мы кликнем.
Что нельзя сказать про ссылки, какими бы они ни были — подчёркнутыми сплошной линией или пунктирной.
Таким образом, рука — это указатель на то, что именно произойдёт после нашего клика, а лишь индикатор того, что клик к чему-то да приведёт.
В предыдущем комментарии: «это НЕ указатель на то»
Стандарты де-факто, которые есть на данный момент, сложились исторически, в них никакой системности нет, и искать ее бесполезно. Мы можем придумать сколь угодно логичное правило, но использовать его будет трудно, если оно будет противоречить сложившимся традициям.
У меня есть два варианта такого правила, какое из них лучше, я пока затрудняюсь сказать.
Правило №1. «Рука» должна быть только над ссылками. Если при клике по элементу происходит любое действие, кроме перехода на другую страницу (якоря считаются), курсор должен быть стандартным — т. е.стрелкой. Показывать активность такого элемента нужно изменением его внешнего вида, например, менять цвет у текста, подчеркнутого пунктиром. Если следовать этому правилу, веб-интерфейсы максимально приблизятся к настольным, и это нормально, ведь функционал у современных веб-приложений почти такой же. При этом решается проблема когда, когда курсор, превратившись в руку, сигнализирует о наличии ссылки, при этом открыть эту ссылку в новом окне не получается.
Правило №2. У стандартных элементов, отрисовкой которых занимается сам браузер (или ОС с его подачи), вид курсора оставлять дефолтным. У всех остальных активных элементов на странице рисовать руку.
Все таки на большинстве сайтов у стандартных контролов курсор не переопределен, а значит к этому привыкло большинство пользователей. Кроме того, если я не ошибаюсь, все браузеры в этом плане ведут себя одинаково.
Мне больше нравится правило №1, оно более логичное и последовательное. Но в его применимость верится с трудом.
Курсор «Рука»: нужен ли он кнопкам?
Дизайнеры верят, что курсор в виде руки, говорит о кликабельности, но это неверно, и потенциально проблематично. Я надеюсь, что, дочитав эту статью до конца, вы больше никогда не захотите использовать такой курсор для кнопок.
«Рука» не говорит о кликабельности
Браузеры не случайно не используют курсор в виде руки для своих кнопок. Посмотрите на скриншот, приведенный ниже:
Chrome на Mac OS
Почти каждый элемент интерактивен и кликабелен — меню, вкладки, белое пространство, кнопки браузера, панель закладок, строка поиска Google, и ни для одного их этих элементов не используется «рука».
В браузерах есть еще множество интерактивных и кликабельных элементов — выпадающие меню, слайдеры, чекбоксы, радиокнопки, изображения, текст, и т.п., и опять же — никакой «руки».
То же самое можно сказать о любом интерфейсе. Можно нажимать, перетаскивать, выбирать, кликать по любым элементам, включая кнопки, но при этом курсор «рука» не имеет никакого отношения к аффордансу кнопок.
“License Agreement” является ссылкой, и для нее используется «рука». Для кнопок она не используется.
Аффорданс должен передаваться внешним видом элемента, а не курсором. Именно поэтому, чекбоксы не бывают круглыми. По той же причине, ссылки, обычно, подчеркиваются, и для них, как раз, используется курсор в виде руки.
Что говорят авторитетные источники
В рекомендациях по дизайну от Microsoft говорится следующее:
«Из-за слабого аффорданса, для текстовых и графических ссылок применяется курсор в виде руки. Хотя для ссылок можно использовать и другие визуальные определители, например, подчеркивание, или специальное размещение — отображение курсора в виде руки во время наведения указателя, наиболее точно определяет ссылку».
Чтобы избежать путаницы, очень важно не использовать «руку» для других целей. Например, командные кнопки уже обладают сильным аффордансом, поэтому для них такой курсор использовать не имеет смысла. Курсор «рука» должен говорить: «элемент является ссылкой», и ничего другого.
В Apple’s Human Interface Guidelines говорится, что курсор в виде руки должен использоваться, когда «контент является ссылкой URL». В W3C User Interface guidelines сказано то же самое: «Курсор в виде руки является указателем, который определяет ссылку».
«Рука» предназначена только для ссылок
«Рука» (как и подчеркивание) говорит о ссылке. Ссылки — это не кнопки. Ссылки появились вместе с сетью, и чтобы научить пользователя отличать ссылки от текста, для них изобрели курсор в виде руки. Он служит дополнительной визуальной подсказкой по следующим причинам:
- Нажатие на ссылку открывает веб страницу или ресурс
- По ссылке можно нажать правой кнопкой мыши, и получить доступ к множеству вариантов взаимодействий — открыть в новой вкладке, сохранить ссылку, копировать адрес ссылки, добавить в список чтения, добавить в закладки, и т.д.
- Ссылка, также, говорит мне, что я просто меняю расположение. Я не изменяю какие-либо данные и не вношу изменений
Заключение
Когда курсор в виде руки используется для кнопки, пользователь ненамеренно вводится в заблуждение, и может решить, что взаимодействует со ссылкой. Если вы хотите предоставить визуальную подсказку для кнопки, лучше используйте смену фонового цвета.
«Рука» предназначена для обозначения ссылок потому, что их поведение уникально. Ссылки всегда выглядели именно так, это устоявшаяся традиция, и тут не нужно ничего менять.
Курсоры на компьютере: какие бывают, как менять, что нужно знать
Если вы работаете за компьютером с мышкой и клавиатурой, у вас на экране есть курсор или указатель мыши. Обычно он выглядит как белая или чёрная стрелка. У операционной системы есть несколько видов указателей, которые она меняет по ситуации. А ещё есть способы поменять его принудительно, если у вас стоит такая задача. Сейчас всё это разберём.
Обычный указатель
Основной указатель — это стрелка. Он используется во всех случаях, кроме специально определённых. Но стрелка не так проста, как кажется.
Размер стрелки можно изменить в операционной системе, чтобы курсор было лучше видно на большом экране или для людей с проблемами со зрением.
В Mac OS можно дополнительно включить в настройке временное увеличение курсора, чтобы найти его на экране. Нужно хаотично поёрзать курсором, и он на секунду становится гигантским.
Внешний вид стрелки тоже можно изменить — например заменить на какую-то милую вашему сердцу картинку. Но делать так категорически не рекомендуется, потому что это баловство на 10 минут, а дальше будет неудобно.
Модальности. В вебе к указателю можно добавить такие модальности, которые подсказывают, что с ним сейчас происходит. Для этого используется CSS:
.something<cursor: alias> — «сейчас я буду создавать ярлык»
.something<cursor: progress> — «я чем-то занят, но ты пока можешь позаниматься своими делами тоже»
.something<cursor: context-menu> — «нажатие на меня вызовет контекстное меню»
Это может быть полезно, если вы проектируете веб-приложение, которое должно вести себя как десктопное: поддерживать действия мышью и работу с файлами. Если напрограммировать эти изменения курсора, у вас получится приложение, неотличимое от десктопного.
Обычный указатель мыши в Windows 
А это курсоры одного из дистрибутива в Linux
Текстовый курсор
Если под указателем есть текст или поле ввода, то он из стрелки превращается в вертикальную линию. Это значит, что если мы кликнем в этом месте, то здесь можно будет ввести текст или выделить его, чтобы потом скопировать или вырезать.
Это работает довольно хорошо по всей системе: например, если вы сделаете веб-страницу, а в ней поставите блок со свойством contenteditable , то над ним автоматически появится текстовый курсор — это подскажет пользователю, что здесь можно ввести текст. Несмотря на то что <div> сам по себе не поддерживает ввод текста, когда мы сказали contenteditable , он стал поддерживать, а система среагировала адекватно. Вот пример такого кода:
<div contenteditable >Введите здесь свой текст</div>
Если вы нагородили нестандартное поле ввода, которое операционная система не определяет как поле ввода, то можно заставить её всё равно вывести нужный вам курсор, используя CSS. Вот два способа:
.something
<div style=»cursor: text»>Введите здесь свой текст</div>
Если вы повернули текстовое поле на 90º и хотите, чтобы пользователь вписал текст по вертикали, для вас придуман перевёрнутый текстовый курсор:
Курсор для работы с текстом
Рука с пальцем и без
Указатель в виде руки с пальцем — это почти всегда признак того, что под курсором находится кликабельная ссылка. Если на неё нажать, откроется новая вкладка в браузере или новый текст во всплывающем окне.
Обычно браузеры правильно показывают руку. Но если вам нужно сделать так, чтобы что-то, не являющееся ссылкой, выглядело как ссылка, для вас специальный стиль:
У руки есть вариант, где раскрыты все пальцы — это сигнал, что объект под указателем можно схватить и переместить. Обычно такую обратную связь нужно давать пользователю в веб-интерфейсах, где не очевидно, что этот объект можно куда-то перетянуть. Вот стили, которые за это отвечают:
cursor: grab — «готов схватить»
cursor: grabbing — «схватил и тащу»
cursor: no-drop — «сюда перетащить нельзя»
Курсоры над ссылкой 
Курсор, который готов что-то куда-то тащить
Ожидание
Задача этого курсора — показать пользователю, что система занята и пока не может реагировать на его действия. Это может относиться как к отдельной программе (она зависла, а всё остальное работает), так и ко всей системе в целом.
А ещё это единственный анимированный курсор в стандартном наборе. Смысл анимации в том, чтобы показать, что компьютер не завис окончательно, а просто чем-то очень занят.
Если вам нужно показать то же самое на веб-странице (например, показать, что запрос отправлен на сервер и мы ждём ответ), то используйте такие стили:
cursor: wait — система занята;
cursor: progress — система занята, но вы можете заниматься своими делами.
Запрет действия
Бывают ситуации, когда в интерфейсе элемент есть, а пользоваться им нельзя. Например, на странице может быть заблокированная кнопка или неактивное поле ввода. Чтобы сообщить пользователю, что можно даже не нажимать, всё равно ничего не произойдёт — используют курсор с запретом действия.
В веб-интерфейсе показать запрет может быть полезно, например, если вы не заполнили какую-то часть формы, а без нужной информации её нельзя отправить. Тогда обычно кнопку красят в чёрный, а над ней дополнительно выводят указатель с запретом:
Курсоры для работы с таблицами и другими прямоугольниками
Чтобы помочь воинам «Экселя», разработали целую гору курсоров, которые рассказывают пользователю, что сейчас будут что-то делать с его ячейками и строками. В частности:
cursor: col-resize — можно изменять ширину столбцы;
cursor: row-resize — можно изменять высоту строки;
cursor: cell — под указателем находится ячейка данных, можно в неё зайти и что-то сделать.
Также есть батарей указателей-стрелок, которые говорят, что текущий объект можно изменить в размерах в заданном направлении. Направления указываются как стороны света — север, юг, запад, восток, то есть n, s, e, w; а также комбинации типа nw, ew, ne, ns и т. д. Примеры:
cursor: n-resize — эту штуку можно увеличить вверх ↑ (то есть на север);
cursor: ns-resize — эту штуку можно увеличить вверх и вниз (то есть и на север, и на юг);
cursor: nwse-resize — эту штуку можно ресайзить по диагонали «слева сверху — справа снизу» ⤡
и далее во всех комбинациях
Курсоры для дизайнеров
Есть даже пара указателей, которые чаще всего используются в графических программах:
cursor: crosshair — крестик для точного выделения пикселей;
cursor: zoom-in — зазумиться, увеличить картинку;
cursor: zoom-out — уменьшить картинку.
Техника безопасности
Не меняйте курсоры просто так для красоты: ни в операционной системе, ни особенно в вебе. В нулевых было поветрие, что веб-мастера заменяли указатели на сайте на какие-то свои картинки. Хорошо, что это время прошло.
Менять курсоры нужно только в том случае, если поведение системы расходится с ожиданиями пользователя. Например, вы хотите подсказать, что кусочек вашего веб-интерфейса можно растянуть, а браузер об этом ничего не знает. Тогда нужно накрутить курсор с соответствующими стрелками.
Если вам просто скучно и хочется сделать на сайте что-то эдакое — лучше запустите там снег.
14 Different Types of Cursors/Mouse Pointers with Names.
As a computer user navigating cursors on the screen, have you ever stopped to think about how many different types of cursors out there? Today in this article, you will explore the various shapes and types of cursors along with their names and how they are in use.
Whether you’re a casual computer user or someone who relies on their keyboard and mouse for work, this information would be helpful! So let’s get started learning about cursor types and their functions.
Types of Mouse Cursors/Mouse Pointers
In computing, a cursor is an indicator used to show position on a monitor screen or that responds to keystrokes on a text input device or actions on a pointing device.
Generally, it is in the form of a white arrow in a diagonal position with the tip to the left and up, although it can take different sizes, and shapes. Each type of mouse cursor has its own function and purpose, which changes depending on the situation .
So let’s reveal the 14 different types of cursors with their names and pictures.
1. Arrow Cursor
The arrow cursor is the standard cursor in computers. It is a small white arrow that points to the left and up, mainly used for general navigation in most programs. The arrow cursor indicates where you will type text or click and drag or drop the files or folders.
This default cursor is visible throughout the operating system in almost any program . The arrow cursor is utilized in Microsoft Windows, macOS, Linux, as well as in many applications and websites, and has remained virtually unchanged over the years.
2. Text Pointer/I-beam
A text pointer is the second most common type of cursor that looks like a capital letter “I” and is often used to tell that text will be typed at the cursor’s location. This cursor is slightly different from another mouse pointer, as it does not have a particular shape.
Instead, it is represented by a moving vertical bar. When you place the arrow over a text, it changes to an I-beam with a flashing vertical line next to it. This line tells you that the insertion point is ready to accept text by which you can start typing to insert text at the insertion point. As the user types, the I-beam moves to follow along.
It is not limited to text writing but is also used to select text for copying or cutting after positioning it over the text you want to choose and then click and drag the mouse pointer over the text.
Usually, on the website, when you are browsing or reading, you must have seen it yourself. Observe if you take this text pointer over a link, it turns into a pointing finger cursor indicating that the user may click the link to follow it.
This I-beam pointer is also known as the text selector/pointer, insertion cursor, vertical bar cursor, or caret .
3. Hand Cursor
The hand cursor type resembles a small white hand with a pointing finger usually indicates that the user can interact with some elements like a hyperlink or button .
When you click on the OK button in a message box, it changes the hand cursor. Similarly, clicking on a hyperlink to open a new window or new page or While editing a document and wanting to point out some word or something, you use a hand cursor.
You must have seen this in the menu section, which is typically used to navigate and selection of program options. With the help of this cursor, you can move any objects like files and folders too at the new location by clicking and holding down the left mouse button.
4. Hourglass/Waiting Cursor
The waiting cursor is an indication that a program is busy and cannot accept input/response at that time, like when the program is performing a specific task, saving a document, copying files, loading a file or application, processing task information in the background, or downloading a file.
The user can’t interact with the program until the processing is complete and the cursor returns to its normal state. Thus when you see the wait cursor, you should wait for the program to finish its task before trying to interfere it . Do not click or type anything until the waiting shape goes away.
Its description varies, from an hourglass in classic Windows systems to a spinning ring in Windows Vista and a color wheel in Mac OS X.
5. Help Pointer
The help cursor has a standard arrow, but along with a question mark or an exclamation mark is used to show that the user can get more information about an element being hovered on.
It is typically found in programs with menus, help sections, or toolbars. For example, when you place the cursor over a button in a toolbar, the help cursor may appear with the button’s name or a description of its function.
Moreover, it is used in online help systems to provide links to additional information about the topics being discussed as well as in some applications to provide context-sensitive help, which is help that changes based on the current state of the application or what the user is doing.
6. Object Resizing Cursor
The resize cursor is a small arrow with two small lines extending from the arrowhead, called a “double-headed arrow” cursor. It indicates that the user can resize an object by dragging one of the lines.
Suppose you need to change the size or shape of an image. With this cursor, you can horizontally, vertically, or even diagonally resize the object, both expanding or contracting at the same size.
This cursor is used in programs such as word processors, images galleries, graphics editors, and web design applications to allow the user to resize objects such as text boxes, images, and windows.
7. Pencil Cursor
A pencil cursor symbol located in applications like Paint or Adobe Photoshop usually appears when the user activates the pencil tool or another drawing tool. The pencil cursor indicates that you are in a drawing or painting program and can be used to draw free form lines or shapes.
8. Precision Pointer
The precision pointer is a specialized cursor icon use in precision tasks such as drawing, painting, and selecting objects. It is usually a tiny crosshair or plus sign (+) displayed on the monitor screen.
This cursor is used when the user needs to be very precise in their actions, such as working image editing and graphics applications , to allow the user to select a specific area of an image or when they need to choose a small object.
For example, when using the paintbrush tool in an image editor, the precision pointer allows you to select the exact area you want to paint.
9. White cross cursor
If you have ever used Microsoft Excel, you must have seen this white cross cursor. It shows up when you are in edit mode to type text into the cell.
In addition, you can use the white cross cursor to select multiple cells in any worksheet by holding down the left mouse button and dragging the cursor over the cells you want to select. When the user double-clicks on a cell, the cursor changes to an I-beam cursor, which indicates that they can enter data into the cell.
When the user is done typing, they can press the Enter key or click outside the text box to accept the changes. But in some cases, it may also appear when there is nothing to be selected.
10. Move Cursor
The move cursor type is a small arrow with four small lines that extend from the arrowhead on four sides. Its purpose is to move an object by clicking and holding down the left mouse button, then dragging it to the new position but not changing the size of a thing; it remains the same.
This cursor is used in word processors, images gallery, graphics editors, and web design applications to allow the user to move objects such as text, shapes, icons, images, and even a window dragging them to a new spot.
11. Zoom In/Out Cursor
The Zoom In/Out is a handy cursor that allows you to zoom in or out of an image or a paragraph text.
The zoom in/out cursor is a kind of magnifying glass that indicates that the user can zoom in or out on an image or text, zooming by holding down the left mouse button, then moving the cursor up or down.
This cursor is useful when you need to get a closer look at something or want to see the big picture. You can also use it to adjust the level of detail in an object. It is also used in almost every operating system to change the zoom level of images and text.
12. Grab cursor
The grab cursor is a small hand used to grab an object and move it by clicking and holding down the left mouse button and then holding it in place so that you can do different things with your mouse.
Grabbing is common in image editing, and design programs such as Adobe Photoshop and Illustrator include objects such as text, shapes, icons, images. It is also used in some 3D modeling applications.
13. Scroll cursor
When you hold down the mouse’s scroll button, it changes the cursor into two arrows pointing up and down. This is called the scroll cursor. It is used to scroll up or down on the screen much faster by moving the mouse forward and backward slowly.
However, many people don’t know this type of mouse cursor and don’t use it, which is a waste because it can save time. You must use this cursor when you open a large text written document or reading a long article or post on the Internet simply enable scroll cursor and move up or down quickly without using the arrow keys on the keyboard.
14. Unavailable Pointer
The unavailable pointer is a small circle with a line through it and tells that a resource is not currently available. This cursor is usually displayed when the user attempts to select a disabled or not available thing.
For example, if you have a pointer to a file on your computer and the file is no longer available, you would use an unavailable pointer to indicate that the file is not currently available. Similarly, the unavailable pointer will be displayed if you try to click on a dimmed or grayed-out button.
This is the computer’s way of telling you that the thing you’re trying to select or activate is not currently available, whether because it’s disabled, hidden, or just not there.
FAQs on Mouse Cursor Types
What are the most common mouse cursor types?
The three most common mouse cursor types are the arrow, hand, and I-beam. The arrow is the most basic cursor type and indicates that the mouse pointer can be moved. The hand cursor indicates that an object can be clicked on, while the I-beam is used to indicate that text can be selected or inserted.
What are Excel pointers?
Excel pointers are a set of various cursor shapes that take place around a worksheet; each one has a specific function. The four basic cursor types include 1. Arrow: to move around the worksheet one cell at a time. 2. Hand: to scroll through the worksheet. 3. Cross: to select multiple cells. 4. Plus: to create new cells or ranges of cells.
What is the difference between cursor, mouse, and pointer?
The words “pointer” and “cursor” are often used interchangeably, but there is a subtle difference. A cursor is the visible representation of the mouse pointer, like a blinking vertical line or I-beam that causes havoc if you type too close. On the other hand, a mouse pointer is an invisible hot spot that you control with your mouse. It doesn’t have a shape or size; it’s just a point in space. When you move your mouse, the mouse pointer moves correspondingly. When you click your mouse button, the mouse pointer “clicks” too.
The cursor is an integral navigating core in computing, as it allows the user to interact with the system. There are many different types of cursors, each with another purpose. It’s essential to be familiar with all of them so you can use them when they are needed.