Bài giảng Phân tích hệ thống thông tin - Chương 8: Thiết kế giao diện

Nội dung text: Bài giảng Phân tích hệ thống thông tin - Chương 8: Thiết kế giao diện

1. Phân tích hệ thống thông tin - Chương 8: Thiết kế giao diện
2. Phân tích Thiết kế HTTT Thiết kế giao diện THIẾT KẾ GIAO DIỆN I. Những tính chất cơ bản mà giao diện cần có 1. Tính quen thuộc : Chúng ta phải đứng trên lập trường của người dùng để thiết kế giao diện sao cho gần gũi nhất đối với người sử dụng. Ta cần xác định người dùng làm việc trong môi trường nào, chuyên môn nào để sử dụng trên giao diện các thuật ngữ, các khái niệm phù hợp với môi trường làm việc cũng như chuyên môn ấy. 2. Tính nhất quán : Tính nhất quán nghĩa là các lệnh, các menu, các thông số hệ thống thuộc những chức năng, những phân hệ khác nhau phải được thiết kế theo một dạng thức thống nhất với nhau. Nhờ vậy, người dùng có thể tiết kiệm thời gian và sức lực trong việc làm quen với hệ thống (vì những gì họ học được ở chức năng này có thể được ứng dụng ở cả những chức năng khác). Xa hơn nữa, hiện nay đã có rất nhiều phần mềm được dùng phổ biến đến mức cách thức chúng tiếp xúc với người dùng đã trở nên tiêu chuẩn, quen thuộc với cộng đồng. Chúng ta nên tham khảo những phần mềm này để hệ thống của chúng ta nhanh chóng trở nên thân thiết với người dùng. 3. Tính hạn chế gây ngạc nhiên : Chúng ta phải đặt mình vào vị trí người dùng để xem xét người dùng mong đợi hệ thống ứng xử với họ ra sao. Từ đó chúng ta thiết kế giao diện đáp ứng với người dùng theo đúng cách thức ấy, nhờ vậy người dùng không bị bất ngờ (khi hệ thống ứng xử khác hẳn với những gì họ mong đợi). 4. Tính an toàn : Người dùng có thể gây sai sót trong khi sử dụng hệ thống. Giao diện có thể được thiết kế sao cho các thao tác không hợp lệ bị từ chối (Ví dụ : kiểm tra ngày sinh của sinh viên được nhập vào và báo lỗi khi ngày không hợp lệ). Ngoài ra giao diện cũng nên yêu cầu người dùng xác nhận lại một lần trước khi đáp ứng các lệnh nguy hiểm của người dùng (Vì dụ : Xác nhận việc xóa vĩnh viễn một dòng dữ liệu). Sau cùng, giao diện phải cung cấp chức năng Undo với số lần Undo chấp nhận được. 5. Tình tận tụy : Giao diện phải “năng nổ” trong việc đưa ra các trợ giúp ngữ cảnh (tooltip, help facility,brief discription ). Ngoài ra, các thông báo, đặc biệt là các câu báo lỗi phải rõ ràng, đầy đủ ngữ nghĩa và kèm theo một số tùy chọn cho người dùng khắc phục vấn đề (Ví dụ : các nút Retry, More information, hay các link đến những trang trợ giúp liên quan) 6. Tình đa thích ứng : Có những người dùng đã đạt trình độ lão luyện, đối với họ các nhắc nhở thường xuyên và những tooltip dài dòng là những điều phiền toái. Lại có những người dùng rất non tay và rất cần có những nhắc nhở đầy đủ ngữ nghĩa và những tooltip. Lại có những người dùng thích dùng chuột để điều khiển giao diện, ngược lại có những người thích dùng bàn phím. Giao diện phải có khả năng chuyển đổi qua lại giữa các chế độ (mode) và cung cấp nhiều phím tắt để thìch ứng với hầu hết phong cách người dùng. II. Giao tiếp với người dùng Hai nhiệm vụ của giao diện là nhận thông tin từ người dùng và xuất thông tin ra cho người dùng ☺ Nhận thông tin từ người dùng : Có 5 kiều thiết kế cách thức mà giao diện nhận thông tin từ người dùng, đó là : Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 1
3. Phân tích Thiết kế HTTT Thiết kế giao diện 1. Dùng thao tác trực tiếp : Gọi nôm na là kéo và thả (drag and drop). Ví dụ : kéo một record cần xóa vào biểu tượng thùng rác. Cách này có ưu điểm là dễ dàng cho người dùng nhưng có khuyết điểm là khó cài đặt. 2. Dùng menu : Là cách rất phổ biến, hiện diện trong hầu hết mọi phần mềm, giúp hệ thống biết người dùng muốn làm gì. Cách này có ưu điểm là dễ dùng và hạn chế thao tác không hợp lệ nhưng có khuyết điểm là thao tác chậm và gây bối rối nếu menu lồng nhiều cấp. 3. Dùng form nhập liệu : Là cách rất đối với các ứng dụng quản lý. Cách này có ưu điểm là dễ dùng và từ chối được dữ liệu không hợp lệ nhưng có khuyết điểm là cần nhiều không gian màn hình. 4. Dùng dòng lệnh : Chỉ thích hợp với những người dùng thành thạo. cách này có ưu điểm là linh hoạt nhưng có khuyết điểm là khó học và khó hạn chế lỗi người dùng. 5. Dùng ngôn ngữ tự nhiên : Cách lý tưởng được mọi nhà phát triển mong muốn nhắm đến. ☺ Xuất thông tin ra cho người dùng : Khi chọn lựa hình thức xuất thông tin ra giao diện cho người dùng, chúng ta cần cân nhắc một số vấn đề sau : 1. Nếu thông tin là dạng chuỗi hoặc dạng số đòi hỏi tính chính xác cao thì phải xuất ra dạng văn bản. 2. Nếu thông tin thay đổi thường xuyên theo thời gian thì nên xuất ra dạng đồ họa. Ví dụ : Lượng hàng trong kho có thể biểu hiện bẳng dạng bar : hàng vừa nhập vào thì bar dài ra, nhưng không vượt quá sức chứa của kho biểu hiện bằng vạch Max, hàng được xuất bán bao nhiêu thì bar ngắn đi tương ứng nhưng không thấp hơn lượng tồn tối thiểu biểu hiện bằng vạch Min. 3. Nếu thông tin vừa đòi hỏi tính chính xác, vừa thường xuyên thay đổi thì nên phối hợp cả hai cách thể hiện trên đây. 4. Khi người dùng cần tương tác với thông tin thì thông tin buộc phải biểu diễn bằng dạng đồ họa. Ví dụ : Lớp học biểu diễn bằng các box và sinh viên biểu diễn bằng các item trong từng box (ứng với từng lớp), thể hiện này đáp ứng cho thao tác xếp lớp của người dùng (kéo item-sinh viên từ box-lớp này thả vào box-lớp khác) 5. Khi cần so sánh thông tin thì nên hiển thị thông tin dạng đồ họa. Ví dụ : Biểu hiện mối tương quan giữa chi phí tiếp thị và doanh thu bán hàng bẳng hai đồ thị trong cùng một hệ tọa độ để người dùng tiện so sánh một cách trực quan. III. Thiết kế thông báo trên giao diện Khi thiết kế các thông báo, ta cần chú ý một số điểm sau : 1. Người dùng thành thạo chỉ cần các thông báo ngắn gọn, mang tính nhắc nhở. Trong khi đó người dùng thành thạo cần các thông báo cụ thể tường tận và (nếu được) kèm thêm một hướng dẫn ngắn gọn về những gì họ phải làm. Hệ thống nên cho phép chuyển đổi qua lại giữa hai chế độ thông báo này. 2. Thông báo cho các đối tượng người dùng khác nhau thì sử dụng ngôn ngữ khác nhau. Ví dụ : Những thông báo thuộc phân hệ dành cho ban lãnh đạo doanh nghiệp thì sử dụng ngôn ngữ mang tính vĩ mô, quản trị. Những thông báo thuộc phân hệ dành cho nhân viên thì sử dụng ngôn ngữ mang tính tác vũ tác nghiệp. 3. Nội dung thông báo phải trung lập, khách quan hoàn toàn. Trong bối cảnh Viện Nam chúng ta, đại từ nhân xưng rất đa dạng, do đó thông báo tránh sử dụng đại từ Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 2
4. Phân tích Thiết kế HTTT Thiết kế giao diện nhân xưng. Ví dụ : Nên xuất thông báo là “Ngày sinh nhân viên không hởp lệ, xin vui lòng nhập lại !”. Không nên xuất thông báo là “Bạn nhập ngày sinh nhân viên không hợp lệ, xin vui lòng nhập lại !” 4. Hoạt động bên trong hệ thống là một blackbox với người dùng, các thông báo không được chứa các thuật ngữ chuyên môn của người lập trình. Ví dụ : Các thông báo sau đây là không nên “ID sinh viên không hợp lệ”, “Lỗi hệ thống, mã lỗi #27”, 5. Nội dung thông báo phải cụ thể, không được chung chung. Ví dụ : Các thông báo sau đây là quá chung chung “Nhập liệu sai”, “Dữ liệu không hợp lệ”, IV. Sơ đồ liên kết các màn hình Mỗi ứng dụng đều phải có một giao diện xuất hiện đầu tiên khi hệ thống được khởi động, chúng ta gọi đó là màn hình chính (hoặc home page với ứng dụng web). Từ giao diện chính, người dùng sẽ được dẫn dắt đến những chức năng khác nhau của hệ thống. Trước tiên, chúng ta phải có danh sách tất cả các chức năng mà hệ thống cần có. Kế tiếp, với mỗi chức năng ta xác định tất cả những giao diện cần có cho nó. Trong số các giao diện thuộc phạm vi của một chức năng, phải chọn ra 1 giao diện chính sẽ được load đầu tiên khi người dùng chọn chức năng ấy. Bắt đầu từ giao diện này ta xác định những liên kết giữa các giao diện còn lại của chức năng đang xét. Các chức năng được tổ chức thành từng nhóm. Vì vậy các giao diện theo đó cũng được tổ chức thành từng nhóm. Việc gom nhóm này phải theo một tiêu chí nhất định. Trong phạm vi tài liệu này xin giới thiệu 3 tiêu chí gom nhóm thường được dùng : 1. Gom nhóm theo mục đích của giao diện Theo tiêu chí này, giao diện được phân thành các nhóm theo mục đích của giao diện. Ví dụ : Nhóm giao diện nhập liệu, nhóm giao diện tra cứu, nhóm giao diện báo cáo, Hình dưới đây là một ví dụ trong bối cảnh ứng dụng quản lý đề tài tốt nghiệp, chúng ta thấy các giao diện được gom nhóm rất rõ rệt theo mục đích của chúng. Nhập liệu Lĩnh vực frmNhapLV Chuyên Ngành frmChuyenNganh Trường frmTruong Quốc gia frmQuocGia Đề tài frmNhapDT Xét duyệt Nhập Chuyên gia frmNhapCG đề tài Nhập Hội Đồng frmHoiDong Xét duyệt frmXetDuyetDT Đăng ký Nhóm đăng ký frmDangKyDeTai đề tài Đăng ký đề tài frmDangKy Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 3
5. Phân tích Thiết kế HTTT Thiết kế giao diện frmTcuuKP Tra cứu Kinh Phí đề tài Trạng thái đề tài frmTcuuTrangThaiDT Cuộc hội thảo frmTCHoiThao Hội thảo đề tài frmTCHoiDong Hội đồng xét duyệt frmHTDeTai Báo Trạng thái frmBcDeTai rptTrangthaiDT cáo đề tài frmBcaoGiaHan rptGiaHan Đề tài gia hạn frmBCCuocHT rptCuocHT Cuộc hội thảo Tình hình hội frmBCHoiThao rptHTDT thảo Hội đồng xét frmHDXetDuyet rptHDXetDuyet duyệt 2. Gom nhóm theo loại thực thể được quản lý Theo tiêu chí này, các giao diện xoay quanh việc quản lý cùng một loại thực thể sẽ được gom vào cùng một nhóm. Hình dưới đây là một ví dụ trong bối cảnh ứng dụng phân tích khả năng thị trường : Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 4
6. Phân tích Thiết kế HTTT Thiết kế giao diện Chúng ta thấy rằng ứng dụng này quan tâm 6 loại thực thể : Khách hàng, tiến trình bán hàng, đối thủ cạnh tranh, sản phẩm, hoạt động tiếp thị, thị trường mục tiêu. Do đó sẽ có 6 nhóm giao diện tương ứng. Sau đây là ví dụ về sơ đồ liên kết nhóm giao diện quản lý loại thực thể khách hàng (các nhóm kia cũng tương tự như vậy) Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 5
7. Phân tích Thiết kế HTTT Thiết kế giao diện 3. Gom nhóm theo đối tượng người dùng Theo tiêu chí này, các giao diện phục vụ cho cùng một đối tượng người dùng sẽ được gom vào cùng một nhóm. Hình dưới đây là một ví dụ về ứng dụng quản lý trò chơi truyền hình Rồng Vàng. Ứng dụng này phục vụ hai đối tượng người dùng là Biên tập viên chương trình và Thí sinh. Do đó các giao diện cũng được gom thành hai nhóm rõ rệt. Màn hình biên Đăng nhập quyền tập viên Màn hình Đăng ký Màn hình biên tập viên đăng ký account chính mới Màn hình thí sinh Đăng nhập quyền thí sinh Màn hình soạn sửa Màn hình soạn sửa câu hỏi lựa chọn câu hỏi sắp thứ tự Màn hình biên Màn hình tra cứu tập viên Màn hình tra cứu câu hỏi lựa chọn câu hỏi sắp thứ tự Màn hình soạn sửa Màn hình tra cứu chủ đề chủ đề Màn hình thí Màn hình tra cứu sinh thành tích thí sinh Màn hình thông Màn hình tham dự vòng 1 (trả báo trả lời sai Trả lời câu hỏi sắp thứ tự) Trả lời lời đúng sai Màn hình tham dự vòng 2 (trả lời câu hỏi sắp lựa chọn) Chọn đổi Trả lời sai Chọn trả lời Chọn xem câu hỏi 2 lần gợi ý Màn hình sử dụng quyền Màn hình sử dụng quyền trợ giúp trả lời 2 lần Trả lời đúng trợ giúp xem gợi ý câu hỏi 16 Màn hình thông báo chiến thắng (trả lời đúng 16 câu hỏi) Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 6
8. Phân tích Thiết kế HTTT Thiết kế giao diện V. Đặc tả giao diện Mỗi giao diện chúng ta đặc tả 3 nội dung : 1. Mô tả giao diện Chúng ta có thể sử dụng tất cả các công cụ từ đơn giản như Winword, Paint đến phức tạp như Photoshop, Corel để hỗ trợ việc trình bày từng giao diện. Kết hợp với bản mô tả (sưu liệu) về giao diện đó giúp cho người lập trình dễ dàng thực hiện. 2. Đặc tả các đối tượng trên giao diện Mỗi đối tượng trên màn hình ta đặc tả tên đối tượng, ý nghĩa đối tượng, loại đối tượng, kích thước đối tượng, ghi chú thêm. Trong việc đặc tả các control trên màn hình, chúng ta quan tâm đến kích thước control mà đôi khi quên giới thiệu các con số chúng ta trình bày tính theo đơn vị gì. Hiện có 2 đơn vị thường được sử dụng là pixel (điểm ảnh) và twips (1 twip = 1/20 pixel). 3. Mô tả xử lý của màn hình Có rất nhiều cách mô tả xử lý trên màn hình. Chúng ta có thể sử dụng mã giả để đặc tả xử lý của màn hình. Hoặc nếu có thể sử dụng các mô hình đặc tả xử lý đã học như mô hình DFD hay mô hình tựa Merise để đặc tả xử lý cho trực quan. Vì giao diện đáp ứng từng biến cố mà người dùng thao tác nên tốt hơn hết là dùng mô hình tựa Merise. Vd : Dưới đây là đặc tả giao diện nhập giảng viên trong ứng dụng quản lý trung tâm Anh ngữ A & Z. a) Mô tả màn hình : Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 7
9. Phân tích Thiết kế HTTT Thiết kế giao diện b) Đặc tả các đối tượng trên giao diện : STT Tên Ý nghĩa Loại Rộng Cao Ghi chú Lưu họ và tên Text Chiều dài dữ liệu là 50 1 TxtTen 500 27 Giảng viên box ký tự Lưu ngày sinh Combo Có 31 Items (từ ngày 1 2 CmbNgaySinh 60 27 của Giảng viên box đến ngày 31) Lưu tháng sinh Combo Có 12 Items (từ tháng 3 CmbThangSinh 60 27 của Gỉảng viên box 1 đến tháng 12) Lưu năm sinh Text Chiều dài dữ liệu là 4 4 TxtNamSinh 80 27 của Giảng viên box ký tự Lưu phái của Combo Có 2 Items là “Nam và 5 CmbPhai 150 27 Giảng viên box “Nữ” Lưu địa chỉ của Text Chiều dài dữ liệu là 50 6 TxtDiaChi 620 27 Giảng viên box ký tự Lưu số ĐT của Text Chiểu dài dữ liệu là 9 7 TxtDT 187 27 Giảng viên box ký tự Lưu đ/c Email Text Chiều dài dữ liệu là 30 8 TxtEmail 300 27 của Giảng viên box ký tự Hiển thị mọi List Tự động lấp đầy nội 9 LvBangCap loại bằng cấp 330 110 view dung khi form load. có trong dữ liệu Mở ra một màn hình Thêm một bằng Cmd con để nhập ngày cấp 10 BtnAdd 40 40 cấp cho GV button và chú thích trước khi bổ sung bằng cấp. Lưu mọi bằng List Được bổ sung từng 11 LvBCGV 330 110 cấp mà GV có view dòng bằng BtnAdd. Thêm loại bằng Cmd Mở form MHBangCap 12 BtnMoi 170 28 cấp mới button để thêm loại bằng cấp Xóa một bằng Cmd Disable khi GV trong 13 BtnXoa 170 28 cấp của GV button LvBCGV còn rỗng Lưu GV mới Cmd Có phát sinh mã GV và 14 BtnLuu 140 28 vào CSDL button kiểm tra dữ liệu nhập. Cập nhật thông Cmd Disable khi biến 15 BtnCNhat 140 28 tin GV đã có button ChrMaGV rỗng. Chuẩn bị nhập Cmd Xóa hết text của mọi 16 BtnLamLai 140 28 một GV mới button control (trừ LvBCap) Kết thúc việc Cmd 17 BtnThoat 140 28 Trở về màn hình chính nhập GV button Ngày cấp bằng Combo Có 31 Items (từ ngày 1 18 CmbNCap 48 26 cho Giảng viên box đến ngày 31) Tháng cấp Combo Có 12 Items (từ tháng 19 CmbTCap 48 26 bằng cho GV box 1 đến tháng 12) Năm cấp bằng Text Chiều dài dữ liệu là 4 20 TxtNmCap 44 26 cho Giảng viên box ký tự Lưu chú thích Text Chiều dài dữ liệu là 20 21 TxtChuThich về bằng cấp 216 26 box ký tự của Giảng viên Chấp nhận Đóng màn hình con, về Cmd 22 BtnDongY ngày cấp & chú 122 27 MHGiangVien, thêm 1 button thích đã nhập dòng vào LvBCGV Hủy việc thêm Cmd Trở về MHGiangVien, 23 BtnHuy 122 27 bằng cấp GV button không có gì thay đổi Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 8
10. Phân tích Thiết kế HTTT Thiết kế giao diện c) Mô tả xử lý của màn hình : Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 9
11. Phân tích Thiết kế HTTT Thiết kế giao diện VI. Một số lời khuyên khi thiết kế giao diện Khi thiết kế giao diện, ta thiết kế các control như label, button, textbox, sao cho khoảng trống trong form được giảm tối đa; các control phải cân đối về độ rộng, hẹp, font chữ Ví dụ màn hình sau đây tận dụng triệt để không gian quý báu của màn hình Khi thiết kế giao diện, những thông tin có liên quan với nhau nên được gom vào cùng một frame và tốt hơn nữa là gắn nhãn cho frame tăng cường ngữ nghĩa cho giao diện. Ví dụ giao diện dưới đây cho thấy thông tin về đối thủ cạnh tranh chia làm 5 nhóm là thông tin cơ bản, thông tin liên lạc, thông tin điểm mạnh, thông tin điểm yếu và nhóm thông tin không được gắn nhãn dùng để kiểm soát (người cập nhật và ngày cập nhật) Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 10
12. Phân tích Thiết kế HTTT Thiết kế giao diện Có thể sử dụng màu sắc thay đổi để làm nổi bật nội dung. Như trong hình sau, màu sắc thay đổi trong từng dòng dữ liệu cho biết đề tài đó đã được xét duyệt hay chưa hay hoàn tất. Những màu sắc có ý nghĩa khác nhau phải thực sự tương phản nhau. Khi người dùng làm việc cường độ cao, sự căng thẳng có thể ảnh hưởng thị giác gây nhầm lẫn giữa những màu từa tựa nhau dẫn đến lẫn lộn về ý nghĩa. Khi sử dụng màu sắc trên giao diện cần lưu ý : Không nên sử dụng quá năm màu trong một màn hình. Nếu giao diện sử dụng quá nhiều màu sắc, người dùng sẽ có cảm giác choáng ngợp và rối mắt. Màu sắc phải được dùng một cách nhất quán trên tất cả các giao diện của hệ thống theo một tiêu chí nhất định, tránh sử dụng màu sắc chỉ để trang trí. Ta cần tránh dùng màu chói sẽ gây cảm giác bức bối cho người dùng. Khi thiết kế giao diện nhập liệu cho một dòng dữ liệu bảng A mà có tham chiếu (khóa ngoại) đến một dòng dữ liệu bảng B, ta nên cung cấp liên kết đến giao diện nhập liệu cho bảng B (phòng khi dòng dữ liệu tương ứng ở bảng B chưa tồn tại). Bộ môn HTTT – Khoa CNTT - Trường ĐH KHTN 11