При наведении курсора курсор стирает

В вебе, при наведении на кнопку курсор должен менять форму на pointer (как при наведении на ссылку)?

Проголосовали 2786 пользователей. Воздержались 200 пользователей.

Укажите причину минуса, чтобы автор поработал над ошибками

Комментарии

69

• Почему-то если кнопка — особенная картинка, то обычно меняют, а если стандартная — то нет. Я лично привык именно к такому поведению 🙂

  • В Gmail кнопки очень похожие на стандартные. И изменение есть.

    • hooz

      26 мая 2009 в 23:27

      +1

      но все же они не стандартные

      • hooz

        27 мая 2009 в 00:31

        +3

        или кто то считает по другому?

        • Спросите среднестатистического пользователя, не гика.
          Различит ли он и скажет ли, какая из них стандартная?
          Думаю, просто покачает головой и удивится вопросу.

  • Это потому, что видя стандартную кнопку, пользователь знает, что это кнопка, и не обращает на курсор внимание. Если кнопка нестандартная, рисованная, то необходима дополнительная информация (cursor:pointer), чтобы понять, что это — именно кнопка.

    • НЛО прилетело и опубликовало эту надпись здесь

      • Не все «дизайнеры» следуют этой рекоммендации.
        К тому же некоторые элементы дизайна могут только логически являться кнопками, а визуально всем, чем угодно

        • НЛО прилетело и опубликовало эту надпись здесь

• да, если при нажатии на кнопку пользователь перейдет на другую страницу

  • Правильный ответ, которого почему-то нет в голосовании. Если кнопка работает как ссылка — то и курсор должен выглядеть как курсор над ссылкой. Если кнопка делает что-то на странице без её покидания — то курсор менять незачем. Например кнопки «предпросмотр» и «написать» в форме редактирования сообзения (которое я сейчас пишу) выглядят как обычные кнопки, обновляют страницу аяксом без перехода и потому курсор при наведении на них остаётся обычным курсором. А допустим кнопки в меню навигации по сайту работают как ссылки, а потому курсор при наведении на них должен меняться.

    • сейчас можно легко отыскать любые элементы-кнопки (курсор pointer), в вашем случае аяксовые кнопки имеют шанс остаться без внимания. даже если графически изображена кнопка, с обычным курсором она может показаться неактивной.

      • Кнопка должна привлекать внимание за счет своего внешнего вида, а не за счет изменения курсора. Иначе у нее точно есть все шансы остаться без внимания.

        А если кнопка выглядит как кнопка и действует как кнопка, то изменение курсора ей не нужно. Она ведь кнопка!

        • это в идеале. скажем, вот тут на хабре висючая справа кнопка-обновлялка выглядит не совсем уж как кнопка. и таких примеров масса.

          в вебе издавна сформировалось немного иное поведение элементов, нежели в десктопном софте. по факту: просто убрать изменение курсора внесёт большую путаницу, чем ничего не трогать.

          да и потом, «что похоже на кнопку, а что нет» и степень похожести — это отдельная мощная тема, почти индивидуально рассматриваемая для разных случаев.

          так что на мой взгляд на_данный_момент ситуация такова, как я её описал в предыдщуем сообщении.

• Учитывая разброс в голосовании мне действительно интересно, почему топик минусуется 🙂 Видимо, спорные вопросы на главную люди не любят выносить 🙂

• Если пользователь видит стандартный системный элемент управления, то ни в коем случае. Должно быть максимально привычное поведение.
  Если же кнопка нестандартная, то по желанию, но в целом, если кнопка как кнопка, и нажимается, и реагирует на курсор, то можно и не менять, у неё привычное поведение. А если же кнопка тупо статическая картинка, то нужно бы поменять курсор, что бы хоть как-то показать пользователю, что это элемент управления.

  • Мне вот кажется, что в Gmail все же идеальный вариант…

    • hooz

      26 мая 2009 в 23:43

      +1

      не хочу навязываться но это точно спорно!
      пс: а минусуют скорее день такой (имхо)

    • А мне кажется, что нет, и я просто описал свои мысли. Обычная кнопка — обычное поведение. На гмыле кнопки не обычные, потому с курсором.

• Вообще кнопка по классическому определению выполняет действие, а не перекидывает на другую страницу.
  Поэтому для кнопок — курсор-pointer, а для перехода на другую страницу — ссылки и курсор-hand.

  Думаю, так 🙂

  • В поисковых формах, входах (логин, пароль) куда угодно — кнопки именно что перебрасывают на другую страницу.

    • Нет, они дают команду на обработку имени и пароля, а вот по результатам обработки может выполняться переход на другую страницу.

      Например, предположим, что в форме есть дву кнопки — «Войти в систему» и «Очистить форму». Вы бы какие курсоры на них поставили?

      • Я уже свое мнение сформировал. Плохо кнопки без курсора. Плохо стандартные кнопки с курсором. Плохо очень нестандартные на вид кнопки.

        Идеал — кнопки, похожие на стандартные, но не стандартные, с курсором. Gmail пример.

        • А ради чего делать нестандартные кнопки? Только ради изменения курсора?

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

          Думаете, это оправдано? 🙂

          • Я думаю разработать один раз шаблон (посмотреть, как у Gmail сделано, взять лучшее оттуда) — а дальше цвет и форма настраивается легко и быстро для разных проектов.

          • НЛО прилетело и опубликовало эту надпись здесь

            • Это хороший аргумент. И в этом случае поведение кнопки должно совпадать с поведением кнопки в ОСи. А там курсор не меняется. Собственно, поэтому я так против его изменения и выступаю. Это нестандартное для кнопки поведение.

              • НЛО прилетело и опубликовало эту надпись здесь

    • Да ну бросьте, в вашем любимом гмыле страницы не меняются в классическом понимании, меняется контент.
      Если вам так нравится гмыло, зачем было этот опрос устраивать? 😉 Вы везде, простите, суёте этот гмэйл, типа это аксиома безупречная.

      • Это просто пример. Все остальные варианты хуже.

  • простите, но я может что-то путаю, но разве pointer и hand не одно и то же, если судить по названию? А если серьезно, то нет такого значаения в CSS, как hand

    • Pointer — обычная «стрелка»;
      Hand — «рука», которая обычно появляется при наведении курсора на ссылку.

      Это не свойства CSS, это обозначения типа курсора. Они с десктопных приложений повелись еще 🙂

• Чисто пользовательское ИМХО: если курсор, как у ссылки, то я могу открыть это дело в новом табе. Если нет — то это кнопка и откроется она соотвествующим способом. Раздражает, когда думаешь, что тычешь в ссылку, а вместо нового таба получаешь хрен.

  • • Не пользуюсь Gmail поэтому не буду говорить о нем, но курсор-hand — это повод ожидать от объекта соответствующего поведения, в том числе открытия в новой вкладке или сохранения ссылки в закладки. От кнопок такого ожидать не приходится, а курсор в заблуждение может ввести запросто.

      • Динамические ссылки тоже вас раздражают? Вот ниже есть «написать комментарий», например. Это еще так, а как быть с ajax-ссылками?

        • Если честно, для такой штуки как «написать комментарий» внизу этой страницы я бы применил не ссылку с пунктирным подчеркиванием, а кнопку. Разумеется, потребовалось бы ее соответствующим образом оформить.

          • Пунктирные ссылки уже стандарт. Кнопки более функционал означают. А скрытие-закрытие, например, пунктир как раз очень в тему.

            • Такие ссылки позволяют экономить место на экране и позволяют дизайнерам и верстильщикам не сильно напрягаться с оформлением 🙂 Во многих случаях это вполне оправдывает их использование 🙂

              Как ссылки, такие элементы могут получить и курсор-hand, но только поэтому.

              Кнопки не являются «родственниками» ссылок по назначению и поэтому должны иметь курсор-pointer.

    • Я им практически не пользуюсь — только через IMAP. В тех местах, которыми пользуюсь, чаще всего раздражает. Особенно если нет явных признаков того, что нажимаемое — не ссылка, а кнопка.

      • Обсуждается вариант, когда признаки есть.

        • Какие варианты вы можете предложить для выделения того, что объект ведет на другую страницу? Желательно чтобы это было видно до того, как я на него нажму или подведу курсор 🙂

          • Как вариант сделать все кнопки ссылками вообще. Т. е. чтобы их всегда можно было открыть в табе.

            • Тогда будет логичным оформить их как ссылки и не путать с кнопками 🙂

              Вообще мне известно одно классическое применение ссылок, похожих на кнопки и имеющих курсор-hand — навигационные меню сайтов, обычно где-нибудь в заголовке страницы. Но там, как правило, не пытаются изобразить кнопки, похожие на кнопки операционной системы.

        • Я бы так не сказал. Да, оно похоже на кнопку по форме, но можно привести множество примеров, когда таким способом оформляют простые ссылки. И фиг угадаешь, где что.

          newegg.com — в правом верхнем углу «My Account». Ссылка или кнопка?

          ebay.com — «Sign In» и «Register» — это что?

          amazon.com — ПВУ, «Cart» и «Your Lists»?

• • Прикольные у них «слипшиеся» кнопки, которые Left, Center и Right.

    А вот нетрадиционный для кнопок курсор даже в таком примере раздражает. Ну почему на кнопке Save такой курсор? Я сохраняю документ, а меня куда-то перекинут вместо продолжения редактирования? А с Cancel и вообше не ясно. Отменить действие, перейдя еще куда-то?

    Еще один момент — ссылки, как правило, срабатывают сразу при нажатии (onMouseDown), кнопки — при отпускании кнопки (onMouseUp). От объекта с курсором-hand ожидаешь поведения, характерного для ссылки (немедленная реакция), но в данном примере это совсем не так.

    В общем, не меняли бы они курсор — получились бы совсем хорошие КНОПКИ! 🙂

    • Смена курсора не есть символ перехода. Например, он используется во флеше (ютуб тот же). В ajax-ссылках, пунктирных. Во всяких ползунках перетягивающихься. Смена курсора — символ активности элемента.

      • Кнопки и ползунки сами по себе имеют вид активных элементов. Дополнительное выделение им не требуется. А курсор-hand, на сколько я понимаю, ввели для выделения именно гиперссылок, то есть, связей с другими документами. И использование его для других целей я считаю ненужным и даже не особо полезным для однозначности восприятия интерфейса.

        • А на Хабре вы как комментарии оцениваете? Что там кнопки нужны? Или курсор менять не нужно?

          • Эти элементы не выглядят как кнопки, поэтому, учитывая контекст (web-страница) меня вполне устраивает такой курсор, какой есть.

            С тем же успехом можно было бы оформить их как flat button (кнопка, становящаяся выпуклой при наведении мыши) и курсор не изменять.

    • s0b3r

      27 мая 2009 в 10:26

      Ссылки тоже срабатывают «onMouseUp»… Если нажмешь случайно ссылку, и поймешь до того как отпустил, что не хочешь переходить на другую страницу, есть возможность убрать курсор со ссылки и перехода не произойдет.

• лучше делать onmouseover эффект на кнопке, это более наглядно.

  • Вот! Это намного лучше, особенно если не хочется, чтобы кнопка сильно бросалась в глаза (на насыщенной элементами панели, например) 🙂

• ну наконец-то нормальный опрос 🙂

• на самом деле все равно, главно что бы было очевидно, что кнопка нажимаемая, а когда курсор остается стрелкой при наведении и кнопка состоит из просто серого фона, непонятно кликнул ты по ней или нет.

• Поведение по умолчанию — наиболее ожидаемое.

• allx

  27 мая 2009 в 01:37

  +2

  приходиться постоянно добавлять cursor:pointer;

• так как для кнопки «голосовать»

• Нажиматься должна вся кнопка, а не только ссылка по центру.

• Раньше как-то не задумывался над этим вопросом, но когда увидел сам вопрос, получилось как в том анекдоте про учителя с бородой:

  — Скажите, профессор, вы, когда спать ложитесь, бороду на одеяло или под одеяло кладете?
  — Да, знаете, как-то не задумывался.
  — Ну, извините, пожалуйста.
  Через неделю зеленый профессор с черными кругами под глазами встречает в коридоре того же студента и хватает за грудки:
  — Вообще спать не могу — и так неудобно, и так неудобно!

• Mew

  27 мая 2009 в 05:39

  +2

  Я считаю что всегда надо показывать палец. Палец означает что кликабельно. А кликабельно — необязательно переход на другую страницу. Кроме того многие браузеры по-разному отрисовывают стандартные кнопки, возьмите к примеру оперу. Все что кликабельно надо выделять поинтером. Так я думаю

• Есть ещё одно решение: курсор заменять, но не на pointer, а на url(https://…/имяфайла.cur), pointer.

  То есть самому рисовать курсор, и тем невозбранно придать ему в точности желаемую форму и цвет.

  Над кнопкою такой курсор может быть ломаной стрелкою, как на кнопке «Enter» (тем символизируя, что жмякнуть мышою по кнопке — это всё равно, как если бы жмякнуть по кнопке «Enter»).

  Это будет слегка непривычно, зато каждому понятно (всем же доводилося видать прежде, как оно на кнопке «Enter» нарисовано).

• НЛО прилетело и опубликовало эту надпись здесь

• НЛО прилетело и опубликовало эту надпись здесь

• я думаю на все что нажимается нужно делать «перчатку»

  • причём, считаю, что и ОСи должны потихоньку поттягиваться.

• tau

  28 мая 2009 в 14:32

  допустим я первый раз в вебе и/или первый раз за компьютером.
  Окуда мне знать какие они — стандартные кнопки?
  Для пользователя Маков под Виндовс кнопки будут другими и наоборот (подставьте любимые ОС).
  А смена курсора дает понять, что что-то произойдет.
  Да и указательный палец в принципе очень неплохая метафора.