25 nguyên tắc thiết kế trang web dành cho di động theo xu hướng người dùng trên mobile

1. Google Confidential and Proprietary 1Google Confidential and Proprietary 1Google Confidential and Proprietary
Các Nguyên Tắc Thiết
Kế Trang Web Dành Cho
Di Động

2. Proprietary + Confidential
NGUYÊN TẮC
Trang chủ và Điều hướng
trang web
Làm nổi bật lời kêu gọi hành động
Làm danh mục ngắn gọn, dễ hiểu
Dễ dàng quay về trang chủ
Đừng sử dụng quá nhiều quảng cáo
1
2
3
4

3. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
● Đặt lời kêu gọi hành động ở chỗ dễ
thấy nhất của website của bạn.
Mẹo nên dùng
Nguyên tắc 1
Làm nổi bật lời kêu gọi
hành động
Ví dụ điển hình
Trang chủ và Điều
hướng trang web

4. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
● Menu ngắn gọn với danh mục rõ ràng
sẽ giúp người truy cập trang web trên
điện thoại di động dễ dàng xem nội
dung website hơn
Mẹo nên dùng
Nguyên tắc 2
Làm danh mục ngắn gọn,
dễ hiểu
Ví dụ điển hình
Trang chủ và Điều
hướng trang web

5. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
● Sử dụng logo của bạn như một nút
bấm để cho phép người dùng dễ dàng
quay về trang chủ.
Mẹo nên dùng
Nguyên tắc 3
Dễ dàng quay về trang chủ Ví dụ điển hình
Trang chủ và Điều
hướng trang web

6. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
● Đừng làm các banner quảng cáo ảnh
hưởng đến việc xem nội dung trang
web và nhất là không ảnh hưởng đến
các lời kêu gọi hành động.
Mẹo nên dùng
Nguyên tắc 4
Đừng sử dụng quá nhiều
quảng cáo
Ví dụ điển hình
Trang chủ và Điều
hướng trang web

7. Proprietary + Confidential
NGUYÊN TẮC
Chức năng tìm kiếm
Thiết kế chức năng tìm kiếm
Bảo đảm kết quả tìm kiếm chính xác
Sử dụng bộ lọc để cải thiện kết quả tìm kiếm
Hướng dẫn người dùng tìm kiếm tốt hơn
5
6
7
8

8. Proprietary + Confidential
● Đặt chức năng tìm kiếm website gần
phía trên trang chủ
Mẹo nên dùng
Nguyên tắc 5
Thiết kế chức năng tìm
kiếm
Ví dụ điển hình
Tìm kiếm trang

9. Proprietary + Confidential
● Bảo đảm kết quả tìm kiếm website
chính xác, và sử dụng các tính năng
tìm kiếm thông minh như
autocomplete và sửa lỗi chính tả.
Mẹo nên dùng
Nguyên tắc 6
Bảo đảm kết quả tìm kiếm
chính xác
Ví dụ điển hình
Tìm kiếm trang

10. Proprietary + Confidential
● Sử dụng bộ lọc để giúp người truy cập
tìm kiếm kết quả cần tìm
Mẹo nên dùng
Nguyên tắc 7
Sử dụng bộ lọc để cải
thiện kết quả tìm kiếm
Ví dụ điển hình
Tìm kiếm trang

11. Proprietary + Confidential
● Nếu các sản phẩm của bạn có thể
được phân loại dễ dàng theo danh
mục, đặt một số câu hỏi trước để giúp
người truy cập xem kết quả tìm kiếm
liên quan nhất
Mẹo nên dùng
Nguyên tắc 8
Hướng dẫn người dùng tìm
kiếm tốt hơn
Ví dụ điển hình
Tìm kiếm trang

12. Proprietary + Confidential
NGUYÊN TẮC
Tăng tỷ lệ chuyển đổi mua hàng
Cho phép người truy cập xem nội dung trang web
trước khi đăng kí
Cho phép người truy cập mua hàng không cần
đăng kí tài khoản
Tận dụng thông tin có sẵn để tăng sự tiện lợi cho
khách hàng
Sử dụng tính năng Nhấp Để Gọi cho các thao tác
phức tạp
Tạo thao tác chuyển đổi đơn giản trên các thiết bị
khác nhau
9
10
11
12
13

13. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
● Cho phép người truy cập xem nội dung
website mà không cần đăng kí tài
khoản ở trang của bạn
Mẹo nên dùng
Nguyên tắc 9
Cho phép người truy cập
xem nội dung trang web
trước khi đăng kí
Ví dụ điển hình
Tính Thương Mại &
Chuyển Đổi

14. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
● Cho phép người truy cập mua hàng mà
không cần đăng kí tài khoản, và cung
cấp lợi ích thực tế để khuyến khích
người dùng đăng kí
Mẹo nên dùng
Nguyên tắc 10
Cho phép người truy cập
mua hàng không cần đăng
kí tài khoản
Ví dụ điển hình
Tính Thương Mại &
Chuyển Đổi

15. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Tận dụng thông tin có sẵn để tăng sự tiện
lợi cho khách hàng
Nguyên tắc 11
● Tận dụng thông tin có sẵn trên
website, hoặc sử dụng dịch vụ của
bên thứ 3 để có thể tạo chuyển đổi dễ
dàng cho khách hàng.
Mẹo nên dùng
Ví dụ điển hình
Tính Thương Mại &
Chuyển Đổi

16. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Sử dụng tính năng Nhấp Để Gọi cho
các thao tác phức tạp
Nguyên tắc 12
● Có sẵn tính năng Nhấp Để Gọi dễ nhìn
trên trang web để có thể giúp khách
hàng không rời khỏi trang web mỗi khi
họ gặp phải các bước cung cấp thông
tin phức tạp
Mẹo nên dùng
Ví dụ điển hình
Tính Thương Mại &
Chuyển Đổi

17. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Tạo thao tác chuyển đổi đơn giản trên
các thiết bị khác nhau
Nguyên tắc 13
● Khách hàng trên điện thoại có thể tìm
hiểu thông tin trước và chuyển đổi sau,
vì vậy nên có cài đặt đơn giản để họ có
thể tiếp tục trên các thiết bị khác thông
qua chia sẻ trên mạng xã hội, email
hặc tính năng lưu lại trong giỏ hàng
Mẹo nên dùng
Ví dụ điển hình
Tính Thương Mại &
Chuyển Đổi

18. Proprietary + Confidential
NGUYÊN TẮC
Mẫu đăng ký
Sắp xếp thông tin một cách hợp lý
Lựa chọn thông tin đơn giản nhất cho mỗi phần
Cung cấp lịch ngày tháng bằng hình ảnh khi chọn
lựa ngày
Hạn chế lỗi biểu mẫu với nhãn và thông báo lỗi
ngay lập tức
Thiết kế mẫu đơn hiệu quả
14
15
16
17
18

19. Proprietary + Confidential
Ví Dụ Điển Hình
Sắp xếp thông tin một cách hợp lý
Mẫu đăng ký
Nguyên tắc 14
● Cung cấp cho khách hàng lựa chọn
phím số cho các phần yêu cầu phải
nhập số, và tính năng nâng cao tự
động trong các mẫu đơn yêu cầu nhập
thông tin
Mẹo nên dùng

20. Proprietary + Confidential
Lựa chọn thông tin đơn giản nhất cho
mỗi phần
Mẫu đăng ký
Ví Dụ Điển Hình
Nguyên tắc 15
● Cân nhắc phần mục lục để chúng có
thể trở thành lựa chọn tốt nhất cho
mẫu đơn cần điền trên di động, và
đảm bảo rằng chúng dễ dàng sử dụng/
nhấp chuột vào.
Mẹo nên dùng

21. Proprietary + Confidential
Cung cấp lịch ngày tháng bằng hình ảnh khi
chọn lựa ngày
Mẫu đăng ký
Ví Dụ Điển Hình
Nguyên tắc 16
● Giữ chân khách hàng trên website
bằng cách cung cấp lịch ngày tháng rõ
ràng cùng hướng dẫn khi họ chọn lựa
ngày trên site
Mẹo nên dùng

