Embed Size (px)
Citation preview
Nudging Good User Experiences Along While Using WordPress
Tricia Okin is a freelance User Experience Designer and a UX Instructor at General Assemb.ly New York & London. She loves learning about people, cultures, languages and why people do the things they do.
@papercutny
BTW, I’m American… So please excuse my funny words.
Howdy.
SOME SCARY MATH(S)
Mobile Usage‣ 1.2 billion people access the web from a mobile device
‣ Mobile traffic accounts for 15% of all internet traffic
‣ Gartner expected 500,000,000 tablets to ship in 2013 and 2014
‣ Mobile-based searches account for 25% of all searches
Multi-Screen Experiences
Languages Other Than English
1,400,000,000 People in China
1,300,000,000 People in India
Trust
Building a sense of trust and concern for your readers or customers
THIS ALL = TRUST
Have you ever visited a site whose fonts didn’t “look right”, there were strange languages or
spelling mistakes and you immediately thought, “SCAM!” ?
WHAT IS UX ANYWAY?
The Gist of UX
The overall experience that a person has when interacting with a product, service, or company.
Reduces the friction within interactions with said product to help a person achieve a seamless path/
experience.
User Experience is:
A User Experience Designer:
Good UX Examples
Good UX: Sunrise Calendar
Good UX: Sunrise CalendarWHY? ‣ Is available on multiple platforms wherever you need it: Tablet,
Desktop Browser, iPhone, Android. ‣ Syncs easily ‣Guides the user & makes concepts memorable ‣Gives me a choice of using Google Maps over Apple Maps (UGH).
WHY? ‣ John Lewis Online: Their search functionality is poor and tied to their
database, not what people actually search for on the site. ‣Waitrose.com: You have to sign up before you can make a list or add
anything to your cart.
Bad UX: JohnLewis.com + Waitrose.com
CAVEAT! UX is also cultural.
Think of Your Users: User Journeys
A representation of a particular user/person’s entire interaction with a company or product, typically over the course of a period of time.
*Sometimes they’re also called customer experience maps.
A User Journey is:
A Happy Path is:
The easiest path that a user can take in order to complete a task.
An Example User Journey
Source: http://usability-ed.blogspot.co.uk/2011/11/mapping-customer-journeys.html
WAYS TO ACHIEVE THISIN WORDPRESS
(or by other means)
Optimization & Bouncing
Source: https://wordpress.org/plugins/p3-profiler/screenshots/
P3 Plugin (Plugin Performance Plugin) ‣Analyzes the load times of the processes on your site. From there you
can decide to eliminate or restructure plugins, code, etc.
Mobile & Tablet Support
Source: https://wordpress.org/plugins/p3-profiler/screenshots/
Use a Responsive Theme From The Outset ‣Cleaner code ‣ Supports multiple viewports
Frustrations: ‣ Fugly mobile themes that don’t look like the
original desktop site
‣Not being able to switch from the mobile to the desktop site even after clicking the “MOBILE THEME OFF” button. This sends the user into a useless loop.
Mobile & Tablet Support
Validate: ‣Google’s Mobile Friendly Test: Responsiveness also plays a part in
SEO ranking. Test your site against Google’s requirements
‣Mobile Test Me: Run your site through device emulators to check it on iPhones, Nokias, Android phones, tablets, etc.
Mobile & Tablet Support
Source: https://www.google.com/webmasters/tools/mobile-friendly/
Search
Source: https://wordpress.org/plugins/daves-wordpress-live-search
Dave’s WordPress Live Search ‣Adds live search to your site using WP’s existing search + jQuery
Search
Source: https://wordpress.org/plugins/relevanssi/
Relevanssi - A Better Search ‣ Search all WP site content not just posts & pages; comments,
tags, categories, etc. ‣Also displays what content people are searching for on your site
so you then know what to promote.
Language Support
Source: https://en.wikipedia.org/wiki/Languages_of_the_United_Kingdom Source for WordPress Multilingual Support: https://codex.wordpress.org/Multilingual_WordPress
Most Common (Foreign) Languages Spoken in the UK
WHY WON’T YOU LET THESE PEOPLE GIVE YOU THEIR MONEY?!
‣English ‣ Polish ‣Welsh ‣ Punjabi ‣Hindustani
‣Gujarati ‣Bengali ‣ French ‣German ‣ Spanish
Language Support
Source: http://wp-studio.net/
Google Language Translator ‣Uses Google Translates servers instead of running code on your
own site & possibly slowing it down. Supports 81 languages.
Accessibility:ACCESSIBILITY HELPS EVERYONE
We’ll All Need This At Some Point In Our Lives
‣ 15% of the world’s population is disabled, and that number is rising due to advances in health care.
‣Accommodations made for one population are frequently advantageous to other populations, like curb cuts.
‣At some point in your life, you are likely to become disabled in some way. In countries with life expectancy over 70 years, individuals spend on average of 8 years (11.5% of their lives) living with disabilities.
Accessibility: Colour BlindnessDesign for Colour Blindness in Mind ‣Be descriptive with colour names ‣ Install a plug-in to view your site as how a colour blind person would
Accessibility: Colour Blindness
More Resources
‣ https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl ‣ https://chrome.google.com/webstore/detail/see/
dkihcccbkkakkbpikjmpnbamkgbjfdcn?hl=en
Accessibility: Font Size & Legibility
Source: https://wordpress.org/plugins/p3-profiler/screenshots/
Responsive Typography ‣ Type resizes based on the width of the viewing port and adjusts to
what the user’s browser stipulates. ‣Use rems instead of ems and pixels to implement this. ‣Use FlowType.js jQuery plug-in to do this. http://simplefocus.com/
flowtype/
Accessibility: Font Size & Legibility
More Resources
The consensus is that the optimal character count should be between 45 and 75 characters
‣ http://designmodo.com/web-typography/ ‣ http://webdesign.tutsplus.com/tutorials/the-lazy-persons-guide-to-
responsive-typography--cms-22822 ‣ http://www.hallme.com/blog/understanding-responsive-typography/
Accessibility: Video/Audio Transcriptions
Source: https://www.rev.com/
Transcribe Your Video & Audio ‣Good for SEO because it’s pure content on your site ‣ People who can’t listen to audio can read the content: due to
deafness, loud or noisy work environments, language translation/understanding, etc.
‣Rev.com does it for $1/minute for audio or video. Translation is 10¢/word.
Accessibility: Video/Audio Transcriptions
Source: http://www.protranscript.com/it.html
Transcribe Your Video & Audio ‣ Interactive Transcripts allow people to click on areas of the transcript
and jump to a section of the video or audio
BONUS: SEO & Marketing Checklists
Source: https://www.woorank.com/en/www/meetup.com
WooRank ‣Gives recommendations & check lists to improve URLs, pages,
usability, mobile, etc.
MORE ISSUES TO FIX
‣Spelling & Grammar Mistakes
‣Autoplaying Audio or Video
‣Showing People Information Other Than Why They Clicked
‣Targeting the Wrong Audience
‣Low Quality Content
‣No Real Call to Action (CTA) to Help Direct People
‣Not Having Easily Scannable Content
‣Not Telling People What’s Coming Next
‣Asking For Too Much Information
CONCLUSION
‣ There is no “perfect” user. We all need some kind of guidance or a bit of a boost.
‣ Providing some kind of support means you build trust and people want to stay. And then they tell others how wonderful you are.
‣ Be considerate, responsive, *and* anticipatory to people’s needs.
EXTRA LINKSMore Resources
‣How Many Of These 7 UX Blunders Is Your WordPress Site Making? - http://premium.wpmudev.org/blog/how-many-of-these-7-ux-blunders-is-your-wordpress-site-making/
‣How to create better, more accessible WordPress themes - https://poststatus.com/how-to-create-accessible-wordpress-themes/
‣Bounce Rate: 14 ways you are driving people away from your landing pages - http://kickofflabs.com/blog/bounce-rate-14-ways-you-are-driving-people-away-from-your-landing-pages/
‣Accessibility is not what you think - https://boagworld.com/accessibility/accessibility-is-not-what-you-think/
EXTRA LINKSMore Resources
‣Ecommerce Web Form Design Best Practices: 12 Tricks for Making Your Forms Less Tiresome - https://www.ometria.com/blog/ecommerce-webform-best-practice
‣Accessible UX Principles and Guidelines - http://rosenfeldmedia.com/a-web-for-everyone/accessible-ux-principles-and-guidelines/
‣4 Top User Experience Tips for Improving Your WordPress Website - http://www.wpexplorer.com/improving-wordpress-user-experience/
‣Multi-Screen Browsing Infographic - http://ssl.gstatic.com/think/docs/multi-screen-world-infographic_infographics.pdf
