UI&UX დიზაინის კონკურსი დასრულდა. კონკურსის ფარგლებში მონაწილეებს უნდა შეერჩიათ ნებისმიერი ვებგვერდი ან მობილური აპლიკაცია და დაეწერათ მისი ანალიზი. კერძოდ, რას გააუმჯობესებდნენ, რას შეცვლიდნენ, რათა  მომხმარებლისთვის უფრო მარტივად გამოყენებადი და ვიზუალურად მიმზიდველი გამხდარიყო.

გამარჯვებული სამეული ცნობილია. ისინი UI/UX დიზაინის კურსს 100%, 50% და 30%-იან დაფინანსებით გაივლიან ციფრული ინდუსტრიის აკადემიაში.

გიზიარებთ გამარჯვებული სამეულის ნამუშევრებს:

პირველი ადგილი – მარიამ ჩიბურდანიძე

ვებგვერდი – www. miniso.ge

რას გავაუმჯობესებდი  :

1. საიტის დიზაინი არ არის ზედმეტად ქაოსური, თვალისთვის ადვილად აღქმადი და გარჩევადია, მაგრამ აქვს ბევრი ხარვეზი რაც თავიდანვე შეინიშნება.
2. საიტის ინტერფეისის ფერები არ ემთხვევა ბრენდის ფერების კონტექსტს, რაც იწვევს განსხავებულ ასოციაციებს. მინისოს ბრენდი შედგება წითელი და თეთრი ფერების კომბინაციისგან და საიტზე გამოყენებული ლურჯი ფერი კონფლიქტში შედის წითელ ფერთან და არღვევს ბრენდის პოლიტიკას. შესაბამისად, აქედან გამომდინარე ავირჩევდი ნეიტრალურ და სადა ფერს, რომელიც არ დაამძიმებს და გადააჭრელებს საიტს, თვალისთვის მარტივად აღსაქმელს გახდის.
3. ჰედერის სექციაში არ არის დაცული ბალანსი ლოგოსა და წარწერებს შორის. ჰედერში ლოგო არის ცენტრში, სასურველია და უმჯობესია ლოგო იყოს მარცხენა მხარეს, ხოლო მის მარჯვენა მხარეს, ჰედერის ცენტრში, ჰორიზონტალურად, ერთმანეთისგან თანაბარი პიქსელებით დაშორებულ ნავიგაციის მენიუს განვავთავსებდი. ნავიგაციის მენიუს მოვაშორებდი ბორდერებს და შევუცვლიდი fonts-ს. ინტერფესში გამოყენებული ორი სხვადასხვა ფონტი ერთმანეთს არ უხდება, გარდა ამისა თვალისთვის ცუდად აღსაქმელია. დავტოვებდი firago-ს ფონტს (გამოყენებულია კატეგორიების და ქარდების ჩამონათვალში), მეორე ფონტად ნავ.მენიუს დავუყენებდი nino_mtavruli-ს და ლურჯი ფერის ნაცვლად გამოვიყენებდი საიტზე გამოყენებულ ერთ-ერთ ფერს #484848. ნავ.მენიუზე მაუსით მიტანის დროს ჩაშლილ კომპონენტებს და სხვა გვერდზე გადასასვლელ ღილაკებს წავშლიდი, რადგან ჰედერში რეკომენდირებულია სუფთა და მარტივი დიზაინი მომხარებლისთვის, ადვილად აღსაქმელად და გასაგებად. რაც შეეხება ჰედერის მარჯვენა მხარეს, წავშლიდი სმაილის აიქონს და მის ადგილას ძიების აიქონს ჩავსვავდი, რომელზე დაჭერის დროსაც გამოჩნდებოდა ინფუთის ველი ინფორმაციის მოსაძიებლად. იგივე ფონტით დავაწერდი შესვლა/რეგისტრაცია-ს ბორდერის გარეშე. კალათის აიქონს დავტოვებდი მარტო, ხოლო რაც შეეხება ენებს, არჩევანს გავაკეთებდი GEO/ENG-სა და საქ,დროშა/ინგ.დროშას შორის. ჰედერის ქვევით, აიქონების გარეშე, ჰორიზონტალურად განვალაგებდი კატეგორიების ჩამონათვალს ,რომელზეც მაუსის მიტანის დროს ასევე ქვეკატეგორიებს ჩამოშლიდა. ეს დიზაინი მომხარებლისთვის მეტად გაშლილი და კომფორტული იქნებოდა.
   საიტზე ადვილად შეიმჩნევა დიდი ფონტები, რომლებიც თვალისთვის დისკომოფრტს და არაესთეტიურობის განცდას ტოვებს. პროდუქტების ქარდები მინიმალისტურია და ვფიქრობ მომხარებლისთვის სასიამოვნოდ დასათვალიერებლია, თუმცა მაუსის მიტანის დროს ლურჯ ბორდერებში ზედმეტად „ყვირის“ კალათის და თვალის აიქონები. კალათის აიქონს, ქარდის ბოლოში, ფასის მარჯვენა მხარეს, კუთხეში განვათავსებდი.
