Thiết kế Mobile first – là gì vì sao phải quan tâm?

Mobile first là gì?

Khi nhắc đến Mobile First có hai vấn đề cơ bản cần được đề cập tách biệt: triết lý thiết kế và thao tác kỹ thuật. Tuy nhiên khi cụm từ Mobile Responsive xuất hiện lại gây ra một sự khó hiểu.

Xét về triết lý thiết kế, từ lâu các nhà thiết kế thường phát triển màn hình từ lớn nhất rồi mới đến nhỏ nhất, nghĩa là thiết kế đầu tiên – thiết kế “chính” – sẽ cho chế độ xem toàn màn hình lớn nhất và nhiều chức năng nhất.

Việc dành sự ưu tiên hàng đầu cho những người sử dụng laptop và desktop này có một nhược điểm rất lớn, bởi nghiên cứu cho thấy rằng có tới 25% người dùng ở Mỹ chỉ dùng điện thoại. Tại các khu vực khác trên thế giới, chẳng hạn như vùng nông thôn Trung Quốc, việc chỉ sử dụng điện thoại để kết nối mạng có thể chiếm đến 45% số người dùng (dựa theo báo cáo năm 2013 của On Device Research).

Rất nhiều tiện ích và chức năng cho cái nhìn và tính năng hoàn hảo trên laptop và desktop không thể chuyển đổi thành một giao diện mobile đem lại cho người dùng những trải nghiệm hoàn hảo. Trong trường hợp xấu nhất, chúng có thể khiến cho cả site không thể, hoặc cực kỳ khó để sử dụng và điều hướng.

Triết lý Mobile First giúp chúng ta khắc phục vấn đề này ngay từ đầu. Điều này không có nghĩa là bạn chỉ tập trung vào mỗi giao diện mobile, mà bạn bắt đầu từ thiết kế mobile với sự cân nhắc về các quy định và ràng buộc của giao diện này, và từ đó phát triển thành các màn hình lớn hơn. Khi đó, chúng ta phải xác định những thông tin cần thiết và phù hợp nhất cho một giao diện nhỏ, và ẩn hoặc loại trừ những tiện ích không cần thiết.

Ví dụ, khi nhận được một email quảng cáo giảm giá trong kỳ nghỉ lễ của Best Buy, đường link trong email đó sẽ đưa chúng ta đến những giao diện hoàn toàn khác nhau, tùy thuộc vào thiết bị mà ta đang sử dụng.

Trên phiên bản dành cho di động, chúng ta có thể thấy rất nhiều sự khác biệt: hero image và phần giới thiệu rất ngắn gọn, các danh mục được thu gọn theo mặc định và không gian chứa hình ảnh, các nút điều hướng được thiết kế rất hợp lý và thuận tiện…

Từ góc nhìn kỹ thuật, Mobile First có thể được thực hiện nhờ một số kỹ thuật như phát hiện server từ máy chủ của người dùng hay thiết kế responsive web của khách hàng. Ví dụ, thiết bị của khách hàng sẽ tìm kiếm các đánh dấu HTML và tìm file CSS tương ứng với các điều kiện cụ thể của thiết bị đó để tải kiểu dáng và thông tin tương ứng. Điều này sẽ tác động đáng kể đến khả năng sử dụng, và đặc biệt là thời gian tải – việc chọn lọc những thông tin phù hợp khiến dung lượng của phần mềm “nhẹ” hơn, và giúp tốc độ tải nhanh hơn.

Từ đó, việc phân biệt giữa Mobile First và Mobile Responsive trở nên rất quan trọng, vì Mobile Responsive có thể giảm kích thước của các thành phần từ bản website xuống chứ chưa chắc đã giảm được kích thước của file.

Vì vậy mặc dù Mobile Responsive có thể đáp ứng được tính thẩm mỹ của các giao diện website nhưng dung lượng lớn của nó tiêu tốn data một cách không cần thiết, và có thể khiến việc tải site chậm hơn và việc kết nối dữ liệu bị ngắt quãng.

Tại sao chúng ta cần quan tâm?

