Ovládací prvky progresivního zpřístupnění

Poznámka

Tento průvodce návrhem byl vytvořen pro Windows 7 a nebyl aktualizován pro novější verze Windows. Většina pokynů se stále používá v zásadě, ale prezentace a příklady neodráží naše aktuální pokyny k návrhu.

Díky progresivnímu řízení zpřístupnění můžou uživatelé zobrazit nebo skrýt další informace, včetně dat, možností nebo příkazů. Progresivní zveřejnění podporuje jednoduchost tím, že se zaměří na základní, ale podle potřeby odhalí další podrobnosti.

Příklady kontrol progresivního zpřístupnění

Poznámka

Pokyny týkající se rozložení, nabídeka panelů nástrojů jsou uvedeny v samostatných článcích.

Je to správná kontrola?

Při rozhodování zvažte tyto otázky:

• Potřebují uživatelé zobrazit informace v některých, ale ne ve všech scénářích, nebo v některých případech, ale ne vždy? Pokud ano, zobrazení informací pomocí progresivního zpřístupnění zjednodušuje základní prostředí, ale umožňuje uživatelům snadno získat přístup k informacím.

  zobrazení stavu aplikace Zabezpečení systému Windows

  V tomto příkladu aplikace Zabezpečení systému Windows zobrazuje důležitý stav zabezpečení po celou dobu, ale k zobrazení podrobností na vyžádání používá progresivní zpřístupnění.

• Pokud se informace zobrazují ve výchozím nastavení, budou si uživatelé někdy chtít informace skrýt? Existují scénáře, ve kterých budou uživatelé potřebovat více místa? Jsou uživatelé dostatečně motivovaní k přizpůsobení uživatelského rozhraní ?? Pokud ne, zobrazte informace bez použití progresivního zpřístupnění.

  nesprávná odpověď:

  

  V tomto příkladu nebudou uživatelé motivováni ke skrytí informací.

• Jsou další informace pokročilé, podstatné, složité nebo související s nezávislým dílčím úkolem? Pokud ano, zvažte zobrazení informací v samostatném okně pomocí příkazových tlačítek nebo propojení namísto použití progresivního řízení zpřístupnění. (Další informace jsou upřesňující, pokud jsou určeny pro pokročilé uživatele. Je složité, pokud jsou další informace obtížně čitelné nebo rozložitelné.)

  

  V tomto příkladu jsou informace o názvu a vydavateli softwaru smysluplné především pro pokročilé uživatele, takže se použijí odkazy na samostatná okna.

• Jsou další informace fragmentem věty nebo věty, které popisují, co položka dělá nebo jak se dá použít? Pokud ano, zvažte použití popisu nebo informačního popisu.

• Souvisí další informace týkající se aktuálního úkolu, ale nezávislé na aktuálně zobrazených informacích? Pokud ano, zvažte místo toho použití karet . Sbalitelné seznamy jsou ale často vhodnější než karty, protože jsou flexibilnější a škálovatelné.

• Zobrazuje nebo skryje další informace v podstatě filtr dat? Pokud ano, zvažte použití rozevíracího seznamu nebo zaškrtávacích políček použít filtr na celý seznam.

Koncepty návrhu

Cílem postupného zveřejnění je:

• zjednodušení uživatelského rozhraní tím, že se zaměříte na základní, ale podle potřeby zobrazíte další podrobnosti.
• zjednodušení vzhledu uživatelského rozhraní snížením vnímání nepotřebné.

Oba cíle lze dosáhnout pomocí ovládacích prvků progresivního zpřístupnění, kde uživatelé kliknou na další podrobnosti. Můžete však dosáhnout druhého cíle zjednodušení vzhledu bez použití explicitních kontrol postupného zpřístupnění:

• Zobrazuje kontextové podrobnosti pouze v kontextu. Můžete například zobrazit kontextové příkazy nebo panely nástrojů automaticky, pokud jsou relevantní pro vybraný objekt nebo režim.

• Snížení váhy cenových možností pro sekundární uživatelské rozhraní.Affordances jsou vizuální vlastnosti, které navrhují způsob použití objektů. Trend spočívá v tom, že uživatelské rozhraní, se kterým můžou uživatelé pracovat, ale aby toto uživatelské rozhraní bylo nakreslené křičet "click me!" vede k příliš mnoho vizuálních nepotřebných prvků. V případě sekundárního uživatelského rozhraní je často lepší používat jemné cenové možnosti a dát plný efekt na myši.

  

  V tomto příkladu je pole Hodnocení interaktivní, ale nezobrazuje se tak, dokud najet myší.

