Kỹ thuật Kiểm thử thiết kế giao diện ngƣời dùng

Một phần của tài liệu (LUẬN văn THẠC sĩ) kỹ thuật kiểm thử các ứng dụng web luận văn ths công nghệ thông tin 60 48 05 (Trang 47 - 63)

3.1. Kỹ thuật Kiểm thử giao diện ngƣời dùng

3.1.1. Kỹ thuật Kiểm thử thiết kế giao diện ngƣời dùng

Kỹ thuật kiểm thử thiết kế giao diện ngƣời dùng đánh giá mức độ một thiết kế quan tâm đến ngƣời dùng, bởi cung cấp hƣớng dẫn rõ ràng, phân phát thông tin phản hồi, và duy trì tính nhất quán của ngôn ngữ và phƣơng pháp. Vấn đề về tính dễ sử dụng(ease of use) và nhìn cảm nhận (look and feel) đƣợc xem xét cẩn trọng trong kiểm thử thiết kế giao diện ngƣời dùng. Các vấn đề liên quan đến duyệt giao diện, khả năng phù hợp của các mặt thiết kế, tìm kiếm các vùng thiết kế lỗi, các nút lệnh, khả năng sử dụng, khả năng truy cập đƣợc khẳng định trong kiểm thử thiết kế giao diện.Hai câu hỏi chính để hiểu rõ của phần mềm cần đƣợc kiểm thử trƣớc khi bắt đầu kiểm thử giao diện ngƣời dùng.

Ai là người dùng chính của ứng dụng?

Phương pháp thiết kế nào đã được sử dụng?

Bƣớc 1(Xem xét yêu cầu của ngƣời dùng):Nhân viên kiểm thử đại diện cho ngƣời dùng cần phải biết rõ yêu cầu của ngƣời dùng. Nhân viên kiểm thử cần có những thông tin sau đây để cho việc kiểm thử đạt chất lƣợng:

Mô tả sơ lược về người dùng

Kinh nghiệm về máy tính

Kinh nghiệm về Web

Hiểu biết về lĩnh vực

Kinh nghiệm về ứng dụng cụ thể

Bảng 3.1 cung cấp cách phân loại bốn thuộc tính của kinh nghiệm ngƣời dùng. Thiết kế giao diện ngƣời dùng nên đƣợc đánh giá mức độ mà các đặc tính của phần mềm cần đƣợc kiểm thử phù hợp với kinh nghiệm và kỹ năng của ngƣời dùng.

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Bảng 3.1 Đánh giá kinh nghiệm ngƣời dùng[8]

MỨC ĐỘ KINH NGHIÊM

Không có=0 Thấp =1 Trung bình =2 Cao =3

THUỘC TÍNH KINH NGHIỆM TỐI THIỂU

Kinh nghiệm về máy tính Kinh nghiệm về Web Hiểu biết về lĩnh vực Kinh nghiệm về ứng dụng

Một khi đã có mô tả về ngƣời dùng của ứng dụng cần đƣợc kiểm thử thì sẽ có phƣơng pháp thiết kế phù hợp đối với ngƣời dùng. Chúng ta cũng có thể xác định các đặc tính của ứng dụng làm cho ứng dụng quá phức tạp hoặc quá đơn giản. Một thiết kế quá đơn giản cũng nhƣ một thiết kế quá phức tạp có thể dẫn đến làm mất đi khả năng khai thác sản phẩm. Bảng 3.2 nêu rõ ngƣời dùng đƣợc hƣớng đến của ứng dụng mẫu đƣợc đánh giá nhƣ thế nào.

Bảng 3.2 Đánh giá ngƣời dùng đƣợc hƣớng đến của ứng dụng mẫu[8]

MỨC ĐỘ KINH NGHIÊM

Không có=0 Thấp =1 Trung bình =2 Cao =3

THUỘC TÍNH KINH NGHIỆM TỐI THIỂU

Kinh nghiệm về máy tính 2-3

Kinh nghiệm về Web 2-3

Hiểu biết về lĩnh vực 1-3

Kinh nghiệm về ứng dụng 0

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Bƣớc 2 (Xem xét thiết kế) : Bƣớc này nghiên cứu thiết kế dùng cho ứng dụng. Các loại ứng dụng và ngƣời dùng khác nhau yêu cầu các thiết kế khác nhau.

Ví dụ, một chƣơng trình có ba lựa chọn rẽ nhánh, một ngƣời dùng không có

kinh nghiệm có thể phù hợp hơn bởi việc đƣa ba lựa chọn đó vào luồng gồm năm màn hình giao diện, qua một chức năng tự động. Ngƣợc lại, một ngƣời dùng chuyên nghiệp các dịch vụ thông tin có thể thích hơn nhận tất cả các lựa chọn chỉ trên một màn hình, nhƣ thế ngƣời dùng đó có thể truy cập đến các lựa chọn nhanh hơn.Các chủ đề cần xem xét khi đánh giá một thiết kế:

Phương pháp thiết kế:Các phép ẩn dụ trong thiết kế là cầu nối về nhận thức,

giúp cho ngƣời dùng hiểu đƣợc lô-gíc của luồng giao diện bởi liên hệ với các kinh nghiệm ngƣời dùng có thể đã có trong thực tế ở nơi khác. Một ví dụ của phép ẩn dụ trong thiết kế là các danh mục Web sử dụng thiết kế liên tƣởng đến danh mục các thẻ của thƣ viện. Một ví dụ khác về phép ẩn dụ là các ứng dụng lập lịch có giao diện nhƣ sự bố trí của một lịch đặt bàn và một sổ địa chỉ liên lạc.Ví dụ của hai phép ẩn dụ khác nhau trong thiết kế:

Hình 3.1 mô tả một ứng dụng sử dụng phép ẩn dụ dựa trên tài liệu. Nó gồm không gian làm việc mà dữ liệu đƣợc nhập vào và đƣợc thao tác bởi cách tƣơng tự nhƣ viết trên giấy

Hình 3.1 Phép ẩn dụ dựa trên tài liệu

Hình 3.2 minh họa ví dụ phép ẩn dụ dựa trên thiết bị. Máy tính ảo này bao gồm các điều khiển giao diện đƣợc thiết kế để nhận đầu vào của ngƣời dùng và thực hiện các hàm tính toán

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Hình 3.2 Phép ẩn dụ dựa trên thiết bị

Ví dụ: Hai phƣơng pháp khác nhau để chuyển tải cùng thông tin và các nút điều khiển Hình 3.3 chuyển tải các lựa chọn duyệt đến ngƣời dùng qua các nút radio ở trên cùng của màn hình giao diện

Hình 3.3 Lựa chọn qua nút radio

Hình 3.4 chuyển tải cùng các lựa chọn qua một trình đơn kéo xuống (pull-down menu) ActiveX hoặc Java applet

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Hình 3.4 Lựa chọn qua trình đơn kéo xuống

Các ví dụ trên đây chỉ đơn giản là chỉ ra các phƣơng pháp thiết kế khác nhau, không phƣơng pháp thiết kế nào đúng hơn. Vai trò của kiểm thử viên không phải là để đánh giá thiết kế nào tốt nhất mà nhân viên kiểm thử cần quan tâm đến các lỗi thiết kế, chỉ ra nhiều sự phụ thuộc của thiết kế càng sớm càng tốt, chỉ ra sự không nhất quán của sự cài đặt giao diện.

Ví dụ: Nếu phƣơng pháp thiết kế đã sử dụng trình đơn kéo xuống nhƣ vậy trình đơn kéo xuống nên đƣợc sử dụng nhất quán trong tất cả các giao diện chứ không sử dụng nút lựa chọn radio cho các giao diện khác

