4

How TikTok Design Hooks You Up

 3 years ago
source link: https://uxplanet.org/how-tiktok-design-hooks-you-up-6c889522c7ed
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Image for post
Image for post

How TikTok Design Hooks You Up

Being a huge fan of behavioral psychology, I like to analyze popular apps design to see what techniques they use to attract and engage users. Today you will learn how TikTok onboards new customers, creates habit loops, drives our behavior, and hooks us up to keep using the app. Get on board! šŸ‘‡

Sign up

Image for post
Image for post

Everything starts with the sign-up screen. Itā€™s pretty dope ā€” all clean and aimed for user action with no distractions like onboarding. Of course, TikTok can afford it because lots of people know what it is and why to sign up for it. So designers have focused all their efforts on making the sign-up screen clear and easy to understand.

Also, please note how they organized the choice architecture for sign-up options. They display only three of them at once, hiding the rest of them.

TikTok's designers know the Hickā€™s law:

The more choices users have, the harder itā€™s for them to make one.

So itā€™s not necessary to put all available options at once when you can first show the desired ones, making it easier for the user to choose.

The registration process is quick and easy. You have to provide your birthday, phone or email and confirm it. One task per step is a common solution because users perceive a complicated task easier to complete if itā€™s split into smaller ones. Also, as Tinder does it, TikTok automatically provides you your current mobile number and the confirmation code as well.

Whatā€™s so smart in it? TikTokā€™s designers know the core of peopleā€™s motivation:

If you want people to do something, make it as easy as possible.

Thatā€™s the core of the behavioral theory by BJ Fogg. You need three things to nudge a person to do something ā€” Motivation, Ability, and Trigger. Together they create an easy formula of human behavior. To do something, people need the desire, ability to do this, and a trigger that will nudge you to act. Itā€™s hard to manage peopleā€™s motivation, but you can make the ability to do something as easy as possible.

Image for post
Image for post

TikTok uses any possibility to reduce the number of interactions required from the user. You donā€™t even have to recall and then type my phone number with my fingers ā€” you need to make one tap. The country code is already prefilled based on your phoneā€™s location settings, so you donā€™t have to search for it from the long list. After a short onboarding where TikTok sets up your first feed content and educates how to use the app, you are good to go.

Image for post
Image for post

I got you babe

After the user has created the account, a designerā€™s main goal is to keep him in the app. TikTok does in two ways.

They immediately show you an autoplayed video after a short in-context onboarding. 15M of views? Wow, thereā€™s a great chance that would be an interesting video, and a user would d like to watch it till the end, and maybe like or share it with my friends. Thatā€™s very smart to provide the best stuff first to hook your user and create a desire to watch more stuff like this. TikTok creates a positive experience from the first seconds of using the app, and you literally didnā€™t have to do a thing for it. Only one video per screen is a powerful conception. TikTok puts the main focus on the content, so youā€™re not distracted by any other videos.

Image for post
Image for post

Look at these noticeable notifications at the top and the bottom of the screen. The first one shows me as a user that I have some updated stuff Iā€™m following. However, I havenā€™t followed anyone; TikTok automatically subscribed me for a popular account (with cats you canā€™t go wrong). What a nice way to solve the empty state issue for this screen. Instead of showing the user a copy ā€œFollow somebody to see their video,ā€ they already show some content.

The other notification in the navigation menu shows that you already have two Inbox messages. Thatā€™s another example of solving the empty stateā€™s issue in a smart way. They show real content on the screen, educating the user how it works, and you have a chance to put a call-to-action to nudge users to start creating videos and broadcasting themselves.

When you go to the Account screen, youā€™ll see an animated tooltip nudging you to create your first video alongside educating you on how to do it. This animation attracts your attention and leads you to the main action ā€” make a video. Why itā€™s important? Because content is the fuel of TikTok. The more interesting videos they have, the more chances users will come back to check if there is new stuff to watch.

TikTok Feed

Image for post
Image for post

Going back to the simplicity ā€” itā€™s the core of TikTok app. Simple swipe interactions ā€” and you have everything you need. Tinder also uses a simple swipe gesture as the core interaction model.

TikTokā€™s designers have made slick and easy navigation. The content takes the whole viewport. The secondary content like creatorā€™s name, description, music, and reactions icons (like, share, comment) are nicely positioned in the thumb access zone.

The number of views, likes, comments, and shares allows the user to form an opinion about the video quickly. The more likes it has, the more chances it is worth viewing. Thatā€™s why creators are trying to get as many likes as possible because they know that users will rate their accounts by these numbers.

The TikTok feed is infinite, so you can swipe it looking for interesting stuff almost eternally. The simplicity of interaction and focus on the content combines with the core method of how to hook your users. Itā€™s the same principle that slot machines use ā€” variable rewards. You donā€™t know what youā€™ll get next ā€” a cool story or a funny video ā€” so you keep swiping the feed. Thatā€™s a really powerful technique to stick your user to your product. Instagram has been doing the same way until they added the ā€œYouā€™re all caught upā€ message to break this loop and give users a way to stop the interaction.

Image for post
Image for post

Whatā€™s so cool about TikTokā€™s feed is its algorithm that works very smart. Considering the time you spent watching a particular video, your interactions with it (like, comment, mark as not interested) and high-rated universal content (itā€™s all about cats) allows them to fill your feed with videos youā€™d like to watch more. They require little of your interactions but still generate an interesting feed greatly.

Keep Me In Context

Image for post
Image for post

Another cool TikTok interaction principle is using the bottom sheet to comment, share, and so on. Doing this allows the user to stay in the video context and reduces their chances of moving away from the Home screen. Also, this bottom sheet lays in the thumb zone thatā€™s easy to reach.

Image for post
Image for post
Thumb zones (image credit: Smashing Magazine)

Creating Video

Image for post
Image for post

Creating TikTok video is easy as the rest of the app. Make a video or upload it, add music from the library, add filters or effects, and you're ready to go. After you uploaded the video, the notification at the top of the screen provides you multiple ways to share your new video. Thatā€™s another great example of using the MAT model - you keep users motivated, you make it easy to share, and you give this trigger to start sharing right on time when it makes sense.

TikTok limits the video length to 1 min maximum, and that's another technique to explode the creativity. Limitations like 280 characters on Twitter motivate creators to use all their imagination to fit these limits and create cool content.

Right after uploading the video, TikTok had to check if you used the autogenerated nickname and offers to make it more personalized. Another great timing in sending the hot triggers when youā€™re the most motivated. If they sent this message when the user was swiping the feed, thatā€™d be confusing. Youā€™re watching cat videos, and you donā€™t want to change your nickname right now. But when youā€™re doing something related to having a nice nickname, thatā€™s the right time to ask.

Overview

As you can see, TikTok uses lots of behavioral psychology principles to hook their customers. Using the simplicity of interaction and interesting content, they have built the app the users will come back to.

TikTok reminds me of a combination of Instagram, Coub, and Snapchat taking the best of them and spicing it up with smart algorithms and MAT model. And thatā€™s cool because you use the interaction patterns millions of users are familiar with. People donā€™t need something new; they want the familiar done differently.

By the way, donā€™t forget to follow me on TikTok šŸ¤™


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK