Artikel Användbarhet

När appen är tom: beställ första vyn innan du har data

Provdata gör appen lätt att bedöma medan du bygger. Den första riktiga användaren får ingen provdata. Om en tom tabell, ett tomt kort eller en resultatlös sökning inte säger vad som händer och vad personen kan göra nu, börjar appen med en återvändsgränd.

Publicerad · Senast granskad

Abstrakt trämodell av vita och svarta block med en vågrät röd stav och en svart-röd diagonal i en öppen fyrkant.
Det tomma facket är inte en restyta: också där behöver appen visa vägen till nästa handling.

Kort sagt

Beställ varje tomt läge som en egen vy med ett budskap och en synlig nästa handling. Prova minst fyra fall: ett nytt konto utan data, en sökning utan träff, ett filter som döljer allt och listan efter att den sista posten har tagits bort. Ett vitt fält eller texten ”Inga data” räcker inte.

Provdata döljer den första riktiga uppgiften

Under bygget finns ofta tre kunder, fem projekt eller tio bokningar redan på skärmen. Då kan du bedöma rubriker, färger, sortering och knappar. Men du bedömer den fyllda appen. Den nya användaren behöver först förstå vad ytan ska innehålla och hur den första posten skapas.

Ett tomt läge är därför inte frånvaro av design. Det är en egen situation i appen. IBM:s Carbon Design System beskriver tomma lägen som tillfällen då det inte finns data att visa, bland annat vid första användningen, efter att data raderats eller när en handling ger noll resultat. Mönstret rekommenderar en kort förklaring och, när det finns ett rimligt nästa steg, en direkt länk eller knapp till det steget.

Den praktiska följden för dig som inte skriver kod är enkel: beställ inte ”ett snyggt tomt läge”. Beställ vad personen ska förstå, vilken enda handling som är viktigast och hur du ska kunna framkalla läget i ett prov.


Inventera fyra lägen som ser tomma ut av olika skäl

Börja i appens viktigaste lista, tabell eller översikt. Skriv fyra rader i ett dokument. Varje rad ska innehålla orsak, budskap och nästa handling. Om två lägen behöver olika handlingar är de inte samma läge, även om skärmen råkar vara lika tom.

1. Ny användare utan data. Budskap: ”Här visas dina projekt när du har skapat ett.” Handling: Skapa första projektet. Personen behöver en början, inte ett konstaterande om noll poster.
2. Sökning utan träff. Budskap: ”Inga projekt matchar ‘växthus’.” Handling: Rensa sökningen. Behåll sökordet i beskedet så att personen ser vad appen faktiskt sökte efter.
3. Filter som döljer allt. Budskap: ”Inga projekt matchar de valda filtren.” Handling: Rensa alla filter. Visa gärna vilka filter som är aktiva, men erbjud inte fyra likvärdiga knappar.
4. Den sista posten är borttagen. Budskap: ”Du har inga projekt kvar.” Handling: Skapa ett projekt eller gå tillbaka, beroende på vad personen sannolikt vill göra efter raderingen. Bekräftelsen på att posten togs bort ska vara separat.

Formuleringarna är exempel, inte standardtexter. Byt ”projekt” mot det ord användaren redan möter i appen. Undvik interna ord som ”databaspost”, ”objekt” och ”resurs”. Carbon rekommenderar också att hålla texten kort, stanna i den aktuella delen av appen och välja den viktigaste handlingen när flera är möjliga.

Tomt är inte samma sak som trasigt

Om appen inte kan hämta data ska den inte påstå att användaren saknar data. ”Du har inga projekt” kan vara direkt fel när servern inte svarar. Beställ ett separat felläge som säger att innehållet inte kunde hämtas och erbjuder en rimlig handling, till exempel Försök igen. Låt inte heller ett laddningshjul övergå till en tom lista utan besked.


Beställ innehåll, handling och avgränsning i samma meddelande

Modellen behöver veta både hur läget uppstår och vad som ska vara oförändrat. Annars får du lätt en allmän illustration, en knapp som inte leder någonstans eller samma text för alla fyra fallen. Kopiera beställningen och byt ut orden inom hakparenteser.

Beställning: fyra tomma lägen

I vyn [namn på sidan] visas normalt [projekt/bokningar/resultat]. Lägg till fyra tydligt skilda tomma lägen utan att ändra hur den fyllda listan fungerar:

  1. Ett nytt konto har inga poster. Visa ”[budskap]” och en synlig knapp ”[skapa första …]”.
  2. En sökning ger noll träffar. Visa sökordet i budskapet och en knapp ”Rensa sökningen”.
  3. Aktiva filter ger noll träffar. Säg att filtren orsakar det och visa en knapp ”Rensa alla filter”.
  4. Den sista posten har tagits bort. Bekräfta först borttagningen och visa sedan ”[budskap]” med knappen ”[nästa handling]”.

Om data inte kan hämtas ska ett separat felläge visas; kalla inte det ”inga data”. Använd samma ord som i sidans rubrik och knappar. Ge varje läge högst en huvudhandling. Beskriv innan du ändrar något hur jag kan framkalla och prova vart och ett av de fem lägena: de fyra tomma och hämtningsfelet.

Be modellen svara med provvägen först. Då upptäcker du om ett läge bara finns i modellens beskrivning men inte går att nå i appen. Du kan också fånga en farlig genväg: att modellen vill radera riktiga uppgifter för att skapa ett tomt konto.

Två avgränsningar som sparar omtag


Prova med ett nytt konto och en enda testpost

Använd ett testkonto, ett testprojekt eller en separat förhandsvisning. Radera inte verksamhetens riktiga data för att komma till noll. Du behöver bara en post som går att skapa och ta bort, plus ett sökfält eller ett filter om appen har det.

1
Öppna som ny användare. Skapa ett nytt testkonto eller rensa endast testprojektets provdata. Kontrollera att budskapet förklarar vad som ska visas och att huvudknappen leder direkt till skapandet.
2
Skapa en testpost. Kontrollera att det tomma läget försvinner, att posten visas och att den fyllda vyn fortfarande går att använda. Det här steget avslöjar om den nya vyn råkade ersätta mer än nollfallet.
3
Sök efter något som inte finns. Använd ett tydligt omöjligt sökord, till exempel ”zz-test-ingen-traff”. Kontrollera att ordet syns i beskedet och att ”Rensa sökningen” tar tillbaka testposten.
4
Välj ett filter utan träff. Kontrollera att appen skiljer detta från första besöket och att ”Rensa alla filter” återställer listan i en handling.
5
Ta bort testposten. Kontrollera först borttagningsbekräftelsen och därefter läget för en tom lista. Skapa sedan en ny post från knappen för att visa att vägen inte slutar där.

Skriv förväntat och faktiskt resultat på fem rader. Underkänt är inte bara ett vitt fält. Det är också fel budskap, en knapp som leder till fel sida, filter som ligger kvar efter ”Rensa” eller att testposten inte kommer tillbaka när sökningen tas bort.

Har ditt byggverktyg webbläsartestning kan du låta det köra samma steg. Lovables dokumentation för webbläsartestning säger att agenten kan klicka, fylla i formulär, byta sida, ta skärmbilder och prova olika skärmstorlekar i projektets förhandsvisning. Dokumentationen säger också att verktyget använder den inloggade appanvändaren i förhandsvisningen och att vissa interaktioner, exempelvis komplex filuppladdning och subtil visuell bedömning, är mindre tillförlitliga. Tala därför om vilket testkonto som får användas och kontrollera de viktiga resultaten själv.

Beställning: kör bara provet

Använd webbläsartestning i förhandsvisningen och prova de fem stegen ovan med testkontot. Ändra eller rätta ingenting under körningen. Rapportera för varje steg: handling, förväntat resultat, faktiskt resultat och skärmbild. Markera steget godkänt, underkänt eller inte körbart. Om något inte går att prova, säg varför i stället för att anta att det fungerar.


Klart när fyra vägar leder vidare

Arbetet är klart när du kan framkalla alla fyra tomma lägen utan att röra riktig data, läsa ett sant besked i varje läge och ta dig vidare med den synliga huvudhandlingen. Lägg de fem proven i din provlista så att nästa ändring inte återinför ett vitt fält eller blandar ihop sökning och första användning.

Det här ersätter inte ett bredare test med en annan person. När lägena fungerar tekniskt kan du ge en ny användare uppgiften ”skapa ditt första projekt” och se om orden faktiskt räcker. Artikeln om ett femminuters användartest visar hur du observerar utan att ge ledtrådar och väljer det första hindret att rätta.

Fyra frågor att spara

Varför är ytan tom? Vad skulle visas här? Vilken enda handling är viktigast nu? Hur framkallar jag läget igen utan att riskera riktig data?