• Zobrazení následných kroků až po dokončení požadavků Tento přístup se nejlépe používá se známými úlohami, kde uživatelé můžou s jistotou provést první kroky.

  

  V tomto příkladu se na stránce s uživatelským jménem a heslem zpočátku zobrazuje jenom uživatelské jméno a volitelná pole hesla. Po zadání hesla se zobrazí potvrzovací pole a pole nápovědy.

I když progresivní zveřejnění představuje skvělý způsob, jak zjednodušit uživatelskou inteligenci, má tato rizika:

• Nedostatek zjistitelnosti. Uživatelé můžou předpokládat, že pokud něco nevidí, neexistuje. Uživatelé nemusí najet myší nebo kliknout, pokud nevidí, co hledají. Vždy existuje šance, že uživatelé nemusí kliknout na věci, jako je Další možnosti.
• Nedostatek stability. Progresivní zpřístupnění by mělo být očekáváno nebo alespoň cítit přirozeně. Pokud se ovládací prvky neočekávaně objeví a zmizí, výsledné uživatelské rozhraní se může cítit nestabilní.

Kontroly progresivního zpřístupnění

Ovládací prvky progresivního zpřístupnění se obvykle zobrazují bez přímých popisků, které popisují jejich chování, takže uživatelé musí být schopni provádět následující akce na základě samotného vizuálního vzhledu ovládacího prvku:

• Uvědomte si, že ovládací prvek poskytuje progresivní zveřejnění.
• Určete, jestli je aktuální stav rozbalený nebo sbalený.
• Určete, jestli jsou k provedení úkolu potřeba další informace, možnosti nebo příkazy.
• V případě potřeby určete, jak obnovit původní stav.

I když uživatelé můžou zjistit výše uvedené pokusy a chyby, měli byste se pokusit takové experimentování nepotřebně provést.

Kontroly progresivního zpřístupnění mají poměrně slabou cenovou, což znamená, že jejich vizuální vlastnosti naznačují, jak se používají, i když slabě. Následující tabulka porovnává vzhled běžných ovládacích prvků progresivního zpřístupnění:

Řízení	Účel	Vzhled	Glyf označuje
chevrons	Zobrazit vše: Zobrazit nebo skrýt zbývající položky v úplně nebo částečně skrytém obsahu. Položky se zobrazují buď na místě (pomocí jedné dvojité šipky), nebo v místní nabídce (s dvojitou dvojitou dvojitou dvojitou šipkou).	Dvojitá šipka ukazuje ve směru, kde se akce provede.	Budoucí stav
šipky	Zobrazit možnosti: Zobrazit místní nabídku příkazů.	Šipky ukazují ve směru, kde se akce provede.	Budoucí stav
ovládací prvky plus a minus	Rozbalit kontejnery: Rozbalit nebo sbalit obsah kontejneru při procházení hierarchie.	Symboly plus a minus neukazují, ale akce se vždy vyskytuje vpravo.	Budoucí stav
otočení trojúhelníků	Zobrazit podrobnosti: Zobrazit nebo skrýt další informace pro jednotlivé položky. Slouží také k rozšíření kontejnerů.	Rotující trojúhelníky se trochu podobají otočným pákám, takže ukazují ve směru, ve kterém došlo k akci.	Aktuální stav

Pokud děláš jen jednu věc...

Uživatelé by měli být schopni správně předpovědět chování kontroly postupného zpřístupnění kontrolou. Abyste toho dosáhli, vyberte vhodné vzory použití a konzistentně použijte jejich vzhled, umístění a chování.

Vzory použití

Ovládací prvky progresivního zpřístupnění mají několik vzorů použití. Některé z nich jsou integrované do běžných ovládacích prvků.

Dvojité šipky

Dvojité šipky zobrazují nebo skryjí zbývající položky v úplně nebo částečně skrytém obsahu. Obvykle se položky zobrazují na místě, ale dají se zobrazit také v místní nabídce. Když je položka na místě, zůstane rozbalená, dokud ji uživatel sbalí.

