Tại sao mockup là phần không thể thiếu trong tài liệu nghiệp vụ và cách tạo ra nó

Khi viết tài liệu như SRS (Software Requirements Specification), URD (User Requirements Document) hay BRD (Business Requirements Document), bạn không thể thiếu phần mockup. Tại sao? Vì nó giống như bản đồ dẫn đường – giúp mọi người hình dung rõ ràng tính năng, kiểu dữ liệu, và cách phần mềm hoạt động. Thay vì đọc một đống chữ khô khan, mockup làm tài liệu trở nên sống động, dễ hiểu, logic và đúng yêu cầu. Kết quả? Đội phát triển phần mềm làm việc hiệu quả hơn, ít sai sót hơn.

Ví dụ nhé: Tôi muốn làm một cái ứng dụng tài chính cá nhân. Nếu tài liệu chỉ toàn chữ mà không có mockup, nhóm phát triển sẽ mò mẫm như đi trong sương mù. Nhưng nếu có mockup – hình ảnh minh họa giao diện, nút bấm, luồng sử dụng – thì mọi thứ rõ như ban ngày. Vậy làm mockup thế nào? Dưới đây là các bước cơ bản để tạo ra nó, dành riêng cho việc thiết kế giao diện ứng dụng (mình sẽ không nói về các bước khác như lập kế hoạch hay coding đâu nhé).

1. Phác thảo (Sketch) – "Ném ý tưởng lên giấy"

Bước đầu tiên là vẽ nháp, kiểu “tự do phóng khoáng”. Đừng lo nó đẹp hay xấu, mục tiêu là ghi lại ý tưởng nhanh nhất có thể. Bạn có thể ngồi với khách hàng, brainstorm, rồi nguệch ngoạc lên giấy: “Đây là nút gửi tiền, kia là lịch sử giao dịch”. Vẽ tay đơn giản, ai cũng hiểu, ai cũng góp ý được.

• Mẹo: Luôn mang sổ tay và bút chì – “vũ khí bí mật” của một Business Analyst (BA). Ghi chú, phác thảo ngay tại chỗ khi họp, rồi lưu lại làm tài liệu sau này.

• Công cụ: Giấy bút là đủ, hoặc thử Balsamiq, Visio nếu muốn lên máy tính.

• Lợi ích: Giúp BA nắm yêu cầu nhanh, có cơ sở để phân tích và đề xuất giải pháp.

2. Wireframe – "Xây cái khung nhà"

Sau khi có ý tưởng từ phác thảo, bạn làm wireframe – bản vẽ chi tiết hơn, giống như khung xương của ứng dụng. Nó thể hiện các tính năng chính (nút bấm, menu), cách bố trí, và mối liên kết giữa chúng. Chẳng hạn, với ví điện tử, wireframe sẽ cho thấy nút “Nạp tiền” nằm đâu, “Rút tiền” ở chỗ nào.

• Ví dụ: Mình từng vẽ lại màn hình đặt xe của Grab – đơn giản nhưng đủ để thấy các chức năng chính.

• Công cụ: Balsamiq là lựa chọn nhanh gọn, dễ dùng.

• Quan trọng: Đây là lúc quyết định nội dung và vị trí, làm nền tảng cho bước sau.

3. Mockup – "Tô màu cho bức tranh"

Từ wireframe, bạn nâng cấp lên mockup. Đây là lúc ứng dụng bắt đầu “có da có thịt”: thêm màu sắc, logo, nội dung cụ thể. Nó giống một bức ảnh tĩnh của sản phẩm – chưa động được, nhưng đã rất giống thật. Với BA, làm tốt đến bước này là ngon lắm, sau đó bàn giao, phối hợp với team UX hoặc lập trình viên để hoàn thiện.

• Ví dụ: Mình từng vẽ mockup cho một app đặt vé phim bằng Axure – có nút “Mua vé”, màu sắc thương hiệu, giao diện rõ ràng.

• Công cụ: Axure, Figma, hoặc Adobe XD đều ổn.

• Lợi ích: Giúp mọi người hình dung sản phẩm cuối cùng trông thế nào.

4. Prototype – "Làm nó sống động, thể hiện được user flow"

Cuối cùng là prototype – phiên bản “gần thật” nhất. Không chỉ có giao diện, nó còn mô phỏng cách ứng dụng hoạt động: bấm nút này thì sang màn hình kia, nhập số tiền thì hiện thông báo. Đây là công cụ vàng để kiểm tra luồng người dùng (user journey) – người dùng sẽ làm gì, bước nào trước, bước nào sau.

• Ví dụ: Mình làm prototype cho app xem phim: bấm “Mua vé” ở màn hình 1 thì sang màn hình 2 chọn ghế. Dùng Axure để liên kết các màn hình, rất trực quan.

• Công cụ: Figma, Axure, hoặc XD – đều mạnh về prototype.

• Điểm cộng: Prototype tốt không chỉ đẹp mà còn dễ dùng, tăng trải nghiệm người dùng (UX). Phần mềm giờ không chỉ cần “chạy được” mà phải “chạy ngon”!