Tương tác của người dùng (đầu vào dữ liệu): Ngƣời dùng có thể thực hiện nhiều loại thao tác dữ liệu qua bàn phím và các sự kiện chuột. Các phƣơng pháp thao tác dữ liệu đƣợc tạo ra qua các điều khiển giao diện màn hình và các công nghệ khác, nhƣ cắt và dán, kéo và thả

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Các điều khiển giao diện người dùng:Các điều khiển giao diện ngƣời dùng là các đối tƣợng đồ họa cho phép ngƣời dùng tƣơng tác với ứng dụng. Chúng cho phép ngƣời dùng khởi tạo các hoạt động , yêu cầu hiển thị dữ liệu, và đặc tả các giá trị dữ liệu. Các điều khiển thƣờng đƣợc mã hóa, cài đặt bởi các phần tử trong trang HTML nhƣ nút radio, hộp kiểm tra, nút điều khiển, thanh cuộn, trình đơn kéo xuống, trƣờng văn bản, vân vân.

Hình 3.5 gồm một hộp văn bản (text box) chuẩn của HTML cho phép ngƣời dùng nhập vào chuỗi có giới hạn, và một hộp văn bản cuộn cho phép ngƣời dùng nhập vào nhiều dòng văn bản. Nhắp chuột vào nút Submit ở dƣới các hộp này sẽ gửi dữ liệu nhập vào đến một trình chủ Web. Nút Reset cho phép các hộp văn bản quay trở về trạng thái mặc định ban đầu.

Hình 3.5 cũng gồm các nút radio. Các nút radio là loại trừ lẫn nhau, nghĩa là chỉ một nút đƣợc chọn trong cùng một thời điểm. Các hộp kiểm tra (check boxes) thì ngƣợc lại cho phép nhiều lựa chọn trong một tập hợp đƣợc lựa chọn đồng thời.

Hình 3.5 Các điều khiển HTML bao gồm một hộp văn bản chuẩn HTML và một hộp văn bản cuộn

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Hình 3.6 bao gồm một trình đơn kéo xuống cho phép ngƣời dùng lựa chọn một trong nhiều mục đƣợc định nghĩa trƣớc. Nhắp chuột vào nút Submit sẽ gửi chọn lựa của ngƣời dùng đến trình chủ Web. Nút Reset đặt lại trình đơn về trạng thái mặc định ban đầu. Các nút nhấn (Go Home và Search) khởi tạo các hành động, các truy vấn tìm kiếm, gửi dữ liệu đến cơ sở dữ liệu, các siêu liên kết…

Hình 3.6 cũng bao gồm các ví dụ hình ảnh có thể đƣợc sử dụng nhƣ những siêu liên kết hay các nút nhấn.

Hình 3.6 Các điều khiển HTML bao gồm một trình đơn kéo xuống

Hình 3.7 và 3.8 minh họa cài đặt của các điều khiển chuẩn HTML trên một trang Web. Hình 3.7 mô tả các đối tƣợng liên kết đồ họa, các tiêu đề liên kết khi di chuyển chuột qua, hoặc thuộc tính ALT, và một liên kết văn bản nhƣ chúng đƣợc giới thiệu cho ngƣời dùng. Hình 3.8 mô tả đoạn mã HTML sinh ra các đối tƣợng này.

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Hình 3.7 Các liên kết đồ họa, liên kết văn bản khi di chuyển chuột qua và trƣờng văn bản

Hình 3.8 Đoạn mã HTML cho liên kết đồ họa, liên kết văn bản khi di chuyển chuột qua và liên kết văn bản

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Các điều khiển chuẩn HTML, nhƣ bảng và siêu liên kết có thể đƣợc kết hợp với hình ảnh để mô phỏng các thành phần giao diện đồ họa nhƣ trong ứng dụng Windows hay Macintosh, nút điều khiển, hộp thoại, v.v… Phần bên trái của hình 3.9 mô tả một khung HTML đƣợc kết hợp với hình ảnh và liên kết để mô phỏng thanh duyệt

