fbpx
UI/UX დიზაინის კურსი

UI & UX დიზაინის კონკურსი დასრულდა – გამარჯვებულების ნამუშევრები

თარიღი: 13 October, 2023

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

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

პირველი ადგილი – ლუკა დეკანაძე

ვებგვერდი – Amazon.com

Amazon არის მსოფლიოში ერთ-ერთი უდიდესი და ყველაზე ცნობილი ელექტრონული კომერციისა და ტექნოლოგიების კომპანია. დაარსდა 1994 წელს ჯეფ ბეზოსის მიერ, თავიდან ცნობილები იყვნენ, როგორც ონლაინ წიგნის მაღაზია, მაგრამ სწრაფად გაფართოვდა და უამრავ პროდუქტს გვთავაზობს ის გამოირჩევა პროდუქციისა და სერვისების ფართო სპექტრით. 

რაც მომწონს:

1.პროდუქტის მრავალმხრივი შერჩევა –  Amazon გთავაზობს პროდუქციის ფართო ასორტიმენტს, რაც მას ერთ ფანჯრის მაღაზიად აქცევს მრავალი მომხმარებლისთვის. ეს არის მთავარი პლუსი მომხმარებლებისთვის, რომლებიც აფასებენ არჩევანის მრავალ ვარიანტს. 

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

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

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

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

1.გადატვირთული საწყისი გვერდი – საწყისი გვერდი გამოიყურება გადატვირთულად, პროდუქტებისა და აქციების დიდი რაოდენობაა გამოტანილი, რაც თვალისთვის დიდად სასიამოვნო სანახავი არაა. 

2.არათანმიმდევრული ტიპოგრაფია – Amazon იყენებს მრავალფეროვან შრიფტებს ვებსაიტის სხვადასხვა განყოფილებისთვის, რამაც შეიძლება გამოიწვიოს ვიზუალური თანმიმდევრულობის ნაკლებობა და საიტი ნაკლებად გაპრიალებული გამოიყურება. 

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

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

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

2.გაუმჯობესებული ნავიგაცია – გადააკეთეთ ნავიგაციის მენიუ, რათა ის უფრო ინტუიციური და მოსახერხებელი გახადოთ. დააჯგუფეთ დაკავშირებული კატეგორიები და განიხილეთ ჩამოსაშლელი მენიუები ქვეკატეგორიებისთვის. 

3.ტიპოგრაფიის თანმიმდევრულობა – ჩამოაყალიბეთ ტიპოგრაფიის თანმიმდევრული სტილი მთელ ვებსაიტზე, მარტივი წასაკითხი შრიფტების გამოყენებით და შეესაბამება დიზაინის მთლიან ესთეტიკას.

4.მობილური ოპტიმიზაცია – დარწმუნდით, რომ ვებსაიტი სრულად რეაგირებს და ოპტიმიზებულია მობილური მოწყობილობებისთვის, რადგან მომხმარებელთა მზარდი რაოდენობა ყიდულობს სმარტფონებსა და ტაბლეტებს. 

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

6.ვიზუალური იერარქია – განახორციელეთ მკაფიო ვიზუალური იერარქია პროდუქტის გვერდებზე, რათა მომხმარებელთა ყურადღება გაამახვილოს პროდუქტის ძირითად დეტალებზე, მიმოხილვებზე და ღილაკზე „კალათაში დამატება“. 

მეორე ადგილი – თამარ ინწკირველი

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

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

რაც მომწონს:

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

რაც შეეხება დიზაინის კომპონენტებს, რომელიც არ მუშაობს:

Header-ზე კატეგორიები ჰოვერით იშლება, გარდა ბრენდებისა და ნაკრებებისა. ამან შეიძლება დააბნიოს მომხმარებელი. ვთვლი, რომ ყველა კომპონენტი ერთნაირად უნდა ფუნქციონირებდეს მაუსზე განსაკუთრებით, როცა ერთ ხაზზეა მოქცეული. ასევე ხაზი, რომელიც ჩნდება კატეგორიის ქვეშ მაუსის მიახლოებისას ირევა ჩამოშლილ კატეგორიებში და ცოტა გამაღიზიანებელია, რადგან შეიძლება ბევრჯერ შეგეშალოს რომელი კატეგორიაა გახსნილი სანამ არ წაიკითხავ. თითოეულ კატეგორიას ინდივიდუალურ ფერს მივცემდი რომ გარჩევა შეიძლებოდეს რაც შეიძლება მარტივად. ასევე-პრომო კოდისთვის განკუთვნილი სივრცე ძალიან პატარაა და იმდენად პატარა ზომით წერია რომ შეიძლება საერთოდაც ვერ მიაქციო ყურადღება. თუ ნამდვილად უნდათ რომ ეს კოდი გამოვიყენო წესით ეს ინფორმაცია სქროლვისასაც უნდა მოყვებოდეს გვერდს რომ რაღაც ეტაპზე მივაქციო ყურადღება. ასევე არ მომწონს მთაავრ გვერდზე ორი სურათი და შუაში ინგლისური ტექსტისთვის გამოყოფილი სივრცე. უხეში გადასვლაა ერთი სურათიდან მეორეზე. თან, ტექსტი ინგლისურადაა. იდეაში ზედა მარცხენა კუთხე აჩვენებს, რომ ვებსაიტის ქართულ ვერსიაზე ვართ და ინგლისური ტექსტი აქ უადგილოდ მეჩვენება. ვთვლი, რომ მხოლოდ ერთი სურათი რომელიც ესთეტიკურად ფერებში ჩაჯდებოდა და პრომოკოდის ინფორმაცია საკმარისი იქნებოდა. კალათა ფასს კი მაჩვენებს, მაგრამ პროდუქტების შესამოწმებლად უნდა პროფილზე გადავიდე. მაგალითად, ზუმერის ვებსაიტზე პროდუქტების ნახვა და მოდიფიკაცია გვერდიდან გადასვლის გარეშეც შემიძლია. ძიებაც უცნაურად არის ჩასმული. მიჩვეული ვარ რომ საძიებო ველი დაკლიკვის გარეშეც ჩანს. ჩემი აზრით იმდენად უნდოდათ ბევრი კომპონენტის პატარა სივრცეში ჩაკვეხება, რომ არ გაითვალისწინეს როგორ დიზაინს არის თვალი მიჩვეული. ამდენი ინფორმაციის ჰედერში სიგანეზე ჩატევას სიმაღლეში განაწილება ამჯობინებდა. პროდუქტის კალათაში დამატებისას “შეკვეთის დასრულების” ღილაკი ჩანს, როგორც შეკვეთის ზევით, ასევე ქვევით და ვერ ვხვდები რა მიზანს ემსახურება. ქვედა მარჯვენა კუთხეში და ერთი სავსებით საკმარისია. მთავარ გვერდზე ფასდაკლებულ პროდუქტებსა და footer-ს შორის მოთავსებული სურათები უცნაურად არის მოთავსებული. ვთვლი, რომ ამ სურათების სიგანეზე განაწილება და მათი სქროლვის ფუნქცია უკეთესი იქნებოდა (ოდნავ მაინც თუ ვერ ხედავ კარგად ვერაფერს წაიკითხავ.) ასევე, ვთვლი, რომ შავი ფონი და “კალათაში დამატება” თეთრად ძალიან უხეში დიზაინია და არც ისე კარგად კითხვადი. მგონია, რომ ეს ელემენტები stroke-ით უფრო ნაზი იქნებოდა ვიზუალურად. ასევე, როცა პროდუქტი არ არის მარაგში-კალათაში დამატების ღილაკი ისევ ადგილზეა (მართალია ფერშეცვლილი) და ინსტინქტურად მაინც არ აქცევ ყურადღებას პატარა წარწერას -“მარაგი ამოწურულია”. ასეთ დროს ჩემი აზრით კალათაში დამატების ნაცვლად რომ პირდაპირ “მარაგი ამოწურულია”ს ღილაკი იყოს-ბევრად უფრო კომფორტული იქნებოდა მომხმარებლისთვის. 

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

ამის ნაცვლად ტექსტის იერარქიას ასე გადავანაწილებდი: ბრენდის სახელი – Medium, პროდუქტის დანიშნულება – Regular, ფასი – Light Uppercase და კალათაში დამატება – Bold. ისიც აღსანიშნავია რომ როცა კატეგორიას ჩამოშლი ჰედერიდან, შერჩეული ქვეკატეგორია არც ფერს იცვლის და არც არაფერი ეფექტი აქვს რომ მიხვდე სად გაქვს მაუსი, ყურადღებით უნდა დააკვირდე კურსორს. ამასაც შევცვლიდი და შერჩეულ ქვეკატეგორიას ან Zoom In-ს გავუკეთებდი ან ფერს შევუცვლიდი. ერთ ფონტსაც გამოვიყენებდი – ცოტა განსხვავებულს H1/H2 Heading-ებისთვის. აფერქეისი კარგია, მაგრამ თვითონ ფონტი იგივეა. და საერთოდ კრემისფერი და “ბეჟი” ვთვლი, რომ overrated ფერებია და მშვენივრად შეიძლებოდა ამ ვებსაიტის გამრავალფეროვნება პასტელურ ფერებში (სალათისფერი, ატმისფერი, იასამნისფერი და ა.შ.) კრემისფერი ტონალობები თითქოს უსაფრთხო მაგრამ უკვე მოსაწყენი არჩევანია.

მესამე ადგილი – ნინო ჯანგველაძე

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

ვფიქრობ, რომ საკმაოდ საინტერესო განსახილველია ვებგვერდი nike.ge, ნაიკის ქართული ვერსია.

ყველაზე მეტად ამ ვებგვერდში მომწონს ის, რომ 

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

რაც შეეხება დიზაინის იმ კომპონენტებს, რომელიც ჩემი აზრით არ მუშაობს კარგად და მომხმარებელიც ვერ გამოიყენებს: 

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

ჩემი ხედვა: 

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