Phác thảo ý tưởng sản phẩm bằng Wireframe, Mockup

Wireframe là bố cục cơ bản và thô sơ nhất của 1 trang web hoặc app. Giống như trước khi xây nhà thì phải phác thảo được bố cục của căn nhà. Từ wireframe chúng ta sẽ thêm thắt 1 số màu sắc, ý tưởng, trang trí thử 1 số vật dụng trong căn nhà, lúc này chúng ta sẽ gọi đây là Mockup.

Nói cách khác mockup chính là wireframe, nhưng là một phiên bản có thêm nhiều thông tin và thể hiện nhiều chi tiết hơn.

Thuật ngữ “wireframe” bắt nguồn từ lĩnh vực thiết kế web và ngày nay đã được sử dụng rộng rãi hơn trong lĩnh vực phát triển và quản lý sản phẩm. Nguồn gốc chính xác của từ này không được ghi chép rõ ràng, nhưng nó đã trở nên phổ biến vào cuối thế kỷ 20 khi các phương pháp thiết kế kỹ thuật số và trải nghiệm người dùng (UX) bắt đầu phát triển.

Biết nguồn gốc của wireframing sẽ giúp bạn đặt sự hiểu biết vào bối cảnh lịch sử, cho phép bạn hiểu được thực tiễn và tại sao phải làm wireframe. Tôi nghĩ đây là một điểm quan trọng đối với các Product Manager.

Ban đầu, wireframes được sử dụng để hiển thị các đối tượng 3D trong các chương trình Computer Aided Design (CAD). Bạn có thể nhận ra phong cách được sử dụng trong sản xuất để mô tả thiết kế ô tô mà không cần chi tiết, khiến bản vẽ trông giống như được phác thảo bằng cách vẽ tay.

Nói thêm về chương trình AutoCAD, AutoCAD là một ứng dụng phần mềm soạn thảo 2-D và 3-D được sử dụng trong kiến trúc, xây dựng và sản xuất để hỗ trợ chuẩn bị bản thiết kế và các kế hoạch kỹ thuật. Trong AutoCAD sẽ có chức năng thực hiện bản phác thảo (wireframe) như ví dụ trên hình.

Ở Việt Nam thì chương trình AutoCAD khá thịnh hành trong những năm tôi học cấp 3, thời điểm 2002 và cho đến các năm sau 2010.

Vì vậy có thể xem như chúng ta tạm vay mượn thuật ngữ “Wireframe” hay còn gọi là “Bản phác thảo” vào trong lĩnh vực Product Management từ những yếu tố lịch sử như trên.

Wireframe bên mảng thiết kế web/app, làm sản phẩm số

Đối với một trang web (bao gồm nhiều trang con) hoặc ứng dụng (app), wireframe là một dạng trình bày thông tin thô sơ, đóng vai trò là nền tảng, xương sống của toàn bộ sản phẩm.

Việc thực hiện các bản phác thảo – wireframe sẽ giúp cho việc thí điểm các ý tưởng và các logic kỹ thuật xoay quanh nó trở nên hiệu quả hơn ngày từ thời điểm đầu của việc nghiên cứu và phân tích sản phẩm.

Vì wireframe là bản nháp đầu tiên của giao diện người dùng với các yếu tố thiết kế tối thiểu, một số các thành phần được sử dụng khi làm wireframe như sau:

• Hình vuông hoặc hình chữ nhật: đại diện cho kích thước của màn hình web hoặc app, hình ảnh và các nút có hành động cụ thể.
• Các đoạn text – văn bản được hiển thị bằng ‘lorem ipsum‘ hoặc các dòng text đơn lẻ bên trong một phác thảo hình vuông hoặc chữ nhật.
• Các nút được làm tròn hoặc có màu xám đậm nhạt tuỳ theo ý tưởng và logic của sản phẩm.
• Biểu tượng là biểu tượng nhỏ hoặc hình vuông có dấu x.
• Sử dụng màu xám với độ đậm, nhạt khác nhau để phác thảo màu nền.
• Các biểu tượng dạng mũi tên → để diễn đạt quá trình thao tác của người dùng, giúp việc tính toán logic trở nên dần trực quan hơn.

Tác dụng của việc phác thảo wireframe

Thiết kế wireframe là một phần công việc của quá trình làm UX/UI.

Wireframes đóng vai trò là ngôn ngữ chung cho tất cả các thành viên liên quan đến việc tạo ra một sản phẩm: khách hàng, Product Manager, UX/UI Designer và các lập trình viên. Bằng cách phác thảo ý tưởng tối giản và thiết thực, wireframe sẽ giúp mọi người hiểu và theo kịp quy trình từ ý tưởng đến sản phẩm cuối cùng.

Lý do thứ hai, khi bắt đầu quá trình phân tích, việc thay đổi các yêu cầu lẫn cách thức triển khai sản phẩm là điều….xảy ra thường xuyên. Việc này là một việc hết sức bình thường. Rủi ro sẽ đến khi bạn làm UX/UI sau đó mới bắt đầu quá trình phân tích về logic và cách thức các tính năng vận hành trên sản phẩm.

Phác thảo trước một wireframe sẽ giúp giảm bớt được rủi ro nêu trên. Các bước tiếp theo sau wireframe chính là mockup, prototype hoặc mockup, UI, prototype.

Như vậy đến đây bạn đã hiểu wireframe là gì rồi. Wireframe đơn giản chỉ là một bản phác thảo ý tưởng thô sơ để giúp mọi người tập trung phân tích những yếu tố cốt lõi định hình nên 1 sản phẩm, trước khi khoác lên chiếc áo UX/UI đầy trải nghiệm và màu sắc.

Các loại wireframe có chất lượng (độ chi tiết) từ thấp đến cao

Tôi muốn nói một chút về từ “Hi-Fi” hay là “HiFi”.

Ở thời của tôi (8x), đa số bạn bè và người lớn khi qua nhà ai đó chơi mà thấy nhà đó có dàn âm thanh có chất lượng âm thanh nghe “sướng” cái tai thì mọi người hay nói là: “Ồ, nhà anh có dàn máy Hi Fi (Hai Phai) xịn nhỉ”

Hi-Fi ở đây là High Fidelity – nghĩa là độ chân thực cao. Khi nhắc đến âm thanh Hi-Fi nghĩa là âm thanh chân thực, tự nhiên, sống động.

Tiếp đến tôi sẽ nói về “Lofi”. Nếu bạn hay nghe Youtube hoặc Spotify thì bạn sẽ bắt gặp các album nhạc Lofi Việt – những bài nhạc cover lại của các ca sĩ nổi tiếng. Lofi là viết tắt của low – fidelity, là dòng nhạc có chất lượng thấp, bị một số lỗi âm thanh ví dụ như: méo âm, sai nốt, sót tạo âm hoặc còn âm thanh nhiễu trong quá trình thu âm sản phẩm. Tuy nhiên những lỗi này là có chủ đích, nhằm tạo nên điểm nhấn cho tác phẩm.

Thế thì khi nói đến chất lượng của một bản phác thảo wireframe, chúng ta cũng có y hệt như thế, và thêm 1 loại nữa là mid-fi như mô tả ngắn dưới đây.

Low (ít chi tiết) → Mid (thêm vài chi tiết để minh hoạ) → High (thêm càng nhiều chi tiết để phân tích logic của sản phẩm)

Loại #1 – LoFi – Low Fidelity

Đặc tính của loại wireframe này:

• Chất lượng thấp. Nghĩa là bạn chỉ phác thảo sơ bộ một số thành phần và chưa cần thêm thắt chi tiết.
• Bạn có phác thảo bằng tay trên bảng, sổ tay, giấy A4.
• Bạn có thể phác thảo bằng các công cụ làm Wireframe.

Trong thực tế và theo kinh nghiệm làm việc, việc phác thảo những bản lofi thế này thường xảy ra chớp nhoáng: có thể là một vài nét vẽ nhanh trong lúc trao đổi công việc, có thể chỉ là một vài thêm thắt nhỏ trong toàn bộ bức tranh của một sản phẩm đã ra mắt.

Theo ví dụ bên dưới, phác thảo 1 bản lofi thực chất là phác thảo bố cục cơ bản của một hoặc nhiều trang web/app. Dựa trên những gì tôi quan sát đến hiện tại, đa số mọi người sẽ đi thẳng vào việc phác thảo Mid Fi và Hi Fi wireframe.

Loại #2 – MidFi – Mid Fidelity: Lofi nhưng thêm nhiều chi tiết

