8 Mẹo thiết kế Website thân thiện với Mobile

Theo Hootsuite, 72% người dùng sỡ hữu smartphone, có 53% người lướt web ở Việt Nam. Để đáp ứng nhu cầu tìm kiếm của khách hàng tiềm năng, mọi công ty phải làm cho trang web của họ dễ điều hướng trên thiết bị di động.

Dưới đây là một số mẹo rút ra để giúp bạn thiết kế website và phát triển một trang web thân thiện với thiết bị di động.

responsive-web

Mẹo 1:  Thẻ meta viewport

Đính kèm thẻ meta viewport khi tạo trang web trên điện thoại di động, được sử dụng bởi các công cụ tìm kiếm để xác định cách nội dung của một trang web được phóng to và thu nhỏ, bao gồm thẻ meta quan trọng khi tạo trải nghiệm nhiều thiết bị.

Thẻ meta viewport cho trình duyệt khi hiển thị trên thiết bị di động biết rằng nó phải phù hợp với màn hình nhỏ hơn. Nếu không có nó, trang web sẽ không hoạt động tốt trên thiết bị di động. Bất kể bạn chọn cấu hình nào để chỉ định viewport.

Mẹo 2: Kích thước Fonts và Buttons

Bạn đã bao giờ truy cập một trang web trên thiết bị di động đã nhắc bạn chọn một nút hay chưa, nhưng nút quá nhỏ để bạn phải nhấn sai? Hay bạn đã từng phải phóng to chỉ để đọc một cái gì đó?

Cảm giác thật là khó chịu, đó là lý do tại sao điều quan trọng cần nhớ là khi nói đến thiết kế di động, kích thước rất quan trọng — và không chỉ kích thước của trang, mà còn kích thước phông chữ và nút.

Fonts: kích thước font trên điện thoại di động tối thiểu là 14px. Mặc dù nó có thể trông lớn hơn bạn mong muốn nhưng điều này giúp nội dung dễ dàng để người xem đọc mà không cần phải phóng to. Thực tế, đối với các nhãn hoặc các form thì bạn nên áp dụng font chữ nhỏ hơn cỡ 12px.

Buttons: button có kích thước phù hợp giúp làm giảm việc người dùng chọn sai nút. Công ty dẫn đầu về thiết kế trải nghiệm nguồi dùng là Apple khuyến khích kích thước của button tối thiểu là 44px x 44px để tăng trải nghiệm người dùng và tăng chuyển đổi.

Mẹo 3: Pop-ups và refreshes không nên sử dụng

Ngay cả các pop-ups nhỏ cũng có thể gây ra sự khó chịu cho người xem trên thiết bị di động. Do trình duyệt trên điện thoại di động thường không hỗ trợ pop-ups.

Trong suốt quá trình thiết kế, hãy đảm bảo bạn tránh sử dụng các
pop-ups để có kết quả di động tốt nhất. Tương tự, hãy loại bỏ các lần refreshing định kỳ để tránh làm đầy bộ nhớ cache của thiết bị di động. Nếu trang cần refreshing, hãy để người xem có quyền kiểm soát.

Mẹo 4: Giảm yêu cầu người dùng nhập văn bản để điều hướng

Như bạn có thể đã biết, thường khó nhập văn bản trong các phiên bản web dành cho thiết bị di động.  Bạn có thể thay thế bằng các nút hoặc danh sách thay vào đó để người xem có thể chọn những gì họ cần một cách dễ dàng và không gây phiền phức với nhập văn bản.

Lưu ý rằng, không giống như người dùng máy tính để bàn, người dùng thiết bị di động không có quyền truy cập vào bàn phím hoặc chuột truyền thống, vì vậy hãy sáng tạo để phát triển các cách khác nhau mà người xem vẫn có trải nghiệm người dùng mà không phải sử dụng bàn phím nhỏ hoặc điều hướng

Một số giải pháp bao gồm:

  • Checklists
  • Menu thả xuống
  • Buttons
  • Lựa chọn hình ảnh

Mẹo 5: Sử dụng điều hướng phù hợp

Trước khi bạn bắt đầu xây dựng trang web của mình, có thể bạn đã thực hiện một số lượng đáng kể nghiên cứu để tìm hiểu đối tượng của mình và những gì họ đang tìm kiếm trên trang web. Xem lại thông tin này khi tối ưu hóa cho thiết bị di động để xác định cách đối tượng cụ thể sẽ muốn điều hướng trang web.

Nếu người dùng mục tiêu của bạn muốn xem nội dung thay đổi nhanh, hãy đặt menu điều hướng bên dưới tài liệu chính. Điều này sẽ để lại chỗ cho nội dung và dòng tiêu đề hiển thị mà không làm cản trở lượt xem trang.

Mặt khác, nếu người xem muốn truy cập ngay vào điều hướng danh mục, bạn nên đặt menu điều hướng ở đầu trang.

Mẹo 6: Đơn giản hóa thiết kế

Loại bỏ những nội dung không cần thiết và đơn giản hóa thiết kế của trang web để tạo ra khả năng sử dụng tối ưu. Hãy nhớ rằng cách tiếp cận “di động đầu tiên” là tất cả về chủ nghĩa tối giản và đơn giản hóa thiết kế giúp cải thiện khả năng sử dụng.

Tạo trang web cho phép người dùng điều hướng trang web không có khó khăn bằng cách tránh các bảng, khung và định dạng khác. Giữ padding ở mức tối thiểu tuyệt đối, bởi vì càng nhiều người dùng nhấp vào các liên kết, họ càng chờ đợi thời gian tải lâu hơn. Đơn giản hóa trang web của bạn để tạo sự cân bằng giữa nội dung và điều hướng.

Mẹo 7: Chia trang thành các phần nhỏ

Lấy nội dung hiển thị tốt trên các máy tính để bàn và nhồi nhét nó vào một thiết bị cầm tay nhỏ đôi khi giống như cố gắng đặt một chốt hình vuông vào một lỗ tròn.

Chia nhỏ trang thành các phần nhỏ bằng cách đặt các phần văn bản dài trên nhiều trang khác nhau thay vì một trang mà người dùng phải liên tục cuộn để xem nội dung. Bỏ những trang có nội dung có mức độ ưu tiên thấp và lưu ý tránh tình trạng nội dung bị tràn trang.

Mẹo 8: Chia tỷ lệ hình ảnh sẽ tạo sự khác biệt cho người dùng

Xem từng hình ảnh được sử dụng trong nội dung và trong nền. Xác minh rằng hình ảnh được chia tỷ lệ chính xác khi người dùng duyệt theo hướng dọc và ngang. Nếu hình ảnh không được chia tỷ lệ theo các tỷ lệ phù hợp, bạn nên thay đổi các quy tắc CSS để cho hình ảnh có chiều rộng 100% hoặc chứa (đối với hình nền) trong trang.

Bằng cách làm theo các mẹo đơn giản này, bạn có thể đảm bảo website của bạn được thiết kế thân thiện với thiết bị di động tạo cho khách truy cập có trải nghiệm tốt nhất.

Lê Trang (Theo invisionapp.com)

Có thể bạn quan tâm

KHÁCH HÀNG CỦA GSOFT

HOTLINE: 0913 957 079