Relativizováním správné polohy tlačítka s výchozí akcí jsem se chtěl dostat k tomu, že je nejspíš jedno, jestli bude vlevo, vpravo, zarovnané k levému okraji nebo kdekoli jinde. Nikdo z nás tu nemáme výjimečný vhled do problematiky a argumentace autoritami je nás nehodná. ;-) Napadá mě, že jsme ještě nezmínili běžné pořadí voleb v terminálových UI: „Bablabla Y/n.“

Důležité pro mě je, aby v rámci konkrétního webu byla poloha tlačítka s výchozí akcí konzistentní, a ideálně aby výchozí akce byla i jinak zvýrazněná proti dalším akcím (velikostí, tvarem, barvou, zvýrazněním, orámováním, focusem … jakkoli).

V případě uvedených ukázek mě víc trápí jiné chyby. Předně ten chybný kontext:

Volba „vyprázdnit košík“ by měla být tam, kde má uživatel dostatečný přehled o obsahu košíku, abychom zabránili chybě z nepozornosti. Chyby z nepozornosti, při kterých dojde k nevratné ztrátě dat, jsou zvláště nepříjemné. Zároveň to vypadá, že odkaz „vyprázdnit košík“ je nebezpečně blízko jiné aktivní volbě, čímž se pravděpodobnost ukliknutí zvyšuje. Doporučoval bych k akci připojit potvrzovací dialog à la Windows 3.11: „Opravdu chcete vypráznit košík? Rozhodnutí nelze vrátit zpět. [Ano, vyprázdnit] [Ne]“. A jako u OSX v obdobných případech bych v tomto dialogu nedával ano ani ne jako výchozí.

Chybný kontext u webu Ticketpro nebude mít tak vážné následky jako je ztráta dat o zboží vloženém do košíku, ale i tak se domnívám, že uvnitř rámečku nemají tlačítka „zobrazit košík“, „zpět“ a „nové hledání“ co pohledávat. Volby „zpět“ a „nové hledání“ nesouvisejí s objednáváním, ale s výběrem vstupenek, měly by proto být jinde (nad/pod rámečkem) a jinak graficky vyvedené (nebo v dodatečné vzdálenosti od ráměčku). Tlačítko „zobrazit košík“ sice s objednáváním souvisí, ale přidává při umístění do objednávkového rámečku nejistotu o fungování formuláře. Znamená to, že jen zobrazí košík, nebo přidá zboží do košíku a zároveň jej zobrazí, zatímco volba „přidat do košíku“ obsah košíku nezobrazí? Mentální modely uživatelů by v tomhle případě mohly být rozdílné od mentálního modelu designéra UI. Problém se jednoduše dá vyřešit tím, že volbu „zobrazit košík“ vytěsníme do pravého horního rohu stránky a v rámečku tak zůstane jen jediné tlačítko. Elegantně tak vyřešíme i pochybnost o správném umístění tlačítka s výchozí volbou. ;-)

Já bohužel TicketPro nepoužívám a neznám, takže nevím přesně, kam to tlačítko Zpět vede a co byl předchozí krok a jestli má vůbec smysl. On mi totiž obecně ten formulář (bez skutečné znalosti aplikace, jak jsem již řekl) připadá poněkud zvláštní. Logicky bych předpokládál, že aplikace funguje v cca 4 krocích. Vyhledám lístky > zobrazí se mi výsledek (náš přehled na obrázku v článku), kde zadám, kolik jich chci > přejdu do košíku > objednám/zaplatím.

Pokud se tedy naše zmíněné tlačítko nachází v kroku 2, jak předpokládám, tak teoreticky tlačítko Zpět a Nové hledání vede zpět na stejnou stránku (krok 1), stejně tak jako tlačítka Přidat do košíku a Zobrazit košík vedou vpřed na stejnou stránku (krok 3), i když jejich „přidaná hodnota“ se samozřejmě liší – jedno zároveň vloží zboží do košíku, druhé ne. Proč bych si ale zobrazoval košík, aniž bych do něj něco vložil, to nevím.

Znovu předesílám, že aplikaci TicketPro neznám, takže jen hádám. Ale celý ten formulář mi přijde divný a proto dohadovat se, jestli v něm má být jedno tlačítko napravo nebo nalevo je podle mě zcestné :) Já osobně bych to řešil výrazným oddělením tlačítek do dvou skupin – samotné výraznější/větší tlačítko Přidat do košíku na jedné straně, ostatní tři tlačítka na druhé straně formuláře (jde v podstatě jen o odkazy na jiné stránky, i když se tváří jako tlačítka a tím (zbytečně) navozují dojem nějaké akce). Jestli bude ta která skupina vpravo nebo vlevo už podle mě není takový problém.

On podle mě větší problém většinou bývá v pojmenování tlačítek než v jejich poloze. Viz, příklad z toho phpMyAdminu nebo klasika „Chcete stornovat fakturu? [OK][Storno]„. Na toto osobně narážím mnohem častěji než na to, že bych si trhal vlasy, jak se mi aplikace blbě používá, protože má [OK] vpravo nebo vlevo.

Jak už zde bylo několikrát ečeno – stejně dobrá zdůvodnění se najdou pro obě varianty. A promiňte, že si tak trochu hraji na ďáblova advokáta – to mě jen tak rozohnila ta Janova poznámka v článku o tom, že výchozí tlačítko vlevo je rouhání :)

A aby v tom nebylo málo zmatků, tak se dá za platformu považovat celý web, a udělat průzkum jak to dělají aplikace, které naše cílová skupina často používá – a řídit se tím.

Jinými slovy, i pro rozložení ala Mac OS si určitě najdeš alibi :)).

K webu pak dodává:
If you’re designing a Web-based application, the decision is harder, but you should probably go with the platform preferred by most of your users. Your server logs will show you the percentage of Windows vs. Mac users for your specific website or intranet. Of course, Windows generally has many more users, so if you can’t be bothered to check the logs, then the guideline that will apply to most situations is OK first, Cancel last.

@Luděk Roleček: Jasně, to ovlivnění OS Xkem u mě rozhodně bude. Ale musím říct, že víc věřím tomu, že to má správně (pokud tu něco takového je) Apple než Microsoft ;-)

Uznávám, že směr čtení nebude pro webové formuláře až tak určující. Jak člověk očima proscanuje webovou stránku s formulářem se pravděpodobně od běžného čtení dost liší – žádné průzkumy na toto téma jsem neviděl a ani nevím jestli existují. Přiznám, že jsem žádné doposud ani nehledal.

I tvá poznámka o pravácích má něco do sebe – pokud se na to soustředím a přemýšlím o tom, když to zkouším na různých typech formulářů, tak cítím, že (také jako pravák) mírně preferuji formuláře s tlačítky zarovnanými doprava. V takovém případě má význam dát výchozí akci doprava, kde je tudíž ve vztahu k formuláři stále na stejném místě.

Když jsem psal předchozí příspěvěk, měl jsem stále na mysli formuláře s tlačítky zarovnanými doleva – já totiž většinu webových formulářů dělám právě tak. V takovém případě má podle mě naopak smysl dávat výchozí tlačítko doleva. Jak Tomáš Hellebrand správně poznamenal, Windows jsou v tomto trochu schizofrenní, když tlačítka ve většině dialogových oken zarovnávají doprava, ale výchozí akce je vlevo.

U tlačítek, která jsou zarovnaná na střed formuláře jako na obrázku z TicketPro, si nejsem jistý. Nedovedu přijít na jediný rozumné zdůvodnění, které bych byl schopen vyjádřit slovy, ale v takové případě já osobně opět hledám výchozí akci vlevo (a připadá mi na tom místě přirozenější).

Hádám, že jsme každý tak trochu ovliněn UI, se kterým každoděně pracujeme ze všeho nejvíce, tj. s operačním systémem. Ať už je návrh toho kterého dobrý nebo špatný, člověk si na něj prostě za čas zvykne a začne mu to připadat přirozené.

Ad vlevo/vpravo: Výchozí tlačítko vlevo není problém, pokud jsou tlačítka zarovnaná k levému okraji. Windows jsou zvrhlé proto, že ta tlačítka zarovnávají k pravému okraji a tak je to výchozí tlačítko pokaždé někde jinde.

A teď proč mi to přijde „zvrhlé”. Nemyslím si, že se směr čtení vztahuje na tuhle situaci. První, co mě napadá, je, že si představím to dialogové okno jako by viselo přede mnou fyzicky ve vzduchu a pak, jelikož jsem pravák, mám prostě k pravé straně přirozenější pohyb. Víc doleva je to jakoby „křížem”. Kurzor myši je prodloužením naší ruky, mám za to, že tohle v mém pocitu hraje svou roli.

Ale budu si o tom muset něco přečíst, jenom s tímhle pocitem spokojen nejsem. Takže díky všem za inspirativní komentáře.

Přijde mi ale zajímavé, že se ti zdá způsob s výchozí akcí vlevo až tak zvrhlý. Přiznám se, že to moc nechápu, protože když se nad tím zamyslíš, tak to určitě má logiku:

1) Čteme zleva doprava, odshora dolů. Dokončím tedy vyplňování formuláře, očima přeskočím na začátek dalšího řádku a tam mám tlačítko provádějící výchozí (a nejdůležitější) funkci formuláře. Proč bych si měl (např. u TicketPro) nejprve přečíst, že z formuláře, jehož hlavní funkcí je přidat zboží do košíku, si mohu i zobrazi košík, přejít zpět nebo spustit nové hledání, než se dostanu k tomu, co chci udělat v 99% případů, tj. přidat zboží do košíku?

2) Z pohledu použitelnosti: výchozí tlačítko umístěné vlevo je vždy na stejném místě nezávisle na tom, kolik dalších tlačítek u formuláře mám. To ti při pravostraném způsobu jako expertovi na použitelnost nevadí, že to nejdůležitější tlačítko je pokaždé jinde?

Se zbytkem výhrad samozřejmě souhlasím – výchozí akce by měla být zvýrazněna i jinak, než jen svou polohou. Ta pravá a levá strana je ale opravdu ošidná a myslím, že bys byl překvapen, jak velké množství lidí s tebou v tomto nebude souhlasit

Jinak samozřejmě souhlasím s ostazními doporučeními. Jen bych možná problémy rozdělil do dvou skupin:

  #1 chybný kontext a
  #2 spojení více nesouvisejících úkonů do jednoho dialogu.

V prvním případě pomůže posunutí, zmenšení, přebarvení atd. (OK Computers, Ticketpro). V případě druhém pomůže jen rozdělení (phpMyAdmin, Ticketpro). Ticketpro mate tím, že v jednom dialogu se objevily dvě chyby.

A u košíku bych dal odkaz na vyprázdnění jen a pouze na stránku košíku, nechat ho svítit na uživatele na každé stránce, to je jako kdyby se mnou po prodejně chodil prodavač a po každém prohlédnutém zboží se mě zeptal jestli už konečně chci odejít :).

Problematika košíku je vůbec na delší povídání – jen málokterý eshop se snaží košík zachovat co nejdéle, když už jsem ho jednou naplnil (pochopili to třeba v Alze – můžu si tam ze zájmu naklikat věci do košíku, a když si nevymažu cookies, budou tam klidně ještě za měsíc a vzpomenu si na ně při dalším nákupu – a možná si je koupím).

Teď chystáme spuštění jedné veřejné aplikace, kde jsme ale také sami uživatelé, takže je to zase o něco lehčí, ale už se těším, až nám beta-testeři a první uživatelé vysvětlí, co jsme všechno udělali špatně :)

Teď jedna rýpavá otázka, ty sám testuješ UI? :)