Chúng tôi làm nghề này đã lâu và thường gặp một nghịch lý khá quen thuộc. Phần lớn lượt truy cập website hiện nay đến từ điện thoại, thế nhưng nhiều giao diện vẫn được dựng theo thói quen của người ngồi trước màn hình máy tính. Vì vậy, khi bàn về thiết kế website và tối ưu trải nghiệm người dùng, bạn đừng chỉ mở bản xem trên laptop rồi cho là xong. Thực tế, trang trông rất ổn trên máy tính lại có thể khiến khách dùng điện thoại thấy bố cục lệch, chữ xuống dòng lung tung và nút bấm nằm sai chỗ.
Điều đáng tiếc là lỗi này thường không quá phức tạp về kỹ thuật. Nguyên nhân nằm ở quy trình làm việc. Người thiết kế mở file trên màn hình rộng, căn chỉnh từng khoảng cách rất kỹ, rồi đến lúc ra mắt mới phát hiện điện thoại hiển thị khác hẳn. Với người đọc, cảm giác khó chịu đó đủ khiến họ rời trang chỉ sau vài giây. Có lẽ bạn cũng từng gặp tình huống này khi tìm một shop trên điện thoại và thoát ra gần như ngay lập tức.
Vì sao khách hàng dễ rời đi khi website vỡ trên di động
Hãy thử hình dung bạn đang đứng ngoài đường, mở một trang web trên điện thoại và phải kéo ngang mới đọc được nội dung. Muốn bấm nút thì phải phóng to mới trúng. Phản ứng tự nhiên lúc đó là thoát ra. Người dùng di động thường đang vội, chỉ có vài phút để tìm thông tin. Họ không có kiên nhẫn để tự khắc phục lỗi hiển thị của bạn.
Chúng tôi từng tiếp nhận trường hợp một shop mỹ phẩm nhỏ. Trang bán hàng trên máy tính trông rất chuyên nghiệp, nhưng nút đặt hàng trên điện thoại lại bị đẩy xuống cuối một khối ảnh rất dài. Chủ shop phàn nàn đơn hàng giảm rõ rệt dù lượng truy cập không đổi. Khi kiểm tra, chúng tôi thấy phần lớn khách vào từ điện thoại đều dừng lại ở màn hình đầu tiên, chưa kịp cuộn xuống. Sau khi đổi lại thứ tự các khối nội dung và làm nổi bật nút đặt hàng, tỷ lệ hoàn tất đơn tăng lên mà không cần chạy thêm quảng cáo. Bài học rút ra là vị trí của một nút bấm đôi khi quan trọng hơn màu sắc hay hình ảnh đẹp.
Những điểm cần chú ý riêng khi làm giao diện cho điện thoại
Thiết kế cho điện thoại không đơn giản là thu nhỏ bản máy tính lại. Màn hình nhỏ đòi hỏi cách sắp xếp nội dung khác hẳn. Thay vì nhiều cột đặt song song, nên xếp nội dung theo chiều dọc. Đưa thông tin quan trọng nhất lên đầu và giữ mỗi khối đủ gọn để người dùng nắm ý chính chỉ trong vài giây. Một khối văn bản dài cả màn hình mà không có khoảng nghỉ thường khiến người đọc bỏ cuộc.
Việc này liên quan trực tiếp đến cách áp dụng responsive. Nếu muốn hiểu vì sao cần thiết lập như vậy, bạn có thể đọc thêm về lợi ích của thiết lập responsive, trong đó chúng tôi giải thích các điểm ngắt màn hình thường dùng và lý do chúng quan trọng với từng loại thiết bị.
Nút bấm và form phải đủ lớn để chạm chính xác
Đây là lỗi chúng tôi gặp nhiều nhất. Nút được thiết kế cho chuột thường rất nhỏ. Khi chuyển sang màn hình cảm ứng, đầu ngón tay gần như không nhắm trúng, nên người dùng hay bấm nhầm sang liên kết bên cạnh hoặc phải thử lại nhiều lần. Form liên hệ cũng gặp vấn đề tương tự. Ô nhập quá thấp khiến bàn phím che mất nội dung đang gõ, và khách bỏ dở giữa chừng mà không báo lại cho bạn biết.
Một nguyên tắc đơn giản là làm vùng chạm đủ rộng, khoảng cách giữa các nút đủ thoáng và ô nhập liệu có chiều cao vừa phải để gõ thoải mái. Khi đạt được những điều này, số thao tác sai thường giảm khá nhanh. Khách cũng ít phải nhập lại thông tin, nhờ đó hoàn thành biểu mẫu dễ dàng hơn.
Font chữ quá nhỏ hoặc quá to đều gây khó đọc
Font chữ là chi tiết nhiều người bỏ qua. Trên máy tính, cỡ chữ 14 có thể vừa mắt, nhưng trên điện thoại lại nhỏ và buộc người xem phải nheo mắt. Ngược lại, nếu tiêu đề đặt quá to, một dòng có thể chiếm hết màn hình và đẩy đoạn văn xuống quá xa. Cách hợp lý là đặt cỡ chữ nội dung đủ đọc thoải mái và cho tiêu đề co giãn theo kích thước màn hình. Khi thử, hãy đọc thật một đoạn dài để xem mắt có mỏi không, đừng chỉ nhìn lướt qua.
Nếu bạn đang làm website từ đầu và muốn tránh các lỗi này ngay từ đầu, hãy tham khảo chi tiết các bước để thiết kế website để nắm quy trình từ phác thảo đến hoàn thiện, trong đó phần kiểm tra di động được đặt ngay từ giai đoạn đầu.
Các lỗi responsive thường gặp có thể tóm lược như sau:
- Nút bấm và form quá nhỏ, khiến khách khó thao tác chính xác.
- Ảnh và chữ không co giãn đúng, làm bố cục vỡ trên một số dòng điện thoại.
- Font chữ quá nhỏ hoặc quá to, gây khó đọc và mỏi mắt khi xem lâu.
Cách kiểm tra nhanh website có thân thiện với di động hay không
Cách đáng tin nhất vẫn là cầm điện thoại thật lên và truy cập trang của bạn. Hãy thử trên ít nhất hai loại màn hình, một máy nhỏ và một máy lớn, vì mỗi máy có thể hiển thị khác nhau. Quan sát xem có phải kéo ngang không, chữ có bị cắt không và các nút có dễ bấm không. Đừng chỉ xem một lần rồi kết luận; hãy cuộn hết trang và thử mọi liên kết quan trọng.
Nếu chưa có điện thoại để thử, bạn có thể thu nhỏ cửa sổ trình duyệt trên máy tính để mô phỏng kích thước di động. Cách này nhanh để phát hiện lỗi cơ bản, nhưng không thay thế được việc kiểm tra trên thiết bị thật, vì cảm giác chạm và cách hiển thị font vẫn khác nhau. Bạn cũng nên theo dõi xu hướng thiết kế website để cập nhật chuẩn trải nghiệm di động khi cần nâng cấp giao diện.
Đừng quên kiểm tra tốc độ tải trang khi dùng mạng di động. Wifi văn phòng thường nhanh và ổn định, nhưng khách hàng hay dùng 4G hoặc 5G với tín hiệu lên xuống thất thường. Một trang nặng vài megabyte có thể mất nhiều giây để hiển thị, và trong khoảng thời gian đó người dùng đã kịp thoát ra. Chúng tôi thường nén ảnh và hạn chế tải những thành phần không cần thiết ngay từ đầu, thay vì chờ khách phàn nàn rồi mới sửa.
Danh sách kiểm tra trước khi ra mắt phiên bản di động
Trước mỗi lần bàn giao, đội ngũ của chúng tôi thường rà soát vài điểm chính: hiển thị trên nhiều kích thước màn hình, nút bấm và form đủ lớn để chạm chính xác, ảnh và chữ co giãn đúng tỷ lệ, và tốc độ tải trên mạng di động thực tế. Điều quan trọng là làm việc đó với tâm thế của khách hàng thật, chứ không phải của người vừa tự tay thiết kế. Khi đã quen mắt với giao diện, bạn sẽ bỏ qua rất nhiều chi tiết nhỏ mà người lạ nhìn vào sẽ thấy ngay.
Một bước nên làm thêm là nhờ vài người ngoài, đặc biệt là người chưa từng xem trang, dùng thử trên điện thoại của họ rồi kể lại cảm nhận. Họ thường phát hiện ngay những chỗ bất tiện mà đội phát triển đã bỏ qua vì quá quen thuộc. Một nhận xét từ người dùng thật đôi khi có giá trị hơn cả một buổi họp nội bộ.
Cuối cùng, đừng coi việc tối ưu di động là xong một lần. Trình duyệt và hệ điều hành liên tục cập nhật, và một trang từng hiển thị tốt có thể xuất hiện lỗi sau một bản cập nhật mới. Đặt lịch kiểm tra định kỳ sẽ giúp website luôn dễ dùng trên mọi thiết bị khách hàng đang cầm trên tay, và đó mới là cách giữ chân người đọc lâu dài.