Wireframing 

• Là quá trình tạo ra bản phác thảo khung xương (blueprint) của giao diện người dùng (UI) để mô tả bố cục, vị trí các thành phần, và cách luồng thông tin được trình bày trên màn hình trước khi sản phẩm thực tế được phát triển.

• Là một trong những công cụ trực quan hóa yêu cầu mà BA thường sử dụng để truyền đạt ý tưởng giữa stakeholders, developer, designer, và tester, giúp tất cả các bên có cùng hiểu biết về cấu trúc sản phẩm.

Tầm quan trọng của Wireframing

Wireframing là một bước quan trọng trong quá trình phát triển sản phẩm vì nó giúp:

• Truyền đạt ý tưởng nhanh chóng: Business Analyst, nhà thiết kế và các bên liên quan có thể dễ dàng trao đổi và thống nhất về cấu trúc sản phẩm mà không mất nhiều thời gian.
• Tiết kiệm chi phí và thời gian: Việc thay đổi một wireframe đơn giản dễ hơn rất nhiều so với việc sửa đổi một thiết kế hoàn chỉnh.
• Tập trung vào chức năng: Buộc các bên liên quan phải tập trung vào luồng người dùng và cách hệ thống hoạt động, thay vì bị phân tâm bởi yếu tố thẩm mỹ.
• Cơ sở cho bước tiếp theo: Wireframe là nền tảng để tạo ra các bản thiết kế chi tiết hơn (mockup) và các mẫu thử có tính tương tác (prototype).

Mục đích của Wireframing trong Business Analyst

• Truyền đạt yêu cầu rõ ràng: Thay vì diễn giải bằng lời, Business Analyst dùng hình vẽ để mọi người “nhìn thấy” ngay ý tưởng.
• Xác định cấu trúc thông tin (Information Architecture): Cho biết các thành phần nào sẽ xuất hiện trên màn hình và vị trí của chúng.
• Xác định luồng tương tác cơ bản (User Flow)
• Tập trung vào chức năng, không bị phân tâm bởi màu sắc: Wireframe bỏ qua yếu tố mỹ thuật để tập trung vào nội dung và logic.
• Tiết kiệm thời gian và chi phí: Sửa bản phác nhanh hơn nhiều so với sửa thiết kế đã hoàn thiện hoặc code.

Các loại Wireframe

• Low-fidelity wireframe

• Đơn giản, nhanh chóng, chỉ có bố cục cơ bản.
• Thường vẽ trên giấy hoặc công cụ như Balsamiq.

• Mid-fidelity wireframe: Có chi tiết hơn, thể hiện font chữ, kích thước khối, sắp xếp chính xác.

• High-fidelity wireframe: Rất giống bản thiết kế thật nhưng vẫn ưu tiên bố cục và chức năng, chưa phải prototype.

Các thành phần chính của Wireframe

Một wireframe điển hình tập trung vào ba yếu tố cốt lõi:

• Bố cục và cấu trúc: Chỉ ra vị trí của các thành phần chính như:

• Thanh điều hướng (navigation bar) và menu.
• Tiêu đề và các khối nội dung.
• Khu vực tìm kiếm, biểu mẫu (form) hoặc các trường nhập liệu.
• Chân trang (footer).

• Thứ tự ưu tiên thông tin: Sắp xếp các thành phần trên màn hình theo mức độ quan trọng. Điều này giúp đảm bảo người dùng có thể dễ dàng tìm thấy thông tin quan trọng nhất.

• Chức năng: Thể hiện rõ các yếu tố tương tác, ví dụ như:

• Nút bấm (buttons) để thực hiện hành động.
• Các liên kết (links) để chuyển hướng.
• Ô checkbox, radio button.

Ưu điểm của Wireframe

• Hiệu quả trong việc thiết kế: Wireframe giúp xác định cấu trúc và bố cục của sản phẩm một cách rõ ràng, giúp nhóm phát triển hiểu rõ hơn về yêu cầu của khách hàng.
• Tiết kiệm thời gian và chi phí: Với wireframe, nhóm phát triển có thể phát hiện và giải quyết các vấn đề thiết kế từ sớm, giúp tiết kiệm thời gian và chi phí cho dự án.
• Dễ dàng sửa đổi: Wireframe cho phép người dùng dễ dàng chỉnh sửa và cập nhật các yếu tố thiết kế một cách nhanh chóng.

