Kontroller för progressivt avslöjande
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 progressiv offentliggörandekontroll kan användarna visa eller dölja ytterligare information, inklusive data, alternativ eller kommandon. Progressivt avslöjande främjar enkelhet genom att fokusera på det väsentliga, men ändå avslöja ytterligare detaljer efter behov.
Exempel på kontroller för progressivt avslöjande.
Not
Riktlinjer för layout, menyeroch verktygsfält visas i separata artiklar.
Är det här rätt kontroll?
Du kan ta ställning till följande frågor:
Behöver användarna se informationen i vissa men inte alla scenarier, eller vissa men inte hela tiden? I så fall förenklar visning av informationen med progressivt avslöjande baslinjeupplevelsen, men ger användarna enkel åtkomst till informationen.
I det här exemplet visar Windows Security-appen den viktiga säkerhetsstatusen hela tiden, men använder progressivt avslöjande för att visa information på begäran.
Om informationen visas som standard, kommer användarna förmodligen att välja att dölja den? Finns det scenarier där användarna behöver mer utrymme? Är användarna tillräckligt motiverade att anpassa användargränssnittet (UI)? Om inte, visa informationen utan att använda progressivt avslöjande.
felaktig:
I det här exemplet är användarna inte motiverade att dölja informationen.
Är den ytterligare informationen avancerad, omfattande, komplex eller relaterad till en oberoende underavdelning? I så fall bör du överväga att visa informationen i ett separat fönster med hjälp av kommandoknappar eller länkar i stället för att använda en progressiv avslöjande kontroll. (Ytterligare information är avancerad om den är avsedd för avancerade användare. Det är komplext om det gör annan information svår att läsa eller lägga ut.)
I det här exemplet är information om programvarans namn och utgivare främst meningsfull för avancerade användare, så länkar till separata fönster används.
Är den ytterligare informationen ett menings- eller meningsfragment som beskriver vad ett objekt gör eller hur det kan användas? I så fall bör du överväga att använda en knappbeskrivning eller infotip.
Är den ytterligare informationen relaterad till den aktuella aktiviteten, men oberoende av den information som visas för närvarande? I så fall bör du överväga att använda flikar i stället. Komprimerbara listor är dock ofta att föredra framför flikar eftersom de är mer flexibla och skalbara.
Är det i princip ett datafilter att visa eller dölja ytterligare information? I så fall bör du överväga att använda en listruta eller kryssrutor i stället för att tillämpa filtret på hela listan.
Designbegrepp
Målet med progressivt avslöjande är att:
- Förenkla ett användargränssnitt genom att fokusera på det väsentliga, men ändå avslöja ytterligare detaljer efter behov.
- Förenkla ett användargränssnitts utseende genom att minska uppfattningen om oreda.
Båda målen kan uppnås med hjälp av kontroller för progressivt avslöjande, där användarna klickar för att se mer information. Du kan dock uppnå det andra målet att förenkla utseendet utan att använda explicita kontroller för progressivt avslöjande genom att:
Visar endast sammanhangsberoende detaljer i kontexten. Du kan till exempel visa kontextuella kommandon eller verktygsfält automatiskt när det är relevant för det valda objektet eller läget.
Minska vikten av priser för sekundärt användargränssnitt.Affordances är visuella egenskaper som tyder på hur objekt används. Trenden är att ha användargränssnitt som användare kan interagera med på plats, men att få allt sådant användargränssnitt ritat för att skrika "klicka på mig!" leder till för mycket visuell röra. För sekundärt användargränssnitt är det ofta bättre att använda subtila råd och ge de fulla effekterna på musen över.
I det här exemplet är fältet Klassificering interaktivt, men visas inte så förrän muspekaren hovras.
Visar uppföljningssteg först när förhandskraven är klara. Den här metoden används bäst med välbekanta uppgifter där användarna med säkerhet kan vidta de första stegen.
I det här exemplet visar sidan användarnamn och lösenord först endast användarnamn och valfria lösenordsrutor. Bekräftelse- och tipsrutorna visas när användaren har angett ett lösenord.
Även om progressivt avslöjande är ett bra sätt att förenkla UIs, har det dessa risker:
- Brist på upptäcktsbarhet. Användarna kan anta att om de inte kan se något så finns det inte. Användare kan inte hovra eller klicka om de inte ser vad de letar efter. Det finns alltid en chans att användarna inte klickar på saker som Fler alternativ.
- Brist på stabilitet. Progressivt avslöjande bör förväntas eller åtminstone kännas naturligt. Om kontroller oväntat visas och försvinner kan det resulterande användargränssnittet kännas instabilt.
Kontroller för progressivt avslöjande
Kontroller för progressivt avslöjande visas vanligtvis utan direkta etiketter som beskriver deras beteende, så användarna måste kunna göra följande baserat på kontrollens visuella utseende:
- Identifiera att kontrollen ger progressivt avslöjande.
- Kontrollera om det aktuella tillståndet har expanderats eller komprimerats.
- Kontrollera om ytterligare information, alternativ eller kommandon behövs för att utföra uppgiften.
- Fastställ hur du återställer det ursprungliga tillståndet om du vill.
Användarna kan fastställa ovanstående genom utvärderingsversion och fel, men du bör försöka göra sådana experiment onödiga.
Progressiva kontroller för avslöjande har en ganska svag råd, vilket innebär att deras visuella egenskaper tyder på hur de används, om än svagt. I följande tabell jämförs utseendet på de vanliga kontrollerna för progressivt avslöjande:
| Kontroll | Avsikt | Utseende | Glyph anger |
|---|---|---|---|
Sparrar
|
Visa alla: Visa eller dölj återstående objekt i helt eller delvis dolt innehåll. Objekt visas antingen på plats (med en enda sparr) eller i en popup-meny (med en dubbel sparr). |
Sparrar pekar i den riktning där åtgärden kommer att ske. |
Framtida tillstånd |
pilar
|
Visa alternativ: Visa en popup-kommandomeny. |
Pilar pekar i den riktning där åtgärden ska utföras. |
Framtida tillstånd |
Plus- och minuskontroller
|
Expandera containrar: Expandera eller dölj containerinnehåll på plats när du navigerar genom en hierarki. |
Plus- och minussymboler pekar inte, men åtgärden sker alltid till höger. |
Framtida tillstånd |
roterande trianglar
|
Visa information: Visa eller dölj ytterligare information för ett enskilt objekt. De används också för att expandera containrar. |
Roterande trianglar liknar något roterande spakar, så de pekar i den riktning där åtgärden har inträffat. |
Aktuellt tillstånd |
Om du bara gör en sak...
Användare bör kunna förutsäga en progressiv avslöjande kontroll beteende korrekt genom inspektion ensam. För att uppnå detta väljer du lämpliga användningsmönster och tillämpar deras utseende, plats och beteende konsekvent.
Användningsmönster
Progressiva kontroller för avslöjande har flera användningsmönster. Vissa av dem är inbyggda i vanliga kontroller.
Sparrar
Sparrar visar eller döljer de återstående objekten i helt eller delvis dolt innehåll. Vanligtvis visas objekten på plats, men de kan också visas i en popup-meny. När objektet är på plats förblir det expanderat tills användaren döljer det.
Sparrar används på följande sätt:
| Användning | Exempel |
|---|---|
|
användargränssnitt på plats det associerade objektet tar emot indatafokus och den enda sparren aktiveras med blankstegsfältet. |
I de här exemplen placeras de enskilda sparrarna på plats till höger om sin associerade kontroll. |
|
kommandoknappar med externa etiketter kommandoknappen tar emot indatafokus och den enda sparren aktiveras med blankstegsfältet. |
I det här exemplet är den enda sparrknappen märkt och placerad till vänster om etiketten. Med det här mönstret skulle knappen vara svår att förstå utan dess etikett. |
|
kommandoknappar med interna etiketter kommandoknappen tar emot indatafokus och aktiveras med blankstegsfältet. |
I de här exemplen har vanliga kommandoknappar den dubbla sparren placerad för att föreslå deras innebörd. |
Pilar
Pilar visar en popup-kommandomeny. Objektet förblir expanderat tills användaren gör en markering eller klickar var som helst.
Om pilknappen är en oberoende kontroll får den indatafokus och aktiveras med blankstegsfältet. Om pilknappen har en överordnad kontroll får den överordnade kontrollen indatafokus och pilen aktiveras med Alt+down-pilen och Alt+up-piltangenterna, som med listrutekontrollen.
Pilar används på följande sätt:
| Användning | Exempel |
|---|---|
|
Separata knappar pilen finns i en separat knappkontroll. |
I de här exemplen anger separata pilknappar placerade till höger en kommandomeny. |
|
kommandoknappar pilen är en del av en kommandoknapp. |
I de här exemplen har menyknappar och delade knappar pilarna placerade till höger om texten. |
Plus- och minuskontroller
Plus- och minuskontroller expanderar eller döljer för att visa containerinnehållet på plats när du navigerar genom en hierarki. Objektet förblir expanderat tills användaren döljer det. Även om dessa ser ut som knappar är deras beteende på plats.
Det associerade objektet tar emot indatafokus. Plustecknet aktiveras med högerpilen och minustecknet med den vänstra piltangenten.
Plus- och minuskontroller används på följande sätt:
| Användning | Exempel |
|---|---|
|
komprimerbara träd en hierarki på flera nivåer för att visa containerinnehåll. |
I det här exemplet placeras plus- och minuskontrollerna till vänster om den associerade containern. |
|
Döljbara listor en hierarki på två nivåer för att visa containerinnehåll. |
I det här exemplet placeras plus- och minuskontrollerna till vänster om den associerade listrubriken. |
Roterande trianglar
Roterande trianglar visar eller döljer ytterligare information för ett enskilt objekt. De används också för att expandera containrar. Objektet förblir expanderat tills användaren döljer det.
Det associerade objektet tar emot indatafokus. Den komprimerade (högerriktade) triangeln aktiveras med högerpilen och den expanderade (nedåtriktade) triangeln med den vänstra piltangenten.
Roterande trianglar används på följande sätt:
| Användning | Exempel |
|---|---|
|
komprimerbara träd en hierarki på flera nivåer för att visa containerinnehåll. |
I det här exemplet placeras de roterande trianglarna till vänster om den associerade containern. |
|
Döljbara listor en hierarki på två nivåer för att visa ytterligare information på plats. |
I det här exemplet placeras de roterande trianglarna till vänster om sina associerade listobjekt. |
Förhandsgranskningspilar
Precis som sparrar visas eller döljs ytterligare information på plats. Objektet förblir expanderat tills användaren döljer det. Till skillnad från sparrar har glyferna en grafisk representation av åtgärden, vanligtvis med en pil som anger vad som kommer att hända.
I de här exemplen från Microsoft Windows Media Player har glyferna pilar som tyder på den åtgärd som ska utföras.
Förhandsgranskningspilar är bäst reserverade för situationer där en standard chevron inte korrekt kommunicerar kontrollens beteende, till exempel när avslöjandet är komplext eller om det finns mer än en typ av avslöjande.
Riktlinjer
Allmänt
Välj det progressiva mönstret för avslöjande baserat på dess användning. En beskrivning av varje användningsmönster finns i föregående tabell.
Använd inte länkar för kontroller för progressivt avslöjande. Använd endast de kontroller för progressivt avslöjande som visas i avsnittet Användningsmönster. Använd dock länkar för att navigera till hjälpavsnitt.
rätt:
felaktig:
I det felaktiga exemplet används en länk för att visa fler alternativ på plats. Den här användningen skulle vara korrekt om länken navigerade till en annan sida eller dialogruta eller visade ett hjälpavsnitt.
Interaktion
För sparrar och pilar som inte är direkt märkta använder du knappbeskrivningar för att beskriva vad de gör.
I det här exemplet anger knappbeskrivningen effekten av en omärkt sparrkontroll.
Om en användare expanderar eller döljer ett objekt gör du så att tillståndet bevaras så att det börjar gälla nästa gång fönstret visas, såvida inte användarna sannolikt föredrar att starta i standardtillståndet. Gör så att tillståndet bevaras per fönster och per användare.
Kontrollera att allt expanderat innehåll kan komprimeras och vice versa och att den inverterade åtgärden är uppenbar. Att göra det uppmuntrar till utforskning och minskar frustrationen. Det bästa sättet att göra den inverterade åtgärden uppenbar är att behålla kontrollen på samma fasta plats. Om du behöver flytta kontrollen ska du behålla den på samma relativa plats inom ett visuellt distinkt område.
felaktig:
I det här exemplet visas Ersätt med textruta genom att klicka på knappen Ersätt med sparren. När detta är klart blir Replace-expanderaren kommandot Ersätt, så det finns inget sätt att återställa det ursprungliga tillståndet.
Använd endast de åtkomstnycklar som är lämpliga för det progressiva rösningsmönstret, enligt beskrivningen i avsnittet Användningsmönster. Använd inte Retur för att aktivera progressivt avslöjande.
Presentation
Använd inte triangulära pilspetsar för ett annat syfte än progressivt avslöjande.
felaktig:
Även om det här exemplet inte är ett progressivt avslöjandemönster, föreslår en pil här att kommandon visas i ett popup-fönster.
rätt:
I det här exemplet används en punkt korrekt i stället.
Ta bort (inaktivera inte) kontroller för progressivt avslöjande som inte tillämpas i den aktuella kontexten. Progressiva kontroller för avslöjande bör alltid uppfylla sitt löfte, så ta bort dem när det inte finns mer information att ge.
felaktig:
I det här exemplet är en progressiv offentliggörandeskontroll som inte tillämpas felaktigt inaktiverad.
Sparrar
Använd enkla sparrar för att visa eller dölja på plats. Använd dubbla sparrar för att visa eller dölja med hjälp av en popup-meny. Du bör dock alltid använda dubbla sparrar för kommandoknappar med interna etiketter.
rätt:
felaktig:
I det felaktiga exemplet används en dubbel sparr för progressivt avslöjande på plats.
rätt:
I det här exemplet används en dubbel sparr för progressivt avslöjande på plats eftersom det är en kommandoknapp med en intern etikett.
Ange en visuell relation mellan sparren och dess associerade kontroll. Eftersom sparrar på plats placeras till höger om sitt associerade användargränssnitt och högerjusterade, kan det finnas ett stort avstånd mellan en sparr och dess associerade kontroll.
rätt:
I det här exemplet finns det en tydlig relation mellan sparren på plats och dess associerade användargränssnitt.
felaktig:
I det här exemplet finns det ingen tydlig visuell relation mellan sparren på plats och dess associerade användargränssnitt, så det verkar sväva i rymden.
Pilar
Använd inte pilgrafik som kan förväxlas med Bakåt, Framåt, Gå eller Spela upp. Använd enkla triangulära pilspetsar (pilar utan stjälkar) på neutrala bakgrunder.
rätt:
Dessa pilar är tydligt progressiva kontroller för avslöjande.
Felaktig (för progressivt avslöjande):
De här pilarna ser inte ut som kontroller för progressivt avslöjande.
felaktig (för bakåt, framåt):
De här pilarna ser ut som kontroller för progressivt avslöjande, men det är de inte.
Rekommenderad storlek och avstånd
Rekommenderad storleksändring och avstånd för kontroller för progressivt avslöjande.
Etiketter
- För sparrar på en kommandoknapp med en extern etikett:
- Tilldela en unik åtkomstnyckel. Riktlinjer finns i Tangentbord.
- Använd versalisering i meningsformat.
- Skriv etiketten som en fras och använd ingen avslutande skiljetecken.
- Skriv etiketten så att den beskriver effekten av att klicka på knappen och ändra etiketten när tillståndet ändras.
- Om ytan alltid visar några alternativ, kommandon eller information använder du följande etikettpar:
- Fler/färre alternativ. Använd för alternativ eller en blandning av alternativ, kommandon och information.
- Fler/färre kommandon. Använd endast för kommandon.
- Mer/färre detaljer. Använd endast för information.
- Mer/färre <objektnamn>. Används för andra objekttyper, till exempel mappar.
- Annars:
- Visa/dölj alternativ. Använd för alternativ eller en blandning av alternativ, kommandon och information.
- Visa/dölj kommandon. Använd endast för kommandon.
- Visa/dölj information. Använd endast för information.
- Visa/dölj <objektnamn>. Används för andra objekttyper, till exempel mappar.
- För sparrar på en kommandoknapp med en intern etikett följer du standardkommandoknappen riktlinjer.
Dokumentation
När du hänvisar till kontroller för progressivt avslöjande:
Om kontrollen har en fast etikett hänvisar du endast till kontrollen med dess etikett. försök inte beskriva kontrollen. Använd den exakta etiketttexten, inklusive dess versaler, men ta inte med understrecket för åtkomstnyckeln.
Om kontrollen inte har någon etikett eller om den inte är fast kan du referera till kontrollen efter typ: sparr, pil, triangel eller plus/minus-knapp. Beskriv även kontrollens plats om det behövs. Om kontrollen visas dynamiskt, till exempel sidutrymme kontroll, startar du referensen genom att beskriva hur kontrollen ska visas.
Exempel: Om du vill visa filerna i en mapp flyttar du pekaren till början av mappnamnet och klickar sedan på triangeln bredvid mappen.
Referera inte till kontrollen som en knapp, såvida du inte vill jämföra med andra progressiva offentliggörandekontroller som inte är knappar.
Om du vill beskriva användarinteraktion använder du klicka. Om det behövs för tydlighetens skull använder du klicka... för att expandera eller komprimera.
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:
- (För en sparr) Om du vill fastställa filstorleken klickar du på Information.
- (För en pil) Om du vill se alla alternativ klickar du på pilen bredvid rutan Sök.
- (För plus/minus) Om du vill visa bilden klickar du på Bilder.