Hantera fel

Fel kan uppstå av olika anledningar. Det kan till exempel vara inmatningsfel, fel vid inskickning av ett formulär eller systemfel.

Inmatningsfel

Inmatningsfel uppstår när användarens inmatning inte förstås av systemet och det krävs en korrekt inmatning för att användaren ska kunna komma vidare.

Inmatningsfel kan uppstå både i obligatoriska fält och i fält som inte är obligatoriska.

När ska felmeddelanden visas?

Visa felmeddelanden efter att användaren har matat in felaktiga uppgifter och lämnat fältet. Var inte för snabb med att varna om att inmatningen är fel, utan låt användaren avsluta sin inmatning innan valideringen sker.

När ska felmeddelanden inte visas?

Avstå från att visa felmeddelanden om användaren bara tabbar sig igenom ett eller flera fält eller ångrar en inmatning utan att lämna fältet.

Här hittar du styleguides inmatningsfält.

Inskickning av formulär

Om det finns inmatningsfel eller obligatoriska frågor som saknar svar när en användare försöker "Skicka in" ett formulär så ska felen summeras längst upp på sidan. Tillåt användaren att navigera till felen via felsummeringen så att det blir enkelt för användaren att åtgärda felen.

<div class="c-error-summary">
  <div class="c-error-summary__content" role="alert">
    <div class="c-error-summary__title">
      <span class="sjv-i-fel"></span>Något har gått fel
    </div>
    <ol class="c-error-summary__list">
       <li><a href="#"> Fyll i personnumret. </a></li>
       <li><a href="#"> Fyll i postnumret. </a></li>
       <li><a href="#"> Du är inte registrerad som ägare till hunden. </a></li>
    </ol>
  </div>
</div>

Komponent: Felsummering.

Systemfel

Systemfel ska visas när ett system har fallerat eller inte fungerar som det ska under en viss period.

När flera användare behöver informeras samtidigt är det enklast att använda sig av en "Banner" längst upp på sidan som fångar användarens uppmärksamhet.

Varningsmeddelande

<div class="c-banner c-banner--warning" role="alert">
    <div class="c-banner__content ">
        <span class="c-banner-icon sjv-i-varning" tabindex="-1"></span>
        <div class="c-banner__text">
            <p><b>SAM Internet är stängt den 19 mars.</b> Vi uppdaterar SAM Internet den 19 mars mellan klockan 
               8 och 12. Under den perioden kan du inte använda SAM Internet. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink">Läs om SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

Krismeddelande

<div class="c-banner c-banner--error" role="alert">
    <div class="c-banner__content">
        <span class="c-banner-icon sjv-i-fel" tabindex="-1"></span>
        <div class="c-banner__text">
            <p><b>SAM Internet är stängt.</b> Vi håller på att uppdatera SAM Internet. Du kan därför 
               inte använda tjänsten. Vi räknar med att öppna igen den 20 mars klockan 8.00. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink">Läs om SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

Positivt meddelande

<div class="c-banner c-banner--success" role="banner">
    <div class="c-banner__content">
        <span class="c-banner-icon sjv-i-framgang" tabindex="-1"></span>
        <div class="c-banner__text">
            <p><b>SAM Internet har öppnat.</b> Nu är SAM Internet öppen och du kan använda tjänsten. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink">SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide