Thiết kế Web rất thú vị. Một việc mà phải làm rất nhiều thứ, từ cách thể hiện hình ảnh (website sẽ trông như thế nào) đến thiết kế chức năng cho sản phẩm (website sẽ vận hành như thế nào). Để đơn giản hóa công việc, chúng tôi đã chuẩn bị cẩm nang hướng dẫn này.

Trong này, chúng tôi sẽ tập trung vào những nguyên lý chính, những giải pháp đã được dùng để xử lý các vấn đề trong công việc, và những cách tiếp cận từng mục tiêu sẽ giúp bạn tạo ra một trải nghiệm người dùng tuyệt vời cho chính website của mình. Chúng ta sẽ bắt đầu với những cái tổng thể, như hành vi người dùng (cách xác định “khung sườn” của website) và tiếp đó sẽ đến từng trang cụ thể (là những nội dung sẽ được xem xét trong quá trình thiết kế trang web). Chúng tôi cũng sẽ sơ lược qua những lĩnh vực thiết yếu khác trong thiết kế, như là việc xem xét chạy trên nền tảng điện thoại và các cách kiểm tra sản phẩm.

THIẾT KẾ HÀNH VI NGƯỜI DÙNG

Kiến tạo cấu trúc thông tin (Information architecture-IA)

Mọi người thường sử dụng thuật ngữ “information architecture” (IA) để ngụ ý là những thanh menu trên website. Nhưng điều đó không đúng. Những thanh menu là 1 phần trong IA, và chúng chỉ là một lĩnh vực trong đó.

IA là tổ chức thông tin theo hướng rõ ràng và có logic. Hầu hết các tổ chức đều theo đuổi một mục đích rõ ràng: là giúp người dùng định hướng được những thông tin phức tạp. Một IA tốt là phải tạo ra tính phân cấp, có thể căn chỉnh chính – phụ theo những mong đợi từ người dùng. Nhưng để có được sự phân cấp tốt và tính định hướng theo trực giác thì không phải ngẫu nhiên mà có. Tất cả chúng đều là kết quả từ việc nghiên cứu người dùng và các kỳ kiểm tra sản phẩm không mệt mỏi.

Có nhiều cách để nghiên cứu thông tin, nhu cầu người dùng. Thường thì, một kiến trúc sư về IA sẽ làm những cuộc phỏng vấn người dùng hay sắp xếp những tấm thẻ, là nơi mà kiến trúc sư sẽ lắng nghe những mong đợi từ người dùng hay chính họ thấy được những người dùng tương lai, để phân loại thông tin theo từng nhóm riêng biệt. Các kiến trúc sư IA phải biết kết quả từ các cuộc kiểm tra tính hữu dụng của ứng dụng để thấy rằng người dùng đã có đủ định hướng hay chưa.

Một cấu trúc menu sẽ được xây dựng dựa trên kết quả của những cuộc phỏng vấn người dùng, và việc sắp xếp các tấm thẻ thông tin được dùng để kiểm tra, xem cấu trúc ấy có phải là hình mẫu mà người dùng mong muốn hay không. Những nhà nghiên cứu UX sẽ sử dụng công cụ được gọi là “tree testing” để chứng minh kết cấu ấy có vận hành được hay không. Việc này sẽ được thực thi trước khi thiết kế giao diện thật.

Điều hướng tổng thể

– Việc điều hướng là phần quyết định tính hữu dụng của sản phẩm. Website của bạn sẽ chẳng là gì nếu người dùng không thể tìm thấy hướng đi của họ trong đó. Đó là lý do vì sao việc điều hướng trên website của bạn phải thỏa 1 vài nguyên lý sau:

– Tính đơn giản: Việc điều hướng phải được thiết kế theo cách dẫn dắt người dùng đến nơi họ muốn chỉ với vài click chuột (càng ít càng tốt)

– Tính rõ ràng: Không thể có bất kỳ sự phỏng đoán nào cho mỗi việc điều hướng khi người dùng vào website của bạn. Tất cả phải thể hiện ra và làm cho người dùng hiểu được là mình đang ở đâu trong ứng dụng của bạn.

– Tính đồng nhất: Hệ thống điều hướng phải đồng bộ với nhau cho tất cả các trang trên website.

Hãy xem xét 1 vài điều sau đây khi thiết kế tính điều hướng cho sản phẩm:

– Chọn kiểu điều hướng dựa trên nhu cầu thật của người dùng. Việc điều hướng phải được xây dựng từ những nhu cầu của số đông người dùng website. Nhóm khách hàng mục tiêu mong đợi một loại tương tác đặc biệt với website của bạn, vì thế bạn phải đáp ứng những kỳ vọng đó từ người dùng. Ví dụ, tránh việc điều hướng dùng menu dạng hamburger (ba đường kẻ song song) nếu phần lớn người dùng không quen với ý nghĩa khi dùng biểu tượng đó.

– Phải có ưu tiên cho những lựa chọn điều hướng. Cách đơn giản để ưu tiên những lựa chọn điều hướng là ra lệnh những cấp bậc ưu tiên khác nhau (Cao, trung bình, thấp) cho người dùng phổ thông, khi đó những yếu tố nổi bật trong layout được xem như là phương thức cũng như là đích đến cho những định hướng có cấp bậc ưu tiên cao và thường xuyên sử dụng.

