Every interaction has at least three parts.<\/p>\n
- \n
- Action:<\/strong> the change that occurs<\/li>\n
- Element:<\/strong> which item on the canvas is acted upon<\/li>\n
- Trigger:<\/strong> what the user does to kick off the interaction<\/li>\n<\/ul>\n
A few others, like “set step,” “toggle,” and “move to”, have additional options like step, animation type, and distance, respectively.<\/p>\n
![\"Basic](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Basic-interaction-panel.png\")
<\/p>\nFrom buttons to boxes to images to groups, you can make any element in UXPin interactive. And any element can have more than one interaction. For example, a button can change color on hover, and take users to another page on click. A few simple interactions can make most any element change basic properties to give the user more information, as when a button darkens on hover to indicate that it’s clickable.<\/p>\n
Actions<\/h2>\n
When users trigger an interaction, an action affects one or more elements on the canvas. For example, on hover (the trigger), a button may turn brighter (a color action).<\/p>\n
The actions are:<\/p>\n
- \n
- Show, Hide, and Toggle<\/li>\n
- Go to page and Go to URL<\/li>\n
- Scroll to element<\/li>\n
- Move to and move by<\/li>\n
- Opacity and Color<\/li>\n
- Size and Rotate<\/li>\n
- Advanced animation<\/li>\n
- Bring to front<\/li>\n
- Send to back<\/li>\n
- Set state<\/li>\n
- Previous and Next state<\/li>\n
- Disable and enable form elements<\/li>\n
- Check and uncheck form elements<\/li>\n
- Focus on a form field<\/li>\n<\/ul>\n
Element<\/h2>\n
The element is an item that changes when actions are triggered. Although any element or group can take an action, different kinds of elements can accept different actions. For example, an interaction can change a box’s color, but not a group’s. By the same token, the “next state” action only affects multistate elements<\/a>. Learn more about special element interactions<\/a>.<\/p>\n
Triggers<\/h2>\n
When the user interacts with an element, they cause an action to begin. These are standard interactions, like clicking or hovering, that are common to human\/computer interfaces. The triggers in UXPin are:<\/p>\n
- \n
- Click (tap)<\/li>\n
- Double click (double tap)<\/li>\n
- Right click<\/li>\n
- Hover<\/li>\n
- Mouse in and out<\/li>\n
- Swipe up, down, left, and right<\/li>\n
- Touch and hold<\/li>\n
- Hold release<\/li>\n
- On focus<\/li>\n
- On blur<\/li>\n<\/ul>\n
Common Actions<\/h2>\n
Simple interactions can make a big difference in how users react to interfaces. And there are plenty you can do with them. For example:<\/p>\n
- \n
- Make a button change on hover to indicate that it’s clickable.<\/li>\n
- Make a search box appear on demand.<\/li>\n
- Send users to a real landing page when they fill out a simulated form.<\/li>\n
- Make a modal window group appear when users click a login button.<\/li>\n
- Take users to the top of a scrolling view on click.<\/li>\n
- Reveal text information when users hover over an image thumbnail.<\/li>\n
- Make a drop-down menu appear when users’ cursors enter a tab.<\/li>\n
- Take users to a new page or view when they double-click an app icon.<\/li>\n
- Hide unnecessary form fields is users click a certain radio button.<\/li>\n<\/ul>\n
Related resources<\/h2>\n
- \n
- Article:<\/strong> Interaction Design Trends: 11 Microinteractions Deconstructed<\/a><\/li>\n
- Article:<\/strong> An Introduction to Interactions With Material Design<\/a><\/li>\n
- Tutorial:<\/strong> How to Make Expanding Buttons in UXPin<\/a><\/li>\n
- Tutorial:<\/strong> Hide the Right Functions With Custom Drop-down Lists<\/a><\/li>\n
- Ebook:<\/strong> The Practical Handbook to Rapid Lo-Fi Prototyping<\/a><\/li>\n
- Get a free trial<\/a><\/strong><\/li>\n<\/ul>\n
Ask a question<\/h2>\n
- Article:<\/strong> An Introduction to Interactions With Material Design<\/a><\/li>\n
- Article:<\/strong> Interaction Design Trends: 11 Microinteractions Deconstructed<\/a><\/li>\n
- Element:<\/strong> which item on the canvas is acted upon<\/li>\n