App di động không phải website thu nhỏ
Trước khi bắt tay thiết kế, Anh Chị cần biết app di động vận hành theo bộ quy tắc riêng, khác web từ cách cầm máy đến cách đặt nút.
App di động thao tác bằng ngón tay và cử chỉ, dùng trong ngữ cảnh di chuyển và tuân theo quy ước của từng hệ điều hành. Bê nguyên bố cục web vào màn hình điện thoại là lỗi phổ biến nhất và gần như luôn dẫn đến trải nghiệm kém. Thiết kế app đúng nghĩa bắt đầu từ một tác vụ mỗi màn hình, mục tiêu chạm đủ lớn cho ngón tay và tôn trọng chuẩn nền tảng mà người dùng đã quen.
App di động không phải website thu nhỏ, ít nhất khi app là công cụ thao tác thật sự chứ không chỉ là bản responsive của trang thông tin. Điểm khác biệt không nằm ở kích thước màn hình mà nằm ở cách người dùng cầm máy, cách họ tương tác và kỳ vọng của họ với từng hệ điều hành. Hiểu điều này trước khi đặt hàng thiết kế sẽ giúp Anh Chị tránh được một loạt quyết định tốn tiền sửa sau.
Bốn điểm khác biệt căn bản
Thứ nhất là cách tương tác. Web dùng chuột và bàn phím, app di động dùng ngón tay: chạm, vuốt, kéo, thu phóng, chạm giữ. Cử chỉ cần dễ khám phá và nhất quán, nếu không người dùng sẽ bỏ qua tính năng vì không biết nó tồn tại.
Thứ hai là kích thước mục tiêu chạm. Trên web, một liên kết nhỏ 12px vẫn bấm được bằng con trỏ chuột. Trên điện thoại, mục tiêu chạm quá nhỏ dẫn đến bấm nhầm liên tục, mà bấm nhầm là thứ người dùng không tha thứ dễ dàng.
Thứ ba là ngữ cảnh dùng. App thường mở khi đang đi lại, một tay cầm máy, ngoài trời nhiều nắng, mạng không ổn định và dễ bị gián đoạn bởi cuộc gọi hay thông báo. Thiết kế cần phản ánh thực tế này bằng màn hình đơn giản, trạng thái chờ và lỗi được thiết kế rõ ràng, không phải chỉ lo giao diện khi mọi thứ hoạt động tốt.
Thứ tư là phần cứng thiết bị. App có thể tận dụng camera, định vị, thông báo đẩy, nhận diện khuôn mặt và khả năng hoạt động offline. Web thông thường không làm được điều này ở cùng mức độ. Tuy nhiên, Sinh Vũ khuyến nghị chỉ tận dụng phần cứng khi tính năng cốt lõi thực sự cần, không tích hợp để cho có.
Quy ước nền tảng không thể bỏ qua
iOS và Android mỗi bên có một bộ quy ước riêng mà người dùng đã học qua nhiều năm dùng máy. Apple đặt nền tảng thiết kế của mình trong Human Interface Guidelines (bộ hướng dẫn giao diện người dùng chính thức của Apple) với ba trục: rõ ràng, nhường chỗ cho nội dung và chiều sâu tinh tế. Rõ ràng ở đây nghĩa là loại bỏ mơ hồ khỏi mọi phần tử tương tác, không chỉ đơn thuần là giao diện trông sạch sẽ.
Google theo đuổi Material Design (hệ thiết kế đa nền tảng của Google) với phân cấp thị giác mạnh và ẩn dụ bề mặt vật lý. Cách tiếp cận của hai hãng khác nhau rõ rệt ở cách đặt thanh điều hướng, nút quay lại và kiểu chuyển màn hình.
Người dùng iOS quen tay với iOS, người dùng Android quen tay với Android. Khi thiết kế trộn lẫn quy ước của hai nền tảng, người dùng sẽ cảm thấy lạc lõng dù không nói ra được lý do.
Kinh nghiệm thực hành Sinh Vũ
Nguyên tắc một tác vụ mỗi màn hình
Màn hình nhỏ và người dùng dễ bị ngắt quãng. Nielsen Norman Group nhấn mạnh rằng trên di động nên ưu tiên một tác vụ chính mỗi màn hình và bộc lộ dần độ phức tạp, vì người dùng khó ôm nhiều lựa chọn cùng lúc trong ngữ cảnh di chuyển. Đây là nguyên tắc thiết kế có căn cứ nghiên cứu, không phải gu thẩm mỹ.
Trên web, một trang có thể chứa menu chính, nội dung chính, sidebar và footer mà vẫn dùng được vì màn hình rộng và người dùng ngồi yên. Trên app, bố cục tương tự sẽ trở thành mớ hỗn độn khó thao tác.
Lỗi thường gặp khi chuyển từ web sang app
- Bê nguyên bố cục nhiều cột, nhiều liên kết nhỏ từ web vào màn hình điện thoại. Kết quả là người dùng liên tục bấm nhầm hoặc phải zoom để chạm đúng.
- Trộn lẫn quy ước iOS và Android trong cùng một app. Không ai phàn nàn thành lời nhưng tỉ lệ bỏ app sẽ tăng.
- Nhồi quá nhiều hành động vào một màn hình thay vì tách theo từng tác vụ có trình tự.
- Bỏ quên trạng thái mạng yếu, offline và màn hình lỗi. Đây không phải chi tiết nhỏ vì người dùng Việt Nam thường gặp mạng không ổn định.
- Quên khả năng tiếp cận: chữ quá nhỏ, tương phản kém, không hỗ trợ cỡ chữ động cho người dùng có vấn đề về thị lực.
Góc nhìn của Sinh Vũ
Nếu Anh Chị cần app dùng thường xuyên như công cụ làm việc: Đầu tư thiết kế riêng theo chuẩn nền tảng, không tái sử dụng nguyên xi bố cục web. Luồng, màn hình, cử chỉ và hệ thiết kế cần được tính toán từ đầu cho ngữ cảnh di động.
Nếu Anh Chị chỉ cần phiên bản di động của trang thông tin: Responsive web (web thích ứng màn hình) thường đủ dùng và tiết kiệm hơn đáng kể so với xây app riêng. Không phải mọi thứ đều cần là app.
Sinh Vũ tập trung vào phần đúng thế mạnh trong thiết kế app: luồng người dùng, kiến trúc màn hình, cử chỉ, hệ thiết kế và sự nhất quán thương hiệu trên từng màn. Sinh Vũ thiết kế theo chuẩn nền tảng để người dùng thấy quen tay, rồi bàn giao đặc tả và tài sản thiết kế cho đội lập trình. Phần kỹ thuật nền tảng do đội kỹ thuật của Anh Chị hoặc đối tác đảm nhận, Sinh Vũ phối hợp chặt để giao diện lên đúng ý đồ.
Nguồn tham khảo
Apple Human Interface Guidelines (developer.apple.com); Google Material Design (material.io); Nielsen Norman Group, nghiên cứu về mobile UX và progressive disclosure.
Câu hỏi thường gặp
Thiết kế app rồi có cần thiết kế web riêng không?
Có, nếu hai kênh phục vụ mục đích khác nhau. App thường là công cụ thao tác thường xuyên, web thường là nơi tra cứu hoặc giới thiệu. Bố cục, luồng và cách tổ chức thông tin của hai kênh này cần được thiết kế tách biệt, dù có thể dùng chung hệ màu và ngôn ngữ thương hiệu.
App iOS và Android có cần thiết kế hai bản riêng không?
Không nhất thiết phải thiết kế hai bản hoàn toàn khác nhau, nhưng cần điều chỉnh theo quy ước của từng nền tảng. iOS và Android có cách đặt nút điều hướng, kiểu chuyển màn và một số cử chỉ mặc định khác nhau. Người dùng iOS quen tay với iOS và ngược lại, nếu trộn lẫn quy ước họ sẽ cảm thấy lạc lõng dù không nói ra được lý do.