Stromová zobrazení

Se stromovým zobrazením můžou uživatelé zobrazit hierarchicky uspořádanou kolekci objektů a pracovat s ní pomocí jednoho výběru nebo více výběrů.

Ve stromu se objekty obsahující data nazývají uzly typu list a objekty, které obsahují jiné objekty, se nazývají uzly kontejneru. Jeden hlavní uzel kontejneru se nazývá kořenový uzel. Uživatelé mohou rozbalit a sbalit uzly kontejneru kliknutím na tlačítka plus a minus rozbalení.

Typické stromové zobrazení.

Je to správná kontrola?

Hierarchická data neznamená, že musíte použít stromové zobrazení. Velmi často zobrazení seznamu je jednodušší a výkonnější volba. Zobrazení seznamu:

• Podpora několika různých zobrazení
• Podporuje řazení dat podle libovolného sloupce v zobrazení Podrobností.
• Podpora uspořádání dat do skupin, které tvoří dvouúrovňovou hierarchii.

Chcete-li použít zobrazení seznamu, můžete hierarchické informace zploštět pomocí následujících technik:

• Pokud je kořenový uzel k dispozici, odeberte ho, protože to často není nutné.

• Pomocí skupin zobrazení seznamu, karet, rozevíracích seznamůnebo rozbalitelných nadpisů nahradit kontejnery nejvyšší úrovně.

  

  V tomto příkladu se skupiny zobrazení seznamu používají pro kontejnery nejvyšší úrovně.

  

  V tomto příkladu se karty používají pro kontejnery nejvyšší úrovně.

  kontejneru

  V tomto příkladu se pro kontejnery nejvyšší úrovně používá rozevírací seznam.

• Pokud přidružený ovládací prvek zobrazí obsah vybraného kontejneru, může tento ovládací prvek zobrazit nižší úrovně hierarchie.

  

  V tomto příkladu se v okně dokumentu zobrazí kontejnery nízké úrovně.

Pokud potřebujete zobrazit hierarchii více než dvou úrovní (včetně kořenového uzlu), musíte použít stromové zobrazení.

Pokud se chcete rozhodnout, jestli je stromové zobrazení správným ovládacím prvkem, zvažte tyto otázky:

• Jsou data hierarchická? Pokud ne, použijte jiný ovládací prvek.
• Má hierarchie alespoň tři úrovně (nezahrnuje kořen)? Pokud ne, zvažte alternativy, jako jsou skupiny zobrazení seznamu, karty, rozevírací seznamy nebo rozbalitelné nadpisy.
• Mají položky pomocná data? Pokud ano, zvažte použití zobrazení seznamu v režimu zobrazení Podrobností, abyste plně využili pomocných dat.
• Souvisí data nižší úrovně s nezávislými dílčími úkoly? Pokud ano, zvažte zobrazení informací v přidruženém ovládacím prvku nebo v samostatném okně (zobrazí se pomocí příkazových tlačítek nebo odkazy).
• Jsou cíloví uživatelé pokročilí? Pokročilí uživatelé jsou propracovanější při používání stromů. Pokud je vaše aplikace zaměřená na začínající uživatele, vyhněte se použití stromových zobrazení.
• Mají položky jednu, přirozenou hierarchickou kategorizaci, která je pro většinu uživatelů známá? Pokud ano, jsou data ideální pro stromové zobrazení. Pokud potřebujete více zobrazení nebo řazení, použijte místo toho zobrazení seznamu.
• Potřebují uživatelé vidět data na nižší úrovni 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, jsou data ideální pro stromové zobrazení.

Koncepty návrhu

Stromy jsou určené k uspořádání dat a usnadňují jejich vyhledání, ale je obtížné data v rámci stromu snadno zjistit. Při rozhodování o stromových zobrazeních a jejich organizaci mějte na paměti následující principy.

Předvídatelnost a zjistitelnost

Stromové zobrazení je založeno na relacích mezi objekty. Stromy fungují nejlépe, když objekty tvoří jasný, dobře známý vzájemně se vylučující vztah, ve kterém se každý objekt mapuje na jeden snadno určitelný kontejner.

Významným problémem je, že se objekt může objevit v různých uzlech. Kde by například uživatelé očekávali nalezení hardwarového zařízení, které přehrává hudbu, má velký pevný disk a používá port USB? Možná v některém z několika různých uzlů kontejneru, jako jsou multimédia, úložiště, USB a možná i v hardwarových prostředcích. Jedním z řešení je umístit každý objekt do jediného nejvhodnějšího kontejneru bez ohledu na okolnosti; dalším přístupem je umístit každý objekt do všech kontejnerů, které platí. První propaguje jednoduchou, čistou hierarchii a druhá podporuje zjistitelnost, z nichž každá má výhody a potenciální problémy.

Uživatelé nemusí úplně pochopit rozložení stromu, ale po chvíli vytvoří mentální model vztahů po interakci se stromem. Pokud je tento mentální model nesprávný, vede k nejasnostem. Předpokládejme například, že hudební přehrávač najdete v kontejnerech Multimedia, Storage a USB. Toto uspořádání zlepšuje zjistitelnost. Pokud uživatel poprvé najde zařízení v multimédiích, může uživatel dojít k závěru, že všechna zařízení, jako jsou hudební přehrávače, se objeví v multimediálním kontejneru. Uživatel pak bude očekávat, že se podobná zařízení, jako jsou digitální kamery, objeví v multimediálním kontejneru a bude zmatený, pokud tomu tak není.

Výzvou při návrhu stromu je vyvážení zjistitelnosti s předvídatelným uživatelským modelem, který minimalizuje nejasnosti.

Šířka vs. hloubka

Studie použitelnosti ukázaly, že uživatelé jsou úspěšnější při hledání objektů ve stromu, který je široký než ve stromu, který je hluboko, takže při navrhování stromu byste měli preferovat šířku přes hloubku. V ideálním případě by strom neměl mít více než čtyři úrovně (bez počítání kořenového uzlu) a nejčastěji používané objekty by se měly objevit v prvních dvou úrovních.

Další principy

• Když uživatelé najdou, co hledají, přestanou hledat. Nevypadají na to, kde by se mohl najít objekt, protože nepotřebují. Tito uživatelé mohou předpokládat, že první cesta, kterou najdou, je jediná cesta.
• Uživatelé mají potíže s hledáním objektů ve velkých a složitých stromech. Uživatelé nebudou provádět vyčerpávající ruční vyhledávání pro vyhledání objektů v takových stromech; Zastaví se, jakmile si myslí, že vytěsnili rozumné úsilí. V důsledku toho musí být rozsáhlé a složité stromy doplněny dalšími metodami přístupu, jako je vyhledávání slov, index nebo filtrování.
• Některé programy umožňují uživatelům vytvářet vlastní stromy. I když takové stromy navržené svým vlastním návrhem můžou být v souladu s duševním modelem uživatele, často se vytvářejí náhodně a špatně udržované. Například když systém souborů, e-mailový program a seznam Oblíbených obvykle ukládají podobné typy informací, uživatelé zřídka obtěžují jejich uspořádání stejným způsobem.

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

Pečlivě zvažte výhody a nevýhody používání stromového zobrazení. Hierarchicky uspořádaná data neznamená, že potřebujete použít stromové zobrazení.

Vzory použití

Stromová zobrazení mají několik vzorů použití:

Zvyk	Příklad
stromová zobrazení pouze s uzly kontejneru uživatelé můžou zobrazit a pracovat s jedním kontejnerem najednou.	Tato stromová zobrazení mají obvykle přidružený ovládací prvek, který zobrazuje obsah vybraného kontejneru, takže uživatelé můžou pracovat pouze s jedním kontejnerem najednou. V tomto příkladu má stromové zobrazení pouze uzly kontejneru. Obsah vybraného uzlu se zobrazí v přidruženém ovládacím prvku zobrazení seznamu.
stromová zobrazení s kontejnerovými a listovými uzly uživatelé můžou kontejnery zobrazovat a pracovat s nimi.	Tato stromová zobrazení mají obvykle přidružený ovládací prvek, který zobrazuje obsah vybraného kontejneru nebo listu. umožňuje uživatelům interagovat s listy často proto, aby podporovali vícenásobný výběr. v tomto příkladu má stromové zobrazení kontejner i uzly typu list. protože je podporováno vícenásobný výběr, obsah otevřených položek se zobrazí pomocí karet v přidruženém ovládacím prvku. Nebo stromové zobrazení může mít uspořádaný seznam, kde kontejnery jsou nadpisy a listy jsou možnosti. V tomto příkladu jsou listy stromu možnostmi a kontejnery jsou kategorie možností.
zobrazení stromové struktury zaškrtávacího políčka uživatelé můžou vybrat libovolný počet položek, včetně žádné.	Zaškrtávací políčka jasně ukazují, že je možné vybrat vícenásobný výběr. tento stromový vzor použijte, pokud je vícenásobný výběr nezbytný nebo běžně používaný. V tomto příkladu stromové zobrazení zaškrtávacího políčka umožňuje zapnout nebo vypnout výběr funkcí.
tvůrce stromových zobrazení Uživatelé mohou vytvořit strom přidáním jednoho kontejneru nebo listu najednou a volitelně nastavením pořadí.	Mnoho stromů může vytvářet nebo upravovat uživatelé. Některé stromy jsou postavené na místě pomocí místních nabídek a přetažení (například složek v Průzkumníku windows), zatímco jiné stromy jsou vytvořeny pomocí specializovaného dialogového okna (například seznamu oblíbených položek v aplikaci Windows Internet Explorer). V tomto příkladu z Internet Exploreru můžou uživatelé pomocí dialogového okna vytvořit vlastní seznam oblíbených položek.
stromová zobrazení s alternativními metodami přístupu uživatelé mohou najít objekty jinými způsoby než pomocí hierarchického stromu.	Jak už jsme zmínili dříve, uživatelé mají potíže s hledáním objektů ve velkých, složitých stromech, takže tyto stromy by měly být doplněny dalšími metodami přístupu, jako je hledání slov, index nebo filtrování. v tomto příkladu mají uživatelé také přístup k informacím pomocí obsahu, indexu a oblíbených položek. pro některé uživatele můžou být karty indexu a vyhledávání užitečnější než karta s obsahem. V tomto příkladu umožňuje nabídka Start systému Windows také uživatelům přistupovat k programům, souborům a webovým stránkám zadáním části názvu do vyhledávacího pole.

Pokyny

Prezentace

• V kontejneru seřaďte položky v logickém pořadí. Seřaďte jména v abecedním pořadí, čísla v číselném pořadí a kalendářní data v chronologickém pořadí.

• Použít atribut Always Show Selection, aby uživatelé mohli snadno určit vybranou položku, i když ovládací prvek nemá vstupní fokus.

• Pokud strom funguje jako obsah, použijte atribut Single Expand ke zjednodušení správy stromu. Tímto způsobem se rozbalí jenom relevantní část stromu.

• Vyhněte se prezentování prázdných stromů. Pokud uživatel vytvoří strom, inicializujte strom s pokyny nebo ukázkovými položkami, které můžou uživatelé potřebovat.

  

  V tomto příkladu se seznam zpočátku zobrazí s příklady.

• Pokud uživatelé nemají důvod je sbalit, nezbavujte uzly kontejneru. Tím se zvyšuje zbytečná složitost.

• Pokud je výkon načítání problém, ve výchozím nastavení zobrazte pouze kontejnery první a druhé úrovně stromu. Když uživatel rozbalí větve ve stromu, můžete pak načíst další data na vyžádání.

• Pokud uživatelé rozbalí nebo sbalí kontejner, tento stav zachovají, aby se tento stav projevil při příštím zobrazení stromové struktury, pokud uživatelé pravděpodobně nebudou chtít začít ve výchozím stavu. Trvalost by měla být v zobrazení podle stromu, na základě jednotlivých uživatelů.

• Pokud mají kontejnery vysoké úrovně podobný obsah, zvažte použití vizuálních vodítek k jejich rozlišení.

  nesprávná odpověď:

  

  V tomto příkladu mají složky Poštovní schránka a Archiv podobný obsah. Jakmile jsou stromy dále rozšířeny, je velmi obtížné, aby uživatelé věděli, kde jsou ve stromu, což vede k nejasnostem. Tento problém by se vyřešilo použitím mírně různých ikon v různých oddílech.

• Přehodnoťte spojovací čáry. I když tyto řádky jasně zobrazují vztahy mezi uzly typu kontejner a list, přidávají vizuální nepotřebné prvky, aniž by to výrazně pomohlo porozumět. Konkrétně nepomáhají, když jsou uzly blízko sebe, ani nepomáhají, když jsou uzly tak daleko od sebe, že je vyžadováno posouvání.

  správně:

  

  lepší:

  

  Spojovací čáry trochu pomáhají porozumět.

Interakce

• Zvažte poskytnutí chování poklikání. Dvojité kliknutí by mělo mít stejný účinek jako výběr položky a provedení výchozího příkazu.

• Nastavení nadbytečného chování poklikáním Vždy by mělo existovat příkazové tlačítko nebo příkaz místní nabídky, který má stejný účinek.

• Pokud položka vyžaduje další vysvětlení, poskytnout vysvětlení v informačním.

  

  V tomto příkladu poskytuje informační popis další informace.

• Zadejte místní nabídky relevantních příkazů. Mezi tyto příkazy patří příkazy Vyjmout, Kopírovat, Vložit, Odebrat nebo Odstranit, Přejmenovat a Vlastnosti.

• Při zakázání stromového zobrazení také zakažte všechny přidružené popisky a příkazová tlačítka.

Organizace stromové struktury

• Použití přirozené hierarchické struktury, která je pro většinu uživatelů známá.
• Pokud takovou strukturu nemůžete použít, zkuste vyvážit zjistitelnost s předvídatelným uživatelským modelem, který minimalizuje nejasnosti.
• Chcete-li bezpečně zlepšit zjistitelnost, umístěte položku do více kontejnerů v případech, kdy:
  • Položka nesouvisí s žádnými dalšími podobnými položkami (proto se uživatelé nezaměňují nesprávnými přidruženími).
  • Existuje jen několik takových redundantně umístěných položek (takže strom se nefoukne).
• Použijte nejjednodušší hierarchickou strukturu, která dobře funguje. Postup:
  • Umístěte nejčastěji používané objekty do prvních dvou úrovní stromu (nepočítá se kořenový uzel) a umístěte méně často používané objekty dál dolů v hierarchii.
  • Eliminujte nepotřebné nebo kombinujte redundantní kontejnery na střední úrovni.
• Raději šířku přes hloubku. V ideálním případě by strom neměl mít více než čtyři úrovně a nejčastěji používané objekty by se měly objevit v prvních dvou úrovních.
• Zjistěte, jestli opravdu potřebujete kořenový uzel. Pokud uživatelé potřebují provádět příkazy v celém stromu (pravděpodobně pomocí místní nabídky v kořenovém uzlu), zadejte kořenový uzel. V opačném případě je strom jednodušší a snadněji se bez něj používá.
• Pokud strom obsahuje alternativní metody přístupu, jako je hledání slov nebo index, optimalizujte strom pro procházení tím, že se zaměříte na nejužitečnější obsah. Díky alternativním metodám přístupu nemusí být obsah stromu komplexní. Zjednodušení stromu usnadňuje uživatelům nalezení nejužitečnějšího obsahu.

Zobrazení stromové struktury zaškrtávacího políčka

• Zobrazit počet vybraných položek pod seznamem, zejména pokud uživatelé pravděpodobně vyberou několik položek. Tato zpětná vazba pomáhá uživatelům ověřit správnost výběru.

  

  V tomto příkladu se pod stromem zobrazí počet vybraných položek. Je jasné, že nejsou vybrány dvě položky.

• Pokud existuje potenciálně mnoho položek a je pravděpodobné, že vyberete nebo vymažete všechny položky, přidejte příkazová tlačítka Vybrat vše a Vymazat všechny příkazová tlačítka.

• Pomocí zaškrtávacích políček se smíšeným stavem označíte částečný výběr položek v kontejneru.

  správně:

  

  V tomto příkladu se zaškrtávací políčka smíšeného stavu používají k označení částečného výběru.

Doporučená velikost a mezery

Doporučená velikost a mezery pro ovládací prvky stromové zobrazení

• Zvolte šířku stromového zobrazení, která zabraňuje nutnosti vodorovného posouvání pro většinu položek, když je strom plně rozbalený.

• zahrnout dalších 30 procent pro lokalizaci.

• Zvolte výšku stromového zobrazení, která eliminuje zbytečné svislé posouvání. Zvažte, jestli je stromové zobrazení trochu delší (nebo ještě více, takže pokud je k dispozici místo), snížíte tím potřebu svislého posuvníku.

  nesprávná odpověď:

  

  V tomto příkladu by zobrazení stromu bylo ve většině případů mírně širší a delší. V tomto konkrétním stromu lze současně otevřít pouze jeden kontejner.

• Pokud uživatelé zvětší stromové zobrazení, zvětší zobrazení stromu a jeho nadřazené okno. To umožňuje uživatelům upravit velikost stromového zobrazení podle potřeby.

Popisky

Popisky ovládacích prvků

• Všechna zobrazení stromu potřebují popisky. Napište popisek jako slovo nebo frázi, ne jako větu, končící dvojtečkam a pomocí statického textu.

• Přiřaďte jedinečný přístupový klíč. Pokyny k zadání najdete v tématu klávesnice.

• Použijte velká písmena ve stylu věty.

• Umístěte popisek nad ovládací prvek a zarovnejte ho s levým okrajem ovládacího prvku.

• U zobrazení stromu s vícenásobným výběrem napište popisek, aby bylo jasné, že je možné vybrat vícenásobný výběr. Popisky stromových zobrazení zaškrtávacích políček můžou být méně explicitní.

  nesprávná odpověď:

  

  V tomto příkladu popisek neobsahuje žádné informace o vícenásobném výběru.

  lepší:

  

  V tomto příkladu popisek jasně označuje, že je možné vybrat vícenásobný výběr.

  nejlepší:

  

  V tomto příkladu zaškrtávací políčka jasně ukazují, že je možné vybrat více, takže popisek nemusí být explicitní.

Text dat

• Použijte velká písmena ve stylu věty.

Instrukční text

• Pokud potřebujete přidat instrukční text o stromovém zobrazení, přidejte ho nad popisek. Používejte úplné věty s koncovou interpunkcí.

• Použijte velká písmena ve stylu věty.

• Doplňkové vysvětlení, které jsou užitečné, ale není nutné, by měly být zachovány krátké. Tyto informace umístěte buď do závorek mezi popiskem a dvojtečku, za hlavní instrukce, pokud se používá místo popisku, nebo pod ovládací prvek.

  stromového zobrazení

  V tomto příkladu je doplňkové vysvětlení pod ovládacím prvku.

Dokumentace

Při odkazech na stromová zobrazení:

• Použijte přesný text popisku, včetně jeho velká písmena, ale nezahrnujte podtržítko nebo dvojtečku přístupového klíče. Pokud kontext vyžaduje rozdíl od běžných seznamů, zahrňte seznam slov nebo hierarchický seznam.
• U položek stromové struktury použijte přesný text položky, včetně jeho velká písmena.
• Odkazovat na stromové zobrazení jako stromové zobrazení pouze v programování a další technické dokumentaci. Všude jinde používejte seznam nebo hierarchický seznam, protože strom termínů je pro většinu uživatelů matoucí.
• Pokud chcete popsat interakci uživatele, použijte výběr dat a rozbalte a sbalte tlačítka plus a minus.
• Pokud je to možné, naformátujte popisek a stromové položky tučným písmem. V opačném případě vložte popisek a položky do uvozovek, pouze pokud je to nutné, aby se zabránilo nejasnostem.

Příklad: V seznamu Obsah vyberte Návrh uživatelského rozhraní.

Při odkazech na zaškrtávací políčka ve stromovém zobrazení:

• Použijte přesný text popisku včetně jeho velká písmena a zahrňte zaškrtávací políčko. Nezahrnujte podtržítko přístupového klíče.
• Pokud chcete popsat interakci uživatele, použijte výběr a zrušení zaškrtnutí.
• 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říklad: V seznamu Položky, které chcete zálohovat, zaškrtněte políčko Dokumenty.