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

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).

Tasktype

Scenario

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).

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.

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

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

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.

tobeaddressed.

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

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

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

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

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)

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

Redesign

1Whenthemousehoversoverthe'ZARA'iconatthetopofthepage,

Figure

Figure18

Figure19

2.Addatitledescriptiontothepagetoincreaseusabilityandatthe

3AsthereareoftenmultipleproductsinaproductimageSowhenthe

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

ShoppingBagPage

Redesign

DeliveryPage

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)

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)

ThinkingT1Likethecontent

T2Hardtofindthecontent

T4Meetexpectations

T5Donnotcareaboutthecontent2

T7Makingachoice

FeelingF1-Confusing

SatisfactionwithZarahasincreasedaftertheredesign,butsomenegative

11.5Reflection

ThesamplesizeforthisevaluationoftheredesignedZarawebsitewassmalldueto timeconstraintswhicharenotsufficienttosupportquantitativestatisticalanalysis. Theconclusionsoftheassessmentarethereforesomewhatlimited

Theparticipantsallhaddesignexperienceandwerefriendsandclassmatesofthe author,sotheytendedtogivepositivecomments,whichtosomeextentoptimized theactualleveloftheredesignedwebsite

Infuturedesignevaluations,alargerandomsamplefromthetargetgroupshouldbe takenasfaraspossibletobettersupporttheconclusions

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.