{"id":3344,"date":"2016-08-01T12:00:52","date_gmt":"2016-08-01T11:00:52","guid":{"rendered":"https:\/\/www.da-manager.com\/?p=3344"},"modified":"2024-01-26T14:39:29","modified_gmt":"2024-01-26T13:39:29","slug":"uiux-web-design-top-10-things-to-know","status":"publish","type":"post","link":"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/","title":{"rendered":"UI\/UX Web Design: Top 10 Things to Know"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<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:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#1_Responsiveness_Rules\" >1. Responsiveness Rules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#2_Navigation_is_Necessary\" >2. Navigation is Necessary<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#3_Hierarchy_Helps\" >3. Hierarchy Helps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#4_Fix_all_Functions\" >4. Fix all Functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#5_Control_is_Critical\" >5. Control is Critical<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#6_Reinforce_Readability\" >6. Reinforce Readability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#7_Visual_Cues_are_Very_Important\" >7. Visual Cues are Very Important<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#8_Relevance_is_Right\" >8. Relevance is Right<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#9_Succeed_with_Speed\" >9. Succeed with Speed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/da-manager.com\/blog\/uiux-web-design-top-10-things-to-know\/#10_Design_with_Discipline\" >10. Design with Discipline<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>Browse <\/strong>the website. <strong>Find<\/strong> the content. <strong>Complete<\/strong> the task. These three short, simple sentences summarise every interaction a visitor has with a website. What is UI\/UX design?<strong> It\u2019s how quickly and easily a user can get from beginning to end.<\/strong><\/p>\n<p>Simplicity is the foundation of all UI\/UX <a href=\"http:\/\/www.da-manager.com\/web-design\/\">web design<\/a> principles \u2013 but the process to get there is anything but. Walking in the user\u2019s shoes. Systematically checking for weaknesses. Optimising the individual elements. The task requires empathy, strategy, insight, and execution.<\/p>\n<p><strong>Ready to build a website with\u00a0an amazing user experience?<\/strong> Here\u2019s the top ten things to know. Consider it your official UI\/UX web design tutorial.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_Responsiveness_Rules\"><\/span>1. Responsiveness Rules<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Desktop. Laptop. Tablet. Phone. Music player. Gaming console. Watch. The number of devices visitors use to get to your website has grown by leaps and bounds. User experience is at the centre of them all.<\/p>\n<p>It\u2019s one thing to\u00a0<strong>optimise\u00a0the user experience<\/strong> for a given device. It\u2019s another to <strong>ensure a seamless experience<\/strong> across all devices. <strong>Both are required in smart UI\/UX web design.<\/strong><\/p>\n<p>Today, visitors demand a smart phone experience as user-friendly as the desktop experience. It\u2019s a challenging task \u2013 but a highly rewarding one for users and brands alike.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Navigation_is_Necessary\"><\/span>2. Navigation is Necessary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>What\u2019s the one thing visitors search for on your website? <strong>Content.<\/strong><strong>\u00a0<\/strong>Users crave the information on your site \u2013 and it\u2019s your job to <strong>help them get it quickly and easily.\u00a0<\/strong><\/p>\n<p>Smart navigation systems are instantly recognisable and easy to use. Optimised navigation guide visitors to content in the least possible number of clicks or taps of a finger.<\/p>\n<p>The navigation is a critical component to the user experience of a website. Users must be able to easily scan the navigation and track down their destination. It\u2019s what smart UI\/UX design is all about.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Hierarchy_Helps\"><\/span>3. Hierarchy Helps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Knowing <em>what<\/em> visitors are searching for is only a small piece of the puzzle. Smart UI\/UX design also means knowing <em>how<\/em> visitors are searching your website.<\/p>\n<p>We live in a world of increasingly short attention spans. Rather than read content in depth, users are more likely to scan. The good news: you can help <strong>guide them along the path.<\/strong><\/p>\n<p>A visual hierarchy makes the most important thing on the screen the focal point. Smart designers <strong>define where users should focus first, second, etc. \u2013 so<\/strong> <strong>the best, most relevant content is always front and\u00a0centre.<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Fix_all_Functions\"><\/span>4. Fix all Functions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Links and buttons are the Internet equivalent of shelves at a brick and mortar store. Imagine the feeling when the item you came to purchase is out of stock. Well, it\u2019s the same as encountering a broken link or non-clickable button.<\/p>\n<p>404 errors. Links pointing to the wrong pages. Underlined words that aren\u2019t links. Call-to-actions without hyperlinks. <strong>Nothing frustrates a user more than a web design element that fails to function.<\/strong><\/p>\n<p>Is there a clear function your website has to offer to the end user? Smart <a href=\"http:\/\/www.creativebloq.com\/ux\/product-portfolios-61412126\" target=\"_blank\" rel=\"noopener noreferrer\">UI\/UX design<\/a> is about finding the best way to make those functions as accessible and enjoyable to the experience as possible.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Control_is_Critical\"><\/span>5. Control is Critical<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Auto-play videos with audio. Hijacked scrolling. Background music. Opening links in new tabs or windows. Certain design elements cause more problems than they aim to solve. Mostly, users hate them.<\/p>\n<p><strong>Taking control away from the user is always a bad idea in UI\/UX web design.<\/strong> Movement throughout the site or application should be totally free and under the user\u2019s control.<\/p>\n<p>Remember, you\u2019re building a \u201cuser experience\u201d \u2013 so focus the experience on the user. Use irritating, automatic design elements sparingly \u2013 or not at all.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_Reinforce_Readability\"><\/span>6. Reinforce Readability<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Design is important \u2013 but only when it respects readability. Remember, every visitor\u2019s goal is to consume content. Busy backgrounds, poor colour schemes, and other design pitfalls spell disaster for content consumption.<\/p>\n<p><strong>Distracting design takes attention away from the content.<\/strong> The wrong colour scheme can reduce the quality of the typography. Imagine light Gray typography over a white background. Clearly not the best combination.<\/p>\n<p>Line length. Line height. Kerning. Font choice. Each one can pose a serious issue for website readability. Smart UI\/UX design requires a strong foundation in typography \u2013 including the ability to utilise it properly to keep distracting design from taking over.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"7_Visual_Cues_are_Very_Important\"><\/span>7. Visual Cues are Very Important<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Headings. Pictures. Buttons. Blocks. Users rely on visual cues to know exactly where to focus their attention. Beyond attracting attention, visual cues can effectively <strong>guide a user\u2019s sight directly to the desired destination.<\/strong><\/p>\n<p>Rather than randomly browse through your pages, you want users to know exactly what to look at, what to click, and even how to buy. If the action on your website is lower than you anticipated, consider adding some visual cues.<\/p>\n<p>Headings are easy to scan. Pictures can illustrate points. Content blocks send the message certain content is unique and more important. In a world with short attention spans, visual clues are especially important to smart UI\/UX web design.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"8_Relevance_is_Right\"><\/span>8. Relevance is Right<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let\u2019s go back to the brick and mortar example. Just as frustrating as an out of stock product is a product in the wrong section. If an employee directs you to the cereal aisle, then you better find the Cheerios there.<\/p>\n<p>The same is true for UI\/UX design. <strong>More than anything, users want content relevant to their unique needs.<\/strong>Try to sell Sperry when the user wants Nike and you\u2019re wasting everyone\u2019s time.<\/p>\n<p>Why is content relevance so important? Because users want to consume content by jumping through the least amount of hoops. The website with the smallest number of hoops is the one that closes the deal.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_Succeed_with_Speed\"><\/span>9. Succeed with Speed<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We already know about users with short attention spans. Well, meet their best friend \u2013 the user without patience. Just as lengthy content can bounce a website visitor, so can slow loading pages.<\/p>\n<p>Users have certain expectations about site loading speeds \u2013 and few are willing to budge. <strong>Smart UI\/UX web design reduces site loading time to keep visitors on the site.<\/strong><\/p>\n<p>Certain design elements \u2013 large images, for example \u2013 can slow a site to a frustrating pace. Speed is everything to an impatient end user. Never keep a potential customer waiting. Rid your site of anything that slows it down.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"10_Design_with_Discipline\"><\/span>10. Design with Discipline<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It\u2019s easy to get design-happy with a website. If the goal is to focus on the content, then design overkill can be your worst enemy. <strong>You want design elements to complement each other \u2013 not compete with one another.<\/strong><\/p>\n<p>Overly aggressive design can range from excessive headings to flash and animation. Multiple call-to-actions can not only confuse users but scare them away. Just imagine the damage frequent pop-up boxes can do.<\/p>\n<p>Smart UI\/UX design features just the right amount of design without taking away from the whole. Feel free to experiment with various design elements. Just don\u2019t make them compete for attention.<\/p>\n<p>Credit:Bowen Media.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Browse the website. Find the content. Complete the task. These three short, simple sentences summarise&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3345,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_mbp_gutenberg_autopost":false,"footnotes":""},"categories":[147],"tags":[151,152,129,153],"class_list":["post-3344","post","type-post","status-publish","format-standard","has-post-thumbnail","category-general","tag-make-it-easy","tag-scannable","tag-seo","tag-users-experience"],"modified_by":"Wise","_links":{"self":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts\/3344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/comments?post=3344"}],"version-history":[{"count":0,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/posts\/3344\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/media\/3345"}],"wp:attachment":[{"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/media?parent=3344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/categories?post=3344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-manager.com\/blog\/wp-json\/wp\/v2\/tags?post=3344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}