Dvojité šipky se používají následujícími způsoby:

Zvyk	Příklad
místní uživatelské rozhraní přidružený objekt přijímá vstupní fokus a jedna dvojitá šipka je aktivována mezerníkem.	V těchto příkladech jsou místní jednoduché dvojité šipky umístěny vpravo od jejich přidruženého ovládacího prvku.
Příkazová tlačítka s externími popisky příkazové tlačítko obdrží vstupní fokus a dvojitá šipka se aktivuje pomocí mezerníku.	V tomto příkladu je jedno tlačítko dvojité šipky označené a umístěné vlevo od popisku. S tímto vzorem by bylo obtížné pochopit tlačítko bez jeho popisku.
příkazová tlačítka s interními popisky příkazové tlačítko přijme vstupní fokus a aktivuje se mezerníkem.	V těchtopříkladch

Šípy

Šipky zobrazují místní nabídku příkazů. Položka zůstane rozbalená, dokud uživatel nestiská výběr nebo klikne kamkoli.

Pokud je tlačítko se šipkou nezávislý ovládací prvek, obdrží vstupní fokus a aktivuje se mezerníkem. Pokud má tlačítko se šipkou nadřazený ovládací prvek, dostane nadřazený fokus a šipka se aktivuje pomocí kláves Alt+šipka dolů a Alt+šipka nahoru, stejně jako u ovládacího prvku rozevíracího seznamu.

Šipky se používají následujícími způsoby:

Zvyk	Příklad
Samostatná tlačítka šipka je v samostatném ovládacím prvku tlačítka.	V těchto příkladech samostatná tlačítka se šipkami umístěná vpravo označují příkazovou nabídku.
příkazových tlačítek šipka je součástí příkazového tlačítka.	V těchto příkladech mají tlačítka nabídek a rozdělená tlačítka šipky umístěné vpravo od textu.

Ovládací prvky plus a minus

Ovládací prvky plus a minus rozbalí nebo sbalí, aby se při procházení hierarchie zobrazoval obsah kontejneru. Položka zůstane rozbalená, dokud ji uživatel sbalí. I když vypadají jako tlačítka, jejich chování je na místě.

Přidružený objekt obdrží vstupní fokus. Plus se aktivuje pomocí klávesy se šipkou doprava a mínus pomocí šipky vlevo.

Ovládací prvky plus a minus se používají následujícími způsoby:

Zvyk	Příklad
sbalitelné stromy víceúrovňová hierarchie pro zobrazení obsahu kontejneru.	V tomto příkladu jsou ovládací prvky plus a minus umístěny vlevo od přidruženého kontejneru.
sbalitelné seznamy Dvouúrovňová hierarchie pro zobrazení obsahu kontejneru.	V tomto příkladu jsou ovládací prvky plus a minus umístěny vlevo od přidružené záhlaví seznamu.

Rotující trojúhelníky

Otočení trojúhelníků zobrazuje nebo skryje další informace na místě pro jednotlivé položky. Slouží také k rozšíření kontejnerů. Položka zůstane rozbalená, dokud ji uživatel sbalí.

Přidružený objekt obdrží vstupní fokus. Sbalený (pravý) trojúhelník se aktivuje pomocí šipky vpravo a rozbalený (dolů směřující) trojúhelník se šipkou doleva.

Rotující trojúhelníky se používají následujícími způsoby:

Zvyk	Příklad
sbalitelné stromy víceúrovňová hierarchie pro zobrazení obsahu kontejneru.	V tomto příkladu jsou rotující trojúhelníky umístěny vlevo od přidruženého kontejneru.
sbalitelné seznamy dvouúrovňová hierarchie, která bude zobrazovat další informace.	V tomto příkladu jsou rotující trojúhelníky umístěny vlevo od přidružených položek seznamu.

Náhled šipek

Podobně jako dvojité šipky se na místě zobrazí nebo skryje další informace. Položka zůstane rozbalená, dokud ji uživatel sbalí. Na rozdíl od dvojitých šipek mají glyfy grafické znázornění akce, obvykle se šipkou označující, co se stane.

V těchto příkladech z programu Microsoft Windows Media Player mají glyfy šipky, které navrhují akci, která se stane.

Šipky náhledu jsou nejvhodnější pro situace, kdy standardní dvojitá šipka adekvátně nesděluje chování ovládacího prvku, například když je zveřejnění složité nebo existuje více než jeden typ zveřejnění.

