Editor's note: Dynamic design can be said to be the current UI design circle the most fire trend, the designer Eugene Rudyy in medium share his participation in the design of the new yep! experience, this time he is not about how to design to look good, but how to use the dynamic effect to replace the language to tell users the operating mechanism of the app. Take off the gorgeous coat, the dynamic effect can be so wonderful!
A year ago, I started working with Yep! founder Roman and Alexander, who tried to make yep! change people's lives. It's an app that helps people meet and connect, and they want the services that yep! offers to make it easier for everyone to meet and to do things they love more efficiently.
For example, when you're going to be with someone who has the same hobby and coffee, then you can use yep! to see if there are people around you who have the same needs. Then you can use yep! to discuss the details with him, make a rendezvous, then friends, and enjoy the next happy time.
In order to complete this app, I and two founders in the next few months after meeting to test a lot of new features and features, many of the ideas are unprecedented, which is unique to this app. Yep! can now be downloaded for free in Apple's App store.
It's a very meaningful, dynamic effect.
I was very impressed with the exquisite and meaningful dynamic of iOS when it was just launched. The existence of dynamic effect, communication of different interfaces and functions, played an important role in the interaction, the most important thing is that it will imperceptibly for the user to pass information, build patterns, dilute the inorganic side of hardware equipment. These dynamic effects require no complicated text description to tell the user what to do next. When you delete a file, the action of the file into the trash can be passed to the user "delete" meaning. These are the "human nature" of machines.
With the flattening of UI design, Apple's early-stage "Skeuomorphism" ("Apple-style") is disappearing into the eyes of people, and those delicate and intuitive effects are also replaced by flattened, dynamic designs. Compared with the earlier design, the contextual dynamic effect of the flattening has more possibilities.
At the beginning of the design, when we started building yep! 's wireframes and prototypes, we were acutely aware that yep! had to be different from other ordinary social apps, that it needed a minimalist visual design and that it was interactive and dynamic to tell the user how it worked. This setting has two advantages: 1, the dynamic effect can more vividly tell the user what happened; 2, the dynamic effect can be more vivid, more conducive to emotional transmission and the use of procedures. Of course, this design also means that the cost of development will be more expensive, but in the end we still think that these inputs are worthwhile.
In yep!, the basic process for user action is to select the active-> issue request-> wait for the search results-> view the results (find a match). After the request is made, the system will continue to look for matching other users within the next one hours. Each stage has a different interface, but with the help of dynamic convergence, users will feel that this is an interface is constantly changing, very natural. This design is very easy to implement on the iOS platform, and it also conforms to its design specifications.
In yep! 's active selection interface, the icons with circular boundaries are scattered around the interface, and different activities have different colors.
When the program starts, the activity icon appears in the clockwise order, while the sport and events also have a level two menu, and the Level two menu appears in exactly the same way as the main menu. The whole app is color-colored, with a lively, dynamic effect that can make the user feel more cheerful.
Here comes the first interface switch, and the dynamic we design will make the user feel fluent and let them know what's going on.
The following are the processes to be presented for dynamic effects:
1. Select activities in the interface
2, view the content of the request and prepare to publish, add location and additional instructions
3. Publish the request
4, yep! began to search the area within 50 kilometers whether there are similar requests
5. Get the result (present in the next animation)
In the above animation, the user chose to eat, the icon moved to the map to become landmarks, the animation is very clear to tell users the type of activity (eat) and where. When you click OK, map tag into radar, scan around 50km users, very intuitive, not a word. Without extra buttons, requests, and big and small buttons and block diagrams, users just need to look at the action and see what's going on.
The improvement and error of the user experience
In the previous version of the design, our design is not the same as it is now. When the user chooses the activity Type second screen, displays the user's name and the photograph and so on the information, when you look around matches the user, also will open the similar interface, certainly your information also can be seen by others.
This design allows the second screen to have a 67% pass rate. However, such a design mechanism does not work well. Many users in the second screen appears at this stage is not willing to go on, many users have lost, because public personal information does not meet the needs of these users, this link is a failure. As a result, we clean up the information and links that affect our users.
After the modification, the new version of the second screen through the rate itself reached 83%, the user only need to determine the needs and locations, the additional option is to add the location and description, then we will only add a share button. From 67% to 83%, this is an obvious boost. We tried to improve the number by optimizing the process.
After the request is configured, a matching user is obtained, and a yep! button is available at the bottom of each user, and a request for an appointment is made to the user after the button is clicked. As the user accepts your request, you can initiate a session chat. Of course, the request is mutual, the user can send or receive.
In this part, I decided to design a dynamic effect. When the user clicks on the yep! button, the button moves up from the bottom, which is a very simple explanation of what "send" means. The bubbles move to the middle of the screen and tell the user that the request has been sent, and that you can click on the location and cancel the send, very simple.
When you receive yep! needs, you can see the chat interface similar to Facebook, there is a picture and tips on the top right, users can click on the location to browse the information, but also can slide around the view, in line with the custom also cater to the needs.
Development and design work continues, this year's summer and autumn we will continue to improve the app, will release the Andorid version, we will continue to improve the design and user experience. If you like the action, you might as well take a look.