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

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

17th WordPress Larissa Meetup

Σε αυτή την ομιλία, ο Θάνος πρόκειται να μοιραστεί μερικές

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

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

January 25, 2020
Tweet

Transcript

  1. HELLO, I’M THANOS @KLOU a Product Designer

  2. DESIGN PRINCIPLES FOR WOOCOMMERCE

  3. 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.
  4. BY 2040 95% OF ALL PURCHASES WILL BE VIA E-COMMERCE.

    WOOCOMMERCE IS THE MOST POPULAR E-COMMERCE TECHNOLOGY IN THE WORLD.
  5. HOMEPAGE LISTING PRODUCT CHECK-OUT

  6. None
  7. SHOW WHAT YOU SELL USE PHOTOS, VIDEOS & ILLUSTRATIONS FOR

    YOUR MAIN MESSAGE. USE WORDS FOR THE THINGS YOU NEED TO EXPLAIN.
  8. IS THIS PICTURE SAYING SOMETHING TO YOUR TARGET AUDIENCE ?

  9. 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.
  10. NATURAL DERMOCOSMETICS FROM BEEWAX WE NATURALLY CREATE YOUR NATURAL SECRET

    TO REVEAL YOUR BEAUTY
  11. 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!)
  12. 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.
  13. 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.
  14. REALLY?

  15. 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?
  16. TOP NAVIGATION MORE OPTIONS MORE WORK FOR THE USER MORE

    TIME TO THINK AND COMPARE MORE CHANCES TO LEAVE THE PAGE
  17. LISTING PAGE

  18. 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.
  19. 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.
  20. IMAGES 101 CONSISTENCY: ART DIRECTION, ZOOM LEVEL, BACKGROUND. YOU CAN

    USE A SLIDER! BE SPECIFIC, NOT “COOL”.
  21. 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.
  22. 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.
  23. THE MOST IMPORTANT PAGE IS THE PRODUCT PAGE

  24. HIERARCHY HAVE 1 CLEAR, PRIMARY GOAL = BUY NOW. DON’T

    ANTAGONISE YOUR PRIMARY GOAL. DON’T HAVE THE CTA ON AN INACTIVE STATE, EVER. PLAY THE LOOONG GAME: SOME PEOPLE AREN’T READY TO BUY. TAKE THEIR EMAILS!
  25. PRODUCT IMAGES PEOPLE WITH YOUR PRODUCT > YOUR PRODUCT. DON’T

    HIDE MULTIPLE PHOTOS IN A THUMBNAIL.
  26. PRICING TALK ABOUT EVERY ADDED COST BEFORE CHECK-OUT IF YOU

    CAN BREAK A BIG PRICE INTO PIECES, DO IT.
  27. TRUST PERSONALISED REVIEWS = WIN RATINGS WITH # OF PEOPLE

    = WIN RATING CATEGORIES = WIN NO REVIEWS OR RATINGS? Think outside the box
  28. 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
  29. SHOW ME THE MONEY

  30. FYGE AP’TI MESI DITCH ANYTHING THAT CAN DISRUPT THE PAYMENT

    PROCESS #DONTMAKEMESIGNUPFORTHELOVEOFGODPLEASENO
  31. 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
  32. 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.
  33. 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.
  34. SINOPSIZODAS RESPECT YOUR CUSTOMER CONSISTENCY & HIERARCHY BE AUTHENTIC WITHIN

    LIMITS BE HONEST & TRANSPARENT
  35. THAT’S ALL FOLKS! @KLOU Thank you!