Thiết kế web bo tròn dùng các khối, nút và biểu tượng có góc mềm, màu dễ chịu và chữ rõ, để việc tìm hiểu và mua hàng có cảm giác gần gũi. Phong cách Bo tròn thân thiện thường hợp với cửa hàng và dịch vụ phục vụ gia đình, nơi khách hay xem bằng điện thoại và cần thao tác dễ.
Hãy thử hình dung bạn đang dùng điện thoại để mua chai nước rửa chén và một hộp đựng đồ. Mỗi mục dưới đây là một lần ngón tay chạm vào màn hình, kèm điều hình bo tròn giúp được và chỗ dễ vướng.
Chạm 1: mở trang và nhìn xem mình đang ở đâu
Một điều cần nói trước: mẫu là ảnh tĩnh của giao diện máy tính. Những gì nói về điện thoại trong bài là cách mình hình dung và đề xuất khi làm thật, không phải kết quả đo trên người dùng.
Vừa mở trang, bạn gặp “Nhà sạch hơn. Ngày vui hơn.” bằng chữ tròn rất đậm, một dòng cam, một dòng xanh, cạnh ảnh đôi vợ chồng đang dọn nhà. Chỉ có một nút cam lớn “Khám phá sản phẩm”, nên chưa cần nghĩ đã biết chỗ nào để bấm. Trên điện thoại, nên giữ nguyên thứ tự này: tiêu đề, nút, rồi mới đến ảnh hoặc ba lợi ích nhỏ. Có thể bỏ hai dòng chữ viết tay trên ảnh, vì chúng khó đọc trên màn hình nhỏ.
Chạm 2: ô tìm kiếm, vì bạn đã biết mình cần gì
Đã biết tên món thì ngón tay thường tìm tới ô tìm kiếm trước. Trong mẫu, ô này là một viên dài màu xám nhạt ngay đầu trang, với dòng gợi ý “Tìm sản phẩm bạn cần…”. Hình bo tròn giúp ô tìm kiếm dễ nhận ra là chỗ nhập, thay vì chỉ để trang trí.
Khi làm thật, bạn nhớ để ô đủ cao cho ngón cái, chữ gợi ý không quá nhạt. Bản điện thoại nên giữ ô tìm kiếm ở nơi dễ thấy, đừng giấu sau một biểu tượng kính lúp nếu cửa hàng có nhiều mặt hàng.
Chạm 3: thẻ danh mục, bấm vào đâu cũng phải đi được
Giả sử bạn chưa nghĩ ra món và kéo xuống bốn thẻ danh mục. Mỗi thẻ có ảnh, một vòng tròn biểu tượng, tên, mô tả ngắn và một mũi tên tròn nhỏ. Thẻ nhìn thân thiện, nhưng có một băn khoăn: mắt thì thấy cả thẻ giống nút, trong khi mũi tên lại rất bé. Nếu là trang của bạn, mình sẽ cho cả thẻ bấm được, mũi tên chỉ là dấu hiệu.
Đây cũng là chỗ khác với kiểu lưới thẻ gọn gàng. Lưới thẻ lo chuyện sắp nhiều lựa chọn để so sánh. Thiết kế web bo tròn lo chuyện khác: khối nào cũng mời bấm, nên khối đó phải dẫn đi đâu đó thật. Hình tròn trịa giống một lời hứa rằng “chỗ này chạm được”, và đó là điều mình mong bạn nhớ nhất sau bài này.
Chạm 4: nút thêm vào giỏ, lần chạm đáng làm kỹ nhất
Tới rồi, bạn thấy món cần mua. Ở mẫu Nhà Vui, nút giỏ hàng là vòng tròn cam nằm ở góc phải thẻ, cạnh giá. Đó là vùng bấm rõ nhất trang, giúp người mua dễ tìm thao tác thêm món.
Hãy xem cách làm tương tự ở cửa hàng tạp hóa giả định Giỏ Xóm. Ô tìm kiếm ghi “Hôm nay nhà mình cần gì?”, đầu trang chia thành các ô bo tròn gồm khối chữ nền kem, ảnh người mẹ xếp rau vào giỏ, ảnh rau và cà chua, ô vàng “Giao tận cửa”. Sau đó là tám vòng tròn danh mục có ảnh thật, rồi các thẻ có nút cộng đỏ. Khối “Nấu gì tối nay?” đi một đường khác: chọn món ăn trước, rồi bấm “Lấy nguyên liệu”.
Ảnh minh họa này không hiển thị giá. Cửa hàng của bạn thì cần giá thật nằm ngay gần nút cộng, vì người mua thường muốn biết giá trước khi chạm. Sau khi chạm cũng nên có phản hồi rõ, chẳng hạn nút đổi trạng thái hoặc giỏ hàng cập nhật số lượng, để bạn khỏi bấm lại lần nữa vì tưởng chưa được.
Chạm 5: mở giỏ để xem lại, và cần chữ đủ rõ
Mua được vài món, bạn chạm vào biểu tượng giỏ ở đầu trang. Mẫu đặt nó trong cụm Tài khoản và Giỏ hàng, kèm số nhỏ trong vòng tròn cam. Ảnh mẫu không có trang giỏ hàng, nên phần sau là đề xuất: mỗi dòng có ảnh nhỏ, tên, số lượng tăng giảm và nút bỏ món, các nút đủ cách nhau để không chạm nhầm.
Mẫu gốc đặt các khối trên nền trắng, xanh rất nhạt và kem, nên thiết kế web bo tròn có vẻ dịu mắt. Nhưng màu dễ chịu cũng dễ khiến chữ và viền bị nhạt theo. Viền ô nhập và nút cần tương phản với nền, WCAG 1.4.11 nêu mức 3:1 cho thành phần giao diện. Nếu bạn đang phân vân nên dùng bao nhiêu màu, bài phong cách tươi sáng, trẻ trung nói kỹ về màu hơn. Ở đây, màu chỉ cần lui lại để nhường chỗ cho vùng bấm.
Chạm 6: chọn giờ, chọn nơi giao, từng việc một
Đến đoạn dễ bỏ cuộc: phải nhập thông tin. Mẫu Nhà Vui chỉ có trang chủ, nên ở lần chạm này mình mượn một ví dụ mở rộng. Mẹo là chia nhỏ thành các lựa chọn to, dễ chạm, và giao diện giặt ủi giả định Giặt Nhàn cho thấy rõ ý này, dù là dịch vụ chứ không phải hàng hóa. Ngay dưới đầu trang là một thanh trắng bo tròn có “Chọn loại đồ”, “Chọn giờ lấy”, “Chọn nơi giao” và nút vàng “Tiếp tục”.
Mở đầu của ảnh này khác hẳn hai ảnh còn lại: tiêu đề “Đồ bẩn để cửa, đồ thơm về nhà.” căn giữa, bên dưới là ba ảnh hình tròn và hình viên nối nhau. Tiếp theo là sáu thẻ dịch vụ, dải màu chàm “Một túi đồ đi đâu?” và các biểu tượng đọc nhãn giặt. Có một điều mình sẽ sửa: menu đang là các viên trông gần giống nút chọn bên dưới, nên khó biết viên nào để điều hướng, viên nào để đặt. Cũng cần nhớ thanh chọn trong ảnh chỉ là hình vẽ, muốn dùng phải xây dựng chức năng thật.
Chạm 7: hỏi thêm trước khi quyết
Với chai nước rửa chén thì bạn ít phải hỏi. Nhưng có những thứ không ai bấm đặt ngay, nhất là khi liên quan đến con mình, nên mình mượn thêm một ví dụ mở rộng: lớp dạy bơi giả định Cá Con. Toàn bộ đầu trang là một ảnh lớn cô giáo cùng bé tập trong hồ, với thẻ trắng mép mềm giữ tiêu đề “Bé yêu nước, học bơi từng bước.”. Sau đó có ba thẻ theo giai đoạn, lộ trình năm vòng tròn, danh sách đồ cần mang và khối “Phụ huynh hay hỏi” dạng câu hỏi mở ra được.
Trong thiết kế web bo tròn, khối hỏi đáp này rất đáng giá: phụ huynh tìm được đúng điều mình băn khoăn, đọc vài dòng, rồi mới đăng ký học thử. Bốn vòng tròn “Lớp nhỏ”, “Làm quen nhẹ nhàng”, “Có người trông”, “Phụ huynh xem được” thì lại đáng chú ý theo hướng khác. Chúng trông như nút, nhưng thực ra chỉ là lợi ích. Bạn có thể cho chúng dẫn tới phần giải thích, hoặc bớt nổi đi. Các câu này cũng chỉ là chữ minh họa, lớp học thật chỉ nên ghi điều đã làm được. Ảnh trẻ em thật thì cần phụ huynh đồng ý trước khi đăng.
Nhân tiện, các mảng sóng trong ảnh này gợi nhớ tới phong cách đường cong mềm mại. Khác nhau ở chỗ: đường cong nối các phần và tạo nhịp cho mắt, còn bo tròn nằm trên chính những thứ tay chạm vào.
Chạm 8: chạm nhầm cửa, khi nào nên quay ra?
Đi với nhau thì mình cũng nên nói thật: không phải trang nào cũng hợp kiểu này. Bạn có thể cân nhắc hướng khác trong những trường hợp sau:
- Văn phòng luật, kế toán, tư vấn tài chính: khách thường tìm sự chắc chắn hơn là sự vui vẻ, nên bố cục chuyên nghiệp, rõ ràng có thể hợp hơn.
- Thương hiệu cao cấp: nhiều khối tròn, nhiều màu dễ khiến giá trị trông nhẹ đi. Hãy đối chiếu với mẫu sang trọng, tinh tế.
- Bảng thông số dày đặc: khoảng đệm rộng làm mỗi màn hình chứa được ít dữ liệu hơn, nên gây mệt khi cần so sánh nhiều dòng.
- Trang chỉ để đọc, gần như không có thao tác: lợi thế về vùng bấm không còn dùng nhiều, nên chọn theo nội dung sẽ hợp lý hơn.
Chạm 9: rẽ sang quầy khác, thiết kế web bo tròn hợp với ai?
Ngoài ba minh họa ở trên, đây là 12 ngành khác có thể áp dụng. Với mỗi ngành, mình chỉ chọn một lần chạm khách cần nhất, vì chỗ đó nên làm kỹ trước.
- Đồ gia dụng: nút thêm vào giỏ cạnh giá, vì khách thường mua nhiều món một lượt.
- Trà sữa, đồ ăn mang đi: chọn cỡ và món thêm bằng các viên lớn, đỡ phải nhập chữ.
- Thú cưng: chọn loại thú trước, để danh mục chỉ hiện đúng thứ khách cần.
- Đồ chơi trẻ em: lọc theo nhóm tuổi bằng các vòng tròn, có chú thích an toàn do nhà sản xuất công bố.
- Văn phòng phẩm: nút mua lại danh sách cũ, hợp với người mua định kỳ.
- Trung tâm tiếng Anh thiếu nhi: nút đăng ký học thử đi kèm vài câu hỏi của phụ huynh.
- Lớp vẽ, lớp nhạc: chạm vào từng lớp để xem lịch, đừng dồn tất cả vào một bảng dài.
- Vệ sinh nhà cửa: chọn loại nhà và hạng mục trước khi gọi, để cuộc trao đổi ngắn hơn.
- Sửa điện lạnh tại nhà: nút gọi thật lớn, kèm danh sách thiết bị nhận sửa.
- Hoa tươi giao tận nơi: chọn dịp tặng trước, rồi mới đến mẫu hoa và giờ giao.
- Suất ăn gia đình: chọn ngày trong tuần bằng các viên, thấy ngay ngày nào đã chọn.
- Phòng khám thú y: nút đặt lịch dễ thấy, có lối gọi riêng cho trường hợp gấp.
Chạm 10: mở nốt vài câu còn băn khoăn
Bo tròn nhiều thế nào là vừa?
Không có một con số chung. Bạn nên quy định vài mức, như nút một mức, thẻ một mức, ảnh một mức, rồi dùng thống nhất. Trộn quá nhiều độ bo thường làm trang trông lộn xộn dù từng khối đều đẹp.
Thiết kế web bo tròn có làm trang trông trẻ con không?
Có thể, nếu vừa bo nhiều vừa dùng chữ tròn và màu rực cùng lúc. Với khách người lớn, bạn có thể giữ khối bo tròn nhưng dùng kiểu chữ đứng đắn hơn và ít màu hơn.
Có cần chữ trên nút thật cụ thể không?
Nên có. “Xem tất cả sản phẩm” dễ hiểu hơn “Xem thêm” khi đứng một mình. WCAG 2.4.4 cũng yêu cầu mục đích của liên kết hiểu được từ chữ của nó hoặc ngữ cảnh đi kèm.
Dùng WordPress thì có giữ được kiểu này không?
Thường là được, miễn độ bo, màu và cỡ nút được đặt thành quy định chung. Khi đó, người quản trị thêm sản phẩm mới không phải tự chỉnh từng khối.
Chạm 11: bấm đặt, và thử lượt này trên trang của bạn
Lần chạm cuối nên thật yên tâm: một nút lớn, chữ nói rõ việc sắp xảy ra như ‘Đặt hàng’, trước đó có tóm tắt món, giờ và nơi nhận. Mẫu gốc dừng ở trang chủ nên chưa cho thấy bước này, vì vậy khi làm thiết kế web bo tròn, bạn nhớ bàn cả các trang sau trang chủ.
Trước khi chọn giao diện, hãy cầm điện thoại đi thử lượt mua trên website hiện tại của bạn và đếm xem:
- Cần bao nhiêu lần chạm để từ lúc mở trang đến lúc đặt được một món?
- Có chỗ nào trông bấm được mà bấm không ra gì?
- Lần chạm nào khiến bạn phải phóng to hoặc bấm lại?
Có ba câu trả lời đó rồi, bạn có thể xem các bước Mạnh An AI thiết kế và bàn giao website, hoặc bảng giá thiết kế website AI để chọn phạm vi phù hợp.
Mạnh An AI phục vụ khách hàng trên toàn quốc. Bạn có thể gửi lượt mua hàng vừa thử để cùng trao đổi trước khi bắt đầu.
Thông tin đơn vị
Đơn vị: Công Ty TNHH Mạnh An Service
Dịch vụ: Mạnh An AI – Thiết kế website
Phạm vi phục vụ: Khách hàng trên toàn quốc
Địa chỉ văn phòng: Thanh Dương 2, Phường Đông Tiến, Thanh Hóa
Điện thoại: 083.5431.678
Email: info@manhan.vn
