Qui trình thiết kế GUI

Tắnh sử dụng là mục tiêu đầu tiên của việc thiết kế hệ thống tương tác. Quy trình thiết kế GUI giúp chúng ta nâng cao khả năng phân tắch, thiết kế, cài đặt và kiểm thử giao diện người sử dụng. Thiết kế UI là tiến trình lặp, nên UI không chỉ được xây dựng một lần mà được thực hiện lặp nhiều lần để có được prototype ngày càng đầy đủ, độ tin cậy ngày càng cao hơn.

2.3.1 Bài toán

Vấn đề: Mô tả vấn đề mà bài toán sẽ giải quyết dưới góc nhìn của

người sử dụng. Mục tiêu của người sử dụng là gì?

Người sử dụng: Tắnh cách hóa nhóm người sử dụng đối mặt với vấn đề

sẽ giải quyết. Tìm ra các đặc điểm của người sử dụng.

Giải pháp: Mô tả giải pháp chắnh có thể áp dụng để giải quyết vấn đề.

Không cần mô tả chi tiết ở đây vì giải pháp có thể tìm ra trong khi xây dựng và đánh giá một vài prototype ở giai đoạn sau.

2.3.2. Phân tắch ngƣời sử dụng

Phân tắch người sử dụng là quá trình thu thập thông tin về người sử dụng cho bản thiết kế đầu tiên. Mục tiêu của phân tắch người sử dụng:

 Nhận biết ai là người sử dụng phần mềm do ta thiết kế?

 Kỹ năng và mức độ của người sử dụng?

 Cách thức sử dụng hệ thống của người sử dụng?

 Hiểu biết môi trường sử dụng hệ thống tương tác

 Quan hệ giữa người sử dụng với người sử dụng khác trong tổ chức (làm việc độc lập hay giúp đỡ nhau)

Phân nhóm người sử dụng:

 Tần suất sử dụng: Thường xuyên sử dụng hay thỉnh thoảng Các kỹ thuật phân tắch người sử dụng:

 Tìm ra người đại diện để thu thập từ họ những thông tin về người sử dụng

 Trả lời bảng câu hỏi thăm dò để có được các tắnh chất nổi trội

 Kỹ thuật khác là phỏng vấn trực tiếp người sử dụng

 Quan sát người sử dụng thực hiện nhiệm vụ hàng ngày để biết các chi tiết về ngữ cảnh và môi trường sử dụng.

2.3.3. Phân tắch nhiệm vụ

Phân tắch nhiệm vụ là tiến trình phân tắch cách mà người sử dụng thực hiện nhiệm vụ của họ với hệ thống. Phân tắch chi tiết các nhiệm vụ dẫn tới mô tả nhiệm vụ rõ ràng, đảm bảo rằng giao diện người sử dụng phù hợp với nhiệm vụ của người sử dụng. Các câu hỏi cần trả lời khi phân tắch nhiệm vụ:

 Người sử dụng làm cái gì?

 Họ làm việc bằng công cụ gì?

 Họ cần có hiểu biết gì khi làm việc? Kỹ thuật phân tắch nhiệm vụ:

 Phỏng vấn, quan sát người sử dụng thực hiện công việc hàng ngày.

 Phân rã chức năng

2.3.4 Phác họa thiết kế

Sau khi phân tắch nhiệm vụ, hãy hình thành kịch bản (vắ dụ thực, cụ thể về nhiệm vụ). Mô tả nhiệm vụ là khá trừu tượng thì các kịch bản cần được mô tả đầy đủ và chi tiết.

Thiết kế ban đầu: biểu diễn phác họa các cửa sổ, hộp thoại, cây thực

đơn, các điều khiển dành cho người sử dụng và diễn giải ngắn gọn về các chức năng của chúng.

Kịch bản: Với mỗi kịch bản, mô tả việc sử dụng giao diện ban đầu như

thế nào để thực hiện nhiệm vụ. Phác họa mô tả hình dáng giao diện tại một số điểm quan trọng của nhiệm vụ. Khi phác họa giao diện, không cần quá chi tiết

như chọn nhãn, biểu tượng hay bố trắ màn hình. Hãy để cho UI thật đơn giản mà tập trung vào mô hình dự định giao tiếp với người sử dụng.

2.3.5 Prototype giấy

Prototype là lựa chọn tuyệt vời cho những vòng lặp thiết kế đầu tiên. Prototype giấy là mô hình vật lý của giao diện làm từ giấy.

 Giao diện được phác họa bằng tay trên các mẩu giấy.

 Mẩu giấy biểu diễn các phần tử khác nhau như thực đơn, hộp thoại hay cửa sổ.

 Tương tác: trỏ bằng tay tương ứng với trỏ bằng chuột, viết trên các mẩu giấy tương ứng với gõ bàn phắm.

Ta cần xây dựng Prototype giấy vì:

 Phác họa bằng tay trên giấy sẽ nhanh hơn việc viết mã trình hay phác họa bằng máy tắnh.

 Giấy là dễ thay đổi.

 Xây dựng nhanh.

 Phác họa bằng tay làm tăng phản hồi nhận được từ người sử dụng.

 Không đòi hỏi kỹ năng đặc biệt nào. Công cụ xây dựng prototype giấy:

 Bảng áp phắch trắng (11Ợ x14Ợ): Làm nền, khung cửa sổ.

 Số lượng lớn các thẻ chỉ mục (4Ợ x 6Ợ , 5Ợ x8Ợ): Làm menus,

window contents, và dialog boxes.

 Hồ dán: Để dán các mẩu giấy.

 Băng giấy trắng: Để làm text fields, checkboxes, short messages.

 Giấy bóng kắnh: Để người sử dụng ỘtypingỢ (viết lên chúng).

 Máy sao chụp: Để tạo ra nhiều phần tử trong bản mẫu.

2.3.6 Prototype máy tắnh

Prototype máy tắnh là mô phỏng phần mềm tương tác. Sử dụng prototype máy tắnh để khám phá thiết kế đồ họa của giao diện cuối cùng.

 Bố trắ màn hình: Rõ ràng, phức tạp hay làm rối bời hay không? Người sử dụng có thể tìm thấy các phần tử quan trọng không?

 Màu, font, icon và các phần tử khác: Lựa chọn phù hợp chưa?

 Phản hồi tương tác: Có khả năng thông báo với người sử dụng bằng thông điệp, thanh trạng thái, thay đổi hình dáng con chạy và cách phản hồi khác.

Kỹ thuật để xây dựng prototype máy tắnh là Storyboard. Storyboard là trình tự của các màn hình cố định. Mỗi màn hình có một hoặc nhiều điểm nóng (hotspots) hoặc hyperlink mà ta có thể nhấn chuột để nhảy đến màn hình khác. StoryBoard được sử dụng cho các kịch bản, chuyển dần đến chi tiết hơn. Nó là dãy các phác thảo/khung hình cơ bản

2.3.7 Cài đặt

Thực hiện cài đặt UI demo theo prototype đã xây dựng. Hoàn thiện cài đặt các nhiệm vụ quan trọng đã nhận ra khi phân tắch nhiệm vụ để người sử dụng có thể kiểm thử. Cài đặt cần có cả thành phần chắnh và hệ thống.

2.3.8 Kiểm thử bởi ngƣời sử dụng

Kiểm thử bởi người sử dụng là kỹ thuật được sử dụng để đánh giá sản phẩm bằng cách người sử dụng thử nghiệm nó. Phương pháp này cho phép quan sát trực tiếp người sử dụng khi họ đang sử dụng ứng dụng. Ta có các bước kiểm thử bởi người sử dụng:

 Phát triển kế hoạch kiểm thử: Mô tả mục đắch kiểm thử, lý lịch người sử dụng, phương pháp, danh sách nhiệm vụ.

 Chọn lựa người tham gia: Chọn người sử dụng, phân nhóm, quản lý cơ sở dữ liệu người sử dụng

 Chuẩn bị vật liệu kiểm thử: Kịch bản nhiệm vụ, mẫu thu thập dữ liệu, hướng dẫn thảo luận, các câu hỏi sau kiểm thử, lập danh sách các kiểm thử sẽ thực hiện.

 Thực hiện kiểm thử thắ điểm (Pilot Test)

 Thực hiện kiểm thử thật (Real Test)

 Phân tắch và báo cáo cuối cùng

Để thiết kế UI một cách nhanh chóng thì ngoài thiết kế theo quy trình thiết kế GUI ta cũng cần phải sử dụng những kinh nghiệm, tri thức và kết quả đã có từ trước. Các kết quả này được trừu tượng hoá thành một mẫu.

Kết luận chƣơng 2

Áp dụng mẫu thiết kế là phương pháp tốt để tăng cường hiệu quả thiết kế. Nó là sản phẩm dựa trên thực tế người sử dụng hay dùng để sử dụng lại . Ta đã tìm hiểu quy trình thiết kế GUI và có áp dụng mẫu. Gồm có hai loại mẫu là các mẫu kiến trúc và các mẫu đồ họa. Các mẫu kiến trúc được giới thiệu trong rất nhiều tài liệu của nhiều tác giả, trong giới hạn luận văn tôi chỉ trình bầy 6 mẫu kiến trúc. Các mẫu đồ họa tôi tìm hiểu 4 loại mẫu: các mẫu định vị, các mẫu tổ chức trang, các mẫu hành động và đồ họa thông tin. Các mẫu định vị giúp người sử dụng biết họ đang ở đâu, họ đã đi được những đâu và họ cần phải đi đến đâu. Các mẫu tổ chức trang nhằm thu hút, lôi kéo người dùng tập trung vào những phần quan trọng của trang. Các mẫu hành động giúp người dùng sử dụng giao diện đỡ nhàm chán hơn. Các mẫu đồ họa thông tin đưa người sử dụng có cái nhìn trực quan hơn lời nói. Ta thấy mỗi mẫu là một giải pháp trong thiết kế phần mềm. Thiết kế đồ họa có nhiều thiết thực trong thiết kế giao diện. Do đó sử dụng thiết kế đồ họa là rất tốt, giúp ta thiết kế được một giao diện người dùng thân thiện, dễ sử dụng.

CHƢƠNG III. XÂY DỰNG GIAO DIỆN THỬ NGHIỆM

Chương này trình bày quá xây dựng GUI cho một phần mềm. Một số mẫu thiết kế đồ họa và qui trình thiết kế GUI trình bày trong chương II được áp dụng ở đây để có được phần mềm với GUI có tắnh sử dụng được.

3.1. Giới thiệu bài toán

Hiện nay ở trường Đại học Kỹ thuật Công nghiệp nói riêng và các trường cao đẳng , đại học nói chung vấn đề quản lý điểm là hết sức khó khăn và phức tạp . Khi giảng viên nhận giảng dạy cho một lớp nào đó thì chỉ nhận được 2 bản danh sách lớp, một bản để điểm danh và một bản để ghi điểm.

 Việc lưu trữ trên giấy này dễ bị thất lạc vì thời gian dạy có thể sẽ kéo dài.

 Giấy tờ sử dụng nhiều sẽ dễ bị nhàu nát, trông mất mỹ quan

 Việc ghi nhầm có thể xảy ra nên bảng điểm bị tẩy xóa có thể gây ra sự nhìn nhận không tốt về giảng viên

 Cách đánh giá sinh viên của mỗi trường hay mỗi môn học khác nhau

3.2. Giải pháp

