Mockup là gì? Mockup trong sản xuất phần mềm?

Chả là dạo nọ mình có đi phỏng vấn học bổng về quản lý sản phẩm ở trường C****S****l được facebook tài trợ, đi phỏng vấn thì nghe mọi người nhắc khá nhiều tới từ “mockup” hay “móc” gì đó. Xong chạy qua gặp khách hàng thì cũng nghe loáng thoáng, về trường gặp mấy bạn đang thiết kế app mobile cũng đang “móc” khá nhiều. Tự thấy bản thân có vẻ lạc hậu nên mình quyết định tìm hiểu để “móc” thử xem nó như nào . Sau một hồi tìm hiểu thì mình như được khai sáng, như vừa khám phá ra một chân trời mới. Nên nay muốn viết bài truyền đạo .
Mockup là gì mà nó nghe có vẻ “ngầu” vậy?

Để trả lời thì chúng ta phải cùng nhau giải quyết 1 bài toán:

Vào một ngày đẹp trời, một chị khách hàng dễ thương đến và đặt bạn làm một trang web giới thiệu về các sản phẩm của mình (chị này là nhà thiết kế thời trang, tên là Trinh). Chị Trinh mô tả về trang web của mình rất chi tiết từ lô gô đến hình ảnh, được cái chị chưa thể hình dung ra được trang web của chị sẽ như thế nào. Nếu lúc này bạn hét giá 20tr cho trang web thì khả năng cao là chị sẽ sách ba lô lên và đi nhưng cũng không quên cho bạn 1 cái bạt tai vì hù dọa tinh thần chị ).
Vậy làm sao để vừa lòng chị ???

Lúc này, sẽ có 2 trường hợp xảy ra:

1. Chị đã từng xem qua vài website và muốn website mình giống như vậy. Cái này thì đơn giản, bạn chỉ cần hỏi ít thông tin về trang web đó và bằng nghiệp vụ của 1 thằng IT bạn có thể fake lại trang web đó và thay đổi lại logo, hình ảnh, nội dung,..phù hợp trong thời gian ngắn và ôm 20 củ đi bay lắc ở Bùi Viện .
2. Chị không kham khảo bất kì trang web nào, chị hoàn toàn trong sáng và ngây thơ. Ca này thực sự rất khó. Nhưng với kinh nghiệm đi khách nhiều lần, bạn biết bước đầu tiên là phải vẽ ra viễn cảnh trang web đẹp lồng lộn để dụ chị trao yêu thương (ở đây là tiền nhé) cho mình. Ok, bắt tay làm luôn cho nóng .
   Well, vẽ trước cái wireframe nè: Cái này mình chế ra, đừng bắt trước nha

Đây là kết quả sau khi tô màu:

Hmm, nhìn thì có vẻ oke đó, đưa khách hàng xem họ sẽ thích lắm

Trinh said: “Uisss đẹp quá em êi, chuẩn bài roài, mà….”

Đời không như là mơ, các bạn sẽ phải đối mặt với các câu hỏi như:

• Hiển thị trên ipad, tivi,…nó sẽ như nào em êi ?
• Stupidphone của chị có cái mụn ruồi ở màn hình thì nó sẽ hiện ra như nào ?
• Màn hình máy tính của chị nó cong cong thì hiện ra có bị méo không ??
• Và hàng loạt câu hỏi khác được đặt ra từ khách hàng…

Khó thế, có 20tr mà đòi hỏi nhiều vl ??? Không lẽ giờ ngồi code ra rồi mở trên điện thoại cho bả xem ??

NO!!! Sử dụng Mockup là giải pháp hiệu quả nhất.

Xin giới thiệu đây chính là bản mockup của em nó

Nhìn vào đây, khách hàng sẽ biết được sản phẩm của mình khi đẻ ra nó sẽ có hình thù ra sao, hiển thị như thế nào trên mỗi thiết bị và hơn hết, chúng ta không phải gặp khó khăn khi gặp các câu hỏi trên nữa 😊.

“Ngon luôn em ưi, kí hợp đồng chốt lẹ em ưi, hí hí” _Trinh said.

Vậy đó, qua bài toán trên chúng ta đã na ná mượng tượng ra Mockup và tầm quan trọng của nó phải không nè ? Nhưng để hiểu sâu hơn thì chúng ta phải trả lời được ba câu hỏi huyền thoại: WHAT ? (wtf), WHY ? và HOW ?

WHAT is mockup?

“In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes.” theo người anh Wikipedia

Việt sub:

