How to Design an HMI with User-Friendly Experience

How to design an HMI which touches the user's heart? How to create a product that best reflects our brand value?

In what aspects does SEEKRUN explore and reflect upon the solutions to user experience?

It is one of the major strategies of SEEKRUN to make each operation more precise and each procedure more efficient.

Scenario-Based Solutions

How does SEEKRUN choose between "creating a new function" and "keeping optimizing existing functions"?

Our design team has realized that creating new functions is not the only way to optimize user experience and that continuous optimizing existing functions is also an important solution. While designing A1, our team experienced the riding in person and explored the pain points of product use in real scenarios through real operations. For example, we found the problems of uncomfortable remote and indiscernible screen display out of doors. Then we made optimization aiming at solving the above problems such as choosing other remote materials with more evident force feedback effect and replacing traditional acrylic panels with glass.

Based on the above solutions, the team thought further to explore potential demand of users in outdoor scenarios from the user's perspective. As an display instrument for urban leisure bicycles, our product plays a role of mediating human communications with the bicycle or even with the environment, since during the long ride the user and the bicycle are accompanying each other in sunny or raining days, through urban or rural areas. So, the display instrument is an indispensable riding partner in the course. Therefore, we took "partner" as a keyword for interaction and decided to create a product with emotional interactive experience.

So we added the function of breathing light during the product design. The light color keeps with the color of the IU any time. The frequency of the breathing lights changes correspondingly with the speed. "Breathing in the same frequency" with the user will produce emotional resonance and bring forth a different riding experience for the user. The high-frequent flickering of the lights may also remind the user of the possible safety hazard in high-speed riding. The upgraded version of A1 even endows the breathing lights an additional function of auxiliary navigation in reminding the user of turning on the road.

Rational UI layout

After getting A1's expected functions list, the design team made a field analysis and investigation of the user's demand. Priority sorting was made according to safety correlation and operation frequency. Functions were grouped in the principle of proximity. The functions became soon in good order. As for the demand with higher priority such as the demand for speed, electric quantity and gears, we designed bigger and more colored fonts to improve the readability so as to minimize the energy cost of the user in reading data.

Application of Color Psychology

Colors may render the design more visual pleasure and aesthetic feelings. Colors may also enhance the organization and significance of design elements – from Universal Principles of Design.

During UI design of A1, we decided to use different colors to represent different modes. ECO, TOUR, SPORT, TURBO represent four modes with the power going up from left to right. The designer uses green (energy saving), pale blue (tranquility), bright yellow (enthusiastic) and red (passion) to express the increasing power and speed, as well as to convey different moods in riding.

In view of the expressive ability of LCD color in strong light out of doors, we raised the color saturation to ensure a clear view of the UI in strong outdoor light.

Graph application and oligodynamic effect

During the UI design, we knew that graphs were of higher recognition than the cool and precise numbers. Dynamic graphs could clearly show relations between layers of the product, improve product accessibility and availability and manifest brand characteristic and differentiation of the product. Therefore, dynamic graphs are a design presentation form at a higher-level.

Design defined as a service

Design is a handcraft rather than a self-expression. - Michael Cummings

Design is "the result made from a series of decisions by one or more designers trying to solve particular user-related issues" rather than an artwork created by designers to express themselves.

Therefore, excellent product experience means a series of operations to solve problems. With sufficient awareness of this concept, the designers can design truly friendly user experience.For example, we need to achieve coordination between product appearance design and UI design: consistency in visual feeling can help to avoid psychological rejection of the user and to enhance the user's favorability of the product.We need to ensure the visibility of system state: when there is something wrong with the bicycle, an error code will be shown on the UI to help the user identify, diagnose and recover from the failure.Minimalist design: Minimize clutter. All unnecessary information competes for the users' limited attention resources, thus inhibiting the users from recognizing the key information.

Product design is a science, as it is objective with measurable results like many other scientific disciplines. Although aesthetic thinking of the designer is also involved in the designing process, the whole process conforms to a scientific procedure.

SEEKRUN sticks to a scientific attitude to as well as an objective and dispassionate thinking in product design. It continues to provide "user-centered" scenario-based solutions to offer better products, better experience and better services through designs for the users.