👋 Nový obsah na borekb.cz

Info Tento blog je v "read-only módu" a nový obsah již nebude přibývat. O vývoji píšu na DevBlog.

Stylovat či nestylovat formuláře?

V minulém článku o náhradě klasického submit tlačítka za obrázkové pomocí CSS jsem byl Janem Bienem upozorněn, že stylovat HTML formuláře se nemá. Je toto doporučení opodstatněné?

Jako primární důvod se většinou uvádí, že stylování formulářů je zásah do zvyklostí uživatele na daném operačním systému. Zjednodušeně řečeno prý stylování formálářů přímo snižuje použitelnost webové stránky – viz třeba Vít Dlouhý: Nestylujte formuláře!. Osobně se s tímto názorem neztotožňuji – celý koncept webové stránky je totiž zásahem do uživatelských zvyklostí na dané platformě. Uživatel nemá po ruce menu, toolbary ani stavový řádek, místo na tlačítka většinou kliká na různobarevné občas podtržené kousky textů, UI nereaguje hned, ale překresluje se celé atd. atd. Práce s webovou aplikací je prostě tak odlišná třeba od práce ve Wordu, že vážně pochybuji, že trochu upravený vzhled tlačítka či vstupního pole má na uživatelský prožitek nějaký vážnější vliv. Nehledě na to, že mnoho tlačítek ve Windows vůbec nevypadá jako obdélník s textem – viz třeba toolbary v libovolné aplikaci…

(Pozn.: Zcela paradoxní mi připadá, že „jednotné uživatelské rozhraní“ se často uvádí jedna z výhod webových aplikací. Je opravdu možné přehlédnout rozdíl mezi aplikací zvanou webový prohlížeč a skutečným obsahem webové stránky?)

V čistě teoretické rovině tedy nemůžu říct, že bych byl odpůrcem stylování formulářů. Myslím, že s citem a trochou rozumu lze sladit vzhledové požadavky s dobrou použitelností. Pak ale přichází reálný svět…

Vít Dlouhýpixy upozorňují, že některé prohlížeče (hlavně ty na MacOS, které člověk testuje nejmíň :) CSS styly ve formulářích částečně nebo zcela ignorují. Pokud je ignorují zcela, je to ještě celkem dobré (prostě se objeví standardní tlačítko), ale neštěstím je částečná podpora některých vlastností – potom totiž není jasné, co se vlastně uživateli objeví, a to je vážný problém pro použitelnost.

Resumé: teoreticky v rozumném stylování formulářů nevidím problém, ale v praxi je kvůli rozdílné implementaci prohlížeču lepší se těmto praktikám vyhnout.

Update: Halogan dodal odkaz na skvěle zpracovanou stránku Styling form controls, která ukazuje screenshoty nastylovaných prvků v různých prohlížečích na různých platformách. Rozdíly jsou opravdu značné.

Zařazeno do kategorií |
rarou? (Út, 2006-05-09 07:40):

To je pávě ten problém: rozdílné implementave CSS v prohlížečích, když dva dělají totéž, neni to totéž :(

Plaváček (Út, 2006-05-09 08:41):

Stylovat formuláře ano, stylovat formulářové prvky s velkou rozvahou.

Marek Prokop (Út, 2006-05-09 08:59):

Borku, píšete, že se formuláře nemají stylovat a že se s tímto názorem neztotožňujete. Zajímalo by mne, zda jste si nějak ověřil, že se jedná jen o názor. On totiž mezi názorem a fakty bývá dost podstaný rozdíl.

Zatímco s různými názory se neztotožňuje dost rozumných lidí, s fakty tak činí jen blázni a ti, kdo fakta neznají.

V jednotlivých konkrétních případech tlačítek formulářů jdou ovšem fakta ověřit snadno. Na běžícím a přiměřeně navštěvovaném webu je ideální A/B testování, při návrhu nového webu poslouží skoro stejně dobře, i když s o něco menší objektivní průkazností, testování uživatelské. Diskuse o názorech je pak zcela zbytečná.

Leo (Út, 2006-05-09 09:16):

„celý koncept webové stránky je totiž zásahem do uživatelských zvyklostí na dané platformě. Uživatel nemá po ruce menu, toolbary ani stavový řádek“

Na dane platforme mozna, pokud myslite OS, ale nemel by byt zasahem do uzivatelskeho rozhrani PROHLIZECE. Leo

Filosof (Út, 2006-05-09 10:08):

„celý koncept webové stránky je totiž zásahem do uživatelských zvyklostí na dané platformě“

a teď jde jen o fakt, jestli chceme uživateli jeho orientaci na webu zjednodušit, nebo raději popustíme uzdu svým designérským fantaziím.. že? :-)

Hellish (Út, 2006-05-09 10:20):

„…Práce s webovou aplikací je prostě tak odlišná třeba od práce ve Wordu…“

Tady přeci nejde o porovnávání práce s normálními aplikacemi a webovými stránkami. Jde o to, že 98% formulářů na webu mají defaultní vzhled, který uživatelé na první pohled rozpoznají a vědí, co mají dělat. Jakmile pustíte uzdu své designérské fantazii, riskujete, že uživatelé nebudou vědet co dělat (minimálně budou zmatení).

Daniel Steigerwald (Út, 2006-05-09 10:22):

Myslím, že odpověd je jasná: Stylovat! Jenže co a jak? – formuláře jako takové Mě se nejvíce osvědčilo toto řešení: http://www.qu­irksmode.org/css/for­ms.html Proč? Protože, místo tabulky pro rozložení fieldů formuláře použiji plovoucí textboxy tím, že input zfloatím – jen tak ho donutím chovat se striktně (od IE 5, pozor, zde uvedené nemá nic společného s doctype, ani (x)html), výše uvedené řešení zároveň krásně downgradeuje ;), tj, vypadá zhruba stejně i bez zapnutých stylů. – Stylovat select? Ne, nejde to dobře – Stylovat file? Částečně, to znamená, nastavit size, zjistit jak se to vykreslilo ve FF, následně doupravit css pro IE. – stylovat fieldset? částečně, fieldset border + legend jsou krajně nespolehlivé – stylovat submit? Proč ne? Stačí jako value dát &nbsp, lze dokonce nastavit i background, font size, cokoliv.. pro IE a FF a Operu společně

Takže, tak!

Daniel Steigerwald (Út, 2006-05-09 10:28):

Add. rarouš: vizuální interpretace CSS je samozřejmě až na drobné výjimky všude na pixel stejná (IE, FF, Opera), při dodržení těchto pravidel:

  1. vyhnout se problémů s box modelem, tedy nemít with a margin nebo padding nebo border společně, a jako velikost textu používat % (jediné správné řešení)
  2. nesnažit se stylovat legend, hr, br, fieldset, abbr, blockquote, + pár obskurních tagů
  3. formulářové prvky floatit, pak budeš mít i formuláře na pixel přesné.

Při splnění těchto pravidel je pak úplně jedno, zda-li máš stránku vykreslenouv quirku nebo standardu :)

rarou? (Út, 2006-05-09 10:34):

4 DS: to se pleteš :) Každej prohlížeč přistupuje k vykreslování CSS jiným způsobem a spoustu věcí řeší posvém. Nejvíce patrné je to právě u webových formůlářů – vem si jak pracují prohlížeče různě s fieldsetem+le­gendem a to je začátek, u tlačítek taky nikdy nedosáhneš stejného renderování, ale o tom nebyl tenhle spot…

Daniel Steigerwald (Út, 2006-05-09 10:44):

Ale já neříkám nic o tom, kdo a jak k čemu přistupuje :) Jen sem ti poskytl návod, ber nebo nech bejt, ale nepřisuzuj mi výroky, které sem nenapsal a které ty pak označíš za mylné :) Napsal sem „až na drobné výjimky“.

Každej zkušenej autor si časem vytvoří modus vivendy, a tak tvoří cross browser weby bez hacku (opravdu v tom neni zadnej hacek :), validni a na nejak quirk a standard z vysoka kasle, protoze jeho css je neprustrelnej :)

K napsání spotu mě vyprovokoval tvůj první příspěvek s nulovou informační hodnotou – jenom fráze.. Proto sem ti naznačil, že existuje lepší cesta – protože vím, že se snažíš stylovat proti standardu (alespoň donedávna).

Borek (Út, 2006-05-09 11:12):

2 Marek Prokop: Máte pravdu, že jsem si dovolil ten luxus a publikoval pouze svůj názor, stejně jako Vít Dlouhý nebo pixy. Bylo by určitě velmi zajímavé a přínosné, kdybyste mohl zveřejnit nějakou krátkou zprávu podpořenou reálnými daty.

