Conversion Centered Design (CCD)
-
Upload
sasa-stankovic -
Category
Documents
-
view
278 -
download
2
description
Transcript of Conversion Centered Design (CCD)
![Page 1: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/1.jpg)
Weboo18+
Conversion Centered Design (CCD)
![Page 2: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/2.jpg)
Saša Stanković Head of client services Croatia Interactive agency mail: [email protected] web: interactive.ag linkedin: linkedin.com/company/interactive.agency facebook: facebook.com/interactive.agency.hrvatska facebook.com/interactive.agency.slovenija
![Page 3: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/3.jpg)
CONVERSION CENTERED DESIGN
![Page 4: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/4.jpg)
Conversion Centered Design
• Trebamo li novu internet stranicu? (a tek smo završili postojeću)
![Page 5: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/5.jpg)
Conversion Centered Design
• Trebamo li novu internet stranicu? (a tek smo završili postojeću)
• Korisnici dolaze kroz razne kanale komunikacije, ali broj konverzija je iznimno mali
![Page 6: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/6.jpg)
Conversion Centered Design
• Dizajn kojem je cilj samo jedan - konverzija
![Page 7: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/7.jpg)
Conversion Centered Design
KONVERZIJA
Dizajn Psihologija
![Page 8: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/8.jpg)
Conversion Centered Design
• CCD se sastoji od 7 elemenata (7 elemenata u dvije skupine: dizajn & psihologija)
![Page 9: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/9.jpg)
Conversion Centered Design
• CCD se sastoji od 7 elemenata (7 elemenata u dvije skupine: dizajn & psihologija)
DIZAJN PSIHOLOGIJA
Enkapsulacija Hitnost i oskudica
Kontrast i boja Isprobajte prije kupnje
Upute Društveni pokazatelj kvalitete
(social proof)
Bijeli/prazan prostor
![Page 10: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/10.jpg)
DIZAJN CONVERSION CENTERED DESIGN
![Page 11: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/11.jpg)
Conversion Centered Design
• DIZAJN
1. Enkapsulacija
2. Kontrast i boja
3. Upute
4. Bijeli/prazan prostor
![Page 12: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/12.jpg)
Conversion Centered Design
• DIZAJN
1. Enkapsulacija
![Page 13: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/13.jpg)
Enkapsulacija – tehnika zaokupljanja/usmjeravanja pogleda korisnika u smjeru koji mi želimo
![Page 14: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/14.jpg)
Conversion Centered Design
• DIZAJN
1. Enkapsulacija
2. Kontrast i boja
![Page 15: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/15.jpg)
Kontrast i boja – tehnika naglašavanja CTA gumba na odredišnoj stranici korištenjem boja
![Page 16: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/16.jpg)
Conversion Centered Design
• DIZAJN
1. Enkapsulacija
2. Kontrast i boja koju boju koristiti?
![Page 17: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/17.jpg)
Conversion Centered Design
Crvena - snažno, razdražujuće djelovanje, popravlja raspoloženje, ubrzava puls, disanje i mišićnu napetost. Žuta - djeluje poticajno, izaziva radost i veselje,i predstavlja nadu. Velike je vidljivosti i upotrebljava se u prometu. Narančasta - djeluje svečano, veselo, izaziva osjećaj zdravlja, životne radosti. Zelena - odmara, djeluje blago, stvara unutrašnji mir, odmara vid. Plava - djeluje smirujuće, suprotno od crvene, pasivno, hladno, potiče koncentraciju i umiruje. Ljubičasta - djeluje mistično, tajanstveno, očaravajuće i prigušuje strasti. Bijela - umara
Psihološko djelovanje boja: hr.wikipedia.org/wiki/Boja
![Page 18: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/18.jpg)
Conversion Centered Design
• DIZAJN
1. Enkapsulacija
2. Kontrast i boja
3. Upute
![Page 19: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/19.jpg)
Upute – korištenje vizualnih indikatora za usmjeravanje pogleda korisnika
![Page 20: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/20.jpg)
Conversion Centered Design
• DIZAJN
1. Enkapsulacija
2. Kontrast i boja
3. Upute
4. Bijeli/prazan prostor
![Page 21: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/21.jpg)
![Page 22: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/22.jpg)
DIZAJN (PRIMJER IZ PRAKSE) CONVERSION CENTERED DESIGN
![Page 23: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/23.jpg)
Enkapsulacija
![Page 24: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/24.jpg)
Kontrast & boja
![Page 25: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/25.jpg)
Upute
![Page 26: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/26.jpg)
Bijeli/prazan prostor
![Page 27: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/27.jpg)
PSIHOLOGIJA CONVERSION CENTERED DESIGN
![Page 28: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/28.jpg)
Conversion Centered Design
• PSIHOLOGIJA
1. Hitnost i oskudica
2. Isprobajte prije kupnje
3. Društveni pokazatelj kvalitete (social proof)
![Page 29: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/29.jpg)
Conversion Centered Design
• PSIHOLOGIJA
1. Hitnost i oskudica
![Page 30: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/30.jpg)
Hitnost – postavljanje vremenskog ograničenja dodatno potiče „hitnost” kupovine
![Page 31: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/31.jpg)
Hitnost – postavljanje vremenskog ograničenja dodatno potiče „hitnost” kupovine (imamo maksimalno 4 minute za kupnju)
![Page 32: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/32.jpg)
Oskudica – primjer „oskudice” sa „samo još tri sjedala”
![Page 33: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/33.jpg)
Conversion Centered Design
• PSIHOLOGIJA
1. Hitnost i oskudica
2. Isprobajte prije kupnje
![Page 34: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/34.jpg)
![Page 35: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/35.jpg)
![Page 36: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/36.jpg)
![Page 37: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/37.jpg)
Conversion Centered Design
• PSIHOLOGIJA
1. Hitnost i oskudica
2. Isprobajte prije kupnje
3. Društveni pokazatelj kvalitete (social proof)
![Page 38: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/38.jpg)
![Page 39: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/39.jpg)
UKRATKO CONVERSION CENTERED DESIGN
![Page 40: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/40.jpg)
Conversion Centered Design
• CCD se sastoji od 7 elemenata (7 elemenata u dvije skupine: dizajn & psihologija)
DIZAJN PSIHOLOGIJA
Enkapsulacija Hitnost i oskudica
Kontrast i boja Isprobajte prije kupnje
Upute Društveni pokazatelj kvalitete
Bijeli/prazan prostor
![Page 41: Conversion Centered Design (CCD)](https://reader030.fdocuments.net/reader030/viewer/2022020716/5568bcd7d8b42a7c7d8b4b92/html5/thumbnails/41.jpg)
hvala na pažnji!
mail: [email protected] web: interactive.ag linkedin: linkedin.com/company/interactive.agency facebook: facebook.com/interactive.agency.hrvatska facebook.com/interactive.agency.slovenija