BLOG by
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)
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.”
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):
Questions to Consider
Our Solution
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.
Compared to TikTok’s five groups of actions, the user now only has three groups of actions to consider (from top-down):
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.
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
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.
In 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:
Questions to Consider
Our Solution
In our designed solution, we recognized two foremost, common user behaviors that strongly influence how the interface is structured:
By 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 has 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
The 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
Our Solution
In our design solution, we’ve addressed a combination of visual and functional enhancements to the profile:
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 social networking app development agency with deep expertise in the social media and entertainment fields. We have designed and developed social apps like Erupt for renowned names like the Emmy-winning film producer Edward Walson and former ABC News/GMA producer Bryan Keinz. We have worked with startups as well as some of the biggest enterprises in the industry including ASUCLA, Chemowave, Urban Plates, IrisiVision, Dupont, Kedalion Therapeutics, Burger King, Zen Classics. If you’re looking to build a social video app or upgrade an existing one, please get in touch for a free consultation. CitrusBits aims to develop an app like TikTok that offers a refined and enjoyable experience for users while fostering a strong sense of community and engagement.
Content Writer
Let’s stay in touch
