Thiết kế giao diện của ứng dụng gồm một số nội dung sau:
III.1. Thiết kế màn hình chính
Mỗi ứng dụng nên có một màn hình chính. Màn hình chính sẽ xuất hiện đầu tiên khi ứng dụng được khởi động (gọi thực hiện) và cũng thường xuất hiện sau khi kết thúc một tác vụ chính của ứng dụng. Màn hình này có thể chứa một số nội dung chính như :
9 Những thông tin mang tính chất giới thiệu như : tên ứng dụng, phiên bản, bản quyền, chức năng chính của ứng dụng,...
9 Một thực đơn chính cho phép người sử dụng lựa chọn các chức năng của phần mềm. Thực đơn này có thể là một thực đơn kéo xuống hoặc thực đơn ngang hoặc hệ thống thực đơn nhiều cấp hoặc các nút nhấn (button), biểu tượng (icon),...
Thông qua màn hình chính này, hệ thống cũng có thể yêu cầu người sử dụng cung cấp một số thông tin như quyền hạn khai thác (username, password), kỳ khai thác,... nếu cần.
Một số hướng dẫn
9 Người thiết kế không nên chọn một màn hình giao diện cho một công việc nhập liệu nào đó của ứng dụng để làm màn hình chính ngay cả khi đó là công việc khai thác đầu tiên và rất thường xuyên đối với người sử dụng.
9 Người thiết kế có thể xây dựng một màn hình chính mang tính quảng cáo nhằm thu hút người sử dụng như loại giao diện thứ nhất mà chúng tôi đã đề cập phía trước nhưng cần phải tránh sự phô trương quá mức. Mỗi chi tiết, hình ảnh xuất hiện trên màn hình giao diện đều mang một ý nghĩa liên quan đến chức năng của ứng dụng hay dùng để hỗ trợ người sử dụng trong quá trình khai thác ứng dụng.
Học phần 4 – Phân tích Hệ thống Trang 70/150
III.2. Thiết kế thực đơn chính
Trong trường hợp ứng dụng có rất nhiều chức năng thì thực đơn chính của ứng dụng nên được thiết kế làm nhiều cấp, ví dụ như hệ thống thực đơn 2 chiều gồm các thực đơn ngang và các thực đơn kéo xuống.
Một số hướng dẫn
9 Văn bản trên các mục chọn nên ngắn gọn và gợi nhớ.
9 Số mục chọn ngang ở thực đơn cấp 1 không nên quá nhiều, số lượng vừa phải sao cho tất cả các mục chọn ngang đều có thể được hiển thị mà không bị che khuất ở phía bên phải của màn hình chính (không cần sử dụng đến thanh cuốn - scrollbar).
9 Các mục chọn ngang nên được sắp xếp tương tự các hệ thống thực đơn của những phần mềm thông dụng như : MS Word, MS Access, Visual FoxPro, ... để giúp cho người sử dụng nhanh chóng làm quen với giao diện của ứng dụng.
9 Qui định phím nóng cho các mục chọn của thực đơn.
9 Nếu một mục chọn của một thực đơn kéo xuống tương ứng với một thực đơn cấp thấp hơn thì nên đặt dấu hiệu f ở cuối văn bản của mục chọn để thông báo cho người sử dụng biết.
9 Nếu một mục chọn của một thực đơn kéo xuống có đặc tính khi được chọn sẽ kích hoạt một màn hình hỏi đáp để nhận thêm thông tin từ người sử dụng trước khi thực hiện một xử lý thì người thiết kế nên đặt dấu hiệu … ở cuối văn bản của mục chọn để thông báo cho người sử dụng biết.
9 Các mục chọn trong một thực đơn kéo xuống nên được phân nhóm bằng những đường phân cách rõ ràng.
9 Các phím tắt dành cho các mục chọn nên khớp với các phím tắt của các phần mềm thông dụng.
9 Tạo một thanh công cụ (toolbar) đi kèm với thực đơn chính trong đó chứa một số chức năng quan trọng hoặc thường xuyên thực hiện.
III.3. Thiết kế màn hình đăng nhập
Màn hình đăng nhập vào ứng dụng III.4. Thiết kế thanh công cụ
Chú ý:
Học phần 4 – Phân tích Hệ thống Trang 71/150 Thanh công cụ chỉ nên chứa những biểu tượng đặc trưng cho các xử lý phụ thuộc và phục vụ cho công việc nhập liệu. Đối với các xử lý tương đối độc lập với việc nhập liệu thì nên chọn các nút chức năng thay cho các biểu tượng trong thanh công cụ
III.5. Thiết kế màn hình nhập liệu
Giao diện trong các màn hình nhập liệu đóng vai trò hết sức quan trọng vì nó ảnh hưởng một cách trực tiếp đến độ chính xác của dữ liệu được đưa vào hệ thống cũng như quyết định năng suất nhập liệu của người sử dụng.
Một số hướng dẫn
9 Các màn hình giao diện nên được chừa lề trái-phải, trên-dưới một cách cân đối để tránh hiệu ứng màn hình bị lệch
9 Đối với các màn hình nhập liệu dạng 1-n, lưới (grid) dành cho bảng con nên đặt ở phần dưới hoặc bên phải của màn hình.
9 Không nên để quá nhiều đối tượng xuất hiện cùng một lúc trên màn hình. Trong trường hợp người sử dụng phải nhập nhiều mục dữ liệu thì người thiết kế nên phân chia thành các trang cho hợp lý. Ví dụ, giả sử cần phải thiết kế một màn hình nhập liệu cho hồ sơ sinh viên với vài chục chi tiết thì người thiết kế có thể chia thành các trang : thông tin về cá nhân (họ tên, ngày sinh, địa chỉ, đoàn thể,...), quan hệ gia đình (cha, mẹ,...), học vấn (cấp I, II, III,...)
9 Kiểu chữ dùng cho các văn bản (nhãn, hộp văn bản,...) nên có nét thanh, mảnh nhưng rõ ràng như : MS Sans Serif, VNI-Helve, VNI-Times,... với kích thước vừa phải. Nên tránh những kiểu chữ có nét dầy, mặt chữ không rõ ràng như : VNI-Brush, VNI-Present, VNI- Script,...
9 Trong một màn hình giao diện, không nên sử dụng quá nhiều mầu sắc, nhất là những mầu sáng chói hoặc sẫm tối, để tránh cho người sử dụng khỏi bị mệt mỏi khi làm việc với màn hình giao diện trong một thời gian dài. Người thiết kế nên tách biệt một số mầu chính như sau :
+ Mầu nền (background) của màn hình giao diện : chọn mầu sáng dịu như vàng nhạt, xanh da trời, hoặc mầu xám nhạt, ... Những màn hình giao diện thuộc chung một nhóm chức năng (nhập liệu, thông báo,...) nên có cùng mầu nền, ví dụ, các màn hình nhập liệu có mầu nền là mầu vàng nhạt, các màn hình thông báo có mầu nền là mầu xám nhạt,...
+ Mầu chữ (văn bản, nhãn,...) của màn hình giao diện : chọn các mầu sẫm như đen, xanh dương,... để tạo độ tương phản (vừa phải) so với mầu nền. Nếu mầu chữ được chọn là mầu xanh dương thì không nên gạch dưới (underline) các văn bản vì như thế người sử dụng sẽ dễ nhầm lẫn với các siêu văn bản (hypertext).
+ Mầu của tiêu đề : chọn mầu khác với mầu chữ để tạo ấn tượng về ban đầu về nội dung của màn hình giao diện.
+ Mầu nền cho các hộp văn bản : mầu sáng và khác với mầu nền của màn hình giao diện (ví dụ : mầu trắng).
Học phần 4 – Phân tích Hệ thống Trang 72/150
+ Mầu chữ cho các hộp văn bản : mầu sẫm và có thể giống hoặc khác với mầu chữ của màn hình giao diện (ví dụ : mầu đen).
9 Chọn lựa các loại đối tượng thích hợp trong màn hình giao diện. Nên sử dụng các phím tắt và hạn chế tối đa việc chuyển đổi liên tục giữa bàn phím và chuột trong quá trình nhập liệu của người sử dụng để tăng tốc độ nhập liệu.
9 Chọn chế độ hiển thị 3 chiều (3D) đối với các hộp văn bản (nhấn chìm vào phía bên trong màn hình).
9 Dữ liệu trong các hộp văn bản được canh biên theo dạng chuẩn, ví dụ, canh trái đối với dữ liệu kiểu Character, kiểu Date và canh phải đối với dữ liệu kiểu số,...
9 Các ô kiểm tra (check box) cũng như các phần tử trong một nhóm lựa chọn (options group) nên được trình bày theo hàng dọc gồm nhiều dòng, mỗi dòng chứa một ô kiểm tra hay một phần tử và nên tránh cách trình bày theo hàng ngang, trong đó một dòng chứa nhiều ô kiểm tra hay nhiều phần tử.
9 Các nhãn (label) cho các hộp văn bản không nên quá ngắn (chỉ là tên vùng) hoặc quá dài. Trong trường hợp các hộp văn bản được sắp xếp theo hàng dọc (từ trên xuống dưới) và kích thước của các nhãn không khác biệt nhiều thì có thể chọn canh biên (alignment) bên trái cho các nhãn. Ngược lại, nếu có sự khác biệt lớn giữa kích thước của các nhãn thì nên chọn canh biên bên phải. Sự lựa chọn này sẽ giúp cho người sử dụng có thể dễ dàng xác định các ô trong quá trình nhập liệu.
9 Các nút chức năng nên đặt ở phía bên dưới (hàng ngang) hoặc bên phải (hàng dọc) trong màn hình giao diện.
9 Nếu có nhiều màn hình giao diện cùng sử dụng một số nút chức năng thì thứ tự cũng như vị trí trên màn hình của các nút này phải cố định trong tất cả các màn hình giao diện nói trên.
9 Số các phần tử trong một nhóm các tùy chọn trong khoảng từ 3 đến 7. Nếu chỉ có 2 phần tử mà nội dung trái ngược nhau thì chuyển sang ô kiểm tra hoặc nếu có nhiều hơn 7 thì đổi thành hộp danh sách hoặc hộp danh sách kéo xuống.
9 Phần tử ngầm định cho một nhóm các tùy chọn nên lấy phần tử nào thường hay được người sử dụng chọn nhiều nhất và tránh những trường hợp dễ dẫn đến rủi ro, nguy hiểm. 9 Có thể chọn chế độ đảo mầu đối với phần tử được chọn trong một nhóm các tùy chọn. 9 Dùng hộp danh sách kéo xuống trong trường hợp người sử dụng chỉ được chọn một trong
số các dòng trong danh sách và dùng hộp danh sách khi người sử dụng có thể chọn nhiều dòng của danh sách. Ngoài ra, nếu việc lựa chọn các dòng của danh sách cần được người sử dụng thực hiện một cách cẩn thận thì nên tạo hai danh sách :
+ Danh sách bên trái chứa các dòng không được chọn,
+ Danh sách bên phải chứa các dòng đã được chọn,
9 Các nút lệnh có kích thước đều nhau và chiều cao của chúng không vượt quá ¼ chiều cao màn hình giao diện nếu các nút được đặt ngang trên một dòng hoặc không quá ¼ chiều ngang màn hình giao diện nếu các nút được đặt trên một cột (nhiều dòng).
9 Tương tự như các biểu tượng trong thanh công cụ, việc chọn lựa hình ảnh, nếu cần thiết, cho các nút lệnh rất quan trọng và tuyệt đối không nên chọn hình ảnh chỉ vì tính mỹ thuật. 9 Không nên đưa các hình ảnh chuyển động (animation) vào các màn hình nhập liệu.
Học phần 4 – Phân tích Hệ thống Trang 73/150
III.6. Thiết kế màn hình tìm kiếm, tra cứu
Màn hình tìm kiếm theo đơn đặt hàng III.7. Thiết kế màn hình hỏi đáp
Các màn hình hỏi đáp thường được dùng để nhận thêm thông tin từ người sử dụng trước khi thực hiện một xử lý nào đó. Trên các màn hình hỏi đáp, người thiết kế có thể đặt thêm một biểu tượng đặc trưng, ví dụ , và người sử dụng chỉ phải trả lời có/không, hoặc chọn lựa một số giá trị đơn giản. Người thiết kế nên cân nhắc kỹ lưỡng các giá trị ngầm định hay các nút chức năng ngầm định trong các màn hình hỏi đáp.
Màn hình kiểm tra trước một xử lý “nguy hiểm”
Màn hình chọn lựa thiết bị kết xuất III.8. Thiết kế màn hình thông báo
Màn hình thông báo gồm nhiều loại và được sử dụng với nhiều mục đích khác nhau : 9 Thể hiện tiến trình của một xử lý (progress, timer)
Học phần 4 – Phân tích Hệ thống Trang 74/150
9 Thông báo lỗi sai : thao tác không đúng qui định, lỗi sai về hệ thống
Một số hướng dẫn
9 Trên các màn hình thông báo nên có một biểu tượng đặc trưng, ví dụ (information) hoặc trong một số trường hợp đặc biệt cần lưu ý.
9 Các màn hình thể hiện tiến trình xử lý nên có kích thước nhỏ, không quá 10cm x 5cm, đặt tại một trong các vị trí : góc trên bên trái, điểm giữa, góc dưới bên phải và màn hình có thêm đặc tính di chuyển được (movable).
9 Thanh tiến trình (progress bar) có chiều cao không quá 1cm với hai mầu trắng, xanh dương và có thêm chỉ số % đặt ở bên phải phía ngoài hoặc ở giữa thanh tiến trình. Độ mịn của chỉ số % của thanh tiến trình phải cao (bước nhảy thấp) để tránh cho người sử dụng cảm giác phải chờ đợi lâu. Trong trường hợp thời gian xử lý kéo dài thì nên báo trước cho người sử dụng.
9 Nếu thời gian thực hiện của một xử lý chỉ giới hạn trong một vài giây thì không nhất thiết phải dùng màn hình thể hiện tiến trình mà thay vào đó là thay đổi hình thức con trỏ chuột (mouse pointer), ví dụ từ dấu mũi tên sang hình đồng hồ cát .
9 Trong các màn hình thông báo lỗi sai nên có hai nội dung: lỗi sai cùng với hướng dẫn cách xử lý lỗi sai và không nên sử dụng trực tiếp thông báo lỗi sai bằng tiếng Anh của các phần mềm.
III.9. Thiết kế màn hình gọi thực hiện báo cáo
Màn hình báo cáo III.10. Thiết kế báo cáo
Học phần 4 – Phân tích Hệ thống Trang 75/150
Màn hình cài đặt cấu hình hệ thống III.12. Thiết kế màn hình tiện ích
Ví dụ như các màn hình phân quyền (bảo mật), màn hình giúp đỡ, màn hình lưu trữ và phục hồi dữ liệu.
Học phần 4 – Phân tích Hệ thống Trang 76/150
Màn hình lưu trữ dữ liệu
Màn hình phục hồi dữ liệu
Chú ý:
Kết quả của việc thiết kế thành phần giao diện là: danh sách các mẫu thiết kế của các thành phần giao diện (xem thêm phụ lục A phần thiết kế)
Kinh nghiệm giảng dạy:
Hướng dẫn học viên thiết kế màn hình nhập liệu (màn hình đơn hoặc 1-n) cho các trường hợp sau: 1/ Thoả đầy đủ các yêu cầu nhập liệu (người dùng nhập liệu được)
2/ Tính tiện dụng. Ví dụ như có làm phím nóng, phím tắt, giúp đỡ, lấy giá trị mặc định 3/ Các chức năng hổ trợ thêm. Ví dụ như in ấn, sắp xếp, tìm kiếm, lọc dữ liệu, sao chép 4/ Có kiểm tra lỗi khi nhập liệu và thông báo lỗi rõ ràng
Khi thiết kế nên thiết kế tổng quát để từ đó có thể làm ra nhanh các màn hình tương tự
0
Học phần 4 – Phân tích Hệ thống Trang 77/150 Đối với các xử lý mât nhiều thời gian thì nên thiết kế thanh tiến trình (progress bar)
Học phần 4 – Phân tích Hệ thống Trang 78/150
Bài 10 LẬP TRÌNH – KIỂM THỬ Tóm tắt
Lý thuyết 2 tiết - Thực hành 0 tiết
Mục tiêu Các mục chính Bài tập bắt
buộc
Bài tập làm thêm
Nắm được các bước thực hiện trong giai đoạn lập trình và kiểm thử của một UDTH dựa theo mô hình thác nước