UsabilityPrincipleandPractise
1Introduction
ZARA,isacompanyspecializesinfastfashion,withproductsincludingclothing, accessories,footwear,swimwear,beauty,andfragrancesItisthelargestcompany intheInditexgroupandisthelargestclothingretailerintheworld.
AsamemberofZara'suserexperiencedepartment,Iwillbeworkingwithmyteam toevaluateandredesignZara’swebsiteforusabilityissuesasthecompanyhas receivedtoomuchnegativefeedback.
2UserTaskIdentification
Theevaluationoftheusabilityofthewebsiteshouldbecarriedoutinthecontextof toptasks,sothefirststepistogeneratetoptasksbysortingandrankingtheuser tasksthroughstatistics(Table1.1)(Figure1).
[F121320]
2.1TopTasks
TopTasks Images(quality) Search Delivery MediumTasks SizingInformation Checkout Filtering ShoppingCart CustomerReviews Table11TopTasksandMediumTasks Figure1TopTasksusersurveyresults
Tasktype
Scenario
Threeuserjourneyscenarioswerecreatedbasedontoptasks,theevaluationofthe websitewillbecarriedoutfollowingthesethreescenarios(Table1.2)
Searchand Filter StartfromtheZara.comhomepage.Searchforajacket.Filterfor yoursizeOnceyouhavefoundasuitablegarment,clickonitand viewthedetails. Sizing information Ontheproductpage.Checkthatthegarmentwillfityouviathe sizinginformation,thenselectthecorrectsize,andaddthegarment tothebasket. Delivery Information Goandfindinformationonhowlongthefastestdeliverywilltake andhowmuchdeliverywillcost Table12Scenarios PagesthatrelatetotheTopTasks Figure2.1.HomePage Figure2.2.ProductPage1 Figure23ProductPage2 Figure24SearchPage Figure25DeliveryPage
3Performance
3.1Introduction
ThedesignteamevaluatedtheZarawebsitetodeterminewhetheritneededa redesigntoimproveitsperformancePerformanceasakeycomponentofwebsite usabilitycandirectlyimpacttheuserexperienceandthereforetheuser'sevaluation ofthewebsite.
ThisstudyevaluatedandcomparedtheperformanceofZarawithitscompetitor Supremeinfourmetrics(TaskTime,TaskSuccess,ErrorsMade,Lostness)asa wayofcomparingtheusersinthetwowebsitestocompletethetaskrequiredefforts, ability,andefficiency
3.2Methods
3.2.1SettingandSample
Duetotimeandresourceconstraints,therewasatotalof30validsamples,divided equallyintotwogroupsof15sampleseachforeachwebsite.
3.2.2DataCollection
Onetesterloggedontothewebsitebeingevaluatedtocompletethethreetoptask scenarios,whilethreeothersrecordedtheentireprocess.Theentireprocesswas sharedviaMicrosoftTeamsonlinemeetingswithscreensandmicrophones,allowing informationtobesharedandrecordedinrealtime
323DataAnalysis
ThepvalueobtainedaftertheKolmogorovSmirnovtestwasfirstperformedwas greaterthan005andthesamplewastwogroupsofdifferentparticipantsThettest (independent)shouldbechosen.However,whenusingthet-test(independent), whenAlpha=0005,thesamplesizeisatleast26pergroup(whenthetargetedeffect sizeislarge),otherwisethestatisticsrunarelessreliableThesamplesizeforthis evaluationistoosmall,thereforethesignificanceofrunningstatisticsforthisstudyis notsignificant,andqualitativeanalysisofthetwowebsiteswillbeconductedusinga barchartformat.
3.3Results
3.3.1TaskTime
Thecombinedlengthoftimethatthetwogroupsofparticipantsspentusingthetwo websites(Zara,Supreme)tocompletethethreetaskswascountedseparatelyand theAveragewascalculatedseparatelyZara'stasktimesaresignificantlylowerthan Supreme's(Figure3.1).
3.3.2TaskCompletion
Thetasksuccessratesofthetwogroupsofparticipantsusingthetwowebsites (Zara,Supreme)tocompletethethreetaskswerecountedseparatelyandthe Averagevalueswerecalculatedseparately.Zara'stasksuccessrateissignificantly higherthanSupreme's(Figure32)
Thenumberoferrorswascalculatedforeachofthetwogroupsofparticipantsusing thetwowebsites(Zara,Supreme)tocompletethethreetasks,andtheAveragewas calculatedseparatelyZarahassignificantlyfewererrorsmadethan Supreme(Figure3.3).
Figure31TaskTime(average)
Figure32TaskCompletion(average) 333ErrorsMade
3.3.4Lostness
Thelostnessofthetwogroupsofparticipantsinusingthetwowebsites(Zara, Supreme)tocompletethethreetaskswascountedseparatelyandtheAveragewas calculatedseparately.Zara'slostnesswassignificantlylowerthanSupreme'sand waslessthan04,soZarawasmoreefficient(Figure34)
3.4Conclusion
TheresultsofthestudyshowthatZarahasasignificantadvantageoverSupremein termsoftimespentonthetask,completion,errorsmade,andlostnesswhenusers usebothwebsitestocompletethetask,thereforeZararequireslessableto completethetask,requireslesseffortandZaraisamoreefficientwebsite.
Figure33ErrorsMade(average)
Figure34Lostness(average)
Insummary,aftertheevaluation,theZarawebsitealreadyhasagoodperformance andthereforethereislittlepointinredesigningtoimprovetheperformance.However, thesamplesizeforthisevaluationwastoosmalltoconductquantitativestatistical analysisandthereforetheconclusionsdrawnaresomewhatlimited
4Satisfaction
4.1Introduction
TounderstandtheusersatisfactionoftheZarawebsite,thisstudyusedboth quantitativeandqualitativemethodstoanalyzeitAwebsitewithhighuser satisfactionresultsinabetterfeelingandexperiencefortheuser,andthispositive emotionmakestheusermorelikelytousethewebsite.
4.2QuantitativeMethods
SystemUsabilityScale(SUS)wasusedtoassessZaraagainstitscompetitor SupremeandNetPromoterScore(NPS)wasusedtoassesstheloyaltyofZara's users.
4.2.1SettingandSample
Atotalof78validsamplesweretakenforthisassessment,whichisanadequate samplesize.
4.2.2DataCollection
AllparticipantscompletedthreetoptaskscenariosusingtheZaraandSupreme websitesandgaveSUSscoresforeachwebsite,andNPSscoreswerecalculated fortheZarawebsiteDatawerecollectedviaMicrosoftForms
423DataAnalysis
Thep-valueobtainedaftertheKolmogorov-Smirnovtestwasgreaterthan0.05,and thetwosampleswerethesameparticipants,sothettest(dependent)shouldbe chosenWechosetheonetailedvariantofthetestbecausethesamplewasnot randomlyselectedfromallconsumergroups,butfromagroupofdesignstudents whoshoppedmorefrequentlyonlineandweremorefamiliarwiththeoperationofthe website.
Tocalculatethettest(dependant),weusedanonlinestatisticscalculator (Stangroom,2020)WeinterpretedeffectsizesthroughtheworkofCohen(1988,pp 2847).
424Results
AdependantmeansT-Test(one-tailed)wasconductedonthedifferencebetween students’SUSscoresforZara’swebsite(W1)andSupreme’swebsite(W2)
TherewasastatisticallysignificantincreaseinSUSscoresbetweenW1(M=71.3, SD=198)toW2(M=245,SD=145),t(77)=1817,p=<00001(onetailed)The meandifferenceinSUSscoreswas46.83.Theetasquaredstatistic(.811)indicated alargeeffectsize.
Zara'swebsitehasahigherlevelofsatisfactionthanSupreme(Figure4),andthe differencebetweenthetwoislarge,withZara'sSUSscoreaveragingslightlyabove 70,indicatingacceptablesatisfaction(Bangor,KortumandMiller,2008)
Figure4SUSscore(average)
ForZara'sNPSmetrics,Promotors(Pr)=24%,Passives(Pa)=36%,Detractors(D) =39%,NPS=15<0
TheZarasitehasmoredetractsthanpromotors,whichisnotgoodforthewebsite.
4.3QuantitativeMethods
TheThinkAloudmethodandthematicanalysiswereusedtodiscovertheuser satisfactionofZara'swebsitetohaveamorecomprehensiveevaluationofthesite.
4.3.1SettingandSample
Duetotimeconstraints,therewerefourparticipantsinthisevaluationandthesmall samplesizewasacceptableforqualitativefindingstoanalyzeusabilityissues.
4.3.2DataCollection
EachofthefourparticipantstookpartinanonlinemeetingviaMicrosoftTeams (Microsoft,2020),withscreenandaudiosharingandrecordingthroughoutThey wereaskedtocompletethreetoptaskscenariosontheZarawebsite,duringwhich participantswereaskedtosayoutloudwhattheyweredoing,thinking,andfeelingat thetime.
4.3.3DataAnalysis
Thefourdataweretranscribedintotranscripts,insightfulsectionswerecoded accordingtothe'Doing''Thinking''Feeling'categories.
4.3.4Results
Thekey'Doing'themesweresummarisedinfivecategories,withthemostfrequent messagesbeingD1-Browsing,Searchingforitem(12times)e.g.:'Therearelotsof jacketsIjustscrolldowntosee'
Thekey'Thinking'themehassevencategories,ofwhichthemostfrequentmessage isT4Cannotfindthecontent(9times)wherethemostcommonphenomenonis thattheusercannotfindinformationonthematerialandcleaningrequirementsof theitem,andtheusercannotfindthebuyer'scommentsontheitem.Forexample:'I can'tfindthematerial''ButIcan'tfindthecomment'
Thekey'Feeling'themeisinthreecategories,wherethemostfrequentmessageis F2OK(9times)eg:'Itwasokay'ThegeneralattitudetowardsZara'swebsiteis acceptable(Table2).
Main Category Sub-Category
DoingD1-Browsing,Searchingforitem12
D2Filtering
D3Choosethesize
D4Clickingonlink
D5-Lookforinformation
ThinkingT1Likethecontent
T2Hardtofindthecontent
T3-Didn'tmeetexpectations
T4Cannotfindthecontent
T5Donotcareaboutthecontent3
T6-Donotlikethecontent
T7Confusedaboutthecontent7
FeelingF1Annoying
F2OK
F3-Good
Table2SUSscore(average)
4.4Conclusion
Frequency
ThequantitativeanalysisshowsthatZara'ssatisfactionratingissignificantlybetter
4
3
10
6
6
6
5
9
2
2
9
4
thanSupreme's,withaSUSscoreabove70,indicatingthatZara'ssatisfactionrating isacceptable,butitsNPSscoreisnegative,indicatingthatuserswouldnotgenerally recommendthesiteQualitativeanalysisalsorevealedsomeweaknessesinZara's
websitesuchasusershavingdifficultyornotfindingtheinformationtheyarelooking for.Overall,Zara'ssatisfactionratingisacceptablebutthereisstillalotofroomfor improvementandneedstobeoptimized
5Psychology
5.1Introduction
Inthehumanbraininformationisprocessedatthreelevels:Visceral,Behavioural, andReflective,sotooptimizetheuserexperience,thesethreelevelsshouldbe takenintoaccountinthedesignTheZarawebsitehasbeenevaluatedtoseeifit followsthepsychologicalprincipleswell.
5.2Methods
521SettingandSample
Duetoconstraints,thesampleforthisevaluationistheauthoralone.
5.2.2DataCollectionandAnalysis
TheevaluatorcompletedthreetoptaskscenariosontheZarawebsiteandassessed thewebsiteagainstfivepsychologicalprinciplesofUIdesign(ColourTheory,Gestalt Principles,Informationscent,DualCodingTheory,andMentalModels).
5.3Results
531ColourTheory
Gooduseofcolourcanmakeadesignmoreappealingandthechoiceofcolourcan alsoreflectthecharacterofthebrandTheevaluationfoundthattheZarawebsiteis generallyminimalistindesignandhasgooduseofcolour,however,thereisalackof colorcontrastinsomeofthetextdescriptioninformation(Table3.1).
Positive
Homepage
Monochromatic,onedominant colourMinimalistdesignandgood contrast
Productpage
Monochromatic,onedominant colour.Thediscountinformationis conspicuous
Table31CommentsonColourTheory
532GestaltPrinciples
Productpage
Negative/Problems
P1Deliveryandexchangecontentlowcolor contrast,hardtofindimportantmessage
P2-Productdescriptionlowcolorcontrast,hardto findimportantmessage
Itemsconveyinformationthroughdifferenttypesoflayouts,thusinfluencingthe user'sperceptionZaraperformswellinthisarea(Table32)
Positive Negative/Problems
CommonRegion
Proximity
Similarity
Homepage
Positive Negative/Problems
Productpage ‘Matchwith’pictures areinthesamesize andtype /
Searchpage Termsaredividedinto twocategories,which areclearforusers (‘trend’‘recent’) /
Homepage Infilter,conditionsin thesamecategory havethesameformat / Figure/Ground Productpage ‘SizeGuide’the informationonthe pictureisclear. / Table3.2.CommentsonGestaltPrinciples 533InformationScent Theclarityoftheinformation(semanticsorimages)affectstheuser'sunderstanding andbehavior(Table33) Positive Negative/Problems
Informationdescriptionsareclear. Productpage Informationdescriptionsareclear Homepage P3Thecarticonisnotobviouswhatit means. Table3.3.CommentsonInformationScent 534DualCodingTheory Whenfacedwithadesignthatusesbothverbalandvisualinformation,usershavea betterabilitytolearnandrecallZaraisdeficientinthisarea(Table34)
Productpage Thechaticonhasthewords description. Deliverypage Theiconsallhavethewords description Homepage P4Thecarticondoesnothavethewordsdescription. P5Theaccessibilityicondoesnothavethewords description P6Thesoundicondoesnothavethewords description P7Themenuicondoesnothavethewords
description Productpage P8Thecollectionicondoesnothavethewords description Table34CommentsonDualCodingTheory 5.3.5MentalModels WhatusersthinktheyknowabouttheUIgreatlyinfluencesthewaytheyuseit Thereforewebsitesshouldtrytoavoidmismatchedmentalmodelsorprovideclear guidancetousers.Zarahasissuestoaddressinthisarea(Table3.5). Positive Negative/Problems Productpage Addtobagandprocessorders areeasyforuserstounderstand Homepage P9Thevideoandpicturebelowdonotseemlikethe menuentrance P10-ClicktheZARAiconwilljumptothehomepage whichisnotclearenoughforusers Table35CommentsonMentalModels 5.4Recommendations Allissuescanbeadjustedontheoriginalfunctionalmodules(Table4) ID Recommendation ColourTheory P1Enhancecolourcontrasttodistinguishkeymessages P2Enhancecolourcontrasttodistinguishkeymessages InformationScentP3Optimizetheicon DualCoding Theory P4P5 P6P7 P8 Addwordsdescriptiontoicon MentalModels P9Addmaskedimagewithtextdescriptiontoindicatemenu entry P10Addreminderofthehomepageentrance(ZARAicon) Table4Recommendations 5.5Conclusion TheZarawebsitegenerallyperformswellinitsapplicationofpsychologicalprinciples, requiringonlylocaldetailingtoimproveusability.
6Biometrics
6.1Introduction
Evaluatingawebsiteusingbiometrics(eye-tracking)methodscanrevealusability problemsbyexploringthesubconsciousreactionsofusers,suchaswhichpartsof thesitearemoreappealingtothem,theorderinwhichtheyviewinterfaceelements, etc.
6.2DataCollectionandAnalysis
ThewebimageswereuploadedtoEyeQuant(EyeQuant,2020)forautomatic analysisthroughartificialintelligenceInthisevaluation,thewebsitewasanalyzed usingtwodatametrics:AttentionMap(userattention)andRegionofInterest (visibilityofkeyelements)
6.3Results
TheAttentionMapshowsthatonthehomepagepeoplearefocusedonthenew productvideos(Figure5),whichisinlinewithZara'sbusinessobjectives.The categorybaratthebottomisnotveryvisiblethroughtheRegionofInterest(Figure6), butthisisnotaproblemasthepageautomaticallyslidesdowntoshowother categorypages
Whenthepageslidesdowntothe'SALE'category,people'sattentionisfocusedon theSALEimage(Figure7),andtheSALEimageistheentrytotheMenuforsale,so itcanhaveagoodleadingeffectHowever,thevisibilityoftheMenuforallproducts (MENUiconinthetopleftcorner)isverylow(Figure8).
Asakeyfeature,the‘findyoursize’and‘deliveryinformation’sectionsoftheproduct pagesarewellvisible(Figure9)anddonotneedtobeadjusted.
Figure5AttentionMapforHomePage1
Figure6.RegionofInterestforHomePage1 Figure7.AttentionMapforHomePage2
Figure8.RegionofInterestforHomePage2 Figure9RegionofInterestforProductPage2 6.4Recommendations TheMenu'sentranceneedstobedesignedtomakeitmorevisibleandincreasethe user'sattentiontoit.
tobeaddressed.
6.5Conclusion TheevaluationoftheBiometricsmethodologyshowsthattheZarawebsiteperforms wellinthisareaHowever,therewerestillsomeimportantusabilityissuesthatneed
7Heuristic
7.1Introduction
ToinvestigateusabilityissueswithZara'swebsiteUIdesign,weusedaheuristic evaluationmethodthatallowedustoevaluatethewebsiteandobtainusability feedbackeasily,quickly,andinexpensively
7.2Methods
721SettingandSample
Atotalofsixpeoplefrommyteamtookpartintheevaluation,allofwhomhadsome knowledgeofusabilitydesign
7.2.2DataCollectionandAnalysis
BasedonthethreetoptaskscenariosweeachevaluatedtheZarawebsite, recordingbothpositiveandnegativeaspectsofthewebsiteandassigningaseverity ratingtoeachissue,whichtookapproximately25minutes(Table5).Theproblems identifiedwerethencounted,summarised,anddiscussedbyall,withthefrequency andratingofeachproblembeingcollatedandrecommendationsmadeforeach usabilityproblem(Table6)
HeuristicPositive
1Visibilityof systemstatus
Shoppingbagpage
Pop‘savingchange’whenthe userchangesthenumberofthe item
Productpage
Whenselectingdifferenttypes inthefilteritshowswith underlying.
Cartbuttonshowsthenumber ofitems
Inthefilter,theselected conditionwillchangecolor
Negative/Problems
Homepage
Thehorizontalmenudoesn't indicatetheuserwheretheyare Needtoscrollandclickonitto exploreM
Productpage
whenyouaddedonetothecart.It doesn'tgetanyclearfeedbackthat youalreadyaddedthatitem.M
2Match between systemand realworld
Searchscreen
Thedescriptionsandthe picturesofthedifferentclothes arecleartounderstand
Productpage
Theinformationandpicturesin ‘findyoursize’isclearandeasy tounderstand
Homepage
Clickthevideopresentationofthe newproductwilljumptothemenu insteadofthenewproduct introductionpagewhichisnot logicalM
3Usercontrol andfreedom
Productpage
Infilter,userscanselect severaldifferentconditionsat thesametimefortheir
Searchpage
Don'thavebackorclosebuttons forthesearchbarM
preference
Productpage
Userscanmanuallyenterthe specificheightandweight informationtofindthesize
4Consistency andstandards Productpage
ClicktheZaralogoabove alwaysmeansturntothehome page
Productpage
Different descriptions(cart,bag,basket;delive ry,shipping)L
Homepage
Clickthebigpictureonthehome pageitshowsthemenubutother picturesshowtheproductpageM
5Error prevention Productpage
Theitemsthatareoutofstock turngreyandcannotbe selected
6Recognition ratherthan recall
Productpage
Provide‘youmayalsolike’ modelbelowshowsthesimilar items
Shoppingbagpage
Whenyoudeleteagarmentinthe shoppingbag,thereisnoprompt orundobuttonM
Productpage
Cannotcheckwhatareincarts unlessgoingtocartpageoradd itemintocartM
Productpage
Donotalwayshavetheclear categorytitleofwhereyouaree.g. jacketinsales.L
7Flexibilityand efficiencyof use
Homepage
Thedetailcategoriesofthe menuarehiddenandonly displayedwhenthemajor categoryisselected
Productpage
Simplyenterheight,weight,and preferencetofindtherightsize, plustheoptiontoaddmore information.
Productpage
Deliveryandexchangecontent needtobereadthroughtofindthe OptimaloptionL
Lessimportantdescriptionsof productaretoomuch(egCare forwater)andmoreimportant descriptionsofproductare invisible(egCareforclothesand materials)L
8Aestheticand minimalist design
9Helpusers recognize, diagnose,and recoverfrom errors
Homepage
Cleanandminimalismwith keyfunctions
Productpage
Iftheuserforgetstochoosea sizeitwillpopouttoremindthe usertoselectthesizebefore addingittothecart.
/
/
Iftheuserforgetsinputheight beforeclicking‘findmysize’it willremindtheuser.
10Helpand documentation Productpage
Provideachatbottoanswer user’squestions
Table5.Resultsofheuristic
Heuristic Problem
1Visibilityof systemstatus
Homepage
/
2Match betweensystem andrealworld
P1Horizontalmenudoesn'tindicatetheuser wheretheyareNeedtoscrollandclickonitto explore Productpage
P2whenyouaddedonetothecartItdoesn't getanyclearfeedbackthatyoualreadyadded thatitem.
Homepage
P3Clickthevideopresentationofthenew productwilljumptothemenuinsteadofthe newproductintroductionpagewhichisnot logical
3Usercontrol andfreedom Searchpage
P4Don'thavebackorclosebuttonsforthe searchbar
4Consistency andstandards Productpage
P5Different descriptions(cart,bag,basket;delivery,shipping) Homepage
P6Clickthebigpictureonthehomepageit showsthemenubuttheotherpictureshows theproductpage.
5Error prevention Shoppingbagpage
P7Whenyoudeleteagarmentintheshopping bag,thereisnopromptorundobutton.
No.of experts Importance (H,M,L)
5 1
M M
2 M
1 M
3 1
L M
2 M
6Recognition ratherthan recall
Productpage
P8Cannotcheckwhatareincartsunless goingtothecartpageoraddinganiteminto thecart.
1 M
P9Donotalwayshavetheclearcategorytitle ofwhereyouareegjacketinsales
P10Deliveryandexchangecontentneedtobe readthroughtofindtheOptimaloption.
toomuch(e.g.Careforwater)andmore importantdescriptionsofproductisinvisible (egCareforclothesandmaterials)
Usabilityproblemsaremainlyinthedetailsofspecificfunctions,suchasthelackof
Problem code Category Recommendation
2 L 7Flexibilityand efficiencyofuse Productpage
P11Lessimportantdescriptionsofproductare
3 2 L L 8Aestheticand minimalist design / / / 9Helpusers recognize, diagnoseand recoverfrom errors / / / 10Helpand documentation / / / Table6Evaluationofheuristic 7.3Results 731Positiveaspects TheoverallstructureoftheZarawebsiteiscompleteandclear,withasimpleand clearlayoutoffunctionalmodules 732Negativeaspects
statusheadings(P1,P9),whichcanmakeusersfeelconfused;thelackofclarityin thelayoutandexpressionoftextualinformation(P10,P11),whichcanmakeusers feeltroublesome;thelargeimageofthehomepageasamenuentranceis conspicuousbutnotclearlyfunctional(P3,P6),etc 733Recommendations Basically,allissuescanbeadaptedtotheform,layout,andpresentationofthe originalfunctionalmodules(Table7)
P1 M Addcategorytileofwhereusersareonthehomepage.
P2 M
P3 M
P4 M
P5 L
P6 M
P7 M
Giveclearfeedbackthattheuserhasjustaddedtheiteminto thecart
Clickthevideopresentationofthenewproductwilljumpto thenewproductintroductionpageinsteadofthemenu.
Addaclosebuttonforthesearchfunction.Closesearch functioncanreturntothepreviouspage.
Unifydescription
Makeitmoreclearthatthefirstbigpictureinhomepageis theentrancetothemenu.
Popupapromptwhentheuserdeletesagarmentinthe shoppingbag
P8 M Showitemswhenthemousehoversoverthecarticon
P9 L
P10 L
P11 L
Addaclearcategorytitleofwhereyouareontheproduct page.
Maketheimportantdeliveryinformationobviously,andlet usersquicklyfindtheshippingtypethattheywant.
Puttheimportantproductdescriptionaboveandhidetheless importantproductdescription(clickviewmore)
Table7.Recommendationsofheuristic
7.4Conclusion
Aftertheheuristicevaluation,theoverallUIusabilityoftheZarawebsiteis acceptable,withatotalofsevenissuesfoundatthemediumlevelandfouratthelow level.Althoughthereareusabilityissuesinthedetailsthatcauseadegreeofdoubt andhindrancetotheuser,theusercanstillcompletethetoptasknormally.
8Accessibility
8.1Introduction
AnevaluationoftheZarawebsitewasneededforImprovingaccessibilitywhichcan makeawebsitemorefriendlytopeoplewithmentalorphysicaldisabilitiesandcan expandthewebsite'spotentialconsumerbaseandearnitabetterreputation
8.2Methods 8.2.1SettingandSample AtotalofsixmembersofmyteamconductedthisevaluationoftheZarawebsite usingGoogleChrome. 8.2.2DataCollection TheevaluationfocusedonpagescoveringusertoptasksontheZarawebsite, analyzedagainstWCAG2.1(W3C,2020)levelAissues,andfurtheranalyzedthe websiteagainstWCAG21levelAAandAAAissuesusingWave(WebAIM,2020) 823DataAnalysis Sortouttheproblemsonthewebsiteandclassifythemaccordingtofourlevels: 'mustbesolved,shouldbesolved,canbesolved,andwillnotbesolved' 8.3Results 831LevelAAccessibilityissues(Table8) Heuristic Observations Positive Negative PERCEIVABLEDESIGN Non-text content Textcontentfortheimageinthe sizeguide. N1NotextlabelsforAccessibility icon. N2Notextlabelsforthemenuicon. N3Notextlabelsforcarticon Audio-only andVideoonly / / Video Captions Thevideoonthehomepage doesnotneedcaptions(no words) / Audio Description / N4Noaudiodescriptionforvideoon thehomepage Infoand Relationships Breakupthe‘Findyoursize’ guidewithsubheadingsforanew section Breakupshippinginformation withsubheadingsforanew section Breakupfilterconditionswith subheadings /
Meaningful Sequence
Sensory Characteristic
s
Productdescriptioninorder/
Havescreenreader. /
UseofColourHavedescriptiontocolorsinthe filter /
AudioControlCanturnofftheaudioonhome page /
OPERABLEDESIGN
KeyboardZarahaskeyboardnavigation/
NoKeyboard Trap /
Timing Adjustable Notimelimits. /
Pause,Stop, Hide /
N5Keyboardnavigationworksbadly withalackofresponses.
N6Homepagecontentautomatically scrollsverticallywithnostopbutton
N7-Videoonthehomepagecannot stop
ThreeFlashes orLess Noflash /
Bypass Blocks CanalwaysSkiptodifferent contentthroughthemenu /
PageTitlesClearpagetitleforshoppingbag page.
N8Nopagetileforhomepage. N9Nopagetileforproductpage. N10Nopagetilefordeliverypage
OrderFocus/ N11Nologicalorderandlackof responseswhenusingthe‘Tab’key tocontrolling.
LinkPurpose/
UNDERSTANDABLEDESIGN
LanguageonCanchangelocationand /
N12-NotclearthatZARAlinksto homepage
N13Linkpurposeoftheproduct pictureisnotclear(therearemore thanoneclothesinthepicture).
N14Linkpurposeofthepictureon thehomepageisnotclear.
N15Linkpurposeof‘AddsizeXS’is notclear
ROBUSTDESIGN
Page language OnFocusNoautomaticpopupsor submittingofforms. / OnInputElementsdonotchangewhen theyreceiveinput / Error Identification Clearerroridentificationin‘find yoursize’ / Labelsor Instructions Whenloggedinitgive instructions(PASSWORD) /
Parsing (unabletotest) (unabletotest) Name,Role, Value (unabletotest) (unabletotest) Table7Accessibilityissues(levelA)forZara’website 832Categorisation AclassificationofZara'saccessibilityissues(MOSCOW)(Figure10). Figure10ThecategorizationofZarawebsite’saccessibilityIssues 8.3.3LevelAAorAAAAccessibilityIssues(Summary) AsummaryofthemainWCAG21AAandAAAusabilityissuesfoundusingWave (WebAIM,2020)(Figure11). Anissuewithlowtexttobackgroundcontrast Twentysixissueswithmissingtitlesoflinksorbuttons.
Figure11Wave(WebAIM,2020)analysisofZara’swebsite
8.4Conclusion
TheresultsshowthatZarapassessomeaspectsoftheWCAG21basicguidelines, buttherearestillmanyshortcomings.
ThemainPerceivableDesignissuesare:manyiconslacktextdescriptionsand thereforeusersmaynotunderstandthefunctionalmeaningoftheicons.
ThemainOperableDesignissuesare:theKeyboardoperationsareoftenwrongand confusingandoftenjumparoundwithoutlogic,whichmakesitimpossibleforthe usertocontrolwheretheywanttogo;thevideosandscrollingpagesonthehome pagecannotbepaused,whichincreasesthevisualandoperationalburdenonthe user.
ZaraperformswellintermsofUnderstandableDesign
8.5Recommendations
Noneedforanextensiveredesignofthewebsite,thusitsoriginalminimalistand stylishstylecanbewellpreserved.However,someoftheissuesthatneedtobe codedarenotpartofthisimprovement,forexample,thekeyboardcontrolsThe recommendationsareasfollows:
Addreasonabletextdescriptionstosomeiconstoindicatethemeaningofthe function
Addstopbuttonforscrollingpageandvideosthatdonotstop
-Addcaptionstopageswithmissingtitlestoindicatepagepositionstatus
ClearLinkpurposetogiveusersmoresenseofcontroloverpagejumps
UsabilityIssues
9SummaryofUsabilityandAccessibilityIssues 9.1UsabilityIssues Atotalof17usabilityissuesrelatedtousertoptaskswereidentifiedthrougha heuristicandpsychologicalevaluation,alongwithperformanceandsatisfaction assessmentsandbiometricmeasurementsofZara'swebsite(Table8) Page
HomepageU1Horizontalmenudoesn'tindicatetheuserwheretheyare.Need toscrollandclickonittoexplore.
Productpage1
U2Thebigpicturedoesnotseemlikethemenuentrance
U3ThevisibilityoftheMenuentranceisverylow,needstobe redesigned
U4-Thecarticonisnotobviouswhatitmeansanddoesnothavethe wordsdescription
U5Theaccessibilityicondoesnothavethewordsdescription.
U6Thesoundicondoesnothavethewordsdescription
U7Themenuicondoesnothavethewordsdescription
U8ClicktheZARAiconwilljumptothehomepagewhichisnotclear enoughforusers
U9-Donotalwayshavetheclearcategorytitleofwhereyouareeg jacketinsales
Productpage2
U10-Thecollectionicondoesnothavethewordsdescription
U11whenyouaddedonetothecart.Itdoesn'tgetanyclear feedbackthatyoualreadyaddedthatitem.
U12Differentdescriptions(cart,bag,basket;delivery,shipping)
U13Cannotcheckwhatareincartsunlessgoingtothecartpageor addingsomeitemintothecart
U14Lessimportantdescriptionsofproductaretoomuch(e.g.Care forwater)andmoreimportantdescriptionsofproductarelowcolor contrastandinvisible,hardtobefound..(e.g.Careforclothesand material)
U15Deliveryandexchangecontentlowcolorcontrast,hardtofind theimportantmessageandneedtoreadthroughtofindtheOptimal option
SearchpageU16Don'thavebackorclosebuttonsforthesearchbar
Shoppingbag
U17Whendeletingagarmentintheshoppingbag,thereisno promptorundobutton.
Table8Usabilityissueswillberedesigned
9.2AccessibilityIssues
ThroughaccessibilityassessmentoftheZarawebsiteidentified14accessibility issues,includingonecodingissue(A5),oneaccessibilityissue(A4)thatdidnot affectthewebsite'sabilitytofulfillitspurpose(won’taddress),andsixaccessibility issuesthatoverlappedwiththeusabilityissuesalreadymentionedApartfromthese, sixusabilityissuesarecloselyrelatedtousertoptasksthatneedtobeaddressed (Table9).
Page
Homepage
Productpage1
AccessibilityIssues
A1Thecarticondoesnothavethewordsdescription
A2-Theaccessibilityicondoesnothavethewordsdescription
A3Themenuicondoesnothavethewordsdescription.
A4Noaudiodescriptionforvideoonhomepage
A5-Keyboardnavigationworksbadly,lackofresponses
A6Homepagecontentautomaticallyscrollsverticallywithnostop button
A7Videoinhomepagecannotstop
A8Nopagetileforhomepage
A9NotclearthatZARAlinktohomepage
A10Linkpurposeofthepictureinhomepage(salemenu)isnotclear
A11Linkpurposeoftheproductpictureisnotclear(therearemore thanoneclothesinthepicture)
page
A12Nopagetileforproductpage Productpage2A13Linkpurposeof‘AddsizeXS’isnotclear. DeliverypageA14Nopagetilefordeliverypage Table9Accessibilityissueswillberedesigned 10RedesignofZara Prototypelink: https://www.figma.com/proto/thkeCofwezzHoaeKOzU9Hs/ZARA?nodeid=68%3A127&scaling=minzoom&pageid=0%3A1&startingpointnode id=68%3A127&showprotosidebar=1 HomePage Redesign Figure 1Addtextdescriptionstoicons(cart,accessibility,sound,menu)to
improvewebsiteaccessibility
2Addinganiconforthewebsite'smainfunction:'search',basedonDual CodingTheory
Figure12
Figure13
3Addatitle(woman)tothepagetogivetheuserasenseofcontrolby lettingthemknowthestatusofthepagetheyareon
4Thehomepagewillautomaticallyverticallyscroll,addinga'Stop Scrolling'buttontothepagebythe'Pause,Stop,Hide'principleof WCAG21LevelA
5Thenewproductvideoonthehomepagewillplayuninterrupted,adda 'Pause'buttoninaccordancewithWCAG21LevelA'Pause,Stop, Hide',andaddaniconforthebuttoninaccordancewithDualCoding Theory
6.WhenthemousehoversoverthehomepageSALEimage,the'View salemenu'maskisdisplayed,makingthelinkpurposefortheentrance ofthesalemenuclearerandimprovingtheaccessibility
7Aprominentmainmenuentryhasbeenaddedtosolvetheproblemof lowvisibilityofthemenuiconinthetopleftcorner,andtheformisthe sameasthesalemenuentrytomaintainconsistency
Figure14
Figure15
Figure16 Figure17
Table10HomePageredesign
Figure12RedesignedHomePage Figure13OriginalHomePage
Figure14RedesignedwhenthemousehoversovertheSALEimage Figure15OriginalwhenthemousehoversovertheSALEimage
Figure16Addthe‘ALL’categoryinHomePageasthemenuentrance Figure17OriginalHomePagecategoryblow
Redesign
1Whenthemousehoversoverthe'ZARA'iconatthetopofthepage,
Figure
Figure18
Figure19
2.Addatitledescriptiontothepagetoincreaseusabilityandatthe
3AsthereareoftenmultipleproductsinaproductimageSowhenthe
ProductPage1
theiconchangesto'HOME',makingitslinkpurposeastheentrance tothehomepageclearerandimprovingtheaccessibility
sametimereducethememoryloadbyconstantlyremindingtheuser ofthelocationthroughthepagetitle.
mousehoversovertheproductimage,addthemask:'Viewthecoat details',tomakethelinkpurposeclear Figure20 Table11.ProductPage1redesign Figure18RedesignedProductPage1
Figure19.OriginalProductPage1 Figure20Redesignedwhenthemousehoversovertheimage
Redesign
1Addtextdescriptionstoicons(collections)toimproveaccessibility
2Informationonproductsthatusersconsiderimportant(material,Care forclothes)hasbeenmovedtothetop(withouttheneedfor additionalactiontoviewit)andthecontrastbetweenheadingsand contenthasbeenincreased,improvingtheuser'sefficiencyinusing thesite
3unifythetextdescriptioninformationindifferentlocations,unify'cart, bag,basket'tocartunify'delivery,shipping'to'shipping'tomakeit consistent
4Whenthemousehoversoverthe'carticon',itwillshowtheproducts intheshoppingcart,sothatuserscanviewthematanytimeand reducetheburdenofmemory(Optimisedinteraction,nochangein visualform)
5.Thenewlyaddeditemismarkedinyellowtoprovideclearfeedback. Andaccordingto'ColourTheory',onedominantcolour (Monochromatic)increasesthecontrastandmakesthemessage morevisible.
6Thecontrastofkeyinformationin'Deliveryandexchange'hasbeen increasedtoimprovetheefficiencyoftheuser'suseofthesite
7.Changed'AddsizeXS'to'AddsizeXStocart'toclarifythelink purposeandimproveaccessibility.
Table12ProductPage2redesign
Figure
Figure21
Figure22
/
/
Figure23
Figure24
Figure25
Figure26
ProductPage2
Figure21RedesignedProductPage2 Figure22OriginalProductPage2
Figure23.Redesignedwhenaddtocart Figure24Originalwhenaddtocart
Figure24Redesignedbutton
ShoppingBagPage
Redesign
DeliveryPage
SearchPage Redesign Figure 1Whenclickingontheblankareaofthesearchpage,thesearch functionwillcloseandreturntothepreviouspageThispreventsthe userfromgettinglostinthesearchpageandincreasesthesenseof controlandfreedom(Optimisedinteraction,nochangeinvisual form) /
Figure 2Apopupwindowwillalertyouwhenanobjectisdeletedtoprevent usererror Figure25
Redesign Figure 3Addheadingstopagestoincreaseusabilityandatthesametime reducethememoryloadbyconstantlyremindingusersoftheir locationthroughpageheadings Figure26 Table13SearchPage,ShoppingbagPage,DeliveryPageredesign Figure25Addundopopout
Figure26.Addpagetitle‘shipping’
11RedesignTesting(PerformanceandSatisfaction)
11.1Introduction
TodetermineiftheredesignedZarawebsitehasimprovedintermsofperformance andsatisfaction
Fourmetrics(TaskTime,TaskSuccess,ErrorsMade,Lostness)wereusedto evaluatetheperformanceofthesitebeforeandafterimprovements.
SatisfactionwasevaluatedusingtheSystemUsabilityScale(SUS)andThinkAloud Methodtocomparethetwowebsites(redesignedZara,originalZara).
11.2Methods
1121SettingandSample
Therewereeightvalidsamplesforthisevaluation,andparticipantswereinvolvedin bothwebsites
1122DataCollectionMethods
Datacollectiontookplaceonline.Participantsloggedintothesitebeingassessed andcompletedtherequiredthreetoptaskscenarios,participantswereaskedtosay outloudwhattheyweredoing,thinking,andfeelingatthetimeAndSUSscores weregivenforeachofthetwositesattheendofthesession.Screensand microphonesweresharedthroughouttheonlinemeetingviaMicrosoftTeams, allowinginformationtobesharedandrecordedinrealtime
1123DataEvaluationMethods
Thesamplesizeforthisevaluationwastoosmalltorunthestatisticswithmuch confidence,soabarchartwasusedtoanalyzetheperformanceandtheSUSscores againstthetwowebsites.
TheThinkAloudmethoddataweretranscribedandcodedforkeyinformation
11.3Performanceresultsandevaluation
11.3.1TaskTime
Thecombinedlengthoftimethatthetwogroupsofparticipantsspentusingthetwo websites(RedesignedZara,OriginalZara)tocompletethethreetaskswascounted separatelyandtheAveragewascalculatedseparately.Thelengthofthetaskwas reducedaftertheredesignofthewebsite(Figure271)
Figure271TaskTime(average) 11.3.2TaskCompletion Participantshadanaveragetasksuccessrateof100percentwhenusingboth sites(Figure272) Figure27.2.TaskCompletion(average) 1133ErrorsMade Thenumberoferrorsmadebytheparticipantsinusingthetwowebsitestocomplete thethreetaskswascountedseparatelyandtheaveragevaluewascalculatedAfter beingredesignedthenumberoferrorsmadewassignificantlyreduced(Figure27.3).
Figure273ErrorsMade(average) 11.3.4Lostness Theparticipants'lostnessduringtheuseofthetwowebsitestocompletethethree taskswascountedseparatelyandtheAveragewascalculatedseparatelyThe differencebetweenthetwowasnotsignificantandbothwerelessthan0.4,whichis ahighefficiency(Figure274) Figure274Lostness(average) 1135Conclusion Theresultsofthestudyshowedthatusersspentlesstimeandfewererrorsusing theredesignedZarawebsite,thusrequiringlesseffortandbeingmoreefficient; Althoughthedifferenceintaskcompletion,andlostness,wassmall,itwas satisfactory.Insummary,thelevelofperformanceoftheredesignedZarawebsite wassuccessfullyimprovedaftertheevaluation
1141SystemUsabilityScale(SUS)
TheaverageSUSscoresforthetwositeswerecalculatedseparately.Itcanbeseen thatthereisaslightincreaseinsatisfactionwiththeredesignedZarawebsite,and thedifferencebetweenthetwoissmall(Figure28),withtheaverageSUSscorefor theredesignedZarawebsitebeingabove70,indicatingagoodlevelofsatisfaction (Bangor,KortumandMiller,2008)
1142ThinkAloudMethod
Thekey'Doing'themesweresummarisedinfivecategories,withthemostfrequent messagebeingD4Clickingonlink(23times)eg:Iclick'processtheorder'' Key'Thinking'themesineightcategoriesThemostfrequentpositivemessagewas T4-Meetexpectations(16times)whereusersgenerallyfeltthatthedelivery messagewasobviousenoughForexample,'Hereitis,Ichoosethisfreedelivery'; themostfrequentnegativemessagewasT2-Hardtofindthecontent(6times)e.g. 'Howmuchintotal?,here'stheprice'
Thekey'Feeling'themesareinthreecategories,withthemostfrequentmessage beingF2OK(12times)e.g.:'That'sokay.'Thereisagenerallypositiveattitude towardstheredesignedZara(Table14)
11.4Satisfactionresultsandevaluation
Figure28SUSscore(average)
Main Category Sub-Category Frequency DoingD1Browsing,Searchingforitem18 D2-Filtering 2 D3Choosethesize 8 D4Clickingonlink 23
ThinkingT1Likethecontent
T2Hardtofindthecontent
T4Meetexpectations
T5Donnotcareaboutthecontent2
T7Makingachoice
FeelingF1-Confusing
SatisfactionwithZarahasincreasedaftertheredesign,butsomenegative
11.5Reflection
ThesamplesizeforthisevaluationoftheredesignedZarawebsitewassmalldueto timeconstraintswhicharenotsufficienttosupportquantitativestatisticalanalysis. Theconclusionsoftheassessmentarethereforesomewhatlimited
Theparticipantsallhaddesignexperienceandwerefriendsandclassmatesofthe author,sotheytendedtogivepositivecomments,whichtosomeextentoptimized theactualleveloftheredesignedwebsite
Infuturedesignevaluations,alargerandomsamplefromthetargetgroupshouldbe takenasfaraspossibletobettersupporttheconclusions
D5-Lookforinformation 8
11
6 T3-Didn'tmeetexpectations 3
16
T6-Confusedaboutthecontent3
4 T8Donotlikethecontent 1
5 F2-OK 12 F3Good 7 Table14.SUSscore(average) 11.4.3Conclusion
commentscanstillbefoundinthequalitativeanalysis.Overallthesitehasbeen successfullyredesignedtoincreasesatisfaction
12DiscussionandConclusion
TheanalysisandevaluationoftheoriginalZarawebsiteusingtheprinciplesof usabilityandaccessibilityidentifiedseveralissuesthatledtotheredesignofthe website
TheredesignedZarawebsitewasassessedtohaveimprovedintermsof performanceandusersatisfaction,demonstratingthattheprinciplesofusabilityand accessibilitydobringconsiderablevaluetothewebsiteandcansuccessfully optimizetheuserexperience,leadingtoabetterreputation.
Itcanthereforebepredictedthatastheusabilityofthesiteincreases,itwillincrease thecommercialinterestinthesitetosomeextent.
Stangroom,J(2020)QuickStatisticsCalculators,socscistatisticscomAvailableat: https://www.socscistatistics.com/tests/(Accessed:19November2020).
Cohen,J.(1988)Statisticalpoweranalysisforthebehavioralsciences.SecondEdi. NewYork:LawrenceErlbaumAssociates
Bangor,A,Kortum,PTandMiller,JT(2008)‘Anempiricalevaluationofthe systemusabilityscale’,InternationalJournalofHumanComputerInteraction,24(6), pp.574594.doi:10.1080/10447310802205776.
EyeQuant(2020)EyeQuant,EyeQuant.Availableat:https://app.eyequant.com (Accessed:19November2020)
W3C(2020)WebContentAccessibilityGuidelines(WCAG)21Availableat: https://www.w3.org/TR/WCAG21/#sotd.
WebAIM(2020)Wave:WebAccessabilityEvaluationTool,Wave.
13References