4. როგორც ჰედერი, ისე ფუტერიც მომხარებლისთვის არაკომფორტულად და არათანაბრად გამოიყურება. ორ სექციად დაშლილი ფუტერი თავისი ფერებით და ფონტის საიზებით არასრულყოფილი ინტერფეის ქმნის. მთლიან ფუტერის ინტერფეისს გავაერთიანებდი და ბექგრაუნდის ფერად დავუყენებდი #484848. ფუტერში მარცხენა მხარეს დავამატებდი ლოგოს, მის გვერდით მარჯვენა მხარეს კი ვერტიკალურად ჩამოვთვლიდი ცალკე ჰედერის ნავ.მენიუს და ცალკე ფუთერის მენიუს. საძიებო ველს განვათავსებდი ფუტერის მარჯვენა კიდეზე წითელი ღილაკით, მის ქვემოთ კი სოც.ქსელების აიქონებს. რაც შეეხება copyright-ის ტექსტს განვათავსებდი ფუტერის ქვედა ნაწილის ცენტრში, ზემოდან წვრილი,წითელი, მკრთალი ხაზით გამოყოფილი.ფუტერში, ჩემ მიერ არჩეული ფერი #484848, საშუალებას იძლევა ორივე ტონალობა წითელი და თეთრიც თავისუფლად გამოვიყენოთ აიქონებსა და წარწერებში და ჰარმონიული დიზაინი შევინარჩუნოთ, რის საშუალებასაც არ გვაძლევს ლურჯი ბექგრაუნდი.”

მეორე ადგილი – მარიამ გოგიშვილი

ვებგვერდი – Elitelectronics.ge – ee.ge

პრობლემები :

1. საიტზე ფორმები და ფერების კონსისტენტურობა იგრნობა.მრჩება შეგრძნება ,რომ ფერებზე ნაფიქრია, კონტრასტი კარგად არის ტექსტის ფერებსა და ბექგრაუნდს შორის რაც კითხვადობას აუმჯობესებს. ელემენტის ფორმები ყველა გვერდზე ერთ სტილშია.
   ფილტრი: ფილტრები რომელიც საშუალებას იძლევა დეტალურად გავფილტროთ პროდუქციის კატეგორია, მისი ტექნიკური მახასიათებლიდან დაწყებული ფერით და ზომით დამთავრებული.
   Breadcrumbs: საიტზე სადაც მომხმარებელს რამოდენიმე ლეიერის სიღრმეში უწევს შესვლა გვერდებზე, მარტივია დაიკარგოს და იმ გზის გავლა (user path) ახლიდან მოუწიოს რაც გაიარა. ამ შემთხვევაში Breadcrumbs ძალიან კარგი გამოსავალია რათა მომხმარებელმა შეძლოს მარტივად ნავიგაცია მთავარ გვერდზე დაბბრუნების და ბექ ღილაკის გამოყენების გარეშე.
