Mobile: Hiển thị theo danh sách (List) hay lưới (Grid) là tối ưu?

4 phút

Việc trình bày nội dung và phác họa bối cảnh sử dụng của khách hàng trên desktop hiện tại rất phổ biến. Khi chuyển đổi nội dung lên các thiết bị di động (mobile) thì nhiệm vụ trở nên khó khăn hơn. Có thể thấy màn hình mobile nhỏ , đa số là thao tác 1 ngón tay (hiện tại các màn hình lớn 5-6″ cho phép chúng ta sử dụng 2 ngón tay trái phải để thao tác). Khách hàng cũng chỉ có thể xem một lượng nội dung nhất định trước khi trượt xuống để xem tiếp.

Chính vì thế việc chọn 1 cách tiếp cận phù hợp sẽ giúp bạn xác định rõ lớp người dùng của mình. Hoặc cả khi bạn biết đối tượng đó thế nào rồi, bạn cũng dễ xác định được cách trình bày của mình hơn trên mobile. Trong bài note này mình viết về hai cách trình bày nội dung: Dạng danh sách (List) hay là Dạng hiển thị lưới (Grid). Lưới tức là các ô vuông hoặc chữ nhật xếp cạnh nhau tạo nên các khối (block) cụ thể.

Bạn nên chọn cách hiển thị theo Danh sách hay là hiển thị theo dạng Lưới đây?

Tổng quan

Trình bày theo dạng Danh sách sẽ giúp bạn hiển thị nội dung thành dạng cột. Trên mobile chiều đứng (Portrait) thì chúng ta sẽ thấy một cột duy nhất. Nội dung lúc này về cơ bản thuần câu chữ và có thể không có bất cứ hình ảnh nào bổ trợ. Lúc này người thiết kế có thể sử dụng các icon hoặc thumbnail phù hợp để hỗ trợ cho nội dung. Cách trình bày này giúp (khiến) việc đọc của khách hàng phụ thuộc thuần vào các câu chữ để từ đó đưa ra các sự lựa chọn phù hợp.

Trình bày theo dạng Lưới sẽ giúp bạn hiển thị nội dung thành 1 hoặc 2 cột. Trên mobile chiều đứng (Portrait) thì có lẽ 2 cột là tối đa, vừa đủ cho việc đọc. Bạn có đồng ý với mình nếu chia 3 cột thì nó có gì đó sai sai không? Ahihi. Khác với dạng Danh sách, dạng này sẽ sử dụng hình ảnh làm phần chính. Các khối hình ảnh này sẽ chiếm hầu hết các không gian đọc của người dùng, lúc này các câu chữ khác chỉ làm nhiệm vụ phụ để bổ trợ. Một điểm quan trọng cần chú ý: Các nội dung về câu chữ lúc này nên được nghiên cứu làm sao cho ngắn và súc tích một cách vừa đủ, để ngăn chặn khả năng xảy ra textwrapping. Lúc này người dùng sẽ dựa vào phần hình ảnh để đưa ra các sự lựa chọn phù hợp.

list-vs-grid

Nhân đây nói luôn Textwrapping là gì? Ai đã từng sử dụng Microsoft Word/Excel 97 từ hồi xưa thì sẽ biết cái này. Có thể tạm dịch Textwrapping là tính năng bao văn bản, nghĩa là khi bạn nhập một chuỗi dài văn bản trong một ô sau đó nhấn Enter qua ô khác, bạn sẽ không nhìn thấy toàn bộ nội dung được hiển thị trong ô trước đó vừa nhập hoặc nó sẽ chiếm dụng vùng biên của các ô kế bên phải.

examples-textwrapping

Chắc hẳn chúng ta thấy cái hình trên quen thuộc chứ? Nguồn gốc nó từ đây mà ra. Nói tới textwrapping thì khi chuyển đổi cách trình bày từ Desktop sang Mobile, chúng ta phải cân nhắc tới các tình huống nếu có xảy ra trên Desktop thì tuyệt đối không để xảy ra trên Mobile. Vì dù sao Desktop chúng ta vẫn còn không gian để chỉnh sửa. Ok xem một ví dụ UI thực tế bên dưới, mình sẽ dùng nó để phân tích những điểm được và chưa được theo các ý triển khai tiếp sau đây.

Screenshot-12-1-1

Hiển thị dạng danh sách giúp khách hàng bớt bị bào mòn

Nhiều bạn designer ưng sử dụng hiển thị dạng Lưới bởi vì cách này dễ hút mắt hơn, tất nhiên đây là điều chính đáng. Vấn đề cốt lõi của cách này đó là nó buộc (ép) khách hàng vào thế phải cuộn xuống nhiều hơn. Chỗ này khác với quan điểm mình từng viết về việc cuộn trong vô thức. Ở đây cách trình bày này đưa người dùng vào thế bị ép buộc.

Rõ ràng cách hiển thị theo Lưới kèm với các hình ảnh sẽ chiếm không gian hiển thị trên màn hình mobile. Do đó nội dung trang sẽ trở nên dài hơn. Điều này dẫn tới việc chúng ta tạo ra nhiều sự lựa chọn hơn cho khách hàng. Và từ đó khách hàng buộc phải cuộn xuống nhiều hơn để tìm thấy thêm sự lựa chọn khác, cho đến khi họ đủ đưa ra quyết định cuối cùng nên làm gì (mua hàng, xem chi tiết, hay là đi tiếp vào trang khác).

list-grid-scroll

Trong khi đó, hiển thị theo dạng Danh sách sẽ làm nội dung trang ngắn hơn. Bạn có thể nhìn hình UI trong phần Tổng quan: Có 3 sự lựa chọn về mặt thông tin. Trong khi đó bạn sẽ thấy có tới 4 sự lựa chọn với cách hiển thị dạng Lưới. Rõ ràng thiết kế và trình bày như hình UI này đã phạm lỗi rất cơ bản.

Quay về cách hiển thị dạng Danh sách: Việc không sử dụng nhiều hình ảnh sẽ giúp chúng ta tăng cơ hội hiển thị các sự lựa chọn hơn. Nó sẽ dẫn tới việc khách hàng không phải tốn thêm nỗ lực để quyết định, trong khi vẫn ở nguyên màn hình hiện tại và tập trung hoàn toàn vào việc phân tích các thông tin và chỉ số của món hàng nào đó.

Ngoài ra bạn có thể áp dụng cách hiển thị Danh sách theo dạng Xếp lớp – Accordion. Cách này đơn giản là các nội dung sẽ được ẩn bên trong 1 tiêu đề cụ thể. Bạn sẽ thao tác bấm vào từng tiêu đề để xổ ra nội dung cần đọc. Mời bạn xem ảnh động minh họa bên dưới cho dễ hiểu. Với cách này khách hàng sẽ thực hiện việc scan nội dung theo tiêu đề, sau đó có thể bấm vào từng tiêu đề để xem nội dung.

Accordion menu for blogger

Hiển thị dạng Danh sách giúp người dùng không chọn lựa vội vàng

Như đã phân tích ở trên, ngoài việc bắt khách hàng phải cuộn xuống (trên màn hình) nhiều hơn, việc hiển thị dạng Lưới còn khiến những người này đưa ra những lựa chọn một cách vội vàng hơn. Về cơ bản khách hàng sẽ thấy kích thích bởi hiệu ứng hình ảnh này. Việc này dẫn phát tới việc họ sẽ chọn một chủ đề nào hấp dẫn họ ngay từ đầu tiên (bỏ qua suy nghĩ và phân tích thông thường).

Khi này khách hàng có thể ở trong 1 khu vực mới – nơi mà nội dung chi tiết không phải là cái họ muốn tìm kiếm. Rõ ràng khách hàng sẽ phải quay về trang trước đó và tiến hành tìm kiếm thêm. Hành động này lặp lại bằng việc cuộn xuống. Có thể nói với cách trình bày này (kèm theo 1 loạt những hình ảnh bắt mắt), khách hàng sẽ bị phân tán nhiều hơn.

Ở chiều ngược lại, dạng Danh sách sẽ giảm thiểu các vấn đề vừa nêu. Việc cân chỉnh nội dung tiêu đề, giới thiệu và cách hiển thị thông tin vừa đủ sẽ giúp khách hàng tìm thấy được điều họ muốn ngay từ nốt nhạc đầu tiên. Và điều quan trọng hơn cả: Khách hàng có đủ khả năng để đưa ra sự lựa chọn tốt nhất sau khi có cơ hội duyệt được tất cả các thông tin chúng ta trình bày trước đó.

list-grid-selections

Hiển thị dạng Lưới vẫn có ưu điểm

Đó là: giúp khách hàng tra cứu thông tin cụ thể/đặc biệt nào đó. Ví dụ: nếu một người xác định sẵn trong đầu hôm nay mình sẽ mua một cái áo thun, anh ta sẽ xác định luôn cái áo đó nó thế nào, mường tượng sẵn trong đầu rồi. Vậy nên trong trường hợp này việc hiển thị theo dạng Lưới sẽ mang lại hiệu quả nhất định.

Khi vào màn hình trên mobile, một danh sách (hiển thị dạng Lưới) gồm các món khác như quần jeans, áo sơ mi rõ ràng không giúp gì được cho anh chàng trong ví dụ trên. Lẽ dĩ nhiên anh ta sẽ phải cuộn xuống liên tục để tìm thấy tín hiệu mình muốn. Việc này nó khác với việc khách hàng xem chậm rãi từng ô hình rồi đưa ra quyết định. Trong trường hợp này khách hàng đã có quyết định trước đó.

Một khi anh chàng kia tìm thấy đúng loại áo thun mình cần, lúc này hình ảnh đại diện và các hình ảnh khác của áo thun sẽ trở nên có ý nghĩa nhất. Lúc này anh ta sẽ thoải mái hơn trong việc đọc thông tin và đưa ra sự lựa chọn. Bởi vì anh ta đã biết chắc rằng mình ở trong khu vực mình cần.

Nếu biết tận dụng ưu điểm này với việc chia cấp thông tin dạng Category, chúng ta sẽ có cơ hội cải thiện việc hiển thị mà vẫn đảm bảo tính hút hàng của trang.

grid-details

Vậy chọn cái nào đây?

Câu trả lời: Tùy thuộc vào bản chất sự việc. Mình ghét phải viết câu này. Nhưng mà nó đúng là như vậy ahehe. Có lẽ chúng ta nên bắt đầu bằng một câu hỏi: Khách hàng của chúng ta cần biết thông tin chi tiết tới mức nào để có thể đưa ra sự lựa chọn?

Nhưng mà câu này nghĩa là gì? Ok, nó lại khiến chúng ta đi về lối cũ: Nội dung (content) là tất cả. Và như vậy việc chọn dạng nào thì nó phải phù hợp với nội dung bạn muốn trình bày. Có nghĩa là bạn sẽ phải có sẵn những nội dung này trước khi nghĩ đến việc chọn kiểu trình bày nào là phù hợp.

 

Quoc Huy Tran Written by:

I do digital product management. I grew up in Danang and moved to Ho Chi Minh City in 2003 where I've enjoyed the tech/startup scene since. I'm a minimalist in lifestyle. I'm passionate about technology, startups, design, football and basketball. For now I focus on building Web App/App products. I have 6+ years of tech startup experience and believe in the MVP approach of shipping early and often.