Wireframe có chất lượng hay độ trung thực trung bình sẽ có thêm nhiều chi tiết so với lofi wireframe.

Từ các bố cục cơ bản của lofi, bạn sẽ thêm hình ảnh trực quan vào midfi, cũng như bắt đầu minh hoạ các tương tác cụ thể của người dùng trên bản midfi này.

Ví dụ bên dưới là 1 bản phác thảo midfi cho cả desktop và app. Khi nhìn vào bản phác thảo này, bạn có thể thấy được:

1. Nội dung trên bản phác thảo này có thể vừa là dummy vừa là nội dung chính thức như các nút “Borrow”, “Place a hold”, “Temporary Transfer”
2. Đây là một trang liệt kê danh sách sản phẩm, hàng hoá của tài khoản tên Annie Chen, với nghề nghiệp là sinh viên – Student.
3. Bạn Annie Chen này có thể tương tác với sản phẩm qua các chức năng:
   • Lọc (Filter) sản phẩm theo ngày, số lượng và trạng thái.
   • Thực hiện hành động cụ thể theo các nút tương ứng với mỗi sản phẩm.
   • Tìm kiếm sản phẩm phù hợp

Như vậy bạn đã thấy rõ sự khác biệt hoàn toàn giữa 1 bản phác thảo thuần về bố cục (lo-fi) so với 1 bản phác thảo có thêm chi tiết + tương tác (mid-fi)

Thực tế tôi chứng kiến thì từ các bản midfi này, Product Manager hoặc UX/UI designer hoàn toàn có thể phát triển lên UI thay vì đi tiếp đến bản hi-fi wireframe.

Loại #3 – HiFi – High Fidelity: Midfi nhưng thêm nhiều chi tiết cao cấp

Có nhiều cách áp dụng thực tiễn tại bước này.

• Từ bản phác thảo Lofi → Mockup. Mockup là một dạng HiFi wireframe.
• Từ bản phác thảo Lofi → UI. UI cũng là một dạng HiFi wireframe và có hình thái gần nhất với trải nghiệm người dùng.

Nếu bạn phát triển từ Lofi lên tới Mockup thì nó sẽ trông như ví dụ bên dưới.

Nếu bạn phát triển từ Lofi lên tới UI thì nó sẽ trông như ví dụ sau.

Tôi là Product Manager, tôi có phải vẽ Wireframe hay Mockup?

Theo kinh nghiệm bản thân, tôi nghiêng về hướng sau: Là một Product Manager, bạn nên biết phác thảo ý tưởng, dùng nó để giao tiếp với tất cả các bên liên quan, tìm ra các vấn đề và rủi ro càng sớm càng tốt. Vì vậy, bạn nên học cách và biết cách phác thảo wireframe.

Trong thực tiễn, bạn có thể không cần phải thực hiện theo trình tự: vẽ bản Lofi rồi đến MidFi, và hoàn thiện bằng HiFi.

Trong tất cả các công việc liên quan đến sản phẩm, khi buộc phải phác thảo ý tưởng, tôi sẽ đi thằng từ MidFi đến Mockup. Và phiên bản trình bày cuối cùng của tôi với tất cả mọi người sẽ là một bản Mockup. Nếu các logic và các rủi ro phát sinh được phát hiện hơn 90% trên bản Mockup này, tôi sẽ chuyển nó sang UX/UI Design để hoàn thiện khâu trải nghiệm người dùng đến khách hàng.

Nhân tiện, tôi nói thêm về từ “Mockup”.

Trong kỹ thuật có khái niệm Mock API. Khi tích hợp API với các hệ thống khác nhau, Mock API là một công cụ hữu ích trong quá trình phát triển ứng dụng vì nó giúp giả lập hoạt động của một API thực tế bằng cách trả về dữ liệu giả lập hoặc trạng thái mong muốn. Sử dụng Mock API giúp các thành viên tiết kiệm thời gian và tiền bạc trong quá trình phát triển ứng dụng của bạn.

Tương tự như thế với khái niệm Mockup bên Thiết kế sản phẩm. Mockup là một mô hình thu nhỏ, bản mô phỏng có độ chi tiết cao và có độ trực quan vừa đủ để bạn hình dung được cách người dùng sử dụng sản phẩm thực tế sau này như thế nào.