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

10 Thuật ngữ AI ai cũng nên biết

Khám phá 10 thuật ngữ quan trọng nhất trong lĩnh vực trí tuệ nhân tạo (AI) cùng BAC – từ AI, Machine Learning đến Generative AI, Copilot và hơn thế nữa. Bài viết được biên dịch từ nguồn Microsoft, giúp bạn hiểu rõ cách công nghệ này hoạt động và đang thay đổi thế giới. Một tài liệu nhập môn hoàn hảo cho người mới, chuyên viên công nghệ hay bất kỳ ai muốn bắt kịp làn sóng chuyển đổi số.
Học AI từ con số 0: Lộ trình đơn giản cho người mới bắt đầu

Khám phá lộ trình học AI đơn giản cho người mới bắt đầu cùng BAC. Bạn không cần giỏi lập trình để có thể học AI và trở thành chuyên gia. Những kiến thức này hoàn toàn có thể được tiếp thu và ứng dụng thực tế bởi tất cả mọi người.
Gemini là gì? So sánh Gemini và ChatGPT cho người mới bắt đầu

Gemini là gì? So sánh nhanh Gemini và ChatGPT một cách đơn giản, giúp người mới bắt đầu học AI chọn công cụ phù hợp để học tập, làm việc và sáng tạo nội dung. Mỗi công cụ đều có ưu và nhược điểm riêng, hãy cùng BAC khám phá chi tiết.
AI là gì? Giải thích đơn giản cho người mới bắt đầu

Bài viết này sẽ giúp các bạn tìm hiểu AI theo hướng đơn giản nhất. Bằng cách giải thích ngắn gọn, cô động, súc tích và dễ hiểu, BAC sẽ cho bạn lý giải về cụm từ “AI”. Qua đó, bạn không chỉ hiểu mà còn biết lý do vì sao mình phải học AI.

Bình luận

Lê Anh Tuấn

Chuyên viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi là nhân sự thuộc Trung tâm Phát triển CNTT – Khối Ngân hàng số, hiện đang đảm nhiệm vai trò kiểm thử phần mềm (tester). Việc tham gia khóa học Business Analyst đã mang lại cho tôi góc nhìn toàn diện và rõ ràng hơn về vai trò của BA trong lĩnh vực ngân hàng.

Khóa học Fundamental Business Analysis tại BAC không chỉ giúp tôi hiểu đúng bản chất công việc BA mà còn hỗ trợ phát triển tư duy nghiệp vụ – từ tiếp cận giải pháp kỹ thuật sang tập trung vào nhu cầu người dùng. Phương pháp giảng dạy kết hợp lý thuyết và thực hành thực tiễn, cùng các hoạt động mô phỏng, thảo luận nhóm đã giúp tôi nâng cao kỹ năng giao tiếp, phân tích và trình bày yêu cầu – những năng lực thiết yếu để phối hợp hiệu quả giữa các bên trong dự án công nghệ.

Xem chi tiết +
Huỳnh Cao Cường

Nhân viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi hiện đang công tác tại Trung tâm Phát triển CNTT – Khối CNTT, với vai trò là nhân sự chức năng phụ trách mảng Ngân hàng số, chuyên sâu về kiểm thử phần mềm (Tester). Trước khi tham gia khóa học Fundamental Business Analysis do BAC tổ chức, tôi từng hình dung BA chỉ đơn thuần là cầu nối giữa bộ phận kỹ thuật và nghiệp vụ.

Tuy nhiên, quá trình học đã giúp tôi nhận thức rõ hơn về bản chất và tầm quan trọng của vị trí này. BA không chỉ kết nối các bên liên quan, mà còn giữ vai trò định hình yêu cầu, đảm bảo giải pháp được thiết kế đúng mục tiêu và sát với nhu cầu thực tế. Khóa học đã trang bị cho tôi tư duy phân tích bài bản, khả năng diễn đạt yêu cầu rõ ràng, và kỹ năng phối hợp hiệu quả trong môi trường dự án đa chiều.

Với nền tảng công nghệ thông tin sẵn có, khóa học là bước chuyển hướng quan trọng giúp tôi phát triển tư duy nghiệp vụ vững chắc và sẵn sàng theo đuổi lộ trình nghề nghiệp chuyên sâu trong lĩnh vực Business Analysis tại Eximbank.

Xem chi tiết +
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 +

Professional Transfer Services in Batumi

Luxury Georgian Transfer Services – Tbilisi & Batumi

Airport Transfers in Georgia

10 Thuật ngữ AI ai cũng nên biết

Học AI từ con số 0: Lộ trình đơn giản cho người mới bắt đầu

Gemini là gì? So sánh Gemini và ChatGPT cho người mới bắt đầu

AI là gì? Giải thích đơn giản cho người mới bắt đầu

CÔNG TY CỔ PHẦN ĐÀO TẠO VÀ TƯ VẤN BAC