Кнопка також посилання
Не секрет, що коли наводиш курсор миші на посилання в інтернеті, стрілка курсору змінюється на покажчик у вигляді руки. Це поширюється на текст, картинки та будь-які інші елементи сторінки, які є посиланням. Але чому курсор не змінюється, якщо курсор миші наводиться на кнопку?
Submit button підпадає під це визначення. Як мінімум це стосується кнопок пошукових систем. Мабуть такі гіганти як Яндекс і Google з цим не згодні. Кнопки цих пошукових систем натискаються мільйони щодня. Але вказівний пальчик не з'являється.
Причому реалізувати це найпростіше. Наприклад, додаємо до HTML-коду кнопки пошуку клас search :
І в CSS прописуємо властивість цього класу:
Хтось може сказати, що це все дрібниці. Але «юзабіліті» не погодиться.
Уявляєте, команда Google, вибираючи між двома варіантами синього, проводить тести 41 відтінку цього кольору (англ.), щоб визначити найкращий варіант для своїх користувачів.
Кнопка заслуговує на вказівник
Теж дотримуюсь т.з., що в Інтернеті курсор на кнопці повинен перетворюватися на покажчик. Хоча якщо кнопка виглядає "дефолтно", без css-хитрощів, можна в деяких випадках залишити і стрілочку. Зи. welcome back!
Вважаю, навіть якщо кнопка виглядає без css-хитрощів, тобто. звичайною опуклою кнопкою, і на неї можна натиснути, то потрібен покажчик.
2 Микита Вакорін однозначна кнопка – згоден. Але якщо це якийсь калькулятор на сторінці для складних розрахунків з безліччю кнопок (без css-оформлення) - саме той "деякий випадок", коли можна без cursor:pointer;.
Завжди підтримував цей погляд.
До речі, якщо робити кнопку через input:image, то курсор з'являється сам, а якщо за допомогоюinput:submit або просто button, то ні. Думаю, що варто зробити схожі речі схожими.
Але, як було зазначено вище, варто відрізняти кнопку, яка перезавантажує сторінку або робить щось важливе, від кнопки, яка робить мінімальну дію, та ще й полягає у великій групі кнопок.
Бачу, що кнопки перетворилися ) Але проблема: у всіх реалізаціях border-radius (Safari, Firefox) є велика проблема, коли фон вивалюється з меж рамки. Рішення - не використовувати рамку взагалі або підібрати ближчі кольори.
До речі, Safari підсвічує всі поля властивістю outline і його також можна заокруглити: -webkit-outline-radius.
Вадим, дякую за наведення. Мабуть, радіус бордюрів вигадали, а про згладжування належним чином не подбали. Проте сірий із білим поєднується.
До речі, є ще -khtml-border-radius для Konqueror. У результаті код кнопки без кордонів виходить таким:
Ну і text-shadow до смаку.
А щодо полів форми та “аутлайну”, то краще взагалі без нього — outline:none
Live redesign. Markup polish in progress
А я, напевно, моторошний ретрогад, але… не можу погодитись. На мій погляд, кнопка – насамперед стандартний елемент інтерфейсу. Та ж форма пошуку на сайті – чим вона принципово відрізняється від вбудованої панелі пошуку у браузері? На мою думку, логічно, щоб у користувача при роботі з обома інтерфейсами активувалися одні й ті ж звички (“не замислюючись ввів, не замислюючись натиснув”). Якщо ж при такому звичному наведенні на кнопку в неї раптом зміниться курсор на «посилальний» — декого з користувачів (начебто мене) це може спантеличити: «Хм… А це кнопка чи не кнопка? А чи не виведе вона мене з цієї сторінки, де я щойно так старанно набирав пошукову фразу?
Повністюпідтримую аргументацію Олексія Скрипника А щодо JS-ових та аяксових псевдопосилань — так не випадково добрим тоном стало візуально відокремлювати їх від звичайних (пунктирним підкресленням, особливою іконкою тощо). Хоча взагалі вішати JS-функціональність на "глухі" посилання - імхо, невдала практика (її не виправдовує навіть: hover в IE6 - все одно без JS толку від цих посилань нуль!). Для таких речей у HTML є… кнопки:)
Міняти курсор на "пальчик", на мій погляд, варто лише для суто дизайнерсько-прикрасних елементів, і не схожих ні на стандартні кнопки, ні на звичайні посилання - щоб користувач хоч якось здогадався, що туди можна клікнути. А коли клікабельність очевидна — нема чого ламати стереотипи без потреби…
Дуже ясно, але я залишаюся за своєю думкою.
"Та сама форма пошуку на сайті - чим вонапринципововідрізняється від вбудованої панелі пошуку вбраузері?"
Принциповоївідмінності немає - кнопка там, кнопка тут. Але особисто я завжди усвідомлюю різницю між моїм прибуттям у програмі операційної системи та моїм прибуттям у “вікні інтернету”. Тому я не згоден з тим, щоб “під час роботи з обома інтерфейсами активувалися одні й самі звички”. В інтернеті багато простого тексту, а в програмі майже на кожне слово можна натиснути та запустити дію.
“…декого з користувачів (на зразок мене;) це може спантеличити…”
По-друге, виходить, що якщо я створюю навігаційне меню сайту, дизайн інтерфейсу якого збігається з дизайном інтерфейсу ОС, то я повинен змінити "дефолтну" поведінку курсору (палець) на стандартну стрілку, щоб не зачіпати стереотипи.
"Хм ... А це кнопка чи не кнопка?" А чи не виведе вона мене з цієї сторінки, де я щойно так старанно набирав пошукову фразу?
Якщо ця "кнопка не кнопка" хоч якось схожа на прямокутник зі словом "Знайти", то ніякий стереотип не здатний викликати подібні сумніви.
Згодний, що хорошим тоном вважається візуально відокремлювати локальні посилання, але навіть підкреслювати ці посилання пунктиром чи позначати іконкою, однаково необхідний покажчик посилання (як руки;).
Микито, дякую за відповідь! Питання про меню, задизайненные під інтерфейс ОС, допомогло мені уточнити мою позицію:). Спочатку я хотів було відповісти "звичайно так, імітувати ОС - так до кінця", але потім зрозумів: адже що таке навігаційне меню сайту, як не набір посилань?
І тут мене осяяло: адже курсор у вигляді пальчика — це ж прекрасний вбудований лакмусовий папірець, що допомагає відрізнити елемент системної функціональності (кнопку, select, тулбар, контекстне меню тощо) від справжнього посилання (яке можна відкрити коліщатком у новому вікні , "послати другові" тощо за списком), що лише прикидається (з примхи дизайнера:) таким системним контролем!
І щодо різниці між роботою у вікні програми та “вікні інтернету”: очевидна вона лише для нас, айтішників, які працюють із комп'ютером давно та професійно. Для багатьох людей, далеких від IT, в комп'ютерних інтерфейсах взагалі немає нічого очевидного — все нове і навіть іноді страшне:). Таким користувачам не поясниш, що та сама за виглядом і функції кнопка поводиться по-різному, т.к. "Тут вона відноситься до сайту, а там - до ОС", для них від цих пояснень в загадковому і незрозумілому "простому смертному" світі комп'ютерних технологій всього лише додасться ще однією непідвладною здоровому глузду загадкою.
P.S. Я сам начебто розумію різницю між вебом і ОС, між звичайним посиланням і локальним ... але: по роботі постійно маю справу з веб-додатком, де поруч дваменю: із звичайних посилань та JS-ових. І мені часто потрібно відкрити сторінку цієї програми у новому табі. І те, що для половини посилань це елементарно робиться "колесиком", а для іншої половини (такого ж виду, з таким же курсором!) не робиться ніяк - неабияк бісить ...
Беру за приклад кнопку "Знайти" в Яндексі. Вона підходить під поняття "системної функціональності", але є посиланням на сторінку результатів пошуку. Причому посилання можна відправити другу, або зберегти в закладках. Недолік в тому, що через “фігувату, прямо скажемо, підтримку наявних коштів браузерами”, цього не можна реалізувати за замовчуванням, клацнувши правою кнопкою миші по цій кнопці, і заздалегідь зберегти або скопіювати посилання. З цієї ж причини за допомогою комбінацій клавіш не можна відкрити результати пошуку в новій вкладці.
Тому я вважаю, що подібним ситуаціям повинен відповідати покажчик посилання, про що написав у тексті запису.
До речі є ось таке CSS-властивість:
Можливо майбутнє подарує нам нові "дефолтні" курсори
Ця тема змушує мене відчувати себе справжнім “гіком”.
Upd: щодо віджету - протупив я, звичайно, що не бачив. У тих же Гугла з Яндексом таке вже є (напр., якщо замість кнопки натиснути на посилання “картинки”)…
А те, що "для користувача важливий результат", не означає, що візуальне оформлення кнопки, яка призведе до цього результату, не повинно оформлятися у вигляді руки з вказівним пальцем.
У тих даної теми обмежувати власну фантазію зайве, якщо ця фантазія нічого очікувати погано впливати на “экпириенс”.
І покажчик покажчика кнопки не змушує користувача "виконувати зайву розумову роботу". Адже відсутність позначення того, що в цьому полі потрібно запровадити пошукову фразу,Крім позначення, що вказується словом на наступній цьому полю кнопці, лише підтверджує досить розвинене в ці дні інтуїтивне мислення користувача інтернету, більшою мірою щеплене звичною функцією полів пошукових систем
> те, що "для користувача важливий результат", не означає, що візуальне оформлення кнопки, яка призведе до цього результату, не повинно оформлятися у вигляді руки з вказівним пальцем.
Є, звичайно, і контрприклади - взяти GMail, так, там скрізь "пальчик". Хоча особисто мені (з моїм персональним "експірієнсом") здається логічніше його "спрощений" інтерфейс: об'єкти (листи, папки, дод. сервіси тощо) - посилання, а дії (надіслати, зберегти, видалити і т.п. ) - Стандартні кнопки. Хоча, може, й справді нема чого користувачам гуглпошти роздумувати над цією різницею, нехай курсор скрізь буде "натискним" ... не думаю, що рішення про зміну курсору для пошти (як і про його незмінність для пошуковика:) приймалося тамтешніми дизайнерами з бухти-барахти. Мабуть, до цих речей потрібен індивідуальний підхід.
До речі, нещодавно була спекотна суперечка на цю тему на Хабрахабрі (я тоді проголосував за “палець” лише для нестандартних кнопок). Цікаво, що показало б таке опитування серед не-гіків.
Сформований "експірієнс" - це добре. Можна змінити дизайн кнопки, але дотриматися логіки взаємодії з цією кнопкою для тих, хто "не бачать різниці", щоб вони могли інтуїтивно розуміти задум.
Я назвав би цей елемент “випадаючим меню”. А рука з'являється так, як можна натиснути. На мій погляд, було б правильніше, якщо при наведенні курсору миші меню, що випадає, з'являлося автоматично, без натискання. Хоча поруч є трикутник, що вказує вниз; та підкреслення пунктирне. І взагалі - це JS:) Можливо, спочатку користувачприпускає, що перейде на нову сторінку, але при натисканні приємно дивується швидкість вибору. Тут без юзабіліті-тестів не обійтися
На Хабрахабрі я згоден з думкою, що якщо можна натиснути на щось, то маю з'явитися курсор у вигляді руки. Але вважаю, що це не повинно бути головним позначенням того, що на об'єкт можна натиснути.
У сенсорних екранів взагалі немає курсорів, що позначають і стежать за рухом пальця, що не торкається. Бачиш заслання - натискаєш пальцем. Бачиш кнопку – теж натискаєш. У разі мишки аналогічно — перед натисканням з'являється вказівний палець.
Що й потрібно було довести
Доказ логічно невірний. За окремим випадком не можна робити однозначних висновків про загальне правило.
Інакше вийде, що і для чекбоксів, і для радіобаттонів, і для опцій меню (select -ів), і для табів - для всіх "різновидів кнопок" (по CSS3) доведеться ліпити курсор посилань.
У демонстрації appearance:button курсор дефолтний. Змінюється він тільки для appearance: hyperlink (т.к. "indicates a link") ...
Дефолтна поведінка для браузера задається appearance: push-button , де кнопка має бордюри і вона виглядає опукло.
І взагалі, якщо в специфікації зазначається, що appearance:push-button — це дефолтна поведінка для кнопок “часів” HTML4/XHTML1, то, можливо, браузери ще не інтегрували дефолтну поведінку для “нових часів”.
А логічний висновок та висновок вже можна зробити – кнопка може бути посиланням
Відразу додам. Якщо ви скажете "на посилання можна повісити javascript-обробник", то я відповім: "Посилання все одно можна відкрити, минаючи обробник, відкривши посилання в новому вікні/табі, наприклад, за допомогою середньої кнопки миші".
Діти. Якось ви все ускладнюєте надто. Користувач,імхо, не стане так глибоко мислити. Я дотримуюся думки, що pointer повинен стояти на нестандартних кнопках (особливо якщо немає hover-стану) з метою показати, що об'єкт під курсором клікабельний.