V našem softwaru máme následující dialog (viz Screenshot), který bych chtěl vylepšit.
1) Uživatel by měl vybrat profil (snímek obrazovky: rozbalovací nabídka vlevo), který se použije pro následující akci.
2) Pro každý profil existují některá nastavení (snímek obrazovky: radiobuttons and checkboxes on the right + reset button), které se změní, pokud je vybrán jiný profil.
Jak to mohu vizuálně prezentovat, aby uživatel snadno pochopil vztah mezi dropdownboxem a přidruženým nastavením?
Znáte prominentní příklad dialogu? A co říkáš tomuto druhu vzoru?
Luke Wroblewski to nazývá „vstupem závislým na výběru“ (kde ovládací prvky vstupu závisí na výběru jiného ovládacího prvku). Říkám tomu „hodnoty závislých oblastí“ (kde to, co se zobrazí v oblasti stránky, závisí na hodnotě v jiném ovládacím prvku).
Obvyklým designem, který vypadá, že dobře funguje, je graficky uzavřít region s určující kontrolou (ve vašem případě rozevírací profil) v horním nebo levém okraji, aby bylo možné navrhnout hierarchický vztah. Například:
Krátký štítek také pomáhá navázat vztahy (např. „Povolené pozorovací aktivity“ výše nebo „ Název profilu Nastavení“ ve vašem případě).
Luke Wroblewski má obecné rady a spoustu příkladů na XMatters - Selection-Dependent Inputs .