Xây dựng chương trình Quản lý điểm nhằm mục đích:

 Thiết kế phần mềm để lưu trữ và quản lý điểm sinh viên , lớp học dành cho giảng viên

 Phần mềm sử dụng ngôn ngữ tiếng Việt, giao diện đơn giản, thân thiện và dễ sử dụng.

 Phần mềm có khả năng lưu trữ thông tin của sinh viên để giáo viên liên lạc khi cần thiết

3.3. Phân tích ngƣời sƣ̉ dụng và phân tích nhiệm vụ 3.3.1. Phân tắch ngƣời sử dụng

 Đối tượng chắnh: Giảng viên

 Giới tắnh : Nam và Nữ.

 Học vấn : Tốt nghiệp Đại học trở lên.

 Kinh nghiệm sử dụng máy tắnh : Tối thiểu có 1 năm kinh nghiệm.

 Các kỹ năng : Soạn thảo văn bản trên máy tắnh, Đọc hiểu tài liệu hướng dẫn

 Kinh nghiệm nghiệp vụ : Hiểu biết về quy trình vào điểm.

 Tần suất sử dụng: Trung bình tối đa ngày 1 lần.

 Mức độ kỹ năng năng sử dụng máy tắnh.

 Bắt đầu: 0%

 Học việc: 40%

 Kinh nghiệm: 35%

 Thành thạo: 25%

3.3.2. Phân tắch nhiệm vụ

Tiêu đề : Xây dựng g iao diện Quản lý điểm trường Đại học Kỹ thuật Công nghiệp Thái Nguyên.

Vấn đề cần giải quyết : Lưu trữ, tìm kiếm và truy cập các thông tin về lớp học, sinh viên, điểm số của sinh viên.Nhập điểm của sinh viên vào rồi xử lý và đưa ra bảng điểm tổng hợp.

User : Là tất cả giảng viên đang tham gia các công tác giảng dạy trong trường.

Sau khi khảo sát ta có Bảng Use-case sau :

TT Tên Use-case Mô tả trƣờng hợp sử dụng

1

Quản lý thông tin người sử dụng

Quản lý và cập nhập các thông tin của người sử dụng

User có thể cập nhật các thông tin cá nhân của mình vào phần mêm

User có thể đổi mật khẩu truy cập phần mềm. 2

Quản lý sinh viên

Quản lý thông tin cá nhân của sinh viên User có thể thêm mới sinh viên

User Có thể sửa các thông tin của sinh viên User có thể xóa thông tin của sinh viên

User có thể tìm kiếm của sinh viên

3 Quản lý môn học

Chức năng này được người dùng sử dụng để cập nhật thông tin môn học như thêm thông tin môn học mới hay xóa môn học hay sửa thông tin môn học.

4 Quản lý lớp học

Chức năng nà được người dùng sử dụng để cập nhật thông tin của lớp học như thêm thông tin lớp học mới hay xóa lớp học hay sửa thông tin lớp học. 5 Quản lý điểm Quản lý tổng quát điểm sinh viên, ta có thể tìm

kiếm và xem được bảng điểm theo từng lớp 6 Tra cứu thông tin

sinh viên

Chức năng này dùng để tìm kiếm mở rộng đối với các thông báo in của sinh viên

7 Tra cứu thông tin về điểm

Chức năng này dùng để tìm kiếm mở rộng đối với các thông tin về điểm của sinh viên

8 Hướng dẫn sử dụng

Thông tin về các chức năng và cách sử dụng các chức năng có trong phần mềm

Từ các trường hợp sử dụng (Use-case) trên mô tả phân rã chức năng như sau :

0 : Cập nhật thông tin người sử dụng 1. Login

2. Chọn menu Cập nhật thông tin người sử dụng 2.1. Điền thông tin cần thiết vào.

2.2. Nhấn chuột vào nút cập nhật

2.3. Nếu muốn sửa lại thì chọn lại bước 2 3. Đổi mật khẩu

3.1. Điền Mật khẩu hiện tại 3.2. Điền mật khẩu mới vào

