Veebikujunduse kriitika # 42: Peter ja James
Igal nädalal vaatame uut veebisaiti ja analüüsime kujundust. Toome välja mõlemad valdkonnad, mida on hästi tehtud, lisaks neile, kus saaks mõnda tööd kasutada. Lõpuks küsime teilt enda tagasiside.
Tänane sait on juveelikaupluste veebipood Peter ja James.
Tutvuge disainiressurssidega
Kui soovite oma veebisaidi edaspidises disainikriitikas kajastada, võtab see vaid paar minutit. Teie kujunduse kritiseerimise eest võtame 34 dollarit - tunduvalt vähem, kui maksaksite konsultandil teie saidi vaatamise eest! Lisateavet saate siit.
Peetri ja Jamesi kohta
“Kui rääkida peentest ehetest, siis Peter & James müüb ainult parimat. Alates kaunitest vääriskividest, mis on seatud uimastamise hõbedast ja valgest kullast, kuni meie tunnustatud pimestava itaalia silmaga teemantkäevõrude kollektsioonini, on iga meie veebisaidil leitav tükk tõeliselt erandlik. Me oleme pühendunud pakkuma oma klientidele parimat võimalikku kvaliteeti, kvaliteeti, teenindust ja disainertoodete ehete valikut. Järgime kuumimaid stiile ja moesuundeid, tagamaks, et pakume veebis alati uusimaid ja kõige nõudlikumaid ehteid. ”
Siin on kodulehe ekraanipilt:
Esialgne mulje
Minu esialgne mulje on siin kindlasti positiivne. Peter ja James on suurepärase ilmega veebisait. Koduleht on äärmiselt lihtne, mis sobib suurepäraselt teie tähelepanu juhtimiseks käevõrudega naise suure mõjuga fotole.
Muudatused, mida ma täna soovitan, on üldist disaini arvestades üsna väikesed. Isegi suurepärased disainerid võiksid alati kasutada täiendavat silmakomplekti, et läbi kammida ja pakkuda välja viise projekti kujunduse ja kasutatavuse viimistlemiseks.
Alustame sellest, et koputame päises ringi, et näha, mida saaksime paremaks muuta.
Päise joondamine
Esimene probleem, mida lehe ülaossa vaadates märkan, on see, et nii vasakul kui ka paremal küljel asuvate objektide horisontaalne joondamine on pisut juhuslik.
Tegelikult näen, mida disainer teeb, ja see on tegelikult üsna tahtlik. Madalamad esemed on mõeldud pisut taanduvaks, mis on paigutuse puhul tavaline tava. Selle probleem on siinjuures see, et leht on nii lihtne, et sellel lehel on vaid mõned objektid. Kui allapoole joondamist oleks rohkem, võib see paremini toimida, kuid praegusel kujul näib, et igal esemel on oma ainulaadne horisontaalne asend, mis tekitab pisut segaduse.
Lihtne lahendus on kasutada esmast pilti tugeva servana, mida saab jälgida mõlemalt poolt. Paremas ülanurgas olevad nupud võivad ilmselt jääda sinna, kus nad asuvad, kuid soovitan liigutada navigeerimist vasakule ja otsinguvälja paremale, et päise elemendid näeksid umbes nagu allpool olev pilt.
Navigeerimine hõljutage
Veel üks väike võimalik muudatus on lisada navigeerimislinkidele märgatav hõljukiefekt. See pole mitte niivõrd esteetiline muudatus, kuivõrd vähene kasutatavuse suurendamine. Kui näete, et hõljumisel toimuvad olulised muudatused, annab kasutaja positiivse tagasiside ja tagab, et nad teevad õigesti. Soovite, et nad hõljutaksid navigeerimist ja klõpsaksid saidil veelgi, nii et lisage väike efekt, mis seda toimingut tugevdab.
Praegu kursor muutub, kuid ma pole kindel, kas sellest piisab. Värv on alati teine võimalus, kuid ma pole kindel, et see siin sobib. Lihtsat allajoont saab rakendada minimaalse CSS-iga ja see säilitab disaini stiilse terviklikkuse, lisades samal ajal selget visuaalset tagasisidet.
Esmane pilt
Selle lehe tõelise esteetilise veetluse võib omistada ülaltoodud suurele pildile. See seab saidi tooni suurepäraselt ja annab lehele selge fookuspunkti. Minu ainus probleem selle pildi juures on see, et ma tahan rohkem!
See veebisait müüb kõrvarõngaid, kaelakeesid, käevõrusid ja sõrmuseid. See pilt näitab ainult käevõrusid. Ma arvan, et siin on palju potentsiaali nii saidi dünaamilisemaks muutmiseks kui ka muude jaotiste klõpsamiseks.
Soovitan seda stiili jäljendada ja hargneda neljaks erinevaks pildiks, üks iga sektsiooni jaoks. Siit saate valida kaks valikut. Esimene neist on lihtne slaidiseanss. Pole midagi väljamõeldud ega segavat, vaid mõne sekundi pärast lahustub aeglaselt järgmisesse pilti. Kui te pole slaidiseansside fänn, on võimalik alternatiiv, kui lehe laadimisel ilmub juhuslikult üks neljast pildist. Ma eelistan viimast varianti, kuid viimane võib teha huvitavaid A / B-testimisi, et näha, milline stsenaarium viib paremate ostutulemiteni.
Soovitatavad tooted
Esiletõstetud toodete jaotis kuvatakse otse põhipildi all. Selle jao kohta võib palju meeldida, kuid see on ka mõnes piirkonnas pisut konarlik. Esiteks on käevõrudega hõljukiefekt suurepärane. Kui hõljutate käevõru kohal, libiseb foto ümber, et teile teist külge näidata. See on fantastiline ja lõbus lahendus kolmemõõtmelise toote kuvamiseks kahemõõtmelises ruumis.
Nagu ülaltoodud pildilt näete, hüppab hõljumine ka selle väikese hinna / teabe kasti. Ma armastan seda ideed, kuid teostus tundub pisut ära. Üldiselt kasutatakse saadaolevat ruumi ebamugavalt. Hind ja kirjeldus surutakse liiga kaugele servadele ja neil pole palju ruumi hingamiseks. Ka kaks allosas olevat nuppu on lükatud kummaliselt paremale, mitte lõpuni, täpselt nii kaugele, et need pole täpselt paremal ega keskel.
Minu soovitus on siin lihtsalt veeta aega nende elementidega mängides, et näha, kuidas seda ruumi paremini kasutada. Ühendage iga üksus ümber, kohandage mõne elemendi suurust ja vaadake, kas te ei leia midagi pisut atraktiivsemat ja loetavamat.
Allolev pilt on minu kiire kaheminutiline katse. See pole parim, kuid näitab vähemalt head üldist ideed, kuidas ruumi natuke tõhusamalt kasutada.
Tootefotod
Minu viimane kommentaar selles valdkonnas kandub üle ka tootelehtedele. Ma ei ole toodete fännide suur fänn. Sellel on mitu põhjust. Esiteks on Photoshopi tilgavarjud pisut karedad. Ma pole kindel, kas nad on liiga tumedad, mitte piisavalt pehmed või mõlemad, kuid väikese ajainvesteeringuga võiksid need tunduda reaalsemad. Praegu näevad nad lihtsalt pisut cheesy välja ja alandavad lehe kvaliteeti natuke.
Kalded on ka pisut kohmakad. Näib, et need rikuvad lehe üldist visuaalset skeemi. Raske on täpselt määratleda, miks see nii on, kuid arvan, et võib olla, et nad on gradiendi alumisel küljel lihtsalt liiga tumedad. Proovige seda leevendada ja muuta kalle väiksemaks.
Samuti pole kogu saidi fotograafia tõesti nii ahvatlev, kui peaks. Need on kallid tooted, mis maksavad sadu ja isegi tuhandeid dollareid, kuid fotod on omamoodi tumedad ja koledad. Õnneks ei arva ma, et fotosessiooni tuleks ümber teha. Olen üsna kindel, et pildid vajavad lihtsalt järeltöötlusarmastust.
Siia paigutatud kujundus nõuab suure võtmega fotograafiat ja need pildid jäävad sellest lihtsalt vähemaks. Kuigi on olemas tonn, mida saaksite ja mida peaksite tegema iga foto kaunistamiseks, kuid isegi lihtne taseme reguleerimine läheb kaugele, helendades neid kesktoonid ja lisades veidi kontrasti. Siin on veel üks kiire ja räpane eelvaade heledamate kallete ja heledamate piltidega.
Nüüd asetage see vastuollu sellega, millega alustasime, ja näete selgelt meie tehtud muudatuste mõju.
Vaadake, kui suurt vahet on mõned väikesed muudatused teinud? Kujutage ette, kui palju parem tundub iga toode, tõsiste pingutustega esteetilise kvaliteedi parandamiseks. Paljud pildid on nii sarnased, et saaksite ühele neist salvestada Photoshopi töövoo ja selle kiiresti mõnele sekundile rakendada, selle asemel, et iga üksiku võtte jaoks tundide kaupa ringi liikuda.
Järeldus
Nagu ma eespool mainisin, on enamik soovitatud muudatusi üsna minimaalsed. Joonduste nihutamine, hõljumisefektide lisamine on lihtsalt võimalikud parandused, mis ei ole tingimata hädaolukorrad.
Kui teil on ainult ühe ülaltoodud teemaga tegelemiseks aega ja ressursse, soovitan minna pärast toodete esitlust. Usun kindlalt, et praeguses olekus olevad pildid tõmbavad asjatult saidi kvaliteeti palju madalamale kui see potentsiaalselt olla võib. Veebipoes on tootefotod üks olulisemaid asju õigeks saamiseks ja ometi siin on minu arvates just see valdkond, millest kõige rohkem puudu on.
Te ei pea tingimata minu muudatusi täpselt jälgima, vaid peate lihtsalt mõistma, millised on toodete väljanägemise põhiprobleemid, ja leidma oma lahendused nende piirkondade tajutava kvaliteedi tõstmiseks.
Sinu kord!
Nüüd, kui olete minu kommentaare lugenud, astuge sisse ja aidake, andes disainerile täiendavaid nõuandeid. Andke meile teada, mis on teie arvates disainilahenduses suurepärane ja mis võiks teie arvates olla tugevam. Nagu alati, palume teil ka saidi kujundajat austada ja pakkuda selgeid konstruktiivseid nõuandeid, mis ei võimalda ränki solvanguid.
