Usability — Creative Commons Open Source

<!doctype html> <html lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico"> <link rel="stylesheet" href="/static/gen/style.css"> <link rel="stylesheet" href="/static/pygments.css"> <meta property="og:site_name" content="Creative Commons" /> <meta property="og:title" content="Usability" /> <meta property="og:description" content="At Creative Commons (CC), our goal is to make our products as easy and delightful to use as possible. To that end, we are constantly talking to our users. Sometimes our sessions involve understanding current experiences and identifying pain points, other times we’re determining upcoming feature prioritization. If we plan to roll out a new product, or design a new interface or feature for an existing product, we do research! We appreciate our users volunteering their time to help us with this research by participating in test sessions." /> <meta property="og:url" content="/contributing-code/usability/" /> <meta property="og:type" content="article" /> <meta property="og:image" content="https://cc-og-image.vercel.app/Usability.png?&md=1&fontFamily=roboto-condensed&fontSize=100px&images=https%3A%2F%2Fcc-vocabulary.netlify.app%2Flogos%2Fproducts%2Fopen_source.svg%23opensource" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Usability"> <meta name="twitter:description" content="At Creative Commons (CC), our goal is to make our products as easy and delightful to use as possible. To that end, we are constantly talking to our users. Sometimes our sessions involve understanding current experiences and identifying pain points, other times we’re determining upcoming feature prioritization. If we plan to roll out a new product, or design a new interface or feature for an existing product, we do research! We appreciate our users volunteering their time to help us with this research by participating in test sessions."> <meta name="twitter:site" content="@creativecommons"> <meta name="twitter:creator" content="@creativecommons"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script type="text/javascript" src="/static/gen/script.js"></script> <script src="https://unpkg.com/@creativecommons/vocabulary@2020.7.2/js/vocabulary.js"></script> <script> const globalHeaderInstance = vocabulary.createGlobalHeader(); </script> <title>Usability — Creative Commons Open Source</title> <body>  <header class="container"> <nav class="navbar"> <div class="navbar-brand"> <a class="has-text-black" href="/" aria-label="Home"> <svg class="logo margin-top-small" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 284 46"> <use href="#opensource"></use> </svg> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div class="navbar-menu"> <div class="navbar-end"> <a class="navbar-item " href="/blog/entries/"> Blog </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link is-arrowless is-active" tabindex="0"> Contribute<i class="icon caret-down"></i></a> <div class="navbar-dropdown"> <a class="navbar-item" href="/contributing-code/">Contribution Guidelines</a> <a class="navbar-item" href="/contributing-code/projects/">Project List</a> <a class="navbar-item" href="/contributing-code/issue-finder/">Issue Finder</a> <a class="navbar-item" href="/contributing-code/pr-guidelines/">Pull Request Guidelines</a> <a class="navbar-item" href="/contributing-code/github-repo-guidelines/">GitHub Repo Guidelines</a> <a class="navbar-item" href="/contributing-code/repo-labels/">Repository Labels</a> <a class="navbar-item" href="/contributing-code/foundational-tech/">Foundational technologies</a> <a class="navbar-item" href="/contributing-code/documentation-guidelines/">Documentation Guidelines</a> <a class="navbar-item" href="/contributing-code/javascript-guidelines/">JavaScript Guidelines</a> <a class="navbar-item" href="/contributing-code/python-guidelines/">Python Guidelines</a> <a class="navbar-item" href="/contributing-code/translation-guide/">Translation Guide</a> <a class="navbar-item" href="/contributing-code/usability/">Usability</a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link is-arrowless " tabindex="0"> Community<i class="icon caret-down"></i></a> <div class="navbar-dropdown is-active"> <a class="navbar-item" href="/community/">Join the Community</a> <a class="navbar-item" href="/community/community-team/">Community Team</a> <a class="navbar-item" href="/community/community-team/members/">Community Team Members</a> <a class="navbar-item" href="/community/community-team/project-roles/">Project Roles</a> <a class="navbar-item" href="/community/community-team/community-building-roles/">Community Building Roles</a> <a class="navbar-item" href="/community/write-a-blog-post/">Write a Blog Post</a> <a class="navbar-item" href="/community/code-of-conduct/">Code of Conduct</a> <a class="navbar-item" href="/community/code-of-conduct/enforcement/">Code of Conduct Enforcement</a> <a class="navbar-item" href="/community/supporters/">Supporters</a> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link is-arrowless " tabindex="0"> Work Programs<i class="icon caret-down"></i></a> <div class="navbar-dropdown"> <a class="navbar-item" href="/programs/">Overview</a> <a class="navbar-item" href="/programs/project-ideas/">Project Ideas</a> <a class="navbar-item" href="/programs/applicant-guide/">Applicant Guide</a> <a class="navbar-item" href="/programs/contrib-guide/">Contributor Guide</a> <a class="navbar-item" href="/programs/lead-guide/">Project Lead Guide</a> <a class="navbar-item" href="/programs/history/">History</a> </div> </div> </div> </div> </nav> </header>  <div class="breadcrumb-container"> <nav class="container breadcrumb caption bold" aria-label="breadcrumbs"> <ul>    <li><a class="link" href="/"> Home </a></li>   <li><a class="link" href="/contributing-code/"> Contributing Code </a></li>  <li class="is-active"><a aria-current="page displayed">Usability</a></li> </ul> </nav> </div>  <div class="code-guidelines"> <header class="header"> <div class="container is-paddingless"> <h1>Usability</h1> <div class="description column is-9 is-paddingless"> </div> </div> </header> <div class="container code-guidelines-body"> <div class="columns"> <div class="column is-one-quarter"> <div class="row"> <aside class="menu sidebar-menu"> <ul class="menu-list"> <li> <a class=" link" href="/contributing-code/projects/">Project List</a> </li> <hr class="divider"> <li> <a class=" link" href="/contributing-code/issue-finder/">Issue Finder</a> </li> <hr class="divider"> <li> <a class=" link" href="/contributing-code/">Contribution Guidelines</a> <ul> <li><a class=" link" href="/contributing-code/foundational-tech/"><i class="icon circle-filled"></i>Foundational technologies</a></li> <li><a class=" link" href="/contributing-code/pr-guidelines/"><i class="icon circle-filled"></i>Pull Request Guidelines</a></li> <li><a class=" link" href="/contributing-code/github-repo-guidelines/"><i class="icon circle-filled"></i>GitHub Repo Guidelines</a></li> <li><a class=" link" href="/contributing-code/repo-labels/"><i class="icon circle-filled"></i>Repository Labels</a></li> <li><a class=" link" href="/contributing-code/documentation-guidelines/"><i class="icon circle-filled"></i>Documentation Guidelines</a></li> <li><a class=" link" href="/contributing-code/javascript-guidelines/"><i class="icon circle-filled"></i>JavaScript Guidelines</a></li> <li><a class=" link" href="/contributing-code/python-guidelines/"><i class="icon circle-filled"></i>Python Guidelines</a></li> <li><a class=" link" href="/contributing-code/translation-guide/"><i class="icon circle-filled"></i>Translation Guide</a></li> </ul> </li> <hr class="divider"> <li> <a class=" is-active link" href="/contributing-code/usability/">Usability</a> </li> </ul> </aside> </div> <div class="row padding-bottom-normal sticky-top"> <h4 class="b-header">On this page</h4> <aside class="menu table-of-contents"> <ul class="menu-list"> <li> <a class="link" href="#participate-in-a-session">Participate in a Session</a> </li> <li> <a class="link" href="#what-to-expect">What to Expect</a> </li> <li> <a class="link" href="#diy">DIY</a> </li> </ul> </aside> </div> </div> <div class="column content is-three-quarters"> <p>At Creative Commons (CC), our goal is to make our products as easy and delightful to use as possible. To that end, we are constantly talking to our users. Sometimes our sessions involve understanding current experiences and identifying pain points, other times we’re determining upcoming feature prioritization. If we plan to roll out a new product, or design a new interface or feature for an existing product, we do research! We appreciate our users volunteering their time to help us with this research by participating in test sessions.</p> <h2 id="participate-in-a-session">Participate in a Session</h2><p>When we’re rolling out a specific feature, we do <strong>usability tests</strong> to test the proposed experience.</p> <p>Keep an eye on the <code>#cc-usability</code> channel in the <a href="https://slack-signup.creativecommons.org/">Creative Commons Slack</a> or sign up for the <a href="https://groups.google.com/a/creativecommons.org/forum/#!forum/usability-announce">CC Usability Announcements list</a>. That way you’ll be the first to hear when there’s a round of usability tests being scheduled for something new.</p> <p>At any point in time, we’re engaging with our users through <strong>user interviews</strong>, where we learn more about attitudes towards our products, and dig into expansion areas we’re considering.</p> <p>If you’re interested in volunteering your time, we invite you to sign up to talk to us. Look at the <a href="https://calendly.com/cc-product-design">products and features</a> we’re currently scheduling tests for. If you’d like time to share general thoughts, sign up for a User Interview session specifically.</p> <h2 id="what-to-expect">What to Expect</h2><ul> <li>After scheduling a time to talk to us, here’s what you can expect:</li> <li>You’ll need to sign and return a <a href="https://drive.google.com/file/d/1XWt5QDu-IR76BwsPP7OidqNncha3rHbm/view">consent form</a>, allowing us to record the screen during the session. We typically do screen share, and the value of the session is greatly increased when we can refer back to a recording while reviewing notes and findings.</li> <li>You’ll need a good internet connection, a functioning microphone, and the ability to use Google Meet.</li> <li>When the session starts, we begin with introductions and some general questions about you!</li> <li>We then move on to screen share, where we may do a number of things: complete tasks through prototypes, look at existing products, review proposed designs, compare interfaces of similar services, or talk about a topic related to the session. There are no wrong answers. As researchers, we’re interested in hearing your honest thoughts and ideas. We’ll ask you to talk out loud as much as possible, and filter nothing!</li> <li>After the session wraps, we’ll send a small token of gratitude your way.</li> </ul> <h2 id="diy">DIY</h2><p>In the spirit of open source, here is how you can prepare your own usability test, based on how CC approaches usability tests.</p> <p><strong>Decide why and what you want to test.</strong> Whatever you are planning on putting in front of users, be clear on why you are doing the research. Be specific about which design options you are testing, and the metrics you want to obtain from your sessions. Writing down your assumptions related to product changes will help you to compare which ideas worked better or worse after running the sessions.</p> <p>Decide which tools suit best for the purposes of the test. Depending on the goal, some tests require high-fidelity interactive prototypes, while others need low-fi screens with complete functionality.</p> <p><strong>Prepare your wireframes, mockups, or interactive prototypes.</strong> At CC we use Moqups for basic wireframes, and Figma to house our Design Library, create mockups, and in some cases interactive prototypes. Here’s a useful article on <a href="https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma">creating prototypes in Figma</a>. Other software for similar purposes includes Balsamiq, Invision, and Sketch.</p> <p><strong>Prepare your script.</strong> Within your script you should:</p> <ul> <li>Reestablish with the user why they’re here.</li> <li>Drive home the point that you are testing the product, not the user, and there are no wrong answers.</li> <li>Make space to ask basic background questions of the user.</li> <li>Indicate when (or if) you plan to commence screen recording.</li> <li>Prepare tasks, one or more, for the user to carry out. It is helpful to write these tasks down on a shared document (we often use Google Slides), as they may include links, and can allow the user to reference the instructions during the task.</li> </ul> <p><strong>Prepare a consent form for screen recording.</strong> Usability sessions are great, but they’re even better when they’re recorded. It allows you to focus more fully on the session during it, be less distracted by note taking, and not worry that you’re missing key insights. Ensure that your users sign this before commencing screen recording. (See the <a href="https://drive.google.com/file/d/1XWt5QDu-IR76BwsPP7OidqNncha3rHbm/view">form</a> we use as an example.). If you opt to not do screen recording, we strongly recommend having a second person with you during the session whose sole role it is to take notes.</p> <p><strong>Schedule tests.</strong> Promote with your social users, newsletter subscribers, announce it on your site, or get the word out some other way. We use Calendly for scheduling these, and we include a number of basic questions during the session sign-up process, to help us better prepare for tests. (See an example sign-up <a href="https://calendly.com/cc-product-design/user-interview-30">here</a> ). Our typical requirements for participants are high speed internet access, a computer with a microphone, ability to screen share, and request for consent form to be signed. For anything new you want to get feedback on, it’s advisable to talk to at least three users.</p> <p><strong>Rehearse.</strong> Before your first session, simulate a whole session, read the script, complete the task(s), and answer the final questions you plan to ask. Think about if there are additional things you want to ask. Be ready, knowing what you want to say and ask.</p> <p><strong>Carry out the test.</strong> During the session, have your script open on one window, and a video call with screen share open on another window. We use Google Meet (Hangouts) for our video calls.</p> <p>Have a notes document prepared, or better yet, enlist someone else to join the call to take notes. If (and only if) your participant has consented to screen share being recorded, be ready with software that records the screen. We often use QuickTime (if on a Mac), it is simple and free. Another option is <a href="https://obsproject.com/">OBS</a>, which is free, open source, and cross platform.</p> <p>Remember that the point of the test is to ask questions and get feedback. It is not to educate, give guidance, or explain. Whenever you are running a usability test, remember that you want to see what the user will do to complete the task when no one is around to help them. Ask them to think out loud, so that you can better understand what is clear and what is confusing, and pay close attention to how the user interacts with the prototype. If something related to your research purpose catches your attention, dive into it by asking why.</p> <p><strong>Thank the user.</strong> At the end of the test, remember to thank the user. If you have the budget for it, we recommend signaling gratitude with a gift card, or other reward. Members of your community may politely decline this offer, because their reward is the ability to contribute to improving your product.</p> <p><strong>Review your findings.</strong> Spend time with your notes, rewatching the screen recording, and deeply thinking about what you have learned.</p> <p>We strongly recommend reading <a href="http://stevekrug.com/rsme.html">Rocket Surgery Made Easy by Steve Krug</a>. The methods we employ at CC are to a large extent based on the guidance in that book. Have you read something fantastic about usability testing? Join us in the <code>#cc-usability</code> channel in the <a href="https://slack-signup.creativecommons.org/">Creative Commons Slack</a> and share your resources!</p> </div> </div> </div> </div>  <footer class="main-footer"> <div class="container"> <div class="columns"> <div class="column is-one-third-tablet-only is-one-quarter-desktop"> <a href="https://creativecommons.org" class="main-logo margin-bottom-bigger"> <span class="has-text-white"> <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 304 73"> <use href="#logomark"></use> </svg> </span> </a> <div> <address class="margin-bottom-normal">Creative Commons<br />PO Box 1866, Mountain View CA 94042</address> <a href="mailto:info@creativecommons.org" class="mail">info@creativecommons.org</a><br /> <a href="tel://+1-415-429-6753" class="phone">+1-415-429-6753</a> </div> <div class="margin-vertical-large"> <a href="https://www.instagram.com/creativecommons" class="social has-text-white" target="_blank" rel="noopener"> <i class="icon margin-right-small is-size-4">instagram</i> </a> <a href="https://www.facebook.com/creativecommons" class="social has-text-white" target="_blank" rel="noopener"> <i class="icon margin-right-small is-size-4">facebook</i> </a> <a href="https://www.linkedin.com/company/creative-commons/" class="social has-text-white" target="_blank" rel="noopener"> <i class="icon margin-right-small is-size-4">linkedin</i> </a> </div> </div> <div class="column is-two-third-tablet-only is-three-quarters-desktop"> <div class="columns"> <div class="column is-full"> <nav class="footer-navigation"> <ul class="menu"> <li> <a href="/blog/entries/" class="menu-item">Blog</a> </li> <li> <a href="/community/community-team/" class="menu-item">Community Team</a> </li> <li> <a href="/contributing-code/projects/" class="menu-item">Project List</a> </li> <li> <a href="/archives/" class="menu-item">Archives</a> </li> </ul> </nav> </div> </div> <div class="columns"> <div class="column is-two-thirds"> <div class="subscription"> <h5 class="b-header">Subscribe to our newsletter</h5> <form class="newsletter"> <input type="email" id="emailInput" class="input" placeholder="Your email" required> <input type="submit" value="subscribe" class="button small"> </form> </div> <div class="attribution margin-top-bigger"> <p class="caption"> Except where otherwise <a href="https://creativecommons.org/policies#license" target="_blank" rel="noopener">noted</a>, content on this site is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution 4.0 International license</a>. <a href="https://creativecommons.org/website-icons" target="_blank" rel="noopener">Icons</a> by <a href="https://fontawesome.com/" target="_blank" rel="noopener">Font Awesome</a>. </p> <div class="margin-top-smaller"> <i class="icon margin-right-small is-size-4">cclogo</i> <i class="icon margin-right-small is-size-4">ccby</i> </div> </div> </div> <div class="column is-one-third"> <aside class="donate-section"> <h5>Our work relies on you!</h5> <p>Help us keep the internet free and open.</p> <a class="button small donate" href="https://creativecommons.org/donate?c_src=website&c_src2=GlobalFooter"> <i class="icon cc-letterheart-filled margin-right-small is-size-5 padding-top-smaller"></i> Donate now </a> </aside> </div> </div> </div> </div> </div> </footer> </body> </html>

CINXE.COM

Usability — Creative Commons Open Source