3.3. Điền mật khẩu mới thêm một lần nữa 3.4. Nhấn chuột vào nút cập nhật

3.5. Nếu nhập mật khẩu bị sai hay mật khẩu bước 3.2 và 3.3 không khớp thì làm lại từ bước 3.1

4. Chọn menu Quản lý sinh viên

4.1.Thêm mới thông tin về sinh viên 4.1.1. Điền thông tin cần thiết vào 4.1.2. Nhấn chuột vào nút thêm mới 4.2.Sửa thông tin về sinh viên

4.2.1. Chọn sinh viên ở trong danh sách 4.2.2. Sửa thông tin cần thiết

4.2.3. Nhấn chuột vào nút sửa 4.3.Xóa thông tin về sinh viên

4.3.1. Chọn sinh viên ở trong danh sách 4.3.2. Nhấn chuột vào nút xóa

4.3.3. Hiện ra cửa sổ xác nhận

4.3.4. Nhấn chuột vào nút xác nhận để xóa 4.4.Tìm kiếm thông tin về sinh viên

4.4.1. Điền thông tin vào các mục 4.4.2. Nhấn chuột vào nút tìm kiếm 5. Quản lý điểm sinh viên

5.1. Điền thông tin vào mục trường hoặc lớp sẽ liệt kê ra danh sách tương ứng ở bên dưới

5.2. Chọn lớp trong danh sách bên dưới sẽ hiện ra danh sách sinh viên của lớp đó và điểm tương ứng

6. Quản lý môn học

6.1. Thêm môn học mới 6.2. Sửa môn học

6.3. Xóa môn học

7. Tra Cứu thông tin sinh viên

7.1. Tìm kiếm thông tin sinh viên 7.1.1. Điền thông tin cần tìm kiếm 7.1.2. Liệt kê danh sách sinh viên 7.1.3. Nhấn chuột vào nút tìm kiếm 7.2. In thông tin của danh sách đang hiển thị

7.3. Export ra file thông tin của danh sách đang hiển thị 8. Tra Cứu điểm sinh viên

8.1. Tìm kiếm điểm sinh viên

8.1.1. Điền thông tin cần tìm kiếm 8.1.2. Liệt kê danh sách sinh viên 8.1.3. Nhấn chuột vào nút tìm kiếm 8.2. In thông tin của danh sách đang hiển thị 9. Chọn menu Trợ giúp

9.1. Chọn menu hướng dẫn sử dụng 9.2. Xem hướng dẫn sử dụng

3.5.1. Giao diện màn hình chính

Hình 3.1. Giao diện màn hình chính

3.5.2. Xây dựng prototype mô phỏng chức năng quản lý sinh viên.

3.5.3 Xây dƣ̣ng chƣ́c năng quản lý lớp học

Hình 3.3. Giao diện Quản lý lớp học

3.5.4. Xây dựng prototype mô phỏng chức năng tìm kiếm điểm sinh viên.

3.5.5. Xây dƣ̣ng chƣ́c năng tra cƣ́u thông tin sinh viên

Hình 3.5. Giao dỉện Tra cứu thông tin sinh viên

3.5.6. Xây dƣ̣ng chƣ́c năng tính điểm tổng kết

3.6. Kiểm thƣ̉ và đánh giá kết quả 3.6.1. Kiểm thử

3.6.1.1. Kiểm thử giao diện

Stt Mô tả trƣờng hợp kiểm thử

Các bƣớc thực hiện Dữ liệu Kết quả mong đợi Kết quả thu đƣợc Đánh giá Ghi chú 1 Kiểm thử giao diện của form giao diện chắnh

- Đăng nhập vào chương trình

- Mở form giao diện chắnh

- Quan sát bằng mắt

- Font chữ đúng unicode, hiển thị được tiếng Việt. - Các menu đều nhau

- Textbox và các button đều nhau

- Font chữ đúng unicode, hiển thị được tiếng Việt. - Các menu đều