Förloppsstaplar
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 förloppsindikator kan användarna följa förloppet för en lång åtgärd. En förloppsindikator kan antingen visa en ungefärlig procentandel av slutförandet (determinat) eller indikera att en åtgärd pågår (obestämd).
Användbarhetsstudier har visat att användarna är medvetna om svarstider på över en sekund. Därför bör du överväga åtgärder som tar två sekunder eller längre att slutföra för att vara långa och i behov av någon typ av förloppsfeedback.
En typisk förloppsindikator.
Not
Riktlinjer som rör layout visas i en separat artikel.
Är det här rätt kontroll?
Du kan ta ställning till följande frågor:
Kommer åtgärden att slutföras om cirka fem sekunder eller mindre? I så fall använder du en aktivitetsindikator i stället, eftersom det skulle vara störande att visa en förloppsindikator under så kort tid. Om åtgärden vanligtvis tar fem sekunder eller mindre, men ibland tar mer, börjar du med en upptagen pekare och konverterar till en förloppsindikator efter fem sekunder.
Används en obestämd förloppsindikator för att vänta tills användaren har slutfört en uppgift? I så fall ska du inte använda en förloppsindikator. Förloppsstaplar är för datorns förlopp, inte användarens förlopp.
Kombineras ett obestämt förloppsfält med en animering? I så fall använder du bara animeringen i stället. Den obestämda förloppsindikatorn är i praktiken en allmän animering och lägger inte till något värde i animeringen.
Är åtgärden en mycket lång (längre än två minuter) bakgrundsaktivitet som användarna är mer intresserade av att slutföra än förloppet? I så fall använder du meddelanden i stället. I det här fallet utför användarna andra uppgifter under tiden och övervakar inte förloppet. Med hjälp av ett meddelande kan användare utföra andra uppgifter utan avbrott. Exempel på sådana långa åtgärder är utskrift, säkerhetskopiering, systemgenomsökningar och massöverföringar av data eller konverteringar.
Kommer användarna att kunna spela upp resultatet när åtgärden är klar? I så fall använder du ett skjutreglage i stället. Exempel på sådana åtgärder är video- och ljudinspelning och uppspelning.
I det här exemplet används ett skjutreglage för att indikera förloppet vid uppspelning av ljud. På så sätt kan användarna spela upp resultatet senare.
Designbegrepp
Under en lång åtgärd behöver användarna en allmän uppfattning om vad åtgärden gör. De behöver också veta:
- Att en lång åtgärd har påbörjats.
- Dessa framsteg görs och att åtgärden så småningom kommer att slutföras (och därför inte har låsts in).
- Den ungefärliga procentandelen av åtgärden som har slutförts (och därmed den procentandel som återstår).
- Om de ska avbryta åtgärden om det inte är värt att fortsätta att vänta.
- Om de ska fortsätta att vänta eller göra något annat medan åtgärden är klar.
Använd determina förloppsstaplar för åtgärder som kräver en begränsad tid även om den tiden inte kan förutsägas korrekt. Obestämda förloppsstaplar visar att framsteg görs, men ger ingen annan information. Välj inte en obestämd förloppsindikator enbart baserat på eventuell brist på noggrannhet.
Anta till exempel att en åtgärd kräver fem steg och att vart och ett av dessa steg kräver en begränsad tid, men hur lång tid varje steg tar kan variera kraftigt. I det här fallet använder du en fast förloppsindikator och visar förloppet när varje steg slutförs proportionellt mot hur lång tid varje steg vanligtvis tar. Använd endast en obestämd förloppsindikator om en bestämd förloppsindikator skulle få användarna att felaktigt dra slutsatsen att åtgärden har låsts.
Om du bara gör en sak...
Se till att du ger feedback om förlopp för långa åtgärder och att informationen ovan är tydligt kommunicerad. Använd determinate progress bars när det är möjligt.
Användningsmönster
Förloppsstaplar har flera användningsmönster:
Fastställa förloppsstaplar
| Etikett | Värde |
|---|---|
|
Modal determinate förloppsstaplar Ange en åtgärds förlopp genom att fylla från vänster till höger och fylla helt när åtgärden är klar. |
Eftersom den här feedbacken är modalkan användarna inte utföra andra uppgifter i fönstret (eller dess överordnade om de visas i en modal dialogruta) förrän åtgärden har slutförts. 
I det här exemplet ger förloppsindikatorn feedback under konfigurationen. |
|
Modal determinate progress bars med knappen Avbryt eller Stoppa Tillåt användare att stoppa åtgärden, kanske för att åtgärden tar för lång tid eller inte är värd att vänta på. |
I det här exemplet kan användare klicka på Stoppa för att stoppa åtgärden och lämna miljön i sitt aktuella tillstånd. |
|
Modal fastställa förloppsstaplar med knappen Avbryt eller Stoppa och animering Tillåt användare att stoppa åtgärden och inkludera en animering som hjälper användarna att visualisera effekten av en åtgärd. |
I det här exemplet kan användare klicka på Stoppa för att stoppa åtgärden och lämna miljön i sitt aktuella tillstånd. |
|
Modal fastställa dubbla förloppsstaplar Ange förloppet för en åtgärd i flera steg genom att visa förloppet för det aktuella steget i den första förloppsindikatorn och den övergripande förloppet i det andra fältet. |
Eftersom den första förloppsindikatorn ger lite ytterligare information och kan vara ganska störande rekommenderas inte det här mönstret. Låt i stället alla steg i åtgärden dela en del av förloppet och låta en enda förloppsindikator slutföras en gång. 
I det här exemplet visar den första förloppsindikatorn för det aktuella steget och den andra förloppsindikatorn visar den övergripande förloppet. Obs! Det här mönstret är vanligtvis onödigt och bör undvikas. |
|
Förloppsstaplar utan läge Ange en åtgärds förlopp genom att fylla från vänster till höger och fylla helt när åtgärden är klar. |
Till skillnad från med modala förloppsindikatorer kan användarna utföra andra uppgifter medan åtgärden pågår. Dessa förloppsstaplar kan visas i kontext eller i ett statusfält. 
I det här exemplet visar Windows Internet ExplorerWindows Internet Explorer förloppet för att läsa in en webbsida i statusfältet. Användare kan utföra andra uppgifter medan sidan läses in. |
Obestämda förloppsstaplar
| Typ av förloppsindikator | Beskrivning |
|---|---|
|
Förloppsstaplar för modal Ange att en åtgärd pågår genom att visa en animering som kontinuerligt växlar över fältet från vänster till höger. |
Används endast för åtgärder vars övergripande förlopp inte kan fastställas, så det finns ingen uppfattning om fullständighet. Att fastställa förloppsstaplar är att föredra eftersom de anger den ungefärliga procentandelen av åtgärden som har slutförts och hjälper användarna att avgöra om åtgärden är värd att fortsätta att vänta. De är också mindre visuellt distraherande. 
I det här exemplet använder Windows Update en modal obestämd förloppsindikator för att ange förloppet medan det söker efter uppdateringar. |
|
Lägeslösa obestämda förloppsstaplar Ange att en åtgärd pågår genom att visa en animering som kontinuerligt växlar över fältet från vänster till höger. |
Till skillnad från modala förloppsindikatorer kan användarna utföra andra uppgifter medan bearbetningen pågår. dessa förloppsstaplar kan visas i kontext eller i ett statusfält. 
I det här exemplet använder Microsoft Outlook en lägeslös obestämd förloppsindikator när du fyller i kontaktegenskaper. Användare kan fortsätta att använda egenskapsfönstret medan det här arbetet pågår. |
Meter
| Typ | Beskrivning |
|---|---|
|
meter Ange en procentandel som inte är relaterad till förloppet. |
Det här mönstret är inte en förloppsindikator, men det implementeras med hjälp av förloppsindikatorkontrollen. meter har ett distinkt utseende för att skilja dem från sanna förloppsstaplar. 
I det här exemplet visar mätaren procentandelen diskenhetsutrymme som används. |
Riktlinjer
Allmänt
Ge feedback om förlopp när du utför en lång åtgärd. Användare ska aldrig behöva gissa om framsteg görs.
Ange tydligt verkliga framsteg. Förloppsindikatorn måste gå framåt om framsteg görs. Om intervallet för förväntade slutförandetider är stort kan du överväga att använda en icke-linjär skala för att indikera förloppet för de längre tiderna. Du vill inte att användarna ska dra slutsatsen att programmet har låsts när det inte har gjort det.
Tyder tydligt på bristande framsteg. Förloppsindikatorn får inte gå framåt om inga framsteg görs. Du vill inte att användarna ska vänta på obestämd tid på en åtgärd som aldrig kommer att slutföras.
Ange användbar förloppsinformation. Ange ytterligare förloppsinformation, men bara om användarna kan göra något med den. Kontrollera att texten visas tillräckligt länge för att användarna ska kunna läsa den.
I det här exemplet kan användarna se överföringshastigheten. Den låga överföringshastigheten här tyder på behovet av att använda en nätverksanslutning med hög bandbredd.
Ange inte onödig information. Vanligtvis bryr sig användarna inte om informationen om den åtgärd som utförs. Användare av ett installationsprogram bryr sig till exempel inte om den specifika fil som kopieras eller att systemkomponenter registreras eftersom de inte har några förväntningar på den här informationen. Vanligtvis ger en välmärkt förloppsindikator enbart tillräcklig information, så ange ytterligare förloppsinformation endast om användarna kan göra något med den. Att tillhandahålla information som användarna inte bryr sig om gör användarupplevelsen alltför komplicerad och teknisk. Om du behöver mer detaljerad information för felsökning ska du inte visa den i versionsversioner.
rätt:
I det här exemplet är den märkta förloppsindikatorn allt som behövs.
rätt:
I det här exemplet kopierar Utforskaren filer som användaren har valt, så det är meningsfullt att visa de filnamn som kopieras.
felaktig:
I det här exemplet ger ett installationsprogram information som är meningslös för användaren.
Ange användbara animeringar. Om det görs bra kan animeringar förbättra användarupplevelsen genom att hjälpa användarna att visualisera åtgärden. Bra animeringar har större inverkan än enbart text. Till exempel visar förloppsindikatorn för kommandot Outlook Delete papperskorgen för målet om filerna kan återställas, men ingen papperskorg om filerna inte kan återställas.
I det här exemplet förstärker bristen på en papperskorg att filerna tas bort permanent. Den här ytterligare informationen skulle inte kommuniceras lika effektivt med enbart text.
Använd inte onödiga animeringar. Animeringar kan vara missvisande eftersom de vanligtvis körs i en separat tråd från den faktiska aktiviteten och därför kan föreslå förlopp även om åtgärden har låsts. Om åtgärden är långsammare än förväntat antar användarna ibland att animeringen är en del av orsaken. Använd därför endast animeringar när det finns en tydlig motivering. använd dem inte för att underhålla användare.
Placera animeringar centrerade över förloppsindikatorn. Placera animeringen ovanför förloppsindikatoretiketterna, om du har några. Om det finns en avbryt- eller stoppknapp till höger om förloppsindikatorn tar du med knappen när du bestämmer mitten.
Spela upp en ljudeffekt vid slutförandet av en åtgärd endast om den är mycket lång (längre än två minuter), ovanlig och viktig. Om användaren sannolikt kommer att lämna en viktig åtgärd medan den bearbetas, återställer en ljudeffekt användarens uppmärksamhet. Att använda en ljudeffekt vid slutförande under andra omständigheter skulle vara en distraherande irritation.
Stjäl inte indatafokus för att visa en förloppsuppdatering eller slutförande. Användare växlar ofta till andra program medan de väntar och vill inte avbrytas. Bakgrundsaktiviteter måste ligga kvar i bakgrunden.
Oroa dig inte för teknisk support. Eftersom feedbacken från förloppsstaplar inte nödvändigtvis är korrekt och är flyktig är förloppsstaplar inte en bra mekanism för att tillhandahålla information för teknisk support. Om åtgärden kan misslyckas (som med ett installationsprogram) anger du därför inte ytterligare förloppsinformation som bara är användbar för teknisk support. Ange i stället en alternativ mekanism, till exempel en loggfil för att registrera teknisk supportinformation.
felaktig:
I det här exemplet visar förloppsindikatorn information som är avsedd för teknisk support.
Placera inte procentandelen fullständig eller någon annan text i ett förloppsfält. Sådan text är inte tillgänglig och är inte kompatibel med teman.
felaktig:
I det här exemplet är procenttexten i förloppsindikatorn inte tillgänglig.
Kombinera inte ett förloppsfält med en upptagen pekare. Använd det ena eller det andra, men inte båda samtidigt.
Använd inte lodräta förloppsindikatorer. Vågräta förloppsfält har en mer naturlig mappning och bättre flöde.
Fastställa förloppsstaplar
Använd determina förloppsstaplar för åtgärder som kräver en begränsad tid även om den tiden inte kan förutsägas korrekt. Obestämda förloppsstaplar visar att framsteg görs, men ger ingen annan information. Välj inte en obestämd förloppsindikator enbart baserat på eventuell brist på noggrannhet.
Ange förloppsfasen tydligt. Förloppsindikatorn måste kunna ange om åtgärden är i början, mitten eller slutet av en åtgärd. Till exempel är förloppsstaplar som omedelbart skjuter till 99 procent slutförande och sedan stannar där under en lång tid särskilt oinformativa och irriterande. I dessa fall bör förloppsindikatorn först anges till högst 33 procent för att indikera att åtgärden fortfarande är i början av fasen.
Ange klart slutförande. Låt inte förloppsindikatorn gå till 100 procent om inte åtgärden har slutförts.
Ange en återstående tidsuppskattning om du kan göra det korrekt. Tidsberäkningar som är korrekta är användbara, men uppskattningar som ligger långt utanför markeringen eller studsar runt är inte till hjälp. Du kan behöva utföra viss bearbetning innan du kan ge korrekta uppskattningar. I så fall ska du inte visa potentiellt felaktiga uppskattningar under den första perioden.
Starta inte om förloppet. Ett förloppsfält förlorar sitt värde om det startas om (kanske för att ett steg i åtgärden slutförs) eftersom användarna inte har något sätt att veta när åtgärden kommer att slutföras. Låt i stället alla steg i åtgärden dela en del av förloppet och låta förloppsindikatorn slutföras en gång.
felaktig:
I det här exemplet flyttades åtgärden till steget för att kopiera filer och återställa förloppsindikatorn för det steget. Nu har användarna ingen aning om hur mycket framsteg som har gjorts eller hur mycket tid som återstår.
Säkerhetskopiera inte förloppet. Precis som vid en omstart förlorar ett förloppsfält sitt värde om det säkerhetskopieras. Öka alltid förloppet monotont. Du kan dock ha en återstående tidsuppskattning som ökar (samt minskar) eftersom förloppet kan variera.
Obestämda förloppsstaplar
Använd endast obestämda förloppsstaplar för åtgärder vars övergripande förlopp inte kan fastställas. Använd obestämda förloppsstaplar för åtgärder som kräver en obegränsad tid eller som har åtkomst till ett okänt antal objekt. Använd timeouter för att ge gränser till tidsbaserade åtgärder.
Konvertera till en determinat förloppsindikator när den övergripande förloppet kan fastställas. Om det till exempel tar betydligt längre tid än två sekunder att fastställa antalet objekt kan du använda en obestämd förloppsindikator medan objekten räknas och sedan konvertera till ett determinat förloppsfält.
Kombinera inte obestämda förloppsstaplar med procent färdigt eller återstående tidsuppskattningar. Om du kan ange den här informationen använder du ett förloppsfält i stället.
Kombinera inte obestämda förloppsstaplar med animeringar. En obestämd förloppsindikator är i själva verket en allmän animering, så du bör använda den ena eller den andra men aldrig båda.
rätt:
I det här exemplet används endast en animering för att visa att en åtgärd pågår.
Lägeslösa förloppsstaplar
Om användarna kan göra något produktivt medan åtgärden pågår kan du ge en lägeslös feedback. Du kan behöva inaktivera en delmängd funktioner som kräver att åtgärden slutförs.
Om fönstret har ett adressfält visar du den lägeslösa förloppet i adressfältet.
I det här exemplet visas lägeslösa förlopp i adressfältet.
Annars om fönstret har ett statusfält visar du den lägeslösa förloppet i statusfältet. Placera motsvarande text till vänster i statusfältet.
I det här exemplet visas lägeslösa förlopp i statusfältet.
Modala förloppsstaplar
Placera modal förloppsstaplar på förloppssidor ellerförloppsdialogrutor.
Ange en kommandoknapp för att stoppa åtgärden om det tar mer än några sekunder att slutföra eller har potentialen att aldrig slutföras. Märk knappen Avbryt om du avbryter returnerar miljön till dess tidigare tillstånd (lämnar inga biverkningar), annars märker du knappen Stoppa för att indikera att den delvis slutförda åtgärden lämnas intakt. Du kan ändra knappetiketten från Avbryt till Stoppa mitt i åtgärden om det någon gång inte går att återställa miljön till dess tidigare tillstånd. Centrera kommandoknappen lodrätt med förloppsindikatorn i stället för att justera deras toppar.
rätt:
I det här exemplet har stopp av nätverksanslutningen ingen bieffekt, så Avbryt används.
rätt:
I det här exemplet lämnar stopp av kopian alla kopierade filer, så kommandoknappen är märkt Stoppa.
felaktig:
I det här exemplet lämnar stopp av sökningen ingen sidoeffekt, så kommandoknappen ska vara märkt Avbryt.
Återstående tid
För att fastställa förloppsstaplar:
Använd följande tidsformat. Börja med det första av följande format där den största tidsenheten inte är noll och ändra sedan till nästa format när den största tidsenheten blir noll.
För förloppsstaplar:
Om relaterad information visas i kolonformat:
Återstående tid: h timmar, m minuter
Återstående tid: m minuter, s sekunder
Återstående tid: s sekunder
Om skärmutrymmet är premium:
h hrs, m minuter kvar
m mins, s sek kvar
s sekunder kvar
Annars:
h timmar, m minuter kvar
m minuter, s sekunder kvar
s sekunder kvar
För namnlister:
hh:mm kvar
mm:ss återstående
0:ss kvar
Det här kompakta formatet visar den viktigaste informationen först så att den inte trunkeras i aktivitetsfältet.
Gör uppskattningarna korrekta, men ge inte falsk precision. Om den största enheten är timmar ska du ge minuter (om de är meningsfulla) men inte sekunder.
felaktig:
hh timmar, mm minuter, ss sekunder
Behåll uppskattningen up-to-date. Återstående uppskattningar för uppdateringstid minst var 5:e sekund.
Fokusera på den tid som återstår eftersom det är den information som användarna bryr sig mest om. Ge total förfluten tid endast när det finns scenarier där förfluten tid är användbar (till exempel när uppgiften sannolikt kommer att upprepas). Om den återstående uppskattningen är associerad med en förloppsindikator ska du inte ha procent fullständig text eftersom den informationen förmedlas av själva förloppsindikatorn.
Var grammatiskt korrekt. Använd singularenheter när talet är ett.
felaktig:
1 minuter, 1 sekunder
Använd versal i meningsformat.
Förloppsindikatorfärger
- Använd endast röda eller gula förloppsindikatorer för att ange status för förloppet, inte de slutliga resultaten för en aktivitet. En röd eller gul förloppsindikator anger att användarna måste vidta vissa åtgärder för att slutföra uppgiften. Om villkoret inte kan återställas lämnar du förloppsindikatorn grön och visar ett felmeddelande.
- Gör förloppsindikatorn röd när det finns ett återställningsbart villkor som förhindrar ytterligare framsteg. Visa ett meddelande för att förklara problemet och rekommendera en lösning.
- Aktivera förloppsindikatorn gult för att antingen indikera att användaren har pausat uppgiften eller att det finns ett villkor som hindrar förloppet men förloppet fortfarande pågår (till exempel med dålig nätverksanslutning). Om användaren har pausat ändrar du knappen Pausa till Återuppta. Om förloppet hindras visar du ett meddelande som förklarar problemet och rekommenderar en lösning.
Meter
- Använd endast förloppsstaplar för förlopp. Använd mätare för att ange procentandelar som inte är relaterade till förlopp.
Rekommenderad storlek och avstånd
Rekommenderad storlek och avstånd för förloppsstaplar.
- Använd alltid den rekommenderade förloppsindikatorns höjd.
- Undantag: Du kan använda en annan höjd om det överordnade fönstret inte stöder den rekommenderade höjden.
- Använd den minsta bredden om du vill göra förloppsindikatorn diskret.
- Använd inte bredd längre än det högsta som rekommenderas. Förloppsindikatorn behöver inte fylla det tillgängliga utrymmet.
- Centrera förloppsindikatorn vågrätt om fönstret är mycket bredare än den maximala rekommenderade bredden.
Etiketter
Förloppsindikatoretiketter
Använd en koncis etikett med en statisk textkontroll för att ange vad åtgärden gör. Starta etiketten med ett verb (till exempel Kopiering) och avsluta med en ellips. Den här etiketten kan ändras dynamiskt om åtgärden har flera steg eller bearbetar flera objekt.
Tilldela inte en unik åtkomstnyckel eftersom kontrollen inte är interaktiv.
Använd versalisering i meningsformat.
Om åtgärden inte initierades direkt av användaren kan du inkludera ytterligare en etikett för att ge kontexten och be om ursäkt för avbrottet. Starta den här extra etiketten med frasen Vänta medan. Den här etiketten bör inte ändras under åtgärden.
I det här exemplet uppmanas användaren att vänta eftersom användaren inte initierade åtgärden direkt.
Placera etiketten ovanför förloppsindikatorn och justera etiketten mot förloppsindikatorns vänstra kant.
Information om förloppsindikator
Ange information i statisk text, före data med en etikett som slutar med ett kolon. Ange enheter (sekunder, kilobyte och så vidare) efter informationstexten.
rätt:
I det här exemplet är informationen korrekt märkt.
felaktig:
I det här exemplet är informationen inte märkt, vilket kräver att användarna bestämmer sin innebörd.
Använd versalisering i meningsformat.
Placera informationen under förloppsindikatorn och justera etiketten mot förloppsindikatorns vänstra kant.
Ange inte procentandelen slutförd eller återstående eftersom den informationen förmedlas av själva förloppsindikatorn.
Knappen Avbryt
- Märk knappen Avbryt om avbryter returnerar miljön till dess tidigare tillstånd (lämnar ingen bieffekt); Annars kan du märka knappen Stoppa för att indikera att den delvis slutförda åtgärden lämnas intakt.
- Du kan ändra knappetiketten från Avbryt till Stoppa mitt i åtgärden om det någon gång inte går att återställa miljön till dess tidigare tillstånd.
Dialogruterubriker för förlopp
Om förloppsindikatorn visas i en modal dialogruta ska dialogrutans rubrik vara namnet på programmet eller namnet på åtgärden. Använd inte vad som ska vara förloppsindikatoretiketten för dialogrutans rubrik.
rätt:
I det här exemplet används uppgiftsnamnet för dialogrutans rubrik.
felaktig:
I det här exemplet är dialogrutans rubriktext en omskrivning av förloppsindikatoretiketten. Programnamnet ska användas i stället.
Om förloppsindikatorn visas i en lägeslös dialogruta optimerar du rubriken för visning i aktivitetsfältet genom att kortfattat placera den särskiljande informationen först. Exempel: "66% slutfört."