{"id":332540,"date":"2021-08-30T21:00:16","date_gmt":"2021-08-30T18:00:16","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-ui-and-what-does-it-stand-for\/"},"modified":"2021-08-30T21:00:16","modified_gmt":"2021-08-30T18:00:16","slug":"what-is-ui-and-what-does-it-stand-for","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-ui-and-what-does-it-stand-for\/","title":{"rendered":"#What Is UI, and What Does It Stand For?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a255577d8029\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a255577d8029\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-ui-and-what-does-it-stand-for\/#What_Is_UI_and_What_Does_It_Mean\" >What Is UI, and What Does It Mean?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-ui-and-what-does-it-stand-for\/#Different_Types_of_UI\" >Different Types of UI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-ui-and-what-does-it-stand-for\/#Elements_of_Good_UI\" >Elements of Good UI<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is UI, and What Does It Stand For?&#8221;<\/strong><\/p>\n<div>\n<figure style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage wp-image-743828 size-full\" srcset=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/07\/woman-working-multiple-screen-design.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/07\/woman-working-multiple-screen-design.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/07\/woman-working-multiple-screen-design.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Woman working on web design on multiple computer screens\" width=\"1200\" height=\"675\" data-crediturl=\"https:\/\/www.shutterstock.com\/image-photo\/close-female-designer-working-on-multiple-1042807015\" data-credittext=\"Andrey_Popov\/Shutterstock.com\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"type:primaryImage imagecredit\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.shutterstock.com\/image-photo\/close-female-designer-working-on-multiple-1042807015\">Andrey_Popov\/Shutterstock.com<\/a><\/span><\/figcaption><\/figure>\n<p>If you\u2019re even tangentially in the web design or graphic design space, you\u2019ve heard the term \u201cUI,\u201d or \u201cUI design.\u201d You may have also seen it used interchangeably with \u201cUX,\u201d so what is it and how does it differ?<\/p>\n<p>In truth, UI and UX aren\u2019t the same. Below we\u2019ll get into what UI is, and what it stands for.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Is_UI_and_What_Does_It_Mean\"><\/span>What Is UI, and What Does It Mean?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>UI is short for \u201cuser interface.\u201d It\u2019s the elements of a website or <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a> that the user interacts with as they navigate the page or program \u2014 the graphical layout of an application. Page and app elements that qualify as UI include:<\/p>\n<ul>\n<li aria-level=\"1\">Buttons<\/li>\n<li aria-level=\"1\">Text<\/li>\n<li aria-level=\"1\">Images<\/li>\n<li aria-level=\"1\">Sliders<\/li>\n<li aria-level=\"1\">Scroll bars<\/li>\n<li aria-level=\"1\">Form fields<\/li>\n<li aria-level=\"1\">Page layout<\/li>\n<\/ul>\n<p>Basically, everything a user interacts with is part of the UI. Because of that, aesthetics are a big part of any site or app\u2019s UI design.<\/p>\n<p>Adobe explains UI in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/xd.adobe.com\/ideas\/process\/ui-design\/\">their XD design blog<\/a> like this:<\/p>\n<blockquote><p>\u201cA user interface is a place where interactions between humans and machines occur. It allows users to effectively operate a machine to complete a task or achieve a specific goal, like making a purchase or downloading an app.\u201d<\/p>\n<\/blockquote>\n<p>UX, on the other hand, means \u201cuser experience.\u201d And while UI can definitely affect UX, they are not the same thing.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Different_Types_of_UI\"><\/span>Different Types of UI<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The UI of any device includes both hardware and software. Everything from the keyboard you use to the URL to the sidebar menu of the website you\u2019re visiting is part of the UI.<\/p>\n<p>The hardware of a UI can be divided into two categories:<\/p>\n<ul>\n<li aria-level=\"1\"><b>Input hardware<\/b>: devices that let people control the machine from their end, like a mouse or tablet.<\/li>\n<li aria-level=\"1\"><b>Output hardware<\/b>: devices that give the user information, like monitors and speakers.<\/li>\n<\/ul>\n<p>According to Adobe, there are three types of user interfaces: command-line interfaces, graphic user interfaces (also called GUI), and voice-enabled user interfaces.<\/p>\n<p><strong>Command-line interfaces<\/strong> were the first UIs, dating back to the 1970s. Users would input a command and the computer would respond with a line of text. These UIs require knowledge of machine language and have largely been replaced by graphical user interfaces (GUIs) in today\u2019s computers. They\u2019re now mostly used in computer programming and system administration.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-740055\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/07\/Command-Prompt-Command-to-Change-user-to-administrator.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Command prompt in Windows\" width=\"649\" height=\"320\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p><strong>RELATED:<\/strong> <strong><em>Command Lines: Why Do People Still Bother With Them?<\/em><\/strong><\/p>\n<p><strong>GUIs<\/strong> are the interfaces most modern users are familiar with. Graphics, like icons and cursors, allow users to interact with digital products. When you move the mouse arrow to click on the Spotify icon so you can play music, that\u2019s a GUI. The icons we regularly interact with on our smartphones? Also a GUI. These UI systems allowed the widespread use of computers as we know them today.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" alignnone wp-image-734777 size-full\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/06\/file-explorer-icons.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"File Explorer open in Windows 11\" width=\"650\" height=\"500\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p><strong>Voice-enabled user interfaces<\/strong> allow people to interact with a digital system using just their voice. In the last few years, voice-enabled interfaces have surged in popularity via digital assistants like Alexa, Siri, and Google Assistant.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>What Is Google Assistant, and What Can It Do?<\/em><\/strong><\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Elements_of_Good_UI\"><\/span>Elements of Good UI<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Any designer will tell you a good UI is key to a good product. If something isn\u2019t easy to use, it won\u2019t catch on. A well-designed UI will be:<\/p>\n<ul>\n<li aria-level=\"1\"><b>Familiar<\/b>: People will be able to intuit how to use the program based on their previous experience.<\/li>\n<li aria-level=\"1\"><b>Clear<\/b>: The function of every element in your UI should be clear to the person using it.<\/li>\n<li aria-level=\"1\"><b>Consistent<\/b>: Elements should be consistent across the product so people can recognize patterns.<\/li>\n<li aria-level=\"1\"><b>Efficient<\/b>: Minimal input from the user is required to achieve the desired output. Shortcuts are provided for more experienced users.<\/li>\n<li aria-level=\"1\"><b>Forgiving<\/b>: Good UI forgives when someone makes a mistake, e.g. Google\u2019s \u201c<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.reviewgeek.com\/57376\/google-searchs-new-ai-understands-your-sloppiest-tpyos-and-misspellings\/\">did you mean<\/a>\u201d link in search results.<\/li>\n<\/ul>\n<p>UI designers will create simulations of a system and test it on the intended audience before accepting it and moving it into production. Ideally, it will have all of the above characteristics.<\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong>\n<\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/743404\/what-is-ui-and-what-does-it-stand-for\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is UI, and What Does It Stand For?&#8221; Andrey_Popov\/Shutterstock.com If you\u2019re even tangentially in the web design or graphic design space, you\u2019ve heard the term \u201cUI,\u201d or \u201cUI design.\u201d You may have also seen it used interchangeably with \u201cUX,\u201d so what is it and how does it differ? In truth, UI and UX aren\u2019t&#8230;<\/p>\n","protected":false},"author":1,"featured_media":332541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/07\/woman-working-multiple-screen-design.jpg?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-332540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/332540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=332540"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/332540\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/332541"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=332540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=332540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=332540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}