Ciemna strona webdesignu - podium zwycięzców

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Są takie techniki pisania stron, które poważnie nadwyrężają moje zdrowie psychiczne. Wynikają… nie wiem z czego, chyba ze zbyt pobieżnego przyjrzenia się podręcznikowi HTML / CSS. Dlatego postanowiłem zaprezentować te najmocniej następujące mi na odcisk. Nie są ogromnymi problemami natury logistyczno-programistycznej - są za to wielkimi wykroczeniami w stronę użyteczności i intuicyjności używania WWW.

1. `input:hover` & `input:focus`

Na pierwszy ogień idzie korzystanie z pseudoklas :hover oraz :focus dla pól formularzy. Pierwsza oczywiście określa czy kursor myszy znajduje się nad polem, druga natomiast czy w polu jest fokus / kursor.

Panuje irytująca maniera - określmy odmienny wygląd pola dla :hover, ale nie ruszajmy :focus. Na stronie testowej widać jak nieprzemyślane jest to rozwiązanie. Otóż jeśli używamy pola tekstowego, to najczęściej nie chcemy aby kursor myszy przesłaniał nam to co wpisujemy (zwłaszcza, jeśli nie jest to domyślny jednopikselowy wypłosz) i zabieramy go z pola. Efekt znika - pole zmienia wygląd na domyślny. Nie ma to sensu, a czasem zaburza czytelność - zaznaczaj wybór pola przez :hover i :focus, nigdy przez sam :hover. Lepiej?

IE6/win nie zrozumie tych selektorów - wszystko gra. IE7 rozumie :hover, nie rozumie :focus - usuń :hover komentarzami warunkowymi. IE5/mac rozumie :focus, nie rozumie :hover - jest okej.

2. Np.: `div:hover`

Dalej mamy jeszcze jeden przykład związany z :hover. Stosując go dla elementów blokowych w celu zaznaczenia / zwiększenia czytelności tekstu określamy pole aktywne na 100% dostępnej przestrzeni. Widać, prawda? Nie mam ochoty na świecenie się czegoś na drugim krańcu ekranu, jeśli wzrok i myszkę mam tutaj. Mistrzem podstępu był swego czasu wordpressowy szablon Hemingway - podświetlanie pola wyszukiwania, nie dość że było zrobione metodą z punktu pierwszego (nadal jest), to elementem aktywnym był div wypozycjonowany i rozciągnięty na całą szerokość nagłówka. Chcesz użyć :hover dla takich szczegółów na stronie? Ok, ale zrób to dobrze.

3. `label` & np.: `input type="checkbox"`

Jest to wielka bolączka stron - brak klikalnych etykiet pól jedno/wielo-krotnego wyboru. Twórcy stron po prostu zapomnieli znaczników HTML-a. Co więcej - „nowoczesne” strony też wydają się nie wiedzieć o co c'mon. Tak zwane polskie Web2.0 w tym przoduje: Trendomierz, Spinacz, Gwar (także Wykop, ałć¹). Autorzy serwisów i wszyscy, którzy jeszcze tego nie wiecie - element <label for=""></label> powoduje przypisanie objętego nim tekstu do pola formularza. W for wpisać należy id pola (i trzeba to robić zawsze, ze względu na IE6). Używając tego prostego znacznika zwiększamy pole gdzie użytkownik może kliknąć - nie jest już ograniczony do tego kwadracika 10 na 10px.

Jeśli używasz label, podkreśl możliwość kliknięcia w tekst - ustaw kursor „łapki” nad nim.

label { cursor: pointer; }

W ten sposób mocno zaznaczysz, że element można kliknąć → zainteresujesz użytkownika → nauczysz go, że w sieci też można klikać w etykietę → spowodujesz, że kodząc stronę zrobi tak samo. Plusy widać jak na dłoni, dlatego nie chcę kłocić się czy łapka powinna być zarezerwowana dla linków - dla mnie użyteczność jest ważniejsza. Masz stronę z choćby jednym polem checkbox / radiobutton i nie używasz label? W tej chwili leć to poprawić, nie żartuję.

Jeszcze tu jesteś? :)

1) for działa z id, nie name

Tagi wpisu: css, focus, forms, hover, ie5, ie6, ie7, input, label, usability

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 24 czerwca 2006 o 23:03

Kategorie: CSS, Użyteczność

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

mcv 1 24 czerwca 2006, 23:09

