Dela via


Ballonger

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.

En ballong är ett litet popup-fönster som informerar användarna om ett icke-kritiskt problem eller särskilda villkor i en kontroll.

Skärmbild som visar en pratbubblan som anger att Caps Lock är aktiverat.

En typisk ballong.

Ballonger har en ikon, en rubrik och brödtext, som alla är valfria. Till skillnad från knappbeskrivningar och informationstips har ballonger också en svans som identifierar källan. Vanligtvis är källan en kontroll i så fall kallas den ägarkontroll.

Ballonger informerar användarna om icke-kritiska problem, men de förhindrar inte problem även om ägarkontrollen kan göra det. Eventuella ohanterade problem måste hanteras av användargränssnittet (UI) för ägare när användarna försöker checka in åtgärden.

Pratbubblor används vanligtvis med textrutor eller kontroller som använder textrutor för att ändra värden, till exempel kombinationsrutor, listvyer och trädvyer. Andra typer av kontroller är tillräckligt väl begränsade och behöver inte de ytterligare feedbackballongerna. Om det finns problem med andra typer av kontroller innebär det ofta inkonsekvens mellan flera kontroller, en situation där ballonger inte är lämpliga. Endast textinmatningskontroller är både obehindrade och en vanlig källa till enpunktsfel.

Ett meddelande är en specifik typ av pratbubblan som visas av en meddelandeområde ikon.

Obs! riktlinjer som rör meddelanden, knappbeskrivningar och informationstipsoch felmeddelanden visas i separata artiklar.

Är det här rätt kontroll?

Du kan ta ställning till följande frågor:

  • Beskriver informationen ett problem eller ett särskilt villkor? Om inte använder du en annan kontroll. Använd inte ballonger för att visa kompletterande information för en kontroll. överväg att använda statisk text,infotips, progressivt avslöjandeeller uppmaningar i stället.
  • Kan problemet eller särskilda villkor identifieras omedelbart antingen vid indata eller när ägarkontrollen förlorar indatafokus? Om inte använder du ett felmeddelande som visas i en aktivitetsdialogruta eller meddelanderutan.
  • Är problemet kritiskt för problem? I så fall använder du ett felmeddelande som visas i en aktivitetsdialogruta eller meddelanderuta. Sådana felmeddelanden kräver interaktion (vilket är lämpligt för kritiska fel), medan ballonger inte gör det.
  • För särskilda villkor, är villkoret giltigt men sannolikt oavsiktligt? I så fall är ballonger lämpliga. För villkor som inte är giltiga är det bättre att förhindra dem från början. För sannolikt avsedda förhållanden behöver du inte göra något.
  • Kan problemet eller det särskilda villkoret uttryckas kortfattat? Om inte använder du en annan kontroll. Ballonger kan inte ha detaljerade förklaringar eller tillhandahålla kompletterande information.
  • Beskriver informationen den kontroll som för närvarande hovrades över? I så fall använder du ett tips i stället, såvida inte användarna kan behöva interagera med meddelandet.
  • Är informationen relaterad till användarens aktuella aktivitet? Om inte kan du använda en meddelande eller dialogruta i stället. Användare kommer sannolikt att förbise ballonger utanför den aktuella aktiviteten och som standard överskrider ballongerna tidsgränsen efter 10 sekunder.
  • Kommer informationen från en enda, specifik källa? Om ett problem eller villkor har flera källor eller ingen specifik källa använder du ett meddelande på plats eller en dialogruta i stället.

Felaktig:skärmbild av en ballong: misslyckade inloggningar

I det här exemplet kan problemet bero på användarnamnet eller lösenordet, men att rapportera problemet med en pratbubblan tyder på att endast lösenordet är problemet. Därför är feedbacken från att ange ett felaktigt användarnamn missvisande.

Ballonger är ett alternativ till informationstips, dialogrutor och meddelanden på plats. Till skillnad från knappbeskrivningar och informationstips:

  • Ballonger kan visas oberoende av den aktuella pekarplatsen, så de har en svans som anger källan.
  • Ballonger har en rubrik, brödtext och en ikon.
  • Ballonger kan vara interaktiva, medan det är omöjligt att klicka på ett tips.

Till skillnad från modala dialogrutor:

  • Ballonger stjäl inte indatafokus eller kräver interaktion.
  • Ballonger identifierar en enda, specifik källa. Modal dialogrutor kan ha flera källor, eller ingen specifik källa alls.

Till skillnad från meddelanden på plats:

  • Ballonger är mer märkbara.
  • Ballonger kräver inte tillgängligt skärmutrymme eller den dynamiska layout som krävs för att visa meddelanden på plats.
  • Ballonger tar bort sig själva automatiskt efter en timeout.

Användningsmönster

Ballonger har följande användningsmönster:

Användning Exempel
indataproblem Ett icke-kritiskt användarindataproblem som kommer från en enskild ägarkontroll, vanligtvis en textruta.
att använda ballonger för felmeddelanden stjäl inte indatafokus, men är fortfarande mycket märkbar om ägarkontrollen har indatafokus. för att åtgärda problemet kan användaren behöva ändra eller ange indata igen. men om ägarkontrollen ignorerar felaktiga indata kanske användaren inte behöver göra några ändringar alls. eftersom problemet inte är kritiskt krävs ingen felikon.
Skärmbild som visar en pratbubblan som anger ett felaktigt tecken.
En pratbubblan som används för att rapportera ett icke-kritiskt användarindataproblem.
Särskilda villkor Ägarkontrollen är i ett tillstånd som påverkar indata. Det här tillståndet är sannolikt oavsiktligt och användaren kanske inte inser att indata påverkas.
använd ballonger för att förhindra frustration genom att varna användare om särskilda villkor så snart de inträffar (till exempel överskrider den maximala indatastorleken eller anger caps lock på av misstag). Det är viktigt att ge sådan feedback utan att stjäla indatafokus eller tvinga interaktion eftersom dessa villkor kan vara avsiktliga. Dessa ballonger är särskilt viktiga för lösenords- och pin-rutor, där användarna annars arbetar med minimal feedback. dessa ballonger har en varningsikon.
Skärmbild som visar ballonger som anger att Caps Lock är aktiverat och ett felaktigt tecken har angetts.
En ballong som används för att rapportera ett särskilt villkor.

riktlinjer

När ska visas

  • Visa ballongen så snart problemet eller specialtillståndet har identifierats, även om det upprepas, utan någon märkbar fördröjning.
    • Om du har problem med enskilda tecken eller den maximala indatastorleken visar du ballongen omedelbart vid indata.
    • För problem med indatavärdet (inklusive att kräva ett värde som inte är tomt) visar du ballongen när ägarkontrollen förlorar indatafokus. Annars kan det vara störande och irriterande att visa ballonger medan användare anger potentiellt giltiga indata.
  • Visa bara en pratbubblan i taget. Det kan vara överväldigande att visa flera ballonger. Om en enskild händelse resulterar i flera problem kan du antingen presentera alla problem samtidigt eller bara rapportera det viktigaste problemet.

Felaktig:skärmbild av två ballonger som pekar på en ruta

I det här exemplet visas två problem felaktigt samtidigt.

Hur länge ska visas

  • Ta bort en ballong när:
    • Problemet är löst eller så tas specialvillkoret bort.
    • Användaren anger giltiga data (för indataproblem).
    • Ballongen överskrider tidsgränsen. Som standard tar ballonger bort sig själva efter 10 sekunder, även om användarna kan ändra detta genom att ändra SPI_MESSAGEDURATION-systemparametern.
  • Ta bort tidsgränsen om användarna inte kan fortsätta förrän problemet har lösts. Utvecklare: I Win32 kan du ange visningstiden med meddelandet TTM_SETDELAYTIME.

Så här visar du

  • Visa ballonger under ägarkontrollen. På så sätt kan användarna visa kontexten, inklusive ägarkontrollen och dess etikett. Microsoft Windows justerar automatiskt ballongpositioner så att de är helt på skärmen. Standardbeteendet är att visa en pratbubblan ovanför ägarkontrollen, vilket görs med meddelanden.

Rätt:skärmbild av en ballong som visas under dess kontroll

Felaktig:skärmbild av en ballong som visas ovanför dess kontroll

I det felaktiga exemplet visas ballongen på ett obekvämt sätt ovanför ägarkontrollen.

textrutor för lösenord och PIN-kod

  • Använd en pratbubblan för att ange att Caps Lock är på, med hjälp av texten i följande exempel:

skärmdump av en ballong som indikerar att caps lock är på

I det här exemplet anger en pratbubblan att Caps Lock är aktiverat i en PIN-textruta.

  • Använd en pratbubblan för att ange när användare försöker överskrida den maximala indatastorleken. Att nå den maximala indatastorleken är mycket mindre uppenbart i lösenords- och PIN-kodstextrutor än vanliga textrutor.

skärmbild av en ballong som anger pin-kodgränser

I det här exemplet anger en pratbubblan att användaren försöker överskrida den maximala indatastorleken.

  • Använd en pratbubblan för att ange när användare anger felaktiga tecken. Det är dock bättre att inte ha sådana begränsningar eftersom de minskar säkerheten för lösenordet eller PIN-koden. För att förhindra att information avslöjas bör pratbubblan endast nämna dokumenterade fakta om giltiga lösenord eller PIN-koder.

skärmbild av en ballong som anger felaktiga indata

I det här exemplet anger en pratbubblan att PIN-koden kräver siffror.

Andra textrutor

  • Överväg att använda en pratbubblan för att ange när användare försöker överskrida den maximala indatastorleken för kritiska, korta textrutor som riktar sig till nybörjare. Exempel är användarnamn och kontonamn. Textrutorna pipar när användarna försöker överskrida den maximala inmatningen, men nybörjare kanske inte förstår innebörden av pipet.

skärmbild av en ballong som anger teckengränser

I det här exemplet anger en pratbubblan att användaren försökte överskrida den maximala indatastorleken.

Interaktion

  • När användarna klickar på en pratbubblan kan du bara stänga ballongen utan att visa något annat användargränssnitt eller ha någon annan bieffekt. Till skillnad från meddelanden bör ballonger inte ha stängningsknappar.

ikoner

  • Välj ikonen baserat på användningsmönstret:

    Mönster Ikon
    Indataproblem Ingen ikon. Att inte använda en felikon här överensstämmer med riktlinjerna för Windows-tonen.
    Särskilt villkor Standardikonen på 16 x 16 bildpunkter varning.

Hjälpmedel

När ballonger används på rätt sätt förbättrar de tillgängligheten. För att ballonger ska vara tillgängliga:

  • Visa endast ballonger som är relaterade till användarens aktuella aktivitet.
  • Behåll pratbubblans text koncis. Det gör det enklare att läsa ballongtexten för användare med nedsatt syn och minimerar avbrottet när skärmläsare läser den.
  • Spela upp ballongen igen när problemet eller villkoret uppstår igen.

Text

Rubriktext

  • Använd rubriktext som kort sammanfattar indataproblemet eller specialvillkoret på ett tydligt, enkelt, koncist och specifikt språk. Användarna bör kunna förstå syftet med ballongen snabbt och med minimal ansträngning.
  • Använd textfragment eller fullständiga meningar utan att avsluta skiljetecken.
  • Använd versalisering i meningsformat. Mer information finns i ordlista.
  • Använd högst 48 tecken (på engelska) för att hantera lokalisering. Rubriken har en maximal längd på 63 tecken och måste kunna expandera med minst 30 procent för att rymma lokalisering.

Brödtext

  • Använd den första meningen i brödtexten för att ange problemet eller villkoret på ett sätt som är tydligt relevant för användaren. Upprepa inte informationen i rubriken. Utelämna detta om det inte finns något mer att lägga till.
  • Använd den andra meningen för att ange vad användaren kan göra för att lösa problemet eller återställa tillståndet. I enlighet med riktlinjerna för format och ton behöver du inte använda ordet Please i den här instruktionen. Placera två radbrytningar mellan den första och andra meningen.

skärmdump av en ballong med rubrik och brödtext

I det här exemplet visas standardlayouten för pratbubblan.

  • Förklara hur du löser problemet eller återställer tillståndet även om förklaringen är uppenbar, men utelämnar redundans mellan problembeskrivningen och dess lösning. undantag:
    • Utelämna lösningen om den inte kan uttryckas kortfattat eller utan betydande redundans.
    • Utelämna lösningen om det inte finns något för användaren att göra, till exempel när felaktiga tecken ignoreras.
  • Använd fullständiga meningar med avslutande skiljetecken.
  • Använd versal i meningsformat.
  • Använd högst 200 tecken (på engelska) för att hantera lokalisering. Brödtexten har en maximal längd på 255 tecken och måste kunna expandera med minst 30 procent för att rymma lokalisering.

dokumentation

När du refererar till ballonger:

  • Använd den exakta rubriktexten, inklusive dess versaler.
  • Referera till komponenten som en pratbubblan, inte som ett meddelande eller en avisering.
  • Formatera rubriktexten med fet text när det är möjligt. Annars placerar du endast rubriken inom citattecken om det behövs för att förhindra förvirring.