UX workshop
•Télécharger en tant que PPTX, PDF•
0 j'aime•104 vues
What is UX? UX stands for user experience. Think about the last website that you visited. Was the goal of the website clear? Was it easy for you to find the information you needed? What about the colors? Did the colors match the theme? UX design is a way of thinking. It is the process of enhancing user satisfaction with a product by improving its usability, accessibility, and desirability. If the user has a good experience with your website, they will return. And they will invite their friends to come. For nonprofits, having UX skills means developing campaigns that will inspire people to join your cause and give them the tools they can use to make a difference. In this UX activity, we will learn how to make our passion for animal welfare stand out in our campaigns and recruit more animal lovers to the movement!
Recommandé
Recommandé
Contenu connexe
Similaire à UX workshop
Similaire à UX workshop (20)
Dernier
Dernier (20)
UX workshop
- 1. UX WORKSHOP
- 2. ● What is UX and why should I care? ● Online usability test ● Coding tricks ● Challenge #1 – Persuasive Writing ● The anatomy of a landing page ● Best practices ● Challenge #2 – Create a Landing Page ● Facebook ads rules and policies. ● Facebook ads best practices ● Challenge #3 – Create a Facebook ad ● Result Count: Prizes for the Winners! 2 What’s up for today?
- 3. What and why UX? ● UX stands for user experience ● It is the process of enhancing user satisfaction with a product by improving its usability, accessibility, and desirability. ● In other words: UX design is a way of thinking. It’s about ensuring that the user finds value at what we are offering them. ● But I am a campaigner, why should I care? 3
- 4. 4
- 5. UX its about presenting our theory of change to our supporters in a way that makes them feel empowered and compelled to take action.
- 7. 7 Why god why?1200 120 60 12 Visited Landing Page Watched Video Signed Petition Came back For more info What happened?! • Goal of the landing page not clear? • Our cause not correctly explained? • Wrong Target? • User got distracted?
- 8. 8 Types of tests and tools
- 9. 5 second test What? The Blink test, or 5sec test is a form of usability testing that allows you to measure how well a website quickly communicates a message. How? A five second test is run by showing an image to a participant for just five seconds after which the participant answers questions based on their memory and impression of the page. Why five seconds? Studies have found* that visitors only spend a few seconds assessing a website before deciding whether to stay or leave. 10*Nielsen Group Study: “How Long Do Users Stay on Web Pages?”
- 10. 11 5 sec exercise Can you find out what this campaign is about?
- 11. 12
- 12. Questions: ● What was this website was about? ● Why? What made up your mind? 13
- 13. 14
- 14. Questions: ● What was this website was about? ● Why? What made up your mind? 15
- 15. 16
- 16. Questions: ● What was this website was about? ● Why? What made up your mind? 17
- 17. 18
- 18. Questions: ● What was this website was about? ● Why? What made up your mind? 19
- 19. 20
- 20. Questions: ● What was this website was about? ● Why? What made up your mind? 21
- 21. 22
- 22. Questions: ● What was this website was about? ● Why? What made up your mind? 23
- 24. CHALLENGE #1 Persuasive writing Create a campaign headline and blink test it! 25
- 25. 26
- 26. 27
- 27. 28
- 28. Steps ● Create a headline for the campaign you are assigned to. ● There will be representatives of the campaigns within your groups. ● Send screenshot to daniela.demarchi@four-paws.org & lara.dieudonne@four-paws.org ○ Subject line: GROUP [NUMBER] – HEADLINE ● We will add your headline to the template landing pages and send the image back to you. ● Claim usabilityhub credits to your account ● Test away and compete for the final prize! 29 email address email address
- 29. 30 Find your group! DOG MEAT TRADE GROUPS TIGER TRADE GROUPS GROUP 01 GROUP 02 GROUP 03 GROUP 04 GROUP 05 GROUP 06 Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName Name LastName
- 30. Claim the credits ● Log into your usabilityhub account ● Go to https://app.usabilityhub.com/codes/claim ● Enter the code! 31 Usabilityhub Credentials Password Profile code 5sec test pioneer.gr01@gmail.com ● ● ● ● ● ● 6CF2D pioneer.gr2@gmail.com ● ● ● ● ● ● 4397F pioneer.gr3@gmail.com ● ● ● ● ● ● 21555 pioneer.gr4@gmail.com ● ● ● ● ● ● E097C pioneer.gr5@gmail.com ● ● ● ● ● ● 06A18 pioneer.gr6@gmail.com ● ● ● ● ● ● 5B6A0
- 31. Question to users ● What was this website was about? 32
- 32. 33 point system EXACT GUESS +2 points SOMEWHAT UNDERSTOOD +1 point DIDN'T GET IT OR UNRELATED 0 points SOMEWHAT MISUNDERSTOOD -1 point UNDERSTOOD THE OPPOSITE -2 points
- 33. Landing Pages
- 34. Landing Page Anatomy 1. Heading and sub-heading 2. Relevant image/video 3. Call-to-action (CTA) 4. Above the fold 5. Short, relevant content 6. Testimonials (social proof) 7. Trust elements 35
- 35. 36 Examples of good landing pages 🎉
- 36. What they did right ✔ Headline solves a problem ✔ Clear sub-title ✔ No distraction ✔ Form is high up on the page ✔ Short and to-the-point copy
- 37. What they did right ✔ Headline shows the benefit ✔ Clear Call-to-Action ✔ Personalized title (location based) ✔ Show instant earnings ✔ Step-by-step explanation
- 38. 39 Examples of bad landing pages 🚫
- 39. What they could improve ✘ Too many navigation links ✘ Overall cluttered design ✘ Multiple CTA’s is confusing to user ✘ Login is not beneficial to goal
- 40. What they could improve ✘ Too many navigation links ✘ No inspiring inspiring visuals ✘ Too much text ✘ Too many form fields
- 41. CHALLENGE #2 Build a landing page Build a landing page for the Dog Meat Trade and compete for the users attention! 42
- 42. 43
- 43. 44 Credentials GROUPS WIX USERNAME WIX PASSWORDS group 01 pioneer.gr01@gmail.com ● ● ● ● ● ● group 02 pioneer.gr2@gmail.com ● ● ● ● ● ● group 03 pioneer.gr3@gmail.com ● ● ● ● ● ● group 04 pioneer.gr4@gmail.com ● ● ● ● ● ● group 05 pioneer.gr5@gmail.com ● ● ● ● ● ● group 06 pioneer.gr6@gmail.com ● ● ● ● ● ●
- 44. Steps ● Create a lead generation landing page for the dog meat trade campaign ● Once you are happy with your design click on the preview button on the top right corner of the website. ● Take a screen shot of the final result ● Send screenshot to daniela.demarchi@four-paws.org & lara.dieudonne@four-paws.org ○ Subject line: GROUP [NUMBER] – LANDING PAGE ● We will set up the test for you ● The Winner: the group with the most votes from testers. 45 email address email address
- 45. Questions to users ● Which design do you prefer? ● Which design looks the easiest to use? 46
- 46. point system The Winner: the group with the most votes from testers. 47
- 47. Facebook Ads
- 48. 49 Ad objectives
- 49. ● Facebook ○ Feed ○ In-stream videos ○ Right column ○ Stories ● Instagram ○ Feed ○ Stories ● Audience Network ○ Native, banner, and interstitial ○ In-stream videos ● Messenger ○ Inbox ○ Sponsored messages 50 Ad placements
- 50. 51 Ad ratio
- 51. 1. Caption 2. Creative (image, video, slideshow, carousel, etc) 3. Display link 4. Headline 5. Description 6. Call to action button 52 Facebook ad anatomy
- 52. 53 Image ● Image ratio: 9:16 to 16: 9 ● Caption: 125 characters ● Headline: 25 characters ● Link description: 30 characters
- 53. 54 Video ● Aspect ratio: 9:16 to 16:9 (depends on placements) ● Facebook length: 1 second to 240 minutes ● Instagram length: 1 to 60 seconds ● Facebook and Instagram Stories length: 1 to 15 seconds
- 54. 55 Carrousel ● Image ratio: 1:1 (square) ● Video length: up to 240 minutes ● Caption: 125 characters ● Headline: 40 characters ● Description: 20 characters
- 55. 20% rule ● Facebook has scanners that look for the amount of image/video text used on an ad. ● Based on this review, ads with higher amounts of text on the image will not be shown. ● Also true for videos! Videos with too much subtitles often go over the 20% rule and our ads get disapproved. ● Logos also count as text 56
- 56. Political Content ● Political Content Advertisers will have to complete a authorization process. ● Feature started rolling out in EU since 25th April 2019. ● Ad will have a “paid for by” disclaimer ● “This is part of our ongoing efforts to help prevent foreign interference in elections”.* 57*Facebook Newsroom: “Protecting Elections in the EU”
- 59. CHALLENGE #3 Facebook Ad Create a Facebook ad using the tools and rules we learned 60
- 61. Steps ● Create a Facebook Ad for the persona your group was assigned to. ● Save your work and copy the link ● Send link to daniela.demarchi@four-paws.org & lara.dieudonne@four-paws.org ○ Subject line: GROUP [NUMBER] – FACEBOOK AD ● We will set up the campaign for you 62 email address email address
- 62. 63 Facebook ad POINT SYSTEM TOTAL NUMBER OF CLICKS ON THE LINK +1 /per click
- 63. 64 Congrats! You are UX Pros
Notes de l'éditeur
- Does anybody know what UX means? UX stands for user experience
- Think about the last website that you visited. 1.. Was the goal of the website clear? 2. Was it easy for you to find the information you needed? 3. What about the colors? Did the colors match the theme? If the user has a good experience with your website, they will return. And they will invite their friends to come.
- We build landing pages, ads, banners and posts so our supporters will hear what we have to say. Because at the end of the day it is their support that is going to make a difference. But how can we make sure that what have created will have an effect that we want? Well, we test it.
- Usability test is a way of evaluating the effectiveness of your campaign title, landing page, forms, color pallet and so on. We are all familiar with doing testing through focus groups and surveys, but with these methods are very costly and if not done right we can loose some valuable insights from supporters. Response bias and social desirability is a reoccurring problem for example. Where users will respond what they thing you want to hear or what the group as a whole wants in order to be liked. However, online testing tools can be a cost effective way of achieving some goals.
- Usability test can help us figure out for example the gap between the moment the user lands on a landing page and if he wanted to find out more about the topic by watching a video or reading the description and so on.
- There are several types of tests and several online tool that can support these analysis. But today we are going to focus on two. The 5 sec test and the Comparison test.
- One of the most influential studies into usability, “First Click Usability Testing” by Bob Bailey and Cari Wolfson, delved into the importance of the user’s first click being correct. Their findings showed that if the first click was correct, users had an 87% chance of completing the action correctly, as opposed to just 46% if the first click was wrong. Measure: first clicks and how long they took to click. These tests are commonly used to measure aesthetic appeal, but participants can also be instructed to judge designs based on their trustworthiness, or how well they communicate a specific message or idea.\ Icons are a pivotal assest for online designers as they are able to represent a message with the need of text. Image that instead of the Print, reply, cut, copy, help icons you have on your computer, they would be all texts. Not very user friendly right? Icons are intuitive images to represent core ideas and pivotal to enhance user experience.
- Inspect How to Change the location of the console (bottom, left, right) Elements tab – where the html code is. Where structure and content of a page is stored. Console –web developer use the console to test and optimize the pages These are the one we are playing with today. Here is how you can easily apply simple edits to your landing page and test it with your audience. Document.body.EditableContent = True You can edit the text of your page. The CTA, the headline, navigation links (maybe we are unsure about of your audience things is relevant information), and so on. Then you can take a screen shot and test the page in usability hub. Worry not. REFRESH PAGE True has to appear below. Change colour of button Elements – pointer to select element. To styles section – change the background-colour of element. Check is the website Responsiveness with a click of a button. Change colors of website: https://coolors.co/ Change padding of botton. Edit Elements of the page COMPARISION TEST Take a screen shot and do a comparison test with these small changes Limited. Of course you will mainly do these for small tests: Where to add the button Text edits Headline edits Color of elements Size elements
- Web analytics will tell you how many visitors bounce, and how quickly, but not why. 5SEC TEST: simple way to validate the intent of our landing pages. Now we are going to test your persuasive writing skills.
- Instagram feed does not accept full portrait