O nie, tylko nie łapka… od razu przywodzi na myśl linki, javascript, itp. Boję się, że klikając przejdę gdzieś do innej strony.

A tak w ogóle, to wystarczy, że nad tekstem nie wyświetli się kursor w postaci pionowej kreski, tylko właśnie normalny „pointer” (strzałka…), nieprawdaż?
Riddle 2 24 czerwca 2006, 23:10

Będę stał przy swoim i namawiał do łapki. Po pierwsze gdzie ludzie robią czarne linki bez podkreśleń? Po drugie - zdanie ze strzałkami w poście. :)
mcv 3 24 czerwca 2006, 23:13

Tee, mnie się „pointer” z „default” przemieszało… ;-)
Błażej Stokwisz 4 24 czerwca 2006, 23:20

Co do 3. punktu – oj bardzo denerwuje takie pomijanie klikalnych etykiet. A najabardziej już, że najczęściej to zjawisko znajdziej u naszych gigantów – onet, wp, interia… :-/
(a łapka mi się podoba/pasuje – przyzwyczaiłem się już – chociaż wcale taka niezbędna nie jest)
Riddle 5 24 czerwca 2006, 23:22

No dokładnie. A aby nie było, że tylko starocie nie umieją pisać stron - nowy Slashdot: http://slashdot.org/#poll-title - prawa strona. Argh.
djurban 6 24 czerwca 2006, 23:23

1.) to drugie gorzej, jak masz jedno focused a hover nad drugim to jest bloated, lepiej uzywac osobnego koloru do focus

2.) Nie wiem, nigdy bym nie wpadl na to zeby robic to cos dla 100% mozliwosci, chociaz idea pakowania wszedzie wrapperow jest troche meczaca, po prostu bloki powinny zawsze byc odpowiednio ograniczone, w twoim przypadku to width: 768 winno lezec po prostu w body a wrapper jest niepotrzebny :)

3.) Mnie zawsze wkurza ten pointer, jak widze to ustrojstwo nagle na stronie to nie wiem z reguly co sie dzieje. Szczegolnie w tym webcostam.
Riddle 7 24 czerwca 2006, 23:26

djurban:
Ad 1: Nie rozumiem. :)
Ad 2: Ale jaki „mój przypadek”? ;) To przykład, najprostszy z możliwych i bardzo sugestywny.
djurban 8 24 czerwca 2006, 23:28

2.) no mowie ze robienie wrapperow boli i ze po prostu trzeba myslec o tym co ma jaki rozmiar a nie wstawiac kazde mozliwe pole we wrapper :)

1.) w przykladie ok: fokusnij sobie duze pole i potem hover na polu nad nim i masz balagan brzydki, pole ktore jest aktualnie focused powinno miec inny kolor niz te z hover.
Szafranek 9 25 czerwca 2006, 01:29

Ad. 3. W sieci łapka zawsze oznacza link. Zauważ, że jeśli stosujesz element label, wskaźnik myszy (przynajmniej w IE i FF) i tak będzie inny niż w wypadku zwykłego tekstu: zamiast kursora text pojawi się pointer. Nie ma więc potrzeby wprowadzania dodatkowego zamieszania przez zmianę domyślnego zachowania przeglądarek.
Patrys 10 25 czerwca 2006, 08:03

Riddle, znów sprzedajesz swoje dziwolągi jako uniwersalną prawdę objawioną. Spora część ludzi tutaj wyraźnie powiedziała ci, że uważamy kursor z paluchem nad etykietami za błąd, a ty robisz z tego tutorial wygłaszany głosem proroka. Jeśli tak ma wyglądać twój blog, to przed poradami wstawiaj wielki żółty prostokąŧ z linkiem do W3C i napisem "uwaga, ja wiem lepiej." Tym, którzy nie potrafią odróżnić zasad webdesignu od zasad Riddle'a, robisz zwyczajnie krzywdę.

Ad 2. "Nie mam ochoty na świecenie się czegoś na drugim krańcu ekranu, jeśli wzrok i myszkę mam tutaj."

A ja nie mam ochoty pokazywać przeglądarce myszką, gdzie mam wzrok. Ty i parę innych osób zakładacie natomiast z uporem maniaka, że moje oczy przesuwają kursor myszy po ekranie i należy podświetlać co się da (listy numerowane, kawałki kodu, akapity). Elementy nieklikalne w ogóle nie powinny reagować na :hover.
thion 11 25 czerwca 2006, 08:59

Patrys, to podświetlanie elementów nieklikalnych jest, przynajmniej według mnie, tylko zbędnym bajerem.

Co do punktu trzeciego, jakoś nigdy mi przez myśl nie przeszło, żeby kliknąć na etykietę, nie link. Zawsze klikam na "kółko", czy "kwadracik".
Riddle 12 25 czerwca 2006, 09:17

Patrys, uzasadniłem swoje zdanie dość wyraźnie. Ludzie muszą się nauczyć, że można kliknąć etykietkę, a wszyscy będziemy mieć lepiej i wygodniej. Czasy się zmieniają i linki przestają być jedynymi elementami, które zmieniają stronę / coś na stronie - zaznaczenie czekboksa potrafi w wielu nowoczesnych serwisach pokazać nowy panel formularza albo uaktywnić coś innego. Kursor łapki pokazuje, że element można kliknąć - robiłem testy na rodzinie i *nikomu* do głowy nie przyszło, że zwyczajny tekst bez podkreśleń i innego koloru może być linkiem. Trwasz przy swoim nie podając prawdziwych „przeciw”.

Elementy nieklikalne mogą nie reagować na :hover. Jeśli natomiast reagują, niech robią to jak napisałem - bez rozpraszania uwagi.

Ogólnie - obudź się Patrys, rozejrzyj dookoła i zegnij trochę swój sztywny kark. Mamy 2006 a nie 1996 rok.
kebe 13 25 czerwca 2006, 09:37

Zgadzam się z Piotrem.
thion 14 25 czerwca 2006, 09:47

Cóż, Riddle, zrobiłem małą ankietę wśród niektórych moich znajomych, którzy nie zajmują się użytecznością czy webdesignem (czyt. zwykły użytkownik) i potwierdziły się Twoje słowa, że nie przyjdzie im na myśl nawet kliknięcie w etykietę, jeżeli nie pojawi się nad nią kursor "łapki".
olorin 15 25 czerwca 2006, 09:47

Łapka na label - mi się to nie podoba, łapka powinna być zarezerwowana dla linków. W wielu serwisach opisy pól są jednocześnie linkami do wyjaśniających je stron, ustawiając łapkę na labele całkowicie zdezorientujemy ludzi.

>Elementy nieklikalne w ogóle nie powinny reagować na :hover.
>Patrys, to podświetlanie elementów nieklikalnych jest, przynajmniej według mnie, tylko zbędnym bajerem.
Zgadza się... Chociaż nie miałbym nic przeciwko jeżeli będziemy po najechaniu myszką zwięszać kontrast (tak aby były czytelne) mniej ważnych elementów strony. Ale z umiarem!
mcv 16 25 czerwca 2006, 11:47

Moim skromnym zdaniem lekkie hoverowe przyciemnianie wierszy rozwlekłych tabel jest pożądane ;-)
yar 17 25 czerwca 2006, 11:53

@riddle: czy zmiana kursorów przez CSS działa wszędzie? kiedyś chyba próbowałem i działa chyba tylko w niektórych przeglądarkach, nie pamiętam już jakich :D

artykuł całkiem niezły
Riddle 18 25 czerwca 2006, 11:59

yar:

element {
cursor: pointer;
cursor: hand;
}

Zadziała wszędzie. :)
zwierzak 19 25 czerwca 2006, 14:24

De ja vu? Już kiedyś to czytałem ;)
Ale porady dobre, a najczęściej ludzie zapominają o label i :focus
nightspirit 20 25 czerwca 2006, 23:22

eee... stare? mi się jeszce nigdy nie zdażyło żeby o tym zapomieć ;P - http://nightspirit.org/nightspirit/home.html - kiedyś coś takiego zrobiłem ;)
dely 21 26 czerwca 2006, 07:39

Hm, :hover dla wierszy tabeli, szczególnie dla bardzo szerokich jest OK. Natomiast dla inputów, textarea, szczególnie taki kolor jak w przykładzie czyli bijący w oczy to NIE, NIE i jeszcze raz NIE. Ogólnie muszę się Wam zwierzyć, że :hoverowanie wszystkiego co się da osobiście działa mi na nerwy :)

"Ogólnie - obudź się Patrys, rozejrzyj dookoła (..). Mamy 2006 a nie 1996 rok." - zasadniczo to nie do mnie, ale fakt, że mamy 2006 r. nie oznacza, że automatycznie mamy cukierkować, :hoverować i łapkować wszystko co się da.
bmalkow 22 26 czerwca 2006, 07:44

Dzięki za kolejny odcinek poradnika! Znów się czegoś nauczyłem.
Jednak ja pozostawię nad labelem kursor taki sam jak jest nad samym polem -- przecież nad okienkiem checkboxa się nie zmienia
Matek 23 26 czerwca 2006, 10:10

Super kucyk.
Thinker 24 26 czerwca 2006, 18:34

Z tym labelem to tez nie wiedzialem. Milo czasem cos poczytac :)
A kursor jak najbardziej lapka - a label bez podkreslenia to nie link.
Paweł Majczyk 25 27 czerwca 2006, 00:10

Łapka? Nie, zgubiliśmy sie wczesniej: klikać, czy nie klikać - o to jest pytanie!
Pomyślmy nad ideą klikania w label. Dla nie widomych oczywiste - pewne przejście do pola szukanego, dla widomych? No właśnie, po co klikać w label? Czy tak trudno odnaleźć pole tekstowe/checkboxa odpowiadającego danej etykiecie? Raczej nie, a nawet jeśli, to bład leży nie w naszej niewiedzy o klikalności label, lecz błedzie przy projektowaniu wygladu formularza. A czy kursor sie zmieni ślepemu to akurat go nie obchodzi. Czy userzy mogą klikać w label? Imho mogą, ale nie można ich ani do tego zmuszać, ani sugerować. Moim zdaniem dużo ważniejszy atrybut etykiety, to title. Jeśli zmieniać kursor, to właśnie na znak zapytania - help, aby własnie zasugerować przeczytanie dymka w razie ewentualnych niejasności (co autor miał na myśli w formularzu ratalnym podając pole "wydatki ogólne")
dziad 26 27 czerwca 2006, 15:35

1. jakby jeszcze dało się przeskakiwać między polami formularza jednym naciśnięciem taba to byłbym już w siódmym niebie... ;)
Paweł Majczyk 27 27 czerwca 2006, 19:45

Przecierz masz do dyspozycji atrybut tabindex, jednak sam nie wiem czy to nie za odważny krok, bo niektórzy naprawde mogą chcieć zaznaczyć label naciśnięciem tabulatora.
Claygirl 28 28 czerwca 2006, 22:02

Tylko jedna uwaga: Riddle, Ty męska szowinistyczna świnio! :P (już Ty wiesz o którą gwiazdkę chodzi!)
MuKuL 29 30 lipca 2006, 22:26

Boże dzięki ci, że istnieją tacy ludzie jak ty czy Oskar K. lub Puck, którzy uczą dobrego XHTML'a i CSS'a. Te wszystkie kursy w sieci mnie ograniczały :)
hidee 30 16 kwietnia 2007, 12:46

Ja obstaję przy tym, że cursor:pointer jest zarezerwowany do linków … i elementów rozwijających menu. Label można podświetlić wraz z polem formularza (ale po co zmieniać kursor) . W ten sposób każdy się nauczy, że można klikać w etykiety, ale bez uczucia, że zaraz zostanie się przekierowanym na inną stronę. Mam takie uczucie i czasami nie klikam w takie pole. Jeżeli na stronie podpięty jest jakiś skrypt to przecież można napisać:

<a href="javascript:twojskrypt();">ble ble ble</a> 
lub
<a onclink="twojskrypt">ble ble ble</a> 
Co do etykiet też je zastosuję.

PS. sprawdź Riddle w specyfikacji w3c, czy możliwy jest zapis cursor:hand. Wyczytałem, że nie i również próbowałem walidować. Przeszło z cursor:pointer, ale z cursor:hand nie.
Riddle 31 16 kwietnia 2007, 12:48

Zapis w moim poprzednim komentarzu jest dla starszych przeglądarek, które rozumieją hand a nie pointer.
hidee 32 16 kwietnia 2007, 12:53

Co do :hover to odradzam dla pól input i textarea. Styl :focus może pozostać w celu zaznaczenia pola aktywnego w formularzu, w końcu do niego internauta wprowadza tekst.
aroundtheworld 33 15 grudnia 2007, 01:14

Proponuję ZAWSZE sprawdzać jak klasy css wyświetlają różne przeglądarki FF podchodzi do hierarchii klas w odwrotnej kolejności nadrzędności – powoduje to dziwne efekty wyżej opisanych przypadkach