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:
- Power BI cơ bản cho người mới bắt đầu
- Chỉnh sửa và định hình dữ liệu trong Power BI Desktop
- Kết hợp dữ liệu trong Power BI Desktop
- Hướng dẫn kết nối dữ liệu trong Power BI Desktop
- Hướng dẫn tải & cài đặt Power BI trên máy tính
- Khóa học Phân tích và trực quan hóa dữ liệu với Power BI
- Power BI là gì ?
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