Formularz(ang. Form)

Formularz zbudowany jest z powiązanych ze sobą pól służących do wprowadzania i edytowania danych. Pola te mogą także wchodzić w skład innych komponentów.

Formularz może składać się z:

– Pola tekstowego i obszaru tekstowego (ang. Text field and Text area)
– Checkboxów i radio buttonów (ang. Checkboxes and Radio buttons)
– Listy rozwijanej (ang. Dropdown / Select)
– Wyszukiwarki (ang. Search)
– Kalendarza (ang. Date picker)

Elementy formularza podlegają walidacji.

Zasady stosowania

Projektowanie formularzy tylko pozornie jest prostym zadaniem. Aby formularz był jak najbardziej użyteczny, należy stosować się do kilku podstawowych zasad.

Krótki formularz

Formularz powinien być zbudowany z najmniejszej możliwej liczby pól. Jeśli jakieś pytanie nie jest obowiązkowe, należy rozważyć jego usunięcie.

Długi formularz podzielony na kroki

Jeśli konieczne jest zadanie wielu pytań użytkownikowi, należy podzielić formularz na kilka kroków. Każdy krok powinien koncentrować się na jednym wątku, np. podaniu adresu.

Precyzyjne pytania

Każde pole powinno być opisane w jednoznaczny sposób. Przykładowo, należy doprecyzować, jaki adres ma podać użytkownik. Czy jest to adres zamieszkania czy zameldowania?

Niedopasowane pytania

Jeśli część pytań dotyczy tylko pewnej grupy użytkowników, nie należy zadawać ich pozostałym osobom.

Pole tekstowe i obszar tekstowy(ang. Text field and Text area)

Służą do wprowadzania tekstu i jego edycji. Obszar tekstowy różni się od pola tekstowego tym, że pozwala na wprowadzenie większej ilości tekstu.

This is error message 
<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-col--4">
    <section class="section__input">
      <label class="input__label" htmlFor="input-1">Label text</label>
      <input id="input-1" type="text" placeholder="lorem ipsum" />
    </section>
  </div>
  <div class="grid__col m-col--12 t-col--6 d-col--4">
    <section class="section__input">
      <label class="input__label" htmlFor="input-2">Label text</label>
      <input disabled id="input-2" type="text" placeholder="lorem ipsum" />
    </section>
  </div>
  <div class="grid__col m-col--12 t-col--6 d-col--4">
    <section class="section__input">
      <label class="input__label" htmlFor="input-3">Label text</label>
      <input
        class="input__has-error"
        id="input-3"
        type="text"
        placeholder="lorem ipsum"
      />
      <span class="input__error">
        <i aria-hidden="true" class="mdi icon mdi-alert-outline"></i>
        This is error message
      </span>
    </section>
  </div>
</div>

Struktura

  1. Nagłówek

    Wyjaśnia, jakie dane powinien wprowadzić użytkownik. Rekomendowany limit tekstu to 1 linijka na wszystkich rozdzielczościach. Nagłówek znajduje się nad polem edycji.

  2. Pole edycji

    Pole edycji w przypadku pola tekstowego jest niższe niż w przypadku obszaru tekstowego. Obszar tekstowy powinien mieć ustaloną minimalną wysokość tak, aby jasne było, że należy wprowadzić do niego większą ilość tekstu. Po wprowadzeniu dużej liczby znaków może dodatkowo pojawić się funkcja scrollowania.

    1. Kontener

      Oddziela pole od reszty interfejsu.

    2. Tekst zastępczy (opcjonalny)

      Znajduje się w środku kontenera. Wyjaśnia dodatkowo użytkownikowi charakter lub format danych, które powinien wprowadzić. Po wprowadzeniu minimum jednego znaku, tekst zastępczy znika. Tekst zastępczy nie powinien zawierać kluczowych informacji, bez których użytkownik nie mógłby poprawnie odpowiedzieć na pytanie. Jeśli konieczne jest umieszczenie takich informacji, należy skorzystać z tekstu pomocniczego.

Elementem interaktywnym jest pole edycji.

Warianty

W przypadku pola tekstowego, poza wariantem podstawowym, wyróżniamy dodatkowo pole przeznaczone na wpisywanie hasła. Wprowadzane do niego znaki są widoczne jako gwiazdki (*).

Hasło powinno zawierać przynajmniej 8 znaków 

<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-ind--2 d-col--8">
    <section class="section__input">
      <label class="input__label" for="input-13">Nowe hasło</label>
      <input id="input-13" type="password" placeholder="" />
      <span class="note-text input__hint-text">
        Hasło powinno zawierać przynajmniej 8 znaków
      </span>
    </section>
  </div>
</div>

Zasady stosowania

lorem ipsum

Widoczny kursor

Po kliknięciu w pole edycji powinien pojawić się kursor wskazujący na aktualne miejsce wprowadzania danych.

lorem ipsum

Nagłówek umieszczony nad polem edycji

lorem ipsum

Hasło widoczne jako gwiazdki

lorem ipsum

Brak nagłówka

lorem ipsum

Zbyt długi nagłówek

Rekomendowana długość nagłówka to 1 linijka tekstu na wszystkich rozdzielczościach.

lorem ipsum

Ucięty nagłówek

Nie należy stosować wykropkowania w nagłówku.

lorem ipsum

Znikające ważne informacje

Tekst zastępczy nie powinien zawierać kluczowych informacji. Takie informacje mogą być umieszczone w tekście pomocniczym.

Checkboxy i radio buttony (ang. Checkboxes and Radio buttons)

Mogą występować pojedynczo lub w grupie (lista). Pozwalają użytkownikowi na dokonanie wyboru. W przypadku checkboxów, użytkownik może wybrać kilka opcji jednocześnie, nie wybrać żadnej z nich lub wybrać je wszystkie. Radio buttony wymuszają wybór jednej z dostępnych opcji.


<ul class="checkbox__list">
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-1">
        <input type="checkbox" name="list" id="checkboxList-1" />
        <span tabindex="0" class="pseudocheckbox">
          <!-- <i aria-hidden="true" class="mdi icon icon--small mdi-check"></i> -->
        </span>
        <span class="label_container">
          Item 1
        </span>
      </label>
    </section>
  </li>
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-2">
        <input type="checkbox" name="list" id="checkboxList-2" />
        <span tabindex="0" class="pseudocheckbox">
        </span>
        <span class="label_container">Item 2</span>
      </label>
    </section>
  </li>
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-3">
        <input type="checkbox" disabled name="list" id="checkboxList-3" />
        <span tabindex="0" class="pseudocheckbox">
        </span>
        <span class="label_container">Item 3</span>
      </label>
    </section>
  </li>
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-3">
        <input
          type="checkbox"
          checked
          disabled
          name="list"
          id="checkboxList-3"
        />
        <span tabindex="0" class="pseudocheckbox">
        </span>
        <span class="label_container">Item 4</span>
      </label>
    </section>
  </li>
</ul>

Struktura

  1. Nagłówek listy opcjonalny

    Wyjaśnia, na jakie pytanie powinien odpowiedzieć użytkownik. Stosowanie nagłówków jest szczególnie istotne w  przypadku listy powiązanych ze sobą checkboxów/ radio buttonów. Nagłówek znajduje się nad checkiem/ radio i etykietą.

  2. Check / radio

    Element interaktywny. Pozwala na zaznaczanie i w przypadku checkboxów na odznaczanie opcji.

  3. Etykieta obowiązkowa z wyjątkiem checkboxów / radio buttonów w tabelach

    Znajduje się zawsze po prawej stronie od checku / radio. Zawiera opis opcji. Powinna być możliwie jak najkrótsza i zwięzła.

Klikalnymi elementami są check/ radio i etykieta.


<ul class="checkbox__list--horizontal">
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-5">
        <input type="checkbox" name="list" id="checkboxList-5" />
        <span tabindex="0" class="pseudocheckbox"></span>
        <span class="label_container">
          Item 1
        </span>
      </label>
    </section>
  </li>
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-6">
        <input type="checkbox" name="list" id="checkboxList-6" />
        <span tabindex="0" class="pseudocheckbox"></span>
        <span class="label_container">Item 2</span>
      </label>
    </section>
  </li>
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-7">
        <input type="checkbox" disabled name="list" id="checkboxList-7" />
        <span tabindex="0" class="pseudocheckbox"></span>
        <span class="label_container">Item 3</span>
      </label>
    </section>
  </li>
  <li class="checkbox__list-item">
    <section class="section__input input--checkbox">
      <label class="input__label--checkbox" htmlFor="checkboxList-8">
        <input
          type="checkbox"
          checked
          disabled
          name="list"
          id="checkboxList-8"
        />
        <span tabindex="0" class="pseudocheckbox"></span>
        <span class="label_container">Item 4</span>
      </label>
    </section>
  </li>
