Design av tomma lägen: vägled nästa steg när innehåll saknas
Ett praktiskt ramverk för att utforma lägen vid första användning, utan sökresultat, efter rensning och vid fel, med hjälpsam text, tydliga åtgärder och ett visuellt uttryck som passar sammanhanget.
En tom panel är tvetydig. Någon kanske undrar om appen laddas, om deras sökning misslyckades eller om de behöver lägga till något. Ett användbart tomt tillstånd namnger vad som händer och hjälper dem att bestämma vad de ska göra härnäst.
Börja med att identifiera orsaken till det saknade innehållet. Första användning, inga sökresultat, avsiktligt rensad data och ett systemfel kräver olika meddelanden och åtgärder. Exemplen här är hypotetiska designövningar, inte produktfallstudier eller påståenden om prestanda.
Viktigaste lärdomarna
- Klassificera varför innehållet saknas innan du väljer text, illustration eller handling.
- Håll laddning och felfeedback åtskild från ett bekräftat tomt resultat.
- Skriv en specifik rubrik, en kort förklaring vid behov och ett relevant nästa steg.
- Granska tillståndet i sitt sammanhang, inklusive tillgänglighet, smala layouter och återställningsvägar.
1. Diagnostisera varför utrymmet är tomt
Behandla ett tomt tillstånd som en rapport om produkten, inte som en dekorationsmöjlighet. Fråga vad som hände direkt innan skärmen dök upp, vad systemet vet och om personen kan förändra situationen. NN/g beskriver tomma tillstånd som möjligheter att kommunicera status, stödja lärande och ge vägar in i nyckeluppgifter. Dessa möjligheter är beroende av att först identifiera tillståndet korrekt.
I synnerhet, visa inte "Inga objekt" medan en begäran fortfarande körs. Håll en belastningsindikator eller skelett synligt tills resultatet är känt. Om begäran misslyckas, förklara fel- och återställningsalternativet. Om det lyckas med noll objekt, säg att det inte finns något matchande innehåll. Denna distinktion hindrar människor från att missta en tillfällig fördröjning eller systemproblem för ett verkligt resultat.
| Tillstånd | Vad det betyder | Användbart svar |
|---|---|---|
| Första användning | Funktionen är klar, men personen har inte lagt till eller skapat något ännu. | Förklara vad som hör hit och ge ett direkt sätt att skapa, lägga till eller utforska. |
| Inga resultat | En sökning, ett filter eller ett datumintervall slutförts utan några matchningar. | Bekräfta att kriterierna inte gav några matchningar; föreslå en relevant justering eller rensa ett filter. |
| Rensade data | Personen slutförde eller tog bort objekten som vanligtvis visas här. | Erkänn slutförandet eller det tomma resultatet utan att antyda att något är fel; erbjuda en annan uppgift om det är användbart. |
| Fel | Systemet kunde inte hämta eller visa det förväntade innehållet. | Ange vad som misslyckades i klartext och erbjuda en återställningsåtgärd som att försöka igen. |
| Laddar | Systemet har ännu inte fastställt om innehållet finns. | Visa framsteg eller en laddningsbehandling; meddela inte ett tomt resultat i förtid. |
2. Skriv en text som matchar orsaken
Använd en rubrik för att beskriva tillståndet och stödjande text för att förklara vad det betyder eller hur man går tillväga. Håll rubriken lätt att överblicka. Lägg bara till en mening när den svarar på en verklig fråga. Apples skrivvägledning rekommenderar tydliga nästa steg på tomma skärmar, handlingsinriktade etiketter och direkta felmeddelanden som förklarar hur man åtgärdar problemet. Undvik finurligheter som döljer mening, vaga rubriker som "Ingenting här" eller text som skyller på personen.
Till exempel kan en hypotetisk skärm med sparade objekt vid första användning säga "Dina sparade guider visas här" följt av "Spara en guide för att återvända till den senare" med knappen "Bläddra i guider". En ifylld checklista kan säga "Ni är alla ikapp" och erbjuda "Visa slutförda uppgifter." Dessa exempel beskriver olika verkligheter: man lär ut hur man fyller i en funktion; den andra bekräftar ett framgångsrikt resultat.
För en framgångsrik sökning utan matchningar kan ett hypotetiskt meddelande läsa "Inga projekt matchar "orkidé" och föreslå "Pröva en bredare term eller rensa filter." Bevara frågan och gör filterändringar reversibla där det är möjligt. För ett nätverksfel, skriv "Projekten kunde inte laddas" med "Försök igen." Undvik att hävda att det inte finns några projekt när systemet inte har kunnat kontrollera.
- Namnge det relevanta objektet eller de relevanta kriterierna så att meddelandet blir vettigt ur sitt sammanhang.
- Använd ett verb på knappen, till exempel "Skapa projekt", "Rensa filter" eller "Försök igen."
- Håll instruktionerna bredvid det berörda innehållet och använd text samt färg eller bilder.
- Undvik "Hoppsan", skyller och tekniska koder om inte folk behöver dem för att lösa problemet.
3. Gör nästa steg användbart, inte automatiskt
Ge en handling när någon rimligen kan ändra situationen eller fortsätta sin uppgift. Första användning drar ofta nytta av en skapa eller lägga till åtgärd; inga resultat kan gynnas av att rensa en begränsning; ett fel kan erbjuda ett nytt försök. En tömd inkorg eller avslutat träningspass behöver kanske ingen åtgärd alls. Tvinga inte in en knapp i varje läge bara för att panelen ska se interaktiv ut.
Håll återhämtningen proportionell. En misslyckad uppdatering kräver vanligtvis en inline-förklaring och försök igen, inte en blockerande varning. Apple rekommenderar att du matchar feedbacken med informationens betydelse och reserverar varningar för kritiska, handlingsbara situationer. För sökning, bevara personens arbete och erbjuda vettiga justeringar istället för att tyst ändra frågan. Materialdesign föreslår också nybörjarinnehåll, kortfattat utbildningsinnehåll eller tydligt märkta bästa matchningar som alternativ när de verkligen hjälper.
Använd endast illustration om den lägger till sammanhang, värme eller igenkänning. Det ska inte konkurrera med budskapet eller få folk att tro att en dekorativ bild är interaktiv. En enkel ikon kan räcka för ett kompakt filterresultat; en arbetsyta för första användning skulle kunna dra nytta av ett litet exempel på vilken typ av innehåll den kommer att innehålla. Om startinnehåll ingår, gör det enkelt att identifiera och ta bort.
- Välj en primär åtgärd som direkt åtgärdar orsaken.
- Lägg bara till en sekundär hjälpväg när den svarar på en trolig följdfråga.
- Använd ett tyst meddelande när det tomma resultatet är goda nyheter.
- Se till att en åtgärd förblir begriplig för användare av tangentbord och skärmläsare.
4. Granska hela tillståndet, inte bara illustrationen
Inspektera tillståndet i själva behållaren: en helskärmsvy för första användning, ett litet sidofält och en filtrerad tabell har olika utrymmes- och hierarkibehov. Håll meddelandet nära det område som det beskriver. Se till att den förblir läsbar när text förstoras eller slås om, och gör den primära åtgärden lätt att hitta utan att behöva färgigenkänning. Testövergångar också: laddning till tom, laddning till fel, försök igen för att lyckas och ett filterbyte tillbaka till resultat.
En praktisk biblioteksgranskning börjar med en trigger och en förväntad återhämtning. För varje mönster, registrera tillstånd, rubrik, valfri förklaring, primär åtgärd, sekundär rutt och vad som händer efter valet. Jämför skärmdumpar för användbar struktur och visuell hierarki, kontrollera sedan produktens beteende i sitt sammanhang; en statisk bild kan inte berätta om ett fel är återställbart eller om ett resultat verkligen är tomt. Bläddra i ScreenKits UI-biblioteket för visuella referenser och utforska alla kategorier för att hitta intilliggande mönster.
- Kan en person se om innehållet är frånvarande, fortfarande laddas eller inte är tillgängligt på grund av ett fel?
- Återspeglar meddelandet aktuell fråga, filter, konto eller slutförd uppgift?
- Bevarar åtgärden användbar input och leder till ett synligt resultat?
- Fungerar tillståndet i små storlekar, med längre lokaliserad text och med hjälpmedel?
- Kan någon återhämta sig från ett fel eller hitta ett sätt att justera en misslyckad sökning?
Vanliga frågor
Bör ett tomt tillstånd alltid innehålla en uppmaning?
Nej. Inkludera en åtgärd när den hjälper personen att lägga till innehåll, justera en sökning eller återhämta sig från ett problem. En avslutad uppgift eller naturligt tom vy behöver kanske bara en kort bekräftelse.
Är en skärm utan resultat ett feltillstånd?
Vanligtvis inte. Om sökningen eller filtreringen slutfördes framgångsrikt, rapportera att det inte fanns några matchningar och ge en användbar justering. Reservera felspråk för ett systemfel som hindrade resultatet från att fastställas eller visas.
Vad ska visas när resultaten laddas?
Använd en laddningsbehandling eller framstegsfeedback tills begäran är klar. Visa ett tomt resultat först efter att systemet har bekräftat att det lyckade svaret inte innehåller några matchande objekt.
