Làm sản phẩm, hẳn bạn đã được nghe nhiều đến ba thuật ngữ: wireframe, prototype và mockup.
Bản thân mình khi mới vào nghề Product Management, mình thường tùy tiện gọi theo ý thích riêng, hầu như không có sự phân biệt giữa ba khái niệm. Điều này dẫn tới nhiều sai lầm ngớ ngẩn, ví dụ như mình đã từng bỏ mấy tiếng đồng hồ để ngồi tô màu cho một wireframe nhằm làm cho nó trông có vẻ đẹp hơn, vì các khối màu xám nhìn đơn điệu quá.
Về sau này, đọc nhiều, học hỏi nhiều và làm nhiều giúp mình hiểu ra rằng: ba khái niệm ấy hoàn toàn không phải là một. Đứng dưới góc độ mục đích sử dụng trong quá trình thực tế tạo ra một sản phẩm, bạn sẽ thấy, mỗi cái mang một ý nghĩa khác nhau và sẽ song hành cùng bạn trong từng giai đoạn.
Bài viết dưới đây mình chia sẻ lại cách hiểu của mình về ba thuật ngữ này, dựa trên nhiều bài viết mà mình đã tìm hiểu cũng như cách mà mình đã sử dụng từng loại trong quá trình làm việc thực tế.
I-WIREFRAME
Theo định nghĩa của usability.gov (xem đầy đủ tại đây), 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.
1- Đặ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 (fixed text ở những phần nội dung cố định không thay đổi và dummy text ở những phần nội dung động có thể được tùy biến sau). 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:
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à product specifications (yêu cầu kỹ thuật) – cũng là yếu tố hỗ trợ cho team developer tiến hành các bước tiếp theo.
Với wireframe phía trên, vì là làm app và product specifications của trang này cũng ngắn gọn thôi nên mình viết specs sang bên cạnh mỗi màn hình cho dễ đối chiếu, dễ nhìn luôn.
Với các wireframe phức tạp, nội dung nhiều, product specs có nhiều yêu cầu phức tạp, mình viết product specs vào một layer, rồi cho đè lên mỗi vùng tương ứng với mỗi specs, sau đó set nó appear/ disappear. Người xem có thể click vào chi tiết để phần product specs này được hiển thị hoặc ẩn đi, rất tiện theo dõi. Trong tool dùng để vẽ wireframe, dĩ nhiên có hỗ trợ tính năng này.
2- Mục đích sử dụng của wireframe:
- communication, documentation.
Wireframe thường được sử dụng trong quá trình giao tiếp ban đầu để Product Owner làm việc với designer hay kể cả các team khác như developer, truyền đạt những yêu cầu căn bản nhất về tính năng/ sản phẩm để cả team có thể cùng brainstorm nhanh về user working flow ban đầu hoặc một vài giải pháp xây dựng sản phẩm.
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.
II-PROTOTYPE
Prototype là bản minh họa cho sản phẩm ở mức chi tiết hơn một wireframe.
1- Đặc điểm nhận dạng của prototype
- Interactive – có khả năng tương tác
- Không giống như wireframe chỉ là hình ảnh minh họa sản phẩm ở dạng tĩnh, yếu tốc \\\’interactive\\\’ của prototype 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.
2- 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. Các tương tác của prototype có thể được tạo ra bởi các tool có sẵn, có thể được thực hiện chủ động bởi Product Owner, và các tương tác này chỉ là tương tác đơn giản trên giao diện hiển thị.
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.
Hiện tại, đa số các tool vẽ wireframe/prototype đều hỗ trợ tạo các tương tác này. Mình thì thường dùng Axure hoặc Marvelapp.
Xem thêm: Khóa học Product Management – Quản lý sản phẩm cho người mới bắt đầu
3-MOCKUP
Nói đến mockup, thực ra, nó lại là một khái niệm khác hẳn wireframe và prototype.
1- Đặc điểm nhận dạng của mockup
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.
Bạn sẽ có thể hình dung được sản phẩm cuối cùng trông sẽ ra sao, màu sắc như thế nào khi được đưa ra sử dụng bởi người dùng cuối.
Hình ảnh một mockup sản phẩm app:
2- Mục đích sử dụng của mockup
Đó 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.
Những stakeholders này 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 ý.
Nhân tiện nói chuyện mockup, mình cũng đã từng vô tình làm một cái mà không hề hay biết. Đó là khi team mình được giao một dự án xây dựng sản phẩm cho trang VnExpress (một vertical về Sách, mà sau này dự án đã bị hoãn vô thời hạn). Khi ấy, mình được yêu cầu vẽ wireframe (đây cũng chính là chiếc wireframe đầu tiên trong cuộc đời mình), tuy nhiên mình lại đi làm một cái mockup. Mình đã mất khoảng một tuần để vẽ ra khoảng 30 trang đầy đủ màu mè, link liên kết đi muôn nơi, logo đầy đủ, hiệu ứng hoành tráng, xem cái file cứ như thể đã cắt HTML luôn vậy đó. Giờ nghĩ lại vẫn nhớ như in sự nhiệt tình của mình khi ấy, niềm vui khi làm xong (mặc dù sai yêu cầu), rồi sự háo hức khi cả team cùng ngồi xem thành quả và thấy thích thú tự hào. Đấy chắc là những va vấp đầu tiên, lúc ấy mình ngại nhưng giờ mình lại thấy thực sự vui và ý nghĩa lắm.
—
Hi vọng qua mấy dòng ngắn gọn trên, bạn đã có thể hiểu và phân biệt được ba khái niệm wireframe, prototype và mockup. Để kết thúc bài viết, xin gửi các bạn bảng so sánh ngắn gọn từ Marcin Treder – CEO của UXPIN, cũng khá hay, lại dễ nhớ, dễ hiểu.
—
Bài viết dựa trên kinh nghiệm thực tế và tham khảo các nguồn:
http://designmodo.com/wireframing-prototyping-mockuping/
http://www.bridging-the-gap.com/wireframe-mock-up-prorotype-difference/
http://www.usability.gov/how-to-and-tools/methods/wireframing.html
http://speckyboy.com/2015/04/20/wireframing-prototyping-mockuping-whats-the-difference/
https://brainhub.eu/blog/2016/04/20/difference-between-wireframe-mockup-prototype/
Xem thêm: Khóa học Product Management – Quản lý sản phẩm cho người mới bắt đầu
1 thought on “Phân biệt wireframe, prototype và mockup”
Bài viết rất hay. Thật tuyệt nếu như ai cũng có thể post những bài viết liên quan đến hiểu biết của mình cho mọi người biết.
Comments are closed.