UX və UI: hər biri nə deməkdir və dizaynerə hansı sualları verməli
Bir çox brifdə "UX/UI dizayner" tələb olunur, sanki bu, ortasında xətt olan tək bir peşədir. Bəzən bir nəfər hər ikisini bacarır, amma bu iki sahə fərqli suallara cavab verir. Hansı suala cavab axtardığınızı bilmirsinizsə, yanlış insanı işə götürəcək, işi yanlış meyarla qiymətləndirəcək və əsl problemi həll etməyən yenidən dizayna pul ödəyəcəksiniz.
| Meyar | UX | UI |
|---|---|---|
| Əsas sual | İstifadəçi üçün işləyirmi? | Necə görünür, oxunur və reaksiya verir? |
| Diqqət mərkəzi | İstifadəçi yolu, struktur, hər addımın məntiqi | Yerləşmə, şriftlər, rəng, komponentlər |
| Tipik nəticələr | Araşdırma qeydləri, istifadəçi axınları, wireframe-lər, prototiplər | Ekran dizaynları, UI kit, dizayn sistemi |
| Əsas üsullar | Müsahibələr, analitika, istifadə testləri | Vizual iyerarxiya, brend qaydaları, əlçatanlıq yoxlaması |
| Necə qiymətləndirilir | Tapşırığın tamamlanması, yarımçıq tərk, dəstəyə müraciətlər | Vahid üslub, oxunaqlılıq, aydın hərəkətlər |
| Problem əlaməti | İstifadəçi azır və ya tapşırığı yarımçıq qoyur | Ekranlar bir-birinə uyğun deyil və ya çətin oxunur |
UX: istifadə edən insan üçün işləyirmi?
İstifadəçi təcrübəsi (UX) insanın bir işi görmək üçün keçdiyi bütün yolu əhatə edir: məhsulu tapmaq, variantları müqayisə etmək, qeydiyyatdan keçmək, ödəmək, dəstək almaq. UX dizayner bunları soruşur: istifadəçi kimdir, nəyə nail olmaq istəyir, harada ilişib qalır və məqsədə aparan ən qısa etibarlı yol hansıdır?
UX işi hazır məhsulda demək olar ki, görünmür. O, araşdırma qeydlərində, istifadəçilərlə müsahibələrdə, yol xəritələrində, informasiya arxitekturasında (məzmun və menyuların necə qurulduğu), istifadəçi axınlarında və wireframe-lərdə özünü göstərir. Wireframe rəng və üslub olmadan strukturu göstərən sadə boz sxemdir. Yaxşı UX dizayner vaxtının böyük hissəsini çəkməyə yox, istifadəçilərlə danışmağa və onların məhsuldan necə istifadə etdiyini müşahidə etməyə sərf edir.
Pis UX belə görünür: eyni məlumatı iki dəfə soruşan sifariş səhifəsi, bir xana səhv dolduranda hər şeyi silən forma, çatdırılma şərtlərini heç kimin tapa bilmədiyi menyu. Ekran gözəl ola bilər, UX isə bərbad.
UI: necə görünür, oxunur və reaksiya verir?
İstifadəçi interfeysi (UI) insanın real olaraq gördüyü və toxunduğu qatdır: yerləşmə, şriftlər, rəng, ikonlar, düymələr, boşluqlar, vəziyyətlər (basılmış, deaktiv, xəta, yüklənmə) və kiçik animasiyalar. UI dizayner wireframe-i brendə uyğun, istənilən ekran ölçüsündə rahat oxunan vahid vizual sistemə çevirir.
Yaxşı UI bəzək deyil. O, vizual iyerarxiya yaradır ki, göz əvvəlcə ən vacib hərəkətə getsin, düymələr düymə kimi görünsün, kontrast günəş işığında oxumağa kifayət etsin və bütün ekranlar bir-birinə uyğun olsun. Əsas nəticə dizayn sistemi və ya UI kit-dir: proqramçıların istifadə edəcəyi təkrar komponentlər və qaydalar.
Pis UI belə görünür: açıq boz fonda boz mətn, bir səhifədə beş fərqli düymə üslubu, yazısız heç kimin başa düşmədiyi ikon.
İkisi birlikdə necə işləyir
Bir binanı təsəvvür edin. UX planlamadır: qapılar haradadır, girişdən mətbəxə necə gedirsiniz, pilləkən məntiqli yerdədirmi. UI isə materiallar, rənglər, işıqlandırma və yönləndirici lövhələrdir. Əla planlaması olan, amma ucuz bitirilmiş bina ucuz təsir bağışlayır. Gözəl bəzədilmiş, amma qarışıq planlı binada isə insanlar yenə azır.
Praktikada iş düz xətt üzrə yox, dövrə şəklində gedir:
- Araşdırma: müsahibələr, analitika, dəstəyə gələn müraciətlər, rəqiblərin təhlili.
- Struktur: istifadəçi axınları, informasiya arxitekturası, wireframe-lər.
- Vizual dizayn: wireframe-lərə tətbiq olunan UI qatı və dizayn sisteminin komponentləri.
- Prototip və test: klik edilə bilən prototipin kiçik real istifadəçi qrupu ilə yoxlanması.
- Ötürmə: proqramçılar üçün komponentlər, vəziyyətlər və spesifikasiyalar.
- Ölçmə və təkmilləşdirmə: tapşırığın tamamlanma faizi, yarımçıq tərk, dəstəyə müraciətlər.
- Araşdırma
Müsahibələr, analitika, dəstəyə müraciətlər və rəqib təhlili istifadəçinin harada çətinlik çəkdiyini göstərir.
- Struktur
İstifadəçi axınları, informasiya arxitekturası və wireframe-lər üslubdan əvvəl məntiqi müəyyən edir.
- Vizual dizayn
Təsdiqlənmiş wireframe-lərə UI qatı və dizayn sisteminin komponentləri tətbiq olunur.
- Prototip və test
Klik edilə bilən prototip real istifadəçilərlə yoxlanılır; nəticələr çox vaxt bir addım geri qaytarır.
- Proqramçılara ötürmə
Proqramçılar sadəcə ekran şəkilləri yox, komponentlər, vəziyyətlər və spesifikasiyalar alır.
- Ölçmə və təkmilləşdirmə
Tamamlanma faizi, yarımçıq tərk və dəstəyə müraciətlər növbəti düzəlişi göstərir.
Test çox vaxt sizi ikinci addıma qaytarır. Bu, normaldır və problemi məhsul buraxılandan sonra tapmaqdan qat-qat ucuzdur.
Bir nəfər, yoxsa iki?
Kiçik sayt, landinq səhifəsi və ya ilkin mərhələdəki tətbiq üçün hər ikisini bacaran güclü bir məhsul dizayneri adətən kifayətdir. Böyük onlayn mağaza, bank tətbiqi və ya çox sayda istifadəçi növü olan məhsul üçün isə ayrı mütəxəssislər, heç olmasa dizaynerə dəstək verən UX tədqiqatçı lazım olacaq.
Xəbərdarlıq siqnalı yalnız cilalanmış ekranlardan ibarət portfoliodur. Araşdırmanın harada olduğunu soruşun. Testdən sonra nəyin dəyişdiyini soruşun. Ekranın niyə məhz belə göründüyünü izah edə bilməyən dizayner, çox güman ki, yalnız UI ilə məşğuldur. Sizə məhz UI lazımdırsa, bu, problem deyil, sadəcə bunu brifdə açıq yazın.
Dizayneri işə götürməzdən əvvəl veriləcək suallar
- "Bir layihəni problemdən nəticəyə qədər danışın." Yalnız vizuala yox, araşdırmaya, qərarlara və ölçməyə qulaq asın.
- "İstifadəçilərə nəyin lazım olduğunu necə öyrəndiniz?" Müsahibə, analitika, istifadə testləri, yoxsa fərziyyələr?
- "Eyni səhifənin wireframe-ini və son ekranını göstərin." Bu, onun əvvəlcə struktur üzərində düşünüb-düşünmədiyini göstərir.
- "Test nəyi dəyişdi?" Yaxşı dizayner geri götürdüyü bir qərarın adını çəkə bilir.
- "İşi proqramçılara necə ötürürsünüz?" Komponent kitabxanası, sənədləşdirilmiş vəziyyətlər və aydın spesifikasiyalar axtarın.
- "Əlçatanlıq məsələsinə necə yanaşırsınız?" Kontrast, şrift ölçüləri, toxunma sahələrinin ölçüsü, ekran oxuyucularına dəstək.
- "Bizdən nə lazım olacaq?" İstifadəçilərə çıxış, məlumatlar, brend qaydaları və vaxtında cavab verən qərar sahibi.
Brifə nə yazmalı
Brifdə ikisini ayırın. UX üçün biznes problemini, istifadəçiləri və onların yerinə yetirməli olduğu tapşırıqları təsvir edin. UI üçün brendi, platformaları və vizual gözləntilərinizi yazın. Dəyişdirmək istədiyiniz göstəriciləri qeyd edin: tamamlanmış qeydiyyatlar, sifariş səhifəsində tərk, konkret bir addımla bağlı dəstəyə zənglər.
Lazım olan dilləri də yazın. Bizim regionda məhsul çox vaxt iki-üç dildə işləməlidir və rus və ya Azərbaycan dilindəki yazı ingiliscədən xeyli uzun ola bilər. Yalnız ingilis dili üçün hazırlanmış dizayn real mətn gələndə dağılır, ona görə də dizaynerdən əvvəldən bütün dillərlə yoxlamasını istəyin.
Agentlik və ya frilanserlə işləyirsinizsə, nəticə kimi təkcə ekranları yox, araşdırma tapıntılarını da tələb edin. Bu tapıntılar layihə bitəndən çox sonra da faydalı qalır və növbəti komanda bunun üçün sizə minnətdar olacaq. Uyğun mütəxəssisi hələ axtarırsınızsa, platformada brif yerləşdirib portfolioları yan-yana müqayisə edə bilərsiniz.
Əsas nəticə
Növbəti brifdə "UX/UI dizayner" yazmazdan əvvəl hər biri üçün bir cümlə yazın: istifadəçi nəyi edə bilməlidir (UX) və məhsul necə görünməli, necə hiss olunmalıdır (UI). Əgər yalnız ikinci cümləni doldura bilirsinizsə, dizayna başlamağa hələ hazır deyilsiniz. Araşdırmaya başlamağa hazırsınız.