2 Filosof & Hellish: Výraz „popustit uzdu své fantazii“ se nebezpečně blíží oblasti, které jsem se v článku snažil tak úzkostlivě vyhnout :)

2 Plaváček: Vyhrál jste soutěž o přeformulaci článku do jedné věty :)

Jan Brašna (Út, 2006-05-09 14:00):

Jenže ono „neštěstím je částečná podpora některých vlastností“ vychází ze specifikace, která snad i dokonce říká, že některé prvky nemusí koncové zařízení aplikovat.

No, „hlavně ty na MacOS, které člověk testuje nejmíň“, asi jak kdo :) Kdybys mel tu platformu jako primární, asi by sis na to dal pozor, protože pak bys viděl jakou to má výhodu. Ale stejně tak si to můžes srovnat, protože noční sestavení mají formulářové prvky negenerují přes systémové API, ale renderují ho vnitřní mašinou prohlížeče.

Ad resumé (nikoliv ke stylování formulářů, ale ke stylování formulářových ovládacích prvků): Pokud má lehké podbarvení elementu nebo gradient na tlačítku pomoci lepšímu zapojení prvků do webu/aplikace, proč ne, dobré příklady jako WordPress, Blogger, BaseCamp a podobné jsou určitě zajímavé.

Více také v komentáři minulého článku: http://borber­.com/blog/?…

halogan (Út, 2006-05-09 15:07):
Borek (Út, 2006-05-09 15:17):

Díky za dobrý odkaz, aktualizoval jsem článek.

Plaváček (Út, 2006-05-09 16:05):

V knize o CSS, která brzy vyjde, je velmi pěkný obrázek, jak vypadají formulářové prvky napříč prohlížeči a operačními systémy. Bohužel zveřejnit to nemohu (autorská smlouva je zákon boží :), takže mi musíte věřit, že méně je někdy mnohem, mnohem více. Cenu přijímám :)

Jan Brašna (Út, 2006-05-09 16:51):

Aha, předpokládal jsem, že uvedený článek znáš (je to dost typická věc k tomuto tématu) a s tím v povědomí jsi přes to chtěl najít nějaký nový důvod nebo „něco“ ke znovuzvážení. Pokud jsi před tím neviděl ony zmíněné výsledky, tak pak rozumím, že jsi to neodpískal rovnou :)

Borek (Út, 2006-05-09 17:09):

2 Jan Brašna: Onen článek jsem neznal, nicméně velmi rychle jsem narazil na krutou realitu i bez něj :)

rarouš (St, 2006-05-10 09:08):

a co použít nějaké JS řešení? Sice je nemám moc rád, ale na náhradu Buttonu ImageButtonem by to mohlo stačit.

Franta (Čt, 2007-01-11 22:32):

Stylovat!

Z estetického hlediska rozhodně stylovat – někdy se najdou i krásné stránky, které ale hyzdí „defaultní“ textové pole nebo tlačítko. To je škoda.

Ale platí tu jedna podmínka: mělo by to být použitelné ve všech prohlížečích (resp. nemělo by to snížit dosavadní použitelnost stránek). Že to v některých menšinových prohlížečích nebude zrovna nejkrásnější už nevadí.

Anonymous (Čt, 2007-01-25 14:14):

S Borkem v tomto ohledu musím souhlasit. Má pravdu. Stylovaný formulář může do designu zapadnout daleko lépe (a podle potřeby v něm náležitě vyniknout) než by to dokázal formulář tradiční. Pokud dodržíte jednoduché pravidlo, že to prostě na první pohled musí vypadat jako formulář, tak si s tím můžete dělat co chcete a stylovat do aleluja… pochybuji ze z toho bude uživatel nějak zvlášť zmaten. Spíše by mne nepřekvapilo kdyby se neušklíbl nad nestylovanými formulážovými poli, které v daném designu jako celku vypadají jako pěst na oko.

Web je zkrátka něco jiného než běžná aplikace. Jeho GUI nebývá nijak složité, takže není až tak důležité držet se zažitých konvencí. Web je často jen pestrobarevný interaktivní leták – vše je podřízeno „celkovému dojmu“.

Komentáře jsou uzavřeny (blog je v read-only módu). Pokud mě chcete kontaktovat, můžete mailem.