Princip 1: Hierarki styr handling
Varje skärm bör ha en primär åtgärd. Allt annat är sekundärt.
I praktiken: - En primär CTA-knapp per skärm (fylld, varumärkesfärg, full bredd på mobil) - Sekundära åtgärder använder outlined- eller ghost-knappar — visuellt underordnade - Destruktiva åtgärder (radera, avbryt) är röda och placerade borta från primära CTA:er
Vanligt misstag: att ge "Spara" och "Avbryt" samma visuella tyngd. Användarens öga vet inte vart det ska gå. Gör "Spara" primär, "Avbryt" en textlänk.
I WeWeb: tillämpa dina designtokens konsekvent. Primär knapp = varumärkesfärg fylld. Sekundär knapp = transparent fyllning + varumärkesfärgkant. Tertiär = text endast. Avvik aldrig.
Princip 2: Friktionsfri onboarding
De första 5 minuterna efter registrering avgör om en användare aktiveras. Varje steg som inte är nödvändigt är friktion.
Optimalt onboardingflöde: 1. Bara e-post + lösenord vid registrering (inget telefonnummer, inget namn ännu) 2. En-skärms setup-guide: max 3 frågor, framstegsindikator synlig 3. Landar på en förifylld dashboard — inte ett tomt tillstånd 4. Första "vinsten" inom 60 sekunder: något användaren kan se, klicka eller göra
I FlutterFlow: använd ett villkor vid appstart. Om onboarding_complete = false, navigera till onboardingflödet. Sätt onboarding_complete = true i Supabase när de slutfört steg 3.
Tomma tillstånd är konverteringsdödare. Förifyll med exempeldata eller ett exempel så användaren ser värde innan de angett riktig data.
Princip 3: Copy är design
Orden på ditt gränssnitt är lika viktiga som layouten. Dålig copy kostar konverteringar även på en vacker design.
Högt effekt copy-förändringar: - Knappcopy: aktionsverb + resultat. "Spara" → "Spara ändringar". "Skicka" → "Skapa mitt konto". "Kom igång" → "Börja gratis provperiod". - Felmeddelanden: specifika och hjälpsamma. "Ogiltig e-post" → "Kontrollera e-postformatet — det ska se ut som namn@foretag.se". - Tomma tillstånd: berätta för användaren vad de ska göra, inte vad som saknas. "Inga projekt ännu" → "Skapa ditt första projekt — det tar 2 minuter". - Verktygstips: förklara varför, inte vad. "Klicka för att exportera" → "Exportera som CSV för Excel eller Google Kalkylark".
Princip 4: Förtroendesignaler i appen
Förtroendbyggande slutar inte vid landningssidan. Inne i appen behöver användare trygghet om att deras data är säker.
Förtroendesignaler i no-code-appar: - Autosave-indikator: "Alla ändringar sparade" i toppfältet — användare ska inte behöva oroa sig för att förlora arbete - Säkerhetsmärken på känsliga skärmar (betalning, personlig data): "256-bitars SSL-kryptering" - Datatillskrivning: visa var data kommer från ("Synkroniserat från Salesforce — uppdaterat för 3 min sedan") - Transparent fakturering: in-app användningsmätare som visar plangränser innan användaren når dem
För svenska användare: lägg till en synlig länk till din integritetspolicy och dataskyddsinformation enligt GDPR. Det signalerar seriositet och är ett krav enligt lag.
I WeWeb: implementera en autosave-indikator med en WeWeb-variabel (saveStatus: "sparar" | "sparat" | "fel").
Princip 5: Mobil är en förstklassig skärm
För B2C-appar och mobil-first SaaS sker 60–80 % av användningen på mobil. För interna verktyg och B2B SaaS är det fortfarande 30–40 % — högre än de flesta team antar.
Mobilspecifika designregler: - Tappytor minimum 48×48px (tummar är inte muspekare) - Bottennavigation för primär appnavigation (tumzonen) - Undvik hover-tillstånd som det enda sättet att avslöja information - Formulär: använd rätt tangentbordstyp (e-post input type="email", telefon type="tel") - Tabeller: försök inte få datatabeller att fungera på mobil — konvertera dem till kortlistor istället
I FlutterFlow: bygg din mobilayout först vid 375px bredd, adaptera sedan för tablet och webb. FlutterFlows responsiva widget-träd gör detta enkelt om du börjar mobil-first.