Coffee shop - PITTI CAFFE

Zdravim miestnu komunitu,
po nejakom case si aj ja do seba necham hodit kamenom, tentokrat je to design specializovaneho e-shopu Slovenskeho a Ceskeho zastupenia Talianskej znacky PITTI CAFE.
E-shop je specificky v tom, ze bude viacmenej ponukat tzv. "office programy" pre male a stredne firmy, kde sa neplati za pristroj (kaovar), ktory v pripade volby programu a urciteho mnozstva odobratej kavy dostavate zdarma.
Volil som uplne cisty design nakolko sa jedna o potrevinarske produkty cheli sme dosiahnut iluziu cistoty a zaroven exkluzivity.
Dufam ze sa podarilo dosiahnut ciele a to prezentovat znacku, produktovu radu a strategiu predaja.
Budem rad za kazdu pripomienku, alebo postreh.

Design stranok
http://fc01.deviantart.net/fs70/f/20...ck-d4nwj0p.png

Pre lepsiu predstavivost mam nakodovanu aj HTML sablonu
http://pitti-caffe.e-comerce.sk/
http://pitti-caffe.e-comerce.sk/vypis.html#

Nakodovany e-shop
http://www.pitti-caffe.e-comerce.sk/
plugin pre 3D zobrazenie tovaru
http://www.pitti-caffe.e-comerce.sk/...freedom-c11/25



// V pripade zaujmu o podobne riesenie ci uz e-shopu, alebo webovych stranok ma nevahajte kontaktovat

Pěkné, jednoduché, přehledné... mě se to líbí

Mě se to též líbí, když bych si chtěl koupit kávovar tak taková stránka by mi určitě dodala pocit kvality a dobrého nákupu;-)

Barevne mi to pripomnelo obal od Kofoly :)

Přehledný, pěkný na pohled. Akorát některý přechodový efekty v carouselu mi připadají dost přehnaný, ale to je detail.

taky se mi libi :) je to pekny, cisty

a jednu rejpavou: nema v baneru na HP byt "Je čas na PITTI CAFFE" (2x T v PITTI)

Pěkné, jednoduché, přehledné... mě se to líbí

Diki :)

---------- Příspěvek doplněn 29.01.2012 v 21:54 ----------

Původně odeslal VOSICKA

Mě se to též líbí, když bych si chtěl koupit kávovar tak taková stránka by mi určitě dodala pocit kvality a dobrého nákupu;-)

Tak podobne pocity by som prial kazdemu zakaznikovi nasho klienta :)

---------- Příspěvek doplněn 29.01.2012 v 21:55 ----------

Původně odeslal 800XE

Přehledný, pěkný na pohled. Akorát některý přechodový efekty v carouselu mi připadají dost přehnaný, ale to je detail.

Diki, efekty v slide show su vyberane nahodne as z 10 co ma ten plugin k dispozicii, to poladime az nakoniec :)

---------- Příspěvek doplněn 29.01.2012 v 21:57 ----------

Původně odeslal Twista

taky se mi libi :) je to pekny, cisty

a jednu rejpavou: nema v baneru na HP byt "Je čas na PITTI CAFFE" (2x T v PITTI)

Jasne ze ma ! Inac upozornit na chybu nikdy neberiem ako rypanie. Texty su viacmenej ilustracne, ono to pred zverejnenim aj tak prechadza nas copywriter a potom ked tam budu chyby...Beda mu ! :)

Pěkný, čistý
akorát ten newsletter je moc nalepenej dole

Moc hezký, na první pohled čisté, přiměřeně výrazné, super.

Graficky fakt pěkný.

Jinak sry, že furt otravuju s použitelností, ale teď čtu o použitelnosti jednu knížku za druhou a nedá mi to :)

