当前位置:网站首页>Sign in system design: how to draw the sign in function
Sign in system design: how to draw the sign in function
2022-06-11 08:00:00 【Guozian doesn't like to learn programming】
Editor's Guide : Now we can see the sign in function on many products , The sign in function is a good way to cultivate users' habits , Sign in to attract users to complete opening every day APP The action of , This function greatly improves the user retention rate ; The author of this article shared the design of the check-in function , Let's see .
01 Sign in system analysis
Definition : Attract users to visit the product regularly , By clicking a button or visiting a page, you indicate that you have used the product or function .
When the user finishes signing in , Will be rewarded to strengthen user behavior , So as to improve user stickiness ; Common names are “ Sign in ”、“ Clock in ”, Or according to the specific scenario , Name it “ Feed the chicks ”、“ Collect energy ” etc. .
The goal is :
1、 User goals : Get real benefits . Actual benefits = Sign in reward - Check in costs ; Rewards can be divided into material rewards and spiritual rewards ;
2、 Product objectives : Realization “ Sign in - Reward - Connection activity - Share - La Xin - Reinforcement behavior ” Positive cycle of ;
3、 Business objectives : Increase user access by signing in , Improve product activity , And then improve the commercial value of the product ( advertising 、 Service payment, etc ).
Experience the core : Provide users with high enough value perception ; Minimize the time and operating costs that users need to pay , Realize the maximization of users' interest perception .
Check in method :
1、 Check in manually : Users actively click on specific controls , Complete check-in operation . Is the most common sign in method .
2、 Automatic check in : The user logs in to the product , I.e. sign in once in total . It is the easiest way to sign in , A lower sense of being .
3、 Interactive sign in : The user is guided by several successive steps , Complete check-in operation . High complexity , The corresponding interest should also be high , Otherwise, the operation cost of users cannot be supported .
Check in period :
1、 Check in every day : Complete the check-in task every day , Get rewards .
2、 Continuous sign in : Determine the fixed period ( a week 、 Two weeks 、 January, etc ), The user is in a fixed period , The signature cannot be broken , Complete sign in , Get rewards .
3、 Cumulative check in : Determine the time period ( Two weeks 、 January, etc ), The user signs in within this time period , Can be disconnected , As long as the cumulative times meet the requirements , You can get a reward .
4、 Mixed sign in : Users receive rewards in the form of daily check-in , At the same time, in the cycle , The rewards have stepped up .
Check in scope of application :
1、 Apply to : Content driven product types , Like the community 、 Online retailers 、 Information products , The existence of check-in increases the frequency of users opening products , It plays a positive role in developing users' habits .
2、 Do not apply to : With efficiency 、 Function driven product type , Like the weather 、 translate 、 Notebook products , These products correspond to the rigid needs of users , Once the user has no requirements , Check in behavior and product attribute cannot be associated ; At this time, the reward received by the user is not enough to offset the user's operating costs .
The design elements involved :
1) Sign in entrance
The entrance to the check-in page , Generally, there is a fixed location , Fit the user's cognition , Reduce operating costs .
2) Sign in guidance pop-up
You can sign in directly on the pop-up window , Or click the pop-up window to jump to the sign in page .
3) Check in page
- Check in period :7 Day is a cycle , Disconnection is not allowed . The reward gradient increases , Increase attraction ; Sunk cost , loss aversion . More common , The rules are simple , Strong purpose , The path is short .
- Calendar sign in : Record the sign in in in the form of calendar , Allow disconnection , After accumulating to a certain signed in quantity , Gain additional benefits . Fulfillment .
4) A successful check-in window pops up
- There is no need for the user to click a specific button , Directly enter the check-in page and pop up directly , Reduce user operating costs .
- The user needs to click the sign in button , Pop up window , Sign in successfully .
- The significance of successful check-in pop-up : Give users positive feedback . Inform the user of the current revenue , Prompt the user's future revenue expectation .
5) Additional operations , Such as turnover
02 Sign in design
1. Sign in entrance
The sign in portal is a control that guides users to the sign in page , There is usually a fixed position .
There are several common entrance locations :
1、 The top left corner of the home page
2、 The right side of the navigation bar of the home page
3、 Home channel entry
4、 Search box
5、 Personal center page
6、 Independent modules 





The sign in entrance is different except for the location , There are also different ways of indicating , Common schematic methods are divided into 5 class :
1、 Sign in icon
2、 Sign in icon + written words
3、 Red envelope icon
4、 Dynamic effect
5、ip Emotionalization