“Trong sản xuất và thiết kế , mockup là một mô hình (hình ảnh) kích thước thu nhỏ hoặc đầy đủ của một thiết kế hoặc một thiết bị (kiểu giống như mô hình máy bay thu nhỏ, mô hình công ty, mô hình đô thị mới,..bla..bla..), được sử dụng để giảng dạy, trình diễn, đánh giá, quảng bá và các mục đích khác.”
này là tự dịch nên bạn nào sợ thì đọc cái bản tiếng anh nha.

Chỉ cần hiểu nó là một bản thiết kế, sau đó bạn ghép nó vào 1 cái khung thiết bị nào đó là thành mockup. Dựa vào Mockup, người dùng (khách hàng) có thể hình dung được 95% thiết kế của sản phẩm (màu sắc, nội dung, hình ảnh, hiển thị,…).

Thiết kế mockup thường sẽ là bản thiết kế gần với bản thiết kế cuối cùng nhất (95%) vì trong quá trình thiết kế phần mềm, sẽ xuất hiện các yếu tố làm thay đổi 1 phần nhỏ của thiết kế (vấn đề này thường liên quan đến con người nên mình không đề cập). Ví dụ về wireframe (bên trái) và mockup (bên phải) của bản thiết kế name card

WHY ? tại sao phải dùng mockup

1. Nó là phương tiện tốt nhất để coder “liên lạc” với khách hàng Thông thường, ở các công ty, doanh nghiệp người nhận dự án về sẽ là anh BA hoặc PM, hoặc thằng nào đó bưng về cho team làm. Coder, programer không tiếp xúc cũng như nói chuyện trực tiếp với khách hàng. Đoán xem, khi coder code tới một phần nào đó, nó thắc mắc chỗ này khách hàng muốn hiển thị như thế nào ?, tèn ten…mở file mockup ra xem và code theo y chang vậy. Xong việc đi ngủ.

2. Cách giải quyết mâu thuẫn giữa các “designer” Giả sử trường hợp bạn làm 1 trang bán hàng và đặt nút “Mua ngay” màu đỏ để gây chú ý hơn, nhưng thằng tester lại đòi nó màu xanh ?? (rảnh vậy ba). Mình cũng từng chứng kiến nhiều cuộc cãi nhau về vấn đề này và thấy cách tốt nhất là mở mockup lên và check. Đơn giản vì khi kí hợp đồng, khách hàng đã chốt và đồng ý với bản thiết kế đó rồi.

3. Đẩy nhanh tiến độ dự án Vì khi đã có mockup ta chỉ việc code và thiết kế y chang vậy, không cần ngày nào cũng phải hẹn gặp khách hàng để chốt giao diện nữa. Tiết kiệm tối đa thời gian cho đôi bên.

4. Đảm bảo sự nhất quán về giao diện Giống những cái lí do trên, vì programer sẽ chỉ lập trình trên giao diện được thiết kế sẵn, nên sẽ loại được khả năng bạn A thích màu đỏ nên code theo tông đỏ, bạn B thích vàng theo tông vàng,…

5. Cái lý do thứ 5 này mình tự nghĩ ra nhưng cảm thấy nó khá đúng, các bạn kham khảo thử nhe Khi thiết kế giao diện người dùng có 1 điều mà ai cũng phải biết đó là “tránh những yếu tố bất ngờ”. Người dùng (end-user) là có 1 trái tim mỏng manh và yếu đuối, họ sử dụng phần mềm của mình để giải quyết nhu cầu của họ, trường hợp xảy tình huống bất ngờ (error exceptions) sẽ làm cho người dùng bối rối và không quay lại sử dụng sản phẩm của mình nữa. Nói vòng vo quá, vậy nó liên quan gì đến mockup ko ?

• Quay lại bài toán chị Trinh, nếu mình chỉ đưa bản wireframe chứ không đưa mockup thì sao ? thuận lợi thì sản phẩm làm ra không có lỗi gì hết, giao diện như wireframe. Trường hợp xấu khi làm xong website, trên ipad sẽ như này:

Giao diện website được các coder chọn màu tự do, không thống nhất

Giao diện website bị vỡ layout trên ipad

HOW ? vẽ mockup bằng cách nào ?

Cái này mình vẫn đang tìm hiểu vài cái, sư huynh nào biết chỉ em với.

Kết luận Mockup đem lại sự tiện lợi cho cả khách hàng và người sản xuất (phần mềm nói riêng các sản phẩm khác nói chung) rất nhiều. Vời các dự án phần mềm có kèm theo các bản wireframe và mockup sẽ được đánh giá cao hơn và tỉ lệ thành công của dự án cũng cao hơn hẳn.

Các hình ảnh và frame trong bài viết đều là lượm lặt trên mạng, có kèm nguồn trong ảnh. Bài viết này dựa theo đánh giá khách quan của bản thân mình, mời các sư huynh có nhiều kinh nghiệm nhận xét để bài viết mang lại giá trị tốt hơn. Tks m.n.