User Experience in the real world

User Experience...It's not just for apps anymore- websites and blogs everywhere make our users *feel* things, good and bad. Staying on top of the experience requires a keen eye and the ability to get yourself into a user's frame of mind.

We'll use this session to walk through some common areas that can make a user feel annoyed, confused, and (hopefully) at ease. Making your site (and your interactions outside your site) easy to digest can go a long way in building a reliable network/community.

If "user experience" is a foreign concept for you, think of it as a talk on "best practices", and come join us anyway! We'll start with a "big picture" discussion of UX and move into specific examples, finishing with a round of Q&A (so make sure to bring your questions!).

Clark Wimberly will lead this month's WordPress Intermediate session. Clark is the UX Lead at The Zebra (http://thezebra.com), an online insurance comparison platform (think "Priceline for insurance"). He's been building things with WordPress for the better part of a decade now.

Transcript

1. User Experience in the real world @clarklab on twitter UX Lead, thezebra.com
2. #wpatx on twitter interrupt me
3. User Experience
4. How this works —Pros/Cons of common UX blunders —Watch for links ∞ Listed at clarklab.com/talks/user-experience —Long reads —Worthy reads
5. What is UX? —what a user experiences (duh) —the study of hurdles —guiding the resulting emotions —easy, fair, complexity —worth their time
6. _ _ your website gives people the feels
7. UI vs UX ∞ User interface what the user interacts with User experience how those interactions make the user feel Married, but not the same like all good couples
8. Real world reactions
9. My buddy Eddie
10. How inviting!
11. Pros (for the site) —registered user —who we can spam Cons (for me) —another registration —they can spam me
12. Penny Arcade
13. Tablet + Pen = Fail —touch pen to screen —start to draw to draw —return home
14. I ended up in a conference room with about half a dozen people from the Surface team. More rotated in and out as I worked. I drew and talked for two and half hours while they watched and took notes. Within the first thirty seconds they realized how frustrating the home button placement was. I was trying to draw for them but kept brushing that home button and getting kicked out to the desktop. I could see some of them shaking their heads and looking at each other. They were very obviously bothered that they had not seen this before.∞
15. Common UX blunders
16. Multi-page content Idea: split a single post or a photo gallery onto multiple pages
17. Pros —Pageviews! Cons —No one likes clicking —Users won't see all the content —your puns! —harder to author
18. Solutions ∞ —Don't do it —Give a one-page option —If you want pageviews, force reload! —(then repent)
19. Social lockers Idea: Hold desirable content hostage for likes, follows, and friends.
20. Pros —Fans! Followers! Cons —Annoying —Looking like an awkward shill —Hit and runs
21. Solutions —Generate value with social —Interact with followers —hit a good ratio —dark activity —treat it like a subscription service —share with @mentions and #hashtags and +names
22. Jab, Jab, Jab, Right Hook! — Gary V
23. Newsletters Idea: get a bunch of emails and get inside their inbox each time we want to tell them something
24. Pros —Pageviews! Opens! —Connect with fans Cons —(possibly) Annoying —Looking like an awkward shill —Breaking the law
25. Solutions —be useful! —easy unsub —respect method of email collection —don't buy lists (or sell) (or transfer)
26. Accessibility Idea: make sure everyone that wants to use your site can
27. Pros: —No one is left out —Impaired visitors = 14% —Pageviews/sales/conversions! Cons —Development time
29. Solutions —This one is simple: do it —Plugins —Meetups —Alternate content
30. Responsive
31. Solutions —Use a responsive theme —Use a responsive plugin (Jetpack) —Make sure your desktop site isn't broken
32. Gotchas —Readability —Image/page weight —Performance
33. UX-ercises
34. Storyboards —Visualize the user/customer experience, in digestible steps
35. Pros —Get in the user's head —Optimize the flow —Concrete goals for planning, arguments Cons —Hard truths —Time
36. airbnb
37. The Zebra flow —1. Hears about The Zebra —2. Visits The Zebra —3. Learns about The Zebra —4. Enters year/make/model —5. Views preloader —6. Views rates in the app
38. The Zebra flow (cont'd) —7. Interacts with form —8. Selects coverage —9. Reviews results —10. Clicks Buy Now —11. Gets a call from LIPs —12. Buy a policy
39. Go nuts —hyper-optimize —GA goals at key steps —make storyboard-based decisions ∞
40. Personas —Visualize the actual user, to better predict their decisions
41. Persona traits ∞ —Age —Gender —Interests —Skills
42. My built-in personas —Mom - kindergarten teacher, no tech —Dad - computer sales/service, old tech —Brother - my age, as nerdy, mega tech
43. Guerrilla testing ∞ —Over the shoulder testing —Sentiment testing —Drunk user testing —usertesting.com —peek.usertesting.com —verifyapp.com
44. Tools of the attack —Analytics (Google, Jetpack, other) —InVision ∞ —UXPin ∞ —What are yours?
45. Doggie bag —think of the user —think ahead of the user —react to the user
46. @clarklab #wpatx thezebra.com