Sketch, Wireframe, Mockup, Prototype là gì và ví dụ? + 4 Loại MVP và bạn nên xây dựng loại nào? + Tạo MVP ứng dụng di động chỉ từ spreadsheet với Glideapps

 

Sketch, Wireframe, Mockup, Prototype là gì và ví dụ?

Giới thiệu

Sketch, Wireframe, Mockup, Prototype là những thuật ngữ thường gặp khi thiết kế UI/UX hoặc phát triển phần mềm. Bài viết sẽ giúp bạn hiểu và phân biệt được 4 thuật ngữ trên nhé

Sketch là gì

Là quá trình phác thảo nhanh ý tưởng lên giấy hoặc bảng. Lúc này bạn đang brainstorm ý tưởng nên vẽ tay sẽ nhanh nhất.

Như hình bên dưới, mình và thằng bạn sketch ý tưởng cho tính năng learning path dùng UI giống branch của Github.

Sketch ý tưởng trên giấy

Thường ở giai đoạn này chúng ta mới có ý tưởng chung chung cho các tính năng thôi, nên vẽ ra ngay cho khỏi quên. Với những ý tưởng mới, sketch bằng tay là cách hiệu quả nhất để các thành viên trong team thảo luận, đóng góp ý kiến, cái nào chưa được là dùng tay gạch ngay luôn.

Wireframe là gì? (wire: dây thép; frame: khung)

Có thể coi là khung xương (skeleton) của web/app. Nó là một giao diện đơn giản, tuy nhiên nó mô tả được cơ bản luồng ứng dụng của bạn: Click vào một button thì điều gì xảy ra, các screens liên quan với nhau thế nào?

Như bên dưới là wireframe màn hình Xem hoá đơn của ứng dụng hoá đơn điện tử.

https://imgur.com/a/VD71iV9

Tool mình hay dùng để wireframe là Balsamiq

Mockup là gì? --> tạm dịch: mô hình thu nhỏ; nguyên mẫu thiết kế 

Ở giai đoạn này, bạn bắt đầu thêm các yếu tố design vào wireframe như màu, font, hình ảnh, logo, vv

Bên dưới là mockup của ứng dụng kết nối phụ huynh với bên tổ chức hoạt động cho thiếu nhi. Cái app này team mình làm để thi Game UIT Hackathon.

Mockup ứng dụng

Tool mình hay dùng: Sketch

Prototype là gì? --> tạm dịch: nguyên mẫu; mẫu chuẩn

Prototype là một mockup nhưng có thêm phần UX. Có nghĩa là ta có thể click vào một button, có thể chuyển screens, có thể show dữ liệu giả, vv.

Đa số các tool prototype giờ đều hỗ trợ mạnh mẽ như import từ file PSD, Sketch sau đó cho phép export ra web hoặc share prototype trực tiếp cho người khác. Khi share người khác có thể click, tương tác với prototype của bạn luôn.

Tool mình hay dùng là: XD, Invisionapp

Kết

Hy vọng với các định nghĩa và ví dụ trên đã giúp bạn phân biệt được các thuật ngữ Sketch, Wireframe, Mockup, Prototype là gì cũng như các giai đoạn thiết kế UI/UX. Mọi ý kiến phản hồi, đóng góp mọi người để ở phần comment nhé.

nguồn: https://niviki.com/sketch-wireframe-mockup-prototype-la-gi-va-vi-du/

4 Loại MVP và bạn nên xây dựng loại nào?

https://niviki.com/4-loai-mvp-va-ban-nen-xay-dung-mvp-nao/

MVP là gì?

MVP - Minimum Viable Product (Sản phẩm khả thi tối thiểu), là sản phẩm được tạo ra nhanh nhất có thể nhằm giải quyết vấn đề cốt lõi của khách hàng, kiểm tra thị trường và nhận định sản phẩm có tiềm năng hay không. Qua đó quyết định có tiếp tục phát triển theo sản phẩm gốc hay thay đổi cho đến khi nào sản phẩm đạt được Product/Market Fit thì thôi.

Ví dụ Facebook, lúc MVP mới ra chỉ có tính đăng status, có comment. Hết. Chưa có nút like, thả tim, livestream, fanpage, group gì hết.

Và cũng chỉ đem test cái MVP đó test trên một tập user nhỏ nhất định. Facebook lúc mới ra cũng chỉ các trường đại học sử dụng.

No product MVP vs Product MVP

Nhưng bạn có biết rằng sẽ có nhiều loại MVP khác nhau không. Mình cũng luôn khuyên mọi người để kiểm tra ý tưởng thì cũng không nhất thiết phải xây dựng MVP với nhiều tính năng. Vậy cũng xem có những loại MVP nào nhé.

Mình tạm chia thành 2 loại:

• No product MVP: Là MVP không cần phải xây dựng app/website mà vẫn có thể kiểm tra ý tưởng được.
• Product MVP: Loại này bạn cần phải xây dựng app/website có tính năng dùng được.

1. Smoke Test và Sell Before You Build MVP

Mình xếp 2 cái này vào 1 loại vì chúng khá giống nhau.

Smoke Test

Smoke Test là phương pháp để kiểm tra thị trường, xem thử những giả định của bạn về sản phẩm có đúng không, thị trường phản ứng thế nào?

Ví dụ bạn có thể chạy chiến dịch Facebook Ads, Google Adwards. Khi khách hàng click quảng cáo sẽ dẫn đến Landing page của bạn. Bạn có thể đặt call to action ở Landing page như thu thập email khách hàng tiềm năng.
Dropbox khi xưa cũng làm như vậy, họ làm một landing page có 1 video giới thiệu app và thu thập email của khách hàng tiềm năng.

Landing page của Dropbox

Sell Before You Build MVP

Khá giống như Smoke Test, bạn vẫn chưa xây dựng sản phẩm vội nhưng bạn đã thu tiền khách hàng trước. Ví dụ như crowdfunding trên Kickstarter hoặc bán khoá học trước rồi mới dạy.

Bạn có thể chạy quảng cáo, gửi email tới danh sách có sẵn đều được.

Ưu điểm

• Chi phí cực thấp theo kiểu pay-as-you-go. Tức là bạn muốn test trên nhiều đối tượng thì có thể chạy nhiều quảng cáo.

Khuyết điểm

• Cách này thường hiệu quả khi bạn đã có thương hiệu, tên tuổi trong lĩnh vực hoặc ít những là đã có lượng follow, subscribers nhất định. Với đa số khách hàng, 1 cái landing page và chưa biết bạn là ai thì không đủ thuyết phục được họ.

2. Concierge MVPs (MVP thủ công)

Concierge MVPs là thực hiện thủ công các công việc để giúp users đạt được mục đích của họ khi sử dụng MVP của bạn. ---> "chạy bằng cơm"

Ví dụ: Bạn đang xây dựng phần mềm hẹn hò, mai mối. Thay vì bỏ tiền xây dựng ứng dụng, website gì đó. Bạn cho khách hàng tiềm năng đăng ký vào một cái Google form. Rồi bạn tự đọc profile và matching họ lại với nhau. Sau đó bạn lại tự gọi điện để lên lịch hẹn gặp cho họ. Bạn vẫn có thể thu tiền với hình thức này.

Ưu điểm:

• Bạn được nói chuyện trực tiếp với từng khách hàng một, hiểu được nỗi đau (pain) của họ. Ví dụ ứng dụng hẹn hò ở trên, bạn biết được đàn ông, phụ nữ họ sẽ muốn gì ở đối phương. User cởi mở chia sẻ những thông tin gì, những thông tin nhạy cảm nào họ không muốn nói với người khác. Từ đó bạn có thể cải thiện được dịch vụ/sản phẩm của bạn qua từng khách hàng.
• Bạn không tốn chi phí để xây dựng app/website. Bạn có thể nói thẳng với khách hàng là bạn đang xây dựng ứng dụng, nhưng trong giai đoạn này thì mọi thứ được làm thủ công. Lúc này, bạn có thể dùng những kỹ thuật phỏng vấn khách hàng để định hình lại các tính năng chính nhằm xây dựng phần mềm sau.

Khuyết điểm

