top of page

Tiktok's UI & UX Design



In reviewing TikTok's UI design, we can consider a few changes to improve the user experience, drawing from Kobie's article and the design principles by Tidwell, Brewer, and Valencia. Initially, I was unaware that TikTok allowed users to fast-forward videos until a friend demonstrated how to do it by pressing and holding the screen. This feature, among others, could be highlighted in the early stages of the app experience. As Kobie notes, different cultures have different design preferences. TikTok's tutorials should be easy to understand and visually appealing to cater to these diverse preferences. As my visual representation underneath illustrates, the first five screens offer tips on various functions such as personalization, connecting with friends, and navigating through the app by swiping up. After interacting with or bypassing these informational screens, users are then presented with the latest video in their feed. An enhancement I'd propose for the UI is the inclusion of tutorials for additional features like the fast-forward option. Moreover, providing an option to opt-out of TikTok Shop would empower users to manage their exposure to persistent shopping ads. Allowing users to turn off the TikTok Shop and adding captions in multiple languages would make the app more user-friendly. This aligns with Tidwell, Brewer, and Valencia's idea that placing elements thoughtfully helps users understand the app better. Multilingual closed captioning, similar to Instagram's ability to translate captions, which could broaden TikTok's appeal and accessibility. These UI improvements would make TikTok more intuitive and enjoyable for a wider range of users, fitting both the Eastern preference for vibrant designs and the Western trend towards simplicity.



References

Kobie, N. (2019, February 25). Tiktok breaks all the rules of app design – but somehow it still works. WIRED UK. https://www.wired.co.uk/article/tiktok-snapchat-app-design 


UX Mastery. (2015, November 17). Wireframing for UX: What it is and how to get better at it [Video]. YouTube. https://youtu.be/8-vTd7GRk-w


Tidwell, J., Brewer, C., & Valencia, A. (2020). Layout of screen elementsLinks to an external site.. In Designing interfaces: Patterns for effective interaction design (3rd ed., pp. 209-254) O’Reilly Media, Inc.


Vinh, K. (Host). (2020, August 27). How streaming services design interfaces to keep us watching (Season 3, No. 4) [Audio podcast episode]. In Wireframe. Adobe. https://xd.adobe.com/ideas/perspectives/wireframe-podcast/streaming-service-design-keeps-us-watching-s3-e4/

Featured Posts
Recent Posts
Archive
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page