Hình 3.9 Bảng, mẫu, và khung mô phỏng các điều khiển giao diện trong Windows

Các điều khiển giao diện người dùng động: Các thể đa phƣơng tiện HTML cho phép sử dụng các đối tƣợng giao diện động nhƣ Java applet, điều khiển ActiveX, và script (JavaScript và VBScript)

Script: Script là những câu lệnh có thể thực thi bởi trình duyệt khi trang HTML nạp hoặc khi chúng đƣợc gọi dựa trên một số sự kiện. Một script ở dạng ngôn ngữ lập trình hƣớng đối tƣợng, nghĩa là các lệnh của chƣơng trình xác định và gửi các câu lệnh đến các thành phần riêng biệt của trang Web. Các script không cần biên dịch và có thể chèn trực tiếp vào các trang HTML. Các script đƣợc nhúng vào trong mã HTML với thẻ <SCRIPT>.

Các script có thể đƣợc thực thi trên phía trình chủ hoặc trên phía trình khách. Các script phía trình khách thƣờng đƣợc sử dụng để đặt các giá trị cho các điều khiển giao diện ngƣời dùng, chỉnh nội dung trang Web, và xử lý lỗi.

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

Các phương pháp duyệt: Các phƣơng pháp duyệt mô tả ngƣời dùng một ứng dụng Web hay các trang Web nhƣ thế nào, từ một điều khiển giao diện đến một điều khiển khác ở trong cùng một trang (màn hình, cửa sổ, hay hộp thoại) và từ một trang đến một trang khác. Ngƣời dùng duyệt thƣờng đƣợc đánh giá bởi mức độ dễ dàng chúng cho phép ngƣời dùng truy cập đến các chức năng và dữ liệu thƣờng đƣợc sử dụng. Nhân viên kiểm thử cần phải đặt các câu hỏi sau:

 Phƣơng pháp duyệt của ứng dụng có trực quan không?

 Khả năng truy cập các chức năng và dữ liệu thƣờng đƣợc sử dụng có nhất quán trong toàn chƣơng trình?

 Ngƣời dùng có thể luôn luôn nói đƣợc họ ở đâu trong chƣơng trình và các lựa chọn duyệt nào là có thể dùng đối với họ?

 Thông tin đƣợc giới thiệu cho ngƣời dùng có tốt không?

 Nếu chƣơng trình sử dụng một không gian làm việc trung tâm, không gian này có nhất quán từ màn hình này đến màn hình khác?

 Các quy ƣớc duyệt có nhất quán trong toàn ứng dụng (thanh duyệt, trình đơn, siêu liên kết…)?

 Đánh giá việc sử dụng nhất quán các di chuyển chuột, nhắp chuột và kéo các đối tƣợng trong ứng dụng. Kết quả của các hành động này có khác nhau từ một màn hình đến màn hình tiếp theo?

 Các phím thay thế chuột đƣợc sử dụng nhất quán trong toàn bộ ứng dụng?

 Tất cả các chức năng có thể truy cập qua các hành động chuột và bàn phím?

 Nhấn phím Tab liên tục và xem xét lộ trình đƣợc tạo ra. Lộ trình có lô- gíc và nhất quán không?

 Nhấn phím Shift-Tab liên tục và xem xét lộ trình đƣợc tạo ra. Lộ trình có lô-gíc và nhất quán không?

 Xem các phím tắt đƣợc hỗ trợ. Chúng có hoạt động không? Có sự trùng lặp trong chúng?

 Các chức năng duyệt đã đƣợc kiểm thử cho khả năng truy cập?

 Nếu ngƣời dùng nhắp chuột lên nút trả tiền bằng thẻ tín dụng trên một trang thƣơng mại điện tử trong khi ngƣời dùng đó đợi câu trả lời từ trình chủ, giao tác sẽ đƣợc gửi đi nhiều lần?

