Apr 14, 2020

Wireframe, Mockup và Prototype dành cho Business Analyst?

Hẳn nhiều bạn Business Analyst(BA) 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ề BA biết thiết kế Wireframe, Mockup và Prototype cũng như là các tools (công cụ) liên quan:

Sự khác nhau UX & UI ở mức tổng quan

Sự khác nhau UX & UI ở mức chi tiết

Sự khác nhau Wireframe & Mockup

1. Vậy tại sao các bạn BA 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 không trực tiếp làm công nghệ, sản phẩm nặng tính giao diện.

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. Tức là trong bộ tài liệu của BA cần có Prototype mô tả màn hình.

Ví dụ: BAC đang muốn triển khai phát triển website dành cho mobile. BA sẽ lấy yêu cầu và phác thảo nên ý tưởng, xây dựng nên một bản demo sau đó chuyển qua cho dev phát triển.

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.

Bước này BA của BAC sẽ vẽ sơ lược theo nhu cầu của các bên liên quan, lấy ý tưởng.

Phác thảo web BAC.

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. Thông thường BA sẽ mô tả các màn hình hiện thị chính, update từ bản nháp ở bước 1.

Wireframe hoàn chỉnh sau giai đoạn Sketch

(ở đây không thay đổi so với bản sketch)

Theo định nghĩa của usability.gov, wireframe là một hình ảnh minh họa hai chiều của sản phẩm, ở đây có thể là giao diện của một website, hay của một app.

Đặc điểm nhận dạng của wireframe:

Tập trung vào việc thể hiện sự phân bổ bố cục của các thành phần, các nhóm nội dung và chức năng trên trang.
No colour, no style, no graphics: Không bao gồm các yếu tố như màu sắc, kiểu dáng, đồ họa. Các bản wireframe vì vậy thường chỉ gồm các hình khối màu đen, trắng hoặc xám (với hình dạng tròn, vuông, chữ nhật, tam giác), đi kèm là text ở dạng cơ bản (text chuẩn ở những phần cần phân biệt nhóm nội dung và dummy text ở những phần minh họa). Thỉnh thoảng, màu xanh dương cũng được dùng để biểu thị các link.
Không tương tác được

Hình ảnh minh họa một wireframe khác

Cần lưu ý rằng: tuy không tương tác được, nhưng wireframe sẽ cần có miêu tả (bằng text) về cách mà user sẽ tương tác với sản phẩm hoàn thiện cuối cùng (bao gồm cả các hiệu ứng khi tương tác). Phần này chính là specs – cũng là yếu tố hỗ trợ cho design và dev tiến hành các bước tiếp theo. Specs càng chi tiết thì dev càng dễ hiểu ý mình và build được sản phẩm đúng như team mong muốn.

Mục đích sử dụng của wireframe: communication, documentation.

Wireframe thường được sử dụng trong team dự án để giúp luồng công việc được thực thi trôi chảy. Với ưu điểm là dễ tạo và tiết kiệm thời gian, nó là guideline đơn giản nhất để team dự án có thể hiểu được ý tưởng, mô tả và các chức năng sử dụng của sản phẩm. Một bản wireframe rõ ràng, dễ hiểu sẽ là khởi đầu thuận lợi cho toàn bộ quá trình làm product.

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.

Kết quả giai đoạn mockup (cơ bản đã hoàn thiện)

Một mockup khác

Mockup cũng mô phỏng sản phẩm ở trạng thái tĩnh, nhưng nó sẽ cho bạn thấy minh họa gần nhất với sản phẩm cuối cùng, bởi nó bao gồm cả các yếu tố nhận diện sản phẩm, thương hiệu, sẽ cho bạn hình dung rằng, sản phẩm cuối cùng trông sẽ ra sao, màu sắc như thế nào, khi đem nó vào đời thực để sử dụng thì nhìn nó sẽ lấp lánh như thế, sành điệu như thế…

Vậy mục đích sử dụng của mockup là gì?

Đó là khi cần show off, cần nhá hàng về sản phẩm cho một vài đối tượng, mà ở đây cụ thể là những stakeholders – các bên liên quan trực tiếp đến dự án, những người thường nắm giữ vai trò là các nhà đầu tư, nhà tài trợ, đối tác v.v… và sẽ có ảnh hưởng đến sinh mệnh sản phẩm. Họ sẽ dựa trên mockup để quyết định có đầu tư không, có hợp tác không, có góp ý để thay đổi gì không. Từ đó, có thể tiết kiệm rất nhiều thời gian ngay từ đầu, tránh trường hợp cả đội sản phẩm cứ lầm lũi làm rồi lại phải ngồi sửa hoặc đập đi xây lại vì stakeholders không vừa ý.

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. Đây 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.

Prototype BAC sau giai đoạn mockup

Một prototype khác

Prototype thì mang tính "động" thể hiện được quy trình nghiệp vụ cơ bản. Đây là lúc BA áp dụng sức mạnh "trăm nghe không bằng 1 thấy" để làm việc hiệu quả hơn.

