Usability webinar GPEC - Gomag

43
Bune prac*ci in usability pentru magazinele online GPeC.ro

Transcript of Usability webinar GPEC - Gomag

Page 1: Usability webinar GPEC - Gomag

Buneprac*ciinusabilitypentrumagazineleonline

GPeC.ro

Page 2: Usability webinar GPEC - Gomag

Us@a#%bil<:i#ty

“…is#$&>?theextenttowhich!@a*&%$$productcan|”:”>%^&$beusedby^@$#><>?specifiedusersto~~!?+{:”|{achievespecified#@&!()goals#$@!(witheffecOveness<:{~+_,efficiency,$%@,.:”>”!andsaOsfacOonina^&*#_)!specifiedcontextof“:<@%$use.”

Page 3: Usability webinar GPEC - Gomag

Us@a#%bil<:i#ty

“…is#$&>?theextenttowhich!@a*&%$$productcan|”:”>%^&$beusedby^@$#><>?specifiedusersto~~!?+{:”|{achievespecified#@&!()goals#$@!(witheffecOveness<:{~+_,efficiency,$%@,.:”>”!andsaOsfacOonina^&*#_)!specifiedcontextof“:<@%$use.”

Page 4: Usability webinar GPEC - Gomag

Us@a#%bil<:i#ty

“…is#$&>?theextenttowhich!@a*&%$$productcan|”:”>%^&$beusedby^@$#><>?specifiedusersto~~!?+{:”|{achievespecified#@&!()goals#$@!(witheffecOveness<:{~+_,efficiency,$%@,.:”>”!andsaOsfacOonina^&*#_)!specifiedcontextof“:<@%$use.”

Page 5: Usability webinar GPEC - Gomag

Usability

“…istheextenttowhichaproductcanbeusedbyspecifieduserstoachievespecifiedgoalswitheffecOveness,efficiencyandsaOsfacOoninaspecifiedcontextofuse.”–sursa:ISO9241-11:GuidanceonUsability(1998)

Page 6: Usability webinar GPEC - Gomag

Ce intelegem, in principiu, prin uzabilitate? § eficientasiusurintafolosiriiuneipaginiwebsauauneiinterfeteelectronicedecatreunuOlizator,inscopulsaOsfaceriinevoiloracestuia;

§ site-ulpecaremaafluesteusordefolosit,intuiOv,simplu,explicit;§ gasesccuusurintainforma*iledecareamnevoie;§ nutrebuiesaapelezlainstrumenteajutatoarepentrua-miindepliniobiecOvul;§ link-uriledinsitesuntfunc*onalesiraspundintocmaiasteptarilormele(ex.:maasteptcaapasandbutonulde“adaugaincos”,produsulmeusafieintrodusexplicitincosuldecumparaturi)

§ informa*ileesen*alesunteviden*atesi“laindemana”(ex.:maasteptsavadclarpretulunuiprodus,cumselivreaza,cegaranGeareetc.)

§ procesuldecomandaonlinefunc*oneazaperfect(nuamerorilacompletareaformulareloretc.)

Page 7: Usability webinar GPEC - Gomag

Cat de importanta este uzabilitatea in mixul de factori care contribuie la succesul unui

magazin online?

Page 8: Usability webinar GPEC - Gomag

Uzabilitatea este importanta, dar nu inseamna totul!

Succesulunuimagazinonlinenudepindeexclusivdeuzabilitate,cidenumerosifactoriinterconectaO:§ planuldeafaceri§ niveluldeinvesOOesiadministrareabugetelorpeparcurs/cashflow§ poliOcadecomunicaresimarkeOng§ documentareaproduselor§ calitateaserviciilorsiOmpulderaspunsfatadeclient§ grijapentrusoluOonareaproblemelorclienOlordejaexistenO§ service&garanOi§ SEO§ etc.etc.etc.

Page 9: Usability webinar GPEC - Gomag

Uzabilitatea este piatra de temelie a unui magazin online

§ GandiO-valauzabilitatecalafunda*auneiconstruc*i!DacafundaOaesubreda,risculdeprabusirealcladiriiestemare!

§ Website-ulunuimagazinonlineestecarteadevizitainfataclientului,estevitrinaunuimagazintradiOonal!Dacawebsite-ulesteneingrijitsi,maiales,greudefolosit,veOpierdeclienO!

§ ScopulunuimagazinonlineestedeaVINDE.Daca–dincauzauneiproasteuzabilitaO-vizitatoriisite-uluidvs.(potenOaliclienO)parasescsite-ul,vadeziceOdelascopuldeaVINDE.

§ Nimanuinu-iplaclucrurilecomplicate,greudeurmarit,lipsitedeergonomie.Atuncicandvaconstrui*site-ul,gandi*-vacumarfisade*ne*unautomobilcareareschimbatoruldevitezeamplasatsubscaunulsoferului!

Page 10: Usability webinar GPEC - Gomag

Uzabilitatea este piatra de temelie a unui magazin online

§ Uzabilitateavaajutalacrestereanumaruluideconversii

§ Crestereanumaruluideconversiiinseamnamaimultecomenzionorate,asadarmaimultevanzariàmaimulObanipentrudvs.

§ UzabilitateaestestranslegatadeCustomerExperience.DacaexperientauOlizatoruluicuunsiteesteplacutasiDACAserviciilemagazinuluisuntcalitaOve,veOfirecomandatsicatreprieteni/alOclienOàmaimulObanipentrudvs.

§ Uzabilitateainseamnasaiiofericlientuluitautoateinstrumentelenecesare“laindemana”inasafelincatsaiicreezioexperientadecumparareplacuta.Uzabilitateainseamnasagandes*precumclientulsisaraspunziintocmailaasteptarilelui!

§ Iaincalculca*mpulpanalaluareadecizieideacon*nuarasfoireaunuisitesaudea-lparasi,sesitueazala6secunde...Sitotscade...

Page 11: Usability webinar GPEC - Gomag

Nu confunda clientul cu un expert!

Celemaifrecventegreselipecarelefacsiteownerii,dezvoltatoriisauoameniitehnicisuntlegatedefaptulcaTOTIUITACANUSUNTCONSUMATORIOBISNUITI!§ programatoriiau–dedeparte–oexperientabogataasuprasite-uluipecareildezvoltadecatvaaveavreodatacelcarenavigheazasiuOlizeazasite-ul

§ siteowneriiacOveazazilnicinacelasidomeniu,folosescterminologiisielementedejargonspecificedomeniuluisiuitacapentruconsumatoriiobsinuiOacesteasuntSF-uri.

§ anumiteaspectepotfi“crystalclear”pentruspecialisO,pentrusiteowneri,pentrudezvoltatori,pentruceicuexperienta–darunadevaratIADpentruconsumatoriiobisnui*(caresuntceimaimul*)

Page 12: Usability webinar GPEC - Gomag

Campul de cautare / Bara de Search

Tendintein2017

Page 13: Usability webinar GPEC - Gomag
Page 14: Usability webinar GPEC - Gomag
Page 15: Usability webinar GPEC - Gomag

Lista categoriilor de produse din site

Recomandari:§ DacavindeOmulteprodusesortateinmultecategoriisisubcategorii,puneOcategoriileprincipaleincoloanadinstangasi3-4categoriisecundarevizibilexpandatesaucuopeninlateral§ Tendintaeste,insa,deaaerisisite-ulcatmaimult

Page 16: Usability webinar GPEC - Gomag

Amazonin2011

Page 17: Usability webinar GPEC - Gomag

Amazonin2017

Page 18: Usability webinar GPEC - Gomag

Highlight pe meniu si categorii, promotii in lista de categorii, nu se acopera banner-ul central

Page 19: Usability webinar GPEC - Gomag
Page 20: Usability webinar GPEC - Gomag

