top of page
  • Ảnh của tác giảAdmin

8 điều bạn cần lưu ý về giao diện website trên mobile

Giao diện website phiên bản máy tính và phiên bản trên di động hoàn toàn khác xa nhau. Do diện tích chật chội hơn, giao diện trên di động cần sự đầu tư kỹ lưỡng để vừa truyền tải đầy đủ thông điệp, nhưng phải đảm bảo tính đơn giản.


website-mobie

(Nguồn: Internet)

Tham khảo thêm

Không phải cứ bê y nguyên giao diện trên máy tính lên giao diện website trên mobile là ổn. Bởi vì thói quen sử dụng mỗi thiết bị của người dùng thì khác nhau. Đặc biệt với những trang bán hàng của bạn, nếu giao diện không thân thiện, người xem cảm thấy không thuận tiện thì khả năng cao là họ không liên hệ bạn để mua hàng. Vậy hãy cùng xem qua 8 điều bạn cần lưu ý về giao diện website trên mobile nếu muốn thu hút thêm khách hàng:


1. Giao diện website trên mobile có thao tác dễ dàng không?

Cụ thể hơn, những phần như menu, nút Mua Hàng, nút Đăng Ký, nút Tham Gia có nhấn được một cách dễ dàng không?

Nếu những chi tiết đó bị thiết kế quá nhỏ, gây khó khăn khi bấm vào, nghĩa là giao diện đó của bạn đang gây cản trở người dùng.

Ví dụ 1:

Giao-dien-mobile-YogaWithKassandra

Ví dụ 2:

Giao-dien-mobile-DoYouYoga

Nút “JOIN FREE” cũng được thiết kế khá to và bắt mắt.

–> Các thành phần trên trang web phải phù hợp với kích thước ngón tay.

Chú ý: Google đã cung cấp công cụ hữu ích thử nghiệm testing AB, bài viết mình chi tiết đính có video hướng dẫn  thử nghiệm A/B.

2. Sử dụng khoảng trống trên giao diện website trên mobile một cách khéo léo

Hãy xác định rõ giao diện trên mobile của bạn thoáng đẹp như Quận 7, chứ không nên san sát như Quận 4.

Với không gian nhỏ như trên di động, nhiều người gặp khó khăn, không biết phần nào nên giữ, phần nên bỏ. Và thế là giữ lại tất cả để đảm bảo an toàn.

Ví dụ 1:

Giao-dien-mobile-Sparkitive

Với trường hợp này, giao diện nên giãn cách giữa các phần nội dung cho dễ thở, giảm bớt một số ý, để người dùng dễ dàng nắm bắt được ebook chứa nội dung gì, đọc xong thì có thể làm được gì.

Ví dụ 2:

Giao-dien-mobile-Bose-homepage

Những gì mà Bose Audio muốn chuyển tới khách hàng được hiển thị một cách ngắn gọn, súc tích.

–> Less is more

3. Giao diện website trên mobile không làm người xem bị xao nhãng, mất tập trung

Dù có rất nhiều thông tin trên trang web, nhưng chung quy lại các thông tin này phải hài hoà với nhau.

Trong nhu có cương, trong cương có nhu. Nếu một yếu tố A đã được làm nổi bật, thì yếu tố B phải giảm bớt lại. Nếu cả A và B đều cùng rực rỡ thì sẽ gây xao nhãng cho người xem.

Cùng xem qua ví dụ cho dễ hiểu

Ví dụ 1:

Giao-dien-mobile-LindseyRacing

Bên cạnh đó, các chi tiết nổi bật được sắp xếp đứng gần nhau, khiến người xem không thể tập trung vào một sản phẩm cụ thể.

Ví dụ 2:

Giao-dien-mobile-MacbookPro

4. Ưu tiên bố cục 1 cột

Giao diện hiển thị trên website nên ưu tiên hiển thị 1 cột và hạn chế dùng slide. Điều này đảm bảo người dùng có thể thấy được mọi thông tin, mà không phải rê qua rê lại.

Ví dụ:

Giao-dien-mobile-AirBnB
Giao-dien-may-tinh-Clickminded

Đây là giao diện trên máy tính, bạn có thể thấy họ thiết kế 3 cột

Giao-dien-mobile-Clickminded

Và khi chuyển sang giao diện di động sẽ được trình bày theo dạng một cột

–> 1>3

5. Trang web của bạn có dễ đọc

Để kiểm tra được điều này bạn có thể thực hiện như sau:

  1. Mở trang web mà bạn muốn kiểm tra.

  2. Cầm điện thoại và đưa thẳng tay ra đằng trước.

gio-thang-tay-ve-phia-truoc
  1. Lúc này bạn thử kiểm tra xem với khoảng cách như vậy bạn có thể đọc được những thông tin trên trang web không? Khoanh vùng những chỗ bạn thấy khó đọc và điều chỉnh.

  2. Ngoài ra, bạn có thể nhờ người khác kiểm tra để có thêm cái nhìn khách quan.

Ví dụ bên dưới là một giao diện đã vượt qua được bài kiểm tra:

Giao-dien-Thrive
Giao-dien-IdoPortal

6. Kiểm tra thật kỹ nút gọi trên website

Vì người dùng đang sử dụng di động để lướt website của bạn, nên phải tạo mọi điều kiện để họ có thể gọi điện thoại cho bạn một cách dễ dàng.

Nút gọi phải có sẵn trên màn hình để thuận tiện cho người dùng. Nút gọi phải bấm được và khi bấm vào sẽ gọi đúng số điện thoại của bạn.

Các số điện thoại bàn phải được chèn đúng mã vùng điện thoại.

–> gọi được mới liên hệ được

7. Giảm số lượng ô cần điền trong form liên hệ

Ai cũng muốn mọi thứ tiện lợi và giảm bớt những thủ tục rườm rà. Vì thế với form đăng ký bạn đặt trên website, nếu được, bạn nên giảm bớt ô không cần thiết. Để người dùng không phải tốn nhiều thời gian để nhập thông tin.

Giao-dien-mobile-LikeableLocal-lead-gen-page

Download 1 quyển ebook, nhưng phải nhập từng đấy thông tin, liệu có quá đáng không?

–> less is more lần 2

8. Tiêu đề ngắn gọn, súc tích

Nếu bạn muốn người dùng chán và không muốn xem trang web của bạn nữa, thì hãy làm như tôi nói: làm cho mọi thứ rườm rà, phức tạp hơn. Còn ngược lại, hãy làm cho trang web của bạn trở nên đơn giản.

Bản thân chúng ta khi đi mua hàng, cũng thích nghe những lời chào hàng gãy gọn, nói rõ những gì chúng ta cần. Thay vì phải nghe những lời chào hàng dài lê thê, nài nỉ, và không đưa ra được lý do thuyết phục nào xác đáng.

Ví dụ chúng ta có một tiêu đề không hấp dẫn:

Giao-dien-mobile-TrafficAndFunnels
Giao-dien-mobile-DYS

Nhận phân tích website và báo giá dịch vụ SEO

Yêu cầu đã được gửi thành công

Có thể bạn quan tâm

CAC-DANG-𝐂𝐎𝐏𝐘𝐖𝐑𝐈𝐓𝐄𝐑-PHO-BIEN-NHAT-HIEN-NAY.png
Email Marketing là gì? Cách làm Email Marketing hiệu quả
CAC-DANG-𝐂𝐎𝐏𝐘𝐖𝐑𝐈𝐓𝐄𝐑-PHO-BIEN-NHAT-HIEN-NAY.png
Customer Journey là gì – chìa khóa thấu hiểu insight khách hàng
CAC-DANG-𝐂𝐎𝐏𝐘𝐖𝐑𝐈𝐓𝐄𝐑-PHO-BIEN-NHAT-HIEN-NAY.png
Tải mẫu kế hoạch chiến lược Marketing 2023
Bài Viết mới nhất
Technical SEO là gì? Cách tối ưu Technical SEO hiệu quả cho Website
Technical SEO là gì? Cách tối ưu Technical SEO hiệu quả cho Website
Navigation là gì? Nguyên tắc xây dựng Web Navigation
Navigation là gì? Nguyên tắc xây dựng Web Navigation
DMCA là gì? Hướng dẫn đăng ký DMCA bảo vệ bản quyền cho Website
DMCA là gì? Hướng dẫn đăng ký DMCA bảo vệ bản quyền cho Website
Conversion rate là gì? 5 cách tối ưu tăng tỷ lệ chuyển đổi cho Website
Conversion rate là gì? 5 cách tối ưu tăng tỷ lệ chuyển đổi cho Website
Bounce rate là gì? Thủ thuật tối ưu tỷ lệ thoát trang hiệu quả
Bounce rate là gì? Thủ thuật tối ưu tỷ lệ thoát trang hiệu quả
Alt Text là gì? Cách tối ưu Alt Text khi SEO hình ảnh
Alt Text là gì? Cách tối ưu Alt Text khi SEO hình ảnh
bottom of page