{"id":45878,"date":"2017-02-16T18:59:36","date_gmt":"2017-02-16T13:29:36","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=45878"},"modified":"2024-11-28T23:17:36","modified_gmt":"2024-11-28T17:47:36","slug":"4-pillars-of-design-part-2","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/","title":{"rendered":"4 Pillars of Design &#8211; Part 2"},"content":{"rendered":"<p>Every design and\/or architecture has some basics and so does <a href=\"https:\/\/www.tothenew.com\/digital-marketing\/creative-design\">Visual Design<\/a>. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier.<\/p>\n<p><strong>Visual Design has Four Pillars Namely<\/strong><\/p>\n<ol>\n<li>Navigation<\/li>\n<li>Presentation<\/li>\n<li>Content<\/li>\n<li>Interaction<\/li>\n<\/ol>\n<p>I had already covered the first two pillars i.e. <strong>Navigation<\/strong> and <strong>Presentation <\/strong>in my \u00a0previous blog &#8211; <a title=\"4 Pillars of Design\" href=\"http:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-1\/\">4 Pillars of Design &#8211; Part 1<\/a><\/p>\n<p>In this blog, let&#8217;s get some insights from the other two pillars which are <strong>Content<\/strong> and <strong>Interaction<\/strong>.<\/p>\n<h2>Content<\/h2>\n<p>In any mode of communication, Content means the information and experiences directed towards an end-user or audience to create a seamless <a title=\"user experience designing\" href=\"http:\/\/www.tothenew.com\/experience-design\">user experience<\/a>. It might be in the form of Text, links, images, voice, videos, animated graphics, forms, etc.<\/p>\n<p>So what good content should have:<\/p>\n<ol>\n<li><strong>Writing for clarity-<\/strong> It seems very simple and easy but maintaining simplicity is very difficult. Content needs to be simple and concise for easy scanning by users. That means a sentence should not contain unnecessary words, and a paragraph should not contain unnecessary sentences, for the same reason a drawing should not have unnecessary lines\/shapes\/elements. For this purpose, a machine should not have an unnecessary part. It also means not that the writer makes all sentences short, or avoids all detail and treats subjects only in outline but that every word tells.<\/li>\n<li><strong>Methods that facilitate scanning-<\/strong> Studies of how users read on the Web found that they do not actually read: instead, they scan the text. Content needs to be Concise, Scannable, and Objective. How to achieve this, will be discussed later in the article.<\/li>\n<li><strong>Content strategy consideration-<\/strong> Content marketers draw and develop the larger story that an organization tells. They focus on ways to engage an audience, using content to drive profitable behaviors. According to <strong>Kristina Halvorson<\/strong>, CEO of BrainTraffic and founder of ConFab, teamwork is essential when it comes to content strategy. When discussing content and its realization, one should be careful about the following:\n<ul>\n<li>User Experience<\/li>\n<li>Design<\/li>\n<li>Information Architecture<\/li>\n<li>Copywriting<\/li>\n<li>Development<\/li>\n<li>Search Engine Optimization<\/li>\n<li>Marketing<\/li>\n<li>Public Relations and Brand Building<\/li>\n<li>Business stakeholders<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>Why do we need these?<\/strong><\/p>\n<ul>\n<li>To create effective, usable, and easily searchable content.<\/li>\n<li>To minimize re-work and identify existing content.<\/li>\n<li>To help achieve business goals through effective content that has the desired impact.<\/li>\n<\/ul>\n<p>There are two types of content users pursue to consume the information, <strong>Printed content<\/strong> and <strong>digital content<\/strong>. There are a\u00a0couple of differences in consuming content from these two mediums.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-46142 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/impressora-multifuncional1.jpg\" alt=\"impressora-multifuncional\" width=\"700\" height=\"498\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/impressora-multifuncional1.jpg 997w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/impressora-multifuncional1-300x213.jpg 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/impressora-multifuncional1-624x443.jpg 624w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><br \/>\n<strong>Printed<\/strong> content is physical that\u2019s why it can be viewed as wide as a page.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-46144 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/responsive_design_notext.jpg\" alt=\"responsive_design_notext\" width=\"516\" height=\"372\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/responsive_design_notext.jpg 516w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/responsive_design_notext-300x216.jpg 300w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><br \/>\nWhere <strong>digital space<\/strong> has various ranges of screens which is why content needs to be screen-specific.<\/p>\n<p>Let\u2019s discuss the digital space and before that let&#8217;s understand how users consume content on desktop, TV, mobile, etc. In digital space, users:<\/p>\n<ul>\n<li>Tend to scan rather than read page content.<\/li>\n<li>Are less patient compared to printed documents.<\/li>\n<li>Have a low tolerance for paragraphs and sentences.<\/li>\n<li>Want fast access to the content?<\/li>\n<\/ul>\n<p>As a designer, you need to organize and design the content in such a way that it helps users to quickly access, consume and take action. This can be achieved as mentioned below:<\/p>\n<h4>Capitalization &#8211; When to use which?<\/h4>\n<ul>\n<li>Use \u201cTitle case capitalization\u201d when displaying Primary Navigation Tabs, and Secondary Navigation Tabs including steps in Sequential Navigation, Button Labels, Group, and Column headers.<\/li>\n<li>Use \u201cSentence case capitalization\u201d when displaying Page Titles, Filed Labels, Bullet Items, Page body content, Instruction, Informational messages, and Hyperlinks.<\/li>\n<\/ul>\n<h4>Using Active Voice<\/h4>\n<ul>\n<li>Use \u201cActive Voice\u201d most of the time- especially when writing the instructions or labels that support user action.<\/li>\n<li>Multiple research reports have quoted that users scan the first 7-11 characters when scanning for relevant content.<\/li>\n<li>To facilitate the way users scan, use passive voice to get keywords up front in Headings, Sub-headings, Captions, Hyperlink Texts, and Bulleted lists.<\/li>\n<\/ul>\n<h4>Users Strive for Simplicity<\/h4>\n<ul>\n<li>Readers process and understand simple terms more quickly.<\/li>\n<li>Minimize the use of complex and technical terms.<\/li>\n<li>For U.S. Government agencies simplicity is legally mandated by the Plain Writing Act of 2010.<\/li>\n<\/ul>\n<h4>Avoid Acronyms &amp; Jargons<\/h4>\n<ul>\n<li>Be brief but not cryptic<\/li>\n<li>Avoid abbreviations, acronyms, and jargon.<\/li>\n<li>If the acronym is used as a word itself, then it may be ok to use it. For example NASA<\/li>\n<li>Always ask: Would your target audience understand this term without explanation?<\/li>\n<\/ul>\n<p>Above mentioned points will help to organize your content and make it easily accessible. The Below mentioned example will help\u00a0you to understand it more clearly:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-45888\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/3-300x226.png\" alt=\"3\" width=\"300\" height=\"226\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/3-300x226.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/3.png 491w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-45889\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/4-300x123.png\" alt=\"4\" width=\"300\" height=\"123\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/4-300x123.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/4.png 506w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>A successful design allows users to consume and understand the content and enables them to do it quickly, but writing content for different users is an art in itself. Let\u2019s discuss what should be the writing style.<\/p>\n<h3>1. Inverted Pyramid Writing<\/h3>\n<p>The inverted pyramid style of writing helps users get to the point quickly by scanning headlines and subtitles at the top. Be sure to present the conclusion at the top and put details at the end or on a\u00a0separate page.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45891 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/5.png\" alt=\"Inverted Pyramid Writing\" width=\"558\" height=\"372\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/5.png 558w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/5-300x200.png 300w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><\/p>\n<p>In this style of writing users quickly decide whether the content is relevant to them or not. It helps them to make the decision quickly. If the content is relevant to them then will continue further or else jump to another content. Below is the examples of pyramid-style writing:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45892 size-large aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/6-1024x350.png\" alt=\"Shopping website design\" width=\"625\" height=\"213\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/6-1024x350.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/6-300x102.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/6-624x213.png 624w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/6.png 1065w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45893 size-large aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/7-1024x381.png\" alt=\"media website design\" width=\"625\" height=\"232\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/7-1024x381.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/7-300x111.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/7-624x232.png 624w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/7.png 1077w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h3><strong>2. Bulleted List<\/strong><\/h3>\n<p>The bulleted list makes it easy for readers to skim for relevant content.<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45901 size-large aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/12-1024x605.png\" alt=\"Bulleted List\" width=\"625\" height=\"369\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/12-1024x605.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/12-300x177.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/12-624x368.png 624w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/12.png 1078w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h3><strong>3. Numbered List<\/strong><\/h3>\n<p>The numbered list helps a user to follow procedures, steps, sequences, and instructions more easily.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45904 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/21.png\" alt=\"Numbered List\" width=\"900\" height=\"223\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/21.png 900w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/21-300x74.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/21-624x154.png 624w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<h4><b>How to create content that is easily scannable by users?<\/b><\/h4>\n<p>Putting it all together in an example:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-45906 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/31-1024x701.png\" alt=\"3\" width=\"625\" height=\"427\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/31-1024x701.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/31-300x205.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/31-624x427.png 624w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/31.png 1078w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>With this, the explanation of the third pillar of design comes to an end. Let\u2019s move to the fourth one which is <strong>Interaction<\/strong>.<\/p>\n<h3>Interaction<\/h3>\n<p>Interaction is the point where visual design is <strong>processed (cognition)<\/strong> and the <strong>user\u2019s action (response\/motor)<\/strong> is initiated. Interaction design is a discipline that remains exciting because of the continual stream of new ideas collaborated with technical capabilities.<\/p>\n<p>Interaction can be broken down into 5 dimensions: words, visuals, objects\/space, time, and behavior. Visuals and objects\/spaces are what users interact with. Time is what users interact with. And finally, behavior is how users and the interface act and react.<\/p>\n<p>The below image indicates how \u201cInteraction\u201d happens with the system:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45916 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/process.png\" alt=\"website interaction process\" width=\"656\" height=\"404\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/process.png 656w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/process-300x184.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/process-624x384.png 624w\" sizes=\"(max-width: 656px) 100vw, 656px\" \/><\/p>\n<p>The design solution should be easily recognizable and actionable. A user should not get confused while interacting with the design.<\/p>\n<p>For example, A checkout button should look like a button, and a label should say that once you hit the button with a mouse or tap on it, it will take you to the checkout process.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-45910 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/51-300x105.png\" alt=\"5\" width=\"300\" height=\"105\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/51-300x105.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/51-624x220.png 624w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/51.png 675w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nIn the above image, both buttons will take users to the checkout process, but 1st button is confusing. A user will not know where he will be re-directed to after tapping\/clicking the same. Also, there will be no clear indication of how many steps are left to reach Checkout and place the order. So we can just simplify it by using the correct label and reducing the cognitive load on users.<\/p>\n<p>It also requires keeping consistency in your action items. For example:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-45911 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/61.png\" alt=\"6\" width=\"506\" height=\"288\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/61.png 506w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/61-300x170.png 300w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/p>\n<p>It concludes that What Interaction design is, how it works &amp; why it is important. Let&#8217;s deep dive into understanding the factors that impact Interaction.<\/p>\n<h2>Factors that influence Interaction<\/h2>\n<h3>1. Interface<\/h3>\n<p>The very first factor is Interface. This is the front face of the system which enables users to interact with it. It combines different UI elements, screen flow, and sequence. It has to be intuitive and informative enough so that users can understand how to navigate, how to complete a task, and information\/alerts after task completion or failure. Below is an example:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-46147 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/download.jpeg\" alt=\"Web Interface\" width=\"1400\" height=\"1301\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/download.jpeg 1400w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/download-300x278.jpeg 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/download-1024x951.jpeg 1024w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/download-624x579.jpeg 624w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<h3>2. UI Controls<\/h3>\n<p>UI controls are the enable which allows users to input the information. There are various types of elements: checkbox, radio button, dropdown, input field, input text area, search, sliders, switch, etc. It has to be well-defined and consistent in behavior. For example, if a checkbox allows a user to perform multiple selections. There should not be any event on it. If that happens, the user will never be allowed to carry out multiple selections.<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45918 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/ui_kit.png\" alt=\"ui_kit\" width=\"757\" height=\"379\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/ui_kit.png 757w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/ui_kit-300x150.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/ui_kit-624x312.png 624w\" sizes=\"(max-width: 757px) 100vw, 757px\" \/><\/p>\n<h3>3. Error handling and feedback messaging<\/h3>\n<p>As a designer, our job is to provide a solution, engage the user, and guide the user. It happens with every digital product that an error occurs due to any known\/unknown reason. So what should we do as a designer to make smooth interactions?<\/p>\n<ul>\n<li>Error Prevention<\/li>\n<li>Error Detection<\/li>\n<li>Error Handling<\/li>\n<li>Error Message<\/li>\n<li>Information Message<\/li>\n<\/ul>\n<p>Curious about knowing how to handle it? Let\u2019s go through it:<\/p>\n<h2>Error Prevention<\/h2>\n<p>Designs elements in your interface have to be error-proof so that it can reduce the effort load on the users. Most of the forms, checkout process, and registration process designs require such kind of process. There can be 2 types of error prevention:<\/p>\n<p>1. Error Prevention during data entry. It can be achieved using a few design enhancements:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-45919 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/8.png\" alt=\"Website Error Prevention\" width=\"611\" height=\"154\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/8.png 611w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/8-300x75.png 300w\" sizes=\"(max-width: 611px) 100vw, 611px\" \/><br \/>\n<strong>Disable non-applicable choices.<\/strong> Using this method design can help users to make fewer mistakes. Disable all features which are not applicable until some specific action and\/or task is completed.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45920 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/9.png\" alt=\"4 Pillars of design\" width=\"346\" height=\"542\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/9.png 346w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/9-191x300.png 191w\" sizes=\"(max-width: 346px) 100vw, 346px\" \/><br \/>\n<strong>Use selection instead of data entry.<\/strong> Less data entry means fewer chances of making mistakes. So allow users to do selection instead of data entry as much as possible.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45921 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/10.png\" alt=\"4 Pillars of design\" width=\"882\" height=\"313\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/10.png 882w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/10-300x106.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/10-624x221.png 624w\" sizes=\"(max-width: 882px) 100vw, 882px\" \/><br \/>\n<strong>Use auto-suggest to aid data entry.<\/strong> Google does it very well. Almost everyone uses the Google search engine. It provides you with auto-suggested keywords once you start typing. It helps users to make quick decisions and that too with fewer chances of errors.<\/p>\n<p>2.<b> Error Prevention: <\/b>Preview and confirmation. If you are designing some forms that have captured lots of information from the user, it is always suggested to provide a summary of whatever has been filled. It helps to reduce the chances of filling the wrong information and making the system seamless. Below is a few examples that helps to understand it more:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45922 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/111.png\" alt=\"4 Pillars of design\" width=\"319\" height=\"567\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/111.png 319w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/111-168x300.png 168w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/><br \/>\n<strong>Provide a preview before completion.<\/strong> It helps users to confirm their task and it&#8217;s stored in mind for a longer period. Also, allow users to modify if any mistake has been made. For example: In the checkout process, you select an item, checkout and provide details, see the summary, and then confirm your order.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-45923 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/121.png\" alt=\"Design Process\" width=\"412\" height=\"732\" \/><br \/>\n<strong>Require confirmation on destructive or attempts to make permanent changes.<\/strong> Mostly in case of deleting or removing something. It helps to ensure that you don\u2019t perform a task that is not reversible.<\/p>\n<h2>Error Handling<\/h2>\n<p>In digital media, users are bound to make mistakes because there are various input methods being used in the digital media. It\u2019s a designer&#8217;s job to design the system in such a way that even if an error has been detected, it can be handled automatically to ease the users. When you know the solutions, provide alternatives to the user. The most common and appropriate example is Google search. The below images will help to understand how Google handles the error:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-46149 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/chat_screen.png\" alt=\"chat_screen\" width=\"321\" height=\"396\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/chat_screen.png 321w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/chat_screen-243x300.png 243w\" sizes=\"(max-width: 321px) 100vw, 321px\" \/><br \/>\nFix it by providing alternative solutions or keywords.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-45925 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/14-300x133.png\" alt=\"14\" width=\"300\" height=\"133\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/14-300x133.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/14.png 531w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nInform the user to fix it just in case auto-fix was enabled.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-45926 aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/15-300x121.png\" alt=\"15\" width=\"300\" height=\"121\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/15-300x121.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/15.png 562w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\nAsk for permission to fix it in case a user has deliberately made some error.<\/p>\n<h2>Error Messages<\/h2>\n<p>Error messages are displayed in multiple ways. For example, Secondary window error message, Embedded message indicates where an error was made etc. Below are a few examples:<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45927 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/16.png\" alt=\"Error Messages\" width=\"694\" height=\"555\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/16.png 694w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/16-300x239.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/16-624x499.png 624w\" sizes=\"(max-width: 694px) 100vw, 694px\" \/><\/p>\n<p><strong>Information Messages<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45928 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/17.png\" alt=\"Information Messages\" width=\"801\" height=\"458\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/17.png 801w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/17-300x171.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/17-624x356.png 624w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/p>\n<p>That&#8217;s all about Interaction. Let&#8217;s understand how Visual Design impacts Interaction. The visual design shows the current status of interaction (which functions are active and which are not).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-45929 size-full aligncenter\" src=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/18.png\" alt=\"visual design impact on interaction\" width=\"788\" height=\"345\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/18.png 788w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/18-300x131.png 300w, \/blog\/wp-ttn-blog\/uploads\/2017\/02\/18-624x273.png 624w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><\/p>\n<p>These are not the only thing that we need to take care of when designing but various input methods also remains a challenge. Let&#8217;s explore this more:<\/p>\n<ul>\n<li><strong>Keyboard + Mouse:<\/strong> Switching from a keyboard to a mouse slows down users by 3-8 keystrokes. This can be solved by minimizing device switching by keeping the site or application either keyboard or mouse-oriented. Also designers can provide keyboard shortcuts for trained users whenever possible.<\/li>\n<li><strong>Touch Interface:<\/strong> Gestures, such as swipe or double tap need to be visually depicted and require a low learning curve. Data entry should be reinforced with strong visual, audio, and\/or haptic (tactile) feedback.<\/li>\n<\/ul>\n<p>Design plays a vital role in the success of a product and Visual Design itself is a very large subject. It also depends on an individual\u2019s common sense, and visualization. The 4 pillars of Design: Navigation, Presentation, Content, and Interaction help to design a beautifully crafted user-centric product. Visual design focuses on the aesthetics of a product and its related materials by artistically implementing images, colors, fonts, and other elements. A successful visual design does not take away from the flow of the page or functionalities. Instead, it enhances it by engaging users and helping to build trust and interest in the brand.<\/p>\n<p>Let\u2019s use these basic tips and design a beautiful, usable product for your users.<\/p>\n<p>&nbsp;<\/p>\n<p>Related Articles:<\/p>\n<p><a title=\"How Visual Design help to improve User Experience?\" href=\"\/\/www.tothenew.com\/blog\/how-visual-design-help-to-improve-user-experience\/\">How Visual Design help to improve User Experience?\u00a0<\/a><\/p>\n<p><a title=\"Creating User Experience\" href=\"http:\/\/www.tothenew.com\/blog\/4-essential-elements-for-designing-a-great-user-experience\/#sthash.8geGmNIA.dpuf\">4 Essential Elements for Designing a Great User Experience\u00a0<\/a><\/p>\n<p><a title=\"Collaborative Design thinking\" href=\"http:\/\/www.tothenew.com\/blog\/collaborative-design-thinking-a-unified-discipline-framework-for-innovation\/#sthash.cVTxrihd.dpuf\">Collaborative Design thinking \u2013 A unified discipline &amp; framework for innovation\u00a0<\/a><\/p>\n<p><a title=\"UX Principles\" href=\"http:\/\/www.tothenew.com\/blog\/6-ux-principles-that-guide-product-design\/\">6 UX Principles That Guide Product Design\u00a0<\/a><\/p>\n<p><em style=\"color: #b0b0b0;\">Image\/Screenshot Source:<\/em><br \/>\nwww.google.com, www.flipkart.com, , http:\/\/www.nishitamuhnot.com\/portfolio\/expedia\/, http:\/\/www.joycexu.com\/user-interface-design-1\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every design and\/or architecture has some basics and so does Visual Design. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier. Visual Design has Four Pillars Namely Navigation Presentation Content Interaction I had already covered the first two pillars i.e. [&hellip;]<\/p>\n","protected":false},"author":717,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":143},"categories":[3887,3429,1],"tags":[4004,3598,3432,3994,4003,4188,3600,3110,3998],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/45878"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/717"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=45878"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/45878\/revisions"}],"predecessor-version":[{"id":68764,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/45878\/revisions\/68764"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=45878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=45878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=45878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}