Thiết kế cho di động trước
Khi hầu hết khách gặp thương hiệu của Anh/Chị lần đầu trên điện thoại, thứ tự thiết kế không còn là chi tiết kỹ thuật nữa.
Thiết kế cho di động trước (mobile-first) là chiến lược dựng giao diện từ màn hình nhỏ nhất trước, rồi mở rộng dần lên màn hình lớn. Cách làm này buộc phải chọn lọc nội dung và hành động cốt lõi ngay từ đầu, thay vì cắt gọt từ bản máy tính xuống sau. Với phần lớn website thương mại tại Việt Nam hiện nay, đây là điểm khởi đầu hợp lý vì Google xếp hạng theo bản di động và khách thường gặp thương hiệu lần đầu trên điện thoại.
Câu trả lời ngắn: với phần lớn website thương mại, thiết kế cho di động trước là điểm khởi đầu đúng, không phải vì xu hướng mà vì đó là nơi khách của Anh/Chị thật sự xuất hiện. Câu hỏi thực tế hơn là: sản phẩm và tệp khách của Anh/Chị có thuộc số ít ngoại lệ không?
Mobile-first nghĩa là gì
Thiết kế cho di động trước (mobile-first) do Luke Wroblewski đề xướng năm 2009 và đúc lại thành sách năm 2011. Nguyên lý cốt lõi: bắt đầu từ màn hình nhỏ nhất, điều kiện hạn chế nhất, rồi mở rộng dần lên. Không phải thu nhỏ từ bản máy tính xuống.
Cách làm này kết nối với một nguyên lý rộng hơn gọi là nâng cấp tiệm tiến (progressive enhancement): dựng nền cho trường hợp hạn chế nhất trước, rồi thêm lớp phức tạp khi màn hình và điều kiện cho phép. Khách dùng điện thoại cũ, mạng yếu, ngoài trời, một tay, hay bị gián đoạn bất cứ lúc nào. Đó là điều kiện thiết kế phải chịu đựng được trước khi lo đến hiệu ứng đẹp trên màn 27 inch.
Cần phân biệt rõ: thiết kế đáp ứng (responsive design) là kỹ thuật cho phép một website tự co giãn theo màn hình. Còn di động trước là chiến lược, quyết định thứ tự bắt đầu. Hai thứ hoạt động cùng nhau nhưng không thay thế nhau.
Lý do thực tế để bắt đầu từ di động
Có hai lý do nặng ký ngoài chuyện phần lớn khách dùng điện thoại.
Thứ nhất, Google dùng lập chỉ mục ưu tiên di động (mobile-first indexing): bản di động của trang là bản Google đọc để quyết định thứ hạng tìm kiếm. Đây là mặc định của Google cho mọi website. Nghĩa là nếu bản di động của Anh/Chị thiếu nội dung, tải chậm, hay khó dùng, điều đó ảnh hưởng trực tiếp đến khả năng khách tìm thấy Anh/Chị trên Google, dù bản máy tính có đẹp đến đâu.
Thứ hai, ràng buộc của màn hình nhỏ là bộ lọc nội dung tốt nhất. Khi không gian hẹp, không thể giữ tất cả mọi thứ. Buộc phải chọn: nội dung nào thật sự cần thiết, hành động nào khách cần làm trước tiên. Kết quả là bản máy tính sau đó cũng gọn và rõ hơn, vì đã qua bộ lọc đó rồi.
Khi nào nên cân lại trọng tâm
Ưu tiên di động trước khi website phục vụ bán lẻ, F&B, du lịch, nội dung, dịch vụ tiêu dùng, hoặc khi phần lớn nguồn truy cập đến từ quảng cáo mạng xã hội và tìm kiếm trên điện thoại. Đây là mặc định hợp lý cho hầu hết doanh nghiệp vừa và nhỏ tại Việt Nam.
Cân nhắc lại trọng tâm khi sản phẩm chính là công cụ làm việc phức tạp: bảng biểu nhiều cột, thao tác kéo thả, nhập liệu dài, quy trình nhiều bước mà người dùng thực sự ngồi máy tính để làm việc. Trong trường hợp đó, trọng tâm thiết kế nên theo cách khách thật sự dùng, không áp máy móc.
Dù ưu tiên màn nào, vẫn phải đảm bảo bản còn lại dùng được. Không bỏ rơi hoàn toàn.
Lỗi thường gặp khi làm ngược chiều
- Thiết kế đẹp trên máy tính rồi mới nhồi xuống di động: nội dung vỡ, nút chồng lên nhau, bố cục mất trật tự.
- Đặt nội dung và nút kêu gọi hành động (call to action) quá sâu, khách trên di động phải cuộn dài mới thấy.
- Ảnh nặng không tối ưu làm bản di động tải chậm, nhất là trên mạng yếu hoặc mạng di động không ổn định.
- Vùng bấm nhỏ, đặt sát nhau, ngón tay bấm nhầm liên tục.
- Menu và biểu mẫu (form) không thiết kế cho một tay thao tác, khách phải dùng hai tay hoặc phóng to màn hình.
- Quên rằng bản di động là bản Google dùng để xếp hạng, nên chỉnh sửa bản máy tính mà không kiểm tra bản di động.
Thiết kế cho di động trước không phải là thu nhỏ nội dung. Đó là quyết định trước những gì thật sự quan trọng.
Luke Wroblewski, Mobile First, A Book Apart, 2011
Góc nhìn của Sinh Vũ
Sinh Vũ dựng luồng trải nghiệm và giao diện theo hướng đáp ứng, ưu tiên di động cho phần lớn dự án vì đó là nơi khách gặp thương hiệu lần đầu. Ở khâu chiến lược nội dung đầu dự án, Sinh Vũ làm việc cùng khách hàng để xác định đúng phần cốt lõi nào cần đặt lên trên màn nhỏ trước. Đây không phải việc của kỹ thuật một mình, vì chọn đặt gì lên trước là quyết định kinh doanh.
Với một số sản phẩm số nặng thao tác trên máy tính, Sinh Vũ cân lại trọng tâm theo cách khách thật sự dùng, không áp công thức máy móc. Nguyên tắc là: hiểu hành vi thật của khách trước, rồi mới quyết định thiết kế bắt đầu từ đâu.
Nguồn tham khảo
Understanding mobile-first indexing, Google Search Central (độ tin cậy cao). Mobile First, Luke Wroblewski, A Book Apart, 2011 (độ tin cậy cao). Mobile First, Interaction Design Foundation (độ tin cậy cao).
Câu hỏi thường gặp
Thiết kế đáp ứng (responsive) và thiết kế di động trước có khác nhau không?
Có, và đây là điểm hay nhầm nhất. Thiết kế đáp ứng là kỹ thuật cho phép một website tự co giãn theo kích thước màn hình. Thiết kế di động trước là chiến lược quyết định bắt đầu từ màn hình nhỏ trước. Có thể dùng kỹ thuật đáp ứng mà vẫn thiết kế theo hướng ngược lại, tức là dựng bản máy tính trước rồi thu nhỏ lại. Hai khái niệm này hoạt động cùng nhau nhưng không thay thế cho nhau.
Nếu sản phẩm của tôi chủ yếu dùng trên máy tính thì có cần ưu tiên di động không?
Không nhất thiết phải áp máy móc. Nếu sản phẩm là công cụ làm việc phức tạp, bảng biểu nhiều cột, thao tác chuyên sâu mà người dùng thực sự ngồi máy tính để làm việc, thì trọng tâm thiết kế nên theo cách khách thật sự dùng. Tuy nhiên, dù ưu tiên màn nào, Anh/Chị vẫn phải đảm bảo bản còn lại dùng được, không bỏ rơi hoàn toàn. Và cần nhớ rằng bản di động vẫn ảnh hưởng đến thứ hạng tìm kiếm.