7 Simple Rules for Creating Elegant UI Interactions

Exquisite UI interaction design: win with elegance rather than show off

Key Points

• The elegance of UI interaction design is to ensure a smooth, user-friendly transition to support user operations rather than fancy, distraction elements.
• Microinteractions, such as drop-down menus or displaying product details, should be carefully designed to enhance usability and trigger positive emotional responses from users.
• Key rules for creating elegant UI interactions include: avoiding instant jumps, but using transitions; using toggle switches instead of buttons; placing triggers nearby; using natural transition times; ensuring that transition rollbacks do not destroy users ; automatically focus on the next operation in a series of operations; always sending a signal of interaction completion to the user.
• The more the UI interaction conforms to the physical laws of the real world, the more natural and elegant it feels. It is crucial to test and tweak these interactions to ensure they are intuitive, consistent, efficient, and provide adequate feedback to users.

The new term "interactive design" has been closely linked to the UX design process. After 2015, instant switching between interface elements between two static states is no longer enough. Today, words like “slide,” “bounce,” and “bounce back” have become part of the discussion on how good user interfaces work.

However, in the field of interaction—like expensive watches—“glamorous” does not necessarily mean “elegance.” While we may be curious about the complexity of this fancy watch (picture) below, I suspect that few of us would really want to wear it. In our interface design, natural elegance almost always outweighs the decoration.

If you are as creative as me, it is easy to be attracted to creating fancy interactions just to make your website feel more modern and engaging. Of course, we know in our hearts that this approach may be one of the most reliable ways to disrupt the entire user experience.

So, I found it very important to focus on those smooth, pleasing animations that our users hardly notice them. At that time, our animations will move away from the spotlight and support what the user is trying to perform.

Why is this important?

Why does Apple spend so much time and money on packaging that are often thrown into recycling bins very quickly? Why do luxury car companies adjust the sound of doors closing?

This is because we find that subtle, seemingly unimportant details can have a disproportionate impact on a good design and elevate the UX from "good" to "excellent".

Enrich your website with beautifully designed "micro-interactions" that not only makes it easier to use, but also triggers positive emotions among users (just like opening an Apple box). Experience this emotion means consuming more dopamine, which actually helps them become addicted to your website/app.

So, what is "micro-interaction"?

When the user enters (e.g., clicks, drags, type content), your website reacts—this is interaction. This is a way for users to communicate with your website, so it is part of the conversation. When designing the flow of behavior of users on your website, you can always use several different types of interactions:

1. Navigation interaction: When the user finally enters a brand new page/state.
2. Modal Interaction: When the current state of the website is frozen and some temporary state is displayed on top of it (for example, the "Lightbox" gallery or the confirmation dialog).
3. Microinteraction: When you want only individual elements within the page to react to user input—for example, display a drop-down menu or display more details of the product.

How do we make these microinteractions more elegant?

A website should feel like a concert of interactive interface elements, working together to impress you. Elegance is the key criterion for making this impression. While it is difficult to define elegance in purely technical terms, we can use some logical tricks to help us create elegant interactions. Key Rule #1 – No instant jump

The idea is simple - always use transitions when changing elements on a page. This means there shouldn't be any quick cut on your GUI. Each element that appears, disappears, or transforms should be implemented using easing or/and animations.

This helps the user focus on the area you want them to focus on. Of course, this also creates a sense of elegant and consistent flow.

### Rule #2: Toggle switch is better than button

At home, you usually use the same switch to turn the light on and off. The same concept applies to the toggle controls on your website. If a toggle control triggers a new state of a given element, the control with the same

should roll back that state.

In addition, according to Fitz's law, such controls should require little effort to quickly switch between on and off states. ### Rule #3: Triggers should be nearby

The transition always requires some kind of trigger. When interacting, our users usually focus on this trigger element. This means that the transition must begin at

or very close to the

trigger. If you start the transition too far from the trigger element, it is easy for users to miss it and the process will be interrupted.

In addition, the transition should usually propagate from the trigger to where you want to focus your user's attention. The trick is simple - you guide the user's eyes from the trigger to where they should go about the next step. This way, the user won't lose focus and will get straight to where you want them to go.

### Rule #4: Use natural transition time

The transition time defines the duration of the animation to play. The main problem with time is that there is no wand that can do this. If you make your transition too long, it creates a pain point for users who repeat the same interaction frequently or quickly.

On the other hand, if it is too short, it will feel unnatural – or the user may miss it altogether. Unfortunately, all you can do is use your ignite eyes and intuition to evaluate the transition. The best advice I found is not to let all transitions have the same time. Just try it casually and find the right balance point. Also note that even the difference of 0.05 seconds is important.

### Rule #5: Transition rollback should not destroy the user's sense of control

Sometimes, users change their minds quickly during the transition process. In these cases, transitional responsiveness is crucial. If the user canceled the last interaction (e.g., two clicks on the trigger button), the transition animation should be reversed immediately. If not, our users will immediately lose control. Additionally, you will make your users think they are doing something wrong.

### Rule #6: Always automatically focus on the next operation in a series of operations

This technique is aimed at the interaction of users performing a series of actions. When designing such sequences, you should always avoid any unnecessary interactions and always set focus on the next control in the sequence. The most basic example of this interaction is the [edit] button, which opens a form and magically focuses on the first field so that the user does not need to click it manually.

### Rule #7: Always tell the user when to complete

The user should always be able to identify when the interaction is completed. If your interaction does not change in some obvious way when it is completed, you should always consider implementing some kind of visual feedback, telling the user "Hey, you're done!". If you skip this, users tend to repeat the same action multiple times, making mistakes and possibly even destroying something valuable.

Apply these tips

In short, you can use these tips as cheat sheets for micro-interactions on your website. It should help you design the details of the interaction before implementing the micro interaction.

However, there is a high probability that you will not be able to achieve perfection the first time. In this case, you need to adjust to your own situation – so be prepared to give it a little. And... Finally, there is another suggestion for you. Generally speaking, the more your interactions obey the laws of real-world physics, the more natural and elegant they are.

I wish you a happy animation production!

Frequently Asked Questions about Creating Elegant UI Interactions

What key principles need to be considered when designing UI interactions?

When designing UI interactions, be sure to keep the user in mind. The interaction should be intuitive and easy to understand. Consistency is also key – users should not guess how to interact with your interface. The interaction should also provide feedback to the user, letting them know that their operations have been identified and are being processed. Finally, interaction should be efficient, minimizing the steps users need to take to achieve their goals.

How to make my UI interaction more attractive?

To make your UI interaction more attractive, consider adding animations. Animation can make the interaction feel more energetic and can also provide valuable feedback to the user. However, be sure to use animations with caution and not let them distract from the main task. Additionally, it may be considered to use sound or haptic feedback to enhance interaction.

What common mistakes should be avoided when designing UI interactions?

Some common mistakes that should be avoided when designing UI interactions include making the interaction too complex, not providing enough feedback to the user, and inconsistency. Too complicated interactions can confuse users and make your interface difficult to use. Lack of feedback may make users unsure whether their actions have been identified. Inconsistency can make your interface unpredictable and frustrating.

How to test the effectiveness of my UI interaction?

You can test the effectiveness of UI interaction through user testing. This includes observing the user's interaction with the interface and collecting feedback. You can also use analytics tools to track how users interact with the interface and identify any difficult or confusing areas.

How to improve the accessibility of UI interaction?

To improve accessibility of UI interactions, consider how users with different capabilities will interact with your interface. For example, make sure your interactions can use the keyboard so that users who cannot use the mouse can also use it. Also, make sure your interactions are compatible with screen readers and other assistive technologies.

How to incorporate storytelling into my UI interaction?

Story telling can be incorporated into your UI interaction by creating narratives around user journeys. This can be achieved by using animations, sounds, and visual cues to guide the user through interactions.

What are the resources to learn more about UI interaction?

There are many resources available to learn more about UI interaction. Some popular resources include online courses, blogs, and books on the topic. You can also learn a lot by studying the UI interactions of popular applications and websites.

How important is speed in UI interaction?

Speed ​​is very important in UI interaction. Users expect interactions to be responsive and fast. Any delay can lead to frustration and can cause the user to give up the task.

How to use colors to enhance my UI interaction?

Colors can be used to enhance UI interaction by attracting attention to important elements, indicating status and providing feedback. However, it is important to use colors carefully and consistently and to consider color blindness in your design.

How to keep up with the trend of UI interaction?

To keep up with the trend of UI interaction, it is best to follow industry blogs, attend design meetings, and join the online community of UI designers. You can also learn a lot by studying UI interactions between new and popular apps and websites.

The above is the detailed content of 7 Simple Rules for Creating Elegant UI Interactions. For more information, please follow other related articles on the PHP Chinese website!