2.  ჩატვირთვის ენა:საიტზე შევლის თანავე ვაწყდებით პირველ გაპარულ შეცდომას. მიუხედავად იმისა რომ ჩემი კომპიუტერი ქართულ ენას აპრიორიტეტებს და ლოკაციაც გახსნილი მაქვს და საქართველოში ვიმყოფები, ელიტ ელექტრონიქსის საიტი ჩაიტვირთა ინგლისურად, რამაც განაპირობა ჩემი დისკომფორტი ენის შეცვლის და მომწყვიტა “შოპინგის” ჩართული პროცესიდან და ყურადღება სხვა პროცესზე გადავიტანე.მარტივად გამოსასწორებელია: ვინაიდან სამიზნე სეგმენტი ქართველი ადამიანები არიან ძირითადად, ვებსაიტი ქართულ ენაზე უნდა იტვირთებოდეს იმ შემთხვევაში თუ ლოკაცია დაფარული მაქვს ან ვერ გაერკვევა რომელი ენა მაქ დაპრიორიტეტებული.
   Design responsively: ორი ზომის ეკრანზე შევამოწმე (MacBook Pro 14”, MacBook Air 15”) და ორივეზე დარღვეულია ფრეიმების ზომები, დაზუმვისას დიზაინში ტექსტები მცირედ ცვლილებაზე იწვევს არევას.
3. UX copy error: ენის ცვლილებისას ტექსტების ზომები საგრძნობლად განსხვავდება რაც იწვევს კომპონენტების ზომის ცვლილებას და ლეიაუტის შეცვლას რაც ძალიან არასასიამოვნოა.
4. აიქონები თავის ფრეიმებში არის ან დასაელაინაფებელი ან კიდევ არა თანაბარ ზომიანი აიქონები არის შუაში გაცენტრილი რომელიც ვიზუალურ ილუზიას ქმნის აიქონის ფორმიდან გამომდინარე რომ აიქონი შუაში არ ზის, ამ შემთხვევაში ჯობია ხოლმე აიქონი არ იყოს შუაში რათა თვალისთვის უფრო სასიამოვნო აღსაქმელი იყოს.
5. მობაილ კონსისტენტურობა: მობაილზე გახსნისას ზომებში აშკარა სხვაობა და პრობლემები გვხვდება მაგალითად ეგრეთწოდებული Breadcrumbs ზომა გაცილებით დიდია ვიდრე პროდუქტის ფასი, რა კატეგორიაში ვიმყოფებით.
6. ტექსტების ჰიერარქია: ტექსტების ზომები არის ძირითადად ერთი და იგივე ყველა ელემენტზე მთელი საიტის მასშტაბით,ასევე ტექსტიც წონაც (Light, Regular) მხოლოდ ფერებში არის სხვაობა რამაც უნდა მიგვანიშნოს ტექსტის დანიშნულება და პრიორიტეტი.

რას გავაუმჯობესებდი :

1.  ტექსტების ზომები/წონის შეცვლა უფრო მარტივად აღსაქმელს გახდის სხვადასხვა მნიშვნელობის ტექსტებსა თუ ღილაკებს.
2.  ტექსტების გაუმჯობესება მენიუში განსაკუთრებით, უფრო მოკლედ შეიძლება კატეგორიების გადმოცემა ან აღნიშვნა ვიდრე არის, რაც მენიუს უფრო მარტივად “დასასკანირებელს” (გადაკითხვის გარეშე გადახედვას და ინფორმაციის აღქმას) გახდის და ასევე ენების ცვლილების დროს ლეიაუთი ცვლილებას არ დაიწყებს, ასევე უფრო მობაილ ფრენდლი იქნება.
3. შევქმნიდი Drop down მენიუს სადაც უფრო კარგად იქნება გამოხატული კატეგორიები, ახლა არსებული კატეგორიების ხარჯზე რთულია კონკრეტულის მოძიება. კარგი მაგალითია მთავარ გვერდზე განთავსებული მენიუ
4. გამოვიყენებდი up to date დიზაინის ელემენტებს და მოვარგებდი დღევანდელობაში არსებულ ტრენდებს.
5. გამოვიყენებდი Cookies მომხმარებლის ინფორმაციის შესანახად და შევთავაზებდი მისთვის რელევანტურ პროდუქტსა თუ შეთავაზებებს.

მესამე ადგილი – ია მიქაძე

ვებგვერდი  – www.lutecia.ge

რას გავაუმჯობესებდი :

