Design Principles for WooCommerce Projects - Θάνος Παπαβασιλείου

WordCamp Thessaloniki 2019

Σε αυτή την ομιλία, ο Θάνος πρόκειται να μοιραστεί μερικές πρακτικές συμβουλές για μια σωστή WooCommerce User Experience.
Από τη σελίδα προορισμού έως το check out, αυτές οι οδηγίες θα σας βοηθήσουν να δημιουργήσετε καταστήματα που προσελκύουν το χρήστη.

In this talk, Thanos is going to share some practical hints & tips for a proper WooCommerce User Experience.

From landing page to check-out, these guidelines will help you build stores that convert.

Transcript

2. E-COMMERCE IN GREECE IN 2019 4B EUROS ANNUAL TURNOVER. 3,5M E-SHOPPERS. >80% OF PURCHASES ARE MADE IN GR E-SHOPS. 7000 E-SHOPS.
3. BY 2040 95% OF ALL PURCHASES WILL BE VIA E-COMMERCE. WOOCOMMERCE IS THE MOST POPULAR E-COMMERCE TECHNOLOGY IN THE WORLD.
4. DESIGN PRINCIPLES FOR WOOCOMMERCE
5. HELLO, I’M THANOS @KLOU a Product Designer
6. HOMEPAGE LISTING PRODUCT CHECK-OUT
8. SHOW WHAT YOU SELL USE PHOTOS, VIDEOS & ILLUSTRATIONS FOR YOUR MAIN MESSAGE. USE WORDS FOR THE THINGS YOU NEED TO EXPLAIN.
9. IS THIS PICTURE SAYING SOMETHING TO YOUR TARGET AUDIENCE ?
10. SHOW PEOPLE YOU’RE DIFFERENT BE CLEAR, CREATIVE, A FEW WORDS & ABOVE THE FOLD. DON’T GET TOO CLEVER, NO MARKETING JARGON, NO HASHTAGS. FREE SHIPPING OR 10% OFF, ISN’T DIFFERENT.
11. NATURAL DERMOCOSMETICS FROM BEEWAX WE NATURALLY CREATE YOUR NATURAL SECRET TO REVEAL YOUR BEAUTY
12. DON’T USE SLIDERS 99% of your clients won’t make it to slide 2, based on research and stuff. SET IT TO AUTO-PLAY. UP TO 3 SLIDES. USE SLIDES TO TELL A STORY. NO COMPETING OFFERS OR ADS. NOT TOO MUCH INFO. BUT IF YOU DO (ah you don’t listen!)
13. BOOST YOUR TRUST PLACE YOUR PHONE NUMBER AND YOUR E-MAIL ON YOUR HEADER. USE CUSTOMER REVIEWS, PRESS REVIEWS. DON'T LIE ABOUT ANYTHING, I WILL KNOW AND I WILL FIND YOU.
14. DON’T MAKE IT LOOOOOOOOOOOOOONG A GOOD HOMEPAGE IS LIKE A GOOD STORY. EACH SECTION IS AN ANSWER TO A DIFFERENT QUESTION. KEEP THE ATTENTION RATIO CLOSE TO 1:1. REDUCE COMPLEXITY, INCREASE CLARITY OF CHOICE.
15. REALLY?
16. THINK BEFORE YOU POP DID YOU WAIT ENOUGH? ARE YOU OFFERING SOMETHING OF VALUE TO GET MY EMAIL? ARE YOU SURE I HAVE A GENUINE INTEREST TO BUY LATER?
17. TOP NAVIGATION MORE OPTIONS MORE WORK FOR THE USER MORE TIME TO THINK AND COMPARE MORE CHANCES TO LEAVE THE PAGE
18. LISTING PAGE
19. WHERE AM I? YOUR FIRST JOB: TELL ME EXACTLY WHAT I’M LOOKING AT. DON’T OVERDO IT, A TITLE & A COUPLE OF LINES ARE ENOUGH. IF YOU NEED TO SAY MORE, DON'T DO IT HERE.
20. TITLES 101 MAKE THEM SPECIAL, BUT NOT TOO SPECIAL. BE SPECIFIC, NOT “COOL”. IF YOUR MARKETING GENIUS COMES OUT, USE THE PRODUCT TYPE. SOMEWHERE IN THERE AS WELL.
21. IMAGES 101 CONSISTENCY: ART DIRECTION, ZOOM LEVEL, BACKGROUND. YOU CAN USE A SLIDER! BE SPECIFIC, NOT “COOL”.
22. PRODUCT ATTRIBUTES 101 LIMIT THE # OF ATTRIBUTES IN THE LISTING PAGE. PRICE IS KEY, MAKE IT COMPARABLE. DIFFERENT COLORS AND/OR SIZES AND 1 PRICE = 1 PRODUCT.
23. FILTERS 101 YOU DON’T NEED FILTERS IF YOU HAVE A FEW PRODUCTS! VERTICAL FILTERS, LEFT SIDE. DON’T MAKE ME CLICK “SEARCH”. USE AUTO-COMPLETE & AUTO-SUGGEST. REMEMBER MY LAST SEARCH. EVERY PRODUCT ATTRIBUTE SHOULD BE A FILTER.
24. THE MOST IMPORTANT PAGE IS THE PRODUCT PAGE
25. HIERARCHY HAVE 1 CLEAR, PRIMARY GOAL = BUY NOW. DON’T ANTAGONISE YOUR PRIMARY GOAL WITH SECONDARY GOALS. DON’T HAVE THE CTA ON AN INACTIVE STATE, EVER. PLAY THE LOOONG GAME: SOME PEOPLE AREN’T READY TO BUY. TAKE THEIR EMAILS!
26. PRODUCT IMAGES PEOPLE WITH YOUR PRODUCT > YOUR PRODUCT. DON’T HIDE MULTIPLE PHOTOS IN A THUMBNAIL.
27. PRICING TALK ABOUT EVERY ADDED COST BEFORE CHECK-OUT IF YOU CAN BREAK A BIG PRICE INTO PIECES, DO IT.
28. TRUST PERSONALISED REVIEWS = WIN RATINGS WITH # OF PEOPLE = WIN RATING CATEGORIES = WIN NO REVIEWS OR RATINGS? Think outside the box
29. CROSS-SELL | UP-SELL DON’T CROSS/UP SELL ME THE THINGS YOU WANT USE A TITLE THAT SHOWS THAT THERE’S A PROCESS BEHIND YOUR SUGGESTIONS
30. SHOW ME THE MONEY
31. FYGE AP’TI MESI DITCH ANYTHING THAT CAN DISRUPT THE PAYMENT PROCESS #DONTMAKEMESIGNUPFORTHELOVEOFGODPLEASENO
32. KEEP THE SAME CTA EVERY STEP OF THE WAY. SAME WORDS, SAME POSITION. MAKE MY LIFE EASIER TELL ME WHAT I DID, WHAT I’M DOING NOW & WHAT’S LEFT TO DO. USE E-WALLETS. CLARITY ON DELIVERY INFO
33. FORMS 101 1-COLUMN, NO SIDE CONTENT. DITCH THE UNNECESSARY FIELDS. LABELS ABOVE FIELDS. DON’T USE PLACEHOLDERS WITHIN FIELDS. SHOW ERRORS ABOVE OR BELOW EACH FIELD. AUTO-COMPLETE.
34. FORMS 101, PART 2! NAME, ZIP CODE & COMMENTS ARE 3, DIFFERENT IN SIZE, FIELDS. WHEN YOU HAVE MORE THAN 5 OPTIONS, USE A DROP-DOWN. EVERYTHING ELSE IS A RADIO BUTTON CASE.
35. SINOPSIZODAS RESPECT YOUR CUSTOMER CONSISTENCY & HIERARCHY BE AUTHENTIC WITHIN LIMITS BE HONEST & TRANSPARENT
36. THAT’S ALL FOLKS! @KLOU Thank you!