Thiết kế UI/UX ứng dụng di động

Người thiết kế mới hay nghĩ thiết kế ứng dụng giống web đáp ứng đa thiết bị thu nhỏ. Đây là quan niệm sai gây nhiều lỗi sau ra mắt.

Ứng dụng di động có 5 nguyên tắc riêng biệt so với web. Người thiết kế chuyển từ web sang ứng dụng cần học 2-4 tháng để hiểu cấu trúc gốc.

5 nguyên tắc khác biệt giữa ứng dụng di động và web

Đây là 5 điểm khác biệt cốt lõi quyết định cách thiết kế ứng dụng khác hẳn web đáp ứng đa thiết bị:

• Ưu tiên chạm: vùng ngón tay phía dưới màn hình, vùng chạm tối thiểu 44x44px Apple HIG hoặc 48x48dp Material.
• Cấu trúc gốc nền tảng: iOS có thẻ tab dưới, Android có thanh điều hướng dưới — không thể đổi vai trò.
• Tích hợp giao diện hệ thống: thanh trạng thái, vùng an toàn, tai thỏ, vạch trang chủ phải xử lý đúng từng thiết bị.
• Trạng thái mất kết nối: mạng yếu hoặc mất, đồng bộ dữ liệu khi có lại — ứng dụng phải hoạt động cả khi không mạng.
• Giới hạn hiệu năng: 60 khung hình mỗi giây, không lag khi cuộn, tải hình ảnh chậm theo nhu cầu.

5 nguyên tắc Web22 tuân thủ khi thiết kế ứng dụng

Web22 áp dụng 5 nguyên tắc bắt buộc cho mọi dự án ứng dụng di động, từ bản phác thảo đến doanh nghiệp:

• Tuân thủ Apple HIG và Material Design 3: người dùng quen cấu trúc gốc. Vi phạm khiến người dùng bối rối kèm đánh giá 1 sao.
• Tối ưu vùng ngón tay: phần lớn người dùng dùng ứng dụng bằng 1 tay. Nút quan trọng phải ở 60% chiều cao tính từ dưới.
• Vùng chạm tối thiểu: Apple HIG 44x44pt, Material 48x48dp. Web22 xác minh mọi nút và biểu tượng đạt kích thước tối thiểu.
• Vùng an toàn và tai thỏ: ứng dụng phải hiển thị đúng trên iPhone X+ kèm tai thỏ, Android Pixel có khoét camera.
• Trạng thái lỗi, mất kết nối, trống: thiết kế cả luồng thuận lợi và trường hợp ngoại lệ kèm dữ liệu lưu sẵn.

Web22 chia thành 4 hạng mục theo số màn hình và độ phức tạp bản chạy thử. Mức phù hợp 80% khách là gói chuẩn 15-35 triệu.

Bản phác thảo 5-10 triệu cho bản trình bày kêu gọi đầu tư. Doanh nghiệp 35-80 triệu cho ứng dụng ngân hàng, y tế, siêu ứng dụng.

Hạng mục 1 — Bản phác thảo (5 – 10 triệu · 1-2 tuần)

Phù hợp startup kêu gọi vốn, bản thử nghiệm xác thực ý tưởng, nhà sáng lập muốn cho đội lập trình xem ý tưởng.

Web22 thiết kế 5-10 màn hình cốt lõi gồm hướng dẫn ban đầu, màn hình chính, 2-3 tính năng chính, hồ sơ. Chọn 1 nền tảng iOS hoặc Android, không cả 2.

• Bản chạy thử cơ bản: bấm chuyển giữa màn hình, không có hiệu ứng phức tạp.
• Nghiên cứu người dùng tối giản: 1 nhân vật đơn giản, không phỏng vấn sâu.
• Không có chế độ tối: chỉ chế độ sáng, không trường hợp ngoại lệ.
• Bàn giao: file Figma chỉnh sửa được, video Loom 15-20 phút.

Hạng mục 2 — Gói chuẩn ⭐ (15 – 35 triệu · 3-5 tuần)

Mức phù hợp nhất cho ứng dụng trung bình ra mắt thử nghiệm kèm đội lập trình triển khai. Phạm vi đầy đủ của gói chuẩn gồm 8 nhóm hạng mục:

• 15-25 màn hình: đầy đủ luồng người dùng chính theo cấu trúc gốc nền tảng.
• Biến thể iOS và Android: Material Design 3 cho Android, Apple HIG iOS 17+ cho iPhone.
• Bản chạy thử tương tác: hoạt cảnh chuyển kèm hoạt cảnh thông minh.
• Bộ thành phần cơ bản: nút, ô nhập, thẻ, mục danh sách trong file kèm sổ tay phong cách.
• Trường hợp ngoại lệ đầy đủ: trạng thái lỗi, trống, đang tải, mất kết nối.
• Chế độ sáng và tối: mọi màn hình có biến thể đầy đủ 2 chế độ.
• Tài liệu bàn giao lập trình viên: chế độ lập trình viên Figma, thông số kích thước, xuất tài nguyên @1x/2x/3x.
• Video ghi hướng dẫn: 30-45 phút giải thích luồng cộng lý do thiết kế.

Hạng mục 3 — Doanh nghiệp (35 – 80 triệu · 5-10 tuần)

Phù hợp ứng dụng ngân hàng, y tế, đa vai trò, siêu ứng dụng. Phạm vi mở rộng so với gói chuẩn, gồm 6 nhóm chính:

• 40+ màn hình: đầy đủ luồng phức tạp đa vai trò (khách, quản trị viên, đại lý).
• Hệ thống thiết kế riêng: chuyển sang phạm vi nhánh hệ thống thiết kế nếu dùng cho cả web và ứng dụng.
• Dễ tiếp cận WCAG 2.1 AA: tương phản đủ, đọc màn hình hỗ trợ, điều hướng bằng bàn phím.
• Kiểm thử người dùng: 5-10 người dùng thật kèm 2-3 vòng cải tiến — Web22 dẫn buổi kiểm thử và ghi âm.
• Bàn giao Storybook (công cụ quản lý component): cấu trúc Storybook kèm đoạn mã mẫu React Native hoặc Flutter.
• Đào tạo đội ngũ: 1-2 buổi đào tạo cho đội triển khai.

Hạng mục 4 — Làm mới ứng dụng đang chạy (10 – 25 triệu · 2-5 tuần)

Phù hợp ứng dụng đã chạy 1-3 năm cần làm mới giao diện hoặc đổi thương hiệu mà không thay công nghệ. Giữ luồng chính, chỉ làm mới giao diện.

Web22 rà soát ứng dụng hiện tại 60-90 phút và ghi video Loom. Xác định điểm khó người dùng qua đánh giá Ứng dụng Store kèm phân tích khách cung cấp.

Hạng mục làm mới phù hợp 2 trường hợp chính:

• Làm mới thương hiệu: cập nhật màu, kiểu chữ, bộ biểu tượng mới — giữ nguyên luồng nghiệp vụ.
• Hiện đại hoá trải nghiệm: chuyển điều hướng cũ sang điều hướng dưới, chuyển ô bật cũ sang ô trượt lên.

KHÔNG bao gồm nghiên cứu người dùng sâu hoặc dựng lại luồng từ đầu. Khách muốn dựng lại từ đầu nên đặt gói chuẩn mới.

Mỗi dự án ứng dụng di động UI/UX gồm 4 nhóm việc tuần tự. Web22 dùng Figma làm công cụ chính kèm Loom ghi video hướng dẫn bàn giao.

Nhóm 1 — Nghiên cứu và rà soát

Trước khi thiết kế, Web22 nghiên cứu kỹ về người dùng và đối thủ. Mục tiêu là tránh thiết kế dựa trên đoán mò.

5 đầu mục nghiên cứu Web22 thực hiện cho gói chuẩn trở lên:

• Nhân vật người dùng: 2-3 nhân vật đại diện cho nhóm khách hướng đến, gồm tuổi, nghề nghiệp, mục tiêu, điểm khó.
• Phân tích đối thủ: 5-10 ứng dụng cùng ngách (Ứng dụng Store nhóm đầu và đối thủ khách chỉ định).
• Bản đồ hành trình: từ lần mở đầu tiên đến kích hoạt, dùng hàng ngày, giữ chân.
• Điểm khó và cơ hội: xác định qua đánh giá Ứng dụng Store (1-2 sao là kho thông tin quý).
• Mô tả phạm vi: 3-5 trang gồm phạm vi, luồng chính, danh sách màn hình.

Nhóm 2 — Phác thảo và luồng

Sau nghiên cứu, Web22 vẽ phác thảo khung sơ bộ và luồng trước khi thiết kế giao diện. Mục tiêu là khách duyệt phác thảo trước khi đầu tư thời gian vào giao diện đẹp.

7 đầu mục phác thảo Web22 thực hiện trong giai đoạn này:

• Phác thảo khung sơ bộ: hộp xám trong Figma, không màu, tập trung cấu trúc và phân cấp.
• Sơ đồ luồng người dùng: dùng Figjam hoặc Figma, nối các màn hình theo hành động.
• Kiến trúc thông tin: nhóm tính năng theo cấu trúc điều hướng (thẻ tab 4-5 mục, ngăn kéo cho phụ).
• Cấu trúc điều hướng: chọn theo nền tảng — iOS thẻ tab dưới, Android thanh điều hướng dưới.
• Luồng hướng dẫn ban đầu: 3-5 bước chào mừng, giá trị nổi bật, xin quyền, đăng ký hoặc đăng nhập.
• Trường hợp ngoại lệ và lỗi: phác thảo trạng thái trống, lỗi, đang tải, mất kết nối.
• Khách duyệt phác thảo: tránh tình huống đẹp mà sai luồng nghiệp vụ.

Nhóm 3 — Giao diện Figma chuẩn gốc nền tảng

Web22 thiết kế theo hướng dẫn gốc của Apple và Google. Mục tiêu là người dùng cảm thấy ứng dụng tự nhiên trên thiết bị họ đang dùng.

5 đầu mục giao diện Web22 thực hiện cho gói chuẩn trở lên:

• Material Design 3 cho Android: hệ thống màu Material You, màu động, thanh điều hướng dưới 3-5 mục.
• Apple HIG iOS 17+ cho iPhone: biểu tượng SF Symbols, thẻ tab 5 mục tối đa, ô trượt lên với tay nắm.
• Bố cục đáp ứng đa thiết bị: tự động co giãn trong Figma cho iPhone 14/15 và Android Pixel 7/8.
• Thanh trạng thái và vùng an toàn: xử lý tai thỏ, đảo động, khoét camera đúng từng thiết bị.
• Chế độ sáng và tối: biến thể đầy đủ 2 chế độ cho mọi màn hình ở gói chuẩn trở lên.

Mỗi màn hình có đầy đủ trạng thái — chờ, đang tải, lỗi, trống, thành công. Không bỏ sót trạng thái nào trong giao diện.

Nhóm 4 — Bản chạy thử và bàn giao lập trình viên

Sau khi xong giao diện, Web22 xây bản chạy thử tương tác và bàn giao tài liệu cho lập trình viên. Mục tiêu là lập trình viên hiểu trong 30-60 phút thay vì đọc file mò.

6 đầu mục bàn giao Web22 thực hiện cho gói chuẩn trở lên:

• Bản chạy thử tương tác: trong Figma, nối các màn hình, đặt điều kiện kích hoạt (chạm, vuốt).
• Hiệu ứng chuyển: qua hoạt cảnh thông minh (trượt, mờ dần, phóng to).
• Kiểm thử trên thiết bị thật: qua ứng dụng Figma Mirror để xem trên iPhone hoặc Android thật.
• Chế độ lập trình viên Figma: ra mắt 2023+ — lập trình viên xem thông số kích thước, khoảng cách, màu, kiểu chữ.
• Xuất tài nguyên: biểu tượng SVG kèm hình ảnh @1x/2x/3x cho lập trình viên đưa vào dự án.
• Video ghi hướng dẫn: 30-60 phút (gói chuẩn trở lên) giải thích luồng kèm lý do thiết kế.

Trước khi vào quy trình, Web22 muốn bạn nắm 4 chủ đề ảnh hưởng đến chất lượng thiết kế và quyết định sau ra mắt.

5 sai lầm thường gặp khi thiết kế ứng dụng thiếu kinh nghiệm

Web22 rà soát nhiều ứng dụng ra mắt thất bại do thiết kế. Đây là 5 sai lầm phổ biến gây tỉ lệ gỡ cao:

• Hướng dẫn ban đầu quá dài: 7-10 màn hình trước khi người dùng thấy giá trị thực, gây bỏ qua hoặc gỡ ứng dụng.
• Xin quyền trước khi tạo giá trị: bật yêu cầu quyền ngay khi mở ứng dụng — người dùng từ chối hơn 70% lần đầu.
• Trạng thái đang tải không rõ: màn hình trắng 3-5 giây gây người dùng nghĩ ứng dụng treo, dùng màn hình bóng giải quyết.
• Vùng chạm quá nhỏ: thói quen thiết kế web nút 32x32px trên di động, vi phạm gây nhấn nhầm thường xuyên.
• Vi phạm cấu trúc gốc: Android dùng thẻ tab dưới kiểu iOS hoặc iOS dùng nút hành động Material, gây rối loạn.

Web22 nghiêm tuân thủ Material 3 và Apple HIG để tránh 5 sai lầm trên ngay từ giai đoạn phác thảo.

Cân nhắc lập trình gốc và đa nền tảng khi thiết kế

Khi thiết kế ứng dụng, Web22 luôn hỏi khách định lập trình gốc hay đa nền tảng. Câu trả lời ảnh hưởng đến cách tiếp cận thiết kế.

3 lựa chọn lập trình ảnh hưởng đến quyết định thiết kế:

• Gốc iOS và Android (2 mã nguồn): thiết kế 2 biến thể riêng theo Material 3 và HIG, ra mắt chậm 1,5-2 lần.
• React Native: thiết kế 1 bộ kèm tinh chỉnh nhỏ, cảm giác gốc còn 85-90%, ra mắt nhanh hơn 30-50%.
• Flutter: thiết kế 1 bộ dùng Material 3 trên cả 2 nền tảng, phù hợp B2B hoặc nội bộ ít quan tâm cảm giác gốc.

Web22 thiết kế phù hợp công nghệ khách chọn, không thiết kế gốc rồi ép vào Flutter.

So sánh thiết kế ứng dụng cho startup và doanh nghiệp lớn

Web22 phân biệt rõ thiết kế cho startup và doanh nghiệp lớn ngay giai đoạn nghiên cứu. Mục tiêu khác, ngân sách khác, lộ trình khác.

• Startup: 1-2 tính năng cốt lõi để xác thực ý tưởng, ưu tiên ra mắt nhanh, hướng dẫn 3-5 màn hình.
• Doanh nghiệp lớn: quy mô, đa vai trò, tuân thủ pháp lý, dễ tiếp cận WCAG 2.1 AA, đào tạo đội ngũ.
• Ngân sách: startup 5-35 triệu (phác thảo hoặc chuẩn), doanh nghiệp 35-80 triệu (đầy đủ kiểm thử và đào tạo).

4 lý do ứng dụng ra mắt thường thất bại trong 6 tháng đầu

Web22 thấy nhiều startup ra mắt ứng dụng rồi dừng trong 6 tháng. Có 4 lý do chính phía thiết kế và sản phẩm, chưa tính phù hợp thị trường:

• Hướng dẫn ban đầu thất bại: 40-60% người dùng gỡ ứng dụng trong 24 giờ đầu vì không hiểu ứng dụng làm gì.
• Quyền truy cập bị từ chối: xin quyền vị trí, thông báo, máy ảnh quá sớm — người dùng từ chối 70%.
• Trạng thái trống quá trống: người dùng mới chưa có dữ liệu nên thấy màn hình trắng và tưởng ứng dụng hỏng.
• Tỉ lệ thoát ở màn hình quan trọng: người dùng dừng tại thanh toán hoặc đăng ký, không hoàn thành.

Web22 thiết kế kèm giả thuyết về điểm rời bỏ và cấu hình Hotjar hoặc Firebase sẵn. Gói chuẩn có mẫu báo cáo chỉ số theo dõi 30 ngày đầu.

Web22 chia gói chuẩn thành 5 tuần. Bản phác thảo chỉ 1-2 tuần, doanh nghiệp 6-10 tuần với 6-8 mốc nhỏ hơn.

Tuần 1 — Nghiên cứu và phác thảo

Phỏng vấn khách 60-90 phút hiểu nghiệp vụ. Xác định 2-3 nhân vật người dùng và phân tích 5-10 ứng dụng đối thủ trong ngách.

Vẽ bản đồ hành trình kèm phác thảo sơ bộ và luồng người dùng trong Figma. Khách duyệt phác thảo trước khi sang tuần 2.

Tuần 2-3 — Giao diện màn hình cốt lõi

