Lỗi giao diện thiết kế website trên điện thoại

24-05-2018

Mobile first là thuật ngữ phổ biến được các chuyên gia về website đưa ra, nhưng điều này thực sự có nghĩa gì? Về cơ bản, đó là khi bạn thiết kế website hoặc phần mềm với trải nghiệm trên di động.

Số lượng người duyệt web trên thiết bị di động ngày càng tăng lên đáng kể trong vài năm qua và được dự kiến sẽ còn tăng thêm nữa. Đó là lý do tại sao một trang web đẹp trên thiết bị di động rất quan trọng để thu hút khách truy cập tiềm năng và giảm thiểu tỷ lệ thoát.

Một số người cho rằng website của họ trông tuyệt vời trên máy tính để bàn vì vậy nó sẽ trông giống như một phiên bản nhỏ trên di động. Và nếu một phần lớn lưu lượng truy cập website của bạn đến từ lượt xem trang trên thiết bị di động (bạn có thể kiểm tra điều này trong Google Analytic) thì chắc chắn bạn nên tối ưu website cho di động.

Vì vậy chúng tôi đã tập hợp các lỗi phổ biến về thiết kế website trên di động và cách tránh chúng! Xem thêm hướng dẫn từng bước của chúng tôi về cách tạo trang web thân thiện với thiết bị di động.

Loi giao dien thiet ke website tren dien thoai

Tối ưu giao diện hiển thị trên mọi thiết bị. (Ảnh: unsplash)

Lỗi 1: Bạn không có mẫu responsive cho website

Bạn có thể xây dựng website của bạn một vài năm trở lại đây và bây giờ bạn đang muốn thay đổi cho nó thích nghi với nhiều thiết bị. Vì vậy, làm thế nào để thiết kế responsive hiệu quả? Trang web của bạn sẽ tự động “phản hồi” với kích thích của thiết bị mà khách truy cập sử dụng. Độ phân giải, hình ảnh và menu sẽ trông hoàn hảo cho dù họ sử dụng máy tính bảng, máy tính bàn hoặc điện thoại. Thêm vào đó, nó sẽ tốt hơn cho chiến dịch SEO của bạn.

Có lẽ bạn chưa có cơ hội để kiểm tra trang web của mình trên thiết bị di động và máy tính bảng? Hoặc bạn không thể cập nhật mẫu mới và làm lại toàn bộ trang web? Chúng tôi hoàn toàn hiểu tình trạng của bạn ra sao và bạn muốn thay đổi ngay cho kịp xu thế.

Giải pháp: nếu website bạn không có responsive, chúng tôi khuyên bạn nên thay đổi thiết kế mẫu để có cái gì đó hiện đại hơn. Bạn có thể đến danh mục website của GSOFT để kiểm tra danh sách sản phẩm mới.

Lỗi 2: Hình ảnh hoặc video của bạn đang làm website chậm đi

Tra cứu trang web của bạn trên thiết bị di động, sau đó đếm xem mất bao lâu để tải. Nếu mất 3 giây hoặc lâu hơn, bạn nên xem trang của bạn và tìm ra điều gì đang làm chậm nó. Nghi phậm chính có thể là video, hình ảnh hoặc bất kỳ tiện ích bổ sung nào. Hãy xem xét liệu chúng có thực sự còn giá trị cho trang web hay không. Nó có chiếm thời gian tải trang không. Google cung cấp một cách đơn giản và miễn phí để chuẩn đoán sự cố này trên thiết bị di động.

Hãy xem xét bất kỳ tiện ích hoặc nút chia sẻ xã hội làm chậm thời gian tải. Một phương pháp hay là tối ưu hình ảnh trên trang web. Điều này có nghĩa là thay đổi kích thước hình ảnh và giảm kích thước tệp. Hãy nhớ rằng, thời gian tải trang được Google sử dụng như một yếu tố đánh giá SEO và nó có thể ảnh hưởng tiêu cực đến xếp hạng của trang.

Giải pháp: Kiểm tra xem trang của bạn mất bao lâu để tải, sau đó xoá hoặc tối ưu hoá bất kỳ mục nào có thể làm chậm trang web. Ngoài ra, bạn có thể tối ưu tốc độ tải trang bằng công nghệ Google AMP cho thiết bị di động.

Lỗi 3: Không có phân cấp

Có quá nhiều thứ đang diễn ra và mắt bạn không biết nên tập trung vào Logo, Heading hay Call To Action. Mất nhiều thời gian để duyệt một trang web trên thiết bị di động. Do đó, làm cho trải nghiệm người dùng dễ dàng hơn nhiều bằng cách chia nội dung một các hợp lý thành các phần. Sau đó, tạo các Header riêng lẻ cho từng phần băng cách sử dụng H1, H2 và H3.

Thông tin quan trọng cho khách truy cập phải ở đầu trang của bạn. Sau đó đi sâu vào chi tiết cụ thể. Hãy suy nghĩ về những gì khách truy cập mong đợi để xem và trả lời 5W’s: Ai? Cái gì? Tại sao? Khi nào? Ở đâu?

Giải pháp: lập kế hoạch cho website. Điều này sẽ giúp bạn tạo ra một bảng phác thảo cho trang web của bạn và tạo ra mục cần thiết để bạn có thể cắt bất kỳ tính năng bổ sung nào không cần thiết.

Lỗi 4: Trang web của bạn khó đọc

Bạn có thể có trữ lượng nội dung lớn nhưng không ai đọc nó nếu họ đang phải nheo mắt và phóng to văn bản để xem. Vấn đề này thậm chí còn đáng chú ý hơn khi hiển thị trên điện thoại thông minh so với các thiết bị khác do kích thước màn hình.

Font chứ có chân (serif) ưu thích có thể trông tuyệt vời trên máy tính để bàn nhưng gây khó khăn để đọc trên thiết bị di động. Hãy thử một phông chữ không chân (sans serif) nào đó dễ đọc, sau đó kiểm tra kích thước phông chữ của bản có đủ lớn. Quy tắc chung là giữ cho văn bản có kích thước tối thiểu là 16pt, nhưng nhớ rằng con số này phụ thuộc vào phông chữ bạn sử dụng.

Giải pháp: luôn kiểm trang website ở mọi chế độ xem responsive. Tính năng này cho phép bạn xem trang trên máy tính bàn và xem trước trang web trên thiết bị khác.

  • Đối với trình duyệt Chrome, bạn thao tác như sau: click chuột phải> chọn Inspect> Chọn qua Tab xem responsive.
  • Đối với trình duyệt Safari, bạn thao tác như sau: chọn tab Develop> Enter Responsive Design Mode.

Lỗi 5: Trang web của bạn trông quá “chật”

Việc văn bản được bố trí rõ ràng và không gian thoáng còn quan trọng hơn trên màn hình nhỏ để ngón tay có thể chạm vào, ví dụ như nút gọi hành động. Những người sử dụng thiết bị di động cần văn bản và nút lớn hơn mà bạn có thể mong đợi để có thể sử dụng trang web một cách thoải mái.

Nút gọi hành động (CTA) phải có kích thước tối thiểu 30 – 40 px để chúng nổi bật. Người mua sắm trên thiết bị di động có xu hướng thoát vì nếu trang web không dễ điều hướng và khó khai thác.

Giải pháp: đảm bảo bạn có đủ khoảng trắng xung quanh nội dung và văn bản để khách truy cập không cảm thấy bị choáng ngợp với thông tin bạn cung cấp. Bạn cũng có thể sử dụng nút thay vì liên kết trong văn bản cho nội dung quan trọng để dễ dàng nhấn hơn.

YelBee

Có thể bạn quan tâm

KHÁCH HÀNG CỦA GSOFT

HOTLINE: 0913 957 079