One thing to pay attention to : There are two states for the partial sign in entry , Not checked in and checked in . It's best to make a clear distinction between the two .
2. Sign in guidance pop-up
According to the triggering method of sign in , Automatic check-in generally uses pop-up windows to load content , The information is simple . Manual check-in often requires a full page to host content .
The difference between the automatic check-in pop-up window and the guided check-in pop-up window is : The former jumps out of the pop-up window , Without the operating , It shall be deemed that the signing in is completed on the same day , The latter means to guide the user to the sign in page , If the user directly closes the pop-up window , It does not count as a successful check-in .
Although such pop ups are active , The former focuses on guiding users to participate in activities , Not the sign in itself .
The most common check-in process :
1、 Enter the sign in page from the sign in portal
2、 Sign in ( Click button )
3、 Sign in feedback ( Successful pop-up )
4、 Signed in status

3. Check in page 

The above two methods can set different reward gradients , The progress bar style focuses more on “ continuity ” The feeling of , The card style emphasizes that the reward for the seventh day is especially rich ; The two are essentially the same , Card style can more fully display the specific incentive content of each day .
Monthly calendar sign in , Obviously, the cycle is longer . If continuous check-in is set , Users need to spend a lot of time , At this point, the reward must have a strong attraction , It is often a material reward .
adopt “ pick ” In the form of , Check in .
The sign in reward is “ Box flower ”, Virtual currency is , You can deduct cash in the mall ; In addition to signing in , You can also get box flowers by doing tasks . This kind of check-in is often very interesting ; Integrate check-in and tasks into the game Ecology , Through wonderful visual performance , Enhanced incentives .
4. Click guide
The user clicks the button , Before signing in , It is necessary to click to guide .
- 【 for the first time 】 When entering the sign in page , Novice guidance is required , Prompt where to click ;
- 【 Fixed guidance 】 It appears every time you enter the sign in page , Button action effect or gesture prompt , It's all a good plan .


5. Success feedback popup
When the user clicks the sign in button , The product gives feedback .
There are several forms of feedback :
1、toast
2、 Popup 

6. Do the task
Besides signing in, users can get rewards , You can also get rewards for doing tasks , Users get the benefits they want , At the same time, the product can also achieve the purpose of innovation or activation .
There are three main types of tasks :
1、 Bottom half pop-up window form
2、 Check in page list
3、 Task center page 


The form of bottom half pop-up window is often used for interactive check-in , Interactive check-in itself requires a large area to show the effect , The half pop-up window style can accommodate more content , No jump at the same time , More immersive and focused .
7. Flop
Some e-commerce products are signed in successfully , Will provide a chance to flop , In order to provide more benefits , Stimulate users' buying impulse .

03 Summary
Starting from the goal , The check-in function brings higher user stickiness to the product side , It is one of the elements to improve the commercial value of products ; Bring more benefits to the user side , Motivate users to use and share products .
Check in module , Although it is not the key to the product , But we should not underestimate .
边栏推荐
- TypeScript-类型别名
- Several ways to avoid concurrent modification exceptions of lists
- 【CodeForces908H】New Year and Boolean Bridges (FWT)
- Thoroughly remember the difference between ImageView background and SRC
- Typescript enumeration
- 如何做好空状态设计?来看这份全面总结
- C. Manipulating History(贪心/哈希/思维/好题)
- TypeScript-null和undefined
- (transformation) tree, binary tree and forest transformation principle
- Printing diamond of beginner C
猜你喜欢

The solution of "no startup device" after running Bochs

C language to achieve a simple game - minesweeping

C# 微信上传Form-data
![[atcoder2306] rearranging (topology)](/img/b3/38589a07a7c26bea8ed154ab794760.png)
[atcoder2306] rearranging (topology)

Xshell7 and xftp7 to continue using this program, you must apply the latest updates or use a new version

forEach 中 return 和 for 中 break

Method summary of creating deep learning model with keras/tensorflow 2.9

空间几何

Printing diamond of beginner C

Image data enhancement (translation, rotation, brightness transformation, flipping, adding Gaussian noise, scaling, cropping)
随机推荐
Post - payload of interface test
代码设置ConstraintLayout的layout_constraintDimensionRatio
SOCKET【5】- struct linger 用法
Use special characters to splice strings "+“
批量拼接字符串
Typescript interface and type alias similarities and differences
TypeScript-可辨识联合
Xshell7 and xftp7 to continue using this program, you must apply the latest updates or use a new version
[atcoder2306] rearranging (topology)
【AtCoder2304】Cleaning
JSP development model
Clipping and overlapping of YUV data
记一次忽略@SuppressLint(“NewApi“)提示引发的血案
TiDB Cloud 上線 Google Cloud Marketplace,以全新一棧式實時 HTAP 數據庫賦能全球開發者
Black Qunhui dsm7.0.1 physical machine installation tutorial
TiDB Cloud 上线 Google Cloud Marketplace,以全新一栈式实时 HTAP 数据库赋能全球开发者
安卓初中级开发基础知识整理(面试自用)
Socket [5] - struct linker usage
Selenium click the floating menu and realize the functions of right mouse button
Space geometry