– Phải làm cho những điều hướng hiển thị ra bên ngoài. Như Jakob Nielsen nói, việc nhận ra 1 thứ gì đó sẽ dễ dàng hơn là việc ghi nhớ chúng. Hãy tối thiểu bộ nhớ của người dùng bằng cách hiển thị ra ngoài tất cả các điều hướng quan trọng. Những điều hướng quan trọng nhất phải sẵn sàng mọi lúc khi người dùng cần, chứ không chỉ là khi chúng ta dự đoán họ sẽ dùng đến.

– Truyền tải thông tin ngay vị trí hiện tại. “Tôi đang ở đâu?” là câu hỏi cơ bản cho những người dùng nào cần câu trả lời để cho việc điều hướng hiệu quả. Thất bại trong việc định vị vị trí là vấn đề phổ biến trên mọi website. Nên đừng bỏ qua việc này nhé.

Những liên kết và những lựa chọn điều hướng

Những đường link cũng như những lựa chọn điều hướng là những yếu tố quan trọng trong quá trình điều hướng và có hiệu quả trực tiếp lên hành vi của người dùng. Hãy theo dõi một vài nguyên tắc sau với những yếu tố tương tác:

– Cách phân biệt giữa liên kết nội bộ và những liên kết ngoài. Người dùng mong đợi có sự khác nhau giữa hành vi khi dùng liên kết nội bộ với liên kết ngoài. Tất cả những liên kết nội bộ phải được mở trong cùng một thẻ (điều này, bạn sẽ cho phép người dùng sử dụng nút điều hướng “Back”). Nếu bạn quyết định mở những liên kết ngoài ở cửa sổ trình duyệt mới, thì bạn phải đưa lời nhắn trước khi tự động mở một của sổ mới hay thẻ mới. Điều này cần đính một đoạn text vào trong link, ví dụ “(nội dung được mở trong cửa sổ mới).”

– Thay đổi màu sắc của những liên kết đã sử dụng. Khi những liên kết đã dùng không thay đổi màu sắc, người dùng có thể vô tình vô lại những trang đã xem qua.

Biết được trang nào họ đã xem sẽ tránh việc người dùng vô tình xem lại những trang đã qua.

– Cần kiểm tra nhiều lần tất cả các liên kết trang. Người dùng rất dễ thất vọng khi nhấn vào liên kết và nhận được thông tin 404 error page not found (trang web không tồn tại). Khi người dùng đang tìm kiếm thông tin, họ rất mong chờ mỗi liên kết sẽ dẫn họ đến nơi mà họ muốn, chứ không phải là 404 error page hay là 1 trang khác mà họ không mong muốn.

Nút điều hướng “Back” trên trình duyệt web

Nút “Back” có lẽ là phần UI phổ biến thứ 2 được kiểm soát trong trình duyệt (sau khu vực nhập URL). Hãy đảm bảo rằng nút “Back” đáp ứng như mong đợi của người dùng. Khi người dùng theo dõi 1 liên kết trên trang bất kỳ và sau đó nhấn vào nút “Back”, thì họ mong muốn sẽ trở lại cùng một nơi trên trang nguồn. Tránh trường hợp khi nhấn “Back” đưa họ lên đầu trang của trang đầu, thay vì đó là nơi mà họ muốn rời khỏi. Việc mất phương hướng này sẽ khiến người dùng bỏ qua những thông tin mà họ đã từng xem. Không có gì ngạc nhiên khi người dùng nhanh chóng quay lưng với chức năng “back-to-position” hoạt động không hiệu quả này.

Breadcrumbs

Breadcrumbs là tập hợp các liên kết có cùng ngữ cảnh, với chức năng là giúp người dùng biết mình đang ở vị trí nào, chuyên mục nào từ đó có thể di chuyển thuận lợi từ trang này sang trang khác trong 1 website.

Trong khi những yếu tố này không đòi hỏi nhiều sự giải thích, nhưng cũng cần đề cập đến một vài điều như sau:

– Đừng sử dụng breadcrumbs để thay thế cho việc điều hướng chính của ứng dụng. Những yếu tố trong điều hướng chính sẽ dẫn dắt người dùng, còn breadcrumbs chỉ đóng vai trò là hỗ trợ người dùng. Nếu dựa vào breadcrumbs như là phương thức điều hướng chính, không phải là tính năng bổ trợ, thì việc thiết kế tính năng điều hướng của bạn xem như thất bại.

– Sử dụng những ký hiệu đầu mũi tên làm thành tố phân chia, chứ không phải dùng những ký hiệu gạch chéo. Việc phân chia mỗi cấp độ phải cực kỳ rõ ràng. Ký hiệu (>) hay ký hiệu chiều mũi tên hướng sang phải (→) được khuyên dùng, bởi vì những ký hiệu này người dùng luôn mặc định là chỉ phương hướng. Đường gạch chéo hướng tới (/) thì không nên dùng vì nó là thành tố phân chia cho website thương mại điện tử. Nếu bạn muốn dùng chúng, hãy chắc chắn rằng không có loại sản phẩm nào sử dụng ký hiệu gạch chéo mãi mãi: