Posted by Vào một ngày đẹp trời đi làm, sau khi đã bàn giao xong tất cả các file thiết kế cho dự án và chuẩn bị về nhà, bạn bỗng nhiên nhận được tin nhắn từ sếp về file design trang 404 Not Found:
Trang 404 Not Found vốn không bao giờ là trang chúng ta muốn hiển thị, nên thường cũng không được nghĩ đến và rất dễ bị bỏ qua. Tuy nhiên trang 404 cũng là một trang cần chăm chút thiết kế vì ảnh hưởng của nó đối với hành trình và trải nghiệm của người dùng!
404 Not Found, nghe thì quen nhưng chính xác là gì?
Dòng “404 Not Found” là dòng thông báo lỗi không tìm thấy trang được yêu cầu trên máy chủ. Lỗi này thường xuất hiện vì URL bị nhập sai hoặc URL dẫn tới trang đã bị gỡ bỏ.
Tại sao không nên dùng trang 404 Not Found mặc định với hai màu trắng đen quen thuộc? Có hai lý do cơ bản. Đầu tiên, 404 Not Found thường là nơi xảy ra hiện tượng user churn, nên việc tối ưu thiết kế trang 404 Not Found sẽ góp phần giảm thiểu user churn khi gặp trang này. Thứ hai, việc gặp lỗi là một trải nghiệm mang tính tiêu cực và có thể ảnh hưởng đến cảm nhận của người dùng về toàn bộ hình ảnh của sản phẩm (Peak-End Rule), nên việc cải thiện trang 404 Not Found sẽ khiến trải nghiệm giảm phần tiêu cực và cải thiện cảm nhận của người dùng về sản phẩm.
Tất nhiên, không ai muốn người dùng gặp phải trang 404 Not Found, và việc quan tâm tới thiết kế trang cũng nên đi kèm với việc thực hiện các biện pháp hạn chế sự xuất hiện của trang này.
Trong khuôn khổ bài viết hôm nay, hãy cùng Careerly phân tích một vài ví dụ đến từ website của các product công nghệ lớn để rút ra một vài định hướng thiết kế trang 404 Not Found sao cho thật thân thiện với người dùng.
Awwards
Amazon
flickr
Một số điểm đáng học hỏi từ những trang 404 Not Found trên:
1. Hướng dẫn lộ trình khác (với ý đồ cụ thể):
Bất cứ một trang web hay app nào cũng đều được thiết kế với một ý đồ. Với một trang thương mại điện tử, ý đồ thiết kế có thể là khuyến khích người dùng mua sắm trên web hoặc với một trang mạng xã hội, ý đồ thiết kế là để khuyến khích người dùng dành nhiều thời gian truy cập hơn. Trang 404 Not Found hoàn toàn có thể được thiết kế để thực hiện ý đồ của từng sản phẩm. Cụ thể là, trang 404 Not Found có thể đưa ra lộ trình gợi ý cho người truy cập (hiện giờ đang rất hoang mang!) hướng tới thực hiện hành động mong muốn trong trường hợp trang họ yêu cầu không thể được tìm thấy. Với một nền tảng thương mại điện tử, trang 404 Not Found có thể điều hướng người dùng chuyển sang danh mục sản phẩm để khuyến khích họ tiếp tục mua sắm thay vì rời trang. Với các product không chạy trên nền web và chỉ có landing page thì cách điều hướng thường thấy là dẫn về trang chủ, nơi thường chứa phần giới thiệu về sản phẩm.
Với Adobe, họ điều hướng người dùng sang các trang giới thiệu sản phẩm.
2. Đừng quên tầm quan trọng của microcopy
Cách tốt nhất khiến người dùng có thể an tâm hơn chính là việc hướng dẫn họ tìm thấy một lối thoát khỏi trang 404. Để làm được điều này, chúng ta cần thông báo cho người dùng những cách có thể giải quyết được vấn đề. Trên trang 404, bạn có thể sử dụng hình ảnh và văn bản để giải thích lỗi 404 là gì, hướng dẫn cách có thể thoát khỏi trang này, và đương nhiên, những nội dung này phải đơn giản, súc tích để người dùng có thể hiểu dễ dàng và chính xác.
Tại trang 404 của Note có giải thích tại sao 404 xảy ra, nguyên nhân vấn đề và có thêm một nút quay về trang chủ để giải quyết vấn đề.
3. Luôn duy trì tính thống nhất:
3.1. Tone and Manner của thiết kế và các yếu tố cấu tạo:
Lỗi diễn ra đã bất thình lình,nhưng nếu ngay cả thiết kế của trang web cũng không quen thuộc với người dùng thì sao? Đã hoang mang lại càng hoang mang hơn nữa. Vì vậy, chúng ta cần phải duy trì một thiết kế thống nhất theo hệ thống từ toàn trang web cho cả trang 404. Thông thường trang 404 chỉ có 1 thiết kế nhưng lại có thể hiển thị ở nhiều vị trí khác nhau trên lộ trình truy cập của user, vì chỉ cần có lỗi phát sinh là trang 404 lại được hiển thị chứ không phải được cố định ở một vị trí cụ thể. Vì thế, việc trang 404 có thiết kế hòa hợp với toàn bộ trang web/concept của sản phẩm lại càng quan trọng hơn nữa.
Trong trang 404 của mình, Lego sử dụng chính lego để thể hiện trang web bị lỗi. Hiện nay, nhiều startup cũng đầu tư vào việc branding với một mascot đặc trưng, tiêu biểu ở Việt Nam là MoMo, Tiki, Baemin,… Sử dụng mascot cũng là một phương thức đẻ đảm bảo trang lỗi 404 có cùng concept với toàn bộ thiết kế bởi lẽ mascot là yếu tố sẽ xuất hiện xuyên suốt trong thiết kế của trang web.
3.2 Ngôn ngữ:
Các ví dụ trên đều là sản phẩm nước ngoài, sử dụng tiếng Anh là ngôn ngữ chính nên vấn đề thống nhất ngôn ngữ không cần phải chú ý.
Tuy nhiên, đối với các sản phẩm sử dụng ngôn ngữ chính khác như tiếng Việt chẳng hạn, việc cập nhật màn hình báo lỗi sang ngôn ngữ tương ứng cũng là một việc cần làm để cải thiện trải nghiệm ở trang 404. Bạn có thể viết microcopy siêu đỉnh và thiết kế siêu hút cho trang 404 nhưng người dùng lại không hiểu rõ thì thật đáng tiếc.
Trong quá trình viết bài này thì Careerly cũng phát hiện ra có nhiều startup Việt lẫn nước ngoài mắc lỗi thiếu thống nhất về ngôn ngữ ở trang 404 cho phiên bản tiếng Việt. Thật ra chính Careerly cũng vừa update trang 404 này gần đây thôi nên là nhắc nhẹ cùng cải thiện trước khi bị sếp “ủa em” 🤫.
Tiki và VeXeRe là hai ví dụ sản phẩm nội địa làm tốt điều này.
Tiki:
VeXeRe:
4. Tiếp cận một cách hài hước: Giảm tối đa cảm giác bối rối và bực bội của người dùng.
Nếu chúng ta hướng dẫn cho người dùng bằng những văn bản khô khan, tất nhiên họ vẫn hiểu được vấn đề và hướng giải quyết. Tuy nhiên việc gặp lỗi là một ấn tượng không tốt, và rất có thể ảnh hưởng đến đánh giá của toàn bộ dịch vụ. Thông thường con người chúng ta sẽ nhớ lâu những chuyện không vui hoặc bực tức hơn là chuyện vui. Vậy nên khi đánh giá cảm nhận về một sản phẩm, những ký ức tiêu cực này ảnh hưởng đến họ nhiều hơn. Như vậy có thể thấy, việc làm giảm tối đa cảm giác bối rối và bực bội của người dùng là một trong những yếu tố bắt buộc trong trang 404.
Tiếp cận việc trình bày thông báo lỗi 404 từ một góc nhìn hài hước là một phương pháp để cỉa thiện trải nghiệm tiêu cực do lỗi 404 gây ra.
Chúng ta có thể thấy, Mailchimp thiết kế trang 404 một cách rất hài hước. Để miêu tả sống động việc không tìm thấy trang trang, Mailchimp đã vẽ hẳn một cái lỗ và con ngựa cúi đầu xuống lỗ tìm một cái gì đó, như là hành động tìm trang đã mất. Hình ảnh đơn giản nhưng ngộ nghĩnh này có thể khiến giải tỏa tâm trạng cho người dùng. Ngoài ra, phần microcopy cũng được viết với văn phong hài hước.
“We searched high and low but couldn’t find what you are looking for. Let’s find a better place for you to go.”
Tạm dịch: Chân trời góc bể nơi nào cũng đã tìm nhưng trang bạn yêu cầu vẫn không thấy đâu. Thôi thì ta tìm nơi khác tốt hơn cho nhau bạn nhé.
Tất nhiên việc xử lý trang 404 dưới góc độ hài hước cũng vẫn nên mang tính thống nhất với toàn bộ concept của trang web như đề cập ở mục 3. Toàn bộ Mailchimp được thiết kế với visual và microcopy mang tính hài hước. Nếu hình ảnh sản phẩm của bạn không hoàn toàn theo concept “hài hước” này thì trang 404 “mặn” vừa thôi nhé.
5. Liệu 404 có thực sự cần thiết? Loại bỏ sự xuất hiện của mã lỗi 404
Ở các ví dụ trên, không phải lúc nào trang lỗi 404 Not Found cũng xuất hiện mã lỗi 404. Cụ thể là ở trang 404 Not Found của Amazon, Adobe, Lego, Mailchimp, họ loại bỏ hoàn toàn sự xuất hiện của mã lỗi 404 và thay vào đó là nội dung mô tả chi tiết lỗi là vì không thể truy cập được trang người dùng yêu cầu truy cập.
Điều này cũng dễ hiểu, vì mặc dù 404 vô cùng quen thuộc với người dùng Internet và phần lớn hiểu là con số 404 thể hiện lỗi, nhưng cụ thể là lỗi gì thì không phải ai cũng biết nên thường thiết kế trang 404 đi kèm với phần microcopy giải thích lỗi gặp phải là không tìm thấy trang. Nói như vậy để thấy, sự xuất hiện của mã lỗi 404 không thực sự cần thiết. Thay vào đó, bạn cũng có thể hướng sự chú ý của người dùng với nội dung có ích hơn như gợi ý cách xử lý lỗi hoặc điều hướng về trang khác như gợi ý ở trên.
Lời kết
Tổng kết lại, sau đây là 5 gợi ý để bạn có thể cải thiện trang 404 Not Found từ Careerly. Ý tưởng bài viết có từ insight về vấn đề mà bạn đọc gặp phải với lỗi 404 trên blog của Careerly, hi vọng 5 tips này cũng có thể giúp ích cho bạn.
One comment