{"id":992,"date":"2023-02-06T07:44:24","date_gmt":"2023-02-06T07:44:24","guid":{"rendered":"https:\/\/xysum.ee\/mis-on-ui-ja-kuidas-see-erineb-uxist\/"},"modified":"2023-08-03T07:51:08","modified_gmt":"2023-08-03T07:51:08","slug":"what-is-ui-and-how-does-it-differ-from-ux","status":"publish","type":"post","link":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/","title":{"rendered":"What is UI and how does it differ from UX?"},"content":{"rendered":"<p>UI is a term that is used almost interchangeably with the pair of letters UX. So it&#8217;s difficult to talk about UI without mentioning UX. Although they are often used together, they are certainly not synonymous.<\/p>\n<h2>What is the difference between UX and UI?<\/h2>\n<p>The inseparable partner of UI is UX (user experience). The goal of creating UX is to establish what elements (for example, on a website or application) are, where they are located and why. In other words, how to make the visitor&#8217;s experience on the website pleasant, navigation simple and goal-orientated. Also, how to reduce the number of clicks, etc.<\/p>\n<p>UI (user interface) or user interface simply means what the elements set by UX look like. So, the UI designer&#8217;s job is to give an appearance to everything the user interacts with, including buttons, text sizes, colors, and more, for example, what the button will look like when you hover or click on it.<\/p>\n<p>&nbsp;<\/p>\n<h3>Why is UI important?<\/h3>\n<p>A good UI ensures that it is clear for the user to navigate, important information is highlighted, elements have a perceptible hierarchy, and visually the end result is reasonably familiar to the user. In addition, UI supports the brand, conveys its visual identity and creates credibility.<\/p>\n<p>For example, in the illustration below, the example on the right shows clearly that the three links have different purposes. <strong>There is a clear hierarchy.<\/strong> As users, we are used to seeing login screens and already know intuitively which button we are looking for.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-823\" src=\"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Good-Bad-Example.png\" alt=\"\" width=\"1268\" height=\"974\" srcset=\"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Good-Bad-Example.png 1268w, https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Good-Bad-Example-300x230.png 300w, https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Good-Bad-Example-1024x787.png 1024w, https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Good-Bad-Example-768x590.png 768w\" sizes=\"auto, (max-width: 1268px) 100vw, 1268px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UI is a term that is used almost interchangeably with the pair of letters UX. So it&#8217;s difficult to talk about UI without mentioning UX. Although they are often used together, they are certainly not synonymous. What is the difference between UX and UI? The inseparable partner of UI is UX (user experience). The goal&hellip;<\/p>\n","protected":false},"author":2,"featured_media":826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is UI and how does it differ from UX? | XYSUM<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is UI and how does it differ from UX? | XYSUM\" \/>\n<meta property=\"og:description\" content=\"UI is a term that is used almost interchangeably with the pair of letters UX. So it&#8217;s difficult to talk about UI without mentioning UX. Although they are often used together, they are certainly not synonymous. What is the difference between UX and UI? The inseparable partner of UI is UX (user experience). The goal&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/\" \/>\n<meta property=\"og:site_name\" content=\"XYSUM\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-06T07:44:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-03T07:51:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"xysum\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"xysum\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/\",\"url\":\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/\",\"name\":\"What is UI and how does it differ from UX? | XYSUM\",\"isPartOf\":{\"@id\":\"https:\/\/xysum.ee\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg\",\"datePublished\":\"2023-02-06T07:44:24+00:00\",\"dateModified\":\"2023-08-03T07:51:08+00:00\",\"author\":{\"@id\":\"https:\/\/xysum.ee\/en\/#\/schema\/person\/5abb36a455a694e607fb1b31a217b76e\"},\"breadcrumb\":{\"@id\":\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#primaryimage\",\"url\":\"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg\",\"contentUrl\":\"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg\",\"width\":2000,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/xysum.ee\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is UI and how does it differ from UX?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/xysum.ee\/en\/#website\",\"url\":\"https:\/\/xysum.ee\/en\/\",\"name\":\"XYSUM\",\"description\":\"Web Development\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/xysum.ee\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/xysum.ee\/en\/#\/schema\/person\/5abb36a455a694e607fb1b31a217b76e\",\"name\":\"xysum\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/xysum.ee\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c321467d741e26506bc21297148414da?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c321467d741e26506bc21297148414da?s=96&d=mm&r=g\",\"caption\":\"xysum\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is UI and how does it differ from UX? | XYSUM","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:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/","og_locale":"en_US","og_type":"article","og_title":"What is UI and how does it differ from UX? | XYSUM","og_description":"UI is a term that is used almost interchangeably with the pair of letters UX. So it&#8217;s difficult to talk about UI without mentioning UX. Although they are often used together, they are certainly not synonymous. What is the difference between UX and UI? The inseparable partner of UI is UX (user experience). The goal&hellip;","og_url":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/","og_site_name":"XYSUM","article_published_time":"2023-02-06T07:44:24+00:00","article_modified_time":"2023-08-03T07:51:08+00:00","og_image":[{"width":2000,"height":1000,"url":"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg","type":"image\/jpeg"}],"author":"xysum","twitter_card":"summary_large_image","twitter_misc":{"Written by":"xysum","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/","url":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/","name":"What is UI and how does it differ from UX? | XYSUM","isPartOf":{"@id":"https:\/\/xysum.ee\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#primaryimage"},"image":{"@id":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#primaryimage"},"thumbnailUrl":"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg","datePublished":"2023-02-06T07:44:24+00:00","dateModified":"2023-08-03T07:51:08+00:00","author":{"@id":"https:\/\/xysum.ee\/en\/#\/schema\/person\/5abb36a455a694e607fb1b31a217b76e"},"breadcrumb":{"@id":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#primaryimage","url":"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg","contentUrl":"https:\/\/xysum.ee\/wp-content\/uploads\/2023\/08\/UI-Mistakes-funny-Examples-panorama-2cf5c4e820082bb5a10e4a13966eddd8-skxojami60qz.jpeg","width":2000,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/xysum.ee\/en\/what-is-ui-and-how-does-it-differ-from-ux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/xysum.ee\/en\/"},{"@type":"ListItem","position":2,"name":"What is UI and how does it differ from UX?"}]},{"@type":"WebSite","@id":"https:\/\/xysum.ee\/en\/#website","url":"https:\/\/xysum.ee\/en\/","name":"XYSUM","description":"Web Development","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/xysum.ee\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/xysum.ee\/en\/#\/schema\/person\/5abb36a455a694e607fb1b31a217b76e","name":"xysum","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/xysum.ee\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c321467d741e26506bc21297148414da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c321467d741e26506bc21297148414da?s=96&d=mm&r=g","caption":"xysum"}}]}},"_links":{"self":[{"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/posts\/992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/comments?post=992"}],"version-history":[{"count":1,"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/posts\/992\/revisions"}],"predecessor-version":[{"id":993,"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/posts\/992\/revisions\/993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/media\/826"}],"wp:attachment":[{"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/media?parent=992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/categories?post=992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xysum.ee\/en\/wp-json\/wp\/v2\/tags?post=992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}