{"id":20799,"date":"2013-09-22T20:41:47","date_gmt":"2013-09-23T00:41:47","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=20799"},"modified":"2023-02-24T18:05:53","modified_gmt":"2023-02-24T22:05:53","slug":"3-ui-tips-for-improving-the-usability-of-your-design","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/","title":{"rendered":"3 UI Tips for Improving the Usability of Your Design"},"content":{"rendered":"

A highly usable website is one that doesn’t get in the user’s way of achieving their goal. It functions easily and naturally, without presenting any confusion or distractions. While this may seem like a simple concept, it is easier said than done when it comes to designing a usable site. Follow these tips to improve your usability and to please your users.<\/p>\n

Understand your user<\/em><\/h3>\n

Before refining your work, it’s important to know who your users are and where they’re coming from. Until you know what they want from your site, you won’t be able to tailor your design to best fit their needs. You can do this by researching your market, conducting polls and looking at what your competitors are doing. Before moving forward, refer to this article on refining your work for your audience, so that you’re continually keeping their needs in mind.<\/p>\n

\"\"<\/a>
\nOnSite Website<\/em><\/p>\n

Tip 1: Define a Structure<\/h2>\n

The structure of your website should be designed with intention and strategy in order to function effectively. Several factors go into a cohesive structure, including:<\/p>\n

Creating an intuitive and clear navigational system<\/em><\/h3>\n

While you can always personalize your navigational elements and menus, don’t go against conventions so much that your users get confused by how your site works. Make your navigation clear by defining options and highlighting which pages are currently being viewed.<\/p>\n

Developing a visual hierarchy<\/em><\/h3>\n

Show users what is most important on your web pages by using color, placement and sizing to emphasize and group elements. For example, bright colors and bold type attract attention, while smaller and duller elements recede in focus.<\/p>\n

Being consistent<\/em><\/h3>\n

One of the most valuable contributions to a solid site structure is consistency. If your users discover that a clickable component is a certain shade of blue and that they can go to the previous page by using a keyboard shortcut, they should be able to expect those functions to extend throughout the site. Make your layout and site parts work together, and your users will easily understand its functionality.<\/p>\n

\"\"<\/a>
\nMinimal Music Quiz<\/em><\/p>\n

Along the same lines, when looking to layout your secondary elements it’s important to maintain clear consistency. Two of the most common approaches include using grid systems like seen in this minimal music quiz or this cashflow guide. The second common option is enabling different scroll functionality as can be seen is this uniform microsite. Regardless of your approach, make sure that all the elements interact in a consistent flow.<\/p>\n

Tip 2: Choose Simplicity Over Complexity<\/h2>\n

Internet users have come to expect aspects in a website to function in certain ways, like clickable fields, search boxes and navigational consistency. Make common tasks like these easy to carry out by respecting conventions of website functionality<\/a>. This doesn’t mean that it should look like every other website, but common functions should work the way others do. The least friction between where your users want to go and how they get there, the more usable and easy their experience is.<\/p>\n

\"\"<\/a>
\nFhoke Website<\/em><\/p>\n

The same goes for the aesthetic factors of your design. Only use imagery, color and typography that add value to the functionality of your site to remove any possibility of distraction from users’ end goals.<\/p>\n

Tip 3: Communicate With Users<\/h2>\n

Users ultimately want to know that their needs matter to your brand. Allow them to give feedback about their experience with your site, and let them know when changes are made. This allows them to see any progress being made and encourages them to stay engaged.<\/p>\n

\"\"<\/a>
\nUsability & User Experience<\/em><\/p>\n

Another way to communicate is to create a tolerant interface that expects user error. When an error occurs, send messages to your users that inform them of what went wrong and teach them how to correct it. Approaching your design with the expectation that errors will occasionally be made will keep those affected from getting frustrated and leaving your site.<\/p>\n

Usability is all about the best way to serve your users. As you make these changes and refinements to your design, always keep your audience in mind so that they know your site was designed specifically for them. They will enjoy positive interactions with your site, and you will gain a following that respects your brand.<\/p>\n","protected":false},"excerpt":{"rendered":"

A highly usable website is one that doesn’t get in the user’s way of achieving their goal. It functions easily and naturally, without presenting any confusion or distractions. While this<\/p>\n","protected":false},"author":90,"featured_media":20803,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[537,109,4207,1654,24,4206,225,35,5633,107],"tags":[5905,165,5885,178,5889,115,272,2152,196,2153,3118,1073,2991,2184,848,2149],"yoast_head":"\n3 UI Tips for Improving the Usability of Your Design<\/title>\n<meta name=\"description\" content=\"A highly usable website is one that doesn't get in the user's way of achieving their goal. It functions easily and naturally, without presenting any\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 UI Tips for Improving the Usability of Your Design\" \/>\n<meta property=\"og:description\" content=\"A highly usable website is one that doesn't get in the user's way of achieving their goal. It functions easily and naturally, without presenting any\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-23T00:41:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T22:05:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1474\" \/>\n\t<meta property=\"og:image:height\" content=\"850\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Luke Clum\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luke Clum\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/\",\"name\":\"3 UI Tips for Improving the Usability of Your Design\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png\",\"datePublished\":\"2013-09-23T00:41:47+00:00\",\"dateModified\":\"2023-02-24T22:05:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/27c3a4359e72c48994dd0c221c51fafe\"},\"description\":\"A highly usable website is one that doesn't get in the user's way of achieving their goal. It functions easily and naturally, without presenting any\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png\",\"width\":\"1474\",\"height\":\"850\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 UI Tips for Improving the Usability of Your Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\",\"description\":\"Design Inspiration & Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/27c3a4359e72c48994dd0c221c51fafe\",\"name\":\"Luke Clum\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ebe5eb6040bce52996b7252b03d12525?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ebe5eb6040bce52996b7252b03d12525?s=96&r=pg\",\"caption\":\"Luke Clum\"},\"description\":\"Luke Clum is a Seattle based designer, photographer and outdoorsman. If he\u2019s not geeking out about typography, you\u2019ll most likely find him climbing something in the mountains. Follow him on Twitter @lukeclum\",\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/lukeclum\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 UI Tips for Improving the Usability of Your Design","description":"A highly usable website is one that doesn't get in the user's way of achieving their goal. It functions easily and naturally, without presenting any","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:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/","og_locale":"en_US","og_type":"article","og_title":"3 UI Tips for Improving the Usability of Your Design","og_description":"A highly usable website is one that doesn't get in the user's way of achieving their goal. It functions easily and naturally, without presenting any","og_url":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2013-09-23T00:41:47+00:00","article_modified_time":"2023-02-24T22:05:53+00:00","og_image":[{"width":1474,"height":850,"url":"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png","type":"image\/png"}],"author":"Luke Clum","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Luke Clum","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/","url":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/","name":"3 UI Tips for Improving the Usability of Your Design","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png","datePublished":"2013-09-23T00:41:47+00:00","dateModified":"2023-02-24T22:05:53+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/27c3a4359e72c48994dd0c221c51fafe"},"description":"A highly usable website is one that doesn't get in the user's way of achieving their goal. It functions easily and naturally, without presenting any","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/improve-usability-design-on-site-freelancers.png","width":"1474","height":"850"},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2013\/3-ui-tips-for-improving-the-usability-of-your-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"3 UI Tips for Improving the Usability of Your Design"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","description":"Design Inspiration & Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/27c3a4359e72c48994dd0c221c51fafe","name":"Luke Clum","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ebe5eb6040bce52996b7252b03d12525?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ebe5eb6040bce52996b7252b03d12525?s=96&r=pg","caption":"Luke Clum"},"description":"Luke Clum is a Seattle based designer, photographer and outdoorsman. If he\u2019s not geeking out about typography, you\u2019ll most likely find him climbing something in the mountains. Follow him on Twitter @lukeclum","url":"https:\/\/www.andysowards.com\/blog\/author\/lukeclum\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/20799"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=20799"}],"version-history":[{"count":1,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/20799\/revisions"}],"predecessor-version":[{"id":44887,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/20799\/revisions\/44887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/20803"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=20799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=20799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=20799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}