Là bản minh họa cho sản phẩm ở mức chi tiết hơn một wireframe. Không giống như wireframe chỉ là hình ảnh minh họa sản phẩm ở dạng tĩnh, prototype có yếu tố interactive: nó cho phép ta trải nghiệm nội dung và tương tác trực tiếp trên giao diện sản phẩm, giống hệt như lúc ta sẽ sử dụng sản phẩm thật. Như vậy:

Đặc điểm nhận dạng của prototype: Interactive – có khả năng tương tác
Mục đích sử dụng của prototype: (interactive) user testing (cho phép người dùng trải nghiệm tương tác với sản phẩm).

Cũng cần lưu ý là: Trong giai đoạn tạo ra prototype, sự phụ thuộc giữa giao diện front end với việc lập trình back end sẽ tạm thời không cần tính đến. Ví dụ, một bản prototype của một website viết bài sẽ cho phép người dùng click vào các nút, các khối có gắn link để qua lại giữa các trang, nhưng không cho phép người dùng đăng nhập viết bài rồi hiển thị thông tin lên trang giống như khi sử dụng sản phẩm thật.

Bảng đánh giá chung về: độ chính xác, chi phí, mục đích sử dụng, và những đặc trưng tiêu biểu

Tham khảo chương trình đào tạo:

Các bài viết liên quan Power BI:

Các bài viết liên quan:

TABLEAU - Giải pháp BUSINESS INTELLIGENCE (BI) - click vào đây
Hướng dẫn cài đặt và Sử dụng TABLEAU - click vào đây
Tính năng mới trên tableau - verion 2019.1 - click vào đây

Biên soạn và tổng hợp nội dung

Click để đọc tiếp

Các Business Analyst cần trau dồi những công nghệ gì trong năm 2025

Đối với sự phát triển nhanh chóng của công nghệ ngày này, việc không ngừng trau dồi và học hỏi là điều bắt buộc mà các Business Analyst phải làm để phát triển hơn trong lĩnh vực phân tích nghiệp vụ. Trong bài viết này, các bạn hãy cùng BAC tìm hiểu các xu hướng và các kỹ năng mới để làm hành trang trên sự nghiệp Business Analyst nhé!
Sự khác biệt giữa UAT và Usability Testing Business Analyst cần lưu ý

UAT và Usability Testing thường được mang lên bàn cân để so sánh nhưng, đây là 2 phương pháp kiểm thử khác nhau. Trong khi Usability Testing đảm bảo sự hài lòng của người dùng thì UAT lại giúp các Business Analyst xác thực chức năng. Cả hai đều là một phần không thể thiếu để cung cấp một sản phẩm chất lượng cao. Hãy cùng BAC tìm hiểu ngay nhé!
API là gì? Khám phá cầu nối giữa các ứng dụng

API là nền tảng quan trọng kết nối các ứng dụng và dịch vụ trong kỷ nguyên số, tạo ra sự linh hoạt, hiệu quả và mở rộng cho các hệ thống. Bài viết sau giới thiệu API, cách hoạt động, các kiểu kiến trúc phổ biến cùng các công cụ kiểm thử API như Postman.
Meta AI là gì và cách sử dụng Meta AI hiệu quả 2025

Meta AI là một công cụ Trí Tuệ Nhân Tạo do chính công ty mẹ của Facebook, Instagram, WhatsApp ra mắt. Đây được xem là một cuộc cách mạng sẽ làm thay đổi cách mà các doanh nghiệp và người dùng sử dụng mạng xã hội.

Bình luận

Nguyễn Thị Mai Bình

Business Analyst

Với một người ngoại đạo như mình thì những chuyên đề về "kỹ thuật" của BA hết sức quan trọng. Ví dụ như sử dụng các diagram để mô hình hóa requirement, viết User Story/Use case, v...v..

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất. Cảm ơn BAC.
Xem chi tiết +
Phạm Quế

Business Analyst

Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích. Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt. Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn.
Xem chi tiết +
Nguyễn Văn Long

Chuyên viên về chế độ kế toán & Giải pháp nghiệp vụ Tài chính kế toán trong ứng dụng CNTT - Tập đoàn Điện lực Việt Nam (EVN)

Tôi đã tham gia khóa Phân tích nghiệp vụ phần mềm cơ bản 3.0 tại BAC. Ở đây, tài liệu đào tạo cung cấp nhiều nội dung bổ ích và trình bày dễ hiểu. Giảng viên rất nhiệt tình, ngoài nội dung giảng dạy theo giáo trình còn chia sẻ nhiều kinh nghiệm thực tiễn, các câu hỏi của học viên đều được giải đáp ngay trên lớp và có minh họa từ các dự án trong thực tế. Sau tất cả, tôi cảm ơn BAC và Thầy giáo Thái Sơn.
Xem chi tiết +