Interactive States
Include focus, hover, and click/tap states
A common mistake designers make is forgetting to add interactive states. How should the UI change when an element is hovered or clicked? Here are two approaches:
- Mockup the states on the trip card
- Show the states on the Master Components page, ideally using variants. Unsure how to do this? No worries, set them up as regular components, and I’ll show you how to turn them into variants when we cover components later in this course.
✨ Project Check-in:
In the project file, document interactive states for the button.
Triggers
Specify what triggers the interaction.
- Do dropdowns appear on hover, tap/click, or both?
- Is auto-play paused?
- What makes them disappear?
- Is there a time limit when filling out a form?
- When designing an accordion, when opening one row, should any other open row automatically close? When a section is opened, should the user be scrolled automatically to the top of the section?
Interactive area
Sometimes the interactive area extends outside of the element, to allow for a larger interaction area. This is especially true on mobile, where larger touch target sizes are needed to accommodate fingertips. Document this using an overlay. In the example below, the semi-transparent red boxes indicate the interactive area expands beyond the arrow icons when navigating through the image carousel.
Scrolling Behavior
When a user scrolls, do some elements stay fixed in their place? You have a few options when documenting, in order from easy → harder:
- Include a note next to the screen, describing the scrolling behavior
- Mockup how the screen should look when scrolling
- Prototype the scrolling behavior. For bonus points, show the easing and other effects.
Consider performance issues too. It’s a good idea to turn off parallax scrolling for those with slower internet connections or less performant phones.
Feedback Messages
Include status messages such as error, warning, and info alerts. If further clarification is needed, add a note to explain what triggers the alert.
✨ Project Check-in:
In the project file, document error messages for image sync issues.
Forms
When designing forms, specify if the validation should happen instantly while the user is typing, wait until the user moves on from the field, or wait until the form is submitted. Each way has its pros and cons. When validating an email address, it can be annoying to flash a “missing @” error while the user is typing. It’s better to wait until they navigate to the next field or submit the form.
Elements that show and hide
Some parts of a user interface are hidden at times, such as a dropdown in a form, expandable navigation, or a keyboard on mobile. Show how the UI should look when hidden elements are visible and hidden.
Animations
Animations can be tricky to communicate if you’re like most UX designers and don’t have animation skills. Here are some options:
- Simple animations, such as flip or fade animations, can be prototyped in Figma or Adobe XD.
- Describe the animation in a note and talk about it with the developer. It helps to find a similar animation and use it as an example.
- Use an animation tool like Lottie. How to Easily Implement Animations with the Power of Lottie. They even offer a library of free animations (be sure to add an attribution).
✨ Project Check-in:
In the project file, describe how the “View” arrow should animate
Prototype
If you have time, prototype your mockups! Prototypes dramatically help visualize interactions.
- Simple screen-to-screen transitions can be made in Figma, Adobe XD.
- Adobe XD has 3D transforms. There may be some other plugins that extend Figma and XD.