Nhược điểm của Wireframe

• Thiếu chi tiết: Wireframe thường chỉ tập trung vào cấu trúc và bố cục chung của sản phẩm mà không hiển thị các chi tiết nhỏ. 
• Khó hiểu đối với người không chuyên: Người không chuyên về thiết kế có thể gặp khó khăn trong việc hiểu wireframe và đưa ra đánh giá chính xác về sản phẩm hoặc thiết kế. 
• Khả năng hiển thị tương tác còn hạn chế: Wireframe thường không thể hiển thị tương tác giữa các yếu tố trên sản phẩm, điều này có thể làm giảm hiệu quả của việc đánh giá sản phẩm trên trang web.

Prototyping

• Là quá trình tạo ra phiên bản mô phỏng (prototype) của sản phẩm hoặc hệ thống – có thể ở dạng tĩnh (hình ảnh, slide) hoặc tương tác (clickable), nhằm mô tả chi tiết cách sản phẩm hoạt động và trải nghiệm người dùng trước khi bắt đầu phát triển thật.
• Khác với wireframing chỉ tập trung vào bố cục và cấu trúc, prototyping thường thể hiện:

• Màu sắc, hình ảnh, font chữ gần giống bản thật.
• Các tương tác cơ bản (bấm nút, chuyển trang, hiển thị popup).
• Cảm giác sản phẩm khi sử dụng.

Mục đích của Prototyping trong Business Analyst

• Truyền đạt yêu cầu một cách sống động: Stakeholders không chỉ “thấy” mà còn “trải nghiệm” sản phẩm trước khi code.
• Xác nhận giải pháp: Kiểm tra xem luồng người dùng (user flow) có hợp lý không.
• Thu thập phản hồi sớm: Người dùng có thể góp ý về tính năng hoặc giao diện ngay từ đầu.
• Giảm rủi ro: Giúp phát hiện vấn đề về UX/UI trước khi phát triển, tiết kiệm chi phí sửa đổi.
• Hỗ trợ đội dev & QA: Developer hiểu rõ hành vi cần code, QA có cơ sở viết test case.

Các cấp độ của Prototype

Prototype được chia thành nhiều cấp độ chi tiết (fidelity) khác nhau, tùy thuộc vào mục tiêu và giai đoạn của dự án:

• Low-fidelity Prototype (Mẫu thử chi tiết thấp):

• Đặc điểm: Tương tự như wireframe nhưng có thêm khả năng tương tác. Thường được tạo từ các bản phác thảo trên giấy hoặc các công cụ đơn giản.
• Mục đích: Nhanh chóng kiểm thử luồng người dùng và ý tưởng ban đầu.
• Ưu điểm: Dễ dàng tạo và chỉnh sửa, tiết kiệm thời gian.

• High-fidelity Prototype (Mẫu thử chi tiết cao):

• Đặc điểm: Gần giống với sản phẩm cuối cùng. Bao gồm màu sắc, phông chữ, hình ảnh và các yếu tố giao diện (UI) khác. Có tính tương tác cao, mô phỏng chân thực trải nghiệm của người dùng.
• Mục đích: Thu thập phản hồi chi tiết về thiết kế, trải nghiệm người dùng (UX), và kiểm thử tính khả dụng (usability testing).
• Ưu điểm: Cung cấp cái nhìn chân thực về sản phẩm, giúp các bên liên quan đưa ra quyết định chính xác hơn.

Vai trò của Prototyping đối với Business Analyst

• Kiểm tra và xác thực yêu cầu: Business Analyst có thể dùng prototype để trình bày và xác nhận các yêu cầu phức tạp với khách hàng. Thay vì đọc một tài liệu dài, khách hàng có thể tương tác trực tiếp với mẫu thử để hiểu rõ hơn về chức năng và luồng công việc.
• Đánh giá trải nghiệm người dùng (UX): Prototype cho phép Business Analyst thực hiện các buổi kiểm thử tính khả dụng (usability testing) sớm. Quan sát cách người dùng tương tác với mẫu thử giúp Business Analyst phát hiện các điểm tắc nghẽn, các vấn đề về thiết kế hoặc các chức năng không trực quan, từ đó đưa ra các đề xuất cải tiến trước khi sản phẩm được xây dựng.
• Giảm rủi ro và chi phí: Việc phát hiện và sửa lỗi ở giai đoạn prototype rẻ hơn rất nhiều so với việc sửa lỗi trên sản phẩm đã được code. Prototype giúp giảm thiểu rủi ro phải làm lại (rework) và đảm bảo sản phẩm cuối cùng đáp ứng đúng kỳ vọng.
• Hỗ trợ giao tiếp đa chiều: Prototype giúp Business Analyst làm cầu nối giữa các bên liên quan. Nó cung cấp một ngôn ngữ chung, trực quan để trao đổi với cả đội ngũ thiết kế, phát triển và đội ngũ kinh doanh.