22. Proprietary + Confidential
Hạn chế lỗi biểu mẫu với nhãn và thông báo
lỗi ngay lập tức
Mẫu đăng ký
Nguyên tắc 17
● Sử dụng nhãn rõ ràng dễ nhận biết để
giúp khách hàng biết những thông tin
bạn yêu cầu, và thông báo nếu có lỗi
thông tin đã nhập để khách hàng được
biết trước khi họ có thể nộp mẫu đơn.
Mẹo nên dùng
Ví Dụ Điển Hình

23. Proprietary + Confidential
● Sử dụng biểu mẫu ngắn gọn với số
lượng trường ít nhất có thể.
● Tự động điền thông tin khi có thể
● Sự dụng thanh tiến trình có chú thích
rõ ràng để giúp khách hàng dễ dàng
điền mẫu đơn có nhiều phần
Mẹo nên dùng
Nguyên tắc 18
Thiết kế mẫu đơn hiệu quả
Mẫu đăng ký
Ví dụ điển hình

24. Proprietary + Confidential
NGUYÊN TẮC
Tính khả dụng
& yếu tố hình thức
Tối ưu hoá cả trang web cho điện thoại
Đừng khiến người truy cập web phải phóng to
Thiết kế hình ảnh sản phẩm có thể phóng to được
Hướng dẫn hướng màn hình nào là tốt nhất
Giữ người truy cập ở một cửa sổ trình duyệt duy nhất
Tránh dán nhãn “giao diện hoàn chỉnh"
Nói rõ tại sao bạn cần thông tin vị trí người dùng
19
20
21
22
23
24
25

25. Proprietary + Confidential
● Trang web của bạn sẽ dễ sử dụng nhất
nếu tất cả trang con đều được thiết kế
thân thiện cho di động
Mẹo nên dùng
Nguyên tắc 19
Tối ưu hoá cả trang web
cho điện thoại
Ví dụ điển hình
Tính khả dụng & yếu tố
hình thức

26. Proprietary + Confidential
● Người truy cập web có thể bỏ lỡ các
nút kêu gọi hành động nếu họ phải
phóng to hình ảnh
● Thiết kế trang di động của bạn sao cho
họ không bao giờ cần phải phóng to
Mẹo nên dùng
Nguyên tắc 20
Đừng khiến người truy cập
web phải phóng to
Ví dụ điển hình
Tính khả dụng & yếu tố
hình thức

27. Proprietary + Confidential
● Sử dụng hình ảnh cận, chất lượng cáo
cho sản phẩm
Mẹo nên dùng
Nguyên tắc 21
Thiết kế hình ảnh sản
phẩm có thể phóng to
được
Ví dụ điển hình
Tính khả dụng & yếu
tố hình thức

28. Proprietary + Confidential
● Hãy nói cho người truy cập biết nếu
trang của bạn tương thích với hướng
màn hình khác nhau
● Đảm bảo các nút kêu gọi hành động
không bị che mất dù ở bất kì hướng
màn hình nào
Mẹo nên dùng
Nguyên tắc 22
Hướng dẫn hướng màn
hình nào là tốt nhất
Ví dụ điển hình
Tính khả dụng & yếu tố
hình thức

29. Proprietary + Confidential
● Đảm bảo các nút kêu gọi hành động và
các chức năng quan trọng nằm ở cùng
một của sổ trình duyệt
Mẹo nên dùng
Nguyên tắc 23
Giữ người truy cập ở một
cửa sổ trình duyệt duy nhất
Ví dụ điển hình
Tính khả dụng & yếu tố
hình thức

30. ● Đảm bảo người truy cập có thể chuyển
dễ dàng từ di động sang máy tính
● Sử dụng “giao diện trên máy tính" thay
vì “giao diện hoàn chỉnh" để nhấn mạnh
cả 2 loại giao diện đều đầy đủ chức
năng như nhau
Mẹo nên dùng
Nguyên tắc 24
Tránh dán nhãn “giao diện
hoàn chỉnh"
Ví dụ điển hình
Tính khả dụng & yếu tố
hình thức

31. ● Luôn luôn nói rõ tại sao bạn cần thông
tin vị trí người dùng
● Giải thích rõ những thông tin trên sẽ
giúp cải thiện trải nghiệm người dùng
như thế nào
Mẹo nên dùng
Nguyên tắc 25
Nói rõ tại sao bạn cần
thông tin vị trí người dùng
Ví dụ điển hình
Tính khả dụng & yếu tố
hình thức