1. საიტის დიზაინის შედგენისას სწორ ფერთან ერთად მნიშვნელოვანია შეირჩეს სწორი ტონალობაც. ცნობილია, რომ თითოეული ფერს მომხმარებლისთვის განსაკუთრებული ემოციის მოტანა შეუძლია.
   ლუტეციას შემთხვევაში რამდენიმე ძირითადი ფერი შეიძლება გამოვყოთ. ესენია: შავი, ოქროსფერი, წითელი და ნაცრისფერი. ოქროსფერს საკმაოდ ხშირად ვხვდებით, იგი გამოყენებულია ლოგოში, ფილტრაციის მენიუში, ფასის კურსორში, ამავდროულად კატეგორიის არჩევისას მისი დასახელებაც მენიუს ქვემოთ გავლებულ ხაზში ოქროსფრად ანათებს. ასევე ოქროსფერს ვხვდებით ფავორიტებთან და საშოპინგო კალათასთან. იგი გამოყენებულია ინფოგრაფიკებშიც.
2. ოქროსფერი ასოცირდება ფუფუნებასთან და ხარისხთან. შესაძლოა ითქვას, რომ ამ ფერის გამოყენება ლოგიკური და სწორი გადაწყვეტილებაა, როცა პარფიუმერიაზე ვსაუბრობთ, მაგრამ ოქროსფრის ტონალობა რომელიც არჩეულია ვთვლი რომ აუფასურებს საიტის დიზაინს. ამავდროულად მნიშვნელოვანია ვახსენოთ ისიც, რომ დაბალი კონტრასტიდან გამომდინარე ნაცრისფერს, თეთრსა და ოქროსფერს შორის, ღია ოქროსფრად დაწერილი ტექსტი თეთრ თუ ნაცრისფერ ფონზე საკმაოდ რთულად იკითხება. იგივე მოცემულობაა წითელ და შავ ფერებთანაც. წითელი რომელიც ლოგოს ქვემოთ წარწერის ფონადაა გამოყენებული ძალიან მჭახეა და ართულებს მასზე შავი ტექსტის კითხვას.
   ღია ნაცრისფერი ფიგურები, რომლებიც გამოყენებულია ფილტრაციისა და საიტზე მდებარეობის აღსაწერად, არაჰარმონიულად ერწყმის ფერებს, ხოლო მასზე კვლავ ნაცრისფრად დაწერილი ტექსტის წაკითხვა, ისევე როგორც ერთი შეხედვით გამორჩევის მიზნით გაოქროსფერებული სიტყვების ამოკითხვა, საკმაოდ რთულია.
3. კონკრეტული პროდუქტის არჩევის შემდეგ კიდევ ერთ მნიშვნელოვან დეტალს ვაწყდებით. თითოეული ბრენდის სახელი წითლადაა დაწერილი, რაც ვფიქრობ სამ ძირითად ფერში(მოოქროსფრო, მუქი ნაცრისფერი(თითქმის შავი) და წითელი) დარჩენის მცდელობას ემსახურება . მიუხედავად იმისა, რომ გაწითლებული ტექსტი მომხმარებლის ყურადღებას იქცევს, გამოყოფილი წითელი ფერი ასოცირდება საფრთხესთან და არასწორთან. ეს რა თქმა უნდა კარგად იქცევს ყურადღებას, მაგრამ ტოვებს არასასიამოვნო განცდას.
4. ვფიქრობ რომ ნაცრისფრის ნაცვლად შესაძლებელია როგორც ოქროსფერი ისე შავი ფერის გამოყენება. თითოეული ფერის ტონალობა სწორად უნდა შეირჩეს. სწორად შერჩეული ოქროსფრის შემთხვევაში შავ ლენტზე დაწერილი თეთრი ტექსტი კურსორის მიტანისას შესაძლოა გაოქროსფერდეს. ბრენდის სახელის დასაწერად გამოვიყენებდი უბრალოდ შავ გამუქებულ ტექსტს, რომელიც თავიდან ბოლომდე დიდი ასოებით იქნებოდა შედგენილი. იმ შემთხვევაში თუ წითელი ფერი აუცილებლად უნდა იქნეს ლოგოში გამოყენებული, გამოვიყენებდი შავ, ლოგოს ზომის ხაზს. იქიდან გამომდინარე, რომ შავს წითელი ბევრად კარგად ერწყმის, ვიდრე თეთრს ვფიქრობ ეს კარგი გამოსავალია.
   საინტერესოა ფაქტი რომ „ისი-პარიც“ იმავე ფერებს: შავსა და ოქროსფერს იყენებს, საიტზე შერჩეული ოქროსფერი კი საკმაოდ გავს „ლუტეციას“ „ოქროსფერს.
