Hệ thống công nghệ thông tin được gọi là Information System (IS) hay Information Management System (IMS).
IS có đầu vào là dữ liệu (data). Và đầu ra là thông tin (information).
Data thì cần càng chính xác càng tốt, chi phí thu thập là tối thiểu, nếu tự động không dùng sức người là tốt nhất ví dụ camera tự động đếm số người vào siêu thị, cảm biến đo chất lượng không khí, agent đếm click banner quảng cáo.
Hệ thống các em đang thiết kế vẽ vời là Human data entry. Hệ này rất là cổ điển có từ những năm 6x, 7x. Nguyên tắc vẫn là làm sao người dùng nhập vừa đủ, dễ, tự nguyện hoặc có khả năng chống lỗi, kiểm tra dữ liệu nhập vào.
Khi công nghệ phát triển, người ta nghĩ ra nhiều UI Component một mặt đa dạng hóa cách thức nhập liệu nhưng mặt khác khiến lập trình viên lạm dụng, sử dụng lung tung beng cả lên.
Điểm mấu chốt của Data Entry Screen là để nhập dữ liệu. Chúng ta cần phân biệt rõ với báo cáo (report). Report là tổng hợp dữ liệu đã nhập hoặc hiển thị thông tin (information) đã qua xử lý, chế biến....
Khi thiết kế data entry screen tránh
1- Biến nó thành một mega screen (màn hình khủng), gồm nhiều màn hình con, nhiều control, nhiều tác vụ, nhiều logic... dẫn đến khó lập trình, khó bảo trì.
1- Biến nó thành một mega screen (màn hình khủng), gồm nhiều màn hình con, nhiều control, nhiều tác vụ, nhiều logic... dẫn đến khó lập trình, khó bảo trì.
2- Lẫn lộn giữa data và information. Mỗi màn hình tập trung vào nhập, làm sạch, kiểm tra dữ liệu cho một business domain.
3- Bắt người dùng nhập quá nhiều trường trong khi hệ thống không cần hoặc có thể tự động tính toán. Con người không phải nô lệ cho máy tính. Máy tính + phần mềm sinh ra để phục vụ con người.
4- Mù quáng nhập dữ liệu mà không cần để ý chúng ta sẽ dùng nó hoặc cần tạo ra information gì.
5- Sa đà vào viết document dài dòng mà mọi người trong team không ai hào hứng đọc. 1 hình ảnh = 1000 lời nói. Thiết kế tốt là thiết kế ngắn gọn, xúc tích, ai ở bất kỳ trình độ, học thức nào đọc cũng hiểu.
Khi thiết kế data entry screen nên
1- Thiết kế top down sử dụng tool để có cái nhìn tổng thể, bao quát, nhanh chứ không bottom up vụn vặt
1- Thiết kế top down sử dụng tool để có cái nhìn tổng thể, bao quát, nhanh chứ không bottom up vụn vặt
2- Chọn ra một số mẫu pattern lặp đi lặp lại để hình thành thói quen cho người nhập liệu
3- Màn hình tốt tự nó giải thích, giảm thiểu nhầm lẫn. Hãy cố gắng đặt mình vào địa vị hoàn cảnh người nhập liệu.
4- Có tác dụng cụ thể, nhưng không ôm đồm, lấn sân sang tác vụ khác. Ví dụ màn hình điểm danh cần tác ra màn hình nhập điểm số. Màn hình truy vấn nhân viên, không cần sửa thông tin nhân viên. Inline editing là ý tưởng hay nhưng đừng dùng nó bừa bãi.
5- Tuân theo thứ tự: trên > dưới, trái > phải, khoảng cách, căn lề...
6- Hình dung cơ sở dữ liệu có những bảng nào để lưu dữ liệu từ data entry đổ vào. Bạn nào giỏi về CSDL có thể tạo bảng trường, rồi quay lại vẽ màn hình. Tuy nhiên, cách tự nhiên vẫn là phân tích nghiệp vụ, vẽ mock up screen song song với thiết kế bảng. Tôi nói là đây là song song - đồng thời.
Công cụ sử dụng để thiết kế hệ thống IS
6- Hình dung cơ sở dữ liệu có những bảng nào để lưu dữ liệu từ data entry đổ vào. Bạn nào giỏi về CSDL có thể tạo bảng trường, rồi quay lại vẽ màn hình. Tuy nhiên, cách tự nhiên vẫn là phân tích nghiệp vụ, vẽ mock up screen song song với thiết kế bảng. Tôi nói là đây là song song - đồng thời.
Công cụ sử dụng để thiết kế hệ thống IS
- Trước đây người ta dùng UML, Rational Rose... của IBM. Tool này tương đối phức tạp, phù hợp với kiểu quản lý dự án thác nước (Water Fall), chia làm nhiều bước.
- Nếu như dự án start up hay làm sản phẩm MVP (Most Valuable Product) mà cứ áp dụng thế này thì thời gian làm dự án quá lâu, hết vốn, phá sản ! Do đó nên dùng các công cụ đơn giản, có tính hợp tác cao:
+ Visual Mind Map , Coggle, mindmeister.com... để liệt kê yêu cầu, các logic, tác vụ, các trường....
+ LucidChart để vẽ các khối...
+ Balsamiq để phác họa UI.
+ Visual Mind Map , Coggle, mindmeister.com... để liệt kê yêu cầu, các logic, tác vụ, các trường....
+ LucidChart để vẽ các khối...
+ Balsamiq để phác họa UI.
+ SketchApp là bước cuối cùng nếu phải thiết kế cho giao diện responsive cho cả mobile + web
Phương pháp thiết kế top down dùng Visual Mind Map
1- Quy ước đọc theo chiều kim đồng hồ từ tổng quan, quan trọng đến chi tiết và ít quan trọng
1- Quy ước đọc theo chiều kim đồng hồ từ tổng quan, quan trọng đến chi tiết và ít quan trọng
2- Ngắn gọn, cộc lốc nhưng đủ ý
3- Một screen nên có những nhánh sau đây:
+ Thông tin chung: tên, mô tả chức năng trong 1 dòng, business domain nào, microservice nào
+ Thông tin chung: tên, mô tả chức năng trong 1 dòng, business domain nào, microservice nào
+ Cấu trúc dữ liệu: các bảng dữ liệu tác động đến
+ Các trường dữ liệu: primary key là trường nào.
+ Các Action: Create - Update - Search - View - Delete
+ Các Action: Create - Update - Search - View - Delete
+ Validation Rule: luật kiểm tra dữ liệu
+ Exception:
Các pattern thường gặp với màn hình nhập liệu
1- Nhập thông tin cấu hình dạng key - value
+ Exception:
Các pattern thường gặp với màn hình nhập liệu
1- Nhập thông tin cấu hình dạng key - value
2- CRUD dữ liệu nằm gọn trong 1 bảng. Create và Update có thể dùng chung 1 màn hình. Read và Delete chung 1 màn hình.
3- Tìm kiếm có 2 loại:
+ loại 1: search header và tabular result list
+ loại 1: search header và tabular result list
+ loại 2: tabular có dòng đầu tiên có các trường tìm kiếm
4- CRUD dữ liệu: Master - Detail (Một -- Nhiều). Tránh tạo mega screen, nếu tránh được cập nhật dữ liệu cả master và detail cùng lúc là tốt nhất. Vì đây màn hình rất phức tạp.
Cuối cùng là hãy tập trung làm việc, mỗi màn hình chỉ nên mất tối đa 1-2 tiếng để vẽ Balsamiq thôi. Dùng quá thời gian này có nghĩa bạn chưa hiểu tốt về nghiệp vụ hoặc đang sa đà vẽ một mega screen.