1) Jak máš nahoře nad tel. číslem nápis PITI Coffee Servis - asi bych jako uživatel nevěděl, jestli na to můžu kliknout - nějak mě to vybízí ke kliknutí, i když to není podtržený
2) Na všech buttonech je ta šipka málo viditelná (pro méně zrakově obdařené :) bude neviditelná)
3) Největším problémem je, že jako uživatel bych byl zmatený tím, jestli hnědé bloky/buttony s velkými cenami patří k obrázkům a dostanu se na stejnou podstránku, jako když kliknu na oranžovou šipečku u nadpisu nad obrázkem (předpokládám že ne, ovšem vypadá to tak)
4) Vzhledem k tomu, že se bude jednat o středně velký web, asi bych doplnil drobčkovou navigaci
5) Vyhledávací box je z hlediska použitelnosti celý špatně - ale určitě víš, jak by to mělo vypadat :)
6) Dole máš "napranou" výzvu k newsletteru a nahoře v headeru plýtváš místem - možná by to chtělo ten nepoměr vyrovnat
7) Myslím si, že ve výpisu produktů (obr. 2) není třeba dávat box s množstvím produktu - myslíš, že na této stránce bude někdo objednávat u podobného druhu zboží? Podle mě by úplně stačil button detail produktu v oranžové barvě s ikonou lupy/oka a vpravo od toho cena. Teoreticky by stačila jen cena a podtržený název produktu, ale chápu, že se ti do toho jako grafikovi nebude chtít.
8) Jak máš 3 obrázky vedle sebe a nad nimi nadpisy a krátký textík, tak tam bych dal trochu více místa na text, ať to může markeťák/copywriter lépe promáknout. Tzn. rozšířil bych celý box na výšku a dal aspoň 3 - 4 řádky.
9) Chtělo by to jedním výstižným heslem říct, kam jsem se dostal. Asi bych to hodil napravo od loga - něco jako "vše pro milovníky kávy s možností pronájmu" - jen ne takhle humpolácky :) - na úvodní stránce se to dá vytušit, u podstránek už by to bylo k užitku. Pokud by se do sloganu ještě dalo dostat, co je PITI, bylo by tu supr - nevím, jestli je to značka kávy, kávovarů, název e-shopu nebo firmy?
10) Také nevím, jestli box "jedinečné kávové směsi PITI" je to stejné jako "Pitti cafe" v menu - asi ano, pojmenoval bych to stejně a menu seřadil dle těch velkých obrázků

Nikdo se nepouští do záporů, no já aspoň nějaké zkusím najít. Cílem kritiky není jen pochvala, žejo:)

Design:
Je to hezké. Řekl bych že moc, na první pohled. Na můj vkus(to je ale subjektivní) je to ale až moc geometrické. Nemám rád, když je web udělaný jen z obdélníčků. Ve mě to při delším koukání vzbuzuje dojem "To je ale pěkný wireframe, těším se na hotovou verzi!". Aneb - trochu více propojit prvky, nebýt striktně obdélníčkový s borderem.

Text ve slideru ".je čas na PITTI cafe" mi přijde příliš chudý, vylepšil bych jej o decentní efekty(alespoň jeho pozadí).

Umístění a formátování "newsletteru" se mi nelíbí, vyčnívá ze stránky, je moc nalepené na social ikonách.

Šablona: (tady je to spíš otázka, jestli je to konečná verze nebo jen první náhled?)

pozor na preload obrázků. Na webech mě štve, když se hover dlouho načítá a pak na mě blikne. Po loadu hover obrázku už funguje animace tlačítek "small office", "big office" a "VIP Gold" programů v pořádku.

Proč nejsou texty v obrázcích "jako text"? Žádné složité fonty to nejsou, nevidím v tom problém(a kdyby, podformátuju)

Proč je "PITTI Doporučuje" s velkým "D"?

Animace ve slideru mi vůbec nefungují správně (Opera 11.6). Jsou až příliš agresivní.

Původně odeslal polakpet

Animace ve slideru mi vůbec nefungují správně (Opera 11.6). Jsou až příliš agresivní.

U mě v Mozille OK.

Původně odeslal heleho

U mě v Mozille OK.

Zkusím svou potíž víc specifikovat. Chvilku se obrázky střídají tak, jak je asi zamýšleno. Sem tam však slider "neví, co by chtěl" a zběsile pendluje doleva doprava, než si vybere obrázek, na kterém zastaví.

