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

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

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

პირველი ადგილი – ინოლა ფოჩხუა

ვებგვერდი -Alta.ge  (მობილური ვერსია)

არა რეგისტრირებული მომხმარევლის გამოცდილება.

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

• ავტორიზაციის ღილაკი მკრთალი, ტექსტს “ავტორიზაცია” ჩავანაცვლებდი “გთხოვთ გაიაროთ ავტორიზაცია”. ღილაკი უნდა იქცევდეს უფრო მეტ ყურადღებას.
  მომხმარებელს ეძლევა საშუალება შეკვეთის გაფორმების დროს, გაიარო რეგისტრაცია, აირჩიოს მისამართი, გადახდის მეთოდი, გაეცნოს და დაეთანხმოს ყველა პირობას. გვერდი არის გრძელი და შეიძლება ზოგ მომხმარებელს პროდუქტის ონალინ შეძენის სურვილი დაუკარგოს. კარგი იქნებოდა ეს დიდი გვერდი გაეყოთ step ებად. Ბიჯების რაოდენობა უნდა იყოს მითითებული ზევით. თითო გვერდზე უნდა იყოს განთავსებული რეგისტრაცია, გადახდის მეთოდი და კალათაში არსებული ნივთები ჯამი, სამომხმარებლო პირობები, შეკვეთის განთავსების ღილაკი.
  არალოგიკურია ჯერ შეკვეთის ღილაკი და შემდეგ კალათაში არსებული პროდუქტების ჩამონათვალი, ამან შეიძლება უყურადღებო მომხმარებელი დააზარალოს თუ რაიმე შეეშალა კალათაში დამატების დროს. კალათაში არსებული ნივთებს ვერ არედაქტირებ, ვერ შლი. აუცილებელია პროდუქტის წაშლის და რაოდენობის დამატება შემცირების ფუნქციონალის დამატება.
• ნივთის წაშლამდე აუცილებლად ვკითხოთ მომხმარებელს უნდა თუ არა ამ ნივთის წაშლა. გვერდის დარეფრეშებისას მომხმარებელის შეყვანილი მონაცემები არ უნდა წაიშალოს.
• გადახდამდე სასურველია პოპაპის დამატება, სადაც მოხრმარებელი დარწმუნდება შეკვეთის სისწორეში მისამართი, პროდუქტები ფასი.ამ step-ზე საჭიროა თანხმობის და რედაქტირების ღილაკი.
• “Სახლში მიტანის” ღირებულების ღილაკის ადგილი შესაცვლელია. ამ ინფორმაციას უშუალოდ შეკვეთის გაფორმებამდეც გამოვიტანდი კალათის პოპაპში,(ამ პოპაპიდან გადადიხარ შეკვეთის გაფორმების გვერდზე), რომ თავიდანვე ჩანდეს რამდენი არის მიწოდების საფასური. თუ მომხმარებელი არ არის რეგისტრირებული უნდა იყოს მითითებული “ამ თანხას შეიძლება დაემატოს მიწოდების საფასური” და იქვე უნდა იყოს ტექსტური ლინკი “გაეცანით მიწოდბის წესებს და ფასებს”. მისამართის დაფიქსირდების შემდეგ მალევე უნდა გამოჩნდეს მიწოდების საფასური რომ არ ვაწვალოთ მომხმარებელი თუ ფასი არ აწყობს.ვიზუალური მხარე:
  
  სხვადასხვა ფონტის ზომები. გაუგებარია რომელი ტექსტი არის უფრო მნიშველოვანი. ტექსტებს და ველებს შორის სივრცეები არეული.
  Შესაყვანი ველები, გადახდის მეთოდები ღილაკები ყველა სხვადასხვა ზომაა. ველებში მითითებულია ფლეისჰოლდერები, რაც კარგია, თუმცა ველზე გადასვლისას ეს ტექსტიც იცვლის ზომას და ადგილმდებარეობას ველის შიგნით. სასურველია ფლეისჰოლდერი ველის თავზე იყოს განლაგებული ან ველის გააქტიურების შემთხვევაში გაქრეს. Შეკვეთის დამადასტურებელ მთავარ ღილაკში ტექსტი არ ეტევა.
• სათაურები: გამოვიყენებდი ალტას ბრენდბუქის ასომთავრულ ფონტს. ამით ვიზუალურად გამოვყოფდი სათაურებს. ფერი ან ალტას იასამნისფერი ან მუქი ნაცრისფერი შავთან ახლოს.
  ველები: გააქტიურების დროს ძალიან იზრდება ბორდერი თავისი, უბრალოდ ფერს შევცვლიდი იასამნისფრად. ველებს შორის სივრცე გასაზრდელია და დასარეგულირებელი.
