Qeştalt prinsipləri UI dizaynda

Bu məqalə yeni başlayan UI dizaynerlər üçün faydalıdır

Qeştalt (almanca “gestalt” — forma, obraz, şəxs) deyəndə əşya toplusunun bir vahid kimi qavranmasını nəzərdə tuturlar. Bu söhbət 1912-ci ildə başlayıb: üç alman psixoloq qavrama, düşüncə və şəxsiyyətlə bağlı məsələləri araşdırarkən qeştaltpsixologiya istiqamətinin təməlini qoyub. Qeştaltpsixologiyaya görə bu üç məsələylə bağlı əsas suallar vahidlik və tamlıq prinsipi ilə izah edilir.

Qeştaltizmin əsas prinsipləri

Qeştalt prinsiplərinin UI dizaynda necə işlədiyinə keçməzdən öncə qeştaltizmin özündən danışaq. Qeştaltizmə görə insan qavrayışı 6 prinsip üzərində işləyir:

1️⃣ Yaxınlıq — bir-birinə yaxın duran stimullar bir vahid kimi qavranır.

⤴ Soldakı kvadratlar eyni məsafədə olduğuna görə, hamısı bir qrup kimi qavranır. Sağda isə bir-birinə daha yaxın olan kvadratlar ayrı qruplar təşkil edir və beləcə sətirlər alınır.

⤴ Solda ağac təkdir. Sağdakı ağac toplusunun isə öz adı var — meşə. İki qonşu meşə ona görə ayrı kimi qavranır ki, ağac topluları bir birindən çox uzaqdır.

2️⃣ Bənzərlik — ölçü, forma, rəng və digər parametrləri bənzər olan stimullar bir vahid kimi qavranır.

⤴ Solda sətirlər fiqura əsasən formalaşıb. Sağda isə — rəngə. Burada vahid — sətirdir. Təbiətdə parametrlər daha müxtəlif olur: ölçü, səs, temperatur və s.

⤴ Bənzərlik prinsipi axtarış və seçim zamanı mühüm rol oynayır. Əgər sarı gülləri axtarırsansa, beynin sarıları qruplaşdıraraq, bənövşəyiləri iqnor edəcək, və ya əksinə.

3️⃣ Tamlıq — qavrama hər şeyi sadələşdirməyə və tamlaşdırmağa meyillidir.

⤴ Bu mürəkkəb fiquru bir vahid kimi qavramaq çətindir, çünki heç nəyə bənzəmir, amma asanlıqla sadə fiqurlar toplusu kimi görə bilərsən. Bu, sadələşdirməkdir.

⤴ Bu fiquru isə əksinə, nə qədər sadə fiqurlara bölsən də, yenə kamera görürsən. Bu, tamlaşdırmaqdır.

4️⃣ Qapalılıq — şüur fiquru bitirib, bir tam olaraq qavramağa meyillidir.

⤴ Solda kəsilmiş fiqurlar toplusu olsa da, mövcud olmayan kvadrat görürsən. Sağdakı isə, əlbəttə ki, dairədir. Bəs niyə qırıq xətlər yox, məhz dairə? Çünki beyin o xətləri bitirib, vahidləşdirərək, işini asanlaşdırır.

⤴ Ləkələr xaotikdir, amma biz onlarda dalmatin iti görməyə qadirik. Beynimizin bu xüsusiyyəti olmasaydı, gizlənən heyvanları vaxtında görüb, təhlükədən uzaqlaşa bilməzdik.

5️⃣ Yanaşılıq — stimulların zaman və fəzada qonşuluğu. İki hadisə ardıcıl baş verirsə, onlar səbəb və nəticə kimi qavranmağa meyillidir. Heyvanların tərbiyəsini bu prinsiplə izah etmək mümkündür.

⤴ Solda eyni rəngli xətlər eyni isiqamətdə olduqları üçün bir-birinə səbəb və nəticə rolu oynayırlar və nəticədə iki kəsişən xətt qavranır. Sağda isə eyni rəngli xətlər bir-birinə qonşu deyil, buna görə daha yaxın olduqları və “davam” kimi identifikasiya edilə bilən başqa xətlərlə bir vahid kimi qavranırlar.

⤴ Suvarma qabı, Yeşik və Gübrə. Maqnitofon bura heç yaraşmır, amma Suvarma qabıyla yanaşı olduğuna görə daha sıx əlaqəlidirlər və mənasını düşünmədən bir komplekt kimi qavranırlar.

6️⃣ Ümumi zona — qavramamız qeştalt prinsipləri ilə bərabər, həm də bilik və yaşanmış təcrübəmizlə formalaşır. Hisslərimizin interpretasiyası, həmçinin gözləntilərimiz və ön fikirlərimizdən asılıdır.

⤴ Soldakı nümunədə narıncı düyməni bassan, rəngi dəyişir. Bu hərəkətin yanıb-sönən mesajla heç bir əlaqəsi olmadığına görə düymə və mesajın bağlılığı yoxdur. Sağdakı nümunədə isə narıncı düyməni bassan, mesaj əmələ gələcək. Bir dəfə də bassan, itəcək. Məhz bu bağlılığa görə düymə və mesaj əlaqəlidir.

Beynin konstantaları

Mətləbə keçməzdən öncə daha bir-iki şeyi aydınlaşdıraq:

🧠 Obyektin ölçüsü beyin üçün sabitdir. Şəkildə nə boyda olursa olsun, beyin obyekti real ölçüdə qavrayacaq.

⤴ Hansı maşın böyükdür? Şəklə ilk baxdıqda soldakı maşınla sağdakının arasında fərq görmədinsə, onlar sənə eyni ölçüdə gəlir. Amma soldakının real, sağdakının isə oyuncaq olduğunu anladıqda, beynin onları fərqli kateqoriyalaşdırır: hər birinin öz ağırlığı və ölçüsü əmələ gəlir; soldakı daha iri və uzaq, sağdakı isə xırda və yaxın kimi qəbul edilir, və bu xəyali obrazları beynində eyniləşdirə bilmirsən. Hansısa məlumata və ya düyməyə diqqəti çəkmək üçün onu böyük obyektlərin fonunda qoymaq daha əlverişlidir (bax: Nümunə 15, Proporsiya).

🧠 Obyektin forması beyin üçün sabitdir, onu əyri görsən belə.

⤴ Məsələn, bucaq altında baxdığın vərəqi əyri poliqon kimi görsən də, düzbucaq kimi qəbul edirsən. Sağda isə stolun səthi düz olduğuna görə kağızın forması olduğu kimi qəbul edilir, düzbucaq kimi deyil. Asfalt üzərində çəkilən 3d illüziyalar beynin bu xüsusiyyətindən istifadə edərək beyni aldadır.

🧠 Obyekt və fonun parlaqlıq nisbəti şəklin parlaqlığından asılı olmadan qəbul edilir. Məsələn, soldakı lampa işıq verir, sağdaki isə sönülüdür, halbuki ikisinin də iç rəngi eynidir. Niyə? — Ətrafdakı obyektlərə görə. Solda ətraf qaranlıqdır və ağ rəng işıq kimi qavranır, sağda isə hər yer ağdır, buna görə də ağ rəng işığa işarə etmir (və ya hər yer işıqlı kimi qavranır).

🧠 Hər şey obyekt-fon cütlüyü kimi qavranır. Beyin xaotik vizual məlumatı qavrayarkən onu sadələşdirmək məcburiyyətindədir. Bunun üçün o, hər şeyi fon və onun üzərində yerləşmiş obyektə bölür. Obyekt həmişə fondan öndə, daha detallı, daha çox xüsusiyyəti olan bir şey kimi qavranır.

⤴ Sol və sağ şəkillər eynidir. Soldakı — ağ fon üzərində güldandır. Güldan olduqda beynin qara rəngi dolğun bir obyekt kimi qəbul edir. Sağdakı isə qara fonda iki insan profilidir. Güldanı unutsan, qara rəng fona dönəcək və boş bir yer kimi qavranacaq, ağ isə əksinə önə gələrək daha önəmli olacaq. Bununla bağlı hətta zarafatyana bir tapmaca da var: zebra ağ üzərində qara xətli heyvandır yoxsa qara üzərində ağ xətli?

UI dizayn və qeştaltizm prinsipləri

UI dizaynerin əsas məqsədi interfeysdə elementlər arasında düzgün iyerarxiya qurmaqdır. Dizayner buna obyektləri düzgün bölüşdürüb, qruplaşdıraraq və zəruri obyektləri kifayət qədər fərqləndirərək nail olur. Beynin sadaladığım xüsusiyyətlərindən yararlanaraq, istifadəçinin diqqətini daha məharətlə idarə edə bilərsən. Bu prinsiplərdən sızan qaydaları da elə iki yerə bölmək olar: qruplaşdırma və fərqləndirmə fəndləri.

Qruplaşdırma fəndləri

Bu fəndlər əsasən interfeysdə səliqə-səhman yaratmaq, kontentin oxunaqlılığını artırmaq üçün işlənir. Əslində, bunlar yuxarıdakı qeştaltizm prinsiplərinin sadəcə interfeysdə təzahürüdür.

1. Yaxınlıq

Bir-birinə yaxın obyektlər bir qrup kimi qavranır. İnterfeysdə bu, adətən blok daxilində elementləri birləşdirmək, blokları bir-birindən ayırmaq üçün istifadə olunur. Yaxınlıq prinsipini istənilən yerdə tətbiq etmək olar: naviqasiya, kartlar və qalereyadan tutmuş, mətn, siyahı və cədvəllərə qədər.

UI dizayna yeni başlayanların ən çox yol verdiyi səhv məhz məsafələrin düzgün bölüşdürülməməsi olur. Gah blok daxilində başlıq kontentə yapışır, gah blokların arasındakı məsafə normaldan az və ya çox olur. Əgər yeni dizaynersənsə və düzəltdiyin interfeysdə nəsə qane etmirsə (amma nə olduğunu tuta bilmirsən), o zaman ilk öncə məsafələrə bax.

Nümunə 1 — Pinterest. Mərkəzdəki şəkil Lulu Ward-a aiddir, yoxsa Imani Giverts Creative-ə? Solda müəllifin adının üstündə və altındakı məsafələr eynidir deyə heç nə başa düşmək olmur, sağdakı nümunədə isə düzgün qruplaşdırıldığına görə şəklin kimə aid olduğunu dərhal bilirsən. Belə xırdalıqlar bəzən həlledici olur.

Nümunə 2 — PASHA Bank. Kartlar bir-birinə digər elementlərdən daha yaxın olduğuna görə, dərhal bir qrup kimi qavranır, başlıq və link isə onlardan aralı olduğuna görə daha harmonik görüntü yaranır.

Nümunə 3 — PASHA Bank. Bütün vertikal məsafələri ləğv edək və alınana baxaq: başlıq və link kartlara çox yaxın olduqları üçün, sağdakı kartın hara aid olduğu ilə bağlı bir anlıq çaşqınlıq yaranır.

Məsafələrə diqqətlə və təmkinlə fikir ver, düzgün məsafələr uğurlu UI-ın təməlidir.

2. Bənzərlik

Bənzər obyektlər bir qrup və ya pattern kimi qavranır. UI-da bu prinsip digərləri ilə kombinasiyada istifadə olunaraq, demək olar ki, səhifə boyu hər yerdə işləyir. Elementləri bənzər etməyin bir neçə yolu var: rəng, ölçü, forma, tekstura və ya istiqamət üzrə.

Bloklardakı obyektləri bir qəlibdən edərək, onları bir-birinə daha sıx bağlamaq və qonşu bloklardan daha çox ayırmaq olar. Digər nümunə: müxtəlif bloklarda olan CTA düymələri eyni olduğu üçün bir pattern kimi qavranır və istifadəçiyə öncədən məlumat verir ki, düyməni bassa hara gedəcək.

Nümunə 4 — Kinopoisk HD. “Ən çox baxılan” blokunun kartları dar və uzun, içində film posteridir. “Kateqoriyalar” blokunda isə kartlar kvadrat, rəngli, eyni stildə yazılı və ikonludurlar. Başlıqlar olmasa belə, bu iki blokun ayrı olduğunu başa düşə bilirsən. İndi isə təsəvvür et ki, iki yox, bir blokdur və hər iki kart növü qarışıq göstərilib. Nə? — Xaos.

Nümunə 5 — Yandex Radio. Sağ və soldakı mahnılar indi oxunanla eyni formada olduğuna görə onların da mahnı olduğu dərhal başa düşülür. Aşağıdakı sosial şəbəkə düymələri bir-biri ilə eyni ölçü və formada, pleyer düymələrindən isə fərqli olduğuna görə hər şey istifadəçiyə baxan kimi aydın olur və qarışıqlıq yaranmır.

Fərqli olan obyektləri fərqli görünüşlü et, blok daxilində isə kopi-peystlə işləməkdən çəkinmə.

3. Ümumi sahə

Çərçivə daxilində birləşmiş obyektlər qrup kimi qavranır. Çərçivə dedikdə təkcə stroke-lu düzbucaqlar deyil, həm də kartlar, rəngli fonlar, borderli çərçivələr nəzərdə tuturam.

Ümumi sahə Yaxınlıqdan daha güclüdür və ara məsafələrindən asılı olmayaraq obyektləri birləşdirir. Məsələn, çox bərbad, amma çərçivənin gücünü göstərən nümunə:

Nümunə 6 — Arngren.net. Dünyada ən pis e-kommersiya saytı. Hər şey bir-birinə yapışıb. Amma gör, bu qədər qarışıqlığın içində qara çərçivələr məsələyə necə aydınlıq gətirir.

Nümunə 7 — Amazon. Bu, yaxşı nümunədir. Məsafələrlə çox oynamaq istəmirsənsə, yaxın obyektləri çərçivələrə al. Çərçivəsiz mavi blokun isə dərhal bu qəlibdən olmaması, fərqli reklam olması bilinir.

Nümunə 8 — Cədvəllər. Çərçivə və rəngli fonlar olmasaydı, cədvələr olmazdı.

Nümunə 9 — Facebook. Ümumi zonaya alınmış və alınmamış obyektlərin fərqi. Mərkəzdəki kartlar deyir ki, “Mən əsasam, mənə fikir ver”. Kənarlardakı fonsuz bloklar isə köməkçidirlər.

4. Qapalılıq

Bu prinsip UI-dan çox ikonoqrafiya və qrafik dizayna aiddir, işini adətən ikon və loqolarda görürük. Demək olar ki, bütün ikonlar obyekti real olduğu kimi deyil, müxtəlif həndəsi fiqurlar toplusu kimi göstərir, amma bu, ikonun qavranmasına mane olmur. Yuxarıdakı ikonlara fikir verdinsə, heç bir element digərinə yapışmayıb, amma ikonun nəyi təsvir etdiyini (mənasını yox, məhz şəklini) problemsiz başa düşürsən.

Nümunə 10 — “Negative space” loqolar. Əlin içindəki boşluq telefon kimi qavranır, qolfçunun fiquru isə zərbə xətləri ilə birlikdə Sparta əsgərinin başını xatırladır.

Fərqləndirmə fəndləri

Bu fəndlər ümumi kütlə içində diqqəti hansısa konkret obyektə yönəltmək üçün işlənir. İnterfeys təkcə qruplar deyil, həm də fokus tələb edən nöqtələr üzərində qurulub. Bəs lazım olan nöqtələrə diqqəti necə çəkmək olar? Aşağıdakı prinsiplər köməyinə çatar:

Mərkəz

Göz mərkəzə baxarkən, gözü döndərən əzələlər minimal gərginlikdə olur; mərkəz bir növ gözün defolt halıdır. Buna görə istifadəçi bir anlıq diqqətini yayındırıb, yenidən ekrana baxdıqda, ilk növbədə mərkəzə baxır (bir az yuxarı da ola bilər, ekranın yerləşməsindən asılıdır). Element mərkəzdən uzaqlaşdıqca, onun birinci görülmə ehtimalı azalır. Buna görə əsas elementləri mərkəz hissədə yerləşdirməyə çalışın.

Nümunə 11 — Facebook. Facebook nümunəsi burada da işləyir. Mərkəzdə əsas bloklar, kənarlarda isə köməkçi olan elementlər yerləşdirilib. Əsas əməliyyat nədir? — Status yazmaq və kontentə baxmaq. Hardadır? — Düz gözünün qabağında.

Xətt vasitəsilə istiqamət

Söhbət həndəsi xətdən getmir, gözün hərəkət etdiyi yoldan gedir. Səhifədə çox element var, hərəsi bir dərədə, bəs göz onların hamısını birdən görür? — Yox, növbə ilə, birindən digərinə keçərək. Bəs keçmə ardıcıllığını necə müəyyən edir? Cavab: elementlərin əmələ gətirdiyi xəyali və ya əsl xətlərin köməyi ilə. Dizaynerlər bu ardıcıllığı özləri idarə edə bilirlər. Vəziyyət belədir ki, insanın (və bəlkə də bütün məməlilərin) gözü kəsilməyən xəttə rastladıqda, onun boyunca hərəkət etməyə meyillidir. Bu yolda qarşısına maneə çıxsa belə, göz birinci xətti bitirəcək, sonra isə qayıdacaq maneəni tədqiq etməyə. Bu xətt hansısa elementlərdən qurulduqda xəyali də ola bilər.

Nümunə 12. Sağdakı düymənin mövqeyi daha uduşludur, baxmayaraq ki, soldakı düymə daha böyük və gözəçarpandır. Sağdakı düymə hekayənin məntiqi sonudur, səhifənin nöqtəsidir, soldakı düymə isə mövqeyində dəqiq məna daşımadığına görə şübhə doğurur və klikləməyə sövq etmir.

İzolasiya

Elementləri bir-birinə yaxın qoyaraq, qruplaşdırmaq olur. Bu prinsipin əksindən istifadə etmək mümkündür: elementi fərqləndirmək üçün, onu digərlərindən ayrı saxlamaq olar. Bu zaman izolyasiya o elementə aksent verir, onu xüsusiləşdirir, xüsusi əşya isə həmişə diqqət tələb edir.

Nümunə 13 — Apple. Macbook şəklinin ətrafında heç nə olmadığına görə, məhsul önə çıxır və “burada əsas mənəm” deyir.

Nümunə 14 — Kinopoisk HD. Solda loqo, düymələr, sağda pleyerin idarə düymələri — həm ekran dolğun görünür, həm də elementlər özü özlüyündə xüsusiləşir.

Proporsiya

⤴ Maşın böyükdür, yoxsa kəpənək? Kəpənək maşın boyda olduğuna görə, maşına nisbətən normal ölçüsündən daha böyük qavranır.

Ölçünün sabit qavranmasından istifadə edərək, dizaynerlər iri göstərmək istədikləri obyekti xırdalaşmış fon üzərində təqdim edirlər. Məsələn, CTA düyməsini (Call to action — hərəkət çağırış) əslində böyük olmayan obyektlərlə yanaşı qoysan, düymə onlarla müqayisə ediləcək. Əksinə, uzaqda görünən mənzərə üzərində göydə asılmış bulud kimi qoysan, düymə daha nəhəng və önəmli kimi qavranacaq.

Nümunə 15 — Miqyas. Banka və limon üzərində olan düymə təxminən əl boydadır. Dağın üzərində olan düymə isə nəhəngdir. İkinci düymə daha şahanə və böyük, və buna görə də daha önəmli kimi qavranır.

Yekun

İstifadəçi səhvin nədə olduğunu bilməsə də, nəyinsə səhv olduğunu mütləq hiss edir və bunu “xoşuma gəlir” və ya “xoşuma gəlmir” kimi sözlərlə ifadə edir.

Əslində, qeştalt prinsipləri Fi ədədi kimidir: hissiyat üzərindən qurulan yaxşı interfeys belə, sonunda bu prinsiplərə əməl edir. İnterfeys dizaynı yalnız gözəllik deyil. İnterfeys alətdir, bütün alətlərin olduğu kimi rahat, erqonomik, insan psixikası və fiziologiyasını nəzərə alan olmalıdır. Qeştalt prinsipləri dizaynerə vizual iyerarxiya üzərində daha çox kontrol verir, dizaynlar daha səlis və məntiqli alınır və beləliklə, mesajı istifadəçiyə daha aydın şəkildə ötürür. Nəticədə həm dizayner, həm istifadəçi, həm də biznes udmuş olur.

P.S. Həm də ölkənin dizayn bazarının keyfiyyəti artır. 🙂

Telegramda Dizayn kanalımız: https://t.me/pashabankdesign