{"id":1395,"date":"2016-03-22T19:13:58","date_gmt":"2016-03-22T16:13:58","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=1395"},"modified":"2023-08-17T13:56:07","modified_gmt":"2023-08-17T13:56:07","slug":"uiux-design-glossary-steps-to-usability","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/","title":{"rendered":"UI\/UX Design Glossary. Steps to Usability"},"content":{"rendered":"<p><span style=\"color: #333333;\">Practice shows that structured data is a great way to work optimization and that is one of the reasons why old good stuff like phone directories, dictionaries, vocabularies and glossaries, databases, and sets of formulas are still applicable and convenient for everyday use. Order and organization make it easy and fast to find everything needed. And today we decided to take a step to this sort of optimization and provide the first set of definitions for some basic terms in the field of UI\/UX design.<\/span><\/p>\n<p><span style=\"color: #333333;\"> No doubt, today there are many various publications and online resources providing helpful and informative support for designers and explaining the necessary terms. In our previous articles, we also get involved in this global process while describing practical cases of design. Today we would like to systematize some of the explanations here concentrating on UI\/UX design issues enhancing usability and support the definitions with links to the articles where we gave more details on the topic. So, let&#8217;s move on!<\/span><\/p>\n<h2><span style=\"color: #333333;\">UX (User Experience)<\/span><\/h2>\n<p><span style=\"color: #333333;\">It is the general attitude and emotional feedback that the user has on different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, the speed of work, etc. If all the logic and possible issues of product implementation into real life are analyzed and designed properly, it forms a positive user experience which means that users are able to satisfy their needs in a fast, easy, and pleasant way. Positive user experience is one of the strongest factors of retaining users.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"4 Principles of Good UX\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/MVzPX866bFE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2><span style=\"color: #333333;\">UX Wireframing<\/span><\/h2>\n<p><span style=\"color: #333333;\">It is the process of creating a general structure of the designed application or website. It&#8217;s usually accomplished via the set of schematic screens or pages of a low or middle level of fidelity. The aim of this stage is to set a clear and orderly structure of all the layout, transitions, and interactions on the basis of the user&#8217;s problems and pains that the product is going to solve.<\/span><\/p>\n<p><span style=\"color: #333333;\">In one of <a href=\"https:\/\/blog.tubikstudio.com\/design-faq-platform-customers-set-two\/\" target=\"_blank\" rel=\"noopener noreferrer\">our previous articles<\/a>, we provided a bit of metaphor on that. When we think about building the house, for example, we usually mean the process of the physical appearance of the construction rather than tons of projects, drawings, and calculations made on paper. And yes, physically it\u2019s possible to build the house without any project as well as it\u2019s possible to create the interface out of thin air. However, in this case, you shouldn\u2019t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won\u2019t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application or a highly-functional website, the recipe is the same \u2013 take your time for thorough planning and projecting. This is not going to waste your time, vice versa, it will save your time you would otherwise have to spend on the redesign and attempts to find out why your product doesn\u2019t work properly.<\/span><\/p>\n<p><span style=\"color: #333333;\">That is the aim of the UX part of the design process. <a href=\"https:\/\/blog.tubikstudio.com\/ux-wireframing-bedrock-of-interface-usability\/\">UX wireframing<\/a> stage should be heavily based on user research, competition research and analysis of all the data obtained. In the outcome, it creates a clear scheme whose complexity depends on the product functionality and reflects all the system of transitions and interactions as well as placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing the design process and increasing performance.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9159\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/Tubik-Studio-designer-UX-screens.jpg\" alt=\"Tubik Studio designer UX screens\" width=\"720\" height=\"720\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/Tubik-Studio-designer-UX-screens.jpg 720w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/Tubik-Studio-designer-UX-screens-150x150.jpg 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/Tubik-Studio-designer-UX-screens-300x300.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><em>Read more on this topic in <a href=\"https:\/\/blog.tubikstudio.com\/design-faq-platform-customers-set-two\/\" target=\"_blank\" rel=\"noopener noreferrer\">our previous article<\/a><\/em><\/p>\n<h2><span style=\"color: #333333;\">UI (User Interface)<\/span><\/h2>\n<p><span style=\"color: #333333;\">User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools for increasing usability and satisfying target users&#8217; needs and wishes. All the features of visual perception, as well as sound and tactile feelings, influencing the product use and interaction with it should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as <a href=\"https:\/\/blog.tubikstudio.com\/design-glossary-color-terms-and-definitions\/\">color palette<\/a>, <a href=\"https:\/\/blog.tubikstudio.com\/typography-in-ui-guide-for-beginners\/\">types and fonts<\/a>, <a href=\"https:\/\/blog.tubikstudio.com\/knock-design-into-shape-psychology-of-shapes\/\">shapes<\/a> and forms, <a href=\"https:\/\/blog.tubikstudio.com\/big-reasons-to-apply-illustrations-in-ui-design\/\">illustration<\/a> and <a href=\"https:\/\/blog.tubikstudio.com\/ui-animation-eye-pleasing-problem-solving\/\">animation<\/a>, and so on and so forth are able to affect the performance of the final product greatly in both positive and negative ways.<\/span><\/p>\n<p><span style=\"color: #333333;\">In general terms, the <a href=\"https:\/\/blog.tubikstudio.com\/user-research-empathy-is-the-best-ux-policy\/\">UX research<\/a> and wireframing stage are about how the website or application works while UI is how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections, and user behavior while the UI stage provides the visual representation of all the concept. It means that ideally, the designer should first work on the UX part with the concentration on a layout, making it more powerful, thought-out, clear, and <a href=\"https:\/\/blog.tubikstudio.com\/take-it-easy-tips-for-effort-saving-user-interfaces\/\">easy to use<\/a>. Without this vital work, you highly risk creating a pure mess out of the user interface.<\/span><\/p>\n<p>After the UX part is tested by a prototype, agreed upon and the concept of layout, transitions, and features are accepted, the designer starts the UI design part. This is the time when a newborn heart and brain of your product is clothed with its skin and bones. Here the product gets its real color scheme, forms, and features of the layout details, styles, animated elements, and so on.<\/p>\n<p><span style=\"color: #333333;\">All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work on the other.<\/span><\/p>\n<p>Here are some fresh UI design examples for different types of products from the Tubik Studio portfolio on <a href=\"https:\/\/dribbble.com\/Tubik\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Dribbble<\/a>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8842\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubik-studio-web-ui-design.gif\" alt=\"tubik studio web ui design\" width=\"800\" height=\"600\" \/><\/p>\n<p><em>Birds of Paradise Encyclopedia<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8650\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/home-page-landing-design-tubikstudio.png\" alt=\"home page landing design tubikstudio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/home-page-landing-design-tubikstudio.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/home-page-landing-design-tubikstudio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/home-page-landing-design-tubikstudio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/home-page-landing-design-tubikstudio-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><em>Comics Shop Home Page<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8943\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/tubik-illustration-interface.png\" alt=\"tubik illustration interface\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/tubik-illustration-interface.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/tubik-illustration-interface-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/tubik-illustration-interface-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/tubik-illustration-interface-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><em>Simple Blog App\u00a0<\/em><\/p>\n<p><em>Read more on this topic in <a href=\"https:\/\/blog.tubikstudio.com\/faq-platform-%d1%81ustomers-set-one\/\" target=\"_blank\" rel=\"noopener noreferrer\">our previous article<\/a><\/em><\/p>\n<h2><span style=\"color: #333333;\">Prototyping<\/span><\/h2>\n<p><span style=\"color: #333333;\">The original concept behind the term \u2018prototype\u2019 is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analog of the final product as they aren\u2019t those. Their main aim is to enable a designer, a customer, and a user to check the correctness and appropriateness of the design solutions.<\/span><\/p>\n<p><span style=\"color: #333333;\">The value of prototypes in the sphere of the app and web design has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn\u2019t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, a prototype will be a great help.<\/span><\/p>\n<p><span style=\"color: #333333;\">Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka \u201cUI in action\u201d, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX \u2013 prototype \u2013 UI.<\/span><\/p>\n<p><span style=\"color: #333333;\">The prototypes on the UI stage are created more for the presentation of application general looks than for testing and improving its functional features. And this is the trap in which it is easier to be confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solutions after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"Finance app interactions tubik\" src=\"https:\/\/player.vimeo.com\/video\/495407163?h=0766135711&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/p>\n<p><em>Finance tracker app prototype<\/em><\/p>\n<p><em>Read more on this topic in <a href=\"https:\/\/blog.tubikstudio.com\/prototyping-ux-design-pixate\/\" target=\"_blank\" rel=\"noopener noreferrer\">our previous article<\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Icon<\/span><\/h2>\n<p><span style=\"color: #333333;\"> An app or desktop icon is an image that having a kind of symbolic and metaphoric potential that becomes the element of <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigation<\/a> in the process of interaction. In a deeper explanation, an icon is a visual symbol representing some action, thing, person, real or virtual.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10714\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icons-in-ui-tubikstudio-1-1.png\" alt=\"icons in ui tubikstudio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icons-in-ui-tubikstudio-1-1.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icons-in-ui-tubikstudio-1-1-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icons-in-ui-tubikstudio-1-1-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icons-in-ui-tubikstudio-1-1-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage therefore making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have problems with copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style, and having their own character.<\/span><\/p>\n<p><em>Read more on this topic in <a href=\"https:\/\/blog.tubikstudio.com\/iconic-simplicity-the-vital-role-of-icons\/\" target=\"_blank\" rel=\"noopener noreferrer\">our previous article<\/a><\/em><\/p>\n<h2><span style=\"color: #333333;\">Microinteraction<\/span><\/h2>\n<p><span style=\"color: #333333;\">Microinteraction is one particular case of a user\u2019s interaction with the product completing one particular task. For example, when you press the \u201clike\u201d button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the <a href=\"https:\/\/blog.tubikstudio.com\/ui-design-basic-types-of-buttons-in-user-interfaces\/\">button<\/a> or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the <a href=\"https:\/\/blog.tubikstudio.com\/how-to-design-search\/\">search<\/a> request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone in a social network, rate the blog post, or set the timer \u2013 hundreds of things we do, in most cases not willing to think over those simple steps too much. Microinteractions in most cases aren\u2019t even consciously fixed by the user \u2013 and that is actually one of the important tasks for a designer to make them as natural, clear, and fast as possible.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7830\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/tubik_studio_buonapp-ui-design.gif\" alt=\"tubikstudio buonapp food ui design\" width=\"800\" height=\"600\" \/><\/p>\n<p><em>BuonApp\u00a0<\/em><\/p>\n<p><em>Read more on this topic in <a href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\" target=\"_blank\" rel=\"noopener noreferrer\">our previous article<\/a><\/em><\/p>\n<hr \/>\n<p>The first set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don&#8217;t miss the new sets. If there are any specific terms you would like to see explained, described, and illustrated, <strong>feel free to contact us via<\/strong> <strong>direct message on our <a href=\"https:\/\/www.facebook.com\/tubikagency\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Facebook page<\/a> or <a href=\"https:\/\/twitter.com\/tubikstudio\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Twitter<\/a>,\u00a0as well as our <a href=\"https:\/\/www.quora.com\/profile\/Marina-Yalanska\/answers\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Quora<\/a> representative<\/strong>. New definitions are coming soon!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Definitions by Tubik Studio for the basic terms in UI\/UX design process influencing usability and performance. Examples and descriptions based on experience.<\/p>\n","protected":false},"author":3,"featured_media":8127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[453,457,16,479,20,482,100,491,147,502,151,515,212,533,233,237,248,319,336,365,437,447],"coauthors":[],"class_list":["post-1395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-typography","tag-ui","tag-animation","tag-usability","tag-app-design","tag-user-experience","tag-design","tag-user-interface","tag-design-studio","tag-ux","tag-design-tips","tag-uxui","tag-graphic-design","tag-web-design","tag-human-computer-interaction","tag-icons","tag-illustration","tag-mobile-app","tag-motion-design","tag-product-design","tag-tips","tag-tubik-studio"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI\/UX Design Glossary. Steps to Usability<\/title>\n<meta name=\"description\" content=\"Definitions by Tubik Studio for the basic terms in UI\/UX design process influencing usability and performance. Examples and descriptions based on experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI\/UX Design Glossary. Steps to Usability\" \/>\n<meta property=\"og:description\" content=\"The set of definitions for the basic terms in UI\/UX design process influencing usability and performance. Supported with examples and descriptions based on studio designers&#039; practical experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-22T16:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T13:56:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/\",\"name\":\"UI\/UX Design Glossary. Steps to Usability\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg\",\"datePublished\":\"2016-03-22T16:13:58+00:00\",\"dateModified\":\"2023-08-17T13:56:07+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"Definitions by Tubik Studio for the basic terms in UI\/UX design process influencing usability and performance. Examples and descriptions based on experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg\",\"width\":1024,\"height\":707,\"caption\":\"tubikstudio ui ux design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI\/UX Design Glossary. Steps to Usability\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI\/UX Design Glossary. Steps to Usability","description":"Definitions by Tubik Studio for the basic terms in UI\/UX design process influencing usability and performance. Examples and descriptions based on experience.","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:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/","og_locale":"en_US","og_type":"article","og_title":"UI\/UX Design Glossary. Steps to Usability","og_description":"The set of definitions for the basic terms in UI\/UX design process influencing usability and performance. Supported with examples and descriptions based on studio designers&#039; practical experience.","og_url":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2016-03-22T16:13:58+00:00","article_modified_time":"2023-08-17T13:56:07+00:00","og_image":[{"width":1024,"height":707,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/","url":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/","name":"UI\/UX Design Glossary. Steps to Usability","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg","datePublished":"2016-03-22T16:13:58+00:00","dateModified":"2023-08-17T13:56:07+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"Definitions by Tubik Studio for the basic terms in UI\/UX design process influencing usability and performance. Examples and descriptions based on experience.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-ui-ux-design.jpg","width":1024,"height":707,"caption":"tubikstudio ui ux design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/uiux-design-glossary-steps-to-usability\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI\/UX Design Glossary. Steps to Usability"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=1395"}],"version-history":[{"count":6,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1395\/revisions"}],"predecessor-version":[{"id":14751,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1395\/revisions\/14751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8127"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=1395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=1395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=1395"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}