Thiết kế 15-20 màn hình chính theo Material 3 hoặc Apple HIG. Phạm vi gồm hướng dẫn ban đầu, màn hình chính, tính năng cốt lõi, hồ sơ, cài đặt.

Bố cục đáp ứng đa thiết bị kèm chế độ sáng và tối. Khách rà soát qua bình luận Figma cuối tuần 3.

Tuần 4 — Trường hợp ngoại lệ và bản chạy thử

Thêm 5-10 màn hình ngoại lệ gồm lỗi, trống, đang tải, mất kết nối. Xây bản chạy thử tương tác kèm hoạt cảnh thông minh.

Kiểm thử trên Figma Mirror với thiết bị thật iPhone và Android. Khách trải nghiệm trực tiếp trên điện thoại của mình.

Tuần 5 — Bàn giao và đóng dự án

Cấu hình chế độ lập trình viên Figma, xuất tài nguyên @1x/2x/3x, ghi thông số kích thước chi tiết. Video ghi hướng dẫn 30-45 phút giải thích luồng kèm lý do thiết kế.

Bàn giao file Figma chỉnh sửa được cho khách giữ vĩnh viễn. Bảo hành 30-60 ngày bắt đầu từ ngày bàn giao.

5 cam kết kỹ thuật của Web22

Web22 áp dụng 5 cam kết cho mọi gói từ bản phác thảo trở lên. Cam kết minh bạch tránh bất ngờ sau ký hợp đồng:

• Tuân thủ Material 3 và Apple HIG: thiết kế 2 biến thể iOS và Android riêng ở gói chuẩn trở lên.
• Khách có toàn quyền file Figma sau bàn giao: file chỉnh sửa được, mở rộng được. KHÔNG khoá chỉ đọc.
• Video ghi hướng dẫn 30-60 phút: giải thích luồng kèm lý do thiết kế kèm xử lý trường hợp ngoại lệ.
• Có ưu đãi gộp gói cho khách dùng hệ thống thiết kế Web22: tái sử dụng dấu hiệu và thành phần. Báo giá riêng theo phạm vi.
• Giới thiệu đối tác lập trình ứng dụng: Web22 hợp tác đối tác React Native và Flutter tại VN, hưởng phí giới thiệu minh bạch.

Web22 KHÔNG làm 6 việc sau

Thương hiệu thật lòng của Web22 thể hiện qua minh bạch việc từ chối. Không úp mở để giành đơn rồi đàm phán lại:

• KHÔNG lập trình ứng dụng gốc (Swift iOS, Kotlin Android): qua đối tác chuyên dòng này.
• KHÔNG lập trình ứng dụng đa nền tảng (React Native, Flutter): qua đối tác chuyên dòng này.
• KHÔNG gửi Ứng dụng Store hoặc Google Play: đối tác lập trình xử lý tài khoản nhà phát triển.
• KHÔNG nhận dưới 3 triệu mỗi dự án: chi phí nghiên cứu và thiết kế cẩn thận đã hết 2-3 triệu.
• KHÔNG nhận báo giá mù không có mô tả rõ: yêu cầu đặt buổi tư vấn 1-2 triệu mỗi buổi trước.
• KHÔNG cam kết 1 tuần xong ứng dụng: bản phác thảo tối thiểu 1-2 tuần. Ép tiến độ gây chất lượng kém.

• Dịch vụ UI/UX — tổng quan 8 hạng mục (4 hệ thống thiết kế và 4 UI/UX ứng dụng di động).
• Hệ thống thiết kế Figma — kết hợp với ứng dụng sẽ có ưu đãi gộp gói. Phù hợp khi có cả web và ứng dụng dùng chung thương hiệu.
• Thiết kế website — nếu chỉ cần web đáp ứng đa thiết bị, không cần ứng dụng gốc riêng (10-35 triệu).

Web22 thiết kế giao diện và trải nghiệm cho các website sau:

• Mộc Wedding — thiệp cưới trực tuyến sang trọng — web studio cưới — bộ sưu tập ảnh, bảng giá gói chụp, form đặt lịch tư vấn.
• Hoa Tươi Duy Duy — web cửa hàng hoa tươi TP.HCM — shop hoa tươi — đặt hoa theo dịp, giao nhanh nội thành, giỏ hàng và thanh toán.

Xem đầy đủ tại trang dự án Web22 đã thực hiện. Tham khảo thêm nghiên cứu trải nghiệm của Nielsen Norman Group.