İnterfeyslərdə kliklənə bilmə: əlamətləri və dizayn prinsipləri

Kliklənə bilmə nədir

Kliklənə bilmə — interfeys elementinin istifadəçiyə qarşılıqlı əlaqə imkanı haqqında vizual məlumat vermə dərəcəsidir. UX terminologiyasında bu, psixoloq Ceyms Gibson tərəfindən təqdim edilmiş affordans anlayışının bir hissəsidir.

Dizayner Don Norman affordans konsepsiyasını interfeyslərə tətbiq edərək populyarlaşdırdı. „The Design of Everyday Things" (2013) kitabında o, obyektin forma və görünüşünün onun istifadə üsulunu necə təklif etməli olduğunu təsvir etdi. Düymə düymə kimi görünməlidir — bu kliklənə bilmə affordansıdır.

UX Collective (2025) məlumatlarına görə, istifadəçilərin 34%-i element kliklənə bilən görünməsə, texniki olaraq klik işlənilsə belə, onu klikləmir. Bu, interfeysdə vizual əks əlaqənin vacibliyini vurğulayır.

Anti-nümunə: kliklənə bilməyən düymələr

Altından xətt çəkilməmiş mətn, işıqlandırılmayan düz ikonlar, pointer kursoru olmayan boz elementlər — element interaktiv olduqda lakin belə görünmədikdə klassik anti-nümunələrdir. İstifadəçi kliklənə bilən zonaları axtarmağa vaxt itirir, bu da UX-i pisləşdirir.

Kliklənə bilmənin vizual affordansları

Vizual affordanslar — interaktivliyi göstərən xarici əlamətlərdir. Onlar bir neçə kateqoriyaya bölünür: forma, rəng, kölgə, faktura və animasiya.

İnsanlar təkamül olaraq müəyyən vizual xüsusiyyətlərə malik obyektlərə toxunmağa və ya onları hərəkət etdirməyə öyrəşiblər. Dizaynerlər intuitiv interfeyslər yaratmaq üçün bu anadangəlmə qavrayış nümunələrindən istifadə edirlər.

Ən güclü affordans — kölgə (qaldırılma effekti). Google-dan Material Design fiziki təbəqələr metaforasına əsaslanır, burada hər bir interaktiv elementin öz hündürlüyü (elevation) var. İstifadəçilər intuitiv olaraq kölgəli kartı klikləmək mümkün olduğunu anlayırlar.

İnteraktiv elementlərin vəziyyətləri

Hər bir kliklənə bilən element ən azı dörd vəziyyətə malik olmalıdır: normal, hover, active, disabled. Vəziyyətlər arasında vizual fərqlər istifadəçiyə cari vəziyyəti anlamağa kömək edir.

/* Interactive element states */
.btn {
    background: #4A90D9;
    transition: all 0.2s ease;
}

.btn:hover {
    background: #357ABD;  /* Darker on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn:active {
    transform: scale(0.97);  /* Press effect */
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

Normal vəziyyət — elementin sakit vəziyyətdə əsas görünüşü. Hover vəziyyəti — kursorun üzərinə gətirilməsinə reaksiya, elementin qarşılıqlı əlaqəyə hazır olduğunu təsdiqləyir. Active vəziyyəti — klik anı, toxunma əks əlaqəsi verir. Disabled vəziyyəti — element qeyri-aktiv, vizual olaraq solğun.

Google Material Design Guide (2024)-ə görə, toxunma cihazları üçün minimum klik sahəsi — 48x48 dp, optimal isə — 56x56 dp. Daha kiçik ölçü mobil cihazlarda kliklənə bilməni azaldır.

Kursor kliklənə bilmə göstəricisi kimi

Kursorun dəyişməsi — kliklənə bilməni göstərməyin ən qədim və effektiv yollarından biridir. CSS cursor: pointer xüsusiyyəti oxu göstərən ələ çevirərək elementin interaktiv olduğunu bildirir.

/* Standard cursor values */
.clickable {
    cursor: pointer;   /* Pointer for buttons and links */
}

.moveable {
    cursor: grab;      /* Grab cursor for drag */
}

.resizable {
    cursor: ew-resize; /* Resize cursor for width */
}

Göstərən barmaq qaydası: cursor: pointer bütün kliklənə bilən elementlərdə — düymələrdə, linklərdə, keçidlərdə, ikonlarda istifadə edilməlidir. Interaktiv olmayan elementlərdə kursor standart ox (cursor: default) olaraq qalmalıdır.

İstifadə səhvləri: adi mətndə cursor: pointer istifadəçiləri yanıldır. Klikləməni emal etməyən elementlərdə pointer kursorundan istifadə etməyin — bu interfeysə inamı pozur.

Düymə dizaynında Fitts qanunu

Fitts qanunu — məqsədə çatmaq üçün tələb olunan vaxtı təsvir edən erqonomik qanundur. İnterfeyslər kontekstində: məqsəd (düymə) nə qədər böyük və yaxındırsa, istifadəçi bir o qədər tez ona çatır.

Fitts qanununun düsturu: T = a + b * log2(D / W + 1), burada T — çatma vaxtı, D — məqsədə qədər məsafə, W — məqsədin ölçüsü. Düymənin ölçüsünü 2 dəfə artırmaq klik vaxtını 15–20% azaldır.

Apple Human Interface Guidelines (2024)-ə görə, toxunma məqsədinin minimum ölçüsü — 44x44 nöqtə. Google Material Design 48x48 dp tövsiyə edir. Praktikada CTA düymələri rahat qarşılıqlı əlaqə üçün ən azı 56x56 dp olmalıdır.

Ekran küncləri — sonsuz məqsədlər

Ekran küncləri və kənarları Fitts qanununa görə sonsuz məqsədlərdir — kursor ekranın hüdudlarından kənara çıxa bilməz. Buna görə vacib düymələr (menyu, bağlama) tez-tez künclərdə yerləşir. Mobil interfeyslərdə baş barmaqlar təbii olaraq ekranın aşağı hissəsinə uzanır.

Kliklənə bilən elementlərin nümunələri

Sabit nümunələr kliklənə bilmə onilliklər ərzində veb-dizaynda formalaşıb. Onların istifadəsi interfeysi istifadəçini öyrətmədən intuitiv edir.

Kölgəli düymə nümunəsi — Material Design standartı. Düymə səthdən yuxarı qalxır, kölgə üzərinə gətirildikdə artır və klikdən sonra yox olur. Bu nümunə milyonlarla tətbiq və saytda istifadə olunur.

Düz düymə nümunəsi — iOS 7 yeniləməsindən sonra kölgəsiz düz dizayn populyarlaşdı. Bu cür düymələrdə kliklənə bilmə rəng, çərçivə və ya ikon vasitəsilə ötürülür. Düz düymələr daha parlaq rəng vurğuları tələb edir.

Ghost-düymə nümunəsi — şəffaf düymə çərçivə ilə, üzərinə gətirildikdə rənglə dolur. Əsas CTA yanında ikinci dərəcəli hərəkətlər üçün istifadə olunur.

• Platforma konvensiyalarına riayət — iOS, Android və veb öz kliklənə bilmə standartlarına malikdir
• Ardıcıllıq — eyni elementlər hər yerdə eyni görünür
• Əks əlaqə — hər klik dərhal reaksiya verməlidir
• Əlçatanlıq — kliklənə bilmə ekran oxuyucusu istifadə edərkən də anlaşılan olmalıdır