![\"image06\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/02\/image06.png\")
<\/p>\n![\"Interaction](\"http:\/\/upload.wikimedia.org\/wikipedia\/de\/4\/41\/Interaction-Design-Discipli.png\")
<\/figure>Do you want to know more about UI Design?<\/h3>
Download 'Interaction Design Best Practices' FOR FREE!<\/span><\/p>Download e-book for free<\/a><\/article><\/section>Close<\/a><\/section> Affordances and signifiers are a great shortcut for improving the other pillars of IxD.<\/p>\n An affordance is a feature\u2019s evident function (e.g., a video <\/span>affords<\/span><\/i> playing), whereas signifiers are visual cues suggesting that feature\u2019s affordance (e.g., a play button within a screen <\/span>signifies<\/span><\/i> that it\u2019s a playable video).<\/span><\/p>\n Drawing on the user\u2019s previous experience with similar sites and apps (as with <\/span>UI Patterns<\/span><\/a>), signifiers give the interface an intuitive feel. They\u2019re meant to seem familiar to the user, like they\u2019ve used them before.<\/span><\/p>\n Photo credit: <\/span><\/i>The Onion<\/span><\/i><\/a><\/p>\n For this reason, designers shouldn\u2019t deviate too far from convention; for example, a right-facing triangle almost always represents a play button. The more a signifier deviates from convention, the more effort it takes to decipher what it is.<\/p>\n The time it takes for a user to figure out an interface and its controls is what\u2019s called \u201clearnability.\u201d Learnability is important for more than just convenience \u2014 if the learning curve takes too long, they\u2019ll likely give up and abandon the product. <\/span><\/p>\n The two main components of learnability are:<\/span><\/p>\n If your interface is inherently confusing and difficult to learn, you can increase learnability through <\/span>onboarding<\/b>. (For more information, our free <\/span>UX Design 2015 & 2016<\/span><\/a> guide is a great resource and covers best practices on the topic.)<\/span><\/p>\n Without feedback, there is no interaction. Think of it as a conversation between the user and the interface: the interface \u201cspeaks\u201d in response to the user\u2019s actions, meaning the user is no longer talking to themselves. At minimum, feedback is the task being performed, but going beyond this is an opportunity to improve UX, from subtle microinteractions like a cute sound effect alert, to grandiose animations that supplant the actual task as the reason to click. <\/span><\/p>\n Photo credit: <\/span><\/i>Gmail<\/span><\/i><\/a><\/p>\n Whenever dealing with feedback, it\u2019s essential to keep response time in mind. Feedback should come almost instantaneously\u2014<\/span>ideally within 0.1 seconds<\/span><\/a>\u2014to make the user feel in control of the interface. Anything longer than that destroys the illusion of control and detaches the user from the system. Consider how frustrating it would be to play a guitar but not hear the notes for a full second after you plucked the strings.<\/span><\/p>\n Here are 4 general techniques that can be applied to any project to improve the interaction design. <\/span><\/p>\n Regular testing is the surest way to stay on track. Ideally, you\u2019ll want to test during each iteration since you\u2019ll be able to incorporate feedback every time you move forward. Prototypes are not something to be ignored or only done at the end of a project.<\/p>\n <\/p>\n Photo credit: <\/span><\/i>UXPin<\/span><\/i><\/a><\/p>\n Low-fidelity prototypes, such as paper prototypes or <\/span>interactive wireframes made in UXPin<\/span><\/a>, test issues like flow and navigation early on (before changes become too difficult to implement). In the later stages, high-fidelity prototypes test overall functionality of a near-finished product, as well as visual interactions and the success of signifiers.<\/span><\/p>\n User flows<\/span><\/a> map out the step-by-step, standard actions a user takes to accomplish a goal. They\u2019re wonderful forms of documentation that can help designers better understand user behaviors and modify the interface accordingly. User flows also help by revealing unnecessary steps, highlighting places to reduce friction.<\/span><\/p>\n We generally recommend two types of user flows: the written approach (<\/span>best explained by Jessica Downey<\/span><\/a>) is more detailed and can aid constructive thinking, whereas the shorthand approach (<\/span>described by Basecamp\u2019s Ryan Singer<\/span><\/a>) is better for quick organization.<\/span><\/p>\n Don\u2019t be fooled into thinking empty space is wasted space. As part of a complete composition, white space is itself a visual element\u2014not a blank canvas to be filled. Painters and visual artists have known the power of white space for years, something designers are also working to their advantage:<\/p>\n Photo credit:<\/span><\/i> Leen Heyne<\/span><\/i><\/a><\/p>\n To learn more about spacing, read the free <\/span>Web UI Design for the Human Eye: Volume I<\/span><\/a>. <\/span><\/p>\n Animations are often used as flourishes or \u201cthat little something extra,\u201d but they have a few practical benefits, as well: <\/span><\/p>\n Keep in mind that these are just the basics of interaction design, but you can put its powerful concepts to use right away. With new studies coming out all the time, IxD can help you improve your product and gain insights into your users.<\/p>\n For a complete treatment of IxD, download our free <\/span>Practical Interaction Design Bundle<\/span><\/a>. This collection includes three full ebooks on the topic, with over 250 pages and more than 60 examples from companies like AirBnB, Netflix, Etsy, and more.<\/span><\/p>\n3. Affordances and Signifiers<\/span><\/h3>\n
<\/p>\n5. Learnability<\/span><\/h3>\n
\n
\n
5. Feedback (and Response Timing)<\/span><\/h3>\n
<\/p>\nHow to Improve Your Interaction Design<\/span><\/h2>\n
1. Test Early and Often with Prototypes<\/span><\/h3>\n
<\/p>\n2. Create User Flows to Understand User Behaviors<\/span><\/h3>\n
3. Proactively Use White Space <\/span><\/h3>\n
\n
\n
<\/p>\n\n
4. Apply the Practical Benefits of Animation<\/span><\/h3>\n
\n
\n
Further Reading<\/span><\/h2>\n