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

Stakeholder Management

Hay còn gọi là Quản lý các bên liên quan, là một quá trình chiến lược và có hệ thống nhằm xác định, phân tích, lập kế hoạch và thực hiện các hành động để tương tác hiệu quả với các cá nhân, nhóm, hoặc tổ chức có ảnh hưởng hoặc bị ảnh hưởng bởi […]

Đọc thêm

Process Modeling

Còn được gọi là Mô hình hóa quy trình, là quá trình phân tích, mô tả và biểu diễn trực quan một quy trình nghiệp vụ bằng các ký hiệu, sơ đồ hoặc mô hình, để mọi người dễ hiểu, dễ trao đổi và cải thiện.   Trong Business Analysis, Process Modeling giúp BA và […]

Đọc thêm

Documentation

Documentation (Tài liệu hóa) là quá trình ghi chép, tổng hợp và lưu trữ toàn bộ thông tin, yêu cầu, quyết định và quy trình của dự án dưới dạng văn bản (hoặc file điện tử) để tất cả các bên liên quan có thể hiểu, tham khảo và sử dụng trong suốt vòng đời […]

Đọc thêm

Requirements Gathering

Thu thập yêu cầu là quá trình xác định, thu thập và phân tích các yêu cầu của các bên liên quan (stakeholders) để hiểu rõ mục tiêu, nhu cầu và mong muốn của dự án.  Là giai đoạn nền tảng, giúp xác định phạm vi, mục tiêu và các yếu tố quan trọng khác […]

Đọc thêm

Agile vs Waterfall

Waterfall   Phương pháp mô hình thác mà còn được gọi là mô hình vòng tuần hoàn dạng vòng lặp. Mô hình thác nước theo thứ tự tuần tự và do đó nhóm phát triển dự án chỉ chuyển sang giai đoạn phát triển hoặc thử nghiệm tiếp theo nếu bước trước đó hoàn thành […]

Đọc thêm

Kanban

  Trong Agile là một phương pháp quản lý công việc trực quan giúp nhóm dễ dàng thấy tiến độ, phát hiện tắc nghẽn (bottleneck), và cải thiện quy trình làm việc theo cách liên tục (continuous delivery). Thay vì tập trung vào các chu kỳ lặp cố định như Scrum, Kanban chú trọng vào […]

Đọc thêm