Ưu điểm của Prototype

• Prototype giúp nhà thiết kế phát hiện và xử lý các lỗi ngay ở giai đoạn đầu, từ đó giảm thiểu các rủi ro trong quá trình phát triển, đồng thời tiết kiệm chi phí khắc phục về sau.
• Nhờ Prototype mà các tính năng của hệ thống được xác minh một cách nhanh chóng, đảm bảo những yếu tố quan trọng được đánh giá và tích hợp đầy đủ.
• Prototype là công cụ cho phép nhà phát triển điều chỉnh thiết kế một cách linh hoạt, đáp ứng tối đa nhu cầu của người dùng.

Nhược điểm của Prototype

• Việc sử dụng Prototype có thể làm hệ thống trở nên phức tạp hơn, khiến phạm vi dự án dễ bị mở rộng và vượt quá dự tính ban đầu.
• Để tạo ra một Prototype chất lượng, nhà phát triển cần đầu tư rất nhiều về công sức, thời gian và chi phí. Điều này đòi hỏi sự tỉ mỉ, chính xác ngay từ ban đầu, tránh những điều chỉnh lặp đi lặp lại gây lãng phí nguồn lực.
• Nếu quá tập trung vào Prototype có thể làm cho đội ngũ phát triển trở nên phụ thuộc vào mẫu thử. Điều này dẫn đến việc chậm tiến độ thực hiện do phải điều chỉnh quá nhiều chi tiết trước khi chuyển sang giai đoạn hoàn thiện sản phẩm.

Bài viết khác

Prioritization Techniques

Hay còn gọi là sắp xếp ưu tiên là quá trình phân loại và xếp thứ tự các nhiệm vụ, công việc, hoặc dự án theo mức độ quan trọng và khẩn cấp. Kỹ thuật này giúp cá nhân và tổ chức tập trung vào các nhiệm vụ có tác động lớn nhất đến mục […]

Đọc thêm

Data Analysis

Hay còn được gọi là Phân tích dữ liệu, là quá trình nghiên cứu, làm sạch, biến đổi và mô hình hóa dữ liệu để khám phá các thông tin hữu ích, đưa ra kết luận và hỗ trợ ra quyết định. Nó giúp chúng ta hiểu rõ hơn về những gì đã xảy ra, […]

Đọc thêm

Gitbook

   Là một nền tảng chuyên biệt được thiết kế để tạo và quản lý tài liệu một cách hiệu quả, đặc biệt phù hợp với các đội ngũ phát triển phần mềm và dự án công nghệ. Nó kết hợp sức mạnh của hệ thống quản lý phiên bản Git với một giao diện […]

Đọc thêm

SharePoint

  Là nền tảng Microsoft SharePoint, giúp cho doanh nghiệp có thể cộng tác làm việc trên nền tảng web. Được Microsoft cho ra đời lần với mục đích chủ yếu là để lưu trữ và quản lý mọi tài liệu của doanh nghiệp, nhưng SharePoint ngày càng được phát triển để sử dụng một […]

Đọc thêm

Confluence

Là việc sử dụng nền tảng Confluence (của Atlassian) để tạo, lưu trữ, tổ chức và chia sẻ tài liệu dự án theo dạng wiki nội bộ, được dùng như một hub tài liệu tập trung để tất cả thành viên và stakeholders có thể truy cập, cập nhật và cộng tác trong suốt vòng […]

Đọc thêm

Notion

Là một ứng dụng quản lý công việc đa năng, hỗ trợ người dùng trong việc ghi chú, theo dõi nhiệm vụ, quản lý dự án, xây dựng wiki và lưu trữ cơ sở dữ liệu trong cùng một nền tảng. Là một ứng dụng viết ghi chú, nhưng nếu biết cách sử dụng, người […]

Đọc thêm