ZARA 网站评估与再设计 - 可用性,可及性原则和实践

Page 1

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

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.