L o g o KIỂM TRA GIAO DIỆN ỨNG DỤNG WEB Giảng viên: ThS Nguyễn Công Hoan Các thành viên nhóm: 10520394 – Trịnh Ngọc Huy 10520389 – Võ Ngọc Lâm Sơn 10520362 – Nguyễn Vĩnh Kim Long L o g o NỘI DUNG Giới Thiệu Kiểm Tra Thiết Kế Giao Diện Người Dùng Kiểm Tra Thực Thi Giao Diện Người Dùng Kiểm Tra Tính Khả Dụng Và Khả Năng Truy Nhập Kiểm Tra Hiển Thị Giao Diện Người Dùng Tổng Kết L o g o GIỚI THIỆU Để kiểm tra việc thực thiết kế giao diện người dùng (GUI) ứng dụng Web, cần phải hiểu quan điểm nhà thiết kế (mục tiêu thiết kế) quan điểm nhà phát triển (thực công nghệ giao diện người dùng) Với thơng tin đó, phát triển trường hợp kiểm tra hiệu nhằm vào đối tượng có nhiều khả có sai sót thiết kế thực ứng dụng Web L o g o KIỂM TRA THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG  Kiểm tra thiết kế giao diện người dùng đánh giá mức độ “chăm sóc” người dùng  Nói cách cụ thể kiểm tra khả cung cấp hướng dẫn rõ ràng, cung cấp thơng tin phản hồi, trì tính qn ngơn ngữ cách tiếp cận Tạo ấn tượng chủ quan cho người dùng việc dễ thao tác, sử dụng, dễ nhìn, dễ cảm nhận  Ngoài ra, vấn đề liên quan tới định hướng, khả sử dụng, lệnh, khả tiếp cận đánh giá kiểm tra thiết kế giao diện L o g o KIỂM TRA THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Hai vấn đề cần giải là:  Ứng dụng hướng đến loại người dùng nào?  Phương pháp tiếp cận thiết kế sử dụng? L o g o KIỂM TRA THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Ứng dụng hướng đến loại người dùng nào?  Người sử dụng phía máy chủ  Người sử dụng phía máy khách L o g o KIỂM TRA THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Bốn tiêu chí để lập hồ sơ đối tượng người dùng:  Kinh nghiệm máy tính  Kinh nghiệm Web  Kiến thức lĩnh vực  Kinh nghiệm ứng dụng cụ thể L o g o KIỂM TRA THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Các chủ đề để xem xét thẩm định thiết kế    Phương pháp tiếp cận thiết kế Tương tác với người dùng (dữ liệu đầu vào) Trình bày liệu (dữ liệu đầu ra) L o g o KIỂM TRA THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Phương pháp tiếp cận thiết kế Các thiết kế mô cầu nối nhận thức giúp người sử dụng hiểu tính logic giao diện người dùng cách liên kết chúng với kinh nghiệm mà người dùng có giới thực nơi khác L o g o KIỂM TRA THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Phương pháp tiếp cận thiết kế Mô mô dựa tài liệu Nó bao gồm khơng gian làm việc, nơi liệu nhập thao tác theo cách tương tự mảnh giấy L o g o KIỂM TRA KHẢ NĂNG TRUY NHẬP (ACCESSIBILITY TESTING)  Bài trình bày trang web nên xác định hoàn toàn với phong cách trang, nội dung nằm hoàn toàn HTML Sử dụng CSS làm cho trang nhỏ hơn, dễ thay đổi hơn, dễ tiếp cận hơn, dễ tìm kiếm  CSS không hỗ trợ tất trình duyệt nên sử dụng để trình bày Một số người dùng thiết lập trình duyệt bỏ qua style sheet theo ý L o g o KIỂM TRA KHẢ NĂNG TRUY NHẬP (ACCESSIBILITY TESTING) Các hình thức trang hỗ trợ hữu ích cho người dùng L o g o KIỂM TRA KHẢ NĂNG TRUY NHẬP (ACCESSIBILITY TESTING)  Văn nhãn xếp  Văn dài nên chia nhỏ thành đoạn thông tin nhỏ để người dùng dễ dàng tìm họ cần  Mỗi trang có ý nghĩa, tiêu đề trang với từ khóa phong phú  Trang web sử dụng mà không cần chuột  Trang web tự động lựa chọn văn mặc định người dùng có yêu cầu đánh máy  Trang web cung cấp gợi ý trực quan cho người dùng họ lướt chuột qua L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG Giới thiệu Nội dung phần chia làm phần:  Kiểm tra hiển thị giao diện người dùng  Kiểm tra hiển thị điều khiển giao diện  Kiểm tra hiển thị thực giao diện L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG Kiểm tra hiển thị giao diện người dùng L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG  Thông tin trình bày cho người sử dụng nào?  Có khơng gian làm việc trung tâm hay khơng? Nếu có, có trì phù hợp từ hình qua hình khác?  Dữ liệu trình bày khung nào? Nếu có, có lựa chọn cho trình duyệt khơng sử dụng khung hình hay khơng?  Thao tác liệu nào?  Phương pháp thao tác liệu có trình bày trực quan phù hợp hay không?  Phương pháp thao tác liệu có phù hợp với tiêu chuẩn ứng dụng Web?  Chức kéo-thả có hỗ trợ hay khơng? Nếu có, chức kéo-thả có phù hợp hay khơng? Sự hỗ trợ có tương thích nhà cung cấp trình duyệt cụ thể hay không? L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG Kiểm tra hiển thị điều khiển giao diện L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG  Các điều khiển giao diện sử dụng trang web: hộp thoại, nút radio, trình đơn thả xuống?  Cách bố trí thực điều khiển có trực quan phù hợp suốt ứng dụng hay không?  Các quy ước đặt tên cho điều khiển hộp thoại có trực quan phù hợp hay khơng?  Các điều khiển thường sử dụng có thiết lập giá trị mặc định hay không?  Các nút điều khiển có thay đổi vị trí qua hình hay khơng? Chúng có đặt chỗ không? L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG  Các thao tác tương tác liệu có bất hợp lí qua hình hay không? (kéo-thả, mục văn bản, truy vấn, vv )?  Các thiết lập thuộc tính thẻ HTML dựa tảng giao diện (màu sắc, kích cỡ, phong cách, liên kết, ) có hỗ trợ mục đích thiết kế hay khơng?  Các thuộc tính có áp dụng phù hợp cho tất phần tử HTML hay không?  Các plug-in bên thứ ba, chẳng hạn QuickTime, Shockwave, RealPlayer, Adobe Acrobat có thêm vào hay không? Những phiên thành phần yêu cầu sản phẩm hỗ trợ? L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG Kiểm tra hiển thị thực giao diện L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG  Tất phím tắt bàn phím có chức thành phần ActiveX Java applet hay không?  Các chức kết hợp bàn phím/chuột có hoạt động cho thành phần ActiveX Java applet hay không?  Tất mouse-rollover có hoạt động cách hay khơng? Có mouse-rollover thiếu hay không?  Liệu văn có lên xác mouse-rollover hay khơng? L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG  Các nút lệnh thích hợp có đánh dấu mặc định hay không? L o g o KIỂM TRA HIỂN THỊ GIAO DIỆN NGƯỜI DÙNG  Các nút lệnh thực có thực hành động mục đích chúng hay khơng?  Các hướng dẫn chỗ hình có xác hay khơng?  Các đồ họa văn tải có u cầu hay khơng?  Các liên kết văn tĩnh có hỗ trợ thiết kế dự tính hay khơng? L o g o TỔNG KẾT  Qua chương này, hiểu rõ mức độ quan trọng giao diện người dùng website Một trang web thiết kế tồi có quan tâm sử dụng người dùng gây khó chịu ức chế cho người dùng  Lĩnh vực web ngày phát triển, trình duyệt hỗ trợ ngày mạnh mẽ, việc thiết kế trường hợp kiểm tra phải cập nhật theo công nghệ cho phù hợp  Đánh giá thiết kế giao diện người dùng phải dựa nhiều chi tiết với kiến thức sâu rộng web Người kiểm tra phải đặt vào vai trị người dùng để đánh giá xác tính khả dụng, khả truy nhập, khả thực thi hiển thị website L o g o Thank You ! ... phần cần kiểm tra là:  Kiểm tra tính điều hướng  Kiểm tra tính khả dụng  Kiểm tra nội dung  Kiểm tra thông tin hỗ trợ người dùng L o g o KIỂM TRA TÍNH KHẢ DỤNG (USABILITY TESTING) Kiểm tra tính... cầu L o g o KIỂM TRA THỰC THI GIAO DIỆN NGƯỜI DÙNG Các vấn đề cụ thể giao diện Web Ứng dụng web sử dụng mơ hình SPI (Single-Page Interface) Vì sử dụng mơ hình SPI nên ứng dụng web khơng có lợi... o NỘI DUNG Giới Thiệu Kiểm Tra Thiết Kế Giao Diện Người Dùng Kiểm Tra Thực Thi Giao Diện Người Dùng Kiểm Tra Tính Khả Dụng Và Khả Năng Truy Nhập Kiểm Tra Hiển Thị Giao Diện Người Dùng Tổng Kết