Pokyny

Obecné

• Vyberte model progresivního zpřístupnění na základě jejího použití. Popis jednotlivých vzorů použití najdete v předchozí tabulce.

• Nepoužívejte odkazy pro progresivní kontroly zpřístupnění. Používejte pouze ovládací prvky progresivního zpřístupnění uvedené v části Vzory použití. Pomocí odkazů však přejděte na témata nápovědy.

  správně:

  

  nesprávná odpověď:

  

  V nesprávném příkladu se odkaz používá k zobrazení dalších možností na místě. Toto použití by bylo správné, pokud odkaz přešl na jinou stránku nebo dialogové okno nebo zobrazil téma nápovědy.

Interakce

• U dvojitých šipek, které nejsou přímo označené, použijte popisy k popisu, co dělají.

  

  V tomto příkladu popisek označuje účinek neoznačeného ovládacího prvku dvojité šipky.

• Pokud uživatel položku rozbalí nebo sbalí, zachovají se stav tak, aby se projevil při příštím zobrazení okna, pokud uživatelé pravděpodobně nebudou chtít začít ve výchozím stavu. Nastavení stavu zachované na základě jednotlivých oken pro jednotlivé uživatele

• Ujistěte se, že veškerý rozbalený obsah může být sbalený a naopak, a že je zřejmé, že inverzní operace. Tím se podporuje průzkum a snižuje frustraci. Nejlepší způsob, jak zviditelnit inverzní operaci, je zachovat ovládací prvek ve stejném pevném umístění. Pokud potřebujete ovládací prvek přesunout, ponechte ho ve stejném relativním umístění v rámci vizuálně odlišné oblasti.

  nesprávná odpověď:

  

  

  V tomto příkladu se po kliknutí na tlačítko Nahradit dvojitou šipkou zobrazí textové pole Nahradit. Po dokončení se z rozbalovacího programu Nahradit stane příkaz Nahradit, takže neexistuje způsob, jak obnovit původní stav.

• Použijte pouze přístupové klíče vhodné pro vzor progresivního zpřístupnění, jak je uvedeno v části Vzory použití. Nepoužívejte Enter k aktivaci progresivního zpřístupnění.

Prezentace

• Nepoužívejte trojúhelníkové šipky pro jiný účel než progresivní zveřejnění.

  nesprávná odpověď:

  

  I když tento příklad není vzorem progresivního zpřístupnění, použití šipky zde naznačuje, že příkazy se zobrazí v automaticky otevíraných oknech.

  správně:

  

  V tomto příkladu se místo toho správně používá odrážka.

• Odeberte (nezakazujte) ovládací prvky progresivního zpřístupnění, které se v aktuálním kontextu nepoužívají. Kontroly progresivního zpřístupnění by měly vždy poskytovat jejich slib, takže je odstraňte, pokud není k dispozici více informací, které by bylo možné poskytnout.

  nesprávná odpověď:

  

  V tomto příkladu je kontrolní prvek progresivního zpřístupnění, který se nepoužije, nesprávně zakázaný.

Dvojité šipky

• Pomocí jednoduchých dvojitých šek zobrazíte nebo skryjete místo. Dvojitá šipka slouží k zobrazení nebo skrytí pomocí místní nabídky. Pro příkazová tlačítka s interními popisky byste ale měli používat dvojité dvojité šipky.

  správně:

  

  nesprávná odpověď:

  

  V nesprávném příkladu se dvojitá dvojitá dvojitá šipka používá k postupnému zveřejnění.

  správně:

  

  V tomto příkladu se dvojitá dvojitá dvojitá šipka používá k postupnému zpřístupnění, protože se jedná o příkazové tlačítko s interním popiskem.

• Zadejte vizuální vztah mezi dvojitou šipkou a přidruženým ovládacím prvku. Vzhledem k tomu, že místní dvojité šipky jsou umístěny napravo od přidruženého uživatelského rozhraní a jsou zarovnané doprava, může být mezi dvojitou šipkou a jeho přidruženým ovládacím prvek poměrně daleko.

  správně:

  

  V tomto příkladu existuje jasný vztah mezi místní dvojitou šipkou a přidruženým uživatelským rozhraním.

  nesprávná odpověď:

  

  V tomto příkladu neexistuje žádný jasný vizuální vztah mezi místní dvojitou šipkou a přidruženým uživatelským rozhraním, takže se zdá, že je plovoucí v prostoru.

