8 quy tắc giúp bạn tạo ra thiết kế Mobile App “hoàn hảo”

‍

Thống kê của Q&Me cho thấy trong năm 2020, thời gian sử dụng các ứng dụng di động của người dùng tại Việt Nam đã tăng lên đáng kể, từ 4 giờ/ ngày lên 5,1 giờ/ ngày và chưa có dấu hiệu giảm xuống. Số lượng ứng dụng được sử dụng trung bình mỗi tuần theo đó cũng tăng 31%, mở ra nhiều cơ hội cho ngành thiết kế và phát triển ứng dụng di động.

Vậy liệu bạn đã biết cách để thiết kế ra một Mobile App xịn sò và thân thiện với người dùng? Hãy cùng Capi Demy khám phá nhé!

1. Reach Area

Thumb Zone (quy tắc “ngón tay cái”) chỉ ra vùng thuận tiện và bất tiện khi người dùng sử dụng ngón tay cái thao tác trên điện thoại. Một giao diện màn hình điện thoại có thể chia ra thành 3 phần:

- Vùng khó chạm: Để chạm vào vùng này đòi hỏi nhiều nỗ lực và khiến ngón tay người dùng không thoải mái.

‍

- Vùng có thể chạm: Để chạm vào vùng này cần một chút nỗ lực của ngón tay và có thể gây khó khăn cho những người dùng với ngón tay ngắn.

- Vùng dễ chạm: Có thể chạm vào vùng này một cách dễ dàng, tự nhiên mà không cần cố gắng.

2. Platform Guidelines

Giữa iOS và Android luôn có sự khác nhau về cơ sở người dùng, vậy nên đừng cố gắng tận dụng UI element từ nền tảng này sang nền tảng khác.

Apple nhấn mạnh vào trải nghiệm người dùng trên nhiều thiết bị khác nhau và cung cấp các thiết kế rất sáng tạo. Apple công bố guideline thiết kế cho tất cả các loại sản phẩm trên trang web của mình (Apple’s Human Interface Guidelines).

‍

Google cung cấp một ngôn ngữ trực quan cho người dùng của họ, để xác định guideline thiết kế một cách sáng tạo. Material design bao gồm các guideline cho cả ứng dụng web của máy tính để bàn, cũng như các ứng dụng Android.

>> Có thể bạn quan tâm: Bạn đã phân biệt được User Flows vs. Wireframes?

3. Safe Area 

‍

Hãy luôn bảo đảm những thông tin quan trọng không rơi vào “vùng không an toàn”  (notch, camera punch-hole,...). Đối với vùng an toàn, toàn bộ thông tin có thể được hiển thị dễ dàng tới người dùng trên các thiết bị di động khác nhau. Tuy nhiên, với một số thiết bị, hãy cẩn thận với những khu vực như “tai thỏ” hay camera trước, hoặc người dùng có thể sẽ bỏ lỡ những thông tin quan trọng trên ứng dụng của bạn.

4. Font Type and Size

Những font chữ và cỡ chữ khác nhau có thể ảnh hưởng đến cảm xúc của người dùng và độ dễ đọc của thông tin.

- Typeface: Hãy lựa chọn một typeface tương thích với nhiều kích cỡ (size), độ dày mỏng (weight) khác nhau để duy trì được độ dễ đọc và tính khả dụng của văn bản.

‍

- Font size: Sử dụng font size rõ ràng, dễ đọc. Cỡ chữ nên đặt tối thiểu là 11 point để có thể đọc được từ khoảng cách thông thường mà không cần phóng to.

- Contrast: Có thể sử dụng các công cụ kiểm tra độ tương phản để tránh các vấn đề liên quan đến màu sắc. Và cũng đừng quên áp dụng quy tắc 60-30-10 để duy trì sự hài hòa trong màu sắc giao diện mobile app.

>> Xem thêm: Định hướng cho người mới muốn tham gia ngành UI/UX

5. CTA Button

Hãy thiết kế button của bạn thân thiện với chuyển động ngón tay. Một chiếc button với kích thước từ 40px trở lên sẽ giúp người dùng hạn chế được kha khá lỗi chạm nhầm.

‍

- Với các ứng dụng trên iOS, Apple khuyến nghị kích thước tối thiểu cho các button là 44px.

- Với các ứng dụng trên Android, kích thước button được khuyến nghị là 48dp.

6. Long-scroll problem

‍

Hãy giữ cho giao diện hiển thị gọn gàng nhất có thể. Bạn có thể thử sử dụng tính năng phóng to các thẻ khi chạm hay chia nhỏ các tác vụ thành nhiều màn khác nhau.

7. Tab Bar

‍

Tab bar là một phần không thể thiếu với các ứng dụng di động. Một thanh tab bar gọn gàng sạch đẹp với chú thích đi kèm sẽ giúp cải thiện trải nghiệm người dùng đáng kể.

8. Gesture

‍

Nên sử dụng hành động chạm hay vuốt cho ứng dụng? Hãy cân nhắc thật kỹ vì việc lựa chọn sai loại cử chỉ có thể gây ảnh hưởng xấu đến UX của ứng dụng.

‍

Tổng hợp bởi đội ngũ Capi Demy. 

Nếu bạn có câu hỏi nào đừng ngần ngại kết nối với đội ngũ Capi Demy nhé, chúng mình luôn ở đây và làm điểm tựa vững chắc cho các bạn!

Thông tin liên hệ tư vấn: 

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website:

Capidemy.com

Địa chỉ:

Cơ sở 1 HN: Tầng 6, số 35 Tô Vĩnh Diện, Khương Trung, Thanh Xuân, Hà Nội

Cơ sở 2 HN: Tầng 2 số 2 ngách 28, ngõ 93, Hoàng Văn Thái, Thanh Xuân, Hà Nội.

‍