Mockup bằng AI: duyệt từng màn hình trước khi chốt đặc tả
Tóm tắt: VAON dùng công cụ AI vẽ wireframe và mockup từ bản nháp yêu cầu. Khách duyệt từng màn hình trước khi chốt đặc tả. Màn hình buộc hai bên quyết những điều văn bản bỏ qua: trường nào bắt buộc, danh sách rỗng hiện gì, ai thấy nút nào. Mockup đã duyệt chưa phải thiết kế cuối cùng.
Mục lục
- Vì sao cần mockup trước khi chốt đặc tả?
- Mockup bắt được gì mà văn bản bỏ sót?
- AI vẽ wireframe và mockup thế nào, ai kiểm tra?
- Khách duyệt từng màn hình ra sao?
- VAON dùng màn hình trong Giai đoạn chốt đặc tả thế nào?
- Giới hạn của mockup bằng AI là gì?
- Câu hỏi thường gặp
1. Vì sao cần mockup trước khi chốt đặc tả?
Mockup cần có trước khi chốt đặc tả vì cùng một câu yêu cầu, hai người đọc hình dung ra hai màn hình khác nhau. "Màn hình danh sách đơn hàng, lọc được theo trạng thái" nghe đã đủ. Vẽ ra mới thấy chưa ai nói lọc một trạng thái hay nhiều, sắp xếp theo gì, một trang hiện bao nhiêu dòng.
Vẽ tay wireframe cho mọi màn hình tốn công, nên dễ bị rút gọn thành vài màn hình chính. Công cụ AI vẽ wireframe/mockup làm bản nháp đầu tiên nhanh hơn, nên có thể vẽ đủ các màn hình trước khi chốt.
Trong quy trình phát triển với Claude Code của VAON, đây là bước 3: AI nháp wireframe và mockup, khách duyệt từng màn hình. Bước này chạy khi dự án có giao diện người dùng. Nó đi sau danh sách câu hỏi trước khi chốt đặc tả, vì màn hình cần câu trả lời để vẽ.
2. Mockup bắt được gì mà văn bản bỏ sót?
Mockup bắt được những quyết định mà văn bản cho phép bỏ trống. Văn bản viết "có màn hình danh sách" là xong một dòng. Màn hình thì không vẽ được nếu chưa quyết cột nào hiện, nút nào nằm đâu.
| Văn bản viết | Mockup buộc phải quyết |
|---|---|
| "Có màn hình danh sách đơn" | Cột nào hiện, sắp xếp theo gì, chưa có đơn nào thì hiện gì |
| "Người dùng nhập thông tin đơn" | Trường nào bắt buộc, báo lỗi ở đâu, nhập sai có giữ dữ liệu đã nhập không |
| "Quản lý duyệt đơn" | Nút duyệt ở đâu, nhân viên có thấy nút đó không, duyệt xong chuyển về đâu |
| "Dùng được trên điện thoại" | Bảng nhiều cột hiển thị thế nào trên màn hình hẹp |
| "Hiện tên khách hàng" | Tên dài thì cắt hay xuống dòng |
| "Xuất báo cáo" | Nút ở màn hình nào, xuất theo bộ lọc đang chọn hay toàn bộ |
Các dòng trong bảng là ví dụ minh hoạ, không lấy từ dự án thật. Điểm chung là trạng thái. Văn bản hầu như chỉ tả lúc mọi thứ bình thường. Mockup buộc phải vẽ cả lúc rỗng, lúc lỗi, lúc người dùng không có quyền.
3. AI vẽ wireframe và mockup thế nào, ai kiểm tra?
Công cụ AI vẽ wireframe/mockup tạo bản nháp từ tài liệu yêu cầu nháp và các câu hỏi đã có lời đáp. Kỹ sư kiểm từng màn hình với yêu cầu trước khi gửi khách. Trình tự gồm bốn việc:
- Kỹ sư liệt kê màn hình và luồng chuyển giữa các màn hình từ yêu cầu nháp.
- AI vẽ nháp từng màn hình, kể cả trạng thái rỗng và trạng thái lỗi.
- Kỹ sư đối chiếu: mỗi trường, mỗi nút phải truy được về một dòng yêu cầu.
- Dữ liệu trên màn hình là dữ liệu mẫu và được ghi rõ là dữ liệu mẫu.
Bước 3 tồn tại vì công cụ AI dễ thêm những thứ "thường thấy": ô tìm kiếm, nút xuất Excel, biểu đồ ở trang chủ. Khách nhìn thấy sẽ nghĩ là có. Thứ yêu cầu không nhắc tới thì kỹ sư bỏ đi, hoặc chuyển thành câu hỏi cho khách.
4. Khách duyệt từng màn hình ra sao?
Khách duyệt từng màn hình riêng, không duyệt cả bộ một lần, vì duyệt cả bộ dễ thành "nhìn chung ổn". Mỗi màn hình đi kèm một phiếu ngắn như sau (nội dung là ví dụ minh hoạ):
| Mục | Nội dung |
|---|---|
| Màn hình | Danh sách đơn hàng |
| Ai dùng | Nhân viên kinh doanh, quản lý |
| Thao tác chính | Lọc theo trạng thái, mở chi tiết đơn |
| Trạng thái đã vẽ | Bình thường, chưa có đơn, lỗi tải dữ liệu |
| Câu hỏi còn mở | Quản lý có cần thấy đơn của mọi chi nhánh không? |
| Kết quả | Duyệt / Duyệt kèm sửa / Chưa duyệt |
| Người duyệt, ngày | (khách điền) |
Góp ý của khách, kể cả qua chat, được VAON ghi vào file quản lý feedback hoặc backlog, rồi gửi khách xác nhận. Góp ý ngoài phạm vi đã thống nhất đi theo quy trình thay đổi. VAON báo giá và ảnh hưởng tiến độ bằng văn bản, khách duyệt rồi mới làm.
Màn hình đã duyệt đi vào tài liệu yêu cầu. Về sau, nó còn là mốc để so khi khách kiểm thử theo checklist nghiệm thu có ảnh chụp.
5. VAON dùng màn hình trong Giai đoạn chốt đặc tả thế nào?
Trong Giai đoạn chốt đặc tả (仕様確定フェーズ, Spec Lock Phase) của VAON, wireframe từng màn hình là một đầu ra. Các đầu ra khác: tài liệu yêu cầu, thiết kế dữ liệu, kiến trúc hệ thống, báo giá cố định cho phần xây dựng. Giai đoạn này thường 1 đến 2 tuần, dự án lớn 2 đến 4 tuần. Người dẫn là BrSE (Bridge System Engineer, kỹ sư cầu nối) và Tech Lead.
Với khách chưa có hệ thống, VAON phỏng vấn nghiệp vụ, vẽ màn hình và thiết kế dữ liệu. Nhiều quyết định còn thiếu chỉ lộ ra lúc vẽ màn hình. Không biết nút làm gì thì không vẽ được nút. Lý do đặc tả thiếu làm hỏng dự án có ở bài offshore development thất bại vì đặc tả, không vì code.
Ở dự án Seminar Navi cùng Đại học Công nghệ Kochi (高知工科大学), hệ thống gồm app LINE (LIFF), PWA và màn hình quản trị. Một điều được chốt trước khi xây dựng: sinh viên bắt đầu dùng sau 4 bước, khoảng 1 phút. Hệ thống cũng không thu họ tên. "4 bước" là yêu cầu viết được bằng chữ, nhưng chỉ kiểm được khi đếm trên từng màn hình cụ thể.
6. Giới hạn của mockup bằng AI là gì?
Mockup bằng AI dùng để chốt nội dung màn hình, không phải thiết kế giao diện cuối cùng. Năm giới hạn cần nói rõ với khách:
- Mockup không phải sản phẩm gần xong. Màn hình trông càng hoàn chỉnh, người xem càng dễ nghĩ hệ thống sắp xong. Theo Nielsen Norman Group, khi thấy một prototype thô, người ta không chờ nó được phát hành vào ngày mai (UX Prototypes: Low Fidelity vs. High Fidelity). Nên ghi rõ trên mỗi bản gửi: đây là bản nháp để duyệt nội dung.
- Không dùng để duyệt từng pixel. Màu, font, khoảng cách là việc của thiết kế giao diện sau khi nội dung đã chốt.
- Màn hình không cho thấy logic phía sau. Công thức tính, quy tắc làm tròn, phân quyền ở tầng dữ liệu và hiệu năng vẫn phải viết trong tài liệu yêu cầu.
- Dữ liệu mẫu đẹp hơn dữ liệu thật. Tên ngắn, số tròn, danh sách vừa một trang. Nên có màn hình dùng dữ liệu mẫu "xấu": tên dài, danh sách rỗng.
- Hệ thống không có giao diện. Với xử lý theo lô hay API giữa hai hệ thống, sơ đồ luồng dữ liệu hợp hơn mockup.
7. Câu hỏi thường gặp
Wireframe và mockup khác nhau thế nào? Wireframe là khung đơn giản, thường màu xám, chỉ có bố cục, trường và nút. Mockup gần với hình thức hiển thị hơn, có thể có màu và kiểu chữ. Trước khi chốt đặc tả, câu hỏi chính là màn hình có gì và làm gì, nên khung đơn giản thường đủ. Mockup chi tiết hơn chỉ cần khi bố cục ảnh hưởng tới quyết định nghiệp vụ.
Mockup đã duyệt có phải thiết kế cuối cùng không? Không. Mockup đã duyệt chốt nội dung: màn hình có trường nào, nút nào, ai thấy gì, bấm xong chuyển đi đâu. Màu sắc, font và chi tiết hiển thị được làm ở bước thiết kế giao diện sau đó. Nếu dự án cần giao diện theo bộ nhận diện thương hiệu của bạn, phần đó được thống nhất riêng trong phạm vi.
Đã duyệt màn hình rồi có sửa được không? Sửa được. Trước khi chốt đặc tả, sửa màn hình là việc bình thường và chính là mục đích của bước này. Sau khi chốt, thay đổi đi theo quy trình thay đổi phạm vi. VAON báo giá và ảnh hưởng tiến độ bằng văn bản, bạn duyệt rồi mới làm. Không duyệt thì không làm và không tính tiền.
Tôi có cần biết dùng công cụ thiết kế không? Không cần. Bạn nhận màn hình để xem, kèm phiếu duyệt từng màn hình. Việc của bạn là trả lời: màn hình này có đúng việc người dùng cần làm không, còn thiếu gì, ai được thấy gì. Góp ý qua chat cũng được VAON ghi lại vào file quản lý feedback hoặc backlog, rồi gửi bạn xác nhận.
Mockup có cần dữ liệu thật của công ty tôi không? Không cần. Mockup dùng để duyệt nội dung màn hình, nên dữ liệu mẫu là đủ, và dữ liệu mẫu được ghi rõ. Trước khi bắt đầu, VAON thống nhất với khách dữ liệu nào được dùng và có được đưa tài liệu vào công cụ AI không. Khi chưa được phép, tài liệu của bạn không đi vào công cụ AI.
Việc làm được ngay: chọn một màn hình trong yêu cầu của bạn. Vẽ ra giấy những gì nó hiện khi chưa có dữ liệu nào và khi người dùng nhập sai. Chỗ nào bạn phải dừng lại suy nghĩ, đó là câu hỏi cần đưa vào đặc tả trước khi chốt.
Nếu muốn xem màn hình của dự án mình trước khi ký giai đoạn xây dựng, đặt lịch trao đổi 60 phút miễn phí. CEO tham dự, không cần chuẩn bị tài liệu, không ràng buộc.
