Trong mấy năm gần đây làm sản phẩm, mình nghe người ta nói hoài cụm từ này: mobile-first.
Khi mình làm việc với design team để chuẩn bị giao diện cho một tính năng nào đó, hoặc tổ chức các buổi kick-off/ sprint planning cùng tech team, các bạn thường hay hỏi mình (như một thói quen): “làm bản mobile trước phải không?”.
Thậm chí, bản thân nội bộ team phát triển sản phẩm, trong vài buổi brainstorm cho việc xây dựng một tính năng mới, đôi khi cũng rất tập trung vào phát triển phiên bản app mobile, hạ độ ưu tiên của bản web hoặc thậm chí không tính tới chuyện phát triển bản web. Các quyết định này thỉnh thoảng được đưa ra một cách rất bản năng và gần như theo quán tính, mà không hề có phân tích kỹ và rõ ràng về việc:
- Tính năng này có phù hợp để thao tác trên mobile không?
- Người dùng sẽ sử dụng tính năng này thế nào, trong tình huống gì?
- Dựa vào dữ liệu, người dùng đang sử dụng tính năng trên thiết bị nào nhiều nhất?, hay là;
- Dựa vào user research, người dùng có thể sẽ muốn sử dụng tính năng trên loại thiết bị nào? Việc thiết kế tính năng trên mobile có thực sự phù hợp với nhu cầu người dùng hay không?
- v.v…
Chính vì thế, mình đã chứng kiến nhiều tình huống mà ở đó, một team phát triển sản phẩm đã tập trung rất nhiều nguồn lực để phát triển tính năng trên phiên bản app và bỏ qua bản web, kết quả là sau khi release tính năng, user phàn nàn rất nhiều vì giờ đây, họ cần có thêm điện thoại nếu muốn sử dụng thêm những tính năng mới, trong khi trước đó chỉ cần dùng mình máy tính để bàn hay laptop là đủ.
Vì vậy, theo đánh giá của mình, việc áp dụng “mobile-first” hay không sẽ phụ thuộc vào rất nhiều yếu tố, chứ không thể lúc nào cũng áp dụng “mobile-first” mọi tình huống.
Ngoài vài yếu tố cần phân tích mà mình liệt kê sơ qua ở trên, trong bài viết này, mình muốn nhìn vào một khía cạnh khác mà mình thấy khá thú vị, đó là đặc điểm kỹ thuật của những thiết bị hiển thị như máy tính hay điện thoại di động, đi kèm là ngữ cảnh sử dụng của chúng, từ đó, chúng ta sẽ hiểu hơn tại sao không phải lúc nào cũng cần “mobile first”.
Đầu tiên, mình sẽ back lại một xíu về định nghĩa mobile-first là gì.
Có rất nhiều nguồn thông tin nói về việc thiết kế sản phẩm theo hướng mobile-first và giải nghĩa cụ thể về thuật ngữ này. Ở đây, mình trích lại nguyên văn định nghĩa của UXPin mà theo mình là rất ngắn gọn và dễ hiểu:
The mobile-first approach is exactly as it sounds: designing for the smallest screen and working your way up.
Source: A Hands-On Guide to Mobile-First Responsive Design – UXPin.
Tức là: bạn sẽ thiết kế sản phẩm cho màn hình nhỏ nhất (đa số là smartphone, nhưng cũng có thể là các personal gadgets), rồi tiến dần lên các thiết bị màn hình lớn hơn như tablet và desktop.
Ở màn hình nhỏ nhất, bạn tập trung vào những thành phần bắt buộc phải có (must-have) và những key elements/ key actions, sau đó khi thiết kế cho các màn hình lớn hơn, bạn có thể dành thêm nguồn lực cho những thứ nice-to-have, hoặc những giá trị cộng thêm (nhưng không thiết yếu).
Sẽ có nhiều trường hợp, thiết kế của bạn tập trung duy nhất cho màn hình nhỏ nhất (ở trường hợp này là mobile) rồi dừng lại. Nhưng cũng có các trường hợp, bạn thiết kế theo lộ trình, từ mobile tới tablet, rồi dừng lại, hoặc qua hẳn desktop, rồi mới dừng lại. Dừng lại tại đâu là tùy thuộc vào đặc điểm sản phẩm, đặc điểm người dùng mục tiêu của sản phẩm ấy cũng như định hướng kinh doanh của công ty.
Một ví dụ nhỏ về mobile-first là khi Shopee tiến vào thị trường Việt Nam năm 2016. Lúc ấy, với phiên bản dành cho người mua, Shopee chỉ tập trung phát triển app cực kỳ mạnh, còn bản web thì mãi sau mới có, và nó cũng lởm thôi rồi trong những ngày đầu ấy, nếu bạn nào từng sử dụng qua và còn nhớ.
Như vậy, “mobile first” vốn là một trong những chiến lược và cách tiếp cận tuyệt vời cho responsive & adaptive design. Tuy nhiên, khi áp dụng nó vào quá trình phát triển sản phẩm thực tế, mình thấy người ta thường hiểu nhầm về nó.
- Hiểu nhầm đầu tiên, mobile-first tức là chỉ làm cho mobile, các bản còn lại không cần làm.
- Hiểu nhầm thứ hai, mobile-first luôn đúng và sẽ luôn áp dụng mobile first cho mọi tình huống, tức là bao giờ cũng làm theo trình tự từ màn hình nhỏ nhất (mobile) rồi mới tới các màn hình lớn hơn (desktop/laptop).
Điều này mới nghe thì có vẻ hợp lý, khi mà mobile đã và đang trở thành một phần không thể thiếu của con người. Nhưng hãy cùng mình nhìn lại sâu hơn một chút về đặc điểm kỹ thuật và ngữ cảnh sử dụng của các thiết bị nói trên.
Đầu tiên là máy tính chuyên dụng.
Máy tính chuyên dụng gồm có desktop (máy tính để bàn) và laptop (máy tính cá nhân).
Với desktop và laptop, ta có thể làm được rất nhiều thứ từ đơn giản tới phức tạp: lướt web, xem phim, chơi game, viết blog, lập trình, thiết kế, bán hàng online, quản lý thông tin cá nhân, quản lý tài chính, v.v…
Lợi thế màn hình rộng, có bàn phím vật lý cùng các thiết bị đi kèm như con chuột giúp việc thao tác và nhận phản hồi từ thao tác trên máy tính chính xác hơn và dễ dàng hơn, từ đó khiến nó trở nên cực kỳ thích hợp để xử lý các công việc phức tạp. Chính vì đặc điểm này, máy tính chuyên dụng thể hiện lợi thế tuyệt vời của mình trong các công việc đòi hỏi độ khó cao, cần các thao tác kéo/ thả/ di chuyển chuột nhanh và linh hoạt, xử lý khối lượng thông tin đồ sộ và quản lý các tác vụ phức tạp.
Người dùng của máy tính chuyên dụng thì thường có xu hướng ở cố định tại một vị trí khi sử dụng nó (stationary, not mobile), ví dụ như ngồi tại nơi làm việc, ngồi ở nhà, nằm trên giường, ngồi tại văn phòng, ngồi tại quán cafe v.v… Ngữ cảnh người dùng sử dụng máy tính khi đang di chuyển rất ít khi xảy ra, ví dụ dùng máy tính khi người dùng đang chạy bộ, khi người dùng đang trên đường đến trường, đang đi chợ, đi chơi. Cũng chính vì thế, mỗi một interaction session trên máy tính thường sẽ kéo dài hơn các interaction session diễn ra trên những thiết bị khác, có thể lên đến vài tiếng thay vì chỉ vài phút hay vài chục phút.
Tiếp đến là máy tính bảng (tablet).
Nhỏ hơn máy tính chuyên dụng và lớn hơn điện thoại di động, máy tính bảng với kích thước “nhỡ nhỡ” là thiết bị yêu thích khi người dùng cần một công cụ để giải trí hoặc thực hiện những thao tác đơn giản, xử lý khối lượng thông tin vừa phải.
Máy tính bảng thường không có sự trợ giúp của chuột hay bàn phím vật lý đi kèm như một combo mặc định, do vậy, nếu người dùng chỉ sử dụng mình máy tính bảng mà không trang bị thêm chuột hay bàn phím rời, thì độ chính xác của việc thao tác trên máy tính bảng sẽ không thể cao bằng máy tính chuyên dụng vì người dùng đa phần vẫn phải tương tác bằng bàn phím ảo và tiếp xúc ngón tay.
Do đó, mặc dù màn hình của máy tính bảng lớn hơn (và đôi khi là lớn hơn nhiều) so với điện thoại, giúp nó có khả năng thể hiện một lượng thông tin tương đối lớn, thì nhìn chung máy tính bảng vẫn không thích hợp cho việc tạo và quản lý thông tin nếu lượng thông tin ấy quá nhiều.
Về ngữ cảnh sử dụng máy tính bảng, do kích thước thiết bị tương đối lớn, người ta thường phải sử dụng máy tính bảng bằng hai tay, cụ thể là cần cả hai tay cho việc thao tác, hoặc một tay giữ và một tay thao tác, hoặc vừa dùng tay vừa nhờ tới đồ vật khác để hỗ trợ, ví dụ như dựa máy tính bảng vào vật dụng có sẵn xung quanh môi trường đang sử dụng như quyển sách, cái ly, cái bàn, bụng, đùi v.v…. Do vậy, người dùng của máy tính bảng cũng có xu hướng ở cố định tại một vị trí khi sử dụng loại thiết bị này (stationary, not mobile).
Cuối cùng là thiết bị di động (smartphone/ mobile gadget).
Thiết bị di động có thể bao gồm điện thoại thông minh (smartphone) hoặc các thiết bị thông minh cá nhân như fitness tracker, smartwatch. Ngữ cảnh sử dụng của các thiết bị di động thường là khi người dùng đang… di động, trong môi trường mà một interaction session của họ có thể dễ dàng bị ngắt quãng đột ngột bởi các tác nhân khác xen vào – các session tương tác trên mobile cũng vì thế mà thường rời rạc và ngắn hơn nhiều khi so sánh với các session diễn ra trên thiết bị khác như máy tính.
Vậy đặc điểm chính của thiết bị di động là gì? Đó là sở hữu một màn hình từ nhỏ đến rất nhỏ.
Chính vì đặc điểm ấy, nên sẽ dẫn tới hai tính chất quan trọng của thiết bị di động. Tính chất đầu tiên là “mobile” – sự di động/ linh động (đây có thể xem là một lợi thế). Tính mobile của thiết bị giúp người dùng có thể linh hoạt mang chúng đi bất cứ đâu để phục vụ cho đủ loại nhu cầu, bao gồm và nhấn mạnh là các nhu cầu on-the-go: tìm đường đi, tra cứu các địa điểm gần vị trí người dùng đang đứng, đọc đánh giá về quán ăn đang chuẩn bị đặt bàn, hay check-in trên các social platform khi đang đi du lịch…
Tuy nhiên, cũng chính vì đặc điểm màn hình nhỏ nên các thiết bị di động có một tính chất (có thể được xem như một hạn chế): nó rất khó để hiển thị đầy đủ và trực quan một khối lượng lớn thông tin, và sẽ càng khó hơn khi người dùng muốn cập nhật, chỉnh sửa hay quản lý khối lượng thông tin ấy nếu nó quá lớn. Chính vì đặc điểm màn hình nhỏ, các thông tin hiển thị ở thiết bị di động thường phải được customized ở dạng cô đọng nhất có thể, các interaction cũng được tinh giản và chỉ giữ lại những key actions bắt buộc hoặc tối quan trọng đối với người dùng, giúp họ thực hiện thao tác một cách nhanh chóng, dễ dàng và không sai sót.
—
Như vậy, sau khi hiểu đặc điểm của mỗi loại thiết bị như mình vừa viết ở trên, sẽ dễ dàng hơn rất nhiều để quyết định “mobile-first” hay không “mobile-first” khi ta thiết kế một sản phẩm nào đó.
Với các sản phẩm và tính năng đòi hỏi xử lý/ quản lý một lượng thông tin lớn, ta không thể áp dụng mobile-first. Lúc này, phải là web-first.
Các tính năng thường áp dụng web-first dễ thấy nhất là nhóm tính năng quản lý bán hàng, giao vận (e-commerce platform/ logistics service for seller) hoặc quản lý thông tin trực tuyến (online media, blogging…). Khi lượng thông tin là rất lớn, các tác vụ yêu cầu khá nhiều và phức tạp, việc thao tác trên máy tính chuyên dụng sẽ dễ dàng hơn nhiều so với thao tác trên thiết bị di động (hay kể cả là máy tính bảng).
Giả sử bạn là một người bán hàng, bạn sẽ có thể kiểm tra đơn, xác nhận đơn hay trả lời tin nhắn của khách hàng trên tablet/ smartphone. Nhưng khi đăng bán sản phẩm, quản lý hàng tồn, hay tạo và quản lý các chương trình khuyến mãi bằng việc tải lên những file excel chứa nhiều thông tin, hoặc đơn giản hơn là chuyển dữ liệu từ một hệ thống quản lý của một bên thứ ba sang nền tảng mà bạn đang bán hàng, sẽ thuận tiện hơn nhiều nếu bạn sử dụng máy tính bởi lượng thông tin bạn cần xử lý lúc này là cực kỳ lớn và đòi hỏi nhiều tác vụ. Việc thao tác trên điện thoại có thể khiến mọi thứ trở nên rối tung, nhất là khi đang thao tác dở thì có một cuộc gọi đến, hoặc một notification nào đó khiến bạn bỏ dở công việc giữa chừng và chuyển qua một ứng dụng khác.
Ngược lại, với các sản phẩm và tính năng không đòi hỏi phải xử lý khối lượng thông tin lớn, hoặc có thể tận dụng các đặc điểm của mobile, ta có thể đi theo mobile-first để vừa tiết kiệm thời gian, vừa tận dụng lợi thế của mobile. Rất nhiều thứ mobile có support nhưng các thiết bị khác như máy tính chuyên dụng (đa số) lại không, ví dụ như màn hình cảm ứng, nhận diện và phản hồi giọng nói, cảm biến chuyển động, cảm biến vân tay, vi mạch xử lý hệ thống định vị toàn cầu v.v… Những điều khác biệt này cũng có thể được tận dụng khi thiết kế sản phẩm, tối ưu trải nghiệm của người dùng khi sử dụng sản phẩm trên các thiết bị mobile.
Tóm lại, việc hiểu rõ về thiết bị hiển thị sản phẩm mà bạn đang phát triển sẽ giúp bạn phân tích tốt hơn và đưa ra quyết định hợp lý về việc nên lập kế hoạch phát triển và tối ưu hoá sản phẩm trên loại thiết bị nào trước. Việc này sẽ giúp bạn tiết kiệm thời gian thiết kế, nguồn lực nhân sự kỹ thuật, và còn tránh được tình huống làm ra một thứ mà người dùng chẳng mấy mặn mà.
Mình chúc bạn thành công.
Sài Gòn, tháng 06/2022
Phương