There are thousands of ways to create a “surprise” in experience design. The author of this article shares a few points with examples, let’s take a look~
In our usual design work, we sometimes fall into a kind of “same and flat” type of distress, and feel that similar products are basically the same information architecture, layout style, interface elements… the result of our own deduction according to various methods It’s also hard to escape; and if you want to make a different innovation and breakthrough, it is easy to enter the misunderstanding of “design for design”. “xx products do that” questioning.
Over the past few months, I have been trying to drive myself to think more about how to give my design more “surprise”. The first thing to be clear is that “breaking the convention” is only a sufficient and non-essential condition for “creating surprises”. Compared to blindly pursuing “being different for the sake of being different”, trying to have a logical and multi-dimensional association divergence has brought me more interesting It also has a certain degree of persuasive inspiration. I will give a few recent examples to illustrate.
1. Homophonic association
When memorizing words, thinking about copywriting, and translating trademarks, the “homophonic linking idea” is often used intentionally or unintentionally. Many popular Internet terms are also derived from some connotative homophonic vocabulary. In design work, homophonic association can help us visualize some abstract or tasteless words into vivid and interesting images.
Some time ago, when teaming up to participate in the department’s Hackathon activity, I needed to design a data chart similar to “stress indicators”. At the beginning, I thought of visualization as images such as barometers and dashboards. It is more intuitive and common, but it is also biased. Yu mediocre, no surprises.
The turning point occurred when I input “pressure value” with Pinyin. I accidentally caught a glimpse of the word “Yali” in the suggestion list of the input method, and instantly thought of the popular Internet term “Yalishanda” a few years ago, so I thought: Why not directly visualize the pressure value as a pear? It can be further expanded: the higher the pressure value, the bigger the pear will be. Add a variety of micro expressions to the pear. You can chop the pear like “cutting fruit” to “release the pressure”, etc…. This is comparable to a barometer dashboard and the like. It’s much more interesting, and the plan has also been unanimously affirmed by the partners in the group (although unfortunately I still failed to win the prize haha~).
2. Behavior Association
Motion design research has been my main professional direction in the past six months, and I have collected and experienced various interface motion design cases, but I feel that most of the motion design still stays at such things as “making the experience connection smoother” and ” Stages such as “attracting your attention” do not go too deeply into deeper, warm and emotional dynamic behaviors.
Before listening to the sharing of a senior design expert in the company, he cited a design case. In order to reflect the “proactive” business etiquette design language in the product, he made a small animation effect for switching the arrow entrance of the Banner. When the mouse is hovered near the arrow, the latter will take the initiative to approach the mouse, just like the other party takes the initiative to shake hands with you in a business scene. Although it is only a small detail, it can be touched.
Recently, I was doing case collection work on interactive interactive products. I saw a work on Dribbble that Google used to recruit interns. It is a dialogue interface similar to Google Allo. The effect is as follows:
Although the dynamic effects of speech bubbles appear to be a little exaggerated in actual product design, it gave me an inspiration. Can you consider giving speech bubbles some emotional dynamic effects? For example, when I like the content of the bubble, the bubble will feel “happy” and jump; when I feel that the answer in the bubble is not helpful, the bubble will collapse into a mud because of “frustration”; when I express When we are angry and angry, the bubbles will tremble because of “fear”…Think of the design object as a flesh and blood person, and then think about how to give meaning to its behavior, maybe it can better help us make ” Motion design that touches people’s hearts.
3. Synesthetic Association
Synaesthesia is a rhetorical technique that we have learned in middle school. It connects and intersects different human senses such as hearing, sight, smell, taste, and touch. It is used to express the feeling of B, making the image more lively and novel.”
We can also use “synthesis” in experience design, but limited by the platform, there is not much room for smell, taste, and touch. In most cases, we mainly rely on the conversion of visual and auditory elements. For example, for scenes that give users feedback on operations, most designs may only consider the visual dimension, and special effects such as water wave diffusion, fireworks blooming, and flying paper flying in the sky may be made. If you add the corresponding interesting sound effects that match the feeling, Maybe you can render the atmosphere to a higher level; for applications such as FM and music players, you can conversely visualize sound as visual elements, such as visualizing sound waves as a round of spreading ripples, mining The emotions in the voice, etc…
Of course, there are thousands of ways to create a “surprise” in experience design. The above points are just the tip of the iceberg. It’s just that some of them happened to be useful recently, so they are summarized and recorded, and everyone is welcome to share what you have used.
