екстовый курсор

Я уже писал о том, что на все активные элементы нужно вешать cursor:pointer. Если кратко, то смена курсора должна означать, что с элементом под ним можно что-то сделать, а не то, что элемент под курсором несёт какую-то семантику (скажем, является ссылкой, а не кнопкой).

Основная причина для этого — единообразие. Пользователи должны знать, что если курсор — рука, значит, можно на этот элемент нажать, чтобы что-то произошло. А уж о том что именно произойдёт должен уже говорить сам элемент.

И тут я натыкаюсь на такую вещь, как cursor:text. И вижу отсутствие единообразия.

Дело в том, что этот курсор появляется как над обычным текстом, так и над текстовыми инпутами и текстариями.

Зачем нужен этот курсор-каретка над текстом? Чтобы дать понять, что его можно выделить. Тонкий курсор-каретка облегчает эту задачу: он почти незаметен между буквами, с помощью него легко выделять ровно те буквы и слова, что нужно.

Но как только мы смотрим на неактивное поле ввода, мы всё равно видим там этот текстовый курсор (даже когда поле пустое).

У меня возникло несколько вопросов: как часто, когда мы видим форму, мы хотим что-то выделить в её текстовых полях? А как часто мы хотим что-то там написать, активировав поле, то есть, переместив в него фокус? Является ли перенос фокуса действием? Не стоит ли, ради единообразия, делать для текстовых полей ввода вот так?

input[type=text], input[type=password], textarea {
    cursor: pointer;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
    cursor: text;
}

Понятное дело, что вместо input[type=text] будет или класс, или перечисление всех возможных текстовых полей.

Здесь cursor:pointer получат только неактивные поля ввода, но, как только где-то появляется фокус, элемент перестаёт быть активируемым, и мы уже ожидаем, что пользователи могут там выделять текст. Кроме того, текстовый курсор гораздо менее заметен, чем рука: он тонкий, и им сложнее попасть по полю ввода, когда это нужно.

Конечно, это очень спорное место, подобное изменение рушит пользовательские привычки, но не будет ли подобное поведение, в итоге, лучше? Ведь так мы получим достаточно чёткую логику: если есть курсор-поинтер, значит, мы можем что-то с этим элементом сделать; если есть курсор-текст — мы можем в этом элементе выделить текст; если дефолтный курсор — клик на это место ничего не даст.

Это, в том числе, ложится и в концепцию остальных курсоров, таких как resize и drag — они говорят именно о том, что можно сделать с элементом, а не о том, чем этот элемент является.

Конечно же, я не рекомендую прямо сейчас идти и делать именно так, но если кто-то попробует провести A/B-тестирование и сказать, изменится ли кликабельность/заполняемость полей, — будет круто. Любые замечания и мысли по этому поводу я также приветствую — пишите!

Вы можете прокомментировать эту статью в Мастодоне.

Опубликовано с метками: #Blog #Design