Původně odeslal vodička

Moc hezký, na první pohled čisté, přiměřeně výrazné, super.

Co na to povedat, diki :)

---------- Příspěvek doplněn 30.01.2012 v 07:50 ----------

Původně odeslal heleho

Graficky fakt pěkný.

Jinak sry, že furt otravuju s použitelností, ale teď čtu o použitelnosti jednu knížku za druhou a nedá mi to :)

1) Jak máš nahoře nad tel. číslem nápis PITI Coffee Servis - asi bych jako uživatel nevěděl, jestli na to můžu kliknout - nějak mě to vybízí ke kliknutí, i když to není podtržený
2) Na všech buttonech je ta šipka málo viditelná (pro méně zrakově obdařené :) bude neviditelná)
3) Největším problémem je, že jako uživatel bych byl zmatený tím, jestli hnědé bloky/buttony s velkými cenami patří k obrázkům a dostanu se na stejnou podstránku, jako když kliknu na oranžovou šipečku u nadpisu nad obrázkem (předpokládám že ne, ovšem vypadá to tak)
4) Vzhledem k tomu, že se bude jednat o středně velký web, asi bych doplnil drobčkovou navigaci
5) Vyhledávací box je z hlediska použitelnosti celý špatně - ale určitě víš, jak by to mělo vypadat :)
6) Dole máš "napranou" výzvu k newsletteru a nahoře v headeru plýtváš místem - možná by to chtělo ten nepoměr vyrovnat
7) Myslím si, že ve výpisu produktů (obr. 2) není třeba dávat box s množstvím produktu - myslíš, že na této stránce bude někdo objednávat u podobného druhu zboží? Podle mě by úplně stačil button detail produktu v oranžové barvě s ikonou lupy/oka a vpravo od toho cena. Teoreticky by stačila jen cena a podtržený název produktu, ale chápu, že se ti do toho jako grafikovi nebude chtít.
8) Jak máš 3 obrázky vedle sebe a nad nimi nadpisy a krátký textík, tak tam bych dal trochu více místa na text, ať to může markeťák/copywriter lépe promáknout. Tzn. rozšířil bych celý box na výšku a dal aspoň 3 - 4 řádky.
9) Chtělo by to jedním výstižným heslem říct, kam jsem se dostal. Asi bych to hodil napravo od loga - něco jako "vše pro milovníky kávy s možností pronájmu" - jen ne takhle humpolácky :) - na úvodní stránce se to dá vytušit, u podstránek už by to bylo k užitku. Pokud by se do sloganu ještě dalo dostat, co je PITI, bylo by tu supr - nevím, jestli je to značka kávy, kávovarů, název e-shopu nebo firmy?
10) Také nevím, jestli box "jedinečné kávové směsi PITI" je to stejné jako "Pitti cafe" v menu - asi ano, pojmenoval bych to stejně a menu seřadil dle těch velkých obrázků

Neotravujes :) Dobry brainstorming v kombinacii s konstruktivnou kritikou su zakladom uspesneho projektu. Avsak vo vacsine tvrdeni sa podla mna mylis, tiez som co to precital :) a skusim to osvetlit zo svojho pohladu. I ked co webu chyba ukaze az cas a dokladna analyza interakcii na uvodnej stranke. V kazdom pripade si vazim hlbkovy pohlad na vec z ineho uhlu, ale bez poznania zadania to nie je mozne objektivne zhodnotit.

