[Article] Tini app - What did I learn from zero to one? (Part 1)

,

Những bài viết liên quan:

(English below)

Tổng quan

Dành cho những bạn chưa biết về khái niệm Tini App, bọn mình sẽ nói sơ bộ về việc Tini app là gì và cách thức hoạt động ra sao.

  • Tini App là những ứng dụng tiện ích được xây dựng dành cho một super app nhất định (trong trường hợp này là Tiki). Có rất nhiều loại Tini App khác nhau như trò chơi, giao thức ăn, đầu tư tài chính, bán vé và rất nhiều thể loại khác.

  • Người dùng không cần cài hoặc gỡ các ứng dụng này.
  • Nhanh chóng, Đơn giản, Ổn định và Bảo mật là những nguyên tắc quan trọng của một ứng dụng Tini App
    • Nhanh chóng: Luôn hướng tới việc tối ưu hóa sự tiện lợi và hiệu quả về trải nghiệm người dùng, như truy cập nhanh, thanh toán thuận tiện, chia sẻ dễ dàng.
    • Đơn giản: Tập trung vào tính năng cốt lõi của ứng dụng, và thiết kế với tâm thế ưu tiên việc dễ dàng sử dụng lên hàng đầu.
    • Ổn định: Nguyên tắc này gần như thuộc về phía của team Engineering; việc ổn định giống như “chuyện tâm linh” đối với Product Designer vậy - bạn cảm nhận được nhưng bạn không tác động được gì. Vì vậy đối với khái niệm UX, bọn mình chuyển nguyên tắc này thành “Nhất quán”
    • Bảo mật: Giúp người dùng cảm thấy an toàn với những tác vụ của họ trong ứng dụng, cũng như thông tin của người dùng luôn được bảo mật.
  • Tini app là giải pháp mini-app đã rất phổ biến trong thị trường super app ở Trung Quốc, như là mini program của WeChat, applet của Alipay, v.v…

Vào cuối năm 2019, khi bọn mình bắt đầu dự án đem ứng dụng Ticketbox vào trong ứng dụng Tiki, đấy là lần đầu tiên bọn mình biết đến khái niệm mini-app.

Đến năm 2020, bọn mình bắt tay vào xây dựng dự án Tini App. Theo quy trình thiết kế sản phẩm, bọn mình bắt đầu nghiên cứu những nhà tiên phong trong thị trường giải pháp mini-app.

Và nhận ra đó là một thách thức lớn với team design của bọn mình về việc cải thiện trải nghiệm đối với những ứng dụng Tini App, bởi vì mini-app là khái niệm mới cũng như những tính năng và hành vi mới đối với người dùng tại Việt Nam. Cuối cùng, sẽ có rất nhiều loại ứng dụng Tini App khác nhau. Vì vậy không chỉ có team nội bộ của Tini App xây dựng mà còn có cả những developer và designer bên ngoài sẽ góp phần xây dựng những ứng dụng đó. Vì vậy, làm thế nào để đảm bảo trải nghiệm điều hướng của tất cả các ứng dụng được nhất quán, và thông tin của người dùng được bảo mật?

App shell

App shell là giải pháp mà team Tini App áp dụng để cung cấp ra môi trường an toàn để bảo mật thông tin của người dùng cũng như là để thống nhất trải nghiệm điều hướng của bất kỳ một Tini app nào.

Một trang Tini app sẽ gồm hai lớp:

  • Lớp App shell (native, được quản lý bởi team Tini App)
  • Lớp tự xây dựng bởi developer

Để giải thích đơn giản dễ hiểu thì App shell tương tự như thanh trình duyệt của một web browser bất kỳ. Không ai có thể thay đổi được, ngoại trừ nội bộ team Tini App.

App shell gồm 3 component chính:

  1. Phía trên: Navigation bar.
  2. Ở giữa: Dialog thông báo của hệ thống.
  3. Phía dưới: Bottom bar.

Với phiên bản bấy giờ của Navigation bar, bọn mình đã có thể đảm bảo thống nhất về cách điều hướng của tất cả các Tini app, nhưng bọn mình đã phải đối mặt với một vài vấn đề liên quan đến UX:

1. App shell luôn nằm trên mọi component khác

Vấn đề đầu tiên team design đối mặt đó là App shell luôn luôn nằm phía trên phần mà developer có thể xây dựng. Nghĩa là khi một modal như dialog thông báo hoặc bottom sheet xuất hiện, màn hình hiển thị lúc đó sẽ nhìn giống đang bị bug UI. Cũng như người dùng sẽ khó tập trung vào việc xem nội dung của modal đó vì thanh navigation bar quá nổi bật.

Lúc bấy giờ, bọn mình đã nghĩ ra một giải pháp mì ăn liền - dùng phiên bản trong suốt của navigation bar để tạo cảm giác là navigation bar nằm dưới lớp overlay đó. Còn nội dung của navigation bar như icon quay lại, tiêu đề màn hình sẽ được xây dựng bởi developer.

Nhưng khi áp dụng vào thực tế, bọn mình nhận ra nó không phải là một giải pháp tốt. Bởi vì navigation bar phải luôn trong suốt ở trang đó, kể cả khi modal chưa xuất hiện. Và nó dẫn đến hệ quả là layout của màn hình đó dễ bị lệch bố cục nếu như team Tini App có thay đổi gì đó về navigation bar. Cho đến hiện tại Zalo mini app vẫn đang bị vấn đề này.

Sau khi thảo luận với team design bọn mình, cuối cùng team technical đã cung cấp một giải pháp tối ưu hơn tất cả để giải quyết vấn đề này - Navigation bar sẽ tự có một lớp overlay bất cứ khi nào có một modal xuất hiện.

2. Một navigation bar “nhìn lạ lạ”.

Navigation bar chứa hộp điều hướng (navigation box) là một component xa lạ đối với người dùng ở Việt Nam.

Bọn mình sử dụng component như trên là vì bọn mình theo những nhà tiên phong xây dựng mini-app đi trước. Tại sao mình lại sáng chế ra một điều gì mới trong khi các super app trên thị trường mini-app như WeChat và Alipay đều đã làm như vậy? Chưa kể đến việc những người hàng xóm thiện lành trong thị trường mini-app ở Việt Nam cũng đang sử dụng chung một cách như vậy.

Nhưng sau khi áp dụng một thời gian, bọn mình nhận ra rằng người dùng ở Việt Nam khó thích nghi với khái niệm navigation box đó hơn là người dùng ở Trung Quốc, với 5 năm trải nghiệm và thông thạo việc sử dụng mini-app. Thế là bọn mình quyết định rà soát lại những component navigation bar hiện tại đang có ở Tiki để dùng làm giải pháp, và bọn mình có 2 lý do cho điều đó:

  • Người dùng đã quen thuộc với cách điều hướng với navigation bar của Tiki.
  • Navigation bar của Tini app sẽ đồng bộ với cả toàn Tiki, giúp cho component này nhìn giống native hơn, trải nghiệm sẽ xuyên suốt hơn.

Cuối cùng bọn mình cũng đã tìm ra được một component tương đồng để có thể sử dụng cho việc điều hướng trong các Tini app, đó là navigation bar trong màn hình Sản phẩm chi tiết.

Đi cùng với việc sắp ra mắt component navigation bar mới này, bọn mình sẽ cung cấp thêm những quy định chung về việc chuyển trang trong Tini app để cải thiện hơn việc điều hướng cho người dùng. Sẽ có nhiều tài liệu liên quan hơn về component này khi bọn mình ra mắt nhé, các bạn hãy đón chờ.

p/s: Trong khuôn khổ bài viết này, bọn mình chỉ mới có cơ hội đề cập đến các nội dung liên quan đến App shell và Navigation bar. Nếu bạn quan tâm và hứng thú với đề tài này, hãy để lại bình luận ngay bên dưới để bọn mình có động lực viết thêm phần 2, phần 3, phần n… (Community Manager bắt viết dòng này)


Introduction

For those not familiar with Tini apps, let me tell you what they are and how they work.

  • Tini apps are mobile apps built for and within the super app (this case is the Tiki platform). There are Tini apps for games, food delivery, financial investments, ticket sales, and more.

  • Users don’t need to install or uninstall those apps.
  • Speed, Simplicity, Stability, and Security are the product’s core principles.
    • Speed: Aim to maximize the convenience and efficiency of the user experience, such as quick access, payments, and sharing.
    • Simplicity: Focus on core functions and be designed with ease of use as a priority.
    • Stability: This principle almost belongs to the Engineering side; it’s like the “fourth dimension” for Product Designers - you sense it but can’t touch it. So in terms of UX, we change it to Consistency.
    • Security: Help users to feel secure in their actions, and their information is always protected.
  • Tini app is a mini-app solution that is popular for super apps in China, such as WeChat mini program, Alipay applet, etc.

When we started the project to bring the Ticketbox app into the Tiki app in late 2019, that was the first time we knew about a mini-app concept.

Then in December 2020, we kickstarted the Tini App project. Following the design process, we researched all pioneers in the mini-app solution industry.

And that’s a big challenge for our design team to improve the experience of Tini apps because there is a new concept with some new behaviors unfamiliar to users in Vietnam. Lastly, there are many Tini apps, which means not only the Tini App internal team builds them, but lots of external developers and designers are involved in building those apps. How to ensure all the experience of navigation is consistent or all the user information is secure?

App shell

The Tini App team comes up with the App shell solution to provide the most secure environment for our user’s sensitive information and a consistent navigation experience.

The basic Tini app page includes two layers:

  • App shell (native, maintained by the Tini App team).
  • Developer’s custom page.

In a simple explanation, the App shell is the same as the web browser bar. Developers can not config it, except the internal team.

App shell includes three main components:

  1. Top: Navigation bar.
  2. Middle: System dialog.
  3. Bottom: Bottom bar.

Due to that version of the Navigation bar, we kept consistent the navigation behavior for all apps, but we faced some other UX problems:

1. App shell’s components above all

The first problem is the App shell’s components are consistently above the Developer’s custom page. When a custom modal such as dialog or bottom sheet appears, the page looks like a bug, and users hardly focus on the modal’s content when the navigation bar is so prominent.

At that time, we came up with a low-hanging fruit solution - use the transparent navigation bar to make it look like the overlay layer above the navigation bar. The content of the navigation bar, such as the Back icon or a title page, will be developed at the Developer’s custom layer.

But when we did, we realized it was not a good solution because it must have transparent navigation for that page even though the modal did not appear. And the layout was quickly broken when the Tini team had any updates to the navigation bar. Until now, the Zalo mini-app still has this problem.

After going back and forth about this problem with our design team, the technical team finally provided an excellent solution to solve this UX problem - The navigation bar has its overlay layer when the modal appears.

2. The uncommon navigation bar

A navigation bar with a navigation box is an uncommon component for users.

We have a component like that because we learn from those mini-app pioneers. Why do we invent something new when super apps like WeChat and AliPay have already done that? Not to mention our friendly neighbors in the Vietnam mini-app industry are also using the same way.

But we realize Vietnamese users are more complicated to adapt to this concept than Chinese users, with almost five years to know how it should be used. Then we decided to look back to our Tiki existing navigation bar to find the solution because of two reasons:

  • Users understand Tiki navigation bar behaviors already.
  • The Tini navigation bar will be consistent with the platform, making the component native look-alike.

Then we find a familiar component that can be used for Tini Apps, the navigation bar of the Product detail page.

Following the upcoming navigation bar component, we will release the standard transition page for Tini apps to improve the navigation experience. There will be more documentation when we release this component.

p/s: In the framework of this article, we only had the opportunity to mention the content related to the App shell and the Navigation bar. If you are interested in this topic, please leave a comment below so that we have the motivation to write more for a 2nd part, 3rd part… (my community manager forced me to write this line)


Thông tin liên quan

Design library

Standard flows

  • Tini Checkout flows: Figma

Template

12 Likes

song ngữ luôn, có tâm quá :smiley:

4 Likes

Ý anh Việt là tiếp tục phát huy á anh @tu.bui :smiley:

3 Likes

Quá tuyệt vời. Cảm ơn anh

4 Likes

chất như nước cất nha tác giả

4 Likes

Tú, would you do it again?

3 Likes