Trädvyer

Not

Den här designguiden skapades för Windows 7 och har inte uppdaterats för nyare versioner av Windows. Mycket av vägledningen gäller fortfarande i princip, men presentationen och exemplen återspeglar inte vår nuvarande designvägledning.

Med en trädvy kan användarna visa och interagera med en hierarkiskt ordnad samling objekt med hjälp av antingen enstaka markering eller flera val.

I ett träd kallas objekt som innehåller data lövnoder och objekt som innehåller andra objekt för containernoder. En enda, översta containernod kallas för rotnoden. Användare kan expandera och komprimera containernoder genom att klicka på plus- och minus-expanderknapparna.

En typisk trädvy.

Not

Riktlinjer för layout och menyer visas i separata artiklar.

Är det här rätt kontroll?

Att ha hierarkiska data betyder inte att du måste använda en trädvy. Ofta är en listvy ett enklare och kraftfullare val. Listvyer:

• Stöd för flera olika vyer.
• Stöd för sortering av data efter någon av kolumnerna i informationsvyn.
• Stöd för att organisera data i grupper och bilda en hierarki på två nivåer.

Om du vill använda en listvy kan du platta ut hierarkisk information med hjälp av följande tekniker:

• Ta bort rotnoden om den finns, eftersom den ofta inte är nödvändig.

• Använd listvygrupper, flikar, listrutoreller utökningsbara rubriker för att ersätta containrar på den översta nivån.

  

  I det här exemplet används listvygrupper för containrar på den översta nivån.

  

  I det här exemplet används flikar för containrar på den översta nivån

  

  I det här exemplet används en listruta för containrar på den översta nivån.

• Om en associerad kontroll visar innehållet i den valda containern kan kontrollen visa lägre nivåer i hierarkin.

  

  I det här exemplet visas containrar på låg nivå i dokumentfönstret.

Du måste använda en trädvy om du behöver visa en hierarki med fler än två nivåer (inte rotnoden).

Tänk på följande frågor för att avgöra om en trädvy är rätt kontroll:

• Är datahierarkin? Om inte använder du en annan kontroll.
• Har hierarkin minst tre nivåer (inklusive roten)? Om inte kan du överväga alternativ som listvygrupper, flikar, listrutor eller utökningsbara rubriker.
• Har objekten hjälpdata? I så fall bör du överväga att använda en listvy i läget Informationsvy för att dra full nytta av extradata.
• Relaterar data på lägre nivå till oberoende underaktiviteter? I så fall bör du överväga att visa informationen i en associerad kontroll eller i ett separat fönster (visas med hjälp av kommandoknappar eller länkar).
• Är målanvändare avancerade? Avancerade användare är mer skickliga på att använda träd. Om ditt program riktar sig till nybörjare bör du undvika att använda trädvyer.
• Har objekten en enda, naturlig, hierarkisk kategorisering som är bekant för de flesta användare? I så fall är data idealiska för en trädvy. Om det finns behov av flera vyer eller sortering använder du en listvy i stället.
• Behöver användarna se data på lägre nivå i vissa men inte alla scenarier, eller vissa men inte hela tiden? I så fall är data idealiska för en trädvy.

Not

Ibland implementeras en kontroll som ser ut som en trädvy med hjälp av en listvy. I sådana fall tillämpar du riktlinjerna baserat på användningen, inte på implementeringen.

Designbegrepp

Träd är avsedda att organisera data och göra det enkelt att hitta, men det är svårt att göra data i ett träd lätt att identifiera. Tänk på följande principer när du bestämmer dig för trädvyer och deras organisation.

Förutsägbarhet och identifiering

En trädvy baseras på relationerna mellan objekt. Träd fungerar bäst när objekten bildar en tydlig, välkänd, ömsesidigt uteslutande relation där varje objekt mappar till en enda, lättbestämmer container.

Ett betydande problem är att ett objekt kan visas i olika noder. Till exempel, var skulle användarna förvänta sig att hitta en maskinvaruenhet som spelar musik, har en stor hårddisk och använder en USB-port? Kanske i någon av flera olika containernoder, till exempel Multimedia, Storage, USB och eventuellt i Maskinvaruresurser. En lösning är att placera varje objekt under den enda lämpligaste containern oavsett omständigheterna. En annan metod är att placera varje objekt under alla containrar som gäller. Den förstnämnda främjar en enkel, ren hierarki och den senare främjar upptäckbarhet som var och en har fördelar och potentiella problem.

