Sitemap, wireframe và bản thiết kế giao diện là ba sản phẩm được tạo ra ở những giai đoạn khác nhau của dự án website. Sitemap xác định hệ thống trang, wireframe sắp xếp nội dung trên từng mẫu trang, còn bản thiết kế giao diện thể hiện hình thức hiển thị hoàn chỉnh.

Hiểu đúng vai trò của từng tài liệu giúp doanh nghiệp kiểm duyệt đúng nội dung ở từng giai đoạn. Nếu cấu trúc website chưa được thống nhất nhưng đã chuyển sang thiết kế giao diện, một thay đổi về danh mục hoặc luồng sử dụng có thể khiến nhiều màn hình phải thực hiện lại.

1. Sitemap xác định hệ thống trang của website

Sitemap trong giai đoạn lập kế hoạch là sơ đồ thể hiện các trang và mối quan hệ giữa chúng. Tài liệu này giúp trả lời website có những nhóm nội dung nào, trang nào thuộc cấp danh mục và người dùng có thể đi từ trang này sang trang khác theo cấu trúc nào.

Một website giới thiệu doanh nghiệp có thể gồm trang chủ, giới thiệu, dịch vụ, dự án, tin tức và liên hệ. Bên dưới trang dịch vụ có thể là các trang chi tiết cho từng nhóm công việc. Website bán hàng thường có thêm danh mục sản phẩm, trang chi tiết, giỏ hàng, thanh toán, tài khoản và hệ thống chính sách.

Khi kiểm duyệt sitemap, doanh nghiệp cần xem tên nhóm nội dung có phù hợp với cách khách hàng tìm kiếm hay không. Cấu trúc cũng phải đủ linh hoạt để bổ sung dịch vụ, sản phẩm hoặc bài viết sau này mà không cần thay đổi toàn bộ hệ thống.

Sitemap dùng để lập kế hoạch không nên nhầm với sitemap XML. Tệp sitemap XML cung cấp danh sách URL để hỗ trợ công cụ tìm kiếm phát hiện nội dung trên website. Trong khi đó, sơ đồ sitemap của dự án phục vụ việc tổ chức nội dung, xác định phạm vi trang và lập kế hoạch điều hướng.

Sitemap chưa cho biết chi tiết vị trí của tiêu đề, hình ảnh, biểu mẫu hoặc nút liên hệ. Một nhánh trong sitemap có thể đại diện cho hàng trăm trang sử dụng cùng một mẫu. Vì vậy, số trang nội dung không đồng nghĩa với số giao diện cần thiết kế.

2. Wireframe xác định bố cục và thứ tự thông tin

Sau khi hệ thống trang được thống nhất, đội ngũ thực hiện xây dựng wireframe cho các mẫu trang quan trọng. Wireframe là bản bố trí sơ bộ, tập trung vào vị trí và thứ tự của các thành phần thay vì màu sắc hoặc hình ảnh hoàn chỉnh.

Một wireframe trang dịch vụ có thể thể hiện tiêu đề, phần giới thiệu, phạm vi công việc, quy trình, dự án liên quan và biểu mẫu tư vấn. Ở giai đoạn này, doanh nghiệp cần đánh giá nội dung nào nên xuất hiện trước, thông tin nào cần nhấn mạnh và hành động nào người dùng cần thực hiện.

Wireframe còn giúp xác định luồng thao tác. Với website đặt lịch, các màn hình có thể bao gồm chọn dịch vụ, chọn thời gian, nhập thông tin và nhận xác nhận. Với website bán hàng, luồng thường đi từ danh mục đến trang sản phẩm, giỏ hàng và thanh toán. Nếu thiếu một bước hoặc yêu cầu người dùng nhập quá nhiều dữ liệu, vấn đề nên được xử lý ngay ở giai đoạn wireframe.

Một số nội dung cần kiểm tra khi duyệt wireframe gồm:

• Thứ tự và mức độ ưu tiên của các khối thông tin;
• Vị trí menu, nút hành động, biểu mẫu và nội dung hỗ trợ;
• Cách di chuyển giữa các bước trong một tác vụ;
• Bố cục trên máy tính và điện thoại;
• Các trạng thái khi chưa có dữ liệu hoặc xảy ra lỗi.

Wireframe thường sử dụng khối màu đơn giản và nội dung minh họa. Vì vậy, không nên đánh giá tài liệu này như giao diện cuối cùng. Phản hồi phù hợp ở giai đoạn này cần tập trung vào cấu trúc trang, nội dung và khả năng hoàn thành nhiệm vụ.

3. Bản thiết kế giao diện hoàn thiện hình thức hiển thị

Bản thiết kế giao diện được phát triển sau khi wireframe đã được duyệt. Tài liệu này áp dụng màu sắc, kiểu chữ, hình ảnh, biểu tượng, khoảng cách và các thành phần nhận diện thương hiệu. Đây là phiên bản gần nhất với hình thức website sau khi lập trình.

Ngoài trang ở trạng thái thông thường, bản thiết kế cần thể hiện những trạng thái quan trọng của thành phần tương tác. Nút bấm có thể có trạng thái mặc định, được chọn, không khả dụng hoặc đang xử lý. Biểu mẫu cần thể hiện cách hiển thị khi nhập sai, thiếu dữ liệu hoặc gửi thành công. Nếu chỉ thiết kế một màn hình tĩnh, lập trình viên có thể phải tự quyết định các trạng thái còn thiếu.

Khi duyệt giao diện, doanh nghiệp nên kiểm tra khả năng đọc, mức độ nổi bật của nội dung chính và tính nhất quán giữa các mẫu trang. Màu sắc cần có vai trò cụ thể, cỡ chữ phải phù hợp trên từng thiết bị và vùng bấm cần đủ thuận tiện cho thao tác trên điện thoại.

Bản thiết kế giao diện vẫn chưa phải là website đã hoạt động. Các hiệu ứng, thao tác, tốc độ tải và cách hệ thống xử lý dữ liệu chỉ có thể kiểm tra đầy đủ sau khi lập trình. Vì vậy, phạm vi bàn giao thiết kế cần xác định số mẫu trang, kích thước màn hình và trạng thái cần thể hiện.

Trong một dự án thiết kế web, trình tự phù hợp là thống nhất sitemap, duyệt wireframe rồi hoàn thiện giao diện. Mỗi tài liệu giải quyết một lớp vấn đề khác nhau. Kiểm duyệt đúng trọng tâm ở từng bước giúp doanh nghiệp giảm thay đổi về sau và tạo đầu vào đầy đủ cho đội lập trình.