Kritika web dizajna # 42: Peter i James
Svakog tjedna pregledavamo novu web stranicu i analiziramo dizajn. Izdvojit ćemo oba područja koja su dobro učinjena, osim onih koja bi mogla koristiti neko djelo. Na kraju, završit ćemo traženjem da pošaljete svoje povratne informacije.
Današnje mjesto su Peter i James, internetski prodavač nakita.
Istražite dizajnerske resurse
Ako želite poslati svoju web stranicu kako bi je predstavili u budućoj dizajnerskoj kritici, potrebno je samo nekoliko minuta. Naplaćujemo 34 USD za kritiku vašeg dizajna - znatno manje nego što biste platili za savjetnika da pogleda vašu stranicu! Više možete saznati ovdje.
O Petru i Jakovu
"Kad je u pitanju fini nakit, Peter i James prodaju samo najbolji. Od prekrasnih dragulja postavljenih u sjajnom srebru i bijelom zlatu do naše renomirane sjajne italijanske mrežaste dijamant narukvice, svaki pojedinačni komad koji pronađete na našoj web stranici zaista je izuzetan. Posvećeni smo pružiti našim kupcima najbolju vrijednost, kvalitetu, uslugu i izbor dizajnerskog nakita koji je na raspolaganju. Pratimo najnovije stilove i modne trendove, kako bismo osigurali da uvijek nudimo najnoviji i najpopularniji nakit na mreži. "
Evo snimka zaslona početne stranice:
Početni dojam
Moj početni dojam ovdje je definitivno pozitivan. Peter i James je sjajna web stranica. Početna stranica je vrlo jednostavna, što je izvrsno za skretanje pažnje na fotografiju žene s narukvicama.
Promjene koje ću danas predložiti poprilično su malene s obzirom na cjelokupni dizajn. Čak su i sjajni dizajneri uvijek mogli koristiti dodatni set očiju za češljanje i predložiti načine za poboljšanje dizajna i upotrebljivosti projekta.
Započnimo pokucavanjem u zaglavlju da vidimo što možemo poboljšati.
Usklađivanje zaglavlja
Prvi problem koji vidim kada pogledam vrh stranice je da se vodoravno poravnavanje objekata s lijeve i desne strane osjeća pomalo nesretno.
Zapravo, vidim što radi dizajner i to je zapravo prilično namjerno. Zamišljeno je da donji predmeti budu lagano razvedeni, što je uobičajena praksa u izgledu. Ovdje je problem u tome što je stranica toliko jednostavna da na njoj postoji samo nekoliko objekata. Ako bi bilo više za poravnanje s donjim, ovo bi moglo funkcionirati i bolje, ali kako stoji, gotovo svaki predmet ima svoj jedinstveni vodoravni položaj, što dovodi do pomalo nereda.
Jednostavno rješenje je korištenje primarne slike kao jakog ruba koji se može slijediti na obje strane. Gumbi u vrhu desno mogu vjerojatno ostati tamo gdje jesu, ali preporučujem pomicanje navigacije ulijevo i polje za pretraživanje desno tako da elementi zaglavlja izgledaju približno kao na slici ispod.
Zadržite pokazivač miša
Još jedna sitna moguća promjena je dodavanje zamjetnog efekta lebdenja na navigacijskim vezama. To nije toliko estetska promjena koliko malo pojačanje upotrebljivosti. Ako se vidljiva značajna promjena dogodi prilikom lebdenja, korisniku se daju pozitivne povratne informacije i osigurava im da rade ispravno. Želite da lebde pokazivač na navigaciji i kliknu dalje na web mjesto, tako da dodate mali efekt koji pojačava ovu radnju.
Trenutno se kurzor mijenja, ali nisam siguran da je to dovoljno. Boja je uvijek druga opcija, ali nisam siguran da je ovdje prikladna. Jednostavna podvlaka može se implementirati s minimalnim CSS-om i održat će elegantan integritet dizajna uz dodavanje jasnih vizualnih povratnih informacija.
Primarna slika
Prava estetska privlačnost na ovoj stranici može se pripisati velikoj slici gore. Ovo savršeno postavlja ton web stranice i daje stranici jasnu žarišnu točku. Moj jedini problem sa ovom slikom je da želim više!
Ova web stranica prodaje naušnice, ogrlice, narukvice i prstenje. Ova slika prikazuje samo narukvice. Mislim da ovdje postoji puno potencijala kako web mjesto učiniti dinamičnijim i privući neke klikove na druge odjeljke.
Preporučujem oponašanje ovog stila i razgranavanje na četiri različite slike, po jedna za svaki odjeljak. Odavde imate dva izbora. Prvi je jednostavan prezentacija. Ništa fancy ili ometajuće, samo polako otapanje u sljedeću sliku nakon nekoliko sekundi. Ako niste ljubitelj prezentacijskih prikaza, moguća je alternativa slučajnim odabirom jedne od četiri slike prilikom učitavanja stranice. Više volim prvu opciju, ali druga bi mogla napraviti nekoliko zanimljivih A / B testiranja da biste vidjeli koji scenarij vodi do boljih rezultata kupnje.
Istaknuti Proizvodi
Odjeljak Istaknuti proizvodi pojavljuje se odmah ispod primarne slike. O ovom odjeljku ima puno toga za svidjeti, ali u nekim je područjima također malo grubo. Prije svega, efekt lebdenja s narukvicama je izvrstan. Kad pokažete mišicu iznad narukvice, fotografija se okrene oko sebe da bi vam pokazala drugu stranu. Ovo je fantastično i zabavno rješenje za prikazivanje trodimenzionalnog proizvoda u dvodimenzionalnom prostoru.
Kao što možete vidjeti na gornjoj slici, lebdenje također iskače ovaj mali okvir cijene i informacija. Volim ovu ideju, ali izvršenje se pomalo osjeća. Sveukupno, raspoloživi prostor se koristi na nespretan način. Cijena i opis su previše gurnuti prema rubovima i nemaju puno prostora za disati. Također, dva gumba na dnu neobično su gurnuta udesno, a ne skroz, samo dovoljno daleko da nisu u pravu ili u sredini.
Moja preporuka je da samo provedete neko vrijeme igrajući se s tim elementima kako biste vidjeli kako možete bolje iskoristiti ovaj prostor. Preuredite svaki predmet, prilagodite veličinu nekoliko elemenata i provjerite ne možete li smisliti nešto malo privlačnije i čitljivije.
Slika ispod je moj brzi dvominutni pokušaj. Nije najbolje, ali barem pokazuje dobru opću ideju kako malo učinkovitije iskoristiti prostor.
Fotografije proizvoda
Moj posljednji komentar u ovom području prenosi se i na stranice proizvoda. Nisam veliki obožavatelj načina na koji se proizvodi trenutno prikazuju. Postoji nekoliko razloga za to. Prije svega, Photoshop kapljice su pomalo grube. Nisam siguran jesu li previše mračni, nisu dovoljno mekani ili oboje, ali mogli bi izgledati mnogo realnije uz malo uloženog vremena. Upravo sada izgledaju pomalo sramežljivo i pomalo smanjuju kvalitetu stranice.
Gradijenti su također malo nezgodni. Čini se da krše sveukupnu vizualnu shemu stranice. Teško je točno odrediti zašto je to tako, ali mislim da je moguće da su na donjoj strani uspona jednostavno pretamni. Pokušajte to ublažiti i gradijent učiniti suptilnijim.
Također, fotografija na cijelom mjestu zaista nije toliko privlačna kao što bi trebala biti. Ovo su vrhunski proizvodi koji koštaju stotine, pa čak i tisuće dolara, a fotografije su nekako mračne i ružne. Srećom, mislim da fotošop ne treba preraditi. Prilično sam siguran da je slikama jednostavno potrebna neka ljubav nakon obrade.
Dizajn web mjesta ovdje traži visoke ključne fotografije, a ove slike jednostavno nedostaju. Iako postoji tona koju biste mogli i trebali učiniti da biste prerušili svaku fotografiju, ali čak i jednostavno prilagođavanje nivoa znatno ide osvjetljavanjem tih srednjih tonova i dodavanjem kontrasta. Evo još jednog brzog i prljavog pregleda s lakšim gradijentima i posvijetljenim slikama.
Sada to usporedite s onim s čime smo započeli i jasno se vidi učinak promjena koje smo uveli.
Pogledajte koliko razlike je napravljeno nekoliko malih prilagodbi? Zamislite koliko bi se svaki proizvod mogao činiti ozbiljnim naporom za poboljšanjem estetske kvalitete. Mnoge su slike toliko slične da biste na jedan od njih mogli zabilježiti radni tijek Photoshopa i brzo ih primijeniti na sve u sekundi, umjesto da satima prelistavate svaki pojedinačni snimak.
Zaključak
Kao što sam gore spomenuo, većina predloženih promjena prilično je minimalna. Stiskanje poravnanja i dodavanje lebdećih efekata, to su jednostavno moguća poboljšanja koja nisu nužno hitna stanja.
Ako imate samo vremena i resursa da riješite jedno od gornjih pitanja, preporučujem vam nakon prezentacije proizvoda. Čvrsto vjerujem da slike u njihovom trenutnom stanju nepotrebno povlače kvalitetu web mjesta daleko ispod onoga što potencijal ima. U internetskoj trgovini fotografije proizvoda jedna su od najvažnijih stvari koje treba ispraviti, a ipak mislim da su ovdje područje koje im najviše nedostaje.
Ne morate nužno točno slijediti moje promjene, samo pokušajte shvatiti koji su glavni problemi u načinu na koji proizvodi izgledaju i pronaći vlastita rješenja za povećanje perceptivne kvalitete u ovim područjima.
Tvoj red!
Sada kada ste pročitali moje komentare, dodajte i pomozite dajući dizajnerima neke daljnje savjete. Javite nam što mislite o dizajnu i što mislite da bi moglo biti jače. Kao i uvijek, molimo da također poštujete dizajnera stranice i ponudite jasan konstruktivan savjet bez bilo kakvih oštrih uvreda.