Användare kanske inte helt förstår trädets layout, men de kommer att bilda en mental modell av relationerna efter att ha interagerat med trädet ett tag. Om den mentala modellen är felaktig leder det till förvirring. Anta till exempel att en musikspelare finns i containrarna Multimedia, Storage och USB. Det här arrangemanget förbättrar identifieringen. Om en användare först hittar enheten i Multimedia kan användaren dra slutsatsen att alla enheter som musikspelare visas i multimediacontainern. Användaren förväntar sig sedan att liknande enheter, till exempel digitalkameror, ska visas i multimediacontainern och blir förvirrad om så inte är fallet.

Utmaningen när du utformar ett träd är att balansera identifieringen med en förutsägbar användarmodell som minimerar förvirringen.

Bredd kontra djup

Användbarhetsstudier har visat att användare är mer framgångsrika när det gäller att hitta objekt i ett träd som är brett än i ett träd som är djupt, så när du utformar ett träd bör du föredra bredd framför djup. Helst bör ett träd inte ha fler än fyra nivåer (räknar inte rotnoden) och de vanligaste objekten bör visas på de två första nivåerna.

Andra principer

• När användarna hittar det de letar efter slutar de leta. De ser inte var annars ett objekt kan hittas eftersom de inte behöver det. Dessa användare kan anta att den första sökvägen de hittar är den enda sökvägen.
• Användare har problem med att hitta objekt i stora, komplexa träd. Användarna utför inte en fullständig, manuell sökning för att hitta objekt i sådana träd. de slutar när de tror att de har förbrukat en rimlig ansträngning. Därför måste stora, komplexa träd kompletteras med andra åtkomstmetoder, till exempel ordsökning, ett index eller filtrering.
• Vissa program gör det möjligt för användare att skapa egna träd. Även om sådana självdesignade träd kan vara i linje med en användares mentala modell, skapas de ofta slumpmässigt och dåligt underhållna. Till exempel, medan en filsystem, e-postprogram och favoriter lista vanligtvis lagrar liknande typer av information, användare sällan bry sig om att organisera dem på samma sätt.

Om du bara gör en sak...

Väg noggrant fördelarna och nackdelarna med att använda trädvyer. Att ha hierarkiskt ordnade data betyder inte att du behöver använda en trädvy.

Användningsmönster

Trädvyer har flera användningsmönster:

Användning	Exempel
trädvyer med endast containernoder användare kan visa och interagera med en container i taget.	Normalt har dessa trädvyer en associerad kontroll som visar innehållet i den valda containern, så att användarna bara kan interagera med en container i taget. I det här exemplet har trädvyn endast containernoder. Innehållet i den valda noden visas i den associerade listvisningskontrollen.
Trädvyer med container- och lövnoder användare kan visa och interagera med containrar och löv.	Dessa trädvyer har vanligtvis en associerad kontroll som visar innehållet i den valda containern eller bladet. Att tillåta användare att interagera med löv gör det ofta nödvändigt att stödja flera val. I det här exemplet har trädvyn både container- och lövnoder. Eftersom flera markeringar stöds visas innehållet i de öppnade objekten med hjälp av flikar i den associerade kontrollen. Alternativt kan trädvyn ha en ordnad lista, där containrarna är rubriker och bladen är alternativ. I det här exemplet är trädbladen alternativ och containrarna är alternativkategorier.
kryssruteträdvyer användare kan välja valfritt antal objekt, inklusive inget.	Kryssrutorna visar tydligt att flera markeringar är möjliga. använd det här trädmönstret när flera val är viktiga eller ofta används. I det här exemplet gör en kryssruteträdsvy att val av funktioner kan aktiveras eller inaktiveras.
Trädvybyggare användare kan skapa ett träd genom att lägga till en container eller ett löv i taget och eventuellt ange ordningen.	Många träd kan skapas eller ändras av användare. vissa träd är byggda på plats med snabbmenyer och dra och släpp (till exempel mapparna i Utforskaren), medan andra träd skapas med hjälp av en specialiserad dialogruta (till exempel listan med favoriter i Windows Internet Explorer). I det här exemplet från Internet Explorer kan användare skapa en egen lista över favoriter med hjälp av en dialogruta.
Trädvyer med alternativa åtkomstmetoder användare kan hitta objekt på andra sätt än att använda ett hierarkiskt träd.	Som tidigare nämnts har användare problem med att hitta objekt i stora, komplexa träd, så sådana träd bör kompletteras med andra åtkomstmetoder, till exempel en ordsökning, ett index eller filtrering. I det här exemplet kan användarna också komma åt information med hjälp av en innehållsförteckning, ett index och favoriter. för vissa användare kan index- och sökflikarna vara mer användbara än innehållsfliken. I det här exemplet ger Windows Start-menyn också användare åtkomst till program, filer och webbsidor genom att skriva en del av namnet i sökrutan.

Riktlinjer

Presentation

• Sortera objekten i logisk ordning i en container. Sortera namn i alfabetisk ordning, tal i numerisk ordning och datum i kronologisk ordning.

• Använd attributet Visa alltid markering så att användarna enkelt kan fastställa det markerade objektet, även om kontrollen inte har indatafokus.

• Om trädet fungerar som en innehållsförteckning använder du attributet Enkel utökning för att förenkla hanteringen av trädet. På så sätt utökas endast den relevanta delen av trädet.

• Undvik att presentera tomma träd. Om en användare skapar ett träd initierar du trädet med instruktioner eller exempelobjekt som användarna kan behöva.

  

  I det här exemplet visas listan först med exempel.

• Gör inte containernoderna komprimerbara om användarna inte har någon anledning att dölja dem. Detta ger onödig komplexitet.

• Om belastningsprestanda är ett problem visar du endast de första och andra nivåcontainrarna i trädet som standard. Du kan sedan läsa in ytterligare data på begäran när en användare expanderar grenar i trädet.

• Om användarna expanderar eller döljer en container gör du så att tillståndet kvarstår så att det börjar gälla nästa gång trädvyn visas, såvida inte användarna föredrar att starta i standardtillståndet. Beständighet bör vara per trädvy, per användare.

• Om högnivåcontainrar har liknande innehåll bör du överväga att använda visuella ledtrådar för att särskilja dem.

  felaktig:

  

  I det här exemplet har postlådan och arkivmapparna liknande innehåll. När träden har expanderats ytterligare är det mycket svårt för användarna att veta var de befinner sig i trädet, vilket leder till förvirring. Om du använder lite olika ikoner i de olika avsnitten kan du lösa det här problemet.

• Ompröva anslutningslinjer. Även om dessa rader tydligt visar relationer mellan container- och lövnoder, lägger de till visuell oreda utan att underlätta förståelsen avsevärt. Mer specifikt hjälper de inte när noder är nära varandra, och de hjälper inte heller när noder är så långt ifrån varandra att rullning krävs.

  rätt:

  

  Bättre:

  

  Anslutningslinjerna gör lite för att underlätta förståelsen.

Interaktion

• Överväg att ange dubbelklicksbeteende. Dubbelklicka bör ha samma effekt som att välja ett objekt och utföra standardkommandot.

• Gör dubbelklicksbeteendet redundant. Det bör alltid finnas en kommandoknapp eller ett snabbmenykommando som har samma effekt.

• Om ett objekt kräver ytterligare förklaring ange förklaringen i en infotip-.

  

  I det här exemplet innehåller en infotip ytterligare information.

• Ange snabbmenyer med relevanta kommandon. Sådana kommandon är Klipp ut, Kopiera, Klistra in, Ta bort eller Ta bort, Byt namn och Egenskaper.

• Inaktivera även eventuella associerade etiketter och kommandoknappar när du inaktiverar en trädvy.

Trädorganisation

• Använd en naturlig hierarkisk struktur som är bekant för de flesta användare.
• Om du inte kan använda en sådan struktur kan du försöka balansera identifieringsbarheten med en förutsägbar användarmodell som minimerar förvirringen.
• För att på ett säkert sätt förbättra identifieringen placerar du ett objekt i flera containrar när:
  • Objektet är inte relaterat till andra liknande objekt (så användarna blir inte förvirrade av felaktiga associationer).
  • Det finns bara ett fåtal sådana redundanta objekt (så att trädet inte blir uppsvälld).
• Använd den enklaste hierarkiska strukturen som fungerar bra. Så här gör du:
  • Placera de vanligaste objekten i de två första nivåerna i trädet (räknar inte rotnoden) och placera mindre vanliga objekt längre ned i hierarkin.
  • Eliminera onödiga eller kombinera redundanta containrar på mellannivå.
• Föredrar bredd framför djup. Helst bör ett träd inte ha fler än fyra nivåer och de vanligaste objekten bör visas i de två första nivåerna.
• Kontrollera om du verkligen behöver en rotnod. Ange en rotnod om användarna behöver kunna utföra kommandon i hela trädet (eventuellt med hjälp av en snabbmeny på rotnoden). Annars är trädet enklare och enklare att använda utan det.
• Om trädet har alternativa åtkomstmetoder, till exempel en ordsökning eller ett index, optimerar du trädet för surfning genom att fokusera på det mest användbara innehållet. Med alternativa åtkomstmetoder behöver trädets innehåll inte vara omfattande. Genom att förenkla trädet blir det enklare för användarna att hitta det mest användbara innehållet.