• Vì làm thủ công nên bạn chỉ tiếp cận được 1 số lượng khách hàng nhất định. Điều đáng sợ nhất là liệu thử nghiệm trên tập khách hàng này có đủ phản ánh cả thị trường. Ví dụ 10 người đầu tiên bạn gặp đều đăng ký hẹn hò, 3 cặp đôi thành công. Nhưng liệu đây có phải chỉ là giả định trên 1 tập khách hàng nhỏ.
• Tốn thêm thời gian vì trước sau gì bạn cũng phải xây dựng website, ứng dụng. Concierge MVP sẽ tốn bạn 1 khoảng thời gian làm thủ công sản phẩm/dịch vụ của bạn nữa.

3. Wizard of Oz MVP (Bàn tay phù thuỷ)

Với loại này, một số tính năng chính của sản phẩm, ở ngoài nhìn vô tưởng vậy nhưng bên trong cách thực hiện lại khác.

Vẫn là ví dụ hẹn hò ở trên, nhưng bạn muốn có tính năng AI (trí tuệ nhân tạo) dựa vào profile (bao gồm sở thích, công việc, tôn giáo, thu nhập, độ tuổi, vv) mà recommend user những người có thể phù hợp với họ.

Việc xây dựng thuật toán matching, phát hiện faked profile để đạt tới độ chính xác cao có thể mất cả năm. Nhưng với Wizard of Oz MVP, bạn thể xây dựng app bình thường, nhưng tính năng AI này, bạn tạm thời xây dựng 1 tool để con người tự làm. (Như show Bạn muốn hẹn hò ý)

Nhìn từ bên ngoài, app bạn có 1 tính năng matching hoàn hảo.

Ưu điểm

• Trong những ngày đầu, bạn sẽ không đủ nguồn lực để xây dựng những tính năng phức tạp. Nên bạn tự làm hoặc thuê người làm thủ công sẽ ổn hơn nhiều để kiểm tra ý tưởng.
• Bạn có thể lấy feedback từ khách hàng sớm hơn. Không ai có thể đợi bạn cả năm để xây dựng thuật toán cả.
• Khác với Concierge MVPs, User đã có thể tương tác với sản phẩm của bạn rồi. Có nghĩa là bạn đã có thể kiểm tra ý tưởng của mình với ứng dụng thực tế, không phải mọi công đoạn đều thủ công như Concierge MVPs

Khuyết điểm

• Cái tính năng chính mà bạn đang thực hiện thủ công như việc matching profile ở ví dụ trên cần những chuyên gia trong lĩnh vực đó. Không phải ai cũng kinh nghiệm "tình trường" để ghép đôi phù hợp.
• Với góc độ kinh doanh, việc giới thiệu 1 tính năng/công nghệ nhưng thực sự bên trong không áp dụng chúng có vẻ hơi "gian dối". Vì thế bạn cần có lộ trình cụ thể: Nếu kiểm tra ý tưởng thành công thì khi nào bắt đầu áp dụng những thứ bạn quảng cáo với khách hàng.

4. Functional MVP

Functional MVP là sản phẩm có đầy đủ tính năng cần thiết để vận hành. Functional MVP sẽ lược bỏ những thứ chi tiết, fancy (tính năng cầu kỳ) đi để hoàn thành trong thời gian sớm nhất.

Ví dụ app hẹn hò ở trên, tính năng giới thiệu bạn bè để được điểm thưởng (Refer a friend) là không cần thiết, không cần làm.

Ưu điểm

• Functional MVP sẽ đầy đủ tính năng cần thiết nhất nhưng vẫn đảm bảo tính tinh gọn (lean) nhất.

Khuyết điểm

• Là loại MVP tốn chi phí và thời gian làm nhất. Founders cần hiểu rõ, tự tin về thị trường, nhu cầu thì mới bắt đầu làm.
• Cần có người có chuyên môn về lĩnh vực đang làm cũng như về công nghệ để xác định được tính năng nào là cần thiết, tính năng nào là chưa cần thiết.

Kết

Tóm lại, sẽ có non product MVP và product MVP bao gồm Smoke Test, Sell Before You Build MVP, Concierge MVPs, Wizard of Oz MVP, Functional MVP. Độ phức tạp tăng dần.

Có một số loại MVP bạn cũng không cần code hoặc sử dụng các tool no-code để thực hiện.

Tuỳ theo kinh nghiệm, độ tự tin của bạn về thị trường mà lựa chọn loại MVP phù hợp để xây dựng nhé.

----

Tạo MVP ứng dụng di động chỉ từ spreadsheet với Glideapps

