TikTok: An Analysis on Usability, Behavior, and Missed Opportunities

TikTok: An Analysis on Usability, Behavior, and Missed Opportunities

By Kevin Soon & Kyle Bridges


Since 2016, TikTok has emerged as one of the world’s most consumable social platforms to share videos and stream live content between friends and family. 

As users flock to their mobile devices to recreate the latest dance trend or perform musical duets, the demand and drive for connection in today’s remote world has never been greater.

However, while an app such as TikTok may have risen to prominence on the heels of its viral video content (and controversy over data security practices), there are several missed opportunities surrounding the mobile user experience that are worth examining through the lens of a more refined user-centered approach.

“Question everything generally thought to be obvious.”
― Dieter Rams

Let’s take a closer look at three of TikTok’s most essential features, the usability challenges they present, and how we can solve them through improved, simplified design choices.

1. Content Creation (Record Video Feature)

 

tiktok analysis

The Problem

When creating new content on TikTok, users are presented with an array of tools and controls splashed across the interface. The issue here is the overwhelming number of choices the user is faced to make.

Hick’s Law states:
“The time it takes to make a decision increases with the number and complexity of choices.”

 

tiktok analysis

Diving a little deeper, it becomes clear that there are five separate groups of actions that greet the user’s point-of-view (moving clockwise from top-left):

  1. Timeline / Discard Clip / Add Sound 
  2. Clip Options (Flip, Speed, Beauty, Filters, Timer, Flash)
  3. Clip Speed (0.3x to 3x)
  4. Effects / Record / Upload
  5. Clip Length (15 to 60 seconds) / Templates
Questions to Consider
  • Usability: Does each action provide equal weight and value to the user? (eg. Will flash be toggled as much as the flip camera icon when a video is captured)
  • Grouping: Can some of these actions be grouped to limit the visual noise and avoid Hick’s Law? (eg. Can similar actions such as Beauty, Effects & Filters grouped together)
  • Priority: Are the most important / most frequently used actions being placed at prime locations within the interface?

Our Solution

                                      tiktok                                                         

When we consider the usability questions above and apply best practices to craft an enhanced mobile experience, our design solution now provides the user with an interface that emphasizes hierarchy and organization from top to bottom.

Each action (and a group of actions) is compact, easily digestible, and accessible, all while clearing the camera’s viewpoint, maximizing the user’s focus on content creation.

                                                          tiktok analysis

Compared to TikTok’s five groups of actions, the user now only has three groups of actions to consider (from top-down):

  1. Discard Clip / Add Sound / Flash / Timeline
  2. Record / Recording Type (Photo, Video, Live)
  3. Clip Options (Import, Speed, Effects, Timer, Camera Flip)

Additionally, features such as Speed, Effects, and Timer are grouped together seamlessly and presented through consistent bottom sheets. Clip Length (which is displayed prominently at the bottom of TikTok’s interface), is now consolidated within the behavior of the Record button itself, eliminating the need for an additional group of options.

                                      tiktok analysis    tiktok analysis   

In a complex feature flow such as video creation, maintaining simplicity throughout the user flow is critical. As users demand more customizable options from social platform apps, designing with flexibility in mind is also key (eg. leveraging sideswiping to uncover more options).

2. Content Presentation

                                                                          tiktok analysis
The Problem

When navigating and consuming any type of media on a social platform, it is anticipated that the user will be interrupted with a variety of metadata (eg. username, captions, hashtags) and actionable features (eg. like, comment, share). Each of these components fights for priority where screen real estate is limited—especially when the average attention span of the user is less than 2 seconds per post on a mobile device.

tiktok analysisIn the case of TikTok’s content presentation, the expected user behavior begins with continuously scrolling upward through a feed of video clip posts, and ends with one of the following primary actions taking place:

  • Following
  • Liking
  • Commenting
  • Sharing
  • Scrolling (to the next post)

Questions to Consider

  • Does the placement and size of Following, Liking, Commenting, etc. demand this much attention?
  • How can we restructure these actions to bring priority back to the post content?
  • And most importantly: How can we satisfy the behavioral goals and expectations of the user, if these actions are de-emphasized?
Our Solution

                                     tiktok analysis     tiktok analysis

In our designed solution, we recognized two foremost, common user behaviors that strongly influence how the interface is structured:

  1. Swiping up and down to consume content
  2. Double-tapping to like content

tiktok analysisBy grouping all post details and actions at the bottom of the viewport, we are now catering to the user’s anticipated, learned behavior from other social platforms: Scroll and Double-Tap. Rinse and repeat.

From the user’s perspective, viewing more content is typically compulsory, and interacting with content is highly selective. This interface now prioritizes behavioral priority above overwhelming UI design components.

For example, when compared to TikTok, the group of large action icons (eg. Liking, Commenting) at the right of the screen have been relocated below the post details as compact call-to-action buttons. Infrequently used actions such as in-app or external Sharing, Content Reporting, and Downloading Posts, are now accessed by tapping the More icon—these features are presented in a consolidated bottom sheet.

3. User Profile

tiktok analysisThe Problem

TikTok follows a tried-and-true approach to the social user’s profile; displaying pedigree information such as Profile Photo, Social Stats, Bio, and of course, the 3-column Media Grid. 

This familiar interface may fulfill the user’s general needs of consuming as much content as possible, though there are missed opportunities in the details that can elevate the overall user experience and positively impact user behavior.

Questions to Consider
  • Given that TikTok primarily focuses on video content, how would the profile handle displaying other content types (eg. photos, live streams)?
  • Should users have the ability to filter through the grid vs. scrolling through a sea of content?
  • How can users share more information about themselves without adding more to their bio?

Our Solution

                                                                      tiktok analysis

In our design solution, we’ve addressed a combination of visual and functional enhancements to the profile:

  • A larger, high-resolution profile photo allows the user, brand, or business to make a striking first impression to visitors—TikTok (and most social platform competitors) typically sacrifice the size of this design element in exchange for displaying additional grid content
  • A customizable call-to-action button below the bio allows the user to redirect their visitors to an external web link (in compliance with platform rules)
  • A spacious grid design provides room for the content to breathe, versus compressing each row and column together 
  • Categorized Tabs and Sections simultaneously solve the challenge of supporting multiple content types and filtering within the grid. From left-to-right, the user can easily toggle between: All Posts, Videos, Photos, Live Streams, and Tagged Posts
  • Unique iconography at the top-right of each thumbnail communicates the media type to the user (multi-photo, video, and live streams) and increases scan ability across the grid

Each of these improvements brings a greater level of visual and behavioral clarity to the profile experience—challenging what users have become accustomed to in some areas while polishing the interface in many others.

Conclusion

Regarding behavior and usability, it’s probable that the team at TikTok has made significant tradeoffs at the expense of its interface design.

As ambassadors for best practices in mobile UX design, it’s important to recognize that data-driven, research-based decisions will always provide a clearer understanding of how users behave (or should behave) with a social app such as TikTok.

However, by taking a step back and stripping the app down to its essential purpose, we are able to apply sound UX principles, leverage our knowledge of the latest mobile trends, and reimagine an app experience that is more focused, flexible, and a beacon for simplicity.

“Good design is as little as possible. Less, but better, because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.”
― Dieter Rams

About CitrusBits

CitrusBits is an award-winning mobile app development agency with deep expertise in the social media and entertainment fields. We have designed and developed mobile app solutions for numerous startups as well as enterprises including ASUCLA, Chemowave, Urban Plates, IrisiVision, Dupont, Kedalion Therapeutics, Burger King, Zen Classics.  If you’re looking for help to design or develop a mobile app, please get in touch for a free consultation.

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping