Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the common ways to improve UI details and experience". In daily operation, I believe many people have doubts about the common methods of improving UI details and experience. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the questions of "what are the common methods to improve UI details and experience?" Next, please follow the editor to study!

1. Inject life into the copywriter

Whether the new user guides the process or loads the information, it can bring fun to the user. This is why products under brands such as Old Spice and Geico have such a wide range of awareness and influence.

By introducing humorous and personalized elements into marketing, it can bring better advertising effect and content presentation.

Aarron Walter, director of UX design at MailChimp, said: "We have found that by cramming a sense of humor, eggs, mascots and many personalized elements into a workflow, you can turn an ordinary task into an experience that people don't want to miss. "

"loading. "and" our trained monkeys are working hard. "the difference between them is that the latter is more dynamic.

A good copywriter does not necessarily mean it is humorous. Of course, in different industries, the need for humor is different. Some websites and APP itself should be serious, so it's best not to use humorous copywriting.

When designing the next generation of products, consider how to make the user experience more humorous and engaging.

2. Add icons and emoji

Adding emoticons and icons can make your design clearer at a glance. When you see the magnifying glass icon, you will immediately realize that you can click this icon to search.

I like Pieter Levels's design for his website NomadList, which uses emoticons to make it more attractive and friendly. This makes your UI more visually appealing, simpler and more effective.

In addition, there are two things to pay attention to: one is not to use too much, and the other is not to reinvent the wheel or use it "too creatively". Try to make it interesting, not annoying. "+" means to add, the shopping cart icon means the shopping cart, the gear icon is the setting, and the convention is not to move.

Here is the source of the emoji for which I got the icon:

Emojione

Icons8

BoxIcons

Feather

Material

3. Make your products more humanized through illustrations

You can easily convey complex messages through illustrations.

From an early age, we have experienced training in connecting language with complex vision, and the various illustrations and children's books we see when we are young are all materials for learning.

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

But what is more important is that illustration needs to have a clear purpose and can be used as a supplement to the content rather than a substitute. Illustration should improve the user experience, not interfere with the operation, the style and interface should be consistent, will not appear out of place.

The places where I usually get illustrations are:

Ouch!

Freepik

Undraw

Humaans

4. Dark mode

If the APP you're developing right now has a dark mode, it's a boon for users like me who live in dark mode all the year round. Dark mode makes it easier for your eyes to adapt, so you don't have to feel like staring at a dazzling light bulb.

Dark mode and light mode in the design, there is not much essential difference, it is nothing more than to modify the entire color scheme, but in the color configuration needs to be carefully adjusted according to the specification. I suggest that it is up to users to 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

In APP, pictures are as important as other elements. You need to choose high-quality images very carefully, which can make the UI and experience very lively and interesting and enhance the overall effect of the UI interface. There are many great places to find high-quality pictures. Here are my favorites:

Unsplash

Pexels

Freepik

Adobe Stock

Pixabay

6. Make the state of error less frustrating

You should see every event in your App-even a not-so-good error state-as an opportunity to leave a positive and impressive impression.

The perception of error status is usually negative. However, if you can help users solve problems, you can also turn them into positive experiences through personality and fun.

I have always liked the design of the Google Chrome browser under the "Network is disconnected" error interface, which provides almost all the necessary information, including guidance on how to repair the network, and a well-received parkour Mini Game, a little dinosaur! It's a genius design!

In addition, I like the design of Dribbble's 404 page very much. It is excellent because it is really out of mind, and users will quickly return to a variety of design works.

7. Add dynamic effect

From the dynamic effect into the design process to now, it has become an indispensable part of the design process. Whether it is animation based on illustration or micro-interaction based on UI elements, dynamic effects are everywhere.

On Dribbble, a hundred flowers blossom. But for users, they always expect dynamic effects to be as close as possible to the real world experience. Objects are expected to move according to the usual physical rules.

Like slow motion. A ball, we exert force on it, kick it, it will first accelerate, and then slow down, this process is realistic. These physical rules are the basis of dynamic effect and the basis of reality.

Animation such as Pincipled, XD, Invision Studio, AE, Lottie, Flinto and other tools are gradually emerging, allowing designers to produce dynamic effects better and faster.

I prefer the automatic animation feature in XD, which is intuitive and can quickly verify the feasibility of an idea before I invest a lot of time and energy.

I've been using another great tool lately, Lottie from Airbnb. Lottie makes it easy for me to convert any AE into a more web-friendly SVG animation.

Similar to illustration, animation should be targeted and experience priority, rather than distracting the user. If you want to create systematic dynamic effects, take a look at the design specifications provided by Material Design.

8. Help users pay attention to details through micro-interaction

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

In Medium, the micro-interaction of applause (like) is a very typical case to enhance the experience, which is very different from that in Youtube. In Youtube, there is only a simple color change, from gray to blue, without animation. This is directly related to the content properties of the two platforms: text content needs micro-interaction to enhance perception, while in video platform, such micro-interaction will dominate and distract users, so it needs to be weakened.

9. Add patterns and gradients

Patterns and gradients are effective ways to make less attractive content more eye-catching and beautiful. Adding textures, patterns, and gradients to an image or background can quickly add flavor to a mundane design.

Of course, you can use your creativity according to the actual situation, but you must pay attention to one thing, that is, don't let it dominate the game.

10. Make good use of shadows to increase the depth of layers.

Don't forget the visual Z axis!

Shadow is a good way to increase the depth of the design, it can make the design more three-dimensional visually.

Different elements have different depths, and visually, the elements that are closer to the user are more important, and this importance is represented by shadows.

But it is also problematic to use shadows just because they "look good". Be purposeful when making design decisions. When adding shadows, remember to filter priorities and add shadows to the most important parts.

At this point, the study on "what are the common ways to improve the details and experience of UI" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.