10 common methods to improve UI details and experience

If you think your UI design is boring and want to make it look more interesting, there are actually many relatively common methods. Most of these methods are not complicated, and with a little adjustment, there will always be good results. If you want to try, you might as well try these 10 ways I have summarized to give UI personality.

[[346155]]

1. Bring life to your copy

Whether it’s the onboarding process or loading information, it should be fun in itself. That’s why products from brands like Old Spice and Geico are so well-known and influential.

By introducing elements of humor and personalization into marketing, better advertising effects and content presentation can be achieved.

Aarron Walter, UX design director at MailChimp, said: “We’ve found that infusing workflows with humor, Easter eggs, mascots, and lots of personalization can transform mundane tasks into experiences that people look forward to and don’t want to miss.”

The difference between “Loading…” and “Our trained monkeys are working hard on…” is that the latter is more alive.

Good copywriting does not necessarily mean it is humorous. Of course, the need for humor is different in different industries. Some websites and apps should be serious, so it is best not to use humorous copywriting.

When designing your next product, consider how to make the user experience more humorous and engaging.

2. Add icons and emoticons

Adding emojis and icons can make your design more self-explanatory. When you see the magnifying glass icon, you immediately know that clicking it will allow you to search.

I like how Pieter Levels designed his website NomadList, using emojis to make it more appealing and friendly. This makes your UI more visually appealing, simple and effective.

Apart from that, two things to note are, first, don’t use it too much, and second, don’t reinvent the wheel or use it “too innovatively.” Try to make it interesting, not irritating, “+” means add, the cart icon means cart, the gear icon means settings, and don’t change these conventions.

Here is where I get the emoji icons from:

• Emojione
• Icons8
• BoxIcons
• Feather
• Material

3. Humanize your product with illustrations

You can easily convey complex information through illustrations.

We have been trained to connect language and complex visuals since childhood. The various illustrations and children's books we saw when we were young were all learning materials.

Adding illustrations to product design can balance the interface, attract user attention, and make the interface's functions and information easier to understand.

But more importantly, illustrations need to have a clear purpose and be a supplement to the content, not a replacement. Illustrations should improve the user experience, not interfere with the operation, and the style and interface should be consistent, not out of place.

The places where I usually get illustrations are:

• Ouch!
• Freepik
• Undraw
• Humaans

4. Dark Mode

If the app you are developing now has a dark mode, it is a blessing for users like me who live in dark mode all year round. Dark mode makes it easier for the eyes to adapt, and people don’t feel like they are staring at a glaring light bulb all the time.

There is not much difference in design between dark mode and light mode. It is nothing more than modifying the entire color scheme, but the color configuration needs to be carefully adjusted according to the specifications. I suggest letting users decide whether to use dark mode or light mode. Switching between modes can bring users a good experience and give users a stronger sense of control.

5. High-quality pictures

Images are as important as any other element in an app. You need to be very careful in choosing high-quality images, which can make the UI and experience very vivid and interesting, and enhance the overall effect of the UI interface. There are many great places to find high-quality images, and here are my favorites:

• Unsplash
• Pexels
• Freepik
• Adobe Stock
• Pixabay

6. Make error states less frustrating

You should view every event in your app—even the less-than-nice error states—as an opportunity to make a positive, lasting impression.

Error states are often perceived as negative, but if you can help users resolve the issue while also adding personality and fun, you can turn it into a positive experience.

I have always loved the design of the "Network Disconnected" error interface of Google Chrome browser. It provides almost all the necessary information, including guidance on how to fix the network, and a small dinosaur parkour game that has received a lot of praise! It is a genius design!

I also really like the design of Dribbble’s 404 page. It’s great because it’s really well designed and it makes users quickly return to their various designs.

7. Add animation

Since motion effects entered the design process, it has become an indispensable part of the design process. Whether it is animation effects based on illustrations or micro-interactions based on UI elements, motion effects are everywhere.

On Dribbble, there are many kinds of motion effects. However, for users, they still expect the motion effects to be as close to the actual experience in the real world as possible. They expect objects to move according to the usual physical rules.

For example, easing. If we apply force to a ball and kick it, it will first speed up and then slow down. This process is realistic. These physical rules are the basis of motion effects and the basis of reality.

Tools such as Pincipled, XD animation, Invision Studio, AE, Lottie, Flinto, etc. are gradually emerging, allowing designers to create motion effects better and faster.

I prefer the auto-animate feature in XD because it’s intuitive and allows me to quickly validate the feasibility of ideas before I invest a lot of time and effort.

Another great tool I’ve been using a lot lately is Lottie from Airbnb. Lottie allows me to easily convert any AE animation into a more web-friendly SVG animation.

Similar to illustrations, animations should be targeted and should prioritize the experience rather than distract the user. If you want to create a systematic animation, you might want to take a look at the design specifications provided by Material Design.

8. Help users focus on details through micro-interactions

Similar to animation, micro-interaction can bring unexpected and subtle experiences to users, allowing you to perceive the real-world experience in the APP, and micro-user interaction brings effective and immediate feedback.

In Medium, the micro-interaction of clapping (like) is a typical example of enhancing the experience. This is completely different from the like in Youtube, where the like only has a simple color change from gray to blue without animation. This is directly related to the content attributes of the two platforms: text content needs micro-interactions to enhance perception, while in video platforms, such micro-interactions will distract users and need to be weakened.

9. Add patterns and gradients

Patterns and gradients are an effective way to make an otherwise unappealing design more eye-catching and beautiful. Adding texture, patterns, or gradients to an image or background can quickly spice up an otherwise bland design.

Of course, you can use your creativity based on the actual situation, but you must pay attention to one thing, that is, don't let it overshadow the main theme.

[[346156]]

10. Use shadows to add depth

Don't forget the visual Z axis!

Shadows are a great way to add depth to your designs, making them appear more three-dimensional.

Different elements have different depths, and visually, the closer the element is to the user, the more important it is, and this importance is presented by shadows.

But using shadows just because they “look good” is problematic. Be intentional when making design decisions. When adding shadows, remember to prioritize and add shadows to the most important parts.

Conclusion

There are many techniques to improve the UI's sense of detail, visual sense, and experience. Design with a goal in mind and you will always find ways to improve.