Tự học business analyst – Sự khác biệt giữa Wireframe, Mockup và Prototype mà Business analyst cần biết?

Chủ nhật tuần này Blaoman lại tiếp tục với một bài viết về việc tự học business analyst. Blaoman viết những bài viết này để tự tổng hợp kiến thức. Bên cạnh đó, những bài viết này cũng sẽ giúp các bạn đang bắt đầu tìm hiểu nghề Business analyst có thêm một nguồn để tham khảo.

Hẳn nhiều bạn Business analyst sẽ hỏi khi nào thì gọi là wireframe, mockup và prototype?

Nhìn vào yêu cầu tuyển dụng các đơn vị cũng có các yêu cầu về Business analyst biết thiết kế wireframe, mockup và prototype cũng như là các tools liên quan.
Vậy tại sao các bạn Business analyst lại cần biết các tools thiết kế nghiêng về task của các bạn UI/UX.
Cơ bản thì điều này được giản thích dễ nhất là prototyping là một kĩ thuật thường được BA để dùng trong quá trình “khơi gợi” yêu cầu.

Đây là kĩ thuật dễ sử dụng và đặc biệt hiệu quả cao với các stakeholder (bên liên quan) khi không làm sâu về công nghệ. Bên cạnh đó ở các công ty không có UX designer thì phần tài liệu BA chuyển qua đến đội phát triển sản phẩm cùng cần đến bước Wireframe, Mockup hoặc Prototype.

Một tài liệu mà BA viết ra như SRS, URD, BRD,..thì không thể thiếu phần mockup. Mô tả tính năng, kiểu dữ liệu thì cần có mockup để minh họa. Việc có mockup sẽ giúp tài liệu trực quan hơn, logic hơn, ngắn gọn và mô tả đúng yêu cầu để phát triển phần mềm tốt hơn.
Ví dụ: Blaoman muốn xây dựng một cái ví điện tử thì trong tài liệu xây dựng sẽ không thể thiếu phần mockup được. Vậy quá trình xây dựng ứng dụng sẽ cần trải qua các bước cơ bản sau đây. Đoạn này mình sẽ mô tả về xây dựng mockup, không nói đến các quá trình liên quan khác.

Về cơ bản quá trình thiết kế một ứng dụng sẽ trải qua các bước sau:

1. Sketch( phác thảo)

Đây là bước đầu tiên, về cơ bản nó chỉ là một bản vẽ tự do, có độ xác thực thấp, mục đích của việc phác thảo chủ yếu để lấy ý tưởng, brainstorming dự án được thuận lợi hơn. Bước này cần thiết để lấy ý tưởng và xây dựng thiết kế. Thường vẽ nháp trên giấy, mọi người dễ hình dung và trao đổi. Bản phác thảo này sẽ được lưu lại làm tài liệu cho phần phía sau.

Trong quá trình khơi gợi yêu cầu thì BA thường sẽ note, phác thảo lại những chi tiết này để làm tài liệu về sau. Các bạn cũng tập có cho mình một quyển sổ nhỏ và một cây bút chì nhé. Sẽ rất hữu ích cho một Business analyst.

Việc phác thảo sẽ giúp các BA lấy yêu cầu tốt hơn, có tư liệu để phân tích và đề xuất các giải pháp phù hợp.

Bạn có thể phác thảo bằng bút chì, trên giấy hoặc các công cụ như balsamiq, visio…

Kinh nghiệm của mình là luôn lưu lại các bản nháp này để làm tư liệu về sau. Theo dõi việc phát triển và thay đổi yêu cầu,

2. Wireframe

Bước này giúp xây dựng bộ khung cơ bản của website hoặc ứng dụng. Trên bản vẽ thể hiện những chức năng chính, chế độ xem và mối quan hệ giữa các tính năng.

Các quyết định về nội dung (nội dung/tính năng) và vị trí đặt trên trang web hoặc ứng dụng thường được đưa ra trong giai đoạn này.
Dưới đây là 1 ví dụ mình vẽ lại một màn hình trên grab cho dễ hình dung.

Bạn có thể dùng các công cụ như balsamiq để vẽ được wireframe nhanh chóng.

3. Mockup

Sau khi có bản Wireframe hoàn chỉnh thì sẽ đến bước vẽ mockup, đến bước này thì hình ảnh của website, ứng dụng sẽ chân thật và rõ hơn. Bản thiết kế đã có thể có màu sắc, logo thương hiệu, content chính…những thường là mô hình tĩnh. Về cơ bản BA làm đến bước này là quá tốt, giai đoạn sau chuyển đến các bạn UX or dev.

Dưới đây là một bản mockup mà mình đã vẽ để các bạn dễ hình dung. Mình thường sử dụng axure để vẽ mockup.

4. Prototype

Đây là thiết kế sát nhất với sản phẩm thực tế được phát triển về tính năng, màu sắc, nội dung và đăc biết là tính “động”, tức là có thể mô tả thao tác giữa các màn hình như sản phẩm thật.

Việc mô tài liệu bằng Prototype cực hữu ích với việc xác định quy trình theo từng bước. Tức là sẽ phản ánh chân thực các bước user cần làm, thể hiện rõ user journey của sản phẩm. Mình sẽ có bài viết về User Journey ở bài viết tiếp theo.

Prototype là công đoạn thiết kế cần nhiều nhất các kiến thức về UX (user experience). Như các bạn biết công nghệ đã phát triển đến một mức cao mới, phần mềm không chỉ đơn thuần là dùng được mà còn phải dùng ngon, dễ dùng, trải nghiệm dễ chịu, tạo ra sự thỏa mãn cho người sử dụng.

UX của phần mềm càng tốt thì sự trung thành của user với sản phẩm càng cao. Hiện tại khá nhiều tools thiết kế mạnh phần prototype này.

Mình thiết kế 2 màn hình trên với Axure: Sau đó mình sẽ liên kết giữa 2 màn hình lại, click chọn mua vé xem phim thì sẽ qua màn hình số 2, mô tả cách app hoạt động. Đoạn này có thể được gọi là Prototype.

Công cụ hỗ trợ cho các công đoạn này BA thường sử dụng:
1. Sket thì sẽ dùng bút chì hoặc bút bi vẽ lên giấy

2. Wireframe thì mình dùng Balsamiq. Sẽ có bài viết hướng dẫn về công cụ này.

3. Mockup, prototy thì có thể xài Figma, XD hoặc Axure.

Nếu bạn dùng công cụ nào thì cố gắng năm bắt những tính năng chính của nó để có thể linh hoạt với nhiều trường hợp khác nhau.

Những kiến thức về UI/UX, mockup prototype này rất quan trọng cho các bạn làm BA. Đặc biệt là các bạn làm product, chú trọng vào phía người dùng. Các vị trí cần kĩ năng BA như Product Owner, Product manager cũng sẽ cần những kiến thức này.

Hi vọng bài viết ngắn này sẽ giúp các bạn BA mới vào nghề dễ dàng phân biệt và ứng dụng vào trong công việc. Nếu có thắc mắc nào bạn có thể liên hệ mình qua fanpage nhé.

Note: Các bài viết tại đây là của cá nhân mình, không liên quan đến tổ chức, cá nhân nào khác vì vậy các đơn vị, cá nhân trích bài viết vui lòng đọc kỹ yêu cầu về Bản Quyền-Cộng Tác trước khi sao chép hoặc trích dẫn nội dung và hình ảnh của blog. Nếu copy bài viết vui lòng dân link nguồn.