Khi mình làm việc với nhiều anh em Business Analyst, mình thấy nhiều bạn dùng các từ Sketch, Wireframe, Mockup và Prototype đôi lúc sai ngữ cảnh, ý nghĩa. Nên mình viết lại bài này, hi vọng sẽ giúp bạn hiểu hơn về các khái niệm, dùng khi nào và cách dùng cho hợp lý nhé.
1. Sketch
Là bản phác thảo một cái gì đó trên giấy hoặc trên bản vẽ ở máy tính.
Nó cung cấp cho mình những thông tin cơ bản.
Sketch
DÙNG KHI NÀO?
Thường là giai đoạn đầu của việc phân tích, mình hình thành ra ý tưởng, luồng, màn hình cơ bản.
Mình hay vẽ đại ra trên giấy để có cái nhìn vô một cách trực quan để dễ hình dung và phân tích.
CÁCH DÙNG:
Vẽ đơn giản, dễ hình dung,tiết kiệm thời gian, vẽ miễn sao dễ hiểu và nhanh, dễ truyền đạt ý tưởng chứ không cần vẽ cho đẹp.
Dùng giấy, hoặc phần mềm Excalidraw, Balsamiq, Figma
2. Wireframe
Là kiểu thiết kế có các thông tin cơ bản, giao diện cơ bản đủ thành phần (ví dụ phải đủ các trường, dữ liệu, nút button…)
Và bản thiết kế này thì không cần màu mè gì nhiều, không cần quá đẹp, nhìn vô là hiểu trên màn hình sẽ có nội dung ra sao, nút đặt chỗ nào, …
Wireframe
DÙNG KHI NÀO?
Trong khi phân tích chi tiết, viết tài liệu nghiệp vụ, business rule, trước khi làm UI, khi làm các bước về luồng màn hình.
Giúp cho thấy được sự luân chuyển giữa các màn hình (điều hướng), cách các màn hình làm việc với nhau.
CÁCH DÙNG:
Vẽ đơn giản, đầy đủ thông tin trên màn hình,dễ hình dung,tiết kiệm thời gian.
Đừng thêm màu mè quá nhiều, chỉ dùng các màu đơn giản để đánh dấu tạo điểm nhấn, nút quan trọng,…
Thông tin trên màn hình nên đầy đủ về trường, nút, …
Đi kèm với mô tả Business Rule hoặc viết tài liệu hoặc comment/chú thích.
Vẽ đường mũi tên để chỉ sự điều hướng giữa các màn hình, hoặc đôi lúc gắn nút điều hướng trên ứng dụng design để có thể thể hiện sự tương tác giữa các màn hình => giúp cho việc trình bày với KH, stakeholders khác dễ hình dung hơn.
Mình hay dùng Balsamiq, Figma, Excalidraw, Adobe XD, Giấy, hoặc Ipad (với bút) để tạo wireframe.
3. Mockup (UI)
Là kiểu thiết kế trực quan, khá giống với phiên bản thực tế khi xây dựng web/ứng dụng. Có màu đầy đủ, có mấy yếu tố như đổ bóng, viền, animation kèm theo,…
Vẽ kỹ tới mức mà Front-end designer có thể nhấn vào và xem kích thước chính xác, có các thành phần CSS, responsive.
Mình làm công ty thì thấy mọi người hay gọi là UI, Bảng design
Mockup
DÙNG KHI NÀO?
Thường thì BA chả đụng gì trong phần thiết kế UI mà chỉ làm phần review luồng, nút có đủ chưa, phù hợp với tính năng nghiệp vụ đang làm hay không?
Thường được làm sau bước đã xong tài liệu nghiệp vụ/hoặc làm song song dạng cuốn chiếu với tài liệu nghiệp vụ.
Được dùng khi thiết kế trực quan, cụ thể để từ đó dựng nên giao diện web/ứng dụng.
Khi mà cần đánh giá yếu tố màu, phong cách, thương hiện, phối giữa các đối tượng giao diện, hình ảnh, sự chuyển động.
CÁCH DÙNG:
Thường BA ít/không làm phần này, mà là Designer sẽ lo, do đó BA có thể đi sâu vào mục review đánh giá, góp ý cũng như bổ sung thêm các thông tin còn thiếu trên giao diện, hay sự tương tác giữa các màn hình sao cho khớp với yêu cầu nghiệp vụ.
Nếu bạn có kỹ năng về phần giao diện này thì bạn có thể góp ý cũng như đưa ý kiến cá nhân nếu thấy sản phẩm mockup chưa được phù hợp.
Prototype
Là một bản như Mockup mà nó có thể hoạt động được khi mình gắn sự liên kết giữa các màn hình và user có thể thao tác được. Mục tiêu chính là để mô phỏng sự tương tác giữa người dùng và giao diện.
DÙNG KHI NÀO?
Phần này thường bên BA dùng để đi trình bày với khách hàng, stakeholders, mô phỏng ứng dụng thực tế
Hoặc có thể xem và đánh giá trước khi code để chắc chắn rằng bản giao diện phù hợp, luồng tính năng hợp lý, hoặc làm cả việc nhờ người dùng đánh giá,…
CÁCH DÙNG:
Cũng là phần Design lo là chính, BA thường phụ phần gắn tương tác giữa các màn hình.
Lưu ý khi bật prototype thì chọn màn hình cho phù hợp, mà mở ở mức 100% để cảm nhận nó giống thật, không bị phóng to, hay thu nhỏ mà đánh giá sai về giao diện.
Với mình thì mình đánh giá cả độ tương phản, rồi test WCAG.
Ngoài ra Prototype còn hay được dùng cho các ứng dụng xây tạm thời, mô phỏng giao diện và build ra app/web để đưa ra cho người dùng thấy (có thể viết một vài tính năng cơ bản mà chưa xây dựng đủ, dùng dữ liệu giả,…)
Kết bài.
Cảm ơn bạn đã đọc bài viết của mình, nếu có gì sai sót hoặc chưa đúng thì để lại comment cho mình nhé.
Team mình đã dành giải nhất 10K$ trong cuộc thi SOLANA CODING CAMP VIỆT NAM và
6 bước mình thực hiện trong quá trình Business Analysis với vai trò lại một BA như thế nào?
1. Tiếp cận dự án & trao đổi business & idea (Elicit)
Anh em ngồi lại thảo luận ý tưởng và chọn 1 ý tưởng thấy phù hợp để tham gia Coding camp. Các ý tưởng là tự bộ những tính năng team mình dự kiến build cho công ty để xây dựng sản phẩm hoàn hảo.
Thảo luận về ý nghĩa thực sự của tính năng, giúp cho user làm gì? Tương lai phát triển tính năng ra sao (Ở đây là thảo luận để thực hiểu về Business, cách business vận hành, problem và solutions)
2. Phân tích & nghiên cứu giải pháp
Mình dùng các kỹ thuật khơi gợi (trong chính mình) để phân tích các tính năng, vẽ ra user flow, các trường hợp có thể xảy ra.
Vẽ sketch, mình dùng phần mềm excalidraw để vẽ ra những trường hợp xảy ra, lên phát hoạ ý tưởng, hình dung tính năng nó như thế nào, sẽ có những nút nào, những màn hình như thế nào,… chọn lọc và đưa ra những phân tích sơ khởi để đi đến bước tiếp theo…
Sketch
Vẽ wireframe, mình cũng tiếp tục dùng excalidraw để vẽ wireframe, nhưng vẽ lộn xộn từ luồng màn hình, các thành phần trên màn hình, vị trí tính năng, một số diagram, vẽ tất cả những gì mà sản phẩm có thể xây dựng được.
Ở bước này vì khơi gợi và chưa chốt cụ thể tính năng nào sẽ build, scope ra sao nên mình ghi ra tất cả những gì mình phân tích và các trường hợp/ tính năng có thể build
Wireframe
3. Trình bày giải pháp
Call với anh em trong đội ngũ phát triển dự án để trao đổi về giải pháp, thảo luận và chọn ra những tính năng cần xây dựng trong thời gian ngắn là 5 tuần.
Chốt scope và chốt giải pháp từ nghiệp vụ đến technical.
Phân chia công việc
4. UI & Business rule
Scope wireframe về Figma & vẽ rõ luồng hơn để nhiều người nhìn vô dễ hiểu, sẽ khác với wireframe ở mục 2, phần wireframe này sẽ gọn gàng, ngăn nắp, vẽ các mũi tên điều hướng chỉ sự tương tác giữa các màn hình rõ ràng hơn để anh em phát triển dự án theo dõi dễ hơn.
Arranged Wireframe
UI vẽ cuốn chiếu, vẽ màn hình nào thì sẽ review và chỉnh sửa đến đó, cùng thời điểm đó Dev FE cũng sẽ theo dõi và làm dần.
BE/Smart Contract Dev viết code theo Wireframe & Business Rule mình đã định nghĩa ở mục Wireframe đã chốt scope (ở mục 4)
FE dev theo UI, và code cuốn chiếu cùng lúc với thời điểm vẽ và review UI.
Review checklist & test UI cùng với tester để tìm ra lỗi UI, từ đó kịp thời sửa chữa lỗi ngay thời điểm làm UI.
Lắp ráp FE & BE, SC để thấy sự tương tác giữa các tính năng, giữa BE và FE, cả về Smart Contract.
Test functional để tìm ra lỗi hoạt động của tính năng, cũng như tích hợp tính năng.
Luôn cập nhật Business rule & Review UI cùng với anh em để có thông tin mới, chính xác nhất.
6. UAT
Test sau khi sản phẩm hoàn thiện xem có đáp ứng yêu cầu không, nếu chưa đáp ứng thì feedback và chỉnh sửa bổ sung cho phù hợp, còn nếu đã hoạt động ok rồi thì anh em mang đi nộp bài và nhận giải thôi.
Kết bài.
Từ 6 bước của mình, bạn có thể áp dụng cho các dự án mà các bạn đang thực hiện, đây cũng là quy trình mà mình thực hiện khi tham gia các dự án thông thường khác, chỉ khác là mình thực hiện chi tiết, cẩn thận và viết tài liệu đầy đủ hơn.
Hi vọng bài viết sẽ giúp ích cho quá trình làm Business Analysis của các bạn.
Cách đây hơn hai tháng, mình có làm một dự án từ đầu, có luồng đăng nhập bằng email.
Mình có cùng làm với một bạn BA khoảng 2 năm kinh nghiệm, khi mà chia sẻ cho bạn ấy về những lưu ý các loại đăng nhập với email và cách tìm hiểu về UX để thiết kế luồng cho hợp lý với mong đợi của sản phẩm, thì bạn ấy bảo mình là mặc dù đi làm gần 2 năm nhưng lần đầu biết thêm những luồng đăng nhập với email mới này.
Nên sẵn dịp mình chia sẻ với mọi người
Các luồng đăng nhập với email có thể Business Analyst chưa biết hết.
Danh sách luồng đăng nhập với email mình biết
Đăng nhập với email và mật khẩu
Luồng này chắc ai cũng biết hết rồi nhỉ? Người dùng sẽ dùng email và password để đăng nhập, hệ thống sẽ kiểm tra email và password có tồn tại và hợp lệ, nếu có thì sẽ cho phép đăng nhập.
Login with email and password
Mật khẩu ở đây có thể được thay thế bằng mã code hoặc dãy mã số,… tuỳ hệ thống.
2. Luồng đăng nhập với email → Sau đó nhập mật khẩu.
Người dùng nhập email, và nhấn tiếp tục, hệ thống sẽ kiểm tra và biết được email này tồn tại trong hệ thống → Sẽ đi tiếp màn hình nhập mật khẩu.
Đăng nhập với email, nếu tồn tại email sẽ nhập mật khẩu.
Luồng này thì người dùng không cần phải thoát ra khỏi luồng đang thực hiện, vẫn cùng nằm trên 1 nhóm màn hình (về mặt UI)
Và người dùng cũng cần mật khẩu để đăng nhập, sau khi nhập chính xác mật khẩu sẽ cho phép đăng nhập vào tài khoản.
3. Luồng đăng nhập với email, hệ thống sẽ gửi 1 link vào email để đăng nhập
Khi nhập email, hệ thống sẽ kiểm tra xem có tồn tại tài khoản với email đã nhập hay không, nếu tồn tại thì nhận được 1 email có link, người dùng sẽ nhấn vào link đó trong email để mở ra 1 tab mới và đăng nhập.
Đăng nhập với link gửi về email.
Thường luồng này sẽ làm cho người không đi liên tục luồng đăng nhập trên 1 UI mà phải vào email và mở link để có 1 UI mới tiếp tục cho đăng nhập. ⇒ Luồng này thường người dùng không cần tạo mật khẩu.
Hoặc có thể kết hợp nhấn vào link và nhập mật khẩu/mã bảo mật để tiếp tục đăng nhập.
Với luồng đăng nhập qua link trong email này, thì luồng đăng ký cũng được thế kế tương tự khi nhập email mới sẽ gửi một link đến email cho bạn đăng ký tài khoản.
4. Luồng đăng nhập với email, và dùng OTP từ email để đăng nhập.
User sẽ nhập email và nhấn tiếp tục, hệ thống sẽ gửi OTP đến email, trên UI thì sẽ chuyển qua màn hình nhập OTP để đăng nhập.
Thường luồng này cũng không cần mật khẩu cho tài khoản.
đăng nhập với OTP gửi đến email
Về UX thì người dùng không cần phải thoát ra khỏi luồng giao diện đăng nhập, vẫn cùng trên 1 nhóm màn hình liên tục để nhập OTP. Người dùng chỉ cần vào email check OTP và nhập vào để thực hiện đăng nhập.
5. Đăng nhập với mật khẩu & cùng nhập thêm OTP.
Luồng này thường tăng thêm sự bảo mật cho đăng nhập.
Người dùng phải nhập mật khẩu, rồi còn nhập thêm OTP đúng đã gửi về email để xác thực đó chính là bạn thì mới cho đăng nhập.
Luồng này vẫn cần mật khẩu.
Đăng nhập với email và mật khẩu, kèm OTP
Ta có thể biến thể thành các loại luồng khác ví dụ: nhập email + password → Sau đó authen thêm OTP.
Login email password với otp
Luồng này nhằm tăng thêm bảo mật cho login với mật khẩu và người dùng không cần phải thoát ra khỏi luồng hiện tại, vẫn cùng trên 1 nhóm màn hình để nhập Password, OTP.
6. Đăng nhập với email → và đó dùng session đã đăng nhập được xét primary để xác thực đăng nhập.
Thường email ở đây đóng vai trò như một định danh của người dùng, và phát hiện tài khoản có thể đăng nhập bằng xác thực của một session (primary) đã đăng nhập trên ứng dụng.
Luồng này có rất nhiều trường hợp.
1. Chọn phương thức scan QR từ ứng dụng đã đang đăng nhập để xác thực (dĩ nhiên có nhiều options cho người dùng chọn, QR là một trong những option)
Người dùng nhập email và nhấn tiếp tục, hệ thống biết được email này tồn tại tài khoản và cho phép vào luồng đăng nhập, kèm theo đó tài khoản được phép đăng nhập từ 1 primary session thì hiển thị option chọn QR để đăng nhập.
Lúc này trên app đã đăng nhập tài khoản với email và được xét primary có thể quét để cấp quyền đăng nhập qua QR.
Đăng nhập email và sử dụng QR
2. Dùng OTP gửi đến message/notification trong App đang có session đăng nhập
Tương tự như QR, nhưng khi đăng nhập, sẽ gửi 1 mã OTP đến message hoặc notification trên ứng dụng đã đăng nhập trên ứng dụng mobile và từ đó người dùng có thể dùng OTP để đăng nhập.
Đăng nhập này không cần sài mật khẩu
Đăng nhập email, dùng OTP gửi tới ứng dụng đang có session primary
3. Đăng nhập với email và mật khẩu, nhưng cần xác thực cho phép đăng nhập trên device mới từ session primary.
Người dùng nhập email và mật khẩu -> nhấn tiếp tục, nếu tài khoản tồn tại và hợp lệ thì sẽ vào màn hình chờ xác thực từ session primary.
Từ ứng dụng trên mobile (primary device) có hiển thị yêu cầu đăng nhập trên thiết bị mới, lúc này người dùng sẽ chấp nhận để hệ thống cho phép người dùng đăng nhập trên thiết bị mới với email và password.
Đăng nhập email và mật khẩu, yêu cầu cho phép đăng nhập trên thiết bị mới
Kết bài
Hi vọng những chia sẽ trên sẽ giúp bạn biết thêm các luồng đăng nhập với email, từ đó có thể áp dụng phù hợp với dự án của bạn.
Nếu có luồng nào mình còn thiếu cho đăng nhập với email, bạn có thể để lại bình luận nhé, mình sẽ cập nhật bài viết.
Dưới đây là một số thuật ngữ mà mình hay sài cũng như nói chuyện với các bên khi xây dựng một token launchpad.
Launchpad
Thường được đi kèm với hình ảnh tên lửa được phóng lên bầu trời, với ý nghĩa là một nơi bệ phóng Token giúp cho các dự án dễ tiếp cận với nhà đầu tư, hay còn gọi là gọi vốn đầu tư dựa theo lượng users của công cụ launchpad đó hoặc ngược lại.
Vì là bệ phóng nên Launchpad có nhiều loại như ICO – Initial Coin Offering (Lần đầu phát hành token/coin), IDO – Initial Dex Offering – (Lần đầu phát hành token trên sàn DEX), IEO – Initial Exchange Offering (Lần đầu chào bán token trên sàn giao dịch crypto), IGO – Initial Gaming Offering (Lần đầu chào bán/phát hành NFTs/Mystery Boxes/Token liên quan đến GameFi), INO – Initial NFT Offering (Lần đầu phát hành NFT)
Token & Coin
Bạn tham khảo thêm nhiều bài viết để hiểu rõ hơn nhé. Để tránh mình mô tả ngắn gây hiểu sai lệch về 2 khái niệm này. Các từ khoá liên quan: Tiền điện tử, Crypto, Tiền mã hoá, …
White paper
Là một tài liệu để trình bày ý tưởng, kế hoạch phát triển dự án, kiến trúc hệ thống, phân chia token, dự báo tăng trưởng, … Nhằm mục đích chia sẻ minh bạch thông tin về dự án đến nhà đầu tư.
DYOR
Do your own research – bạn tự nghiên cứu về dự án để biết rằng dự án đó tốt không? Những người đi shill dự án chỉ là chia sẻ thông tin – họ không chịu trách nhiệm gì về việc đầu tư của bạn
ROI
Return On Investment – tỷ suất hoàn vốn, là chỉ số đo lường những khoản thu được so với chi phí bỏ ra (thường ở đây là tiền và thời gian).
Ví dụ bạn đầu tư 100$ và sau 1 năm bạn bán ra 500$ ⇒ ROI = ((500$-100$)/100$)*100% = 400%
KYC
Know your customer = quy trình xác minh danh tính của người dùng hoặc chủ dự án. Nhằm biết được người chủ dự án hoặc người tham gia là người thật.
Staking
Staking được hiểu là việc mang một lượng coins/tokens nhất định khoá lại để nhận được một lượng phần thưởng nhất định.
Ngoài ra bạn có thể tìm hiểu thêm Proof of Stake để rõ thêm nhé.
Smart Contract
Là bộ giao thức tự động thực hiện những điều khoản/thoả thuận giữa các bên dựa trên công nghệ blockchain.
Thường là smart contract sẽ được viết code và xử lý các logic mà được ví như những điều khoản trong hợp đồng.
Nhưng vì hợp đồng thường cũng có lỗ hỗng → có thể điều chỉnh hợp đồng cho phù hợp, nên smart contract cũng có upgradable.
Blockchain
Blockchain thì đóng vai trò như một bộ database phi tập trung, lưu trữ thông tin theo từng khối (block) và được liên kết với nhau bằng mã hoá, cứ theo thời gian thì các block này càng dài tạo thành một chuỗi (chain)
Vì là phi tập trung nên dữ liệu được nằm phân tán ở nhiều máy tính khác nhau, và các thông tin được liên kết với nhau và không thể phá vỡ nên thông tin cũng không thể bị thay đổi dưới bất cứ hình thức nào.
Chain
Từ này mình hay sài để chỉ các công nghệ blockchain/nền tảng khác nhau.
Ví dụ như Binance Chain, Etherium Chain, Solana Chain ⇒ Multi chain là đa chuỗi/đa nền tảng khác nhau.
Off-chain
Là các giao dịch xử lý và lưu trữ nằm ngoài blockchain
On-chain
Là các giao dịch xử lý và lưu trữ nằm trên blockchain
Audit
Là hành động kiểm tra code trên smart contract xem đã code tốt/có đảm bảo được bảo mật hay chưa? Nếu có lỗ hỗng bảo mật thì báo lại đội ngũ phát triển dự án điều chỉnh để tránh rủi ro về lỗi và hackers.
Một cái hay nữa là thường Audit giúp cho dự án uy tín hơn nhiều, và thu hút thêm nhà đầu tư.
Thường các dự án blockchain liên quan khá nhiều tới tài sản (coin/token) nên cần được audit cẩn thận bởi những đội ngũ có trình độ cao.
Nhưng không phải dự án nào audit rồi cũng an toàn 100% nha 😀
Pool
Mình định nghĩa từ này trong các launchpad mình tham gia, cũng như build.
Pool ở đây nghĩa là một nơi/một cái hồ/một contract address được sinh ra để chưa tokens/coins/NFTs/… từ đó dựa vào cơ chế xây dựng trên smart contract mà phân phối tokens sao cho phù hợp theo logic đã được định nghĩa.
Đôi lúc lại hiểu nó như một dự án launchpad.
Social task
Là các nhiệm vụ nhà đầu tư phải làm như chia sẻ lên facebook, theo dõi một bài viết, nhấn like, bình luận một bài viết, truy cập trang web,…
Mục đích tuỳ thuộc vào cơ chế hoạt động của dự án, có thể là để có quyền được tham gia launchpad của pool, hoặc có cơ hội, hoặc được quyền nhận miễn phí tokens,…
Whitelist
Kiểu như một danh sách các wallet hoặc một định danh nào đó đã được chọn lọc để có quyền tham gia một chương trình đặc biệt nào đó. Cụ thể ở đây là được quyền tham gia pool.
Tokenomics
= Token + economics: Thường là mô tả về cách token hoạt động trong nền kinh tế như: Tổng số lượng tung ra là bao nhiêu? vốn hoá như thế nào? phân bổ tokens ra sao? Các tiện ích gồm những gì?
FCFS
First Come First Served – ai đến trước thì được tham gia trước, thường là dành cho các pool được tham gia rộng rãi tới mọi người, và ai nhanh tay thì được tham gia trước.
Allocation
Sự phân bổ tokens, nhưng còn được hiểu là phần tokens được dành riêng cho một nhà đầu tư, một tổ chức đầu tư.
Ví dụ như cái bánh 10 phần chia cho 5 người, mỗi người 2 phần.
Thì 2 phần này là allocation của 1 người nào đó được chia.
Raffle
Là kiểu xổ số – quay ngẫu nhiên để chọn những người chiến thắng.
Vesting
Một nhà đầu tư nào đó tham gia để mua tokens, nhưng mà không phải được lấy toàn bộ token và ưng bán đi lúc nào thì bán. Mà phải được dự án giữ lại hoặc khoá lượng tokens đó lại, và chỉ được mở ra theo lộ trình nhất định. Quá trình này gọi là vesting → Nhằm tránh nhà đầu tư xả hàng hàng loạt hoặc thao túng thị trường → giúp cho dự án an toàn hơn, có thời gian để phát triển dự án.
DEX
Decentralized Exchange – là loại sàn giao dịch crypto phi tập trung. Thường mấy IDO Launchpad pool xong sẽ list trên DEX.
Lưu ý
Sẽ có những khái niệm trong blockchain mà bài viết này không thể mô tả hết được, bạn vui lòng tìm kiếm thêm trên google nhé.
Lúc mình làm BA tại công ty, có rất nhiều bạn Business Analyst mới dùng Balsamiq hay hỏi mình tải ở đâu, rồi cách crack công cụ này :D, sẵn dịp mới mở lại vụ viết blog, nên chia sẻ anh em Balsamiq Mockup miễn phí (key) nha.
Nhưng trước hết mình phải biết được Balsamiq Mockup là công cụ gì cho anh em nào chưa biết nhé.
Balsamiq wireframe là gì?
Đây là một công cụ mà giúp xây dựng nên những giao diện web/app dưới dạng wireframe bằng cách kéo thả những widget đã được tạo sẵn. Giao diện thì bao dễ sài, dùng vài lần là sài dễ như ăn chơi. Anh em có thể tìm thêm khóa học của mình về Balsamiq để học nhé, hướng dẫn chi tiết từ A tới Z luôn.
Trước kia khi mình dùng và hay kiểm tra trang web của Balsamiq thì tên của công cụ này là Balsamiq Mockup, nhưng hiện nay đã đổi qua tên mới là Balsamiq Wireframe.
Để hiểu hơn về Wireframe, mockup, sketch, prototype thì anh em đọc thêm 2 bài này nhé:
Balsamiq có 2 phiên bản, phiên bản desktop và cloud – và 2 phiên bản đều có trả phí. Nhưng trên các diễn đàn chia sẻ cách crack rất nhiều, riêng mình thì tìm được một số key từ một số diễn đàn và dùng thử, mình thấy rất tốt nên chia sẻ lại cho anh em sài phiên bản Desktop – Version Balsamiq Mockup 3.
Cảm ơn anh em đã đọc bài viết của mình nhé, hi vọng bài viết này sẽ giúp cho anh em sài được Balsamiq miễn phí nha. Nếu yêu thích bài viết của mình thì lâu lâu ghé thăm blog của mình nhé. Cảm ơn ae 😀
Đọc thêm về cách chia sẻ wireframe/mockup đến khách hàng khi làm Business Analyst nhé
Mình là một user của Adobe XD, phải nói là cực kỳ thích sài ẻm. Bắt đầu sử dụng từ phiên bản Beta đầu tiên tên ”Adobe Experience Design CC” vào tháng 03/2016, và còn sài đến hiện tại với tên chính thức là Adobe XD.
Mình sài Adobe XD từ việc làm đồ án thời sinh viên, đến khi đi làm thì sài ẻm trong công việc hằng ngày, đặc biệt là với công việc Business Analyst. Và ngay cả những lúc làm freelancer với anh em cũng mang XD ra để thiết kế dạng product design cho các dự án của team. Và cái hay của Adobe XD là được sử dụng miễn phí với phiên bản Starter Plan.
Nên khi đi làm việc mình sử dụng quen và thích sài XD là một chuyện thường tình. Trong lúc làm dự án với anh em trong công ty, mọi người thì sài Axure, mình thì sài XD nên không đồng bộ được, nên mình lên chị google tìm cách đồng bộ các source từ 2 bên với nhau – chưa kịp tìm được cách đồng bộ source, thì vô tình mình lượm được mẹo review wireframe/mockup dễ hơn khi kết nối XD và Axure Cloud.
Lưu ý là bài viết này dành cho những bạn thích sài XD (miễn phí) và muốn sử dụng thêm mẹo này, thay vì sài những công cụ có sẵn như Figma (miễn phí và trả phí), Axure (trả phí),…hoặc chính bản gốc Axure XD Share (bị giới hạn cho phiên bản Starter)
Tình huống review wireframe/mockup mà Business Analyst thường dùng.
Dưới đây là những tình huống review wireframe/mockup hay gặp:
Gặp khách hàng/đồng nghiệp (KH/ĐN) trực tiếp, mở file lên để review
Gửi nguyên file source cho KH/ĐN để họ mở trên phần mềm của họ và xem (điều không được hay đó là có thể khách hàng có thể không sài chung phần mềm với mình, do đó họ không mở được luôn, nên sẽ có trường hợp sài cách thứ 3 và thứ 4 dưới đây)
Export file hình ảnh/pdf và gửi cho khách hàng để họ xem và đánh giá trên hình ảnh, có thể là note comment ngay trên hình ảnh luôn.
Copy hình bỏ vô file word offline hoặc docs online cho khách hàng xem và review với tính năng comment trên word/docs (hoặc tool công cụ như excel,…).
Export ảnh ra và copy ảnh lên phần mềm cho phép review online (Ví dụ như Axure, Invision,…)
Sử dụng tính năng sharing and reviewing của công cụ đó (Ví dụ như Adobe XD Share designs and collaborate, Balsamiq sharing and collaborating) – nhưng công cụ này sài nhiều có trả phí.
Đối với bản thân mình thì từng sử dụng tất cả các cách trên, và mình dần dần chuyển đổi dần qua cách mới tốt hơn. Và mẹo mình chia sẻ ở bài viết này chính là cái mình thấy tiện và dễ sử dụng nhất, do đó chia sẻ cho anh em để dùng thử, biết đâu lại thích như mình.
Note: Bạn đọc nào chưa sài 1 trong 6 cách trên thì comment ở dưới, mình viết hướng dẫn cụ thể cho nhé.
Mẹo mà Hoàng hay sài
Đây là một tính năng trên Axure Cloud – gọi là Publishing Artboard Projects, tính năng này giúp user publish source từ các phần mềm khác: Sketch, Adobe XD, Figma, lên Axure Cloud và chia sẻ cho những thành viên khác, và có cả chia sẻ public – được comment không cần tài khoản Axure Cloud (Đây là điểm khác so với Figma).
Đặc điểm:
Hoàn toàn miễn phí (adobe XD starter + Axure Cloud)
Được sài XD theo mong muốn của bạn (giống mình, thay vì sài các tool tương tự)
Bước 5: Trong XD, chọn artboard muốn chia sẻ để publish lên Axure Cloud.
Bước 6: Trên top menu, chọn Plugins > Axure > Export Selection to Axure Cloud. (Lưu ý là phải mở app Axure Cloud trước nha, không mở nhiều khi lỗi không hoạt động được)
Bước 7: Trong Axure Cloud App, bạn chọn workspace và artboard project mà muốn publish lên. Nếu chưa có sẵn thì bạn tạo mới “Create New Project” và đặt tên dự án “Project Name” – và lưu ý bạn chọn Project size cho phù hợp nhé, ví dụ thiết kế ở size Iphone 12 thì chọn iPhone 12 (390 x 844)
Bước 8: Nhấn Upload, sau đó chia sẻ cho KH/ĐN để comment – và ở đây bạn cũng có thể chia sẻ với mật khẩu (Access Code) hoặc dạng private cho tài khoản cụ thể.
Bước 3: Chấm 1 điểm bằng click chuột trái vào vị trí muốn comment
Bước 4: Add comment
Bước 5: Nhấn Post
Bước 6: Bạn có thể comment bởi đăng nhập hoặc a guest (điền email bất kỳ)
Bước 7: Team review tất cả, sau đó BA hoặc các bên khác có thể update lại wireframe/mockup
Bước 8: Mark Resolved các comment nào đã được giải quyết, hoặc delete comment.
Áp dụng cho chia sẻ Wireframe từ Balsamiq.
Cơ bản thì mình copy image từ Basamiq qua XD, rồi share lên Axshare để mọi người có thể thảo luận và comment trên đó. Các bước mình thường thực hiện như sau:
Bước 1: Chọn vùng cần copy trên balsamiq
Bước 2: Nhấn Command + C (trên MacOS) để copy vùng chọn. (Đọc thêm phần hướng dẫn export/copy image ở hướng dẫn ở balsamiq để biết thao tác trên Windows nhé, xưa mình nhớ phím tắt nó phải 3 nút lận mới copy được)
Bước 3: Nhấn Command + V (trên MacOS) để paste hình ảnh lên XD
Mình trình bày ở XD như sau:
Bước 4: Share lên Axure Cloud như hướng dẫn ở trên (Project Size thì chọn Auto Web), sau đó copy link gửi cho KH/ĐN
Phía trên là mẹo sử dụng Axure Cloud để chia sẻ wireframe/mockup đến ĐN/KH để dễ dàng review và comment cho một Business Analyst. Giảm thiểu chi phí cho cá nhân người sử dụng khi được sử dụng miễn phí cả Adobe XD Starter và Axure Cloud, khi mà công ty các bạn không/chưa hỗ trợ trả phí cho việc sử dụng phần mềm trả phí.
Dĩ nhiên có nhiều công cụ, tính năng tương tự nhưng đây là mẹo dành riêng cho Adobe XD Starter, đặc biệt là đối với các bạn thích dùng Adobe XD Starter giống mình.
Vào năm 2020 mình có xây dựng khóa học Vẽ wireframe với Balsamiq Mockup 3, nay mình xin phép chia sẻ lại khóa học với mọi người.
Tập 1 – Cài đặt và giới thiệu Balsamiq Mockup 3
+ Giới thiệu tổng quan về Balsamiq Mockup 3
+ Những thành phần có trên ứng dụng
+ Các chức năng riêng của từng thành phần
+ Thêm controls
Tập 2 – Chọn, di chuyển, sắp xếp các controls
Tập 3 – Thay đổi kích thước và group các control
+ Thay đổi kích thước của từng control
+ Group các controls lại thành từng nhóm
Tập 4 – Chỉnh sửa các controls
Chỉnh sửa màu, nội dung, các thuộc tính của các controls
+ Nhóm 1: Chỉ 1 dòng text
+ Nhóm 2: Không có text nào để edit cả
+ Nhóm 3: Mặc định không có text, nhưng có thể chèn 1 text vào
+ Nhóm 4: Nhiều hơn 1 text
+ Nhóm 5: Nhóm sử dụng shortcut style
+ Nhóm 6: Datagrid
Tập 5 – Mockup linking và presentation
Trong bài học đã tạo sẵn các wireframe màn hình: Login, Signup, Forgot Password, Homepage, Homepage with panel.
+ Link button từ màn hình login qua màn hình homepage, tương tự với các màn hình khác
+ Presentation: Trình bày luồng của wireframe cho các khách hàng, stakeholders
Tập 6 – Symbol/ Assets
Hướng dẫn về tính năng symbol/assets, giúp cho style của wireframes đồng bộ, cũng như chỉnh sửa 1 màn hình mà cập nhất cho các màn hình có vùng thông tin giống nhau.
Tập 7 – Thực hành vẽ wireframe
Bạn có bất kỳ câu hỏi nào thì email cho mình để mình giải đáp cho nhé – hoangpm.work@gmail.com
Sinh trắc học ở đây bao gồm: Vân tay, khuôn mặt, mống mắt, tĩnh mạch, …. hiện nay thì thường thấy ở các App là xác thực bằng vân tay và khuôn mặt.
Những ai hay quên mật khẩu hoặc ít nhớ mật khẩu thì đăng nhập và xác thực giao dịch (giá trị nhỏ) bằng sinh trắc học vô cùng hữu hiệu, giúp đỡ phải nghĩ mật khẩu của ứng dụng là gì, bấm nhiều ký tự, mất nhiều thời gian – từ đó sử dụng sinh trắc học thì nhanh, tiện lợi, bảo mật hơn, và mang đến một trải nghiệm công nghệ cho người dùng cực tốt.
Sử dụng đăng nhập bằng vân tay trên ứng dụng Mobile Banking
Một cái tiện nữa là khi bạn đang ở 1 quầy giao dịch đông người, thực hiện giao dịch bằng faceID hay vân tay trên thiết bị, giúp cho việc thanh toán nhanh hơn, và những người xung quanh sẽ không thể nào dòm ngó được mật khẩu hay mã PIN của bạn, xưa kia mình chơi game nhập mật khẩu cũng bị dòm ngó và bay hết đồ trong game luôn :D, ước gì lúc đó game có đăng nhập bằng vân tay/faceID trên máy tính. :)))
Nhưng việc dùng sinh trắc học cũng là một điểm trừ khi nó làm bạn gần như quên luôn mật khẩu, khi cần dùng đến mật khẩu thì phải lục tìm lại. Chị sếp trực tiếp của mình chọn cách đăng nhập bằng mật khẩu luôn thay vì dùng vân tay :v để tránh quên mật khẩu =)).
Còn đối với mình thì mình sài 1password để lưu MK, và mình cứ sài sinh trắc học để đăng nhập ứng dụng cho lẹ, đỡ phải ấn ấn cho lâu.
Note: Phía trên mình có ghi bảo mật hơn, ý này mình có đọc nhiều bài nghiên cứu của các chuyên gia bảo mật nói rằng xác thực bằng sinh trắc học bảo mật hơn.
Những người tham gia khảo sát đều bình chọn sinh trắc học là một trong những hình thức xác thực an toàn nhất, với 97% cho rằng nhận diện vân tay là một phương thức bảo mật cao, theo sau là công nghệ nhận diện mống mắt với 94%, và nhận diện khuôn mặt với 92%. Những hình thức này được đánh giá an toàn hơn các phương thức như xác thực bằng mã PIN với 87% và mật khẩu với 84%.
Và cũng dĩ nhiên khi một BA đưa tính năng đăng nhập và xác thực giao dịch bằng sinh trắc học, cần lưu ý về các trường hợp thêm một vân tay mới, xóa bớt vân tay, hay xóa toàn bộ vân tay – từ đó xử lý các trường hợp sao cho phù hợp để đảm bảo bảo mật cho ứng dụng. Ví dụ trường hợp thêm một vân tay mới ở thiết bị, thì ứng dụng khi được mở lên sau khi cài mới một vân tay cần có thông báo để KH biết và có phương án xử lý như tắt đăng nhập, xác thực bằng vân tay hoàn toàn hay là vẫn đồng ý sử dụng vân tay, từ đó chặn được rủi ro bảo mật sớm.
Ví dụ về thông báo tránh rủi ro thêm vân tay mới trên thiết bị
10. Đánh giá app
Hiện nay khi mình làm App mình thấy có nhiều chỗ đánh giá ứng dụng, nhưng mình thường chú ý tới đánh giá trên AppStore/CHPlay và đánh giá trên App và thu kết quả đánh giá về DB dự án dùng phân tích/đánh giá để cải thiện ứng dụng.
Cách đây một tháng, mình cũng ngồi cà phê với bạn chí cốt của mình làm product về book bác sĩ online, team phát triển của bạn đã họp nhiều lần và đánh giá rằng việc sử dụng đánh giá trên App trực tiếp sẽ giúp cho việc thu thập thông tin đánh giá nhanh và user real đánh giá ứng dụng thật. Ngoài ra nếu App có không được tốt quá thì rating trên AppStore/CHPlay cũng không bị quá thấp, vì KH đã đánh giá trên App – team sẽ khắc phục nhanh.
Nhưng cũng đừng lạm dụng việc đánh giá trên App quá, trước đây khi mình làm với 1 Bank, họ cũng đề xuất thêm rất nhiều chỗ để đánh giá App, nhưng mình chưa kịp phân tích xong chỗ nào cần đặt đánh giá/chỗ nào không cần thì đã nghỉ công ty mất tiu :D, chứ không giờ có thêm 1 mớ kinh nghiệm chia sẻ về phần này ở đây rồi (đùa thôi).
Dưới đây là một ví dụ mình thấy trên cộng đồng UI/UX Designers có chia sẻ về việc biểu mẫu đánh giá xuất hiện chưa đúng chỗ, mọi người xem tham khảo để tránh những trường hợp tương tự nhé, bài đăng lên thả haha quá trời luôn (hơn 60% thả haha)
Đăng xuất cũng bắt đánh giá, phiền kinh dị :((
11. Nhắc nhở thanh toán hóa đơn/đơn hàng
Về tính năng này thì mới xuất hiện vài năm gần đầy thôi, khi mà các ứng dụng về thanh toán xuất hiện hàng loạt, nhưng giờ tính năng cũng nằm khắp các ứng dụng từ momo, zalopay, viettelpay, vnpay, app ngân hàng.
Thường thì các hóa đơn điện, nước, internet, phí chung cư, thanh toán thẻ tín dụng … là lặp lại tại một ngày nào đó hằng tháng, nhưng khách hàng lại hay quên bén đi ngày đóng, do đó việc thêm tính năng nhắc nhở sẽ giúp cho khách hàng không quên thanh toán hóa đơn, cũng như giúp KH truy cập App nhiều hơn, dùng app của doanh nghiệp bạn để thanh toán – từ đó có lợi nhuận thêm cho doanh nghiệp – một yếu tố hàng đầu trong việc kinh doanh.
Việc nhắc nhở có thể thực hiện bằng cách hiển thị nổi bật, nhắc nhở trong tin nhắn, push notification, gửi tin nhắn về sđt cho KH,… hoặc kết hợp vài phương án lại, miễn sao thực hiện đúng mục đích và chi phí thấp nhất.
Nhắc thanh toán hóa đơn/thông tin hóa đơn đã lưu trên Momo
Nhắc thanh toán hóa đơn trên ZaloPay
12. Hiển thị loại bàn phím phù hợp
Trong thời điểm làm việc với các App của ngân hàng, đây là một trong những điểm làm mình lâu lâu phải đọc lại tài liệu và chỉnh sửa nó.
Ban đầu thì chỉ cho nhập số, nhưng sau đó thay đổi yêu cầu cho nhập chữ, đôi lúc thì chỉ cho nhập chữ tiếng Việt không dấu, rồi bỏ dấu đi, nên khi thay đổi yêu cầu từ phía Bank, đầu nghiệp vụ và Dev, tester cũng phải cập nhật theo.
Nhưng đó là khi yêu cầu rõ ràng, và chủ động từ phía Bank. Đôi lúc đầu Bank chưa chủ động về việc nói ra chỗ đó cho phép nhập loại ký tự gì, thì đầu BA cũng cần có chút kinh nghiệm để hỏi rõ chi tiết, chi tiết nên kỹ đến mức là cho phép nhập ký tự đặt biệt thì cho phép những ký tự đặt biệt nào, có những trường hợp chỉ cho nhập vài loại ký tự đặt biệt thôi, từ đó hiển thị bàn phím phù hợp và kèm theo chặn trên đầu Client (App) để KH không nhập được. Nhất là trong trường hợp dữ liệu đẩy về CoreBanking – dữ liệu ký tự cần chuẩn hóa sao cho phù hợp với Core để không gây ra lỗi.
Bàn phím trên điện thoại
Việc kỹ từng ký tự và hiển thị bàn phím phù hợp sẽ giúp giải quyết được nhiều trường hợp lỗi bất ngờ và giúp trải nghiệm người dùng tốt hơn rất nhiều.
Một ví dụ cụ thể hơn đó là thanh toán hóa đơn – đóng học phí cho trường ABCXYZ.
Nếu BA thăm dò được rằng trường ABCXYZ thanh toán thông qua mã số sinh viên – và mã này chỉ có 10 ký tự số, thì bàn phím hiển thị loại bàn phím số, và cho nhập tối đa 10 ký tự, Client (đầu App) kiểm tra không cho phép paste ký tự chữ vào ô đó hoặc thậm chí là chặn paste vào trường mã số sinh viên luôn cũng được. Khi nhấn tiếp tục để kiểm tra thông tin sinh viên thì Client kiểm tra sẵn trường đã đủ 10 ý tự số chưa, nếu chưa đủ thì báo lỗi để SV nhập lại, còn đủ rồi thì mới truyền cho Server kiểm tra và gọi vào các đầu Core xử lý.
Sẵn tiện ở mục này, mình có 1 điểm hay cần chia sẻ luôn, thứ tự của các trường dữ liệu nhập vào – chọn từ danh sách cũng nên được phân tích để sắp xếp cho phù hợp, và tại đầu Client và Server kiểm tra thông tin hợp lệ cũng nên được xem xét để đầu Dev biết thứ tự kiểm tra phù hợp và thông báo cũng theo thứ tự lỗi luôn. Điều này giúp cho Dev develop dễ hơn, tester viết testcase cũng theo thứ tự và biết lỗi nào trước lỗi nào sau, một phần giúp cho 2 đầu App (iOS/Android) đồng bộ về báo lỗi – nhiều TH KH bị 2, 3 lỗi, nhưng thử ở các OS khác nhau lại hiển thị lỗi khác nhau hoặc thứ tự lỗi bị đổi cũng làm KH hoang mang – đội Dev ngồi tìm lỗi cũng mệt nhọc hơn sau này.
13. Tự động chọn loại chuyển tiền liên ngân hàng
Gần đây mình sử dụng một số ứng dụng thì thấy đã triển khai việc chuyển tiền thường và chuyển tiền qua Napas về chung 1 tụ.
Trước đây mình mới vào công ty, đa số ngân hàng đều phân ra chuyển tiền thường (có người tác động lên thì lệnh mới thực hiện được – thường là vài phút – vài tiếng hoặc 2 ngày nếu là cuối tuần thì lệnh mới được các bạn GDV thực thi) và chuyển tiền qua Napas/nhanh (thông qua hệ thống Napas, tiền chuyển đi trong vài chục giây, phút nếu hệ thống chạy trơn tru) – Nhưng KH thì đâu biết thường và Napas khác nhau thế nào đâu. Thậm chí trước khi mình làm mảng BA cho Finance/Banking thì chưa phân biệt được, và dùng còn nhầm, và người yêu mình cũng là một trong những người bị vướng phải khi cần chuyển tiền gấp cho người quen, và phải đợi tận 2 ngày tiền mới tới – nên phải chuyển thêm lần nữa qua Napas để tới liền, rồi đợi hoàn tiền từ người quen sau 2 ngày tiền kia tới.
Nên việc đưa về 1 tụ cho 2 ông chuyển khoản liên ngân hàng này là rất cần thiết, hoặc thậm chí là chuyển trong cùng ngân hàng (3 tụ về 1). Nhiều KH họ chỉ biết là chuyển cho STK nào, chủ tài khoản là ai và ngân hàng nào thôi, chứ họ không quan tâm chuyển qua kênh Napas hay thường, và cũng không phân biệt được chuyển đó là trong cùng ngân hàng hay khác ngân hàng.
Chuyển khoản đến số tài khoản (liên ngân hàng, chuyển trong ngân hàng qua số tài khoản) gộp 3 trong 1 trên ứng dụng VPBank NEO.
Và trong việc chung về 1 tụ như thế này thì đầu Server sẽ detect xem rơi vào trường hợp chuyển tiền nào và từ đó gọi API về CoreBanking thực hiện cho đúng, với trường hợp chuyển tiền liên ngân hàng qua Napas bị lỗi thì App đề xuất KH thực hiện chuyển tiền thường (nếu muốn – và app có thông báo phí, thời gian thực hiện rõ ràng cho KH biết).
ps: Chú ý thêm vấn đề phí chuyển khoản, hạn mức, số lần được chuyển khoản trong ngày/tháng ở đây nhé – khi đi sâu vào vấn đề này thì cần phân tích kỹ hơn để đầu server chạy cho đúng từng trường hợp.
14. Nội dung chuyển tiền mặc định
Nội dung chuyển tiền nên được hiển thị mặc định, đôi lúc KH chỉ chuyển tiền giữa các tài khoản của mình nhưng khác ngân hàng, hay đơn giản là bạn bè cho mượn tiền thanh toán, và chuyển tiền ngay để trả thì nội dung cũng ít cần thiết tại thời điểm lúc đó.
Nội dung chuyển tiền được điền mặc định, KH có thể thay đổi nội dung được – App VCBDigiBank.
Thay vì KH tốn thời gian nhập nội dung chuyển tiền thì App để mặc định nội dung với tên KH, ví dụ “Nguyen Van A ck” là một phương án vô cùng hợp lý, và KH có thể thay đổi nội dung chuyển tiền cho phù hợp nếu thật sự cần điền nội dung chuyển tiền. Hiển nhiên với các trường hợp Chuyển tiền cần nội dung chi tiết, thì KH luôn được nhắc nhở, hoặc thông tin chuyển tiền thường đã đề cập nội dung chuyển tiền ⇒ VD như chuyển tiền cho PhiEnglish học tiếng Anh (dự án trung tâm tiếng Anh của mình) thì trong email gửi cho KH mình luôn đề cập kỹ đến nội dung chuyển tiền và tô đậm lên cho KH biết.
15. Tìm kiếm ngân hàng thụ hưởng
Khi chọn ngân hàng thụ hưởng, bạn sẽ tìm kiếm ngân hàng đó như thế nào?
VD như ngân hàng VCB thì 1 số KH lại nhớ ký hiệu VCB thôi, có KH thì lại nhớ Vietcombank, hoặc ngân hàng ngoại thương (thường tên đầy đủ ngta lại ít nhớ hơn, nào là ngoại thương, kỹ thương, công thương, thương tín…)
VCB – Vietcombank – Ngân hàng ngoại thương – Ngân hàng thương mại cổ phần Ngoại thương Việt Nam.
Nên việc tìm kiếm tên ngân hàng thụ hưởng cũng cần được thể hiện ở nhiều loại tên khác nhau, hoặc có thể viết gọn (hiển thị trên App), nhưng vẫn cho phép tìm kiếm với đầy đủ thể loại.
Với lại nên sài tiếng Việt có dấu đầy đủ cho KH dễ đọc ở mục hiển thị trên App, thay vì sài tiếng Việt không dấu trả từ CoreBanking ra – làm cho việc đọc tên ngân hàng bị khó đi.
Nên tránh hiển thị thêm các mã ngân hàng trong tên, chỉ làm KH loạn thêm – vì họ chẳng biết mã đó là mã gì mà còn làm họ suy nghĩ có khi nào mình chọn sai ngân hàng không, hay nó là số gì đó ảnh hưởng không phải người nhận đúng chỗ.
Với ví dụ trên, thì khi KH tìm kiếm ngân hàng Vietcombank có thể xảy ra các trường hợp nhập như sau:
Vietcombank
VCB
vietcombank
ngoai thuong
ngoại thương
Thì việc hiển thị ra được thông tin ngân hàng đúng là một điều rất tuyệt vời và cải thiện trải nghiệm người dùng rất nhiều. Và tên hiển thị ra có thể chỉ là “VCB – Ngân hàng ngoại thương” (nếu kèm logo được thì tốt) một cách gọn ghẻ trên màn hình mobile, nhưng tìm với nhiều loại keyword bao gồm cả Vietcombank thì vẫn tìm ra được đúng ngân hàng đích.
Bổ sung thêm là ds này lên load lúc màn hình khởi tạo để việc tìm kiếm tên là có ngay, thay vì KH phải đợi để load từ corebank hay từ confign lên – mất một thời gian phải chờ đợi.
Kết luận
15 điểm UI/UX được trình bày phía trên là một trong những trải nghiệm riêng của bản thân khi làm việc mảng BA cho Banking, hi vọng bài viết sẽ giúp đỡ bạn đọc hiểu thêm/cách nhìn thêm về 1 khía cạnh làm việc của vị trí Business Analyst cũng có liên quan đến một phần UI/UX.
Mình có khoảng gần 2 năm làm việc tại VNPay với vị trí Business Analyst (chuyên viên phân tích nghiệp vụ), với khoảng thời gian này mình được tham gia nhiều dự án từ Mobile Banking/Internet Banking, Mảng thẻ ngân hàng/thẻ thanh toán, Thanh toán vé máy bay, Đặt và thanh toán vé xe, vé tàu, topup, billing, payment gate,… Nhưng phần lớn thời gian thì mình tập trung vào các dự án với các Bank – đa số là các Bank nằm trụ sở trong miền Nam, với kinh nghiệm của bản thân – mình rút ra được 15 điểm UI/UX cần lưu ý cũng như mình thấy hay và chia sẻ lại cho mọi người. Mọi người đọc qua nếu thấy điểm nào chưa hợp lý thì góp ý giúp mình nhé.
1. Ứng dụng chơi được nhiều thể loại font-size
Ý tưởng của bài viết này cũng từ ý đầu tiền này, khi cháu mình đang học đại học dùng điện thoại với font-size rất to, mình mới hớ ra là khi mình làm việc cũng gặp một vài khách hàng báo lỗi ứng dụng khi họ sài font-size to, đặc biệt là một số KH lớn tuổi – mắt kém.
Do chỗ lỗi khi xưa đã được fix, nên mình dùng tạm hình trên mạng để bạn hình dung normal size và big size
Do chỗ lỗi khi xưa đã được fix, nên mình dùng tạm hình trên mạng để bạn hình dung normal size và big size
Khi KH đó thực hiện tải ứng dụng có giao diện mới trên 1 Bank mình làm hồi đó, tại các màn hình giới thiệu giao diện mới này, thì khi ở kích thước font-size bình thường hoặc nhỏ thì ứng dụng vẫn hoạt động bình thường, KH có thể nhấn nút tiếp tục hoặc skip để bỏ qua. Nhưng nếu KH cài đặt font-size lớn (trên thiết bị), thì nút Skip và nút tiếp tục bị ẩn đi, và không thể nào scroll để đi tiếp màn hình tiếp theo.
Dĩ nhiên cách khắc phục tạm thời cho KH sử dụng là chỉnh font-size của thiết bị nhỏ lại theo kích thước bình thường, rồi xem xong phần giới thiệu giao diện mới, rồi vào app sài bình thường, và chỉnh lại kích thước font-size lại như KH vẫn sài. Sau đó thì phía tester/UI/UX đánh giá lại để khắc phục lỗi này bằng cách cho scroll để xem hết nội dung, còn nút skip và tiếp tục có thể để fixed ở phần bottom của màn hình để KH có thể nhấn được.
Nhưng đó cũng là một điểm mà các bạn BA/Tester/UI/UX nên chú ý để ứng dụng làm ra được ok hơn, tránh một số lỗi tương tự, làm mất thời gian build lại app, nâng version app, rồi KH lại tốn thời gian ra quầy hỗ trợ, gọi đủ bên để hỗ trợ việc này.
2. Đồng nhất UI và UX giữa mobile app và internet banking
Ở đây mình sẽ phân ra 2 loại:
Đồng bộ giao diện giữa Mobile Banking với Internet Banking (sau này 2 cái này các bank chuyển đổi theo hướng Omni Channel nên có nhiều bank đã đồng bộ cả về dữ liệu, hệ thống và giao diện)
Đồng bộ giao diện giữa 2 app mobile trên Android và iOS (và ứng dụng tên OS Mobile khác)
Hiện nay thì các Bank cũng có xu hướng chuyển sang xây dựng Omni (đồng nhất đa kênh) cho kênh MB và IB xưa kia, đồng nhất 2 kênh này lại cùng về 1 hệ thống, chỉ khác là mặt giao diện giao tiếp với KH phía trên, nên việc giao diện trên nền tảng mobile app và web đã được nhiều Bank phân tích thiết kế sao cho tương đối đồng nhất về UI, và nếu được thì cả phần UX.
Giao diện Mobile App và phiên bản trên Web của VCBDigibank KH cá nhân cũng tương đối đồng nhất.
Trước đây khi mình sài MB và IB riêng của 1 số Bank, mình tốn công phải nhớ 2 tài khoản khác nhau, với những mã user đăng nhập là mã Cif hoặc 1 mã gì đó do Bank đưa ra. Nay thì đã đỡ hơn nhiều khi các Bank chuyển sang Omni (hoặc xây dựng gần gần kiểu Omni) và chuyển đăng nhập bằng SĐT hoặc một kiểu user do người dùng có thể cài đặt.
Mô tả của ứng dụng BIDV phần Đồng nhất đa kênh trên CH Play do mình chụp lại
Về phần đồng nhất giữa các App trên Android và iOS thì cũng cần được chú trọng, đặc biệt là các luồng xử lý về mặt giao diện.
Mình cũng từng gặp vài trường hợp KH sài trên Android quen rồi, nhưng khi qua trên iOS thì luồng của ứng dụng lại có thay đổi, làm cho KH khi sử dụng chưa quen thì cảm thấy không thoải mái hoặc thậm chí làm sai luồng thao tác. Trường hợp này thì thường xảy ra khi 2 đội Dev iOS và Android là khác nhau (dev native app), mà việc kiểm tra lại luồng không được thực hiện kỹ. Với tính của mình thì mình cũng rất hay soi kỹ việc này nên né tránh được kha khá phàn nàn từ người dùng. Còn với trường hợp dev cross platform thì giao diện là giống nhau rồi, chỉ có vài điểm OS 2 bên không hỗ trợ thì có thể code để thay đổi tí tẹo.
Dĩ nhiên trường hợp Native App cũng vậy, cũng cần xem xét OS 2 bên có hỗ trợ để làm giống nhau không? Hay xem xét việc làm giống nhau mà tốn quá nhiều effort mà không quá ảnh hưởng gì đến việc người dùng sử dụng về UX thì cũng có thể bỏ qua.
3. Ưu tiên tùy chỉnh cá nhân hóa
Theo mình tìm hiểu thì đây là một xu hướng thiết kế mobile trong những năm nay khi ưu tiên việc cá nhân hóa người dùng lên hàng đầu, từ đó người dùng có thể tùy chỉnh vị trí các tính năng ngay trên ứng dụng.
Đặc biệt khi hiện nay trên một app tài chính/ngân hàng có quá nhiều tính năng, và khi KH chỉ sài có vài tính năng thường dùng, việc tùy chỉnh đưa lên đầu app là vô cùng quan trọng, làm cho việc trải nghiệm KH trên ứng dụng hoàn toàn đỉnh hơn rất nhiều.
Momo và VCB cũng hỗ trợ việc tùy chỉnh các chức năng thường dùng lên đầu.
Hoặc việc KH thay đổi màu giao diện App theo sở thích cá nhân, background bên trong ứng dụng cũng khiến KH thoải mái hơn khi sử dụng ứng dụng.
4. Giao diện theo thời điểm trong ngày/mùa
App của ABBANK thay đổi màu theo buổi sáng và buổi chiều/tối, App của BIDV hình như đổi nền trước đăng nhập theo buổi sáng, buổi trưa, buổi tối, rồi thay đổi câu chào theo từng buổi khác nhau.
Ý này mình đang nghiên cứu =)) ít hôm nữa tìm ra rồi thì mình viết bổ sung. Xưa làm thì có hỏi mấy bạn bên Bank vụ này vì sao có thì nhớ có trả lời mà mình giờ quên rồi. …
Hoặc bạn nào biết thì giúp mình trả lời ở phần comment nha.
5. Lưu ý cài đặt mặc định cho các nút toggle switch
Này mình cũng rất lưu tâm khi làm tài liệu nghiệp vụ, khi các nút tongle thể hiện việc YES hay NO cho việc bật một tính năng nào đó lên, nhưng đặt mặc định là gì cho phù hợp?
Việc này thì BA cần lưu ý, đặc biệt là các vấn đề liên quan đến bảo mật cần chú trọng.
Ví dụ trường hợp nút cho phép đăng nhập trên trên Web để thực hiện giao dịch thường bị hạn chế, thì cài đặt không cho phép đăng nhập trên web là mặc định, để mở chức năng đăng nhập thì cần thực hiện mở trên điện thoại, tránh kẻ gian nắm thông tin và thực hiện giao dịch trên ứng dụng web ngoài sự cho phép của chủ sở hữu tài khoản.
Nút toggle switch
6. Hiển thị phôi thẻ lên trên ứng dụng
Hiện nay việc sử dụng thẻ ghi nợ/tín dụng/trả trước không còn quá xa lạ với người dùng, và việc có nhiều thẻ thì cũng tương tự, nên việc hiển thị phôi thẻ trên ứng dụng điện thoại trong mục thẻ cũng giúp cho người dùng dễ phân biệt giữa các thẻ với nhau một cách nhanh chóng. Ngoài ra việc thanh toán thẻ trực tuyến bằng cách 1 chạm sẽ ngày càng phổ biến, nên hiện tại việc hiển thị phôi thẻ y như thật lên trên điện thoại là điều nên làm.
Lưu ý là phôi thẻ thì nên có một phôi mặc định, tránh trường hợp không lấy được thông tin của thẻ hoặc hình ảnh phôi thẻ thì cũng có một phôi mặc định hiển thị.
7. Thông tin thẻ/tài khoản nên được ẩn tránh lộ thông tin
Như ở mục số 6 mình có nêu ra, hiện nhiều Bank đã đưa hình phôi thẻ lên trên ứng dụng, nhưng nếu không cẩn thận thì thông tin của thẻ sẽ dễ bị lộ nếu không chú ý, đặc biệt là thông tin thẻ trên đường truyền đi từ Core/Trung tâm thẻ ra, nên được bảo mật và giải mã phía đầu client để hiển thị.
Hiển thị phôi thẻ trên ứng dụng ABBANK, và thông tin mặc định bị ẩn đi
Như nút hiển thông tin thẻ ở hình phía trên khi nhấn vào sẽ không có dữ liệu hiển thị ngay, mà phải gọi về trung tâm thẻ để lấy dữ liệu lên, và dữ liệu thẻ đã được mã hóa, đến Client được giải mã theo 1 key client nắm giữ.
Và cả việc chụp màn hình ở màn hình này cũng nên bị chặn, đặc biệt với thẻ credit thanh toán trực tuyến thông qua số thẻ, exp date, cvv.
8. Số dư tại màn hình thanh toán/chuyển khoản thành công
Việc bạn thực hiện xong một thanh toán, hay chuyển khoản và chụp màn hình lại gửi cho bạn bè/người cần nhận là bình thường đúng không?
Nhưng có bạn nào muốn họ thấy số dư tài khoản của bạn không nhỉ?
Ban đầu cách đây vài năm thì mình hay thấy chuyển khoản, hay thanh toán thì số dư hiện tại (của tài khoản) có thông tin hiển thị ra, rất bất tiện khi người nhận không nên biết về số dư đó, nên như mình xưa là phải cắt cái màn hình đó ra, chỉ để lại phần thông tin giao dịch gửi cho bạn/bè.
Giờ đây thì đa số các ngân hàng đã hiểu ra chuyện đó và bỏ đi dòng số dư hiện tại đi, kèm theo đó để thêm tính năng chia sẻ để gửi màn hình kết quả cho bạn bè nhanh hơn qua social.
Chuyển khoản hùi xưa, màn hình kết quả hiển thị số dư hiện tạiChuyển khoản bây giờ – đã bỏ đi dòng số dư tại khoản, thêm nút chia sẻ tại màn hình kết quả thành công