Các nút lệnh: Trong toàn bộ ứng dụng tên của các nút lệnh trên màn hình không đƣợc sử dụng một cách nhất quán. Điều này một phần là do ý nghĩa của các tên nút lệnh thƣờng biến đổi từ chƣơng trình này sang chƣơng trình khác. Nếu các đặt tên của các nút lệnh thay đổi bên trong một chƣơng trình thì sẽ dẫn đến sự nhầm lẫn của ngƣời dùng. Ví dụ, nếu một nút Submit đƣợc sử dụng để lƣu trữ dữ liệu trong một

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

vùng của chƣơng trình, thì tên nút Submit nên đƣợc sử dụng cho hoạt động lƣu dữ liệu trong toàn bộ ứng dụng.

Nên xem xét các nút lênh đƣợc chọn là các nút lệnh mặc định. Các nút điều khiển mặc định nên là các nút ít chứa các lựa chọn rủi ro nhất (các nút lệnh ít có khả năng xóa dữ liệu của ngƣời dùng tạo ra).

Bảng 3.3. Các nút lệnh khẳng định và hủy bỏ[8]

QUYẾT ĐỊNH QUYẾT ĐỊNH KÉO

THEO

Các nút lệnh khẳng định

Done Đóng hộp thoại, cửa sổ,

hay trang hiện hành

Close Đóng hộp thoại, cửa sổ hay

trng hiện hành

OK Tôi chấp nhận các cài đặt Đóng hộp thoại, cửa sổ, hay trang hiện hành

Yes Tôi chấp nhận điều kiện

đƣợc nêu

Thực hiện và đóng hộp thoại cửa sổ hay trang hiện hành

Proceed Tôi chấp nhận điều kiện đƣợc nêu

Thực hiện và đóng hộp thoại cửa sổ hay trang hiện hành

Submit Lƣu dữ liệu trong mẫu, trang hay hộp thoại

Các nút lệnh hủy nỏ

Cancel Tôi không chấp nhận các cài đặt hay điều kiện đƣợc nêu

Quay trở lại trạng thái trƣớc đó và đóng hộp thoại, cửa sổ, hay trang hiện hành

No Tôi không chấp nhận các

cài đặt hay điều kiện đƣợc nêu

Thực hiện và đóng hộp thoại cửa sổ hay trang hiện hành

Reset Đặt lại các cài đặt về trạng thái trƣớc đó

Xóa tất cả các thay đổi chƣa đƣợc lƣu trong hộp thoại, cửa sổ, hay trang hiện hành

Các thông điệp lỗi và phản hồi: Sự nhất quán trong các phản hồi có thể nghe và có thể nhìn là cần thiết để duy trì giao tiếp rõ ràng giữa ngƣời dùng và ứng dụng. Các thông điệp, tiếng bíp và các hiệu ứng âm thanh khác cần phải duy trù nhất quán và

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội

Học viên: Nguyễn Thị Ngọc Hƣơng

than thiện với ngƣời dùng. Đặc biệt, thông báo lỗi nên đƣợc đánh giá sự sang sủa dễ hiểu và sự nhất quán.

Hãy xem xét việc bố trí không phổ biến hoặc lộn xộn thành phần giao diện trong một phản hồi. Bạn có thể xác định các hƣớng dẫn thƣờng đƣợc chấp nhận trong mỗi hệ điều hành về việc bố trí các thành phần gió diện, nhƣ cài đặt nút OK và Cancel ở dƣới góc phải của hộp hội thoại. Các thiết kế khác có thể làm cho tƣơng tác của

Một phần của tài liệu (LUẬN văn THẠC sĩ) kỹ thuật kiểm thử các ứng dụng web luận văn ths công nghệ thông tin 60 48 05 (Trang 47 - 63)

Tải bản đầy đủ (PDF)

(124 trang)