1.) Nemyslim ze je to zavadzajuce, to ci na to ide klikniut, alebo nie sa dozvie uzivatel ked na to najde myskou a zmeni/nezmeni sa kurzor. Vzdy je lepsie ked na to sksi kliknut ako keby to prehliadol. Okrem toho na toto kliknut pojde :)
2.) To z casti beriem, ale hover efekt je dost vyrazny aby si vedel ze je to interaktivny prvok
3.) Nie je to problem :) Podla mna je to jasne odlisene jednak farebne jednak sprievodnym textom, okrem toho je mi v podstate jedno kam kliknes, stranky su navrhnute tak ze na kazdej kategorii cez cross selling panel vidis skoro vsetky produkty a sluzby
4.) Drobkova navigacia na podstrankach bude i ked web nie je zlozito strukturovany. Dobry postreh
5.) Vyhladavaci box je v zhladom k tomu na co ma sluzit dostacujuci a viacmenej nepotrebny. Urcite do neho doplnim "hladany vyraz..." ":) Potrebujem ho tam len koli analyze
6.) Header je zamerne cisty, koli prezentacii znacky, ziadny slogan tam nebude, na to sluzi hlavna slideshow. Newsletter je z mojho pohladu uplne zbytocna vec, ktrou davam, na stranky uz viac menej zo zotrvacnosti. Ja sa odoberanie noviniek snazim komunikovat pri nakupnom procese. Analyzujem 12 eshopov kde je navstevnost dokopy do 400tis ludi, newsletter si za mesiac dobrovolne da posielta 0 clovekov za kvartal su to 2.
7.) Praveze treba ! Kava sa objednava v pravidelnych mesacnych intervaloch, vacsina zakaznikov ktora pride na stranky uz produkty pozna a objednava kartonove balenia kapsul v urcitych mnozstvach a takto to moze objednat uz z vypisu nemusi klkat na detail.
8.) Nepotrebujem viac textu v boxoch, ludia tsranky necitaju ale prezeraju, potrebujem zaujat produktovym fofto a strucnym titulkom. Okrem toho na propagaciu bude sluzit hlavna kampan, toto je viacmenej koli rychlej navigacii v strankach.
9.) Opat sa budem opakovat v hlavicke ziadne slogany nebudu, to je humpolacke :) Na slogany a strategicke vyhlasenia sluzi slideshow. Kampan nie je mimentalne dokoncena, ale napriek tomu ak ti trva dlhsie ako 3 sekundy vytusit o com stranky su, tak som sklamal :)
10.) Nie je

---------- Příspěvek doplněn 30.01.2012 v 07:55 ----------

Původně odeslal polakpet

Nikdo se nepouští do záporů, no já aspoň nějaké zkusím najít. Cílem kritiky není jen pochvala, žejo:)

Design:
Je to hezké. Řekl bych že moc, na první pohled. Na můj vkus(to je ale subjektivní) je to ale až moc geometrické. Nemám rád, když je web udělaný jen z obdélníčků. Ve mě to při delším koukání vzbuzuje dojem "To je ale pěkný wireframe, těším se na hotovou verzi!". Aneb - trochu více propojit prvky, nebýt striktně obdélníčkový s borderem.

Text ve slideru ".je čas na PITTI cafe" mi přijde příliš chudý, vylepšil bych jej o decentní efekty(alespoň jeho pozadí).

Umístění a formátování "newsletteru" se mi nelíbí, vyčnívá ze stránky, je moc nalepené na social ikonách.

Šablona: (tady je to spíš otázka, jestli je to konečná verze nebo jen první náhled?)

pozor na preload obrázků. Na webech mě štve, když se hover dlouho načítá a pak na mě blikne. Po loadu hover obrázku už funguje animace tlačítek "small office", "big office" a "VIP Gold" programů v pořádku.

Proč nejsou texty v obrázcích "jako text"? Žádné složité fonty to nejsou, nevidím v tom problém(a kdyby, podformátuju)

Proč je "PITTI Doporučuje" s velkým "D"?

Animace ve slideru mi vůbec nefungují správně (Opera 11.6). Jsou až příliš agresivní.

Diki za kritiku som rad ze nie su len klady :)
Co sa tyka vkusu ja to respektujem, kazdy clovek ma trochu ine vnimanie, pokial ale uznas ze je to funkcny design tak som svoje ciele splnil :)
CSS3 efekty v hover efektoch este zvazime.
Slideshow je ako obrazok zamerne, je to len "zrychlena" verzia koli prezentacii klientovi. Na kampani sa pracuje a texty budu texty:)

Ok, je pravda, že jsem neviděl zadání.

ad 1,2) Proč uživateli nepomoct? Měl bys mu dát jasně vědět, na co jde/nejde kliknout, aniž by na to najížděl myškou
ad 3) Já bych nad těma hnědýma boxama udělal stejně tu tlustou linku jako máš v obr. č.2
ad 8) Lidi stránky nečtou, ale prohlíží - jasně, ale když je něco zaujme, chtějí více info (i když v tomto případě tam nějaký text je, takže je to vlastně v pořádku - spíš jsem myslel na budoucí promo)
ad 9) nezklamal jsi, předmět stránek pochopím :)
ad 10) no a nemělo by tedy v menu být i "kávové směsi PITTI"?

- Ten ctverecek co vypada jako tlacitko play vedle napriklad espresso kavovary (kde mas mimochodem chybu "kaovary" :) ) se mi zda zbytecnej a pri hoveru to odvadi zbytecne pozornost .. Stejne jako oranzove zvyrazneni pri najeti mysi (ikdyz to muze byt jen vec vkusu).

- Tlacitko "Office programy" v slideru neni zarovnane.Ani sipka a ani text.

- Text v paticce a v headeru se mi zda trosku rozmazanej a kdyz budu zlej, tak i spatne citelnej.

Jinak se mi to docela libi.

Původně odeslal heleho

Ok, je pravda, že jsem neviděl zadání.

ad 1,2) Proč uživateli nepomoct? Měl bys mu dát jasně vědět, na co jde/nejde kliknout, aniž by na to najížděl myškou
ad 3) Já bych nad těma hnědýma boxama udělal stejně tu tlustou linku jako máš v obr. č.2
ad 8) Lidi stránky nečtou, ale prohlíží - jasně, ale když je něco zaujme, chtějí více info (i když v tomto případě tam nějaký text je, takže je to vlastně v pořádku - spíš jsem myslel na budoucí promo)
ad 9) nezklamal jsi, předmět stránek pochopím :)
ad 10) no a nemělo by tedy v menu být i "kávové směsi PITTI"?

Nad tymi bodmi by sme mohli dikustovat dlhsie a som rad ze je s kym :)
V kazdom pripade sa to da otestovat v praxi a a vychadzat z vyaledkov analyzy, ktory pohlad na vec je ten spravny pre uzivatela.
este k bodu 10)Ano malo :) Keby som bol vedel ze sa pustime az do takejto hlbkovej analyzy pouzitelnosti pripravym design verne odzrkadlujuci skutocnost. Hodim sem ale vysledne stranky, kde ma bude zaujimat kazda malickost. Toto je viacmenej koncept vizualu uvodnej stranky a casti nakupneho procesu.
Zaujimalo ma ako to bude posobit na ludi a netajim sa tym ze ma rekacie potesili.

Dakujem za skutocne konstruktivnu konzultaciu ohladne pouzitelnosti pretoze vidno ze nad tym premyslas za obzor dizajnu a zavery su viac nez logicke.
Zasluzene +rep :)

Jednoduché, pěkné - jen ten text v menu mi dělá strašně zle na oči. Jsem jedinej? To písmo mi přijde nějak špatně vyhlazené, takže to oči při čtení moc táhne.

...v tom případě je to skvělé. a co se mi nelíbí je jen subjektivní názor. tedy nelíbí.. je to dobré, jen při hlubším zkoumání nacházím, jak bych to dělal jinak

Původně odeslal pa3ick

Keby som bol vedel ze sa pustime az do takejto hlbkovej analyzy pouzitelnosti pripravym design verne odzrkadlujuci skutocnost. Hodim sem ale vysledne stranky, kde ma bude zaujimat kazda malickost. Toto je viacmenej koncept vizualu uvodnej stranky a casti nakupneho procesu.

Jako po grafické stránce se tomu nedá opravdu nic vytknout, takže teď jen doladit pár mušek a bude to supr (ono i bez dolazení by to určitě fungovalo - hodně se šťourám v detailech :).

---------- Příspěvek doplněn 30.01.2012 v 12:26 ----------

Původně odeslal DX632

jen ten text v menu mi dělá strašně zle na oči. Jsem jedinej? To písmo mi přijde nějak špatně vyhlazené, takže to oči při čtení moc táhne.

Mě to taky vadí (a ne jen v menu), ale myslel jsem si, že jsem jediný, komu texty dělané obrázkem vadí, protože už jsem na to několikrát upozorňoval u jiných designů a zdálo se mi, že to vidím jen já :)

Já nestandardní fonty a jejich do designů nezapadající vyhlazení, nemám rád vůbec, ale prostě jsem se naučil žít s tím, že je hodně lidí používá (sám jsem to taky dělal, než mi něco seplo v hlavě a začalo mi to vadit).

Vyhladenie nestandardnych fontov je vec pouzitej technologie. V tomto pripade sa jedna o koncept designu, cross platform optimalizacia stranok, ako aj zobrazovanie jednotlivych elemntov prichadza na rad az vo finalnej faze.
Tu je zvolena technologia cufon, ktora pomerne verne zobrazuje render fontu az na pripady malych velkosti a samozrejme je tak isto zavisla od kvality fontu. Po odsuhlaseni nakladov sa zakupia licencie webfont pre rezy fontu pouzitych v designe a porovna sa kvalita zobrazenia (cufon, font-face, google fonts a pod..). Ciel je dosiahnut co najlepsie zobrazenie na roznych platformach a prehliadacoch.
Fixovanie sa na web safe fonty, ochudobnuje design i ked uznavam ze sa tym da cela praca zlahcit a vyvarovat sa odchylkam zobrazenia na jednotlivych platformach. Avsak podla mna sa oplti zaplatit dan za drobne odchylky v zobrazeniach vymenou za "nestandardny" design :)

Stránky jsou pěkné, ale také mám problém s animací obrázků (Firefox 9.0.1). Animace je někdy plynulá a jindy opravdu skáče, jak se ji zlíbí (jako by byl nastavený nějaký pohyb vpravo/vlevo random). Chvíli obrázek jede doleva, pak se kousek vrátí doprava a zase doleva. Rozhodně to má daleko k plynulé animaci. Takže by to chtělo určitě opravit.

Hodně mi pak ještě vadí přihlášení k odběru novinek. Vychází ze spodu stránky, takže se zdá, že stránka pokračuje, ale přitom nepokračuje. Takže bych toto pole nedával, že vystupuje zespodu, ale dal ho normálně.

Teme slide show sme sa uz venovali vyzsie:) Len zopakujem, ze sa jedna o carousel kde po prejdeni obrazkov na koniec rady sa vrati efektom do vychodzej pozicie. Pouzity jQuery plugin sa sprava presne podla dodaneho API aj v spominanom FF. Momentalne si nahodne vybera efekty ktore ma k dispozicii.
Cize ukoncim to krasnou vetou ktoru pocuvam pomerne casto od nasich programatorov "It isn't bug, It's feature !" :)
Odoberanie novinike je druh sekundarnej konverzie ktora ma konverzny pomer niekde 0,00..dlho nic a nejake cislo. I ked suhlasim, ze ukoncenie stranky nemusi byt uplne koser teraz sa tym zaoberat nebudem.
V kazdom pripade diki za kritiku.

Pridavam odkaz na finalnu verziu e-shopu. Az na obsah je to skoro hotove a tak ma zaujimaju postrehy ohladne funkcnosti, navigacie, zobrazovania stranok v jednotlivych prehliadacoch, za co vam vopred dakujem.

http://www.pitti-caffe.e-comerce.sk/
plugin pre 3D zobrazenie tovaru
http://www.pitti-caffe.e-comerce.sk/...freedom-c11/25

V horním banneru nejde "kliknout" na OBJEDNAJTE TERAZ, ani na OFFICE PROGRAMY
Nefunguje registrace a přihlášení
V košíku je "rozhozená" roletka se způsobem komunikace (FF 10.1):

Diki, opravime