• Listadecategoriideprodusepoatefiamplasatasiintr-unmeniuorizontal;• PuteO,inclusiv,avealistadecategoriideproduseintr-unmeniuorizontalsialtulverOcalpecoloanadinstanga–doardacavindeOmulteprodusegrupateinmultecategoriisisubcategorii

Page 21: Usability webinar GPEC - Gomag

Pozitionarea Banner-ului central din homepage

Recomandari:§ Centrulhomepage-uluiinparteasuperioaraestefavoritpentrubanner§ Tendintaestedeaaveabannerecatmaimaricadimensiuni,iarimaginilefolositesafiedeinaltarezoluOe§ NuuitaOdedelimitareacadrelorbanneruluisideposibilitateadeanavigaprinacestea§ NufolosiOmaimultdemaximum5cadreintr-uncarusel§ NupromovaOaltesite-uriinsite-ulvostru

Page 22: Usability webinar GPEC - Gomag
Page 23: Usability webinar GPEC - Gomag
Page 24: Usability webinar GPEC - Gomag

www.gpec.ro

Page 25: Usability webinar GPEC - Gomag

Amplasarea sectiunii de Cont / Sign-up / Login

Recomandari:§ Inprimafaza,oferiOposibilitateadeCheckoutasGuest(pemasuracenotorietateabrand-uluivostrucreste,puteOcerecreareaunuicontobligatoriupentrucomanda)§ FaceOmicro-conversiiinpaginadeThankYou,dupaplasareacomenzii(ex.:cereOatuncicreareaunuicont)§ DacafolosiOContul,amplasaO-linaceeasizonaundeseaflacosuldecumparaturi–coltdreaptasus§ InformlaruldecrearecontcereOnumaiinformaOileesenOale(celedecareaveOnevoiepentrulivrareacomenzii).

Page 26: Usability webinar GPEC - Gomag
Page 27: Usability webinar GPEC - Gomag

Amplasarea Cosului de cumparaturi – colt dreapta-sus, vizibil in toate paginile din site

Recomandari:§ Uneori,odatacuadaugareaunuiprodusincos,estebinesaduceOclientuldirectinprocesuldecheckoutpentrufinalizareacomenzii§ Exista,insa,excepOi–aceleadeaaveaunCoscumaimulteprodusepemajoritateacomenzilor–testaOcumemaibinepentrubusinessulvostru§ RenuntaOlaoricealteelementedinsite–inclusivlacoloaneledecategoriiinpaginadeCos.

Page 28: Usability webinar GPEC - Gomag

Exemplu mai vechi de pagina de Cos la PC Garage - dezbatere

Page 29: Usability webinar GPEC - Gomag

Sectiunile de Help / Support – tot in zona din dreapta-sus, pe langa Cos, Cont, Contact etc.

ExemplumaivechidelaJapora.ro–DezbatereOK–totulgrupatincoltdreapta-sus:telefoane,Contact,Cont,Cos,InformaOidespreprocesuldecumpararesilivrareetc...Si,totusi,maiexistaosecOunenumitaInformaOi–cevaspuneaceastasecOune?

Page 30: Usability webinar GPEC - Gomag

Voiladevezi!J

Page 31: Usability webinar GPEC - Gomag

Sectiunea de Contact si amplasarea link-ului de Contact

Recomandari:§ Link-uldeContactpoatefiamplasatincoltuldindreapta-sus(grupatcuCosul,Contul),darsidublatinfooter§ OferiOinformaOidetaliatedecontactinpaginadeContact:telefoane,email,adresapostalacompleta,datedesprefirmacareadministreazamagazinul,numedepersoaneresponsabilepeanumitedepartamente,programuldelucrucupublicul,hartaamplasariisediuluietc.ToateconferauOlizatoruluiincredereinmagazin!

Page 32: Usability webinar GPEC - Gomag
Page 33: Usability webinar GPEC - Gomag

Seciunea de Termeni si conditii (amplasare in footer)

Recomandari:§ EsteesenOalsaaveOosecOuneT&Cbinepusalapunct,chiardacanuocitestenimeni§ NucopiaOT&Cdepealtesite-urisaumacaradaptaO-lelabusiness-ulvostrucudeosebitaatenOe§ AsiguraO-vacaindepliniOobligaOilelegaleinT&CàinscriereinCompeOOaGPeC(beneficiaOsideunauditTrusted.ro)§ NupuneObifaByDefaultpeT&Cinprocesuldecheckout

Page 34: Usability webinar GPEC - Gomag

Breadcrumbs (Lantul de Navigare) – de ce e important?

- SEO- NavigareausoaraauOlizatorilorinsitefarasafienecesaraintoarcereaincategoriileprincipaledeproduse

Page 35: Usability webinar GPEC - Gomag

Filtre si sortari

Recomandari:§ amplasarepecoloanadinstanga,darsipeorizontaladeasupralisteideprodusedincategorie§ folosiOcatmaimultefiltreàajutauOlizatorulsaidenOficerapidproduseledecareesteinteresat§ suntesenOalefiltrelecaresorteazaproduseleduparaOng-ulsaucomentariilealtorclienOàwordofmouthestedinceincemaiimportantindeciziadecumparare§ nufolosiOdenumiridefiltreambiguesaufiltrecarenuisiaurostul

Page 36: Usability webinar GPEC - Gomag

www.gpec.ro

Page 37: Usability webinar GPEC - Gomag
Page 38: Usability webinar GPEC - Gomag

Imaginea produsului (atat in pagina de categorie, cat si in pagina de produs)

Recomandari:§ folosiOimaginicatmaisugesOve,cuorezoluOebunasifuncOedezoomfuncOonala§ incercaOsafolosiOimaginileincontextulfolosiriiprodusuluipentruacreaemoOeuOlizatoruluisiaimpulsionacumparatura§ pelangapozeledelaproducator,faceOsivoipoze(chiardacanufoarteprofi)àobisnuintavinedinSocialMedia§ arfiidealsaaveOsivideo-prezentarideprodus(ex.:unboxing…)§ pozeleprodusuluidinmaimulteunghiurisauincomparaOecuobiecteuzuale,convingmaiusoruOlizatoriisacumpere(ex.:suntemhandicapaOpeonlinesiavemnevoiesasOmcatdesubOreeunMacBookAir–asadaropozaalaptop-uluilangaunpix,nepoateajutarapidsanefacemidee)

Page 39: Usability webinar GPEC - Gomag
Page 40: Usability webinar GPEC - Gomag
Page 41: Usability webinar GPEC - Gomag

Titlul, Pretul produsului, Adauga in Cos

Recomandari:§ inpaginadeproduscelemaiimportantesunt:Titlul,Imaginea,Pretul(catmaivizibilsiincluzandtoatetaxele)siButonuldeAdaugainCos–toatetrebuieevidenOate!–folosiOcromaOcapentruevidenOereabutoanelordeacOune.§ NuneglijaOinsaopiniilealtorclienO,informaOiledelivrare,garanOisi–evident–descriereaproduselor.

Page 42: Usability webinar GPEC - Gomag
Page 43: Usability webinar GPEC - Gomag

Scurte Concluzii / Sfaturi § Keepitsimple!Multemagazinesunttentatesaafisezefoartemultemodule,funcOunietc.dindorintadea-siajutaclienOi.Infapt,maimultiiincurcaO!

§ Direc*ona*consumatorulcatreac*uneprindesignsiculoare!

§ Eviden*a*doarinforma*ileesen*ale,careconvertesc.EvitaOaglomerareacuinformaOicaredistragatenOauOlizatoruluidelaacumpara(elementedeOp“noise”).

§ Folosi*sintagma“adaugaincos”inloculsintagmei“cumpara”pebutonuldecumparare(puteOfaceA/BtestesaincercaO)

§ Odataadaugatunprodusincos,ave*grijasanuintrerupe*fluxuldecomanda.

§ Respecta*uzanteleinvigoare,gandi*precumconsumatorulobisnuitsi…

§ INTOTDEAUNATESTATI!