{"id":960,"date":"2015-11-18T17:57:01","date_gmt":"2015-11-18T08:57:01","guid":{"rendered":"http:\/\/avinton.com\/?p=960"},"modified":"2015-11-20T01:25:59","modified_gmt":"2015-11-19T16:25:59","slug":"ui-design-introduction-basics","status":"publish","type":"post","link":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/","title":{"rendered":"UI Design Introduction &#038; Basics"},"content":{"rendered":"<h2>Basic Principles of UI Design<\/h2>\n<ul>\n<li><strong>Appearance<\/strong> &#8211; the interface should be divided into different areas grouped by purposes.<\/li>\n<li><strong>Content Awareness<\/strong> &#8211; the interface should inform user of their current location and the meaning of the presented information.<\/li>\n<li><strong>Aesthetics<\/strong> &#8211; the interface should provide a balance between the amount<br \/>\nof the information presented and its visual attractiveness.<\/li>\n<li><strong>User Experience<\/strong> &#8211; the interface should take into account both ease of<br \/>\nlearning for beginners and at the same time provide robustness for experienced users.<\/li>\n<li><strong>Consistency<\/strong> &#8211; the interface should be consistent in order to facilitate user<br \/>\nwith prediction of the consequences of each taken action.<\/li>\n<li><strong>Minimizing Effort<\/strong> &#8211; the interface should facilitate user interaction, bringing number of steps leading to a goal to minimum.<\/li>\n<\/ul>\n<h2>Division Principles<\/h2>\n<ul>\n<li>Each area should have clearly defined boundaries.<\/li>\n<li>Each area should have a clearly defined purpose.<\/li>\n<li>Each area should contain only the information that is need to accomplish a specific purpose.<\/li>\n<li>Information areas should be ranked in order of being processed by the user (from<br \/>\ntop to bottom, left to right).<\/li>\n<\/ul>\n<h2>Aesthetics<\/h2>\n<ul>\n<li>The user interface should be both functional and aesthetically pleasing.<\/li>\n<li>The amount of space between interface elements<br \/>\nshould be tailored to the user&#8217;s requirements (eg. 50%\u00a0for novice and 10% for advanced users).<\/li>\n<li>Forms should be kept simple and should contain sane amount of items.\u00a0Forms should be displaying only the amount of information possible to be processed by the user in one go.<\/li>\n<li>It&#8217;s advisable to avoid using more than two different fonts. Decorative fonts should be avoided, as they are often difficult to read.<\/li>\n<li>Colors should be subdued (contrast brings attention but is tiring).<\/li>\n<li>Color shouldn&#8217;t be the only differentiator. Interface should be friendly for the people\u00a0suffering from color blindness.<\/li>\n<\/ul>\n<h2>User Experience<\/h2>\n<ul>\n<li>The user interface should be easy to learn, especially for novice users.<\/li>\n<li>The user interface should facilitate and accelerate execution of actions by advanced users.<\/li>\n<li>The menu should consist of no more than three levels for the main menu and no more than two levels<br \/>\nfor context menus.<\/li>\n<li>The menu should present all available functions, ie. there shouldn&#8217;t be any function that&#8217;s inaccessible through the menu.<\/li>\n<li>The menu should contain no more than a few positions at every level. For more sophisticated menus items should be logically grouped\u00a0and more frequently used functions should be highlighted in some way.<\/li>\n<li>Frequently used functions should be available directly and be easily accessible.<\/li>\n<li>Buttons should have an icon resembling performed action and name of the action assigned to them. If the name of the action\u00a0can&#8217;t be shown directly on the button it should be shown as a tooltip upon hovering over the button.<\/li>\n<li>It is advisable for more complex applications to have their capabilities presented by using hints.<\/li>\n<li>If hints take considerable amount of space on the screen, app should allow tips to be disabled and re-enabled once again on demand.<\/li>\n<\/ul>\n<h2>Consistency<\/h2>\n<ul>\n<li>User interface should be consistent to ensure\u00a0the predictability of actions taken by the user.<\/li>\n<li>All elements of the application should be\u00a0designed in a uniform manner, ie. using homogenous\u00a0conceptual (terminology) and using\u00a0homogenous forms (the same layout, fonts and colors)\u00a0and clear navigation.<\/li>\n<li>The user interface should be consistent with other\u00a0applications used in the same field.<\/li>\n<\/ul>\n<h2>UI Evaluation<\/h2>\n<ul>\n<li>Heuristic evaluation (a ssessment of compliance with the rules).<\/li>\n<li>Review with the user.<\/li>\n<li>Interactive evaluation with the user.<\/li>\n<li>Formal usability testing.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices etc.<\/p>\n","protected":false},"author":2,"featured_media":966,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[74],"class_list":["post-960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech-articles","tag-interface"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI Design: Introduction and Fundamentals<\/title>\n<meta name=\"description\" content=\"UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Design: Introduction and Fundamentals\" \/>\n<meta property=\"og:description\" content=\"UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"Avinton Japan\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Avintons\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-18T08:57:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-11-19T16:25:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Cauchi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AvintonJapan\" \/>\n<meta name=\"twitter:site\" content=\"@AvintonJapan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Cauchi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/\",\"url\":\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/\",\"name\":\"UI Design: Introduction and Fundamentals\",\"isPartOf\":{\"@id\":\"https:\/\/avinton.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg\",\"datePublished\":\"2015-11-18T08:57:01+00:00\",\"dateModified\":\"2015-11-19T16:25:59+00:00\",\"author\":{\"@id\":\"https:\/\/avinton.com\/en\/#\/schema\/person\/aa5bcc7a7c363ca85c0eeb6a7c2c594b\"},\"description\":\"UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices etc.\",\"breadcrumb\":{\"@id\":\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#primaryimage\",\"url\":\"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg\",\"contentUrl\":\"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg\",\"width\":850,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/avinton.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Design Introduction &#038; Basics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/avinton.com\/en\/#website\",\"url\":\"https:\/\/avinton.com\/en\/\",\"name\":\"Avinton Japan\",\"description\":\"Tailored Solutions and Consulting in AI and Big Data\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/avinton.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/avinton.com\/en\/#\/schema\/person\/aa5bcc7a7c363ca85c0eeb6a7c2c594b\",\"name\":\"James Cauchi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avinton.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/24fff15ecfe40a23480c47de1acb5c69cc3aa019d6f6cd36353cee85ac20a9e7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/24fff15ecfe40a23480c47de1acb5c69cc3aa019d6f6cd36353cee85ac20a9e7?s=96&d=mm&r=g\",\"caption\":\"James Cauchi\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Design: Introduction and Fundamentals","description":"UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices etc.","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:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/","og_locale":"en_US","og_type":"article","og_title":"UI Design: Introduction and Fundamentals","og_description":"UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices etc.","og_url":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/","og_site_name":"Avinton Japan","article_publisher":"https:\/\/www.facebook.com\/Avintons\/","article_published_time":"2015-11-18T08:57:01+00:00","article_modified_time":"2015-11-19T16:25:59+00:00","og_image":[{"width":850,"height":400,"url":"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg","type":"image\/jpeg"}],"author":"James Cauchi","twitter_card":"summary_large_image","twitter_creator":"@AvintonJapan","twitter_site":"@AvintonJapan","twitter_misc":{"Written by":"James Cauchi","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/","url":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/","name":"UI Design: Introduction and Fundamentals","isPartOf":{"@id":"https:\/\/avinton.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#primaryimage"},"image":{"@id":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg","datePublished":"2015-11-18T08:57:01+00:00","dateModified":"2015-11-19T16:25:59+00:00","author":{"@id":"https:\/\/avinton.com\/en\/#\/schema\/person\/aa5bcc7a7c363ca85c0eeb6a7c2c594b"},"description":"UI Design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices etc.","breadcrumb":{"@id":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#primaryimage","url":"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg","contentUrl":"https:\/\/avinton.com\/wp-content\/uploads\/2015\/11\/man-coffee-cup-pen.jpg","width":850,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/avinton.com\/en\/blog\/2015\/11\/ui-design-introduction-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avinton.com\/en\/"},{"@type":"ListItem","position":2,"name":"UI Design Introduction &#038; Basics"}]},{"@type":"WebSite","@id":"https:\/\/avinton.com\/en\/#website","url":"https:\/\/avinton.com\/en\/","name":"Avinton Japan","description":"Tailored Solutions and Consulting in AI and Big Data","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avinton.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/avinton.com\/en\/#\/schema\/person\/aa5bcc7a7c363ca85c0eeb6a7c2c594b","name":"James Cauchi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avinton.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/24fff15ecfe40a23480c47de1acb5c69cc3aa019d6f6cd36353cee85ac20a9e7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24fff15ecfe40a23480c47de1acb5c69cc3aa019d6f6cd36353cee85ac20a9e7?s=96&d=mm&r=g","caption":"James Cauchi"}}]}},"_links":{"self":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/posts\/960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/comments?post=960"}],"version-history":[{"count":8,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/posts\/960\/revisions"}],"predecessor-version":[{"id":1025,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/posts\/960\/revisions\/1025"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/media\/966"}],"wp:attachment":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/media?parent=960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/categories?post=960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/tags?post=960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}