5. შემდეგი პრობლემა, რომელსაც ვაწყდებით საიტზე გამოყენებული ფოტოებისა და ინფოგრაფიკების დაბალი ხარისხია. ფანჯარა „დაწვრილებით“ კარუსელში უხეშად შემოდის კომპოზიციაში, ამავდროულად ართულებს ფოტოზე არსებული ტექსტის კითხვას. ამ პრობლემის გადასაჭრელად, ჩამოვწევდი “დაწრვილებით“-ს კარუსელს გარეთ, ხოლო თითოული მათგანი შესაბამის გვერძე იქნებოდა კავშირში.
   ცალ ცალკე გამოყოფილია ბრენდები და კლასიფიკაციაც მრავალჯერაა შესაძლებელი, მაგრამ უფრო მარტივი იქნებოდა თუ ბრენდების ჩამონათვალი ძირითადი ფილტრის ნაწილი იქნებოდა და არა კონკრეტული პროდუქტის გახსნის შემდეგ ნაჩვენები მენიუსა, რომელშიც ბრენდის სახელზე დაწოლით მოვხვდებით. მსგავსი მდებარეობა დამაბნეველია, რადგან მომხმარებელთა უმეტესობა მიჩვეულია რომ ბრენდთა ჩამონათვალი ფილტრში მდებარეობს, მისი ძებნა უფრო რთულს ხდის საიტის გამოყენებას.
6. საიტზე გვხვდება ერთი და იმავე ფუნქციონალის მქონე ელემენტები: საძიებო სისტემები: ერთი ფოტოებით აწყობილი, ხოლო მეორე საიტის დასაწყისში. იგივე შეიძლება ითქვას ფასდაკლების სამ სხვადასხვა გამოსახულებაზე, ერთი სპეციალური შეთავაზებები, ხოლო მეორე მარჯვენა მხარეს ფასდაკლებები, მესამე ძირითად მენიუში. საინტერესო იდეაა ბესთსელერებისა და ვებგვერდის სიახლეების კატეგორიების მიხედვით დაყოფა, ეს უფრო ამარტივებს საიტის გამოყენებას. კვლავ გაუგებარია რა საჭიროა პოპულარული გვერდითა მხარეს, რომელიც იგივე საქმეს ასრულებს. თუ გვსურს მენიუს ფოტოებით იმპელემნტაცია , სჯობს გამოვიყენოთ კარუსელი.
7. სუნამო ასოცირდება, რაიმე განსაკუთრებულთან, იშვიათთან და ინდივიდუალრთუან. მგონია, რომ არანაკლებ მნიშვნელოვანია სწორი შრიფტის შერჩევაც, ამ შემთხვევაში გამოყენებულია Arial ფონტი, ვფიქრობ, უფრო საინტერესო იქნებოდა უფრო იშვიათად გამოყენებული/ჯერ-ჯერობით უცნობი შრიფტის გამოყენება, რათა საიტს უფრო განსაკუთრებულის შთაბეჭდილება დაეტოვებინა პროდუქტის სპეციფიკიდან გამომდინარე.
   საინტერესოა ისიც, რომ საიტის ინგლისური ვერსიის გამოყენებისას ტექსტი ინფოგრაფიკებზე კვლავ ქართულად რჩება, ისევე როგორც ვალუტის აღმნიშვნელი სიმბოლო „ლ“ და არა საერთაშორისოდ გამოყენებული “GEL”, რაც შეიძლება დამაბნეველი აღმოჩნდეს მათთვის ვინც ქართული არ იცის, ანუ მათთვის, ვისთვისაც შექმნილია საიტის ეს ვესია.