Šípy

• Nepoužívejte šipkovou grafiku, která by mohla být zaměňována se šipkami Zpět, Vpřed, Přejít nebo Přehrát. Používejte jednoduché trojúhelníkové šipky (šipky bez kmenů) na neutrálních pozadích.

  správně:

  

  Tyto šipky jsou jasně progresivní kontroly zpřístupnění.

  Nesprávné (pro progresivní zveřejnění):

  

  Tyto šipky nevypadají jako progresivní kontroly zpřístupnění.

  nesprávná (pro back, forward):

  

  Tyto šipky vypadají jako progresivní kontroly zpřístupnění, ale nejsou.

Doporučená velikost a mezery

Doporučené nastavení velikosti a mezery pro progresivní kontroly zpřístupnění

Popisky

• U dvojitých šeků na příkazovém tlačítku s externím popiskem:
  • Přiřaďte jedinečný přístupový klíč . Pokyny najdete v tématu Klávesnice.
  • Použijte velká písmena ve stylu věty .
  • Napište popisek jako frázi a nepoužívejte žádnou koncovou interpunkci.
  • Napište popisek tak, aby popsal efekt kliknutí na tlačítko a při změně stavu změňte popisek.
  • Pokud povrch vždy zobrazuje některé možnosti, příkazy nebo podrobnosti, použijte následující dvojice popisků:
    • Více/Méně možností. Slouží pro možnosti nebo kombinaci možností, příkazů a podrobností.
    • Více nebo méně příkazů. Slouží pouze pro příkazy.
    • Další nebo méně podrobností. Slouží pouze pro informace.
    • Více nebo méně <název objektu>. Slouží pro jiné typy objektů, jako jsou složky.
  • Jinak:
    • Zobrazit nebo skrýt možnosti Slouží pro možnosti nebo kombinaci možností, příkazů a podrobností.
    • Zobrazí nebo skryje příkazy. Slouží pouze pro příkazy.
    • Zobrazení nebo skrytí podrobností Slouží pouze pro informace.
    • Zobrazit nebo skrýt název objektu <>. Slouží pro jiné typy objektů, jako jsou složky.
• U dvojitých šeků na příkazovém tlačítku s interním popiskem postupujte podle standardního příkazového tlačítka pokynů.

Dokumentace

Při odkazech na kontroly progresivního zpřístupnění informací:

• Pokud má ovládací prvek pevný popisek, odkazujte na ovládací prvek pouze jeho popiskem; Nepokoušejte se popisovat ovládací prvek. Použijte přesný text popisku, včetně jeho velká písmena, ale nezahrnujte podtržítko přístupového klíče.

• Pokud ovládací prvek nemá žádný popisek nebo není pevný, podívejte se na ovládací prvek podle jeho typu: dvojitá šipka, šipka, trojúhelník nebo tlačítko plus/minus. V případě potřeby také popište umístění ovládacího prvku. Pokud se ovládací prvek zobrazí dynamicky, například prostoru stránky ovládací prvek, začněte odkaz popisem, jak ovládací prvek zobrazit.

  Příklad: Chcete-li zobrazit soubory ve složce, přesuňte ukazatel na začátek názvu složky a klikněte na trojúhelník vedle složky.

• Neodkazujte na ovládací prvek jako na tlačítko, pokud nechcete kontrastovat s jinými ovládacími prvky progresivního zpřístupnění, které nejsou tlačítky.

• Chcete-li popsat interakci uživatele, použijte kliknutí. Pokud je to potřeba k přehlednosti, použijte kliknutí... rozbalení nebo sbalení.

• Pokud je to možné, naformátujte popisek tučným písmem. V opačném případě vložte popisek do uvozovek, pouze pokud je to nutné, aby se zabránilo nejasnostem.

Příklady:

• (Pro dvojitou šipku) Chcete-li určit velikost souboru, klepněte na tlačítko Podrobnosti.
• (Pro šipku) Pokud chcete zobrazit všechny možnosti, klikněte na šipku vedle pole Hledat.
• (Pro plus/minus) Chcete-li zobrazit obrázek, klikněte na Obrázky.