{"id":5909,"date":"2019-01-15T23:20:03","date_gmt":"2019-01-15T17:50:03","guid":{"rendered":"https:\/\/www.springboard.com\/?p=5909"},"modified":"2024-02-20T03:34:36","modified_gmt":"2024-02-20T11:34:36","slug":"ux-terms","status":"publish","type":"post","link":"https:\/\/www.springboard.com\/blog\/design\/ux-terms\/","title":{"rendered":"25 UX Terms Every Designer Needs to Know"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">A software engineer is very familiar with petabytes and XML. Similarly, a doctor is well aware of systolic pressure and the aorta. That\u2019s because these terms belong to their line of work and are frequently tossed around like plain English. UX design is no different. It brings UX terms to the table, ones that you should know as an aspiring designer.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">It is easy to get lost if you are not well-versed in the design lingo or familiar with the <a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-design-principles\/\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/ux-design-principles\/\" target=\"_blank\" rel=\"noreferrer noopener\">core principles<\/a>. To make matters easy for you, here is a compilation of UX terminology that every designer needs to know before traveling further along the&nbsp;UX design career path.<\/span><\/p>\n\n\n<style>.blog-cta-salsey-01 {\toverflow: hidden;\t}\t.blog-cta-salsey-01-img {\tmax-width: 160px !important;\t}\t@media (min-width: 768px) {\t.blog-cta-salsey-01-content {\tmax-width: calc(100% - 281px);\t}\t.blog-cta-salsey-01-img {\tposition: absolute;\tmax-width: 100% !important;\tright: -10px;\tbottom: -10px;\t}\t}<\/style><div class=\"blog-cta-salsey-01 bg-blue-50 p-3 my-5 position-relative\"><div class=\"d-block d-md-flex\"><img decoding=\"async\" loading=\"lazy\" width=\"212\" height=\"232\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2023\/05\/ui-ux-design-student.png\" alt=\"UI\/UX design student\" class=\"blog-cta-salsey-01-img mb-3 mb-md-0\" \/><div class=\"blog-cta-salsey-01-content\"><div class=\"d-flex align-items-center mb-2\"><img decoding=\"async\" class=\"pe-2\" width=\"86\" height=\"71\" loading=\"lazy\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2023\/04\/job-guarantee-heading-badge.png\" alt=\"Job Guarantee\" style=\"mix-blend-mode: multiply\"><h4 class=\"fw-bold mb-0\">Become A UX Designer. Land a Job or Your Money Back.<\/h4><\/div><p>Master Adobe XD, Figma, and Sketch. Work 1:1 with an industry mentor. Build a portfolio. Land a job \u2014 or your money back.<\/p><p class=\"mb-sm-0\"><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.springboard.com\/courses\/ui-ux-design-career-track\/#job-guarantee\">Start designing<\/a><\/p><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">UX Terms<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">1. Persona<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Often considered a general marketing term, this is frequently used in <a href=\"https:\/\/www.springboard.com\/blog\/design\/what-is-ux-design\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/what-is-ux-design\/\" rel=\"noreferrer noopener\">UX design<\/a> as well. A&nbsp;<\/span><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/personas-why-and-how-you-should-use-them\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">persona<\/span><\/a><span style=\"font-weight: 400;\"> is a user profile that you develop to get an idea of what the audience wants. In other words, a persona is a representation of the target audience so that you are designing for a specific audience instead of a generic one.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For example, you shouldn&#8217;t design a website for seniors with design elements that appeal to millennials. Therefore, a one- or two-page description of your audience covering its goals, behavior patterns, background information, attitude, skills, and working environment is essential.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Here is an example:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image3-2-1024x672.png\" alt=\"persona example\" class=\"wp-image-5910\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/theblog.adobe.com\/putting-personas-to-work-in-ux-design-what-they-are-and-why-theyre-important\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Source<\/span><\/a>)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">2. End Users<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Whereas a doctor has patients, a service-based business has clients. A <a href=\"https:\/\/www.springboard.com\/blog\/design\/what-does-a-ux-designer-do\/\" target=\"_blank\" data-type=\"post\" data-id=\"5182\" rel=\"noreferrer noopener\">UX designer<\/a>, however, has a different audience: end users. These are the people you will be designing for. So, while a UX design studio has clients, the people at the end of the chain who interact with the design are end users.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">3. Pain Points<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@mrpatel\/pain-points-goals-solutions-how-to-turn-user-insights-into-actions-5abf1e1a41a8\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Pain points<\/span><\/a><span style=\"font-weight: 400;\"> are the problems users face that create friction in certain <a href=\"https:\/\/www.springboard.com\/blog\/design\/user-flow\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/user-flow\/\" rel=\"noreferrer noopener\">user flows<\/a>. Once designers identify these, they can create a user-friendly design. A&nbsp;<\/span><a href=\"https:\/\/medium.com\/tradecraft-traction\/myfitnesspal-a-ux-case-study-f377ff66a504\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">UX case study<\/span><\/a><span style=\"font-weight: 400;\"> shares how user pain points were dug out and how design solved them, as shown below:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image13-1024x426.png\" alt=\"pain point example\" class=\"wp-image-5911\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/medium.com\/tradecraft-traction\/myfitnesspal-a-ux-case-study-f377ff66a504\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Source<\/span><\/a>.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">4. User Research<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">User research is one of the more self-explanatory <\/span><span style=\"font-weight: 400;\">UX design terms<\/span><span style=\"font-weight: 400;\">. It is all the research that you conduct to understand your end user better.&nbsp;<\/span><a href=\"https:\/\/www.uxbooth.com\/articles\/complete-beginners-guide-to-design-research\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">UX Booth defines user research<\/span><\/a><span style=\"font-weight: 400;\"> as \u201ca variety of investigative methods used to add context and insight to the design process.\u201d<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The&nbsp;<\/span><span style=\"font-weight: 400;\">process<\/span><span style=\"font-weight: 400;\"> incorporates analytical tasks such as quantitative and qualitative research. Quantitative research relates to gathering numerical data to understand user behavior.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">On the flip side, qualitative research is a descriptive attempt to understand the target audience\u2019s problems, motivations, opinions, and reasons via processes such as interviews.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ratio ratio-16x9 my-5\" itemprop=\"video\"><img src=\"https:\/\/img.youtube.com\/vi\/OtUWbsvCujM\/sddefault.jpg\" class=\"img-fluid\" alt=\"YouTube video player for OtUWbsvCujM\" loading=\"lazy\" style=\"object-fit:cover;width:100%;height:100%\" data-yt-facade=\"1\" \/><div class=\"yt-facade\" style=\"position:absolute;z-index:2;background:rgba(0,0,0,0.2)\"><svg fill=\"#fff\" height=\"100%\" viewBox=\"0 0 24 24\" width=\"72\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"><\/path><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z\"><\/path><\/svg><\/div><iframe loading=\"lazy\" title=\"When to Use Which UX Research Method\" width=\"1170\" height=\"658\" data-yt-src=\"https:\/\/www.youtube.com\/embed\/OtUWbsvCujM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.springboard.com\/blog\/design\/becoming-a-ux-researcher\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/becoming-a-ux-researcher\/\" rel=\"noreferrer noopener\"><em>Read more on becoming a user researcher here<\/em><\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">5. UI Elements<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/user-interface-elements.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">User Interface (UI) elements<\/span><\/a><span style=\"font-weight: 400;\"> are virtual items on a website\u2019s interface that allow users to engage with the design. Examples of such items include buttons, slider arrows, navigation bars, dropdown lists, message boxes, and anything that enables users to navigate through a website. &nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Here\u2019s an example of a dropdown list:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image7-1-1024x600.png\" alt=\"drop-down list example\" class=\"wp-image-5913\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">6. User-Centered Design (UCD)<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Another frequently used UX term is user-centered design. It emphasizes the end user throughout the design and development process. The goal is to produce a design that aligns with the wants and needs of the user. To this end,&nbsp;<\/span><a href=\"https:\/\/uxplanet.org\/user-centered-design-process-and-benefits-fd9e431eb5a9\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">UCD<\/span><\/a><span style=\"font-weight: 400;\"> revolves around continuously researching, testing, and checking features within the product to deliver a design that appeals to users.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ratio ratio-16x9 my-5\" itemprop=\"video\"><img src=\"https:\/\/img.youtube.com\/vi\/dKziavNRuis\/sddefault.jpg\" class=\"img-fluid\" alt=\"YouTube video player for dKziavNRuis\" loading=\"lazy\" style=\"object-fit:cover;width:100%;height:100%\" data-yt-facade=\"1\" \/><div class=\"yt-facade\" style=\"position:absolute;z-index:2;background:rgba(0,0,0,0.2)\"><svg fill=\"#fff\" height=\"100%\" viewBox=\"0 0 24 24\" width=\"72\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"><\/path><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z\"><\/path><\/svg><\/div><iframe loading=\"lazy\" title=\"UX Design Process Explained\" width=\"1170\" height=\"658\" data-yt-src=\"https:\/\/www.youtube.com\/embed\/dKziavNRuis?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p><em><a href=\"https:\/\/www.springboard.com\/blog\/design\/ux-testing\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/ux-testing\/\" rel=\"noreferrer noopener\">Read more on UX testing here<\/a><\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">7. Experience Architecture<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/generalassemb.ly\/blog\/user-experience-design-and-architecture\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Experience architecture<\/span><\/a><span style=\"font-weight: 400;\"> is a map that lays the outline of the path that a user will take from the start to the intended goal. It is a combination of several UX and design processes:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Information architecture<\/b><span style=\"font-weight: 400;\">: chalking out and designing an information model<\/span><\/li>\n\n\n\n<li><b>Interaction design<\/b><span style=\"font-weight: 400;\">: developing a structure and pattern of actions or behaviors for a design and its users<\/span><\/li>\n\n\n\n<li><b>Experience design<\/b><span style=\"font-weight: 400;\">: working out how a design will function across multiple platforms<\/span><\/li>\n<\/ul>\n\n\n<div class=\"bg-leaf-50 p-4 my-3\"><h4 class=\"fw-bold text-center\">Get To Know Other\tDesign Students<\/h4><div class=\"row row-cols-1 row-cols-lg-3\"><div class=\"col\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/megan-bogenschutz\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1680809829\/Student%20Success\/Megan_Bogenschutz_square.jpg\" alt=\"Megan Bogenschutz\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Megan Bogenschutz<\/p><p class=\"text-muted lh-1\">Digital UX Designer at Kroger Technology & Digital<\/p><\/div><div class=\"w-100 d-block d-md-none mt-3\"><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/megan-bogenschutz\">Read Story<\/a><\/p><\/div><\/div><div class=\"col d-none d-md-block\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/teliah-jackson\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1638213299\/Student%20Success\/Teliah_Jackson_125x125.png\" alt=\"Teliah Jackson\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Teliah Jackson<\/p><p class=\"text-muted lh-1\">UX Designer at AAA<\/p><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/teliah-jackson\">Read Story<\/a><\/p><\/div><\/div><div class=\"col d-none d-md-block\"><div class=\"card success-story-card h-100 d-flex justify-content-between mb-0\"><div class=\"flex-grow-1 text-center\"><a class=\"d-inline-block rounded-circle\" href=\"\/success\/josh-abenojar\" style=\"width:125px;height:125px;overflow:hidden\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1671828193\/Student%20Success\/Josh_abenojar.jpg\" alt=\"Josh Abenojar\" style=\"object-fit:contain;max-width:170px;height:125px\" \/><\/a><p class=\"fw-bold mb-0\">Josh Abenojar<\/p><p class=\"text-muted lh-1\">Senior Consultant, User Experience Design at Booz Allen Hamilton at Booz Allen Hamilton<\/p><\/div><p class=\"mb-0 mx-auto text-center\"><a class=\"btn btn-primary mx-auto\" href=\"\/success\/josh-abenojar\">Read Story<\/a><\/p><\/div><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">8. Breadcrumbs<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">If breadcrumbs bring the Grimm Brothers\u2019 famous fairytale of Hansel and Gretel to mind, then you are on the right page. Because the term breadcrumbs in <\/span><span style=\"font-weight: 400;\">design lingo <\/span><span style=\"font-weight: 400;\">is also borrowed from the fairy tale.<\/span><\/p>\n\n\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/help-users-retrace-their-steps-with-breadcrumbs\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Breadcrumbs<\/span><\/a><span style=\"font-weight: 400;\"> are secondary navigation aids that tell users where they are on a website. These allow users to retrace their steps on multilevel websites. Despite their secondary status, breadcrumbs have been in use since 1995, helping make designs user-friendly.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Here is an example:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image9-1-1024x486.jpg\" alt=\"breadcrumbs example\" class=\"wp-image-5915\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">(<a href=\"https:\/\/blog.hubspot.com\/marketing\/navigation-breadcrumbs\" target=\"_blank\" rel=\"noopener\">Source<\/a>.)<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">9. Wireframe<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A&nbsp;<\/span><a href=\"https:\/\/www.experienceux.co.uk\/faqs\/what-is-wireframing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">wireframe<\/span><\/a><span style=\"font-weight: 400;\"> is a skeletal framework of your product, app, or website design. It is a blueprint of the design without any content, images, and interactive elements. The purpose of a wireframe is to lay out the functionality and content of the page, showing where a design element will be present on the screen.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Wireframes are made in the early development phase before a prototype is created to establish a basic structure of the page before any design elements are added to it.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ratio ratio-16x9 my-5\" itemprop=\"video\"><img src=\"https:\/\/img.youtube.com\/vi\/8-vTd7GRk-w\/sddefault.jpg\" class=\"img-fluid\" alt=\"YouTube video player for 8-vTd7GRk-w\" loading=\"lazy\" style=\"object-fit:cover;width:100%;height:100%\" data-yt-facade=\"1\" \/><div class=\"yt-facade\" style=\"position:absolute;z-index:2;background:rgba(0,0,0,0.2)\"><svg fill=\"#fff\" height=\"100%\" viewBox=\"0 0 24 24\" width=\"72\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"><\/path><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z\"><\/path><\/svg><\/div><iframe loading=\"lazy\" title=\"Wireframing for UX: What it is and how to get better at it\" width=\"1170\" height=\"658\" data-yt-src=\"https:\/\/www.youtube.com\/embed\/8-vTd7GRk-w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">10. Prototype<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A&nbsp;<\/span><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-prototype-a-guide-to-functional-ux\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">prototype<\/span><\/a><span style=\"font-weight: 400;\"> is an outline of the proposed final product that is used for testing before launch. Low-level prototypes showcase a bare-bones sketch of how a design will look. High-level prototypes, on the other hand, add more details to the sketch, but aren\u2019t full-design mockups.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ratio ratio-16x9 my-5\" itemprop=\"video\"><img src=\"https:\/\/img.youtube.com\/vi\/SRo9rYMG_HA\/sddefault.jpg\" class=\"img-fluid\" alt=\"YouTube video player for SRo9rYMG_HA\" loading=\"lazy\" style=\"object-fit:cover;width:100%;height:100%\" data-yt-facade=\"1\" \/><div class=\"yt-facade\" style=\"position:absolute;z-index:2;background:rgba(0,0,0,0.2)\"><svg fill=\"#fff\" height=\"100%\" viewBox=\"0 0 24 24\" width=\"72\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"><\/path><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z\"><\/path><\/svg><\/div><iframe loading=\"lazy\" title=\"Rapid Prototyping - What is a wireframe? What is a prototype?\" width=\"1170\" height=\"658\" data-yt-src=\"https:\/\/www.youtube.com\/embed\/SRo9rYMG_HA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">11. Mockup<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A&nbsp;<\/span><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-mockup-the-final-layer-of-ui-design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">mockup<\/span><\/a><span style=\"font-weight: 400;\"> is a realistic representation of how the design will finally look in the end. Bear in mind that a mockup looks exactly like the final product. This means that it is formed after all the revisions to the design have been made.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Here is what a mockup looks like:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image14-1024x768.jpg\" alt=\"mockup example\" class=\"wp-image-5917\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-mockup-the-final-layer-of-ui-design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Source<\/span><\/a>.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">12. A\/B Testing<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.optimonk.com\/a-b-testing\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/www.optimonk.com\/a-b-testing\/\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">A\/B testing<\/span><\/a><span style=\"font-weight: 400;\"> is also referred to as split testing. It is the process that asks users to pick from two versions of your design. The products are presented side by side to a group of users to learn which they like better.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The aim is to test different versions of a product simultaneously to learn about the differences in user preference and behavior between the two. A\/B tests are conducted when a working model of the design has been framed.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Here is a comparison test between two sample pages:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"826\" height=\"487\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image6.png\" alt=\"a\/b testing example\" class=\"wp-image-5919\" srcset=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image6.png 826w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image6-400x236.png 400w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image6-768x453.png 768w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image6-380x224.png 380w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image6-700x413.png 700w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image6-380x224.png 420w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/uxdesign.cc\/a-b-testing-your-designs-b648e413b124\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Source<\/span><\/a>.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">13. Card Sorting<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/theuxreview.co.uk\/card-sorting-beginners-guide\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Card sorting<\/span><\/a><span style=\"font-weight: 400;\"> is a user research method that asks users to arrange information into groups that make sense to them. The card sorting technique allows you to develop an effective, user-friendly sitemap and information architecture. You use pieces of paper, cards, or an online card sorting tool to get started with this research technique.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ratio ratio-16x9 my-5\" itemprop=\"video\"><img src=\"https:\/\/img.youtube.com\/vi\/FTzHeYPB9c8\/sddefault.jpg\" class=\"img-fluid\" alt=\"YouTube video player for FTzHeYPB9c8\" loading=\"lazy\" style=\"object-fit:cover;width:100%;height:100%\" data-yt-facade=\"1\" \/><div class=\"yt-facade\" style=\"position:absolute;z-index:2;background:rgba(0,0,0,0.2)\"><svg fill=\"#fff\" height=\"100%\" viewBox=\"0 0 24 24\" width=\"72\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"><\/path><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z\"><\/path><\/svg><\/div><iframe loading=\"lazy\" title=\"Card Sorting Technique - Planning a website\" width=\"1170\" height=\"658\" data-yt-src=\"https:\/\/www.youtube.com\/embed\/FTzHeYPB9c8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">14. Data-Driven Design<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Design that is backed by data and helps understand the target audience better is known as&nbsp;<\/span><a href=\"https:\/\/www.springboard.com\/blog\/design\/data-driven-design\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.springboard.com\/blog\/design\/data-driven-design\/\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">data-driven design<\/span><\/a><span style=\"font-weight: 400;\">. Data helps prove, reveal, and improve your design. It proves that your work is on the right track, it reveals the users\u2019 pain points and opportunities while unearthing new trends, and it improves your designs by adding objectivity to them.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image1-1-1024x679.jpg\" alt=\"data-driven design example\" class=\"wp-image-5921\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/www.pexels.com\/photo\/person-writing-on-notebook-669615\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Source<\/span><\/a>.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">15. Flat Design<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/flat-design\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Flat design<\/span><\/a><span style=\"font-weight: 400;\"> is a UI design style that focuses on employing simple, two-dimensional elements with bright colors. Nick Babich of UX Planet&nbsp;<\/span><a href=\"https:\/\/uxplanet.org\/best-practices-for-flat-design-6e7a6997805\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">calls flat design<\/span><\/a><span style=\"font-weight: 400;\"> a \u201cmore sophisticated cousin of minimalism\u201d as all the UI elements are based on simplicity.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Dropbox\u2019s website gives a good example of flat design, with the UI elements observing minimalism to shine a spotlight on the page\u2019s content:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image8-1024x522.jpg\" alt=\"flat design example\" class=\"wp-image-5922\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">(<a href=\"https:\/\/uxplanet.org\/best-practices-for-flat-design-6e7a6997805\" target=\"_blank\" rel=\"noopener\">Source<\/a>.)<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">16. Interaction Design<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.usability.gov\/what-and-why\/interaction-design.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Interaction design<\/span><\/a><span style=\"font-weight: 400;\"> is a type of web design that is centered around creating an engaging interface with logical actions and behaviors. Successful interaction design is based on the use of technology and a clear understanding of good communication to create the desired user experience.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ratio ratio-16x9 my-5\" itemprop=\"video\"><img src=\"https:\/\/img.youtube.com\/vi\/KWtWqbJSP5E\/sddefault.jpg\" class=\"img-fluid\" alt=\"YouTube video player for KWtWqbJSP5E\" loading=\"lazy\" style=\"object-fit:cover;width:100%;height:100%\" data-yt-facade=\"1\" \/><div class=\"yt-facade\" style=\"position:absolute;z-index:2;background:rgba(0,0,0,0.2)\"><svg fill=\"#fff\" height=\"100%\" viewBox=\"0 0 24 24\" width=\"72\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"><\/path><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z\"><\/path><\/svg><\/div><iframe loading=\"lazy\" title=\"What is Interaction Design\" width=\"1170\" height=\"658\" data-yt-src=\"https:\/\/www.youtube.com\/embed\/KWtWqbJSP5E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">17. Iterative Design<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/design-iteration\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Iterative design<\/span><\/a><span style=\"font-weight: 400;\"> is a design methodology that is not limited by a clear start or stop. Instead, it is a cyclical method of design that involves prototyping, planning, implementing, testing, and then repeating the process. Based on the results of the tests, changes are made to prepare a design that suits users the best.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ratio ratio-16x9 my-5\" itemprop=\"video\"><img src=\"https:\/\/img.youtube.com\/vi\/GyuE47Hv60k\/sddefault.jpg\" class=\"img-fluid\" alt=\"YouTube video player for GyuE47Hv60k\" loading=\"lazy\" style=\"object-fit:cover;width:100%;height:100%\" data-yt-facade=\"1\" \/><div class=\"yt-facade\" style=\"position:absolute;z-index:2;background:rgba(0,0,0,0.2)\"><svg fill=\"#fff\" height=\"100%\" viewBox=\"0 0 24 24\" width=\"72\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"><\/path><path d=\"M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z\"><\/path><\/svg><\/div><iframe loading=\"lazy\" title=\"Iterative Design\" width=\"1170\" height=\"658\" data-yt-src=\"https:\/\/www.youtube.com\/embed\/GyuE47Hv60k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">18. Mood board<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A&nbsp;<\/span><a href=\"https:\/\/uxplanet.org\/design-mood-7-motives-to-create-mood-boards-b81ae36e399f\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">mood board<\/span><\/a><span style=\"font-weight: 400;\"> is a collection of materials and assets that help define the specific style for a product (such as a website or an app) using images, text, colors, and other branding elements. It gives an insight into the voice, direction, language, and style of a particular project, design, or brand. Unlike most other step-wise data collection methods, a mood board is free-flowing by nature.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"698\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image4-1.jpg\" alt=\"mood board example\" class=\"wp-image-5925\" srcset=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image4-1.jpg 1000w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image4-1-400x279.jpg 400w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image4-1-768x536.jpg 768w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image4-1-380x265.jpg 380w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image4-1-700x489.jpg 700w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image4-1-380x265.jpg 420w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">(<a href=\"https:\/\/uxplanet.org\/design-mood-7-motives-to-create-mood-boards-b81ae36e399f\" target=\"_blank\" rel=\"noopener\">Source<\/a>.)<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">19. Storyboard<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A storyboard is a rough sketch of a scenario. A storyboard captures a UX designer\u2019s vision of what a design will look like. The Nielsen Norman Group&nbsp;<\/span><a href=\"https:\/\/www.nngroup.com\/articles\/storyboards-visualize-ideas\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">highlights<\/span><\/a><span style=\"font-weight: 400;\"> that a storyboard communicates a story via sequenced images that are arranged chronologically to narrate a story\u2019s main events.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Here is a look at a storyboard that covers a daily life scenario in which a product is used:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image5-2-1024x663.png\" alt=\"storyboard example\" class=\"wp-image-5926\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">(<a href=\"https:\/\/uxstudioteam.com\/ux-blog\/ux-storyboard\/\" target=\"_blank\" rel=\"noopener\">Source<\/a>.)<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">20. User Journey<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A&nbsp;<\/span><a href=\"https:\/\/theuxreview.co.uk\/user-journeys-beginners-guide\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">user journey<\/span><\/a><span style=\"font-weight: 400;\"> is a chain of steps established by a UX designer to demonstrate where site visitors enter and how they interact with a design. A user journey is also referred to as UX flow. It is established for two chief purposes. First, user journeys trace steps users are currently taking when interacting with a service, design, or product. Second, user journeys establish a flow that visitors could follow when interacting with a design, product, or service.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=KdxZFUwliC0\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">21. Usability Test<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Usability among <\/span><span style=\"font-weight: 400;\">UX design terms<\/span><span style=\"font-weight: 400;\"> refers to the ease of navigating through a design. So,&nbsp;<\/span><a href=\"https:\/\/www.experienceux.co.uk\/faqs\/what-is-usability-testing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">usability testing<\/span><\/a><span style=\"font-weight: 400;\">&nbsp;asks users to complete tasks while a researcher observes them to learn about any problems or confusion encountered when interacting with the design.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image10-1-1024x659.png\" alt=\"usability test example\" class=\"wp-image-5928\"\/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/uxdesign.cc\/usability-testing-what-is-it-how-to-do-it-51356e5de5d\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Source<\/span><\/a>.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">22. Eye Tracking<\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.justinmind.com\/blog\/uxers-quick-guide-to-eye-tracking\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Eye tracking<\/span><\/a><span style=\"font-weight: 400;\"> is gaining a lot of prominence as a research technique. As its name suggests, the method employs tools to track eye movements of the users to learn where they look at a design, website, or any other visual data. It sheds light on which visuals attract the greatest user attention.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"520\" height=\"390\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image2.jpg\" alt=\"eye tracking example\" class=\"wp-image-5929\" srcset=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image2.jpg 520w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image2-400x300.jpg 400w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image2-380x285.jpg 380w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image2-380x285.jpg 420w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">(<a href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/eye-tracking.html\" target=\"_blank\" rel=\"noopener\">Source<\/a>.)<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">23. KPIs<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">KPIs stand for&nbsp;<\/span><a href=\"https:\/\/uxdesign.cc\/why-designers-should-focus-on-kpis-3cd1db4b7d3f\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">key performance indicators<\/span><\/a><span style=\"font-weight: 400;\">. These study the trends prevailing over a duration, usability patterns, and sketch comparisons with competitors as well. The end result is to gather data on how well the users are interacting with a design and whether or not it succeeded in fulfilling the designer\u2019s expectations.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">24. Conversion Rate<\/span><\/h3>\n\n\n\n<p>A <a href=\"https:\/\/www.nngroup.com\/articles\/conversion-rates\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">conversion rate<\/span><\/a><span style=\"font-weight: 400;\"> is the percentage of users who take the desired action. Essentially, the conversion rate shows how effective your design is in convincing people to take action. A classic example is that of an e-commerce website that converts its site visitors into paying customers, as pictured below. The task of improving this conversion rate is known as conversion rate optimization.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"350\" src=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image12.jpg\" alt=\"conversion rate example\" class=\"wp-image-5930\" srcset=\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image12.jpg 480w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image12-400x292.jpg 400w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image12-380x277.jpg 380w, https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2019\/01\/image12-380x277.jpg 420w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p>(<a href=\"https:\/\/conversion-rate-experts.com\/cro-tips\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Source<\/span><\/a>.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">25. Widget<\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A widget is an on-screen element that users interact with. For example: social media icons, sliders, buttons, and contact forms, to name a few.<\/span><\/p>\n\n\n\n<p class=\"rm has-background\" style=\"background-color:#efeff6\"><strong>Since you&#8217;re here<br><\/strong>If you want to work in design, you can. It\u2019s that simple. With our <a href=\"https:\/\/www.springboard.com\/courses\/ux-career-track\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX Bootcamp<\/a>, we&#8217;ll help you launch your design career in 9 months or less. Browse our <a href=\"https:\/\/www.springboard.com\/resources\/guides\/ux-design-salaries\/\" target=\"_blank\" rel=\"noreferrer noopener\">free UX salary guide<\/a> to see what you could be making<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A software engineer is very familiar with petabytes and XML. Similarly, a doctor is well aware of systolic pressure and the aorta. That\u2019s because these terms belong to their line of work and are frequently tossed around like plain English. UX design is no different. It brings UX terms to the table, ones that you [&hellip;]<\/p>\n","protected":false},"author":58,"featured_media":5933,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_eb_data_table":"","footnotes":""},"categories":[123],"tags":[],"marketing_tags":[],"class_list":{"0":"post-5909","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/5909"}],"collection":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/comments?post=5909"}],"version-history":[{"count":4,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/5909\/revisions"}],"predecessor-version":[{"id":53806,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/5909\/revisions\/53806"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media\/5933"}],"wp:attachment":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media?parent=5909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/categories?post=5909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/tags?post=5909"},{"taxonomy":"marketing_tags","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/marketing_tags?post=5909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}