Công cụ gợi ý nhanh:

• Sketch: Giấy bút là vua, đơn giản mà hiệu quả.

• Wireframe: Balsamiq – nhanh, gọn, dễ chỉnh.

Mockup/Prototype: Figma (miễn phí, mạnh cộng đồng), Axure (chi tiết), XD (hiện đại).

Tại sao BA cần rành mấy thứ này?

Hiểu UI/UX, biết làm mockup, prototype là “vũ khí” không thể thiếu, đặc biệt nếu bạn làm sản phẩm (product). Nó giúp bạn giao tiếp tốt hơn với khách hàng, đội phát triển, và đảm bảo sản phẩm cuối cùng đúng ý tưởng ban đầu. Hãy luyện tập với một công cụ, nắm chắc tính năng chính, bạn sẽ linh hoạt trong mọi tình huống.

Đọc thêm bài viết phân biệt Wireframe, mockup và prototype cực hữu ích tại đây

Nếu thấy bài viết này thú vị và hữu ích. Đừng quên đăng ký theo dõi để nhận thông báo bài viết mới về chủ đề BA đến email của bạn. Bạn có thể hủy nhận tin bất cứ lúc nào.

English Version.

When crafting documents like SRS (Software Requirements Specification), URD (User Requirements Document), or BRD (Business Requirements Document), you can’t skip the mockup. Why? Think of it as a roadmap—it brings clarity to features, data types, and how the software actually works. Instead of wading through a wall of dry text, a mockup makes your document come alive, easier to grasp, more logical, and spot-on with requirements. The result? Your development team works smarter, with fewer mistakes.

Take this example: Phuc wants to build an e-wallet. If the documentation is just endless words without a mockup, the dev team will be groping in the dark. But add a mockup—visuals of the interface, buttons, and user flow—and everything clicks into place like daylight breaking through fog. So, how do you make one? Below are the basic steps to create a mockup, focused purely on designing the app’s interface (we’ll skip stuff like planning or coding here).

1. Sketch – "Throw Ideas Onto Paper"

The first step is sketching—free and loose. Don’t stress about it being pretty; the goal is to capture ideas fast. Sit with a client, brainstorm, and scribble: “Here’s the send money button, there’s the transaction history.” Hand-drawn and simple, it’s something everyone can understand and chime in on.

• Tip: Always carry a notebook and pencil—the secret weapons of a Business Analyst (BA). Jot down notes and sketch on the spot during meetings, then save them for later.

• Tools: Paper and pen work fine, or try Balsamiq or Visio if you want to go digital.

• Why it rocks: Helps BAs nail requirements quickly and gives a solid base for analysis and solutions.

2. Wireframe – "Build the House Frame"

Once you’ve got ideas from sketching, move to a wireframe—a more detailed draft, like the skeleton of your app. It shows key features (buttons, menus), layout, and how they connect. For an e-wallet, a wireframe might reveal where the “Top Up” button sits or where “Withdraw” lives.

• Example: I once recreated Grab’s ride-booking screen—simple, but it nailed the core functions.

• Tools: Balsamiq is quick and user-friendly.

• Key point: This is where you lock in content and placement, setting the stage for what’s next.

3. Mockup – "Paint the Picture"

From the wireframe, level up to a mockup. This is where your app starts to “flesh out”: add colors, logos, and specific content. It’s like a static snapshot of the product—not interactive yet, but darn close to the real thing. For a BA, nailing this step is gold—then you can hand it off to the UX team or developers.

• Example: I built a mockup for a movie ticket app with Axure—complete with a “Buy Ticket” button, brand colors, and a sharp layout.

• Tools: Axure, Figma, or Adobe XD all do the trick.

• Why it rocks: Lets everyone visualize what the final product will look like.

4. Prototype – "Bring It to Life"

Finally, there’s the prototype—the closest thing to the real deal. Beyond just looks, it shows how the app works: click this button, jump to that screen; enter an amount, get a pop-up. It’s a golden tool for testing the user flow (user journey)—what users do, step by step.

• Example: I made a prototype for a movie app: hit “Buy Ticket” on screen 1, and it flips to screen 2 for seat selection. Axure linked it all up—super clear.

• Tools: Figma, Axure, or XD—they’re all ace for prototyping.

• Bonus: A great prototype isn’t just pretty—it’s easy to use, boosting user experience (UX). Software today doesn’t just need to work; it needs to feel good.

Quick Tool Picks:

• Sketch: Paper and pen reign supreme—simple and effective.

• Wireframe: Balsamiq—fast, neat, and editable.

• Mockup/Prototype: Figma (free, community-driven), Axure (detailed), XD (modern).

Why Should BAs Master This?

Getting good at UI/UX and whipping up mockups or prototypes is a must-have skill—especially if you’re in product development. It bridges the gap between you, the client, and the dev team, ensuring the final product matches the original vision. Pick a tool, master its core features, and you’ll be ready for anything.

If you find this article interesting and useful. Don't forget to subscribe to receive notifications of new articles on the BA topic to your email. You can unsubscribe at any time.