Markera trädvyer

• Visa antalet markerade objekt under listan, särskilt om användarna sannolikt kommer att välja flera objekt. Den här feedbacken hjälper användarna att bekräfta att deras val är korrekt.

  

  I det här exemplet visas antalet markerade objekt under trädet. Det är tydligt att två objekt inte är markerade.

• Om det finns potentiellt många objekt och det är troligt att du väljer eller rensar dem alla lägger du till Välj alla och Rensa alla kommandoknappar.

• Använd kryssrutor med blandat tillstånd för att visa partiell markering av objekten i en container.

  rätt:

  

  I det här exemplet används kryssrutorna för blandat tillstånd för att indikera partiell markering.

Rekommenderad storlek och avstånd

Rekommenderad storlek och avstånd för trädvisningskontroller.

• Välj en trädvybredd som undviker behovet av vågrät rullning för de flesta objekt när trädet är helt expanderat.

• Inkludera ytterligare 30 procent för lokalisering.

• Välj en trädvyhöjd som eliminerar onödig lodrät rullning. Överväg att göra en trädvy något längre (eller ännu mer om det finns tillgängligt utrymme) om detta minskar behovet av en lodrät rullningslist.

  felaktig:

  

  I det här exemplet skulle rullningslisterna i de flesta fall elimineras om trädvyn blir något bredare och längre. I det här trädet kan endast en container öppnas i taget.

• Om användarna har nytta av att göra trädvyn större kan du ändra storlek på trädvyn och dess överordnade fönster. På så sätt kan användarna justera trädvisningsstorleken efter behov.

Etiketter

Kontrolletiketter

• Alla trädvyer behöver etiketter. Skriv etiketten som ett ord eller en fras, inte som en mening, sluta med ett kolon och använd statisk text.

• Tilldela en unik åtkomstnyckel. Riktlinjer för tilldelning finns i Tangentbord.

• Använd versalisering i meningsformat.

• Placera etiketten ovanför kontrollen och justera etiketten mot kontrollens vänstra kant.

• För trädvyer med flera val skriver du etiketten så att det är tydligt att flera val är möjliga. Kryssruteträdsvyetiketter kan vara mindre explicita.

  felaktig:

  

  I det här exemplet innehåller etiketten ingen information om flera val.

  Bättre:

  

  I det här exemplet anger etiketten tydligt att flera val är möjliga.

  Bäst:

  

  I det här exemplet visar kryssrutorna tydligt att flera val är möjliga, så etiketten behöver inte vara explicit.

Datatext

• Använd versalisering i meningsformat.

Instruktionstext

• Om du behöver lägga till instruktionstext om en trädvy lägger du till den ovanför etiketten. Använd fullständiga meningar med avslutande skiljetecken.

• Använd versalisering i meningsformat.

• Kompletterande förklaringar som är användbara men inte nödvändigt bör hållas kort. Placera den här informationen i parenteser mellan etiketten och kolonet, efter huvudinstruktionen om den används i stället för en etikett eller under kontrollen.

  

  I det här exemplet ligger den kompletterande förklaringen under kontrollen.

Dokumentation

När du refererar till trädvyer:

• Använd den exakta etiketttexten, inklusive dess versaler, men ta inte med understrecket eller kolonet för åtkomstnyckeln. Inkludera ordlistan eller den hierarkiska listan om kontexten kräver att man skiljer sig från vanliga listor.
• För trädobjekt använder du den exakta objekttexten, inklusive dess versaler.
• Se trädvyer som trädvyer endast i programmering och annan teknisk dokumentation. Överallt annars använder du listan eller hierarkisk lista eftersom termen träd är förvirrande för de flesta användare.
• Om du vill beskriva användarinteraktion använder du Välj för data och expanderar och döljer för plus- och minusknapparna.
• Formatera etiketten och trädobjekten med fet text när det är möjligt. Annars placerar du endast etiketten och objekten inom citattecken om det behövs för att förhindra förvirring.

Exempel: I listan Innehåll väljer du Användargränssnittsdesign.

När du refererar till kryssrutor i en trädvy:

• Använd den exakta etiketttexten, inklusive dess versaler, och inkludera kryssrutan ord. Ta inte med understrecket för åtkomstnyckeln.
• Om du vill beskriva användarinteraktion använder du välj och avmarkera.
• Formatera etiketten med fet text när det är möjligt. Annars placerar du etiketten endast inom citattecken om det behövs för att förhindra förvirring.

Exempel: Markera kryssrutan Mina dokument i listan objekt som ska säkerhetskopieras.