https://niviki.com/tao-mvp-ung-dung-di-dong-tu-spreadsheet-voi-glideapps/

Giới thiệu

Hôm nay mình sẽ giới thiệu và hướng dẫn các bạn GlideApps - một tool thiết kế ứng dụng mobile bằng việc kéo thả (drag and drop), dữ liệu sẽ đồng bộ với Google SpreadSheet.

Với việc tạo MVP ứng dụng di động thì mình nghĩ GlideApps có thể phần nào đáp ứng được nhu cầu của mọi người.

Tổng quan tính năng

Ý tưởng của GlideApps là chuyển file Google Spreadsheet (excel) thành ứng dụng di động. Xem spreadsheet như là database của ứng dụng.

GlideApps hỗ trợ Progressive Web App, nên bạn có thể share url đến ứng dụng của bạn và user cài đặt dễ dàng. Bạn có thể cập nhật ứng dụng mà không qua Appstore hoặc Google Play Store cũng được.

Tổng quan tính năng:

• Mỗi 1 sheet tương ứng với một tab tính năng trên mobile app.
• Hỗ trợ sẵn các layout, control thông dụng
• GlideApp sẽ cung cấp tính năng authentication (đăng nhập) cho bạn để lấy dữ liệu từ user
• Có sẵn tính năng comment, add to favorite
• Thêm xoá sửa dữ liệu 2 chiều từ app <-> spreadsheet
• Có hỗ trợ dữ liệu kiểu quan hệ: one-to-one, one-to-many, many-to-many (chưa support, phải cheat)
• Hỗ trợ sẵn tính năng chat

Khuyết điểm:

• Không hỗ trợ notification
• Không hỗ trợ hết các control của mobile app
• Không thể custom layout của app nhiều. Chỉ dựa trên những layout có sẵn

Tiếp theo, mình sẽ hướng dẫn bạn xây dựng một ứng dụng ecommerce cơ bản: Organic Food. App này mình tốn khoảng 2h để làm, tính luôn thời gian tìm hiểu, đọc document, hướng dẫn của Glide.

Tổng quan về giao diện thiết kế ứng dụng của GlideApps

1. Sidebar bên trái để tuỳ chỉnh: Navigation (update các tabs), Screens (chỉnh nội dung của 1 màn hình), Settings (các cài đặt chung), Reload lại sheet để cập nhật dữ liệu và share app
2. Screen: Khung hiển thị các control của màn hình đang chọn
3. Đổi platform sang iOS <-> Android
4. Tab để lựa chọn Layout, Features
5. Các components đang có của screen hiện tại. Bạn thêm 1 component bằng cách click vào dấu + ở trên cùng nhé

Xây dựng một ứng dụng thương mại điện tử Organic Food cơ bản

Tổng quan thì app sẽ có 4 tabs: Home, Sản phẩm, Danh mục và Cart (Giỏ hàng).

Ứng dụng hoàn thành ở đây, bạn có thể dùng điện thoại để vào link sau và trải nghiệm nhé https://organic-food.glideapp.io

Chuẩn bị file spreadsheet

Bạn vào Google Drive và tạo cho mình 1 spreadsheet với 4 sheet tương ứng Home, Sản phẩm, Danh mục và Cart (Giỏ hàng) Bạn có thể tải file excel của mình ở đây để tham khảo nhé

Home

Vì trang home chỉ là trang giới thiệu, nên bạn chỉ cần 1 row dữ liệu và Layout là Details. Bạn click vào dấu + ở góc trên bên phải để thêm component nhé. Ở trang Home, mình đang có 3 components.

Component Title lại có các dữ liệu con, bạn click vào để mapping các trường dữ liệu cho đúng với sheet Home bên spreadsheet nhé.

Danh sách sản phẩm

Vì trang sản phẩm là danh sách nên bạn cần chọn Layout là một trong các loại sau:

• List
• Compact List
• Tiles
• Columns
• Gallery

Ở đây mình đã chọn Layout là Columns

Bên dưới ở phần Data, bạn map các cột dữ liệu bên spreadsheet cho đúng nhé

Chi tiết sản phẩm

Glide tự hiểu là Layout dạng list sẽ có thêm phần chi tiết. Do đó, ở màn hình Danh sách sản phẩm, bạn click vào chi tiết một sản phẩm. Ở màn hình chi tiết, bạn có thể tuỳ chỉnh các component cho phù hợp.

