Giao diện hệ thống theo chức năng

3. Thiết kế

3.3. Giao diện hệ thống theo chức năng

3.3.1. Sơ đồ chức năng

Ảnh 31: sơ đồ chức năng hệ thống

Sơ đồ chức năng thể hiện nhóm chức năng - chức năng phân cấp của hệ thống, giúp người dùng có cái nhìn tổng quát về hệ thống.

68

3.3.2. Giao diện hệ thống theo chức năng

 Giao diện tổng quát

Ảnh 32: giao diện người dùng tổng quát

Giao diện người dùng đồ hoạ (GUI) của hệ thống được chia làm 6 vùng chính (được đánh số từ 1  6 như ảnh trên). Sau đây là mô tả chi tiết:

STT Tên Mô tả

1 Banner Vùng banner của trang

2 Thanh điều hướng trên Hiển thị chức năng: trang chủ, liên hệ, đăng nhập (đăng xuất)

3 Thanh điều hướng trái Cung cấp tất cả các chức năng của hệ thống

4 Vùng tiêu đề Hiển thị tiêu đề mỗi chức năng được chọn

5 Vùng nội dung Hiển thị nội dung giao diện tương tác với người dùng – thay đổi theo chức năng được chọn.

2 1

3 4

5

69

6 Chân trang Hiển thị những thông tin liên hệ của cơ quan chủ quản hệ thống – tập đoàn Wangtran.

Tuỳ theo loại tài khoản đăng nhập mà hệ thống sẽ hiển thị những chức năng khả dụng đối với người dùng. Phần sau, chúng tôi giới thiệu giao diện người dùng một số chức năng chính của hệ thống (với tài khoản đăng nhập là Administrator – toàn quyền).

 Đăng nhập

Ảnh 33: giao diện người dùng – Đăng nhập

 Đăng xuất

70

 Thêm sự cố mới

Ảnh 35: giao diện người dùng – Cung cấp thông tin sự cố

 Cập nhật thông tin sự cố

71

 Tìm kiếm sự cố

Ảnh 37: giao diện người dùng – Tìm kiếm sự cố đã cung cấp

 Tra cứu thông tin phần cứng

72

 Tra cứu sự cố mới

Ảnh 39 : giao diện người dùng – Danh sách sự cố vừa ghi nhận

 Phân công khắc phục

73

 Tra cứu danh sách công việc

Ảnh 41: giao diện người dùng – Danh sách công việc được phân công

 Cung cấp kết quả giải quyết

74

 Tra cứu FAQ

Ảnh 43: giao diện người dùng – Danh sách câu hỏi thường gặp

 Thêm FAQ mới

75

 Cập nhật FAQ

Ảnh 44: giao diện người dùng – Cập nhật FAQ

 Thay đổi quy định

76

 Xoá FAQ

Ảnh 47: giao diện người dùng – Xoá FAQ

 Đề nghị cập nhật

77 Ảnh 49: giao diện người dùng – Đề nghị cập nhật FAQ (form 2)

78

 Xét duyệt đề nghị

Ảnh 51: giao diện người dùng – Xét duyệt đề nghị cập nhật FAQ

 Báo cáo & thống kê

79

4. Tài liệu tham khảo

Bell, Donald. 2010. UML basics. IBM: http://www.ibm.com/developerworks/