• სამომხმარებლო პირობები: ლინჰეითებია გასაზრდელი ტექსტი მიჭყლეტილია.
• გადახდის მეთოდებს დავამატებდი სათაურს. შეიძლება შემცირდეს ზომაში და დროფდაუნით შევცვალოს.განსაკუთრებით მობილურ ვერსიაზე რომელსაც ამ შემთხვევაში ვუყურებ
• ღილაკები: (შეკვეთის ღილაკი და “ვეთანხმები პირობებს” სამომხმარებლო პირობებში) ღია ყვითელი ფერი არ უხდება, არაინტუიტიურ ასოციაციას ქმნის. ალბათ გამოვიყენებდი ისევ იასამნისსფერს. ფონტს ასომთავრულს. ღილაკი “ავტორიზაცია” მხოლოდ იასამნისფერი ბორდერი რომ ყურადღება მიექცია ან წითელი ფერი უფრო დიდი ყურადღების მისაქცევად. რადგან გვერდზე მთავარი მაინც შეკვეთის ღილაკი რჩება, Მთავარ აქცენტს დავტოვებდი ამ ღილაკზე.
• შეკვეთილი პროდუქტების ბლოკში უფრო მკვეთრად გამოვყოფდი ფასებს და ჯამურ ფასს.
• ფიზიკური და იურიდიული პირის ასარჩევი ტექსტები მიჭყლეტილი და ტექსტის ზომა პატარაა.
• “ავტორიზაცია” ღილაკის დაჭერაზე პოპაპი სადღაც ზევით არის ავარდნილი. და არ უნდა ვსქროლოთ რომ რაიმე საჭირო ინფორმაციას მივაგნოთ.
• Ტექნიკური შეცდომები რომლებიც აუარესებს მომხმარებლის გამოცდილებას: ვალიდაცია არ მუშაობს კარგად. მხოლოდ შეკვეთის განთავსების შემდეგ აქტიურდება არასწორად შევსებული ველები, მაგრამ გვერდი ყოველთვის არ ისქროლება იმ მიმართულებით სადაც შეცდომაა. Ხანდახან ძებნა გიწევს არავალიდური ველის. Შეცდომის გამოსწორების შემდეგ ველი რჩება გაწითლებული და დამაბნეველია. სასურველია გამწვანდეს ან წითელი ტექსტი/ბორდერი გაქრეს. Ზოგი ველი გავარდნილია მარჯვნივ(მობილური ვერსია).
• ჩემს მოფიქრებულ ვარიანტში,რომელიც ამ გრძელ გვერდის გაყოფას გულისხმობდა ზემოთ,მომხმარებელს არ გადავიყვანდი სხვა გვერდზე თუ ამ გვერდზე საჭირო ველები არ არის შევსებული, არ არის მონიშნული რომელიმე სამომხმარებლო პირობა და ა შ. ან შეკვეთის დროს გადავიყვანდი შ3საბამის გვერდზე და ნათლად მივუთითებდი რა გამორჩა. მნიშვნელოვანია რომ წინა და შემდეგ step-ზეგადასვლა იყოს შესაძლებელი.

ავტრიზებული მომხმარებლის შემთხვევაში დიდი არაფერი შეცვლილა. არის მისამართის ცვლილების და დამატების ფუნქცია რაც კარგია. თუმცა ბევრი იასამნისფერია ბორდერი, 2 ტექსტი.
მისამართის დამატება/შეცვლის ტექსტს ფერს შევუცვლიდი და გავაერთიანებდი “მისამართის შეცვლა ან დამატება” რადგან მაინც პროფილის გვერდზე გადავყავართ. ტექსტები დასახვეწია
გვერდის სახელწოდება :”შეკვეთა” შევცვლიდი “თქვენი შეკვეთა”
“სახლში მიტანა”-ის მაგივრად მიწოდების ან ტრანსპორტირების საფასური.
“სულ თანხა” 15 ლარი სასურველია “ჯამი” ან “ჯამური თანხა”
“დღგ 18% ჩართულია” 🙂 და ა.შ.

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

ვებგვერდი – Dressup.ge

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

• გვერდზე გადასვლისთანავე ვხედავთ ზედმეტად გადატვირთულ, ტექსტებით დატვირთულ ინტერფეისს.მასზე არ არის დაცული,ფონტის და ინფორმაციის სწორად განთავსები იერარქია.
  ვებ-გვერდის check out გვერდის პირველი ნაწილი მთლიანად ეთმობა ძებნის,კატეგორიების ჩამონათვალს და ავტორიზაციას.
