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.
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, …
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, File design
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ả,…)
Các khái niệm khác
Lo-fi design
Là một loại hình thiết kế với mức độ chi tiết thấp, thường mang tính chất phác thảo và đơn giản, nhằm tập trung vào việc truyền đạt ý tưởng hoặc cấu trúc tổng thể hơn là chi tiết thẩm mỹ.
Thì cũng khá giống với wireframe hoặc tuỳ mức độ mà nó sẽ giống với sketch
Mà Prototype cũng có thể chạy trên Lo-fi design để xem sự tương tác giữa các màn hình, element dưới dạng wireframe. Và thường được gọi là Lo-fi prototype.
Hi-fi design
Là bản thiết kế chi tiết và trực quan, gần giống với sản phẩm cuối cùng, có đầy đủ màu sắc, bố cục, và các yếu tố giao diện. => Khá giống với mockup, hoặc có thể nói là 1 tên gọi khác của mockup.
Do đó mà Hi-fi prototype: Là một phiên bản hoạt động của HiFi Design, cho phép người dùng tương tác và trải nghiệm trước khi sản phẩm thực sự được phát triển.
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é.