</ul>



<ul class="radio__list">
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio_1">
      <input name="radio-group-1" type="radio" id="radio_1" />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 1</span>
    </label>
  </li>
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio_2">
      <input name="radio-group-1" type="radio" id="radio_2" />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 2</span>
    </label>
  </li>
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio_3">
      <input disabled name="radio-group-disabled" type="radio" id="radio_3" />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 3</span>
    </label>
  </li>
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio_4">
      <input
        disabled
        checked
        name="radio-group-disabled"
        type="radio"
        id="radio_4"
      />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 4</span>
    </label>
  </li>
</ul>



<ul class="radio__list--horizontal">
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio-horizontal_1">
      <input name="radio-group-2" type="radio" id="radio-horizontal_1" />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 1</span>
    </label>
  </li>
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio-horizontal_2">
      <input name="radio-group-2" type="radio" id="radio-horizontal_2" />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 2</span>
    </label>
  </li>
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio-horizontal_3">
      <input
        disabled
        name="radio-group-2-disabled"
        type="radio"
        id="radio-horizontal_3"
      />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 3</span>
    </label>
  </li>
  <li class="section__input input--radio">
    <label class="input__label--radio" htmlFor="radio-horizontal_4">
      <input
        disabled
        checked
        name="radio-group-2-disabled"
        type="radio"
        id="radio-horizontal_4"
      />
      <span class="pseudocheckbox radio"></span>
      <span class="label_container">Item 4</span>
    </label>
  </li>
</ul>

Zasady stosowania

lorem ipsum

Niezależne checkboxy

Zaznaczenie jednego checkboxu wchodzącego w skład grupy nie powoduje zaznaczenia ani odznaczenia pozostałych (z wyjątkiem checkboxów znajdujących się w relacji podrzędności-nadrzędności).

lorem ipsum

Zależne radio buttony

Zaznaczenie jednego radio buttona powoduje odznaczenie innych radio buttonów z grupy.

lorem ipsum

Duży obszar klikalny

Klikalny powinien być nie tylko check/ radio, ale także etykieta.

lorem ipsum

Radio button nie wywołujący natychmiastowej zmiany

Samo zaznaczenie radio buttonu nie powinno wywoływać żadnej akcji. Radio buttony powinny być częścią większego formularza, w którym wymagane jest dalsze zatwierdzenie wyboru.

Nieprawidłowe użycie checkboxów

Checkboxy nie powinny być stosowane, gdy możliwy jest wybór tylko jednej opcji.

Nieprawidłowe użycie radio buttonów

Radio buttony nie powinny być stosowane, gdy możliwe jest niewybranie żadnych opcji, wybranie niektórych opcji lub wszystkich. Ponadto, radio buttonów nie należy stosować, gdy wybór ma spowodować natychmiastową zmianę.

Lista rozwijana (ang. Dropdown / Select)

Komponent zawierający listę dostępnych opcji, z których użytkownik może wybrać jedną lub kilka (w przypadku wariantu z wielokrotnym wyborem). Najczęściej stosowany jest w formularzach, ale może także występować np. w filtrach.

  • item
  • item
  • item
<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="section__input input--select">
      <label class="input__label" for="input-4">Label text</label>
      <input
        aria-expanded="false"
        class="dropDownF"
        id="input-4"
        type="text"
        placeholder="lorem ipsum"
        value="Wybierz opcję"
      />
      <i
        aria-hidden="true"
        class="select__icon dropDownF mdi icon icon--small mdi-chevron-down"
      ></i>

      <ul class="drop-down__container drop-down__container--hide">
        <li tabindex="0" class="drop-down__item">item</li>
        <li tabindex="0" class="drop-down__item">item</li>
        <li tabindex="0" class="drop-down__item">item</li>
      </ul>
    </section>
  </div>

  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="section__input input--select">
      <label class="input__label" for="input-5">Label text</label>
      <input
        class="dropDownF"
        aria-expanded="false"
        id="input-5"
        type="text"
        placeholder="lorem ipsum"
        value="Wybierz opcję"
      />
      <i
        aria-hidden="true"
        class="select__icon dropDownF mdi icon icon--small mdi-chevron-down"
      ></i>

      <ul class="drop-down__container drop-down__container--hide">
        <li class="drop-down__item">
          <section class="section__input input--checkbox">
            <label class="input__label--checkbox" for="item-1">
              <input type="checkbox" name="list" id="item-1" />
              <span tabindex="0" class="pseudocheckbox"></span>
              Item 1
            </label>
          </section>
        </li>
        <li class="drop-down__item">
          <section class="section__input input--checkbox">
            <label class="input__label--checkbox" for="item-2">
              <input type="checkbox" name="list" id="item-2" />
              <span tabindex="0" class="pseudocheckbox"></span>
              Item 2
            </label>
          </section>
        </li>
      </ul>
    </section>
  </div>
</div>

Struktura

  1. Nagłówek

    Wyjaśnia, jakiego wyboru powinien dokonać użytkownik. Rekomendowany limit tekstu to 1 linijka. Nagłówek znajduje się nad polem wyboru.

  2. Pole wyboru

    1. Kontener

      Oddziela pole od reszty interfejsu.

    2. Tekst zastępczy

      Znajduje się w środku kontenera. Wyjaśnia dodatkowo użytkownikowi istotę wyboru. Po wybraniu jednej z opcji tekst zastępczy znika, a jego miejsce zajmuje wybrana wartość.

    3. Strzałka

      Informuje o możliwości rozwinięcia/ zwinięcia listy. Po kliknięciu obraca się, czemu towarzyszy drobna animacja.

  3. Lista opcji

    Zawiera wszystkie możliwe do wyboru opcje. Każda z opcji powinna być opisana w możliwe najbardziej dokładny i zwięzły sposób.

Klikalne są wszystkie elementy, z wyjątkiem nagłówka.

Lista rozwijana nie może być rozwinięta przez użytkownika, jeśli jest nieaktywna (ang. disabled).

Warianty

  • item
  • item
  • item
<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="section__input input--select">
      <label class="input__label" for="input-4">Label text</label>
      <input
        aria-expanded="false"
        class="dropDownF"
        id="input-4"
        type="text"
        placeholder="lorem ipsum"
        value="Wybierz opcję"
      />
      <i
        aria-hidden="true"
        class="select__icon dropDownF mdi icon icon--small mdi-chevron-down"
      ></i>

      <ul class="drop-down__container drop-down__container--hide">
        <li tabindex="0" class="drop-down__item">item</li>
        <li tabindex="0" class="drop-down__item">item</li>
        <li tabindex="0" class="drop-down__item">item</li>
      </ul>
    </section>
  </div>

  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="section__input input--select">
      <label class="input__label" for="input-5">Label text</label>
      <input
        class="dropDownF"
        aria-expanded="false"
        id="input-5"
        type="text"
        placeholder="lorem ipsum"
        value="Wybierz opcję"
      />
      <i
        aria-hidden="true"
        class="select__icon dropDownF mdi icon icon--small mdi-chevron-down"
      ></i>

      <ul class="drop-down__container drop-down__container--hide">
        <li class="drop-down__item">
          <section class="section__input input--checkbox">
            <label class="input__label--checkbox" for="item-1">
              <input type="checkbox" name="list" id="item-1" />
              <span tabindex="0" class="pseudocheckbox"></span>
              Item 1
            </label>
          </section>
        </li>
        <li class="drop-down__item">
          <section class="section__input input--checkbox">
            <label class="input__label--checkbox" for="item-2">
              <input type="checkbox" name="list" id="item-2" />
              <span tabindex="0" class="pseudocheckbox"></span>
              Item 2
            </label>
          </section>
        </li>
      </ul>
    </section>
  </div>
</div>

  1. Lista rozwijana jednokrotnego wyboru (po lewej)

    Pozwala na wybór tylko jednej opcji.

  2. Lista rozwijana wielokrotnego wyboru (po prawej)

    Pozwala na wybór jednej, kilku lub wszystkich opcji.

Zasady stosowania

lorem ipsum

Lista rozwijana po kliknięciu

Lista powinna rozwijać się po kliknięciu w dowolny element pola wyboru.

lorem ipsum

Jasno zdefiniowane opcje

Opcje należy opisać w taki sposób, aby użytkownik wiedział, czego może się spodziewać po wybraniu jednej z opcji.

lorem ipsum

Lista rozwijana domyślnie zamknięta

Lista rozwijana powinna być zawsze domyślnie zamknięta.

lorem ipsum

Nagłówek umieszczony nad polem wyboru

lorem ipsum

Brak nagłówka

lorem ipsum

Zbyt długi nagłówek

Rekomendowana długość nagłówka to 1 linijka tekstu na wszystkich rozdzielczościach.

lorem ipsum

Ucięty nagłówek

Nie należy stosować wykropkowania w nagłówku.

Wyszukiwarka (ang. Search)

<section class="section__input input--search">
  <label class="input__label" for="input-9">Label text</label>
  <i aria-hidden="true" class="icon--left searchF icon mdi mdi-magnify"></i>
  <input class="searchF" id="input-9" type="text" placeholder="Szukaj" />
  <i tabindex="0" aria-hidden="true" class="icon--right icon mdi mdi-close"></i>
</section>

Struktura

  1. Pole wyszukiwarki

    1. Kontener

      Oddziela pole od pozostałych elementów interfejsu.

    2. Ikona lupy

      Nie jest klikalna. Informuje użytkownika o funkcji wyszukiwania.

    3. Tekst zastępczy

      Wskazuje na funkcję wyszukiwania.

Cały komponent jest klikalny.

Kalendarz (ang. Date picker)

Pozwala na wprowadzenie daty. Użytkownik może to zrobić poprzez samodzielne wprowadzenie daty do pola wyboru zgodnie z podanym formatem lub wybrać ją z widoku kalendarza.

Struktura

  1. Nagłówek opcjonalny

    Wyjaśnia, jaką datę powinien wybrać użytkownik. Rekomendowana długość tekstu to 1 linijka tekstu na wszystkich rozdzielczościach. Nagłówek znajduje się nad polem wyboru daty.

  2. Pole wyboru daty

    1. Kontener

      Oddziela pole od reszty interfejsu.

    2. Tekst zastępczy

      Znajduje się w środku kontenera. Wskazuje prawidłowy format daty. Po wpisaniu pierwszych znaków, tekst zastępczy znika.

    3. Ikona kalendarza

      Kliknięcie tej ikony otwiera widok kalendarza.

  3. Widok kalendarza

    Jest widoczny po kliknięciu ikony kalendarza.

    1. Menu wyboru roku

      Otwiera widok listy, na której użytkownik może wybrać rok.

    2. Strzałki

      Pozwalają na nawigację pomiędzy miesiącami.

    3. Dni tygodnia
    4. Dni miesiąca
    5. Link “Dziś”

      Jego naciśnięcie powoduje zaznaczenie bieżącej daty.

Wszystkie elementy z wyjątkiem nagłówka są klikalne.

Marzec
  • Mo
  • Tu
  • We
  • Th
  • Fr
  • Sa
  • Su
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
<section class="section__input input--date">
  <label class="input__label" for="input-8">Data</label>
  <input class="dropDownF" id="input-8" type="text" placeholder="DD-MM-RRRR" />
  <i tabindex="0" aria-hidden="true" class="icon dropDownF mdi mdi-calendar"></i>
  <div class="drop-down__container drop-down__container--hide">
    <section class="drop-down__calendar">
      <header class="calendar__header">
        <div class="calendar-header__month">
          Marzec
          <i
            aria-hidden="true"
            class="mdi icon icon--small mdi-chevron-down"
          ></i>
        </div>
        <nav class="calendar-header__navigation">
          <span class="navigation__item">
            <i
              aria-hidden="true"
              class="mdi icon icon--small mdi-arrow-left"
            ></i>
          </span>
          <span class="navigation__item active">
            <i
              aria-hidden="true"
              class="mdi icon icon--small mdi-arrow-right"
            ></i>
          </span>
        </nav>
      </header>
      <ul class="weekdays calendar__list">
        <li>Mo</li>
        <li>Tu</li>
        <li>We</li>
        <li>Th</li>
        <li>Fr</li>
        <li>Sa</li>
        <li>Su</li>
      </ul>
      <ul class="days calendar__list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li class="active">10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
      </ul>
      <button class="current_date button">Dziś</button>
    </section>
  </div>
</section>

Zasady stosowania

lorem ipsum

Kalendarz otwierany po kliknięciu

Widok kalendarza powinien otwierać się tylko po kliknięciu w ikonę kalendarza.

lorem ipsum

Nagłówek umieszczony nad polem wyboru daty

lorem ipsum

Brak nagłówka

lorem ipsum

Zbyt długi nagłówek

Rekomendowana długość nagłówka to 1 linijka tekstu na wszystkich rozdzielczościach.

lorem ipsum

Ucięty nagłówek

Nie należy stosować wykropkowania w nagłówku.

Dodatkowe opisy i wyjaśnienia

Większość elementów formularza może zawierać dodatkowe opisy i wyjaśnienia. Pozwalają one przekazać użytkownikowi bardziej rozbudowane instrukcje wypełnienia danego pola. Czasami może również wystąpić konieczność wyjaśnienia użytkownikowi, dlaczego jest on o coś pytany


<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-col--4">
    <section class="section__input">
      <label class="input__label" for="input-tooltip"
        >Imię i Nazwisko
        <span class="label__tooltip-icon">
          <i
            tabindex="0"
            aria-hidden="true"
            class="icon--right icon mdi mdi-help-circle-outline"
          ></i>
          <span class="tooltip"> Tekst podpowiedzi </span>
        </span>
      </label>
      <input id="input-tooltip" type="text" placeholder="lorem ipsum" />
    </section>
  </div>
  <div class="grid__col m-col--12 t-col--6 d-col--4">
    <section class="section__input">
      <label class="input__label" for="input-10"
        >Imię i Nazwisko
        <span class="label__required"> * </span>
      </label>
      <input id="input-10" type="text" placeholder="lorem ipsum" />
    </section>
  </div>
  <div class="grid__col m-col--12 t-col--6 d-col--4">
    <section class="section__input">
      <label class="input__label" for="input-11"
        >Imię i Nazwisko
        <span class="label__optional"> (Opcjonalne) </span>
      </label>
      <input id="input-11" type="text" placeholder="lorem ipsum" />
    </section>
  </div>
</div>

Struktura

  1. Ikona informacji opcjonalna

    Po najechaniu na ikonę pojawia się dodatkowy opis w formie tooltipu. Opis ten może wyjaśniać trudniejsze terminy lub powód, dla którego dane pytanie się pojawia. Nie należy umieszczać w tym miejscu informacji niezbędnych do wypełnienia pola.

  2. Informacja “opcjonalne” / “obowiązkowe” opcjonalna

    Informacja o tym, czy wypełnienie danego pola jest obowiązkowe (* lub “obowiązkowe”), czy opcjonalne (“opcjonalne”). Jeśli stosowana jest gwiazdka (*) należy na górze i/lub na dole formularza wyjaśnić co ona oznacza.

  3. Tekst pomocniczy opcjonalny

    Podpowiada użytkownikowi jak wypełnić pole. W przeciwieństwie do tekstu zastępczego zawartego w obrębie pola, nie znika po rozpoczęciu wprowadzania danych, ale jest cały czas widoczny.

Zasady stosowania

lorem ipsum

Wyjaśnione trudniejsze pojęcia

lorem ipsum

Tekst pomocniczy, który nic nie wyjaśnia

Tekst pomocniczy nie powinien dublować ani nagłówka, ani tekstu zastępczego.

lorem ipsum

Zbyt dużo opisów i wyjaśnień

Walidacja

Hasło powinno zawierać przynajmniej 8 znaków 
<section class="section__input">
  <label class="input__label" for="input-13">Label text</label>
  <input
    value="123"
    class="input__has-error"
    id="input-13"
    type="password"
    placeholder="lorem ipsum"
  />
  <span class="input__error">
    <i aria-hidden="true" class="mdi icon mdi-alert-outline"></i>
    Hasło powinno zawierać przynajmniej 8 znaków
  </span>
</section>

Wartości wprowadzone przez użytkownika muszą zostać zwalidowane. Użytkownik musi natomiast zostać poinformowany o wyniku walidacji, tj. o wyniku pozytywnym lub o ewentualnych błędach. Tego typu informacja zwrotna powinna:

  1. pojawiać się możliwie jak najszybciej, jednak nie wcześniej niż po opuszczeniu pola przez użytkownika (z wyjątkiem walidacji inline wskazującej na postęp)
  2. być łatwa do zauważenia
  3. być precyzyjna i zrozumiała
  4. zawierać informacje, które pomogą użytkownikowi naprawić błąd

Walidacja inline

Wszędzie tam, gdzie to możliwe zaleca się walidację inline (ang. Inline validation). Pojawia się ona bezpośrednio po opuszczeniu przez użytkownika danego pola i jest umieszczona w pobliżu pola, którego dotyczy. Pozwala ona użytkownikowi szybko zauważyć, że popełnił błąd i poprawić go – jeszcze przed wysłaniem formularza.

Walidacja inline może być również wykorzystywana do sygnalizowania postępu lub sukcesu w uzupełnianiu pola, np. podczas tworzenia unikatowego loginu lub silnego hasła. Wówczas jest ona widoczna cały czas podczas uzupełniania pola.

Zasady stosowania

lorem ipsum

Walidacja inline

Jeśli tylko jest to możliwe, należy stosować walidację inline. Powinna się ona pojawić po opuszczeniu pola przez użytkownika (z wyjątkiem walidacji wskazującej na postęp).

Zbyt dużo pozytywnej informacji zwrotnej

Nie należy wprowadzać nadmiar pozytywnych informacji zwrotnych. Należy stosować ją jedynie wówczas, gdy użytkownik może mieć wątpliwość, czy poprawnie wypełnił dane pole. Czasami jedynym wymogiem jest to, aby pole było uzupełnione. W takich sytuacjach lepiej jest nie udzielać pozytywnej informacji zwrotnej, ponieważ byłaby ona rozpraszająca.

Unikanie potencjalnych błędów

Dobry projekt interfejsu może pomóc użytkownikom w unikaniu błędów.

Krótkie i jednoznaczne nagłówki

Należy stosować krótkie, ale zrozumiałe, dobrze przemyślane nagłówki, teksty zastępcze, tooltipy i teksty pomocnicze. Przykładowo, zamiast “Telefon” nagłówek może brzmieć “Telefon służbowy”.

Pola sugerują format odpowiedzi

Forma i typ pola powinny sugerować oczekiwany format odpowiedzi. Przykładowo, zamiast jednego dużego pola na numer telefonu można zastosować listę rozwijaną z numerami kierunkowymi, a następnie trzy mniejsze pola oddzielone spacjami lub jedno pole z odpowiednim tekstem pomocniczym. Wówczas zrozumiałe jest, że należy wybrać numer kierunkowy kraju, a następnie podać numer komórkowy.

Ograniczanie wprowadzania błędnych danych

Wszędzie, gdzie jest to możliwe należy blokować możliwość popełnienia błędu. Przykładowo, można zablokować możliwość wpisywania liter w polu przeznaczonym na numer telefonu.

Elastyczność

Pola powinny pozwalać na pewną elastyczność, tj. literówki, skróty, różne formaty danych. Przykładowo, jeśli numer kierunkowy nie jest wybierany z listy, możemy dopuścić zarówno format z “+”, jak i z “00”.

Komunikaty błędu

Nawet najlepiej zaprojektowane formularze są czasami wypełniane nieprawidłowo. Wówczas pojawiają się komunikaty błędu. Komunikaty te powinny zwracać uwagę użytkownika na wystąpienie błędu, wyjaśnić jego istotę oraz wskazać sposób jego poprawy.

Widoczne komunikaty błędu

Powinny pojawiać się w miejscu, na które użytkownik spojrzy. Przykładowo, po wysłaniu błędnie wypełnionego formularza użytkownik może zostać przeniesiony do miejsca, w którym wystąpił błąd.

Komunikaty błędu blisko pola, którego dotyczą

Komunikaty błędu przykuwające uwagę

Komunikaty błędu powinny przykuwać uwagę. Najczęściej osiąga się to poprzez stosowanie czerwonego fontu i ikony błędu. Czasami stosuje się w tym celu także animacje (np. potrząsanie).

Odpowiedni język komunikatów błędu

Powinny one być zrozumiałe (napisane prostym, ludzkim językiem), kulturalne (wyrażone spokojnym, wyrozumiałym tonem bez wykrzykników) oraz pomocne (jasno wskazywać na charakter błędu i sposób jego naprawienia).

Powtarzające się błędy

Czasami użytkownik popełnia kilka razy ten sam błąd, co wyraźnie wskazuje na problemy z komunikacją.

Dodatkowy komunikat

Jeśli użytkownik popełnia kilka razy ten sam błąd, należy wyświetlić mu dodatkowy komunikat, który może np. zawierać link do strony “Pomoc” lub numer telefonu na infolinię.

Zbadanie problemu

Przede wszystkim jednak zaleca się głębsze zbadanie problemu i rozważenie przeprojektowania formularza.