{"id":38465,"date":"2023-01-05T07:29:29","date_gmt":"2023-01-05T15:29:29","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=38465"},"modified":"2023-01-10T09:48:57","modified_gmt":"2023-01-10T17:48:57","slug":"ui-terms","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/","title":{"rendered":"13 UI Terms \u2013 A Cheat Sheet for Product Designers"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term-1024x512.png\" alt=\"ui term\" class=\"wp-image-38466\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Entering the UI\/UX world is an exciting endeavor for anyone new to the world of design. However, it comes with a few challenges \u2014 one being, that there is a whole different language you must wrap your head around. It\u2019s safe to say that some UI terminology is not common knowledge for the everyday person.<\/p>\n\n\n\n<p>Basic concepts can be learned through immersion in the industry, but the more technical language will not come so easily. This means that you must familiarize yourself with it to effectively communicate with designers and developers.<\/p>\n\n\n\n<p>To help you avoid confusion during the design process and to better communicate with co-workers, it is best to become \u201cfluent\u201d in UI terminology. Here\u2019s a list that will certainly come in handy.<\/p>\n\n\n\n<p>Ready to build a prototype and use UI terms in practice? Use UXPin, an advanced end-to-end design tool for building interactive prototypes of digital interfaces. <a href=\"https:\/\/uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try it for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-13-ui-terms-you-should-be-familiar-with\">13 UI Terms You Should Be Familiar With<\/h2>\n\n\n\n<p>To make it simpler, we have divided the UI design terminology into two main categories\u2014Verbs (Actions Terms) and Nouns (Identifier Terms).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ui-terms-verbs-actions-terms\">UI Terms &#8211; Verbs (Actions Terms)<\/h3>\n\n\n\n<p><strong>Click \/ Tap<\/strong> \u2013 An act of tapping, clicking, touching, pressing, and releasing a mouse or screen button. Typically, for touchscreen interfaces, the term \u201ctap\u201d or sometimes even \u201ctouch\u201d is used to represent the action. Conversely, the term \u201cclick\u201d or \u201cpress\u201d is used in reference to a physical button. A lesser-known term that is sometimes used is \u201clong tap.\u201d This term should not be used in the general public but is appropriate to use, for example, in a software specification meant for a UI developer.<\/p>\n\n\n\n<p><strong>Press <\/strong>\u2013 An act of pressing a physical button on a user keyboard such as the \u201cTab\u201d or \u201cPower\u201d button. While it may seem simple, it contains a series of actions to complete. First, the user needs to know that the button exists and whether or not it should be pressed. If pressed, a specific reaction should occur from the system, and that reaction should be associated in the user\u2019s mind with the button. On top of that, it is very rare to have a one-button system which means that there need to be different \u201clevels\u201d of actions that the pressed button can perform.<\/p>\n\n\n\n<p><strong>Type <\/strong>\u2013 An act of pressing a key with the intent to type text into the UI. \u201cType\u201d refers to the appearance of the text (i.e. style, size, color, etc.), and the process of designing\/creating text that is appropriate, legible, and appealing to enhance user experience. Designers are responsible for choosing typefaces, alignment and spacing specifications, and ordering the text in a hierarchy to effectively convey the message of the text.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/jbOuEPqYTGhXMZuDULAr6mM6ZS7GkUOW-EgbN8UROxPIgCRAiAo0glQ4Oqvf5np4Q4sCr3h3FziTcejmY2KTWDBbdkVrBrYIV9akZ-BGiSokK1nQEmMJz-hz-0TtDIaTzOaCkI1uB3TJT5pYmoQbc1IJV__9E2DdE4-icjOm89rCSzXL86ykW-yqYWYw4IAD\" alt=\"Type is one of the more useful UI terms, referring to the type of text in the UI\"\/><\/figure>\n\n\n\n<p><strong>Swipe <\/strong>\u2013 An act of performing a \u201cswipe\u201d motion that usually involves moving a finger across a touch screen.<\/p>\n\n\n\n<p><strong>Hold <\/strong>\u2013 An act of clicking, tapping, or pressing a button without releasing it. In other words, it involves pressing and holding down a button and can be used to describe an action in relation to either mechanical or touch screen buttons.<\/p>\n\n\n\n<p>While these actions may seem simple, they should not be used interchangeably as they describe a very specific interaction. They are especially useful when creating an interactive prototype. <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#adding-interactions\">UXPin<\/a>, for example, is a prototyping tool that allows designers to create a prototype by adding element triggers. These triggers will set off a specific action when activated by the user. There are also canvas triggers that can change the canvas state when activated.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ui-terms-nouns-identifier-terms\">UI Terms &#8211; Nouns (Identifier Terms)<\/h3>\n\n\n\n<p><strong>Field <\/strong>\u2013 An area in the Web User Interface (WUI) or Graphical User Interface (GUI) where the user can enter information. Otherwise known as \u201cinput fields,\u201d these fields allow users to input personal\/non-standardized information and are often used when personal details are needed from the user such as addresses, names, or answers to questionnaire forms. Utilizing fields will allow for an enhanced experience that helps create a better interaction between the interface and the user.<\/p>\n\n\n\n<p><strong>Dialogue <\/strong>\u2013 A pop-up that creates a \u201cconversation\u201d between the user and the interface. It can appear before or after an action and typically asks the user for some type of response whether that be through imputing information or completing an action. Dialogues can be used in many ways such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When there is promotional or some other type of information that you want to show the user without redirecting them to a different page.<\/li>\n\n\n\n<li>When there is important information that the user needs to see.<\/li>\n\n\n\n<li>When there is information that the user needs to input to continue.<\/li>\n\n\n\n<li>When there is information that is not necessarily related to the current page but can provide useful information or updates.<\/li>\n<\/ul>\n\n\n\n<p>There are three main types of dialogues which include:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Confirm Dialogue: <\/strong>Ideal for situations in which a user may automatically agree to a warning or disclaimer without reading it or realizing the possible consequences.<\/li>\n\n\n\n<li><strong>Forced Interaction Dialogue: <\/strong>Should be implemented when an action is needed from the user to continue.<\/li>\n\n\n\n<li><strong>Detailed View Dialogue: <\/strong>Best when used to display detailed information about an object on the page.<\/li>\n<\/ol>\n\n\n\n<p><strong>Panel <\/strong>\u2013 Some form of panel typically in the form of a control panel or toolbar. For example, a UI panel contains widgets that can be chosen and implemented. Panels can also act as a hub or list of all available widgets that can be used and arranged.<\/p>\n\n\n\n<p><strong>Pane <\/strong>\u2013 A section of a window within the WUI or GUI that contains and provides the user with access to additional features and\/or additional information. Well-known examples of a pane are the \u201cPreview\u201d pane and the \u201cExplorer\u201d pane. As displayed in the picture below, the \u201cExplorer\u201d pane on the left displays additional folders and drives such as \u201cDocuments\u201d that can be accessed with the left pane displaying specific contents of the selected drive\u2014the \u201cPrimary Drive.\u201d&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/ik1lT4uSpHEE2Y_1unpuJ7BULVGetYrGP7G8SecV044xTfqFm6P_wH2yybe5ZCiK9kQKS-V_o-bYfhtet9P4DMDk75VhKTSZOZMPH7xJlVUNfP1A7FyCsFPpHw7VF4M2q1iraJZoH1aGdjtW-4hs_B0CY2gpMkKoA22OnEmxbO4nvvf7WrNIgI512sU3lTGej-bjtF5GUg\" alt=\"Pane is a UI term often used for sections of windows, like &quot;explorer&quot; and &quot;preview&quot;\"\/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/www.computerhope.com\/jargon\/p\/pane.htm\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Computer Hope<\/a><\/figcaption><\/figure>\n\n\n\n<p><strong>Button <\/strong>\u2013 A web or graphical element that performs an action once clicked on. Buttons are a simple way to allow users to perform actions of their choosing simply by clicking on the desired button\/action. Buttons are commonplace on web pages and are meant to create a more streamlined experience. As such, it is critical to clearly identify each button with the action that it will execute if pressed. They are also meant to fit within the style of each interface and can therefore come in many forms and sizes. Though they may seem simple on the surface, a considerable amount of time is needed to create, position, and map out what a button will do and how it will blend into the site\u2019s design. All while still being noticeable when needed.<\/p>\n\n\n\n<p><strong>Icon <\/strong>\u2013 An image that represents a certain function, idea, or direction. Icons are meant to replace words while still conveying the same meaning in a simpler and more direct form. An example of an icon is a picture of a lock that is meant to represent that a certain function or feature is locked and cannot be accessed by the user. Another one is the ubiquitous magnifying glass for search. Icons are often used on buttons to succinctly communicate the function of the button. Oftentimes, icons are divided up into categories based on interactions, themes, style, etc., and commonly represent real-life objects.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/hXUchh4RRPYSXKpiEquBVNm7H5k4ZciO_8bLlTfWGgfMI_zfluLTocvU_BY3OJEbV96PVoMe6kvTzsLfgXmkuN9ZfOAlala-Uy8X064ECj_sWkk2rUIsiW4N20LXFV1xi8t6OHH6YrMxjdILeecPdyn7st0sFmuHBejwlJve5FUa0NRptj-vuPSDHaGxKz7F\" alt=\" The UI term &quot;icon&quot; describes an image that represents an action or user goal\"\/><\/figure>\n\n\n\n<p><strong>Tab <\/strong>\u2013 A navigation and divider tool similar to tabs in a filing cabinet or binder. Tabs will often separate different parts of a page or whole pages. Users can interact and organize tabs as well as click on them to \u201ctravel\u201d to a specific location. Tabs are usually not used for smaller pages but can be a great tool to divide up and organize larger pages. A common example of tabs being used is on a more global level such as when opening up multiple website pages in a browser\u2014each website page is represented on a tab at the top of the web browser.&nbsp;<\/p>\n\n\n\n<p><strong>Wizard <\/strong>\u2013 A guide or setup assistant that helps the user fulfill a series of actions that are necessary to complete a task. Instead of giving the user all the information and a list of needed actions that need to be completed, a wizard will often simplify the process by dividing up a series of tasks into smaller and related portions. One of the more popular examples of a wizard is the classic e-commerce checkout process. There are often four tasks that need to be completed to buy a product:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Choose to Buy an Item in the Shopping Cart<\/li>\n\n\n\n<li>Enter Delivery Details<\/li>\n\n\n\n<li>Enter Payment Information<\/li>\n\n\n\n<li>Preview and Confirm the Order<\/li>\n<\/ol>\n\n\n\n<p>By dividing the series of actions that need to be completed into easily understandable, manageable, and logical parts, the user is able to more easily complete a task.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/c8m77nlVTg3m4m-eP9lFIeqP_rrFG2tKvpEAzh4Uz34jVT9w2iwDrVoNWYC9I66_R6KZmR1RenReJ96gwwKW1239GtwldxOjXTojWGZw8lc02RsJwjYu24mYqTRPdD_HYzr2KP8PPuT13nAR98z4l26HEEy7ONs8TwDx2zxxe4iE7JlWwu9SK4jLuY5YGnmRPFU9HADOYA\" alt=\"Knowing what a &quot;wizard&quot; is \u2013 one of the UI terms you should know\" width=\"450\"\/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/uxdesign.cc\/the-wizard-of-user-experience-6926ca41bc9a\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">UXDesign.cc<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-do-you-need-to-know-ui-design-terminology\">Why Do You Need to Know UI Design Terminology?&nbsp;<\/h2>\n\n\n\n<p>When working in UI, a whole new world of communicating becomes apparent. Buzzwords, jargon, and other niche words in the industry are used throughout the entire design process. It is critical to understand this \u201clanguage\u201d so as to more accurately communicate with colleagues and to better understand the design process. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/5ePFDiXWyjUoyMQeg3E5iJbvCWbt8-v63akEs39Qo3EIhBNOd9YSWL-7pzW_3dPrB4ny8fkBEDTjoXuwTUIzS8vK_4i5EPyzKQCafdrPOP1_zs-JK_DjyoulEQILw9fgB2__xI-S1wLWvar4PRbrqIqRSoWCfsvjVApANjo0muT9HaHipTwqoPFsFqD5I6wo\" alt=\"Knowing UI design terminology helps in designer-developer communication\"\/><\/figure>\n\n\n\n<p>Some other ways that understanding UI terminology can be of benefit are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UI terms help colleagues, project managers, and even developers understand how the product should function and behave.<\/li>\n\n\n\n<li>Developers are there to bring the designs to life and use well-defined terminology as a guide on how to more accurately develop the design.<\/li>\n\n\n\n<li>UI terms help with organizing design files and knowing what each file is meant for.<\/li>\n<\/ul>\n\n\n\n<p>The design hand-off process can be difficult and can result in a lot of confusion if not done right. However, by using proper UI terms, you can help avoid some of the confusion during the handoff and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/product-development-and-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">product development<\/a> process.<\/p>\n\n\n\n<p>In the long run, understanding and using UI design terminology will help streamline the design and development process, reduce confusion, and serve for more precise communication.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-start-building-your-first-prototype\">Start Building Your First Prototype<\/h2>\n\n\n\n<p>Knowing UI terms will help when it comes to creating an interactive prototype. UXPin is the ideal tool to use when creating interactive prototypes.&nbsp;<\/p>\n\n\n\n<p>It is a component-driven platform that helps you maintain UI consistency while bringing the design to life. This can result in smoother development and faster product releases.<\/p>\n\n\n\n<p>UXPin can be used to make interactive prototypes of apps, websites, and more. It is used by designers to create a design that behaves like an end product. As a result, designers can show stakeholders and developers not only what the solution will look like, but also present the behavior which leads to better communication and limits misunderstandings. Experience prototyping in UXPin. <a href=\"https:\/\/uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Start a free trial<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Entering the UI\/UX world is an exciting endeavor for anyone new to the world of design. However, it comes with a few challenges \u2014 one being, that there is a whole different language you must wrap your head around. It\u2019s safe to say that some UI terminology is not common knowledge for the everyday person.<\/p>\n","protected":false},"author":3,"featured_media":38466,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-38465","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design"],"yoast_title":"","yoast_metadesc":"Get a list of basic UI terms that every designer uses daily. Treat is as a cheatsheet for you and other designers. Enjoy!","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>13 UI Terms \u2013 A Cheat Sheet for Product Designers | UXPin<\/title>\n<meta name=\"description\" content=\"Get a list of basic UI terms that every designer uses daily. Treat is as a cheatsheet for you and other designers. Enjoy!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"13 UI Terms \u2013 A Cheat Sheet for Product Designers\" \/>\n<meta property=\"og:description\" content=\"Get a list of basic UI terms that every designer uses daily. Treat is as a cheatsheet for you and other designers. Enjoy!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-05T15:29:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-10T17:48:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"13 UI Terms \u2013 A Cheat Sheet for Product Designers\",\"datePublished\":\"2023-01-05T15:29:29+00:00\",\"dateModified\":\"2023-01-10T17:48:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/\"},\"wordCount\":1779,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/ui-term.png\",\"articleSection\":[\"Blog\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/\",\"name\":\"13 UI Terms \u2013 A Cheat Sheet for Product Designers | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/ui-term.png\",\"datePublished\":\"2023-01-05T15:29:29+00:00\",\"dateModified\":\"2023-01-10T17:48:57+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Get a list of basic UI terms that every designer uses daily. Treat is as a cheatsheet for you and other designers. Enjoy!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/ui-term.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/ui-term.png\",\"width\":1200,\"height\":600,\"caption\":\"ui term\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-terms\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"13 UI Terms \u2013 A Cheat Sheet for Product Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"13 UI Terms \u2013 A Cheat Sheet for Product Designers | UXPin","description":"Get a list of basic UI terms that every designer uses daily. Treat is as a cheatsheet for you and other designers. Enjoy!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/","og_locale":"en_US","og_type":"article","og_title":"13 UI Terms \u2013 A Cheat Sheet for Product Designers","og_description":"Get a list of basic UI terms that every designer uses daily. Treat is as a cheatsheet for you and other designers. Enjoy!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/","og_site_name":"Studio by UXPin","article_published_time":"2023-01-05T15:29:29+00:00","article_modified_time":"2023-01-10T17:48:57+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"13 UI Terms \u2013 A Cheat Sheet for Product Designers","datePublished":"2023-01-05T15:29:29+00:00","dateModified":"2023-01-10T17:48:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/"},"wordCount":1779,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term.png","articleSection":["Blog","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/","name":"13 UI Terms \u2013 A Cheat Sheet for Product Designers | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term.png","datePublished":"2023-01-05T15:29:29+00:00","dateModified":"2023-01-10T17:48:57+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Get a list of basic UI terms that every designer uses daily. Treat is as a cheatsheet for you and other designers. Enjoy!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/01\/ui-term.png","width":1200,"height":600,"caption":"ui term"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-terms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"13 UI Terms \u2013 A Cheat Sheet for Product Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/38465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=38465"}],"version-history":[{"count":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/38465\/revisions"}],"predecessor-version":[{"id":38469,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/38465\/revisions\/38469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/38466"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=38465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=38465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=38465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}