Đơn giản vì Mobile First sẽ giúp chúng ta thu được nhiều lợi nhuận hơn. Một ưu thế lớn của thiết kế Mobile First là giúp tải site của chúng ta nhanh hơn. Đầu tiên, cải thiện tốc độ trang web sẽ cải thiện Google Ranking của bạn. Google không chỉ coi trọng các site di động đã được tối ưu hóa cho giao diện này mà còn xem xét cả tốc độ tải như một nhân tố quan trọng. Google rất ít khi công bố những thành phần được tính để xếp hạng, nhưng điểm này được họ chính thức công nhận từ năm 2010.

Hơn nữa, thiết kế Mobile First sẽ giúp cắt giảm rất nhiều chi phí băng thông. Khách hàng càng ngày càng sử dụng mobile để thanh toán và mua hàng nhiều hơn, dữ liệu mới nhất từ Black Friday năm 2015 cho thấy số lượng mua hàng qua mobile chiếm 36.5% tổng số lượng đơn hàng, và trong Cyber Monday là 26%.

Một dữ liệu khác về thống kê sử dụng internet toàn cầu cho thấy lưu lượng băng thông của mobile đã vượt qua desktop, và từ đây chúng ta có thể thấy rằng, tại sao thiết kế theo Mobile First trở nên thực sự hữu ích cho việc kinh doanh trực tuyến.

Việc tối ưu hóa cho ứng dụng mobile đã trở nên quan trọng đến nỗi một số công ty thậm chí còn thực thi các hạn chế về tốc độ mạng nhằm mô phỏng các kết nối chậm. Facebook đã tổ chức “Thứ Ba 2G” để khuyến khích đội ngũ UX của họ thấu hiểu trải nghiệm mobile của hầu hết những người dùng không thể chi trả hoặc truy cập được những hệ thống kết nối tốt hơn.

Nhược điểm của Mobile first và cách khắc phục

Dẫu có những ưu thế rất lớn, nhiều nhà thiết kế website vẫn không lựa chọn hướng đi này. Đơn giản vì thực hiện nó chẳng vui vẻ hay dễ dàng gì. Chúng ta đâm đầu vào những hạn chế và quy định ngay từ bước đầu tiên. Chúng ta đau đầu hơn với một màn hình nhỏ hơn, ít tài nguyên hơn, và không gian hạn chế.

Nhưng phản biện này là không đủ để phủ nhận những lợi thế của Mobile First. Điều đó chỉ có nghĩa là các nhà thiết kế cần vượt qua chính mình, chấp nhận những thử thách đến từ hướng tiếp cận này, và chấp nhận rằng mình cần phải học hỏi và phát triển nhiều hơn về kĩ năng thiết kế UX.

Và cần phải nhấn mạnh rằng, Mobile First không có nghĩa là Mobile Only. Việc cắt giảm ngân sách thiết kế có thể khiến cho chúng ta nghĩ rằng chỉ thiết kế một giao diện mobile là đủ. Nhưng khi rất nhiều người dùng chuyển đổi linh hoạt giữa các giao diện để dành cho các tính năng khác nhau, việc chúng ta tập trung vào nội dung, điều hướng, và sự đồng nhất giữa các giao diện càng trở nên quan trọng.

Trong một báo cáo gần đây về mobile marketing, nhà sáng lập Smart Insights, Dave Chafey, đã phân tích các dữ liệu và kết luận:

“Dẫu thực tế là người dùng sử dụng di động nhiều hơn cho một số hoạt động như social media, nhắn tin, hay nắm bắt các tin đồn hay cập nhật tình hình thời sự mới, phần lớn người dùng ở thị trường phương Tây vẫn thường sử dụng desktop để xem các thông tin chi tiết, hay mua hàng điện tử.”

Trong quá trình thiết kế, không có một công thức cố định nào. Các dự án khác nhau sẽ cần những cách tiếp cận khác nhau, và chúng ta cần phải cân nhắc kĩ lưỡng khi thực hiện kế hoạch. Chúng ta cần phải quyết định dựa trên quyết định nào là tối ưu cho doanh nghiệp của mình, nhưng cần nhớ rằng, mobile và mobile apps đang càng ngày càng chiếm nhiều thị trường và phát triển càng mạnh mẽ.

Nguồn: Techtalk via Khóa học UI/UX Design