25 nguyên tắc thiết kế trang web dành cho di Động

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

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

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem


● Đặ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




● 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




● 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




● Đừ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



NGUYÊN TẮC

Mẫu đăng ký

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


● Đặ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


● 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


● 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


● 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


NGUYÊN TẮC

Mẫu đăng ký

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

Thiết kế hình ảnh sản phẩm expandable

Hướng dẫn hướng màn hình nào là tốt nhấtThiết kế mẫu đơn hiệu quả

9

10

11

1213



● 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



● 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





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





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





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




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


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


Lựa chọn thông tin đơn giản nhất cho mỗi phần

Mẫu đăng ký


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


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ý


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


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



● 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ý



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 expandable

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


● 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


● 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



● 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 expandable Ví dụ điển hình



● 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



● Đả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


● Đả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


● 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


25 nguyên tắc thiết kế trang web dành cho di Động

Marketing