Vì bạn đang ở tab Sản phẩm nên vẫn dùng dữ liệu từ sheet Products. Nên bạn có thể map các dữ liệu khác như mô tả sản phẩm ở trong trang chi tiết này.

Nút mua - Form Button

Form là để bạn thu thập dữ liệu người dùng. Ví dụ trong trường hợp app demo này, mình muốn user nhập thêm số điện thoại.

Tương tự như trang chi tiết sản phẩm, Glide tự tạo 1 page riêng cho phần form này. Để edit page này, bạn click vào component Form Button

• Sheet nhận dữ liệu: Là sheet bạn đổ dữ liệu của user vào, ở đây mình chọn sheet Carts
• Component hiển thị: Là những component mà user có thể nhìn thấy, có thể điền input của họ vào
• Component ẩn: Là những trường bạn cần để mapping dữ liệu. Hiện tại cái Form Button này đang ở screen Sản phẩm, tức là bạn đang có các trường của 1 row trong sheet Products. Bạn có thể đổ các trường này vào 1 row của sheet nhận dữ liệu (sheet Cart).

Lưu ý, để lấy được email của user, bạn cần chọn loại sign in của app là Public with email

Danh mục sản phẩm

Với screen này, ta sẽ áp dụng tính năng reference: one-to-one và one-to-many của GlideApps. Một sản phẩm thuộc 1 danh mục. Một danh mục sẽ có nhiều sản phẩm.

Khi user vào chi tiết 1 sản phẩm sẽ click vào được danh mục của sản phẩm đó. Khi vào danh mục sẽ có list danh sách sản phẩm. Chi tiết về reference của GlideApps, bạn đọc thêm tại đây.

one to one:

tên cột=sheet đang trỏ tới : tên cột trong sheet đó

one to many:

Bạn cần duplicate 1 cột reference trước, sau đó đổi tên cột như sau

tên cột=sheet đang trỏ tới : tên cột trong sheet đó : Multiple

Ở trang danh mục, bạn chọn Layout là Tiles cho đẹp.

Ở trang chi tiết 1 danh mục, bạn thêm 1 component là Inline List để hiển thị danh sách

Vì bạn đã cài đặt reference bằng cách đổi tên cột như trên, nên khi vào Inline List, bạn có thể lấy được các cột dữ liệu bên sheet Product để hiển thị

Carts

Carts - Giỏ hàng để lưu lại những sản phẩm mà một user đã chọn ở screen Chi tiết sản phẩm. Để mỗi user thấy một danh sách sản phẩm đã mua riêng biệt, bạn vào tab Features và chọn Filter data by user và chọn cột email.

Share, public app

Ở gói Free thì lúc bạn share app sẽ có logo, domain của GlideApps.

Việc share app khá đơn giản, bạn chỉ cần share đường link cài đặt là được.

Ứng dụng demo hoàn thành ở đây, bạn có thể dùng điện thoại để vào link sau và trải nghiệm nhé: https://organic-food.glideapp.io

Sắp tới thì GlideApps mới cho public lên store.

Pricing

Với gói Pro App, khoảng $19/tháng, mình nghĩ cũng ổn. Không mắc, không rẻ. Nhưng phải chi tận $99/tháng để được public lên store như gói Business App là khá mắc so với các nền tảng khác

Kết

GlideApps có ý tưởng khá độc đáo là biến spreadsheet thành mobile app. Mình biết có nhiều team, công ty vẫn dùng excel, Google Sheet để làm việc hằng ngày.

Trước mắt với các tính năng hiện tại thì GlideApp có thể xây dựng những MVP cơ bản, ít sự tương tác, đặc biệt là có thể làm tool nội bộ thay thế cho việc 'dùng chay' spreadsheet.

Mình nghĩ trong tương lai, họ sẽ thêm nhiều tính năng để người dùng custom app được nhiều hơn. Còn bạn thì sao, bạn nghĩ gì về nền tảng tạo mobile này, để lại comment bên dưới nhé?

À, nếu trong quá trình dùng, bạn có gặp khó khăn gì cứ comment mình sẽ support cho nhé.

nguồn: https://niviki.com/tao-mvp-ung-dung-di-dong-tu-spreadsheet-voi-glideapps/