Biz tez-tez sizin üçün faydalı məqalələr tərcümə edirik. Bu. dəfəki məqaləmiz dizayn barəsindədir. Məqalə sizə UI-dizaynın UX-dizayndan nə ilə fərqləndiyini və interfeys dizaynının hansı prinsiplərə əsaslandığını izah edəcək.

    Əgər siz proqram təminatları ilə maraqlanırsınızsa mütləq ki UI və UX terminlərini eşitmişsinizdir. Bəs onlar nə ilə fərqlənirlər? 

    Asan dil ilə izah etməli olsaq, UX-dizayn interfeysi faydalı edəndir, UI dizaynla isə görüntü gözoxşayan olur. İnterfeys dizaynı vizual ierarxiya və interfeys elementlərinin bir növ qarışığıdır. Gözəl dizaynın yaxşıdan fərqini görə bilmək üçün başa düşməliyik ki, interfeys dizaynı bütöv dizayn prosesinin yalnız kiçik bir qatıdır. Bu məqalədə mən sizə dizayn-proses baxımından fərqləri izah edəcəyəm.

    C.Qarret-in “Əlaqə təcrübəsinin elementləri” kitabına əsasən, UX-dizayn-ı beş mərhələ əsasında müəyyən etmək olar. Gəlin ən abstrakt olanından başlayaq.

    Məhsulun məqsədləri və istifadəçilərin tələbləri

    Strategiya məhsul dizaynının təməlini təşkil edir. Bu mərhələ zamanı bir sıra araşdırma işləri aparılır. Buna daxildir: istifadəçi müsahibələri, rəqiblərin araşdırılması, personajların müəyyənləşdirilməsi və s. Bu əməliyyatlar bizə 3 suala cavab tapmaq üçün lazımdır:

    Funksional spesifikasiyalar və kontentə dair tələblər.

    Bu mərhələdə siz funksiyalar toplusunu və ötürüləcək olan məlumatın qədərini müəyyən etməlisiniz. Digər sözlərlə:

    Dizayner burada prioritetləri müəyyənləşdirməyə başlayır. Mütləq ki probleminizin ətrafında yüzlərlə ideya və vasitələr var amma siz hamısını eyni anda nümayiş edə bilməzsiniz. Ardıcıllıq barədə düşünməlisiniz.  

    İnformasiya arxitekturası və əlaqələrin layihələşdirilməsi.

    Bu mərhələ zamanı siz ideyalarınızı artıq strukturlaşdırmağa başlayırsınız. İnformasiya arxitekturası vasitəsilə siz məlumatın necə təqdim olunmasını və istifadəçinin bunları necə qəbul edəcəyini təyin edirsiniz. Burada əsas məqsəd istifadəçinin bir konkret problemini həll etmək üçün hansı addımlardan keçəcəyini müəyyənləşdirməkdir. 

    İnterfeys və malumatların dizaynı

    Bu addımda işimiz artıq daha aydın və konkretləşmiş olur.

    Tərtibat zamanı biz interfeys dizaynını və məlumat dizaynını ayıraraq strukturu dəqiqləşdiririk. İstifadəçinin sistemin funksionalından yararlanması üçün qarşısında olan dizayn elementlərin yerləşdirilməsinə görə interfeys dizaynı cavabdehdir. İnformasiya dizaynı isə burada bu məlumatın nə dərəcədə asan tərtib olunmasını təyin edir.

    Məhz bu addımda UX dizaynerlər Wireframe-lər ilə işləməyə başlayırlar. Wireframe-lar aralarından istəyinizə yaxın olanını tapa biləcəyiniz ağ qara maketlərdir. Bunlardan yararlanaraq hər elementin təyinatını müəyyən edirsiniz.

    Və nəhayət:

    Vizual Dizayn və hissiyat əsaslı qavrama

    Səth mərhələsi, elə adından göründüyü kimi, hissiyat əsaslı qavrama və vizual dizayn üçün lazımdır. Dizaynerin burada əsas məqsədi brend ilə istifadəçi arasında intuitiv əlaqə yaratmaqdır. Bu mərhələ üçün Dizaynerlər Sketch, Photoshop, Adobe Experience Design, Illustrator , Figma kimi tətbiqlərə üz tuturlar.

    İndi isə gəlin UI dizaynın əsas prinsiplərinə baxaq.

    Tətbiqdə qərarsız qalması nə edəcəyini bilməsi dizayner üçün ən dəhşətli istifadəçi davranışıdır. Bu düymə nə edir? Bura necə gəldim? Geri necə qayıdım? İstifadəçinin bu suallarla tək qalmaması üçün dizayner daima özü özündən soruşmalıdır:

    Mən niyə buradayam? Tətbiqin bu hissəsinin mənası nədir? Bunu başqa cür necə eləmək olar?

    Yaxşı dizaynerlər interfeys maketi yaratmaq üçün müxtəlif vasitələrə əl atırlar. Bununla onlar potensial qüsurları, yetərsizlikləri anlayıb, istifadəçiyə hansı dizayn həllinin daha asan gələcəyini müəyyən edirlər. Dizaynın asan görünməsi istifadəçiyə özünəəminlik verir.

    Biz tez-tez belə sayt və tətbiqlər ilə raslaşırıq, harada ki, sən düyməni klikləyirsən amma heçnə baş vermir və sən onun işləyib işləmədiyini anlamırsan.

    Sadə dil ilə desək hər bir hərəkətin reaksiyası olmalıdır. Məsələn əgər veb-tərtibatçısınızsa, o zaman :hover kimi vasitələrdən düzgün yararlanmalısınız.

    Facebook-da postların yüklənilmə indikatoruna nəzər yetirin. Kontent yüklənilənəcən kontentə bənzər indiqator (boz) istifadəçiyə buraya kontentin yükləniləcəyini göstərir.

    Davamlılıq barədə danışanda mən interfeys elementlərinin yerləşməsinin davamlı olmasını nəzərdə tuturam. İstifadəçiniz interfeysinizə öyrəşdikdən sonra onu hər şeyi başdan öyrənməyə məcbur etməyin. Gəlin davamlılığın pozulduğu bir nümunəyə baxaq.

    İlk baxışdan bunların üç fərqli şirkətin 3 fərqli saytı olduğunu zənn edə bilərsiniz. Əslində bu belə deyil. Bəs problem haradan qaynaqlanır? Səhifələrdə menyunun həm rəngi, həm şriftləri  və hətta yerləşməsi də fərqlidir. Bunlar istifadəçini dezorientasiya edir və çaşdırır. Menyunun səhifədən asılı olaraq bu qədər dəyişməsi istifadəçini çaşdırır. O, fərqli səhifələrə deyil, fərqli saytlara girdiyini düşünərək diskomfort yaşayır. 

    Dizayner davamlılığı necə saxlaya bilər? Bunun üçün daimi tora-dan yararlana bilərsiniz. Məsələn 8 bəndli bir tora yarada bilərsiniz. Bu tora ikon dizaynı və mobil tətbiq dizaynı üçün istifadə olunur. Həmçinin siz daimi rəng qammasından və naviqasiyada həmişə eyni elementlərdən istifadə edərək də bunu gerçəkləşdirə bilərsiniz. Hər ehtimala bu qaydaları özünüz üçün tərz təlimatında toplayın. 

    Nəticə: Davamlılıq və yaxşı struktur istifadəçilərinizə özlərini evdəki kimi rahat hiss etməyə imkan yaradacaq.

    Məni düzgün başa düşün - innovasiya yaxşıdır və istənilən formada xoş qarşılanır, lakin bu, istifadəçinin vərdişli rahatlığını pozmamalıdır. Yenidən velosiped ixtira etməyə ehtiyac yoxdur. Ələl xüsus köhnəsi öz işini yaxşı görə bilirsə. Məsələn, əgər siz planladığınız ikonun lazımlı sözün mənasını dəqiq və intuitiv çatdırmasından əmin deyilsinizsə yaxşısı budur elə sözün özünü yazın. Və ya həmişə əsas rəng qammasından yararlanın, haradaki təhlükə barədə bildirişlər sarı, müvəffəqiyyət mesajları isə yaşıl rəngdədir.

    Niyə məşhur dizayn-patternlərindən istifadə etmək yaxşıdır? Məsələ burasındadır ki, bu patternlərin çoxu insan dərrakəsinə əsaslanır. Məsələn məlumat skanlanmasına aid olan F-paterninə nəzər yetirək.

    İstifadəçi ekrana baxan zaman gözlərinin baxış bucağı izlənilib və haralara baxması müəyyən edilib. 

    Ən çox baxılan hissələr qırmızı rəngdə ən azbaxılan hissələr isə göy rənglərdədir. Gördüyünüz kimi istilik xəritəsi F hərfini xatırladır. Dizayner üçün bu nə deməkdir?

    Bu o deməkdir ki, ən vacib kontenti sol yoxarı küncdə yerləşdirmək lazımdır.

    Adətən orada loqotip yerləşdirilir. Bu, şirkətə öz brendini sürətləndirməkdə yardımçı olur. Yuxarı sağ küncdə naviqasiya və ya axtarış ola bilər. Belə olduqda istifadəçi səhifələrdə naviqasiyanı tez və asan tapır və bu, istifadəni daha da rahatlaşdırır. Bu prinsipə dayanan iki nümunə ilə tanış olaq.

    Səhifədə aşağı düşdükcə istifadəçinin diqqəti azalır. Ona görə də çalışın ən vacib məlumatları yuxarı hissəyə maksimal dərəcədə yaxın yerləşdirin və başlıqları seçilən edin ki, kontenti göz ilə tez skan eləmək istifadəçiyə asan olsun.

    Vizual ierarxiya nədir? Bu, elementlərin vacibliyini özündə əks edən ardıcıllıqdır.  Bu, dizaynerin "istifadəçi birinci nəyə baxmalıdır? ", "sonra nəyi görəcək? " kimi sualları cavablayaraq istifadəçi üçün xəritə çəkib, elementləri bu xəritəyə uyğun yerləşdirib, istifadəçini lazım olan yol ilə yönəltmək cəhtidir. 

    Bizim, informasiyanı necə qəbul etməyimiz bir neçə faktordan asılıdır. Gəlin vizual ierarxiya əsaslarına baxaq.

    Tipoqrafiyanı yaxşı edən iki əsas faktor var: Aydınlıq və oxuma rahatlığı.

    Aydınlıq müəyyən şriftin hərflərinin bir-birindən nə dərəcədə seçilən olmasından asılıdır. Bu, bütünlükdə şriftdən asılıdır. Ona görə də font seçimi edərkən diqqətli olun.

    Oxuma rahatlığı - Bu, sizin şriftlər ilə necə manipulyasiya etməyinizdən asılıdır.

    Gördüz? Yuxarıdaki yazını oxumaq  aşağıdakindan daha çətindir. Razı deyilsinizsə...

    Oxuma rahatlığına təsir edən diqər məqamlardan biri sətr uzunluğudur. 

    Əgər sətr çox kiçikdisə, istifadəçi daima sətrdən sətrə  hoppanacaq və bu, məlumat axınını qəlizləşdirəcək. Sətr həddindən artıq uzun olduqda isə gözlər tez yorulur və istifadəçi heç axıracan oxumaq istəmir. 

    Həmçinin heç vaxt böyük mətn bloklarını mərkəzləşdirməyin. Sola bərkidilmiş mətnin oxunulması daha rahatdır. Göz növbəti sətrin harada başlayacağını dəqiq bilir.

    Heç elə olubmu ki, siz menyu sayt və ya digər nəyinsə interfeysinə baxıb düşünmüsünüz: “Bu görünüş çox xoşuma gəlir, amma niyəsini anlamıram”? İndi bilirsiniz. Bütün sirr ağ boşluqlardadır. Ağ boşluqlar qavramada çox köməkçi olurlar. 2004-cü il araşdırmaları göstərdi ki, abzaslar arasında, habelə sol və sağ sahələrdə boşluq qoyduqda məlumatın qavranılması 20% daha asan olur. İstifadəçiyə belə kontentdə fokuslanmaq və onu dərk eləmək daha asan olur. 

    İt yoxsa pişik?

    Çoxları hesab edir ki, ağ boşluq - zövq məsələsidir. Mən isə bunun hər kəsə aid olduğunu düşünürəm. Biz, vizual ierarxiyanı möhkəmləndirmək üçün ağ boşluqlardan əminliklə istifadə edə bilərik. Gəlin Helen Tran-ın saytına baxaq.

    Gözəl portfoliodur! Gəlin bir daha diqqətlə baxaq.

    Fikir verdinizsə, kontent aydın dörd bloka bölünüb. Gəlin daha irəli gedək.

    Helen interlinyaj, şrift ölçüsü, rəng və ağ boşluq kombinasiyasından istifadə edərək hər blokun içində də kontenti aydın parçalara bölür. Bu, istifadəçiyə məlumatı tez skan etməkdə kömək olur.

    Rəng nəzəriyyəsi, əslində çox-çox çətindir. Mənim məqsədim sizə bütünlüklə bu nəzəriyyəni izah etmək deyil. Sadəcə bir neçə prinsiplərə nəzər yetirəcəyik.

    Yuxarıdaki şəkilə diqqət yetirsəniz görərsiniz ki, soldaki dördkünc sizə daha uzaqdaymış kimi görünür, nəinki sağdaki qırmızı dördkünc. İsti rənglər daha yaxın görünür gözümüzə. Soyuq rənglər isə fonla qarışaraq sanki uzaqlaşırlar. Gəlin bir nümunəyə də baxaq:

    Dizayner isti qırmızı rəngdən istifadə edərək hərəkətə çağırışı daha seçilən edir və naviqasiya sanki fonda batır. Eyni misalı biz soldaki illustrasiya bərədə də deyə bilərik - ildırımlı qırmızı ikon bütün rəsmdən seçilir.

    Siz rəngdən istifadə edərək oxşar elementləri də qruplaşdıra bilərsiniz.

    Və nəhayət, az daha çox deməkdir. Nə qədər çox rəng istifadə edirsinizsə elementlərin mənaları o qədər azalır. Əla nümunə üçün instagramın son redizaynına diqqət edə bilərik.

    Instaqram öz interfeysində istifadə olunan rənglərin sayını azaldaraq nəinki şəkilləri daha seçilən elədi, bildirişlər də daha effektiv görünməyə başladılar. Çünki onların artıq yuxarı və aşağı panellər ilə rəqabət aparmasına ehtiyac qalmadı. 

Orijinal: Uİ Crash course

Tərcümə: Həsənağa Azad