• მისი გადანაწილება უფრო კომფორტული იქნებოდა მომხარებლისთვის შემდეგნაირად: კატეგორიების ნაწილი გაგვეკეთებინა burger menu- სახით, მის გვერდით განთავსდებოდა საძიებო ველი, მეტად თანამედროვე დიზაინით მართკუთხედის ფორმით 10 გრადუსიანიმომრგვალებებით, შემდეგ სურვილების სია რომელიც გამოყოფილი იქნებოდა icon-ით და შემდეგ ჩანთა და ავტორიზაცია. მის ზემოთ არსებული ინფორმაცია, ენის შეცვლა, ბრენდები და სასაჩუქრე ბარათი გადანაწილდებოდა ვებგვერდის სხვა გვერდზე,რადგან გადახდის გვერდისთვის ეს არასაჭირო დატვირთვაა.
• უშუალოდ საყიდლების ჩანთის დიზაინის ზოლი, ზედმეტად დიდ ადგილს იკავებს გვერდზე, ამასთანავე მისი ფონტის ზომა ზედმეტად მცირეა, ვისურვებდი სათაურის ფონტის ზომას 20pt, ხოლო ქვედა წარწერებს 14pt.
  უფრო კომფორტული იქნება მომხარებლისთვის თუ გადავანაწილებთ შემდეგნაირად. მომხმარებლის პერსონალურ მონაცემებს ამოვიტანთ მის ადგილას. დავტოვებთ შესავსებ ველებს- სახელი, გვარი, მობილური, მისამართი,რომელსაც ველშივე ექნება რუკაზე პინის მოსანიშნი ფუნქცია, რადგან ეს კონკრეტული შეამცირებდა ჩამონათვალს შესავსები ველების, როგორიც არის
  ”მუნიციპალიტეტი,ქვეყანა,მისამართი სახლის.” დავუმატებდი ჩამონათვალს, დამატებითი კომენტარის გრაფას რომელიც, გაუმარტივებდა დელივერს და ასევე მომხარებელს ზუსტად აეღწერა, სად და რა სიტუციაში აიღებს ამანათს.
  მიმდინარე ვაუჩერების ჩამონათვალი უკეთესია განთავსდეს მთავარ გვეერდზე და არა ნივთის შესყვიდის.
• რაც შეეხება შეკვეთის ნაწილს, რომელიც ამჟამად მთელ გვერდს ზედა ნაწილს იკავებს, განვათავსებდი აღნიშნული პირადი მონაცემების მარჯვენა მხარეს სვეტისებურად. სადაც გამოვიტანდი, პროდუქტის რაოდენობას და თანხას, მიტანის ღირებულებას და შეკვეთის დასრულების CTA-ის 10 გრადუსიანი მომრგვალებებით, ფერი- hex:#5cdb5c. მის ქვემოთ 50 დაშორებით დავუმატებდი პრომო კოდის/ვაუჩერის ველს, რომელიც ტექსტე დაჭერი გამოიტანდა კოდის ჩასაწერ box-ს.
• საიტზე არსებული CTA არის სტანდარტულზე დიდი და შეუსაბამო, ისევე როგორც ინფორმაციის დამატების ველი.
• რაც შეეხება გადახდის მეთოდის ველს,მისი განთავსება შეგვიძლია მარცხენა მხარეს, პირადი ინფორმაციის ველის შემდეგ. ამ შემთხვევაში ინფორმაციის გადანაწილება მოხდებოდა Z ის პრინციპით, რაც უფრო დაეხმარებოდა მომხარებელს ინფორმაცის სწრაფად ათვისებაში. ამჟამად ვებგვერდზე, გადახდის მეთოდები აღნიშნულია მხოლოდ ტექსტურად, რაც არღვევს UI/UX პრინციპებს. აუცილებელია ის უფრო თვალსაჩინოდ და მარტივად გადმოსცემდეს ინფორმაციას, ამიტომ შეგვიძლია გამოვიყენოთ ცალკე ბარათების ტექსტური აღწერის მაგივრად ბარათის ველი,რომელიც ჩამოშლის პრინციპით მოგვცემს დამატებით საჭირო ბარათის არჩევის აიქონების ვიზუალით და არჩევის შემდეგ ინფორმაციის შეყვანის საშუალეას. ასევე ქვემოთ სხვა გრაფებში გამოვიტანოთ ნაწილ-ნაწილ გადახდის, და განვადების ველები. ამ ველების ქვემოთ კი განთავსდება მიტანის სერვისის ინფორმაცია. საიტზე არსებული ინფორმაცია და დაწვრილებითი ახსნა ზედმეტად დიდ დროს და ადგილს იკავებს, ამიტომ სათაური მიტანის სერვისი და 7-9 დღე სრულიად საკმარისია.

მოკლე შეჟამება:

CTA მართკუთხა 10 გრადუსიანი მომრგვალებით. ფერი: hex:#5cdb5c ზომა: სიგანე : 332 სიგრძე:72
ყველა დანარჩენი ღილაკი საიტის ფერი. ინფორმაციის ჩასაწერი ველი, 10 გრადუსიანი მომრგვალებით მართკუთხა ფორმით, stroke სისქე 1-0,7 Hex:ECECEC
სათაურები 20pt
ქვედა სათაურები 14pt

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

ვებგვერდი – Meraki.ge

რა მომწონს :

უნდა აღვნიშნო, რომ საკმაოდ კომფორტული Checkout გვერდი აქვს. პირველ რიგში, მომწონს ის , რომ აშკარაა რას ვიძენ, დართული აქვს ფოტო, რაოდენობა და ყველანაირი ინფორმაცია თვალსაჩინოა. ჩემთვის, როგორც მომხმარებლისთვის, შეძენა ძალიან მარტივი და სწრაფია.

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

• რაც შეეხება ნაკლოვანებებს, ერთი გვერდისთვის ინფორმაცია საკმაოდ გაწელილია და შეიძლება მომხმარებლისთვის დამღლელი და არაკომფორტული იყოს. გადახდის პროცესის გაუმჯობესების მიზნით კომპონენტებს ორ მწკრად გავაკეთებდი,სახელი და გვარის მსგავსად.ასევე, ვფიქრობ უფრო მოსახერხებელი იქნებოდა Billing details ის და Payment ის ერთმანეთის გვერდით გაკეთება.
  Checkoutში შესვლისთანავე ავტომატურად გახსნის Billing details (1), მის გვერდით იქნება Payment(2) ,რომელზე დაწკაპების შედეგად, გვერდის დატოვების გარეშე გადაყავხარ ბარათის არჩევის ეტაპზე. პროდუქცია კი დარჩება ცალკე, რომლის ქვევითაც ასევე დარჩება Terms and conditions ზე დათანხმება.
  გამოსახულება უფრო დაპატარავდება და მოსახერხებელი იქნება უმეტესი ინფორმაციის ერთიანად დანახვა.
  ასევე, გამომდინარე იქიდან, რომ არის ქართული ბრენდი, ვფიქრობ საიტი არ უნდა იყოს ინგლისურ ენაზე. მიუხედავად იმისა, რომ აქვს Worldwide shipping, ვფიქრობ აქაური მოსახლეობისთვის მნიშვნელოვანია საქართველოში, ქართველების მიერ შექმნილი ბრენდი, მითუმეტეს, რომ ქართულ ბაზარზე უფრო აქტიურადაა, ვიდრე უცხოურზე. ვფიქრობ, უფრო მოსახერხებელი იქნება საიტზე შესვლისთანავე ენის არჩევა.

• რაც შეეხება დიზაინს, საკმაოდ სადა და დახვეწილია, რაც მომწონს. გამომდინარე იქიდან, რომ სწორად უნდა შევავსოთ ჩვენი ინფორმაცია, ვფიქრობ კონცენტრაციისთვის უფრო კარგია სადა და არა გადატვირთული და დამღლელი დიზაინი. მომწონს ასევე 2-3 ფერის შეთანხმება, რომელიც თვალისთვის კარგად აღსაქმელია.
  უფრო ნაკლებ სივრცეს დავუთმობდი კუპონის ჩარჩოს, და ჩავსვამდი პროდუქტსა და მთლიან თანხას შორის, უშუალოდ ციფრებთან.
  ფონტი სხვა შოპინგ ვებსაიტებთან განსხვავებით უცხოა, რაც საინტერესოა და არ აძლევს ზედმეტად კომერციულ შეხედულებას.

• შევცვლიდი ბანკის ლოგოების წყობას. საკმაოდ არაპროპორციულად და არეულადაა, რაც ყურადღებას იქცევს.
  ჩარჩოებს ოდნავ მოვამრგვალებდი,განსაკუთრებით პროდუქციის ჩარჩოს. სიგანეს მოვაკლებდი Billing Details ის ჩარჩოებს და როგორც ზევით აღვნიშნე, Payment ის გადმოტანაც გამოწივევს მათ ზომაში შემცირებას