Zwiększenie użyteczności formularza

Formularze to nieodzowny element stron i aplikacji webowych we wszystkich miejscach gdzie akcją jaką ma wykonać użytkownik jest wprowadzenie czy wybranie pewnych treści. Może to być formularz logowania, formularz zapisu na listę adresową czy skomplikowany interfejs np. w przypadku zaawansowanych ankiet. Skupmy się na prostym przykładzie – strona z logowaniem do panelu programu partnerskiego naszego produktu. Niby prosta rzecz – dwa pola do wprowadzania loginu oraz hasła (ewentualnie dodatkowy checkbox do zapamiętywania logowania), których wypełnienie zajmie chwilkę, ale czy można sprawić aby korzystanie z tak prostego interfejsu było przyjemniejsze ? Pewnie, że tak !

Mam na myśli tutaj bardzo prostą rzecz – focus, czyli dla osób niewtajemniczonych chodzi o to, że po przejściu na podstronę logowania pole do wpisania loginu (w tym naszym przypadku) staje się od razu aktywne – kursor jest już w nim umieszczony, a my możemy od razu przejść do wprowadzenia danych.

Wydawać mogłoby się, że to zwykła pierdoła, bo niby co za problem kliknąć myszką w pole czy też wcisnąć raz/kilka razy tabulator. Może i tak, ale wierz mi na słowo, że przedstawiony tip jest naprawdę wartościowy i często właśnie w myśl wspomnianej pierdoły projektanci front endu olewają takie elementy – moim zdaniem bardzo niesłusznie. Uważam, że na doskonałą całość składają się również takie niby drobne szczegóły i warto dopieszczać nawet tak pozornie bzdurne elementy.

Przydałby się oczywiście jakiś przykład więc mamy taki oto formularz:

Login:
Hasło:

I ustawienie naszego focusika z wykorzystaniem JavaScriptu…


lub popularnego jQuery:


Pamiętaj, że warto dbać o szczegóły :-)

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Zwiększenie użyteczności formularza, 5.0 out of 5 based on 1 rating

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *


dwa + 1 =

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>