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

Tác giả: admin | Chuyên mục: UX UI | Đăng ngày: 13/09/2018

---

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.

(Nguồn: Internet)

Tham khảo thêm

• UX-UI tác động đến SEO như thế nào?
• Chiến lược quảng bá website cho người dùng di động

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:

(Nguồn: Internet)Đây là một trang web về các khoá học yoga, như trong hình bạn sẽ thấy các mục của Menu không thể nhìn rõ. Nút “TRY 7 DAYS OF YIN” màu hồng khá nhỏ. Tương tự những nút “LEARN MORE” cũng vậy.Giao diện này sẽ khiến người dùng cảm thấy khó bấm cũng như khó đọc.

Ví dụ 2:

(Nguồn: Internet)
Trái ngược với ví dụ trên, bạn có thể thấy giao diện này chữ có thể nhìn thấy rõ ràng, dễ đọc. Nhìn vào người dùng có thể biết ngay những gì mà trang web muốn truyền tải.

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:

(Nguồn: Internet)
Đây là landing page download ebook của 1 website, chưa nói đến phần nội dung chi tiết, chỉ nhìn vào thôi bạn đã có một cảm giác oải và mệt.

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:

(Nguồn: Internet)
Đây là trang chủ website của The Bose Audio. Với những khoảng trống tuyệt vời, trang web đã cho người xem thấy rõ được hình ảnh sản phẩm, đâu là sản phẩm bán chạy nhất, giá cả.

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:

(Nguồn: Internet)
Không phải mô tả nhiều, chỉ cần nhìn qua hình bạn đã hiểu. Màu đỏ là một màu nóng, chỉ nên sử dụng một cách tiết chế, nếu không sẽ phản tác dụng.

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:

(Nguồn: Internet)
Chữ và hình ảnh nổi bật trên nền sáng. Ngoài ra khoảng trống cũng được sử dụng một cách khéo léo. Mọi thứ đều hoàn hảo.–> hài hoà là trên hết

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ụ:

(Nguồn: Internet)
Vì là một website chứa rất nhiều thông tin, do đó Airbnb phải trình bày thông tin theo dạng nhiều cột. Tuy nhiên, nếu website của bạn không có quá nhiều thông tin thì không nên sử dụng theo cách này, mà nên chọn cách bên dưới như sau:

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

(Nguồn: Internet)

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:

• Mở trang web mà bạn muốn kiểm tra.
• Cầm điện thoại và đưa thẳng tay ra đằng trước.

(Nguồn: internet)

• 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.
• 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:

(Nguồn: internet)Ngược lại, giao diện này thì không:

(Nguồn: internet)–> thấy được mới xem tiếp được

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.

(Nguồn: internet)

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:

(Nguồn: internet)Còn đây là một dòng tiêu đề gãy gọn:

(Nguồn: internet)–> Giữ mọi điều đơn giản

Nguồn tham khảo: https://thrivethemes.com/mobile-landing-page-best-practices/