Mükəmməl formaların dizaynı üçün 10 göstəriş

Bu yazı əvvəlcə onepixelout.com saytında yayımlandı

Formalar istifadəçi və sistem arasındakı portaldır və tez-tez bir veb səhifənin diqqət mərkəzindədir. Giriş, qeydiyyat, statusunuzu yeniləmək, ödəniş məlumatlarını və çatdırılma ünvanını daxil etmək - bunların hamısı formalardan istifadə olunur. Elektron ticarət saytları üçün yaxşı hazırlanmış formalar bütün fərqləri düzəldə bilər.

Təcrübəmdə tək bir formanın dizaynını yaxşılaşdırmaq hətta bir onlayn mağazanın satışını iki qat artıra bilər.

... və dizayn formalarını sevirəm.

Formalar istifadəçi interfeysinin funksional tərəfi olduğundan, onları necə tərtib etmək lazım gəldikdə bəzi qaydalar mövcuddur. Bu gün bütün işləri düzəltmək üçün formalar almağa gəldikdə məsləhətlərə və ən yaxşı təcrübələrə nəzər salacağıq, buna görə istifadəçi məcburiyyətində deyil.

1. Girişlərdən başlayın

Ən çox yayılmış forma elementi ilə başlayın: mətn daxiletmə sahəsi. Ən çox formanın ən çox yayılmış bir hissəsidir, buna görə düzəldin və artıq oraya getmisiniz.

Hər forma girişinin 3 əsas elementi var: mətn sahəsi, etiket və səhv mesajı. Bu ən əsas bina blokunu tərtib etmək üçün hansı yolu seçmisinizsə, istifadəçiyə hansı məlumatın lazım olduğunu bilmək üçün bir yolun olub olmadığını və səhv varsa - bu səhvdən necə xilas ola biləcəyinizə əmin olun. Etiketləri harada yerləşdirəcəyimizi bizə səliqəli gətirir.

Etiketlər yuxarıya doğru gedir

Trendlər gəlir və gedir. Doldurucu etiket kimi istifadə etməyə meylli bir tendensiya var. Tamam etiket üçün istifadə edərkən mütləq səhv deyil, bəzi UX problemlərini təqdim edirlər. Bununla əlaqədar problem, istifadəçi onu vursa, etiket yox olur. İstifadəçi bu formaya qayıdırsa və giriş səhv olduğuna görə yönəldilirsə, etiket də silinir.

Etiketlər hər zaman görünməlidir. Bu səbəbdən etiketlər üst sıraya çıxır.

Niyə giriş sahəsinin üstü və solu deyil?

Etiket sahənin sol tərəfində olduqda, birini digərinin üstünə mobil şəkildə yapışdırmaq lazımdır. Əvvəlcə mobil düşünün.

gifdən görüntü

İstifadəçini doldurucularla düzgün məlumat daxil etməsinə istiqamətləndirin və onların istifadəsi üçün etiketlərdən istifadə edin.

Etiketləri giriş sahələrinin üstünə qoymaq üçün digər bir arqument, oxucunun məlumatı oxumaq üçün xətti bir şaquli xəttin olmasıdır ki, tədqiqat göstərdi ki, sol sütundan sağ sütuna tullanmaqdan daha sürətli olur. Buna görə istifadəçiniz üçün işləri asanlaşdırın - veb saytınızla irəliləmək üçün daxil olmaları lazım olanları oxumaq üçün təmiz bir xətt.

2. Səhvlər və xəbərdarlıqlar

Hər standart mətn daxiletmə sahəsi üçün uyğun bir səhv mesajı lazımdır. Səhv hadisəsi üçün dizayn üçün bir neçə ipucu.

Səhv mesajı ya müştəri ya da serverdən gələ bilər. Müştəri tərəfi məcburi bir sahə doldurulmadığı zaman və ya bir e-poçt ünvanı səhv formatda olduğu kimi şeyləri aşkar edə bilər. Server tərəfi, hazırda bir e-poçt ünvanının olub olmadığını öyrənə biləcəkdir. Hansıların müştəri və hansının server olduğunu bilin. Müştəri tərəfindəki səhvlər, forma göstərişlər olaraq təqdim edilməzdən əvvəl istifadəçiyə verilməlidir. Müştəri tərəfindəki səhvlər istifadəçinin səhv məlumat təqdim etməsinə mane olmalıdır.

Səhv mesajları ilə ağıllı olun.

Bir istifadəçi səhv etdikdə, səhvin hansı sahəyə səbəb olduğu barədə məlumat verin. Təhlükəsizlik üçün, bəzi inkişaf etdiricilər girişdə e-poçtunuzun və ya şifrənizin səhv olub olmadığını dəqiqləşdirmək istəmirlər və bu tamamilə yaxşıdır. Lakin istifadəçi sadəcə bir e-poçta imza atdıqda və ya yoxlanışda ünvanlarını daxil etdikdə, hansı sahənin səhv olduğunu və niyə olduğunu söyləyin.

Hər dəfə mətn girişini tərtib edərkən istifadəçi "Göndər" düyməsini vurduqdan əvvəl və sonra səhv mesajının necə görünəcəyini də nəzərə alın.

Xəbərdarlıqları daxil edin

Müəyyən bir sahə müəyyən bir meyar tələb edirsə - məsələn, bir şifrə müəyyən sayda işarəyə sahib olmalı və hər iki rəqəmi və hərfləri birləşdirməlidir, istifadəçiyə bildirin. Şifrə daxil olduqda nə qədər güclü olduğunu göstərmək yollarını daxil edə bilərsiniz. Bir e-poçtun əvvəlcədən qeydiyyata alındığını və ya istifadəçi adının alındığını göstərmək də faydalı ola bilər.

3. Bəyənirəm kimi qrup

Bəyəndiyiniz qrup şəklində göründüyü kimi forma səliqəli görünəcək, ancaq istifadəçi təcrübəsi baxımından da daha yaxşıdır. Mobil istifadəçinin bu forma ilə necə əlaqəli olacağını düşünün. Mətn daxil etmə sahələri bir yerdədirsə, sahələri doldurmaq üçün istifadəçi klaviaturada qalmalı olacaq.

İstifadəçidən mətn daxiletmə sahələrindən açılanlara, radioya və geri mətn daxiletmə sahələrinə keçməsini xahiş edirsinizsə, bu istifadəçi tərəfdən daha çox dəyişir. İstifadəçinin mobil cihazını necə tutduğunu və oxşar giriş sahələrini birlikdə qruplaşdıraraq sürtünməni necə azalda biləcəyini düşünün.

4. Radio düymələri, açılanlar və onay qutuları

Bəzən radio düymələrindən, açılanlardan və onay qutularından istifadə etmək vaxtı gələndə qarışıqlıq ola bilər.

Radio düymələri istifadəçiyə mümkün olmayan sayda cavabları göstərmək üçün əla bir yoldur. Dizayner olaraq bir cavabı əvvəlcədən seçmək və ya bu boş buraxa bilərsiniz. Yalnız bir seçim seçilə biləcəyi zaman radio düymələri ən yaxşı seçimdir.

Mümkün bir çox cavab olduqda, açılan yer daha məqsədəuyğundur (5 və ya 6-dan çox olduqda mənim qaydalarım). Bir cavabı əvvəlcədən seçə və ya istifadəçiyə seçim etməyi tapşırmaq üçün yuxarıdakı elementi "Zəhmət olmasa seçin" kimi tərk edə bilərsiniz.

Yoxlama qutuları (şərtlər kimi) bir qutusuna sahib olsanız və ya bir neçə mümkün seçiminiz varsa ən yaxşı seçimdir. Bir istifadəçiyə hansı marketinq e-poçtunu göndərəcəyini bilmək istəyirsinizsə, bir qrup onay qutusu birdən çox seçim etməyə imkan verəcəkdir.

Radio düymələri yerinə onay qutularından istifadə etmək istifadəçi interfeysi dizayn qərarlarınızda sizi məhdudlaşdırmamalıdır. Dizayner olaraq, bu UI elementlərinin ekranda necə görünə biləcəyinə dair bir çox rahatlığa sahibsiniz. Onlara daha maraqlı görünmək üçün onay qutularını tərtib etmək istəyirsinizsə, bu istifadəçi təcrübəsinə təsir etməməlidir. Kiçik bir dairənin yanında mətn siyahısına sahib olmaq əvəzinə, seçilə bilən şəkillər və ya nişanlar tərtib etməklə bu işi daha maraqlı edə bilərsiniz.

5. Mümkün olduğu yerlərdə Əlavə Sahələri aradan qaldırın

Əgər işiniz veb saytınızdan bir şey almaq üçün bir istifadəçini almaqdırsa, bir dizayner kimi hədəfiniz, müştəri ilə sistem arasında mümkün qədər sürtünmə aradan qaldırmaqdır. Lazımsız sahələri çıxarmaq, istifadəçinin tərəfində daha az iş görən kimi forma görünməyə imkan verir.

Bu, hər növ yoxlama və ya çatdırılma ünvanı formalarını tərtib edərkən bilmək vacibdir. Marketinq şöbəsi müştərilərin hansı marketinq e-poçtlarını göndərəcəyini bildikləri üçün maraqlarını öyrənmək istəsələr, müştəri əşyaları satın aldıqdan sonra (məsələn, “təsdiqlədikləri zaman” ziyarət etdikləri səhifədə) bu məlumatı tapmağın başqa yolları da ola bilər. elektron poçt ”).

Həmişə yalnız minimum sahələrin görünməsi üçün yaradıcı yollar axtarın. Məqsədiniz bir elektron ticarət saytında dönüşüm üçün optimallaşdırmaqdırsa, çatdırılma ünvanı və ödəniş üçün formalarda sahələrin sayının minimuma endirilməsinə diqqət yetirin. Uçuşları bron etmək üçün bir interfeys hazırlayırsınızsa, istifadəçiyə mövcud uçuşları görmək üçün lazım olan minimum sahələri göstərin. İstifadəçinizə sərmayə qoyduqdan sonra ehtiyac duya biləcəkləri daha çox məlumatı - çantaların sayı və s. Kimi şeyləri tapmağa başlaya bilərsiniz.

6. Daha uzun sahələr üçün Auto-tamamlayın

Küçə adı sahəsi, küçənin adından asılı olaraq, yazmağa çox vaxt apara bilər - xüsusən də mobil cihazda. Düzgün yazmaq daha da çətinləşə bilər.

Küçə adını avtomatik tamamlamaq üçün Google Maps API daxil etmək barədə düşünə bilərsiniz. Bu o deməkdir ki, istifadəçi yalnız ilk neçə simvolu yazmalı və mümkün küçə adlarının açılan siyahısından düzgün küçəni seçməlidir. Poçt kodu da yalnız küçənin adını çəkməklə avtomatik olaraq doldurmaq mümkündür, ancaq bunu növbəti nöqtədə müzakirə edəcəyik.

7. Şərti məntiqdən istifadə edin

İstifadəçinin adından bəzi məlumatları daxil etmək üçün məntiqdən istifadə etmək yolları var, bu da onların həyatlarını bir az daha asanlaşdırır.

  • İstifadəçilər ölkəsini tanıyırsınızsa, dizayn lazım ola biləcək əlavə sahələri əvvəlcədən müəyyənləşdirə bilər (ABŞ-da olduqları halda 'dövlət', İrlandiyada olduqları 'mahal' və s.)
  • Poçt kodu şəhərin, əyalətin və ya vilayətin adını doldurmaq üçün istifadə edə bilərsiniz.
  • Əgər ölkənizin IP ünvanı əsasında varsa, telefon nömrəsi sahəsində ölkə kodunu doldura bilərsinizmi?

Istifadəçi adından sahələri dolduracaqsınızsa, həmişə bu məlumatları düzəltmək üçün bir yol verin. Düzgün olmadığın mümkündür.

Məsələn - bir Alman küçəsinin adını almaq üçün Google Maps API-dən istifadə edə bilərsiniz. Küçənin adını bilməklə sahə kodunu da əldə edə bilərsiniz. Bununla birlikdə, Almaniyadakı bəzi küçələr fərqli bölgə kodlarını əhatə edə biləcək qədər böyükdür, buna görə də az sayda kənar hallar üçün məlumatlar səhv olacaqdır. Hər zaman istifadəçiyə lazım olduqda məlumatları redaktə etmək imkanı verin.

Dünyadakı hər bir ölkə üçün şərti məntiqi araşdırmaq çox böyük bir iş olardı - səylərinizlə ağıllı olun. Ən çox sifariş və ya trafik aldığınız ölkələrə baxın və ilk olanlar üçün optimallaşdırmağa başlayın. Güclü bir dönüş görsəniz, daha çox ölkə üçün eyni şərti məntiqin tətbiqini davam etdirə bilərsiniz.

8. Yer sahibləri ilə ağıllı olun

Əvvəllər mətn sahəsinin etiketi olaraq doldurucu yerlərdən necə istifadə etməməyimiz barədə danışdıq, çünki istifadəçi vuranda yox olacaq. İstifadəçilərin istifadə təcrübəsini yaxşılaşdıra biləcəyi digər üsulları araşdırmadıq.

Yer sahibləri istifadəçiyə məlumatlarını necə formatlaşdıracağını göstərmək üçün səliqəli bir fürsət təklif edirlər. Telefon nömrələri əla bir nümunədir. İstifadəçi ölkə kodunu daxil etməlidir? Və ya sahə kodu?

Müəyyən bir formatdakı bir telefon nömrəsinə və ya tire daxil etmək üçün bir kredit kartı nömrəsinə ehtiyacınız olduqda, doldurucuda nümunə təqdim edərək bu məlumatı istifadəçiyə bildirə bilərsiniz. Bu, ölkə kodlarına və s. Ehtiyac duyduğunuzu açıq şəkildə ifadə edərək səhvləri minimuma endirmək üçün sərin bir yoldur.

9. Sonrakı addımı aydın şəkildə ünsiyyət qurun

Növbəti nə olacağını əlaqə quraraq düymələrinizin çox işləməsini təmin edin. Tamamlamaq üçün əlavə bir addım varsa, bunu istifadəçiyə də bildirin.

"Next" və ya "Checkout" istifadə etmək əvəzinə, "Sifarişə bax" və ya "Paypal ilə indi ödəyin" deyə bilərsiniz. Xüsusilə istifadəçiyə vurduqda nə olacağını izah edərək başqa bir əlaqə səviyyəsini əlavə edin. Bu düymə sifarişini tamamlayacaq, yoxsa yoxlamağa vaxtları olacaq? Onlar Paypal girişinə gətiriləcəkmi?

Təcrübə zamanı istifadəçini rahat hiss etmək üçün, xüsusən də onların bank balansına təsir göstərməsi üçün yollar axtarın.

Mən Amazon ödəməsini istifadə edərkən hər dəfə narahat oluram, çünki son addımınadək göndərmə haqqı da daxil olmaqla tam məbləği söyləmirlər. İstifadəçi ilə şəffaf olun. Hər addımda ehtiyac duyduqları məlumatları verərək etimad göstərin və hərəkətə çağırış etdikdə nə gözlədiklərini aydın izah edin.

10. Optimallaşdırma yollarını axtarın

Parlaq, parlaq yeni formanızı işə saldıqdan sonra - analitiklərə baxın. Çox sayda insan görəndə sıçrayırsa, bunun səbəbini tapın. İstifadəçilərinizin narahat olduqlarını görmək üçün istifadəçi testini keçirin və bu sürtünməni çıxartmaq üçün çalışın. Bir dizayner olaraq, tez-tez işlərimiz əsla 'yerinə yetirilmir'.

Nəticədə

Formalar bəzən dizayn etmək üçün çox əyləncəli bir şey deyil, amma yaxşı edildikdə veb saytın və ya tətbiqin istifadəçi təcrübəsi üçün böyük bir fərq edə bilər. İstifadəçi məcbur etməməsi üçün daha çox işləmək üçün formalarını tərtib edin.

Fəaliyyətə dair çağırışlar barədə dəqiq məlumat verin, xəbərdarlıq və yerdəyişmə vasitəsi ilə istifadəçiyə göstərişlər verin və avtomatik tamamlama təklif edin. Həmişə ağır atletikadan daha çox iş görməyin yeni yollarını axtarın, buna görə istifadəçi sürtünmə qabiliyyəti azdır.