Practical UX: A Hands-on Guide to Getting Industry-Recognized Experience

Half Title....2 Title....4 Copyright....5 Dedication....6 Contents....8 Author Note....24 Introduction....20 Chapter 1: Find the Right Size Business....28 What This Process Teaches....28 Why Accessibility-Focused Evaluation and Design Is Important....29 Aim Small, Miss Small....30 How to Right-Size Your First Projects....31 Get Comfortable Delivering Value....31 Identifying Potential Customers....32 Tracking Your Outreach....33 Creating a “Someday Maybe” List....33 Follow Your Interests....34 Why They Say “The Riches Are in the Niches”....34 Suggestions For Small Businesses You Can Approach....35 Do you love animals?....35 Are you into food?....36 Are you a music fan?....36 Are you passionate about sustainability and eco-friendly living?....36 Are you into beauty and fashion?....37 Do you like education and lifelong learning?....37 Do you enjoy gaming or geek culture?....38 Do you love weddings?....38 Are you a DIYer or love handmade goods?....38 Do you enjoy physical activities and sports?....39 Do you love traveling or exploring?....39 Focus on What You Already Know....40 Start Local....41 Find Hidden Businesses Near You....41 Build Personal Relationships by Connecting in Person....42 Who Do You Know?....42 Who Do They Know?....44 Chapter 2: How to Approach the Business....46 Understanding Small Business Goals....46 What Kind of Customers Small Businesses Need....47 Likely Goals for Small Businesses....47 Quickly Assessing Success Metrics....48 The First Impression....49 Communicating the Value You Bring....50 Approach with Empathy....50 Communicating the Value of an Accessible Website....51 Making Money....51 Saving Money....52 Reducing Spending....52 Getting Comfortable Talking About What You Do....53 Describe What You Do....54 Follow a Script....55 Practice Makes Proficient....55 Chapter 3: Sell Your Service....58 Introduction to Selling....58 Understanding the Importance of Selling....59 Getting into a Sales Mindset....59 What You Are Selling....60 Why Offer a Website Evaluation for $100?....60 What Makes This an Easy Yes....61 How to Ask for the Sale....62 Be Honest About Your Experience Level....62 Use Plain Language, Not Industry Jargon....62 The Most Effective Communication Channels....63 Contact Form....63 Email....63 Phone....64 In Person....64 How to Use Social Media to Connect with Small Business Owners....65 Find the Right Businesses to Connect With....65 Engage First, Don’t Sell Immediately....65 Slide Into the DMs (Professionally!)....65 Use Instagram and TikTok Stories for Visibility....66 Join Small Business Facebook & LinkedIn Groups....66 Follow Up Without Being Pushy....66 Say the Words....67 Go for “No”....68 Expect Them to Say “No”....68 Set a Goal: 100 No’s....69 Handling Rejection Gracefully....69 How to Overcome Objections and Ask Again....70 Thank Them for Their Time....71 What to Do If They Say “Yes”....71 Always Get Paid Before Starting the Work....72 How You Can Receive Payment....72 Basic Legal Considerations....73 Reporting Requirements....73 Business Structure....74 Collecting Sales Tax....74 Written Agreements....74 Liability Insurance....74 Limitation of Liability....75 Example Statement of Limitation of Liability....76 Chapter 4: Evaluate the Website....78 Conduct a Stakeholder Interview First....78 Follow a Stakeholder Interview Template....79 Timeliness....79 Completeness....79 About the Business and Customers....80 Website Design Questions....81 Alternatively, Treat This Like Speculative Work....81 Identify the User Goals....81 Conduct a Website Evaluation....82 First Impressions and Seven Basic Requirements....82 Privacy Policy....84 Terms and Conditions....84 Accessibility Statement....84 Cookie Policy and Consent Notification....85 Data Storage Policy....85 Copyright Notice....85 If the Website Sells Products or Services, Is It Using HTTPS?....86 Why HTTPS Matters for Every Website....86 How SSL Certificates Work....86 How to Check if a Website Has SSL....87 How to Get an SSL Certificate for Your Website....87 Troubleshooting Common SSL Issues....88 Final Thoughts....88 Understanding POUR Principles....89 Perceivable....89 Operable....89 Understandable....89 Robust....89 Scoring and Prioritizing....90 Scoring....90 Priority....91 Completeness of Assessment....91 Accessibility Tab....91 Interactions Do Not Require a User to Use a Mouse. Every Functionality Is Fully Keyboard Accessible....92 Target Areas and Calls to Action (CTAs) Are Set to Be at Least 44x44 Pixels....92 There Are Clear, Visible Indicators Set on All Active Elements as They Receive Focus....93 Pages Have Meaningful Title Text, with Page-Specific Information Going First....93 Page Titles and Primary Headings (’s) Are the Same or Similar....93 Pages Have Meaningful Headings for Each Section....94 Links’ Purpose May Be Discerned from Link Text Alone, or the Immediate Context....94 A “Skip Link” Is Provided at the Very Top of the Page and Is Revealed on Focus....95 Organization of Navigation Is Logical and Facilitates Users Finding What They Need....95 Content That Looks like a Heading Is Defined as Such....96 Heading Structure Hierarchy Does Not Skip Any Levels....96 Navigation Menus Are Structured Using Lists....97 Form Controls (Inputs) Are Assigned a Meaningful, Visible Text Label....97 Groupings of Form Elements Share a Common Group Label....98 Information Conveyed Through Sensory Characteristics Is Also Supported in Text....98 Data Tables Are Clearly Assigned Header Columns and/or Rows....98 Labels and Instructions Are Worded in Text to Provide Users with Adequate Support....99 Labels and Instructions Are Located in Close Proximity to Their Controls....99 Required Fields Are Identified as Such in the Label Text....100 Users Are Not Required to Remember Information Between Pages in a Multi-Step Process....100 Body Text (and Other Small Text) Should Have a Contrast Ratio of at Least 4.5:1....101 Large Text Should Have a Contrast Ratio of at Least 3:1....101 Link Text Copy Has a Contrast Ratio of at Least 3:1 Against Its Surrounding Text....101 Foreground/Background Contrast Ratio of Meaningful Graphics Is at Least 3:1....101 Images Do Not Have Text Embedded in Them....102 Line Spacing (Also Known as Leading) Is Set to at Least 1.5 in Paragraphs, and Twice as Much Between Paragraphs....103 Selected Typefaces Are Easy to Read and Render Properly on Mobile....103 Content Is Designed in Short Blocks of Text That Are Easier to Manage Cognitively....103 Headings and Form Labels Are Worded So They Are Meaningful to Users....104 Changes in Language Within the Page Are Specified for Assistive Technologies....104 Content Is Made Easier to Understand by Leveraging Plain Language Principles....105 Repeated Elements Are Consistent Throughout the Website....105 The Number of Steps Required to Complete an Action Are Minimal....106 Functionalities and Features Are Easily Discoverable....106 Both Portrait and Landscape Orientations Are Supported....107 Users Are Informed When Providing Input Triggers a Change of Context....107 Users Are Informed When Setting the Focus on a Control Triggers a Change of Context....108 Users Are Provided with a Mechanism to Ask for Time Extensions Ahead of Time....108 Upcoming Session Timeouts Are Clearly Identified as Such in the Design....109 Users Can Turn Off, Adjust, or Extend Time Limits When Sessions Are About to Run Out....109 Options to Postpone or Suppress Interruptions Are Offered. Users Should Be Able to Request Content Updates Rather Than Content Being Updated Automatically....110 There Are Mechanisms to Save Data and Allow Data Recovery After User Re-Authenticates....110 Moving and/or Animated Content Can Be Paused, Stopped, or Hidden....111 Video and Audio Files Are Not Set to Auto-Play....111 Audio Volume Is Adjustable via a Visible, Labeled Control....111 Flashing or Blinking Effects Are Slower Than Three Times per Second....112 Informational Images Are Provided With Meaningful Alt Text Describing Their Content....113 Decorative Images Are Identified So They Can Be Ignored By Assistive Technologies....113 Active Images Are Provided With Meaningful Alt Text Describing Their Purpose....113 Complex Images Are Given Alt Text and An Extended Full Text Description....114 Transcripts Are Provided for Audio-Only and Video- Only Content....114 Synchronized Captions Are Provided for Pre-Recorded Videos....115 Audio Description Tracks Are Provided for Pre-Recorded Videos....115 Transcript Content Is Formatted for Scannability and Readability....115 Tab 1: Wayfinding and Organization....116 The User Understands Where They Are Within the Website....116 Menu and Button Labels Have the Keyword(s) First, Forming Unique Labels with Semantic Meaning....116 Related and Interdependent Form Fields Appear on the Same Screen in All Situations....117 Progress Is Displayed Throughout Multi-Page Processes....117 Tab 2: Visibility of System Status....118 Disabled Fields Are Clearly Discernible from Enabled Fields....118 Actionable Content Is Obvious....119 Selected Options Are Clearly Indicated with the Help of Highlights....119 Table Sorting: It Is Clear What Is Sortable and What Is Currently Sorted....119 Table Filtering: It Is Clear If a Filter Has Been Applied and What Is Currently Filtered....120 There Is Feedback for Meaningful User Interaction....120 Widget Response Time Is Brief and Provides User Feedback....121 What Is a Widget?....121 Processes Over Two Seconds Show Progress....122 Tab 3: Content Clarity and Readability....122 Form Field Labels Are Arranged in a Readable Vertical Format....122 Obvious Distinctions Are Made Between Choose One and Choose Many Options....123 The Website Uses Font Sizes That Are Large Enough to Be Comfortably Read on Standard Displays....123 The Website Uses Larger Font Sizes for Metrics and Data....124 Dates Are Clear for All Users, Including International Users....124 Metrics Are Labeled Clearly, with Detailed Information About the Data Easily Available as Needed....124 Tab 4: User Control and Freedom....125 Informed Choices: The Consequences of Actions a User Can Take Are Communicated Clearly....125 In the Context of a Multi-Step User Flow, the User Can Go Back to Previous Steps and Make Changes....126 Users Can Cancel an Operation in Progress and Be Returned to the Immediate Point from Where They Started Within the Process....126 Users Are Prompted to Confirm Commands That Have Destructive Consequences....126 Users Can Easily Undo an Action....127 Users Can Easily Redo an Action....127 User-Created Data Can Be Changed or Deleted....128 Tab 5: Consistency and Standards....128 Most Important Information Is First or Near the Beginning of the Page....128 Icons Used Follow a Design Scheme That Is Consistent Across the Website....128 Field Labels Are Left-Justified and to the Left of the Input Field or Above It....129 Selected Colors Are Consistent with Common Expectations About Communicating with Color....129 Titles and Labels Are Semantically Consistent....129 Numbers, Currency, and Symbols Are Shown Consistently Across the System....130 Tab 6: Recognition Rather Than Recall....130 Consistent Use of Visual and Text Prompts....130 Main Icons Are Easily Remembered After Initial Experience....130 Icons That Are Custom to the Product Are Consistently Used....131 Icons That Are Less Familiar Have Labels Near the Icons....131 Tab 7: Flexibility and Efficiency of Use....131 For All Transaction Sequences, All Required Data Is Obviously Marked for the User....132 Users Are Not Asked for Too Much Information, or More Than the Bare Minimum for the Task at Hand....132 Users Are Able to Customize Information, Selections, or Views to Suit Their Needs....132 The System Supports Accelerators, Such as Keyboard Shortcuts....133 Information Is Filled in for the User as Much as Possible....133 Tab 8: Aesthetic and Minimalist Design....134 Headings Are Brief, Yet Long Enough to Communicate....134 The Interface Is Uncluttered, and Contains No (or Minimal) Decorative Elements....134 Content Is Brief and Concise, Providing Enough Information for Users to Understand What Actions to Take....135 Content Is Prioritized to Support User Goals....135 Tab 9: Error Prevention and Recovery....136 Required Format Shown When Users Need to Enter Information Formatted Specifically....136 Forms Give a Clear Indication of the Number of Character Spaces Available in a Field....136 The System Warns Users When They’re About to Make a Potentially Serious Error....137 Errors and Informational Messages Have a Link for More Details When Appropriate....137 Error Messages Use Consistent and Traditional Grammatical Style, Form, Terminology, and Abbreviations....138 Error Messages Are Clearly Worded and Use the Normal Action-Object Syntax Consistently....138 Error Messages Suggest the Cause and Solution to the Problem....138 Prompts Are Clear and Concise, Providing Preventive Measures to Be Taken....139 Prompts Are Expressed in Plain Language with No Error Codes or Jargon....139 Tab 10: Help and Documentation....139 The Help System Interface Is Consistent with the Navigation, Presentation, and Conversation Interfaces of the Application It Supports....140 Assistive Documentation Is Easy to Find and Search, and Is Offered in the Context of the Tasks the User Is Trying to Complete....140 Assistive Documentation Offers Concrete Steps That Users Can Follow to Complete Their Tasks....141 Users Can Start Work Where They Left Off After Accessing Help and Switch Back to Help Again Easily, If Required....141 Chapter 5: Synthesize and Recommend....142 Assessment Results....142 Automated Tools....142 Summary Tab....143 Evaluation Details....143 Score Legend....144 Evaluation Scores....144 Scores Above 3....144 Identify Must-Fix Issues....145 Prioritize the Issues and Make Recommendations....146 Prioritize High-Impact Problems....146 Example 1: Beauty Services....147 Example 2: Bar, Restaurant, and Music Venue....148 Example 3: Non-Profit Website....149 Create Recommendation Visuals....151 Screenshots with Annotations....151 “Franken-Mockups”....152 Wireframes....154 High-Fidelity Mockups and Prototypes....154 Chapter 6: Report and Present....156 Use a Slide Deck Template....156 Update the Template....157 Slide 1....157 Slide 2....158 Slide 3....158 Slide 4....159 Slide 5....160 Slide 6....160 Describe the Most Important Issues....161 Slide 7....161 Slide 8....162 Show Your Ideas for Improvement....163 Slide 9....163 Slide 10....164 Slides 11–13....164 Call out Legal and Financial Implications....165 Slide 14....166 Schedule a Meeting with Stakeholders....166 Follow Proper Meeting Etiquette....167 Respect Everyone’s Time....167 Wrap It Up....168 Follow Up....168 Chapter 7: Sell Yourself to Do the Work....170 Pitching Your Services....170 What to Charge....170 Having the Money Conversation....171 What to Say When Offering Your Services....172 Understanding Proposals vs. Statements of Work (SOWs)....173 What Goes Into a Website Design Refresh Proposal?....173 How to Estimate UX Work (Especially Small Fixes)....174 Suggested Time For Fixing Accessibility Issues....175 Be Honest (With Yourself) About Your Abilities....177 What is the Meaning of “Done”....179 Your Legal Requirements....180 Business Entity or Independent Contractor....180 How to Get Paid....180 Check Local Requirements....181 Getting Started On the Work to Be Done....181 Creating an SOW (Statement of Work)....181 Establish Communication Guidelines....183 Document Everything....183 Manage Scope Creep....184 What is the Meaning of “Done” For Real?....184 Chapter 8: Create a Case Study....186 Describe Impact....187 Using Second-Order Thinking....187 Focus on Business Value....188 Make Metrics Meaningful....189 Show Outcomes over Output....190 Use a Template for Showing Outcomes....192 Make the Minimum Viable Case Study....193 Update Your Professional Details....194 Update Your Resume....195 Update Your LinkedIn Profile....195 Finally, Congratulations!....196 Citations....198 Index....200