Xã hội & xu hướng
Xu hướng thiết kế website: chọn đúng phong cách cho web của bạn
Website chậm, rối mắt trên điện thoại sẽ mất khách trước khi họ đọc hết dòng đầu. Bài này chỉ cách phân biệt xu hướng bền với mốt nhất thời, nhận diện các phong cách giao diện đang thị hành và chọn được xu hướng hợp với đối tượng, mục tiêu, ngân sách của bạn.
Vì sao thiết kế website cần cập nhật theo xu hướng
Khách hàng của bạn mở website bằng điện thoại, rất thiếu kiên nhẫn và sẵn sàng rời đi nếu trang lộn xộn, chậm chạp. Vấn đề thực ra chỉ còn là chọn xu hướng nào để giữ chân người truy cập mà vẫn đúng bản sắc thương hiệu.
Thiết kế web từng bị coi là chuyện làm đẹp, giờ đã đi vào các con số: thứ hạng tìm kiếm, tỷ lệ rời trang, lượng đơn hàng. Google xếp hạng trang chậm thấp hơn trang nhanh. Khách hàng bỏ đi khi cấu trúc rối rắm. Phần lớn lượt truy cập đến từ màn hình điện thoại nhỏ. Ba chuyện này nối với nhau thành một lý do đủ lớn để bất kỳ doanh nghiệp nào cũng cần nhìn lại giao diện của mình.
Phân biệt được xu hướng thật và mốt nhất thời
Cái gì đang được nhắc nhiều chưa chắc đã đáng làm theo. Xu hướng là nền văn hóa hình thành lâu dài, dần trở thành biểu tượng không lỗi thời theo năm tháng. Mốt thì khác: tập hợp hành vi văn hóa tồn tại ngắn, chỉ bám theo thị hiếu người dùng tại một thời điểm nhất định. Đưa mốt vào website thì trang sẽ trông mới trong vài tháng rồi nhanh chóng cũ kỹ, thậm chí gây khó chịu cho người dùng đã quen giao diện chuẩn.
Một ví dụ đời thường: kiểu chữ trang trí lòe loẹt hay hiệu ứng nhấp nháy từng được nhiều trang dùng để gây chú ý, nhưng khi thị hiếu đổi, chính những chi tiết đó khiến website trông lạc hậu. Trong khi đó, việc sắp xếp thông tin rõ ràng, ưu tiên tốc độ và dễ đọc vẫn giữ nguyên giá trị qua nhiều năm, vì chúng phục vụ đúng nhu cầu của người đọc chứ không chạy theo thị hiếu nhất thời.
Người làm web lâu năm thường dùng ba giá trị cốt lõi để đánh giá một xu hướng thiết kế website thành công: Công, Thiện, Mỹ. Công là tính hữu dụng, trang làm được đúng việc người dùng cần. Thiện là sự tử tế trong trải nghiệm, không gây khó khăn hay lừa gạt người truy cập. Mỹ là vẻ đẹp hài hòa, phục vụ hai giá trị trên thay vì đứng riêng. Một phong cách chỉ đẹp mà vô dụng thì gần với mốt hơn là xu hướng. Trước khi chọn bất kỳ phong cách hay công nghệ nào, nên tự hỏi nó giúp khách hàng làm việc của họ nhanh hơn hay chỉ làm trang trông khác biệt.
Thiết kế web ảnh hưởng trực tiếp đến thứ hạng tìm kiếm
SEO là Tối ưu hóa công cụ tìm kiếm, giúp website đạt thứ hạng cao khi khách tìm trên Google. Trước khi nói tới kỹ thuật, cần thấy quy mô: Google chiếm hơn 90% thị phần tìm kiếm toàn thế giới với hơn 1 tỷ người dùng. Khoảng hơn 90% người dùng Internet cũng dùng Google cùng các công cụ tìm kiếm khác để tra cứu trước khi mua hàng. Dù các kênh bán hàng khác phát triển, nhu cầu tìm kiếm sản phẩm và dịch vụ qua Google, Cốc Cốc hay Bing trước khi mua vẫn gia tăng. Website không xuất hiện khi khách tìm kiếm thì gần như mất khách ngay từ đầu.
Google đã có thông báo chính thức: website hiển thị tốt trên di động, trải nghiệm người dùng tốt sẽ được ưu tiên xếp hạng. Tốc độ tải trang, tính đáp ứng thiết bị và trải nghiệm người dùng đều nằm trong các yếu tố Google đánh giá. Ngày 12/11/2020, Google thông báo bộ chỉ số Core Web Vitals, tức các chỉ số đo trải nghiệm thực tế trên trang, trở thành yếu tố xếp hạng web từ năm 2021. Nói cách khác, thiết kế đẹp nhưng tải chậm hay khó dùng trên điện thoại sẽ bị chính công cụ tìm kiếm phạt bằng vị trí thấp.
Tuy vậy, không phải cứ thay đổi giao diện là thứ hạng tốt lên. Website vẫn dùng chiến lược SEO cũ có thể gặp traffic giảm, từ khóa tụt hạng, bounce rate cao, tức tỷ lệ người truy cập xem một trang rồi bỏ đi. Trang đó cũng khó được Google đánh chỉ mục. Ngược lại, một case study được ghi nhận cho thấy doanh nghiệp dịch vụ sau khi cập nhật cách làm SEO theo hướng mới có traffic tăng hơn 300%. Khoảng cách giữa hai kết quả này thường nằm ở việc website có theo kịp chuẩn trải nghiệm mà Google đang đo hay không.
Khách hàng chủ yếu dùng điện thoại và rất thiếu kiên nhẫn
Mobile-first là cách thiết kế ưu tiên cho điện thoại trước rồi mới mở rộng sang máy tính, và cách này xuất phát từ hành vi thực của khách hàng. Lưu lượng truy cập web từ thiết bị di động chiếm khoảng 60% trên toàn cầu; riêng vào cuối năm 2019, 63% người dùng điện thoại di động truy cập Internet chủ yếu qua thiết bị của họ. Nhìn bức tranh chung, hơn 50% lưu lượng truy cập Internet đến từ thiết bị di động và con số này dự kiến còn tăng. Khách hàng của bạn nhiều khả năng đang nhìn website qua màn hình cầm tay, chứ không phải màn hình máy tính lớn.
Sự thiếu kiên nhẫn là chuyện đã được đo đạc. Website tải chậm hơn 3 giây khiến khách truy cập thường rời bỏ trang và ít quay lại. Ngoài ra, 44% người dùng rời bỏ trang web doanh nghiệp nếu thiếu cấu trúc rõ ràng, thông tin liên hệ và nút kêu gọi hành động rõ ràng. Ghép các con số lại, một trang vừa chậm vừa rối sẽ mất khách theo cả hai hướng: người chờ không nổi bỏ đi vì tốc độ, người kiên nhẫn hơn cũng bỏ đi vì không tìm thấy thông tin cần.
Vì thế, trải nghiệm di động và tốc độ là điều kiện tối thiểu để website hoạt động, chứ không còn là chuyện thẩm mỹ. Một trang tải nhanh, bố cục gọn, nút bấm dễ chạm trên điện thoại sẽ giữ được phần lớn khách trước khi họ kịp cân nhắc đối thủ. Đây chính là nền tảng để các phong cách giao diện và công nghệ tương tác phía sau có chỗ phát huy tác dụng.
Đọc thêm: Xu hướng kinh doanh online khiến phí sàn chiếm tới 27,6% doanh thu
Những phong cách giao diện đang thị hành
Sự ít ỏi ấy không phải ngẫu nhiên. Mở trang Google, người dùng chỉ thấy một ô tìm kiếm và một nút bấm, vậy mà đó là một trong những website được dùng nhiều nhất thế giới. Sức hút của nó cho thấy giao diện đẹp không nằm ở việc thêm nhiều thứ vào trang, mà nằm ở cách chọn đúng thứ cần giữ lại.
Phong cách thị giác là phần dễ nhận ra nhất khi nói về xu hướng thiết kế website, cũng là phần dễ làm sai nhất. Một trang có thể chọn đúng màu, đúng font mà vẫn rối mắt nếu không biết sắp xếp; ngược lại, một trang đơn sơ nhưng biết dùng khoảng trắng đúng chỗ lại dễ chịu và dễ đọc hơn hẳn.
Tối giản và khoảng trắng giúp người đọc tập trung
Chủ nghĩa tối giản, hay Minimalism, là cách làm thiết kế loại bỏ mọi yếu tố thừa, chỉ giữ lại những phần tử thiết yếu để website hoạt động đúng chức năng của nó. Nguyên tắc cốt lõi của phong cách này được tóm trong một câu quen thuộc của giới thiết kế: ít đi là nhiều hơn. Nói cách khác, chỉ dùng đúng những phần tử cần thiết, người thiết kế lại tạo được ảnh hưởng lớn hơn là khi chất đầy chi tiết lên trang.
Điểm mấu chốt của tối giản là biết loại bỏ mọi thứ không đóng góp trực tiếp vào nội dung hay chức năng của website. Mỗi chi tiết còn sót lại, từ đường viền quanh bức ảnh, bảng màu cho tới khoảng trống giữa các khối, đều phải có lý do để tồn tại. Bảng màu thường được thu gọn lại hết mức, kèm việc cân nhắc kỹ ý nghĩa của từng màu và cách chúng tương tác với nhau khi đặt cạnh.
Khoảng trắng là xương sống của phong cách này. Nó giúp mắt người đọc nghỉ ngơi, xác định thứ bậc thông tin trên trang và tạo ra hệ thống phân cấp trực quan: phần nào quan trọng, phần nào phụ, nhìn một cái là biết. Cách mắt vận hành cũng giải thích vì sao khoảng trắng có hiệu lực như vậy. Hai yếu tố đặt gần nhau, mắt người xem coi là một thể thống nhất; đặt xa nhau, người xem sẽ xem xét chúng riêng lẻ. Người thiết kế tận dụng quy luật đó để điều hướng ánh mắt, kéo người đọc đi từ tiêu đề đến nội dung chính rồi mới đến nút hành động, mà không cần vẽ mũi tên hay viết chữ to.
Khoảng trắng còn có một biến thể đơn giản mà hiệu quả: tạo vùng trống trùng màu với nền. Cách này giúp người dùng thư giãn mắt và phân chia các nội dung quan trọng thành từng khoảng riêng, trang đọc lên gọn gàng như một bài văn có xuống dòng đúng chỗ.
Google là ví dụ điển hình nhất cho phong cách tối giản. Trang chủ của nó chỉ giữ lại yếu tố thiết yếu nhất, không banner, không dòng chữ giới thiệu, không hình động, và chính sự ít ỏi đó giúp người dùng tìm kiếm thông tin nhanh và chính xác, không mất tập trung khi theo dõi nội dung.
Dù vậy, tối giản không có nghĩa là càng trống càng tốt. Lạm dụng khoảng trống khiến website trông trống trải, thiếu sức sống, người đọc vào trang rồi lại cảm thấy như vào một căn phòng chưa kê đồ. Khi làm tối giản, người thiết kế vẫn phải chọn font chữ và màu sắc phù hợp với thương hiệu cũng như đối tượng khách hàng mục tiêu; một trang bán đồ thủ công và một trang dịch vụ tài chính không thể dùng cùng một kiểu tối giản. Phải cân bằng được hai điều tưởng trái ngược này, vừa đủ trống để mắt nghỉ, vừa đủ nội dung để trang có hồn, thì phong cách tối giản mới phát huy tác dụng thay vì chỉ trông cho có vẻ hiện đại.
Màu sắc, gradient và chế độ tối
Màu chủ đạo của các website thay đổi theo từng năm như thời trang. Năm 2019 thịnh hành màu xanh, năm 2020 chuyển sang xanh bạc hà, năm 2021 là xám nhạt, rồi đến năm 2022 các tông pastel như xanh ngọc nhạt lên ngôi. Cách các công ty dự báo màu sắc cũng tham gia vào cuộc chơi: theo PANTONE, màu chủ đạo cho xu hướng thiết kế website năm 2026 là Viva Magenta 18-1750, còn WGSN và Coloro, hai công ty dự báo xu hướng, dự đoán màu của năm tới là A.I. Aqua. Người làm web không cần chạy theo từng màu mới, nhưng nên biết rằng màu sắc có vòng đời, và một bảng màu chọn cẩn thận hôm nay vẫn giữ được dáng hiện đại vài năm sau.
Gradient là hiệu ứng chuyển màu liền mạch giữa các sắc độ, thay cho màu đơn sắc vốn không còn được ưa chuộng. Đây là xu hướng màu tiếp tục duy trì từ năm 2020 đến nay, thường được dùng ở phần nền, ở các dòng tiêu đề lớn và ở nút kêu gọi hành động để gây ấn tượng ngay lần nhìn đầu tiên. Một đường chuyển màu từ cam sang hồng trên nút đặt hàng, chẳng hạn, khiến nút đó nổi bật hơn hẳn giữa trang mà không cần viền hay bóng đổ.
Chế độ tối, hay Dark Mode, là cách hiển thị nền tối giúp giảm mỏi mắt khi dùng màn hình lâu và tiết kiệm pin trên màn hình OLED. Số người ưa chuộng chế độ tối không nhỏ: cứ ba người dùng Mỹ thì có một người chọn dark mode vì hai lý do trên. Với website, phông nền tối làm các yếu tố thiết kế nổi bật hơn nhờ độ tương phản cao, nên nhiều trang giữ chế độ tối làm giao diện chính chứ không chỉ là tùy chọn thêm.
Một hướng phối màu khác cũng đáng để người làm web cân nhắc: thiết kế trắng đen kết hợp với một màu nhấn duy nhất để làm nổi bật điểm tập trung. Màu trắng tạo cảm giác tinh khiết, màu đen gợi quyền lực, sang trọng và huyền bí; hai màu này lại là giải pháp phối màu tốt nhất cho người không giỏi phối màu, vì ít gây căng thẳng cho mắt. Với những trang web nhiều nội dung văn bản, cách phối đen trắng cho phép điều hướng dễ dàng và thông tin hiện rõ ràng, nên được ưa dùng hơn các bảng màu rườm rà.
Còn khi muốn trang web nổi bật hẳn giữa đám đông, các tông màu lạ mắt, độc đáo và mạnh mẽ được dự đoán sẽ lên ngôi, hiển thị đẹp trên những màn hình chất lượng cao ngày nay. Màu đậm, tươi sáng phù hợp với website ít nội dung, nơi màu sắc tự thân truyền tải thông điệp về sản phẩm và ý tưởng kinh doanh. Riêng các màu nóng mạnh như đỏ, cam hay xanh lá tươi nên dành cho nút chuyển đổi, vì chúng thúc đẩy người dùng bấm vào; rải những màu này khắp trang sẽ mất hết hiệu quả.
Typography trở thành yếu tố thiết kế chính
Typography là nghệ thuật sáng tạo thông qua các con chữ, dùng để truyền tải thông điệp, slogan của doanh nghiệp. Trước đây chữ chỉ là phương tiện đọc; nay nó trở thành một yếu tố thiết kế chính, tự thân tạo nên ấn tượng thị giác cho trang.
Typography hiện đại dùng font chữ lớn, in đậm và kết hợp serif với sans-serif để tạo tương phản trong tiêu đề. Cách phối cụ thể như sau: phông serif đậm dùng cho tiêu đề và chú thích để nhấn mạnh, sans-serif dùng cho phần văn bản dài vì dễ đọc hơn. Mỗi kiểu serif lại mang một tính cách riêng: nét cong tròn trịa gợi thương hiệu tươi vui, kiểu mà Mailchimp đã chọn; nét góc cạnh, đậm ở đầu nét chữ, lại tạo vẻ hiện đại như ở Medium.
Bên cạnh đó, chữ còn biết chuyển động. Kinetic typography, hay typography động, biến chữ thành yếu tố thiết kế chính, cho phép nó di chuyển và thay đổi hình dạng; việc thêm chuyển động vào văn bản giúp truyền đạt thông tin hiệu quả hơn là để chữ đứng yên. Dù chọn kiểu tĩnh hay động, nguyên tắc chung vẫn rõ: phông chữ đậm nên dành cho tên thương hiệu và tiêu đề, còn phần nội dung chính nên chọn kiểu chữ đơn giản, dễ đọc, để người đọc nhớ thông điệp chứ không phải cố giải mã từng chữ.
Bố cục lưới, minh họa và hình ảnh chất lượng cao
Bố cục quyết định người đọc nhìn vào đâu trước và ở lại trang bao lâu, nên đây là phần mà một sai nhỏ cũng thấy ngay. Hiện nay có nhiều kiểu sắp đặt đang được dùng song song, từ lưới đều tăm tắp cho đến cách phá vỡ quy luật có chủ đích.
Một trong những kiểu được nhắc nhiều nhất là Bento. Kiểu này sắp nội dung vào các ô vuông, chữ nhật kích thước khác nhau, gợi hình hộp cơm Nhật: mỗi ô một món, đặt cạnh nhau thành một bữa cân đối. Người xem quen mắt với cách chia này vì nó gọn, dễ quét và dễ tìm đúng ô mình cần.
Nền tảng kỹ thuật phía sau các bố cục phức tạp là CSS Grid Layout, hệ thống bố cục hai chiều dành cho CSS. Nhờ nó, người thiết kế tạo được những bố cục nhất quán, hiển thị giống nhau trên nhiều trình duyệt khác nhau, thay vì phải bẻ từng khối thủ công như trước đây.
Đối xứng và bất đối xứng là hai hướng đi ngược nhau nhưng đều có chỗ đứng. Cân đối đều nhau là xu hướng nổi bật, phù hợp với doanh nghiệp sáng tạo hay kinh doanh sản phẩm độc quyền, vì nó tạo cảm giác chỉn chu và cân bằng. Ngược lại, muốn thu hút người dùng bằng bố cục bất đối xứng, người thiết kế tăng kích thước cho nội dung cần tập trung: phần lớn hơn tự nhiên được nhìn trước. Tuy nhiên, làm bất đối xứng thì phải tìm lại sự cân bằng tổng thể, tránh để một phần nội dung chiếm quá nhiều không gian trong khi phần còn lại bị chèn ép. Kết hợp hình thái tự nhiên, đường nét mượt với bố cục không đối xứng còn cho trang web một khoảng không gian có tầng lớp, khiến nó trông sống động thay vì phẳng lì.
Một cách khác để trang bớt phẳng là xếp chồng các lớp. Layer là các đối tượng trong bản thiết kế nằm trên những mặt phẳng khác nhau, được đặt chồng lên nhau. Nhiều đối tượng chồng chéo không nhất thiết tạo hiệu ứng ba chiều, nhưng đủ làm trang có độ dày thị giác, bớt nhàm so với việc dàn mọi thứ trên một mặt phẳng duy nhất.
Ở cực đối lập của trật tự là phong cách phá vỡ quy luật. Giao diện kiểu này, nếu dùng vừa đủ, sẽ làm nổi bật nội dung hiệu quả: một tiêu đề chéo góc, một khối tràn ra ngoài lưới giữa những phần đều đặn, mắt người xem lập tức dừng lại đúng chỗ đó. Còn với những ngành như thức ăn hay quần áo, giao diện đặt sản phẩm trong hộp, khối, thẻ vẫn được ưa chuộng, vì nó khớp với thói quen thị giác của người mua: nhìn vào ô, thấy món, quyết định.
Hình ảnh minh họa đang thay một phần ảnh chụp trong thiết kế web.1 Năm 2020, minh họa bùng nổ trong thiết kế web, và xu hướng này tiếp tục phát triển mạnh sang năm 2021. Lý do rất thực tế: nhiều sản phẩm khó chụp ảnh thật, như dịch vụ, khóa học hay phần mềm, thì hình vẽ minh họa truyền tải được ý tưởng rõ hơn ảnh. Dropbox là ví dụ thường được nhắc đến cho cách dùng hình minh họa xuyên suốt một website. So với dùng hình ảnh theo khuôn mẫu định sẵn, hình minh họa tùy chỉnh tạo sức sống riêng cho thương hiệu, vì không ai vẽ giống mình. Line art, kiểu vẽ bằng đường nét đơn giản, cũng là xu hướng nổi trong thiết kế đồ họa năm 2021, giúp trang web trông chuyên nghiệp, gọn gàng mà vẫn sáng tạo.
Chọn định dạng hình ảnh còn quan trọng hơn chọn hình gì. Ảnh theo các định dạng truyền thống như PNG, BMP, GIF hay JPEG có dung lượng lớn và dễ vỡ nét khi phóng to, nên không tối ưu trên di động; công cụ Google PageSpeed Insights thường đánh giá điểm thấp cho những website dùng nhiều ảnh kiểu này. Ngược lại, định dạng SVG giữ được nét khi phóng to, phù hợp thay thế ảnh truyền thống, và hình ảnh vector kết hợp ảnh thực tế với hình minh họa, tạo bằng Illustrator, giúp website nổi bật mà vẫn nhẹ.
Video cũng chiếm chỗ ngày càng lớn trên trang chủ. Dùng nhiều video ngắn giúp gây ấn tượng và kéo dài thời gian người dùng ở lại website; video và hình ảnh tràn toàn màn hình tạo ấn tượng lập tức cho website doanh nghiệp. Nhưng video nền có giá: nếu không tối ưu dung lượng, nó sẽ làm chậm tốc độ tải trang, và mọi ấn tượng thị giác đều vô nghĩa nếu người dùng đã thoát trước khi trang kịp hiện.
Một nguồn hình mới đang xuất hiện là hình ảnh do trí tuệ nhân tạo tạo ra. Nó giúp giảm chi phí sản xuất nội dung, chẳng hạn khi cần thử một concept mà chưa cần thuê nhiếp ảnh. Tuy nhiên, với những nội dung cần niềm tin, ảnh thật vẫn thắng: dùng ảnh thật của nhân viên, khách hàng thay vì ảnh stock giúp tăng tính đáng tin cậy cho trang. Cuối cùng, hai phong cách mang màu hoài cổ cũng đáng lưu ý: Retro và Y2K dùng màu neon, font chữ hoài cổ và hiệu ứng glitch, loại hiệu ứng tạo cảm giác ảo giác, mất phương hướng, để thu hút Gen Z và Millennials. Chọn phong cách nào, tối giản hay phá cách, ảnh thật hay minh họa, vẫn phải quay về một câu hỏi duy nhất: trang này muốn người xem nhìn vào đâu trước.
Công nghệ tương tác định hình trải nghiệm web
Câu hỏi nhìn vào đâu trước sẽ dẫn thẳng sang chuyện vận hành. Một trang web đẹp nhưng không phản hồi gì khi chạm, cuộn hay nhấp sẽ khiến người dùng cảm thấy như đang gõ cửa một ngôi nhà vắng. Các công nghệ tương tác hiện nay chính là cách chủ website mở cửa chào khách: giao diện co giãn theo màn hình, nút bấm có phản hồi tức thì, sản phẩm 3D xoay được, trợ lý ảo trả lời bất cứ lúc nào. Chúng không đứng riêng lẻ mà ghép lại thành trải nghiệm, và phần lớn đều bắt đầu từ một yêu cầu rất đơn giản: web phải dùng được bằng một bàn tay trên điện thoại.
Mobile-first và responsive là nền tảng bắt buộc
Responsive là thiết kế website tự động co giãn giao diện phù hợp mọi kích thước màn hình truy cập. Người làm web thường kiểm tra nhanh bằng cách thu nhỏ cửa sổ trình duyệt: nếu trang tự co dãn mượt mà, không xuất hiện thanh cuộn ngang, thì cơ bản đã đạt. Ngược lại, một trang chỉ đẹp trên màn hình máy tính mà trên điện thoại phải kéo ngang kéo dọc thì gần như mất khách ngay từ giây đầu.
Về kích thước, website chuẩn hiển thị trên máy tính ở Việt Nam thường rộng 960px, còn trên điện thoại chỉ 320–420px. Khoảng cách đó lớn, nên một bố cục không thể giữ nguyên cho cả hai. Với người mới, áp dụng responsive bắt đầu từ hai bước. Bước 1: khai báo thẻ meta viewport trong cặp thẻ head của mã HTML, với định dạng width=device-width, initial-scale=1.0 để trang hiển thị theo chiều rộng thiết bị. Bước 2: viết CSS cho từng chiều rộng màn hình bằng cú pháp @media query trong CSS3. Cần ẩn một thành phần ở thiết bị nào thì đặt display:none, cần hiện lại thì đặt display:block; khi muốn CSS mới đè lên quy tắc cũ, viết thêm !important.
Khi chia đoạn CSS, người làm web thường phân theo các mốc phổ biến: iPad ngang 1024px, tablet nhỏ 480px, iPhone 320px và smartphone nhỏ 240px. Những mốc này chỉ là điểm tham khảo. Nội dung phải tự điều chỉnh kích thước theo màn hình của người truy cập, chứ không ép người dùng phải thu nhỏ phóng to để đọc.1
Nhờ vậy, responsive còn là lựa chọn kinh tế. Doanh nghiệp nhỏ ngân sách hạn chế nên dùng một giao diện responsive duy nhất thay vì làm hai trải nghiệm riêng cho máy tính và điện thoại. Còn doanh nghiệp đủ tiềm lực thì có thể tối ưu riêng hai phiên bản, để mỗi thiết bị đều có trải nghiệm được chăm chút từ đầu. Shaw, một người làm trong ngành, chỉ ra một hành vi thực tế: khách thường duyệt hàng bằng di động nhưng lại thanh toán khi truy cập lại trên máy tính hoặc laptop.1 Hai phiên bản vì vậy phải mượt như nhau, không thể chăm bên này mà bỏ bên kia.
Thiết kế cho điện thoại còn có một chi tiết dễ bị bỏ qua: ngón cái. Giao diện di động nên sắp xếp các yếu tố quan trọng để dễ thao tác bằng ngón tay cái, và thanh điều hướng, menu, nút CTA cần nằm trong phạm vi dễ với tới của ngón tay. Nhiều thiết kế mới đã di chuyển menu hamburger xuống đáy màn hình điện thoại vì đó là vùng tay đặt tự nhiên nhất. Do đó, trước khi đưa trang vào hoạt động, nên thử nghiệm nguyên mẫu trên chính các thiết bị di động để đảm bảo trải nghiệm liền mạch, thay vì chỉ nhìn qua màn hình máy tính.
Thêm vào đó, thiết kế responsive cần tính đến các thiết bị gập với nhiều kích thước màn hình khác nhau, vì màn hình này co dãn theo tư thế mở máy chứ không cố định như điện thoại thường.
Một lớp tối ưu nữa là tính khả dụng: thiết kế sao cho cả người khuyết tật cũng dễ sử dụng trang web. Hỗ trợ giọng nói, chú thích hình ảnh, phụ đề video và loại bỏ các yếu tố gây mất tập trung là những việc làm cụ thể. Làm được thì người dùng dễ chịu hơn, và trang web còn được Google đánh giá cao khi tìm kiếm, vì công cụ này ưu tiên website thân thiện với mọi đối tượng.
Tương tác vi mô và hiệu ứng động làm trang sống động
Micro-interactions là hiệu ứng hoạt ảnh nhỏ phản hồi từng thao tác của người dùng, ví dụ nút đổi màu khi di chuột. Tương tác vi mô là phản hồi cụ thể cho từng hành động: người dùng nhấp một nút, kéo một thanh trượt hay làm mới trang thì trang web có một đáp lại nào đó, chẳng hạn tiếng beep khi làm mới Twitter. Nghe nhỏ bé, nhưng những phản hồi này có ba việc đáng giá: cung cấp phản hồi cho thao tác, hướng dẫn người dùng cách làm tiếp, và tạo ấn tượng về thương hiệu.
Thiết kế tương tác vi mô dùng hoạt ảnh tinh tế khi người dùng di chuột, nhấp hay cuộn trang. Một nút bấm có trạng thái rõ ràng, một biểu tượng đu đưa nhẹ khi được chọn, đều khiến người dùng tin rằng trang đang lắng nghe mình. Hiệu ứng nền động tạo bằng JavaScript, HTML5 hoặc CSS3 có thể tạo ấn tượng mà không làm chậm tốc độ tải trang, miễn là được viết gọn. Nhiều trang còn chèn hình ảnh động vào vị trí gần nút CTA để dẫn mắt người dùng về hành động chính, hoặc dùng để dẫn người dùng sang trang khác.
Một mẹo phổ biến khác là tách thanh menu điều hướng khỏi trang khi cuộn, rồi đóng băng nó ở đầu trang. Người dùng nhờ vậy luôn thấy menu dù đang ở bất kỳ đoạn nào, và nút CTA cũng nâng cao hiệu quả vì hành động mua hay đăng ký luôn trong tầm mắt.
Với hiệu ứng cuộn, cần phân biệt hai kiểu. Cuộn động là kiểu cuộn mà tốc độ của nội dung khác tốc độ cuộn của nền trang, tạo cảm giác không gian ba chiều. Tuy nhiên, cuộn parallax nếu làm không tối ưu có thể gây quá tải tài nguyên, khiến trang chậm trên di động hoặc mạng yếu. Khi dùng, nên chọn ảnh và video đã nén, áp dụng lazy loading và viết mã nhẹ để giảm độ trễ.
Xu hướng mới hơn là cuộn thông minh: trang chỉ tải nội dung liên quan đến phần màn hình đang xem, thay vì cuộn vô hạn tải cả trang dài. Kiểu cuộn này vừa nhẹ máy vừa giữ người dùng tập trung vào phần họ đang đọc.
3D, AR/VR và kể chuyện theo thao tác cuộn
Nội dung 3D tạo cảm giác chiều sâu, khiến website tương tác hiệu quả hơn và tăng tính cạnh tranh. Thiết kế đa chiều dùng các yếu tố như hiệu ứng xoay, bóng đổ, chuyển động để giao diện sống động thay vì phẳng lì. Từ năm 2021, giới thiết kế đã dự đoán các website 3D sẽ nhập vai hơn, phá vỡ ranh giới giữa không gian kỹ thuật số và thực tế; đến nay hướng đi đó ngày càng rõ qua các công cụ trình duyệt.
Ở mức gần người mua hơn là thực tế tăng cường. AR cho phép người dùng thử đồ trang sức hoặc quần áo trực tiếp qua camera smartphone, tức là ướm thử ảo trước khi mua. Web AR cho phép dùng thử sản phẩm ngay trong không gian thực của khách, giảm rào cản mua sắm online vì người mua bớt lo sản phẩm không vừa hay không giống ảnh. Một ví dụ khác được nhắc nhiều là tham quan showroom xe 360 độ ngay tại nhà. VR đi xa hơn nữa, giúp khách hàng khám phá sản phẩm chi tiết và đưa ra quyết định mua sắm thông minh; còn metaverse mở ra các trải nghiệm tương tác 3D như buổi hòa nhạc ảo hay cuộc họp trực tuyến. Đây vẫn là hướng đang phát triển, chưa phổ biến ở mọi doanh nghiệp.
Ngược lại với công nghệ nặng nề, scrollytelling là kỹ thuật kể chuyện qua thao tác cuộn, nội dung hé lộ dần theo từng lần cuộn trang. Thiết kế website theo kiểu storytelling thu hút người dùng và tăng khả năng chuyển đổi thành doanh số, vì câu chuyện hấp dẫn giữ chân người dùng, tăng lưu lượng và tỉ lệ chuyển đổi. Nhưng cách kể này chỉ hiệu quả khi nội dung đúng trọng tâm: ưu tiên tương tác với sản phẩm hơn là kể lịch sử công ty. Greenberg, một người làm trong ngành, cho rằng nên kể chuyện công ty với mục đích rõ ràng, giao diện đơn giản, khách nào quan tâm sẽ tự đọc.1 Còn Shaw khuyên đặt phần giới thiệu ngắn gọn về doanh nghiệp ở đầu trang chủ để khách biết ngay mình đang ở đâu khi mở website.
Điều đáng nhớ là kể chuyện không đồng nghĩa với kể nhiều. Chỉ nên đăng nội dung xuất sắc, đa dạng hình thức qua blog, mạng xã hội, hình ảnh, video; và tránh những trang thuần giới thiệu doanh nghiệp hay mang nặng tính kêu gọi mua hàng, vì người đọc né chúng như né quảng cáo giữa video.
AI, chatbot và giao diện giọng nói
Chatbot AI tích hợp trên website hiểu và đáp ứng nhu cầu người dùng, đồng thời tiết kiệm chi phí cho doanh nghiệp. Thế hệ chatbot mới có khả năng học hỏi và tự cải tiến, giúp doanh nghiệp bớt chi phí nhân sự. Về phía khách, AI hỗ trợ 24/7 qua chatbot, phản hồi tức thì và thu thập dữ liệu về nhu cầu, sở thích của khách hàng; những thông tin này sau đó giúp doanh nghiệp tự động hóa quy trình và chăm sóc đúng người hơn. Với cửa hàng nhỏ, một chatbot trả lời được câu hỏi về giờ mở cửa hay tình trạng đơn hàng ngoài đêm đã giải quyết phần lớn tin nhắn lặp lại.
Bên cạnh chữ, giọng nói đang trở thành một lối vào website. Công nghệ nhận dạng giọng nói của Google đã đạt độ chính xác cao ở khu vực nói tiếng Anh, và các trợ lý ảo như Alexa, Cortana, Siri hay Google Assistant nhận dạng được cả chữ số lẫn lệnh phức tạp qua lời nói. Phần lớn người dùng lệnh thoại là thanh thiếu niên, và tỷ lệ tìm kiếm bằng giọng nói tăng nhanh trong vài năm gần đây nhờ các trợ lý ảo này.
VUI là giao diện người dùng bằng giọng nói, cho phép điều hướng website mà không cần chạm hay gõ. Nói chuyện với trang web thay vì gõ phím, người không quen bàn phím cũng dùng được, tay rảnh để làm việc khác, và người khuyết tật cũng thao tác trơn tru hơn. Tương tác bằng giọng nói nói chung tăng khả năng tiếp cận cho nhóm này. Thế hệ VUI mới còn dùng AI và phản hồi sinh trắc học để thích ứng với trạng thái cảm xúc của người dùng theo thời gian thực, dù đây vẫn là hướng đang thử nghiệm.
AI không dừng ở chatbot. Adaptive AI Layouts là bố cục trang web tự động điều chỉnh theo hành vi và phản hồi của người dùng: người hay xem bảng giá sẽ thấy bảng giá nổi lên, người hay đọc bài viết sẽ thấy bài viết ưu tiên. Ngoài ra, thiết kế web cần tích hợp tốt với thiết bị đeo thông minh như đồng hồ và kính thực tế ảo, vì người dùng ngày càng di chuyển giữa nhiều thiết bị trong một phiên truy cập duy nhất.
Đọc thêm: Tư duy thiết kế là gì? Quy trình 5 bước áp dụng ngay
Chọn xu hướng nào cho website của bạn
Câu hỏi đó càng khó trả lời khi người dùng không đứng yên ở một thiết bị. Một website bán đồ gia dụng và một website giới thiệu phòng khám không thể cùng theo một phong cách, dù cả hai đều đẹp. Chọn được xu hướng phù hợp với đối tượng, mục tiêu và túi tiền của mình mới là điều quyết định trang web sống được lâu, thay vì chạy theo cái gì nổi trên mạng.
Bài viết này đi qua quy trình chọn xu hướng, các yếu tố kỹ thuật quyết định khách ở lại hay rời đi, cùng những lỗi khiến người dùng khó chịu nhất. Mọi việc đều có thể kiểm tra bằng số liệu, không cần đoán cảm tính.
Bốn bước chọn xu hướng theo đối tượng, mục tiêu, ngân sách và thương hiệu
Bước đầu tiên là hiểu rõ đối tượng mục tiêu và phân tích hành vi trực tuyến của họ. Khách mua đồ nội thất và khách tìm phòng khám có thói quen lướt web khác nhau, nên cùng một phong cách giao diện không thể phục vụ cả hai cùng lúc. Thiết kế dựa trên dữ liệu giúp quyết định chắc tay hơn: bản đồ nhiệt cho thấy khách nhấp vào đâu, thử nghiệm A/B so sánh hai phiên bản, còn phân tích hành vi cho thấy họ đi lại trên trang thế nào.
Bước thứ hai là xác định mục tiêu của website: bán hàng, xây dựng thương hiệu hay cung cấp thông tin và dịch vụ. Mỗi mục tiêu kéo theo một hướng thiết kế khác nhau. Trang thương mại điện tử cần trở thành nhân viên bán hàng hoạt động suốt ngày đêm, nghĩa là mọi tính năng không phục vụ trải nghiệm người dùng đều nên bỏ đi. Trang giới thiệu thương hiệu thì dồn sức cho hình ảnh, câu chuyện và cảm nhận về chất lượng.
Bước thứ ba là xem xét ngân sách. Các xu hướng như thực tế tăng cường, thực tế ảo, hình ảnh do trí tuệ nhân tạo tạo ra hay video nền đòi hỏi đầu tư cao, không phải doanh nghiệp nào cũng cần chi cho chúng ngay. Đổi lại, khoảng trắng, màu sắc hợp lý hay chữ đọc dễ là những cải tiến tốn ít mà hiệu quả thấy ngay.
Cuối cùng, xu hướng phải khớp với phong cách thương hiệu. Thương hiệu hướng tới sự sáng tạo có thể mạnh dạn với màu sắc và bố cục phá cách; thương hiệu cao cấp nên giữ khoảng trắng rộng và hình ảnh tinh tế; thương hiệu nhấn mạnh tính bền vững hợp với tông màu đất, hình ảnh thật. Trước khi bắt tay vào làm, nên lên ý tưởng chi tiết cho từng trang: mục đích, nội dung, tính năng, hình ảnh và banner cần gì. Chuẩn bị kỹ ở giai đoạn này giúp tránh sửa đi sửa lại sau khi trang đã chạy. Với những ai muốn đi xa hơn, việc đánh giá cơ sở hạ tầng, đào tạo nhân sự và xây dựng lộ trình chuyển đổi số nên được tính từ đầu, thay vì nâng cấp dàn trải khi trang đã lỗi thời.
Nút CTA quyết định chuyển đổi
CTA là nút hoặc lời mời kêu gọi hành động, thuyết phục khách truy cập nhấp chuột để mua hàng, đăng ký hay đặt chỗ, phục vụ trực tiếp mục tiêu kinh doanh. Đây là chi tiết nhỏ nhưng quyết định tỷ lệ chuyển đổi nhiều hơn cả hiệu ứng bắt mắt.
Cách viết một nút tốt bắt đầu từ việc xác định rõ mục tiêu và hiểu khách muốn gì. Câu chữ cần ngắn, rõ, dùng ngôn ngữ định hướng hành động như đặt hàng, nhận báo giá, đặt lịch khám; dẫn đầu bằng lợi ích hoặc ưu đãi khi có thể. Sau khi nút đã chạy, cần theo dõi số liệu phân tích, kiểm tra các phiên bản khác nhau và cải tiến dần. Chẳng hạn, đổi một cụm từ trên nút rồi so sánh tỷ lệ nhấp giữa hai phiên bản là việc làm được ngay trong tuần đầu.
Vị trí đặt nút cũng có nguyên tắc riêng. Người đọc có xu hướng chú ý nhiều nhất vào góc trên bên trái của trang web, nên văn bản chính hoặc nút hành động đặt bên trái tiêu đề, còn hình ảnh ấn tượng để bên phải. Màu sắc của nút cần tương phản với nền xung quanh để nổi bật, nhưng tương phản ở đây nghĩa là khác biệt hợp lý, không phải màu chói lóa.
Có điều, nổi bật quá mức lại phản tác dụng. Nút CTA chói quá hoặc nhấp nháy liên tục khiến người truy cập khó chịu, còn cửa sổ bật lên xuất hiện ngay khi vừa vào trang thì nhiều người đã quen bấm đóng hoặc cài chặn luôn. Một cửa sổ bật lên dùng đúng lúc, đúng lý do vẫn có giá trị; lạm dụng nó chỉ khiến khách rời đi và không quay lại.
Thiết kế chuẩn SEO và tối ưu tốc độ
Thiết kế website chuẩn SEO là cách thiết kế và lập trình để trang đáp ứng các tiêu chí Google dùng khi xếp hạng trên công cụ tìm kiếm. Trang đạt chuẩn giúp thứ hạng duy trì lâu dài và ổn định, hạn chế trồi sụt từ khóa, giảm sức ép cạnh tranh. Trải nghiệm tốt hơn cho khách cũng từ đó mà đến, kéo theo tỷ lệ mua hàng và lượng khách tiềm năng tăng lên. Lợi ích ít người biết là điểm chất lượng quảng cáo tăng, giúp tiết kiệm chi phí chạy quảng cáo trên nền tảng của Google.
Về mặt kỹ thuật, hai nhóm việc cần làm ngay từ khi dựng trang. Nhóm thứ nhất là tối ưu các thẻ meta: thẻ Title và Description là hai thẻ quan trọng nhất, kế đến là thẻ Keywords, thẻ Tag và thẻ Alt cho hình ảnh. Nhóm thứ hai là cấu trúc: nội dung nên được tải trực tiếp trong mã HTML thay vì qua JavaScript, iframes hay AJAX; trang cần có Sitemap và file robots.txt để Googlebot thâm nhập và thu thập thông tin nhanh chóng; nên tạo trang 404 riêng cho các địa chỉ không tìm thấy. Về nội dung, bài mỏng, ngắn, thiếu chiều sâu rất khó cạnh tranh trên Google, còn nhồi từ khóa quá mức thì Google nhận diện và xử lý rất mạnh, nên viết cho người đọc trước, máy tìm kiếm sau.
Tốc độ tải trang nên dưới 3 giây, và bộ chỉ số Core Web Vitals của Google là thước đo cần đạt. Bộ chỉ số này gồm ba số: LCP đo thời gian hiển thị nội dung lớn nhất, tốt khi dưới 2,5 giây; CLS đo độ ổn định bố cục, tối ưu khi dưới 0,1; INP đo độ phản hồi khi tương tác, tốt khi dưới 200 mili giây. Để cải thiện các số trên, việc cần làm nằm ở hosting, nén hình ảnh, gọn mã nguồn và bật cache. Trang chậm ảnh hưởng lớn đến cả thứ hạng tìm kiếm lẫn trải nghiệm, còn trang nhanh, dễ đọc trên điện thoại giúp giảm tỷ lệ rời trang và kéo dài thời gian xem nội dung.
Google hiện ưu tiên đánh giá phiên bản di động trước bản desktop, nên mọi tối ưu cần kiểm tra trên điện thoại trước tiên. Về công nghệ nền, nên chọn các ngôn ngữ và khung lập trình mới như PHP, MySQL, HTML5, CSS3, Bootstrap; đồng thời chú ý độ bảo mật, khả năng tích hợp tính năng sau này và hệ thống quản trị thân thiện, được nâng cấp thường xuyên. Bên cạnh đó, trang cần tích hợp công cụ thống kê như Google Analytics và Google Webmasters để đo lường hiệu quả, kết nối các mạng xã hội phổ biến cùng nút chia sẻ. Cập nhật nhất quán tên thương hiệu, địa chỉ, số điện thoại trên mọi hồ sơ trực tuyến cũng giúp khách hàng ở cùng khu vực tìm thấy trang dễ hơn. Việc tối ưu kỹ thuật còn gồm HTTPS, dữ liệu Schema và liên kết nội bộ giữa các trang.
Điều chưa rõ và lỗi cần tránh
Không phải xu hướng nào cũng nên áp dụng ngay.1 Lạm dụng công nghệ mới mà không xem xét nhu cầu thực tế sẽ gây khó chịu cho người dùng, còn thiết kế thiếu tính đồng nhất khiến khách bối rối khi nhận diện nội dung trên các trang. Một lỗi hay gặp là nhầm lẫn thiết kế phẳng với thiết kế tối thiểu: lược bỏ quá tay sẽ mất luôn những dấu hiệu trực quan cần thiết, như đường viền cho thấy đó là nút bấm, khiến người dùng không biết chạm vào đâu. Dấu hiệu trực quan vẫn phải giữ để dẫn người dùng tới mục tiêu của họ trên trang.
Một số công nghệ còn ở giai đoạn sớm, nên cân nhắc kỹ trước khi theo. Web3 với ví tiền điện tử, hợp đồng thông minh tự động hóa giao dịch, ứng dụng phi tập trung hay sàn giao dịch NFT cho phép tương tác không cần bên trung gian và tiếp cận thị trường toàn cầu, tuy nhiên ở Việt Nam đây vẫn là hướng đi mới, chưa phổ biến với khách hàng thông thường. Tương tự, chiến lược bảo mật không tin tưởng mặc định yêu cầu mọi người dùng và thiết bị xác thực trước khi truy cập dữ liệu, còn xác thực qua blockchain giới hạn quyền truy cập cho đúng người. Thiết kế đặt quyền riêng tư lên hàng đầu đang trở thành yêu cầu tất yếu khi quy định bảo vệ dữ liệu ngày càng nghiêm ngặt. Xác thực sinh trắc học bằng vân tay hay nhận diện khuôn mặt nhanh và an toàn hơn cách truyền thống, nhưng cần hạ tầng đi kèm.
Còn một hướng tiếp cận thực tế hơn cho đa số doanh nghiệp nhỏ: PWA là công nghệ kết hợp website và ứng dụng di động, cho phép truy cập cả khi không có mạng và nhận thông báo đẩy. Trang web hoạt động như một ứng dụng mà khách không cần tải về từ cửa hàng ứng dụng, phù hợp với những chỗ chưa đủ nguồn lực để xây ứng dụng riêng. Chọn công nghệ theo đúng giai đoạn của mình, kiểm tra bằng số liệu sau mỗi thay đổi, là cách để trang web vừa hiện đại vừa dùng được thật sự.
Bài viết thuộc Góc đọc Xuân của Chúc Mừng Năm Mới.