Бутонът също е връзка
Не е тайна, че когато преместите курсора на мишката върху връзка в Интернет, стрелката на курсора се променя в показалец на ръка. Това се отнася за текст, изображения и всякакви други елементи на страницата, които представляват връзка. Но защо показалецът не се променя, когато курсорът на мишката задържи над бутона?
Бутонът за изпращане попада в това определение. Поне това се отнася за бутоните на търсачката. Очевидно такива гиганти като Yandex и Google не са съгласни с това. Бутоните на тези търсачки се натискат милиони пъти на ден. Но показалецът не се появява.
И е лесен за изпълнение. Например, добавете класа за търсене към HTML кода на бутона за търсене:
И в CSS записваме свойството на този клас:
Някой може да каже, че „всичко са малки неща“. Но "използваемостта" няма да се съгласи.
Представете си, екипът на Google, избирайки между две вариации на синьото, тества 41 нюанса от този цвят (на английски), за да определи кой е по-подходящ за техните потребители.
Бутонът заслужава указател
Също така се придържам към твърдението, че в мрежата курсорът върху бутон трябва да се превръща в показалец. Въпреки че, ако бутонът изглежда „по подразбиране“, без CSS трикове, в някои случаи можете да оставите стрелката. добре дошъл обратно!
Мисля, че дори ако бутонът изглежда без css трикове, т.е. обикновен изпъкнал бутон и можете да щракнете върху него, имате нужда от показалец.
2 Никита Вакорин един бутон - съгласен съм. Но ако това е някакъв вид калкулатор на страницата за сложни изчисления с много бутони (без css дизайн) - просто този „някакъв случай“, когато е напълно възможно без cursor:pointer;.
Винаги съм подкрепял тази гледна точка.
Между другото, ако направите бутон чрез input:image, тогава курсорът се появява сам, а ако използватевход:изпращане или просто бутон, след това не. Мисля, че си струва подобни неща да изглеждат еднакви.
Но, както беше отбелязано по-горе, струва си да се разграничи бутон, който презарежда страницата или прави нещо важно, от бутон, който извършва минимално действие и дори се състои от голяма група бутони.
Виждам, че бутоните са се променили ) Но ето го проблемът: във всички реализации на border-radius (Safari, Firefox) има голям проблем, когато фонът пада извън границите на рамката. Решението е изобщо да не използвате рамка или да изберете по-близки цветове.
Между другото, Safari подчертава всички полета със свойството outline и то също може да бъде закръглено: -webkit-outline-radius .
Вадим, благодаря за съвета. Явно радиусът на бордюра е измислен, но за изглаждането не се е погрижило правилно. Въпреки това сивото и бялото са комбинирани.
Между другото, има и -khtml-border-radius за Konqueror. В резултат на това кодът на бутона без граници се оказва така:
Е, текст-сянка на вкус.
А що се отнася до полетата на формуляра и „контура“, по-добре е изобщо без него - контур: няма
редизайн на живо. Извършва се полиране на маркиране
И аз вероятно съм ужасен ретрогад, но ... не мога да се съглася. Според мен бутонът е преди всичко стандартен елемент на интерфейса. Същата форма за търсене в сайта - как е фундаментално различна от вградената лента за търсене в браузъра? Според мен е логично потребителят да активира едни и същи навици при работа с двата интерфейса („влязох без да се замисля, натиснах го без да се замисля“). Ако при такова обичайно задържане на курсора на мишката върху бутон курсорът внезапно се промени на „референтен“, някои от потребителите (като мен;) може да се озадачат от това: „Хм ... Това бутон ли е или не е бутон? Ще ме отведе ли от тази страница, където току-що написах фразата за търсене толкова усърдно?…”
НапълноПодкрепям аргументите на Алексей Скрипник. Що се отнася до JS и Ajax псевдовръзките, не случайно се превърна в добра практика визуалното им отделяне от обичайните (с пунктирана линия, специална икона и т.н.). Въпреки че като цяло окачването на JS функционалност на „глухи“ връзки е, IMHO, неуспешна практика (дори :hover в IE6 не го оправдава - все едно, без JS, тези връзки не са полезни!). За такива неща HTML има ... бутони :)
Според мен си струва да промените курсора на „пръст“ само за чисто дизайнерски и декоративни елементи, които не приличат нито на стандартни бутони, нито на обикновени връзки - така че потребителят поне по някакъв начин да познае, че можете да щракнете там. И когато възможността за кликване е очевидна - няма нужда да нарушавате стереотипите ненужно ...
Много ясно, но оставам на мнението си.
„Същият формуляр за търсене в сайта - как се различавафундаменталноот вградената лента за търсене вбраузъра?“
Няма фундаменталнаразлика - бутонът е там, бутонът е тук. Но лично аз винаги съм наясно с разликата между това да съм в програма на операционната система и това да съм в „интернет прозореца“. Затова не съм съгласен, че "при работа с двата интерфейса се активират едни и същи навици". В интернет има много обикновен текст, а в програмата можете да щракнете върху почти всяка дума и да започнете действие.
„...някои потребители (като мен;) може да са озадачени от това...“
Второ, оказва се, че ако създам меню за навигация на сайта, чийто дизайн на интерфейса съответства на дизайна на интерфейса на ОС, тогава трябва да променя поведението „по подразбиране“ на курсора (пръста) на стандартна стрелка, за да не нараня стереотипите.
„Хм… Това бутон ли е или не е? Ще ме отведе ли от тази страница, където току-що написах фразата за търсене толкова усърдно?…”
Ако този „бутон не е бутон“ по някакъв начин прилича на правоъгълник с думата „Намери“, тогава нито един стереотип не може да предизвика подобни съмнения.
Съгласен съм, че се счита за добра практика локалните връзки да се разделят визуално, но дори и тези връзки да са подчертани с пунктирана линия или маркирани с икона, пак имате нужда от показалец на връзка (под формата на ръка;).
Никита, благодаря за отговора! Въпросът за менютата, предназначени за интерфейса на ОС, ми помогна да изясня позицията си :). Първоначално исках да отговоря „разбира се, да, имитирайте операционната система - така до края“, но след това разбрах: в крайна сметка какво е навигационното меню на сайта, ако не набор от връзки?
И тогава ми просветна: все пак курсорът под формата на пръст е прекрасен вграден лакмусов тест, който помага да се разграничи елемент от системната функционалност (бутон, избор, лента с инструменти, контекстно меню и т.н.) от истинска връзка (която може да се отвори с колело в нов прозорец, „изпратете на приятел“ и т.н. според списъка), само преструвайки се (поради прищявката на дизайнера:) такъв контрол на системата!
И за разликата между работата в прозореца на програмата и „Интернет прозореца“: тя е очевидна само за нас, ИТ хората, които работят с компютър дълго време и професионално. За много хора, които са далеч от ИТ, изобщо няма нищо очевидно в компютърните интерфейси - всичко е ново и дори понякога плашещо :). Не можете да обясните на такива потребители, че бутон, който е еднакъв на външен вид и функция, се държи различно. „тук се отнася за сайта, а там за операционната система“, за тях от тези обяснения в мистериозния и непонятен свят на „простосмъртните“ на компютърните технологии, това само ще добави още една загадка отвъд здравия разум.
P.S. Аз самият изглежда разбирам разликата между мрежата и операционната система, между обикновена връзка и локална ... но: на работа постоянно се занимавам с уеб приложение, където двеменюта: от обикновени връзки и JS такива. И често ми се налага да отворя страницата на това приложение в нов раздел. И фактът, че за половината от връзките това се прави просто с „колело“, а за другата половина (от същия тип, със същия курсор!) Не се прави по никакъв начин - това доста вбесява ...
Вземам за пример бутона „Намери“ в Yandex. Той се вписва в понятието „функционалност на системата“, но е връзка към страницата с резултати от търсенето. Освен това получената връзка може да бъде изпратена на приятел или запазена в отметки. Недостатъкът е, че поради „шибаната, честно казано, поддръжка на браузъра за съществуващи инструменти“, това не може да се направи по подразбиране чрез щракване с десния бутон върху този бутон и запазване или копиране на връзката предварително. По същата причина не можете да използвате клавишни комбинации, за да отворите резултатите от търсенето в нов раздел.
Ето защо считам, че подобни ситуации трябва да съответстват на указателя на връзката, както съм написал в текста на записа.
Между другото, има това свойство на CSS:
Може би бъдещето ще ни даде нови „курсори по подразбиране“.
Тази тема ме кара да се чувствам като истински маниак.
Upd: относно джаджата - сбърках разбира се, че не я видях. Същите Google и Yandex вече имат това (например, ако щракнете върху връзката „изображения“ вместо бутон) ...
И фактът, че „резултатът е важен за потребителя“ не означава, че визуалният дизайн на бутона, който ще доведе до този резултат, не трябва да бъде направен под формата на ръка с показалец.
В контекста на тази тема не е необходимо да ограничавате собствената си фантазия, ако тази фантазия не оказва лошо влияние върху „преживяването“.
И указателят за справка на бутона не принуждава потребителя да „върши допълнителна умствена работа“. В крайна сметка липсата на индикация, че в това поле трябва да въведете фраза за търсене,в допълнение към обозначението, посочено с думата на бутона до това поле, то само потвърждава интуитивното мислене на интернет потребителя, което е достатъчно развито в наши дни, в по-голяма степен внушено от познатата функция на полетата на търсачката
> само защото „резултатът има значение за потребителя“ не означава, че визуалният дизайн на бутона, който ще доведе до този резултат, не трябва да бъде под формата на ръка с показалец.
Има, разбира се, контрапримери - вземете GMail, да, има "пръст" навсякъде. Въпреки че лично за мен (с моя личен „опит“) неговият „опростен“ интерфейс изглежда по-логичен: обектите (писма, папки, допълнителни услуги и т.н.) са връзки, а действията (изпращане, запазване, изтриване и т.н.) са стандартни бутони. Въпреки че може би наистина няма нужда потребителите на Googlemail да мислят за тази разлика, нека курсорът да бъде „кликнат“ навсякъде ... Не мисля, че решението за промяна на курсора за пощата (както и неговата неизменност за търсачката :) е взето от местни дизайнери изневиделица. Може би тези неща се нуждаят от индивидуален подход ...
Между другото, не толкова отдавна имаше разгорещен дебат по тази тема в Habrahabr (тогава гласувах за „пръста“ само за нестандартни бутони). Чудя се какво би разкрило подобно проучване сред неманиаците.
Съществуващият „опит“ е добър. Можете да промените дизайна на бутона, но следвайте логиката на взаимодействие с този бутон за тези, които „не виждат разликата“, така че да могат интуитивно да разберат идеята.
Бих нарекъл този елемент „падащо меню“. И ръката се появява, тъй като можете да натиснете. Според мен би било по-правилно, ако при задържане на курсора на мишката падащото меню се появява автоматично, без щракване. Въпреки че наблизо има триъгълник, сочещ надолу; и пунктирано подчертаване. И като цяло - това е JS :) Може би първоначално потребителятпредполага, че ще отиде на нова страница, но при натискане е приятно изненадан от скоростта на избор. Не можете без тестове за използваемост
В Habrahabr съм съгласен с мнението, че ако можете да щракнете върху нещо, тогава трябва да се появи курсор под формата на ръка. Но мисля, че това не трябва да е основната индикация, че обектът може да бъде кликнат.
Сензорните екрани изобщо нямат курсори, които да показват и следват недокосваемото движение на пръста. Виждате линка, натискате го с пръст. Виждате бутон, натискате и него. При мишката е подобно - преди натискане се появява показалец.
Q.E.D
Доказателството е логически погрешно. От конкретен случай е невъзможно да се направят недвусмислени заключения относно общото правило.
В противен случай ще се окаже, че за квадратчета за отметка и за радио бутони, и за опции на менюто ( изберете s), и за раздели - за всички „видове бутони“ (според CSS3) ще трябва да извайвате референтен курсор.
В демонстрацията на външен вид: бутон, курсорът е по подразбиране. Променя се само за външен вид: хипервръзка (тъй като „указва връзка“)…
Поведението по подразбиране за браузъра е външен вид:бутон, където бутонът има граници и изглежда изпъкнал.
Като цяло, ако в спецификацията се посочва, че външен вид:бутон е поведението по подразбиране за бутоните „times“ на HTML4/XHTML1, тогава браузърите може все още да не са интегрирали поведението по подразбиране за „new times“.
И вече може да се направи логичното заключение и заключение - бутонът може да бъде връзка
Веднага го добавям. Ако кажете „можете да окачите javascript манипулатор на връзка“, тогава ще отговоря: „Все още можете да отворите връзката, заобикаляйки манипулатора, като отворите връзката в нов прозорец / раздел, например, като използвате средния бутон на мишката.“
момчета Някак си прекалено усложняваш всичко. потребител,IMHO, няма да мисля толкова дълбоко. Аз съм на мнение, че показалецът трябва да се постави върху нестандартни бутони (особено ако няма състояние на задържане), за да се покаже, че обектът под курсора може да се кликне.