Thiết kế cửa hàng của bạn cho di động trước tiên: quy tắc mua sắm trên màn hình nhỏ

Thiết kế cửa hàng của bạn cho di động trước tiên có nghĩa là gì?

Thiết kế cửa hàng ưu tiên di động là một phương pháp trong đó bạn bắt đầu với màn hình nhỏ làm đường cơ sở, không phải một suy nghĩ muộn: bạn thiết kế các trang sản phẩm, biểu mẫu đặt hàng và điều hướng để hoạt động suôn sẻ trên màn hình chiều rộng của điện thoại, sau đó mở rộng chúng để vừa với máy tính bảng và máy tính để bàn. Điều này khác với cách cũ của việc xây dựng cho máy tính để bàn trước và sau đó cố gắng "nén" nó vào di động, dẫn đến các nút chật chội, hình ảnh nặng và văn bản nhỏ.

Cách tiếp cận này quan trọng nhất trong các cửa hàng thanh toán khi nhận hàng ở thị trường Maghreb và Vịnh, nơi một phần lớn lượt truy cập đến từ quảng cáo mở trực tiếp trên di động. Người mua thường đang đứng trên đường phố hoặc duyệt một chiều trên dữ liệu di động trung bình, vì vậy bất kỳ độ chậm nào hoặc nút khó nhấn có nghĩa là một đơn hàng bị mất.

Ý tưởng cốt lõi rất đơn giản: đừng hỏi "cửa hàng của tôi trông như thế nào trên máy tính để bàn?" nhưng "ai đó mua từ điện thoại của họ trong những cú nhấn ít nhất?" Câu hỏi này thúc đẩy mọi lựa chọn trong thiết kế ưu tiên di động.

Làm cách nào để chọn kích thước nút và menu trên màn hình nhỏ?

Các nút và menu là các điểm tiếp xúc trực tiếp giữa người mua và quyết định mua hàng. Ngón tay không phải là một con trỏ chuột chính xác, vì vậy mọi phần tử có thể nhấn cần không gian nhấn thoải mái và đủ khoảng cách từ những gì xung quanh nó.

• Làm cho nút mua chính lớn và rõ ràng, gần như toàn bộ chiều rộng màn hình, với màu tương phản với nền.
• Đừng làm cho các khu vực nhấn nhỏ hơn khoảng 44–48 pixel ở mỗi hướng để ngón tay không bị lỡ.
• Để lại đủ không gian giữa các liên kết liền kề để tránh nhấn vào cái sai.
• Đơn giản hóa điều hướng: một biểu tượng menu hoặc thanh dưới cùng dính với tối đa bốn mục thay vì một menu dài.
• Dán nút "Thêm vào giỏ" hoặc "Đặt hàng bây giờ" vào dưới cùng vì vậy nó vẫn có thể tiếp cận trong khi cuộn trang sản phẩm.
• Sử dụng ít nhất phông chữ 16 pixel cho văn bản chính vì vậy người mua không phải co giãn-phóng to.

Làm cách nào để xử lý hình ảnh và tốc độ tải trên di động?

Hình ảnh thường là thứ nặng nhất trên trang sản phẩm và thứ đầu tiên làm chậm tải trên dữ liệu di động. Một cửa hàng đẹp nhưng chậm sẽ mất người mua trước khi họ thấy nút. Vì vậy nén mỗi hình ảnh về kích thước nhẹ nhất vẫn còn rõ ràng, và sử dụng kích thước đáp ứng tải phiên bản nhỏ hơn cho điện thoại thay vì phiên bản máy tính để bàn đầy đủ.

Quy tắc thực tế: hiển thị một hình ảnh chính mạnh mẽ ở đầu tải tức thì, và trì hoãn tải phần còn lại cho đến khi người mua cuộn gần chúng. Tránh video và các tệp nặng tự động phát khi trang mở.

Làm cách nào để rút ngắn các bước đặt hàng trên di động?

Mỗi bước bổ sung trong quy trình mua hàng làm mất một số người mua. Trên màn hình nhỏ hiệu ứng tăng gấp đôi bởi vì mỗi trường bổ sung có nghĩa là một cú nhấn và gõ và cuộn. Mục tiêu là đi từ trang sản phẩm đến xác nhận đơn hàng với ma sát ít nhất có thể.

1. 1Giữ biểu mẫu đặt hàng trên một trang người mua thấy hoàn chỉnh mà không điều hướng giữa các trang.
2. 2Chỉ hỏi các trường cần thiết cho đơn hàng thanh toán khi nhận hàng: tên, số điện thoại, thành phố / địa chỉ — xóa mọi trường không phục vụ giao hàng.
3. 3Sử dụng bàn phím phù hợp cho mỗi trường (bàn phím số cho điện thoại) để tăc tốc độ gõ và cắt lỗi.
4. 4Làm cho số lượng và lựa chọn tùy chọn (màu / kích thước) rõ ràng với các nút lớn thay vì các trình đơn nhỏ xíu.
5. 5Hiển thị tổng giá và chi phí vận chuyển ngay trước nút xác nhận vì vậy không có bất ngờ.
6. 6Kết thúc với một nút xác nhận lớn rõ ràng, và hiển thị thông báo thành công tức thì xác nhận rằng đơn hàng của người mua đã tới.

Sự khác biệt giữa trải nghiệm tồi tệ và thiết kế ưu tiên di động là gì?

Cách rõ ràng nhất để hiểu thiết kế cửa hàng ưu tiên di động là so sánh trực tiếp giữa một cửa hàng nơi di động là một suy nghĩ muộn và một cửa hàng được thiết kế cho màn hình nhỏ từ đầu. Bảng này minh họa những khác biệt chính.

Danh sách kiểm tra để mua sắm thoải mái trên di động

Trước khi xuất bản, hãy kiểm tra danh sách kiểm tra này trên điện thoại thực tế của bạn — không phải một trình giả lập máy tính để bàn — bởi vì kiểm tra thực tế là ngón tay trên một màn hình nhỏ.

• Trang tải và trở thành có thể cuộn trong vài giây trên dữ liệu di động.
• Nút mua có thể nhìn thấy mà không cuộn dài và ở trong tầm tay ngón tay cái.
• Tất cả các nút và liên kết đều dễ nhấn mà không có nhấp chuột vô ý.
• Hình ảnh rõ ràng và nhẹ, không có nội dung nặng tự động phát.
• Biểu mẫu đặt hàng ngắn, chỉ các trường cần thiết, trên một trang.
• Giá và chi phí vận chuyển hiển thị trước khi xác nhận.
• Văn bản có thể đọc được mà không phóng to, và Tiếng Ả Rập hiển thị từ phải sang trái chính xác.

Những sai lầm phổ biến nào làm hỏng mua sắm di động?

Ngay cả với ý định tốt, những sai lầm đơn giản lặp lại và làm yếu mua sắm di động mà không cần chủ cửa hàng nhận thấy.