Improve Your Interaction Design with 6 Principles

The “Start” CTA for directions on Google Maps has a blue background and uppercase label to differentiate it from surrounding actions. The CalFresh application CTAs use a different color and elevation to stand out.
In this visual above, on the left the user has many options to choose from and will take longer to decide. You can make this easier by limiting the number of options in view, but the best solution is to limit the total number of options.
Log in or sign in pages are similar across products to make it easier for users to complete and reduce cognitive load.
The “Slide to Unlock” interaction uses a text label, an arrow icon, and the metaphor of a physical slider to afford how to unlock the device.
This example from Adobe XD shows a good example of feedback, where the user understands that the Save task is occurring or is complete. In the bad example, there is no feedback to indicate to the user that anything is happening as a result of their click.
Amazon uses many different button styles throughout their web e-commerce experience. This can lead to confusion if the same task or purpose is achieved by two different button styles.
This visualization by Steven Hoober summarizes the different ways people hold and use their phone.

Pop Quiz

The Worst Online Giving Form I’ve Ever Seen by Matt Chandler

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store