Nebojte se o pořadí tlačítek v webovou aplikaci, udělejte to

(4. června 2019)

Takže navrhujete webovou aplikaci. Jaká by měla být vaše objednávka knoflíků? Zde je několik pokynů pro rozhodování o tom, jaké by mělo být pořadí vašich tlačítek. A kromě těchto případů to nevadí, pokud budete postupovat podle následujících pokynů.

Začneme tím, že jsme všichni na stejné stránce, klasifikujme tlačítka jako primární a sekundární. Ve většině kontextů jsou primární akce pozitivní akce, jako je Uložit nebo Odeslat, a sekundární akce jsou negativní akce, jako je Storno nebo Odstranit.

Postupujte podle pokynů pro platformu

Pokud vytváříte plochu nebo u mobilní aplikace je odpověď na pořadí tlačítek jednoduchá – postupujte podle pokynů pro platformu.

U PC to znamená primární akci následovanou sekundární akcí.

U počítačů Mac to znamená sekundární akci následovanou primární akcí.

V systému Android to znamená sekundární akci a následně primární akci.

To bylo snadné. Ale s jakým pořadí tlačítek pro webovou aplikaci jdeš?

Tlačítko pořadí pro webové aplikace

Pokud navrhujete webovou aplikaci, která poskytuje službu pro uživatele jedné platformy , není to žádný nápad – pokračujte znovu podle konvence této platformy.

Pokud ne, pak se situace trochu komplikuje. Uživatelé používají stolní počítače a tablety a mobilní telefony. Můžete mít uživatele PC, kteří používají iPhony nebo Androidy, a můžete mít uživatele Mac, kteří … no, iPhony pravděpodobně používají více než Androidy. Ano, tržní podíl iOS, Android a OSX na Windows je nyní kolem 60–40, ale to neznamená, že optimalizujete pro 60% uživatelů a ne pro zbývajících 40%. Proč neoptimalizovat pro 100% vašich uživatelů?

Pořadí tlačítek nezáleží na tom, jestli to uděláte – tlačítka v kontrastu s tvarem a velikostí

Můžete optimalizovat pro 100% vaši uživatelé tím, že se vůbec nezaměřují na pořadí tlačítek. Můžete pokračovat a vybrat si libovolnou objednávku. Místo toho se zaměřte na vizuální kontrast nejen prostřednictvím dimenze barvy, ale také tvaru a velikosti.

Když máte primární akci jako normální tlačítko a sekundární akci jako jen text (podtržení je volitelné, ale podle mých zkušeností s prodejem tohoto stylu majitelům produktů se cítím lépe) se vám podaří efektivně vytvořit dostatečný kontrast, aby si uživatelé snadno všimli rozdílu mezi primárním a sekundárním tlačítkem.

Ne Nenechte se zmást na rozdíl od běžných tlačítek, která mají stejný tvar a velikost a liší se pouze barvou. Níže uvádíme příklady obou objednávek, které jsou stejně účinné, když umožňují uživatelům rozlišovat mezi primárními a sekundárními akcemi.

Jak převést běžná tlačítka na tlačítka v kontrastu s tvarem a velikostí

Pokud máte návrhový systém, aktualizujte primární a sekundární aplikační tlačítka z běžných tlačítek (za předpokladu, že jsou umístěny vedle sebe a nejsou od sebe odděleny), aby tvar a velikost kontrastních tlačítek nebylo vůbec těžké. Měl by to být také snadný prodej vašemu vlastníkovi produktu nebo radě systému podnikového designu, protože je lze aktualizovat, aniž byste se museli starat o umístění. Totéž platí pro aktualizaci jeho CSS, pokud vytváříte web. Můžete prakticky nahradit tlačítka ve vašem systému od běžných tlačítek po tlačítka v kontrastu s tvarem a velikostí, aniž byste se museli o nic starat.

  1. Řekněme, že některý z těchto párů jsou vaše původní tlačítka.

2. Změňte barvu textu pro sekundární tlačítko.

3. Přesuňte je vedle sebe, aby se navzájem dotýkaly.

3. Odebrat tvar pozadí pro sekundární tlačítko

4. Volitelně, i když se doporučuje; podtrhněte text sekundárního tlačítka.

Děkujeme za přečtení.

Neváhejte nás kontaktovat nebo zůstaňte ve spojení LinkedIn a Twitter .

Přečtěte si více o UX, stáhněte si zdroje UX a získejte úžasné nabídky, které můžete použít ve své každodenní práci na UX, na Kuželové stromy – průzkum uživatelů & Design a UX Quotes .

A f tento článek vám pomůže, tleskejte! 👏

Obrázkové kredity

Původně publikováno v https://www.conetrees.com 4. června 2019.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *