Giao diện người dùng là một phần của hệ thống mà người dùng tương tác. Nó bao gồm màn hình hiển thị cung cấp điều hướng thông qua hệ thống, màn hình và biểu mẫu thu thập dữ liệu và các báo cáo mà hệ thống tạo ra (cho dù trên giấy, trên màn hình hay qua một số phương tiện khác). Chương này giới thiệu các nguyên tắc và quy trình cơ bản của giao diện thiết kế và thảo luận về cách thiết kế cấu trúc giao diện và các tiêu chuẩn, điều hướng thiết kế, thiết kế đầu vào và thiết kế đầu ra. Chương này cũng mô tả ảnh hưởng của các yêu cầu phi chức năng đối với việc thiết kế lớp tương tác giữa người và máy tính.
BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH TẾ TP.HCM BÁO CÁO LÝ THUYẾT THIẾT KẾ LỚP TƯƠNG TÁC GIỮA CON NGƯỜI VÀ MÁY TÍNH MỤC LỤC I Giới thiệu: 1 Khái niệm: Thành phần giao diện người dùng: Có phần: Nội dung chương: .1 II Nguyên tắc thiết kế giao diện người dùng: Bố trí 2 Nhận thức nội dung: .5 Tính thẩm mỹ: Kinh nghiệm người dùng: Tính quán: Giảm thiểu nỗ lực người dùng: III Quy trình thiết kế giao diện người dùng: 10 Phát triển kịch sử dụng: .11 Thiết kế cấu trúc giao diện 14 Thiết kế tiêu chuẩn giao diện 16 Tạo mẫu thiết kế giao diện: .18 Đánh giá giao diện 21 IV Thiết kế điều hướng: 23 Các loại điều khiển điều hướng 24 Thông báo: 28 Thiết kế điều hướng 30 V Thiết kế đầu vào: 32 Nguyên tắc 32 Các loại đầu vào: 35 Xác thực đầu vào 37 VI Thiết kế đầu ra: 38 Các loại đầu ra: 40 Phương tiện truyền thông: 40 VII YÊU CẦU PHI CHỨC NĂNG VÀ THIẾT KẾ LỚP TƯƠNG TÁC GIỮA NGƯỜI VÀ MÁY TÍNH 41 VIII ÁP DỤNG CÁC KHÁI NIỆM TRONG LỰA CHỌN CD 42 Phát triển kịch sử dụng 43 Thiết kế cấu trúc giao diện 44 Sửa đổi WND 46 Thiết kế tiêu chuẩn giao diện 48 Thiết kế mẫu giao diện .48 Tạo mẫu thiết kế giao diện 50 Đánh giá giao diện 51 Tài liệu Thiết kế Điều hướng .52 TỔNG KẾT 53 Nguyên tắc thiết kế giao diện người dùng 53 Quy trình thiết kế giao diện người dùng 53 Thiết kế điều hướng 54 Thiết kế đầu vào 54 Thiết kế đầu 55 Yêu cầu phi chức Lớp tương tác người máy tính 55 CHƯƠNG 11: THIẾT KẾ LỚP TƯƠNG TÁC GIỮA CON NGƯỜI VÀ MÁY TÍNH Giao diện người dùng phần hệ thống mà người dùng tương tác Nó bao gồm hình hiển thị cung cấp điều hướng thơng qua hệ thống, hình biểu mẫu thu thập liệu báo cáo mà hệ thống tạo (cho dù giấy, hình hay qua số phương tiện khác) Chương giới thiệu nguyên tắc quy trình giao diện thiết kế thảo luận cách thiết kế cấu trúc giao diện tiêu chuẩn, điều hướng thiết kế, thiết kế đầu vào thiết kế đầu Chương mô tả ảnh hưởng yêu cầu phi chức việc thiết kế lớp tương tác người máy tính I Giới thiệu: Khái niệm: - Thiết kế giao diện trình xác định cách hệ thống tương tác với thực thể bên (ví dụ: khách hàng, nhà cung cấp, hệ thống khác) - Lớp giao diện người máy tính xác định cách thức mà người dùng tương tác với hệ thống chất đầu vào đầu mà hệ thống chấp nhận Thành phần giao diện người dùng: Có phần: - Thứ nhất: chế điều hướng (cách mà người dùng đưa hướng dẫn cho hệ thống u cầu hệ thống phải làm gì) Ví dụ: nút, menu - Thứ hai: chế đầu vào (input – cách hệ thống nắm bắt thơng tin) Ví dụ: biểu mẫu để thêm khách hàng mới, … - Thứ ba: chế đầu (output – cách hệ thống cung cấp thông tin cho người dùng cho hệ thống khác) Ví dụ: báo cáo, trang web Nội dung chương: - Giới thiệu số nguyên tắc thiết kế giao diện người dùng - Cung cấp nhìn tổng quan quy trình thiết kế lớp tương tác người máy tính - Cung cấp nhìn tổng quan thành phần (điều hướng, đầu vào đầu ra) sử dụng thiết kế giao diện II Nguyên tắc thiết kế giao diện người dùng: Vấn đề lớn mà nhà thiết kế phải đối mặt sử dụng khơng gian cách hiệu Nói cách đơn giản, thường có q nhiều thơng tin cần trình bày hình báo cáo biểu mẫu Các nhà phân tích phải cân nhu cầu đơn giản hình thức, tránh việc trình bày thơng tin q nhiều trang Ngun tắc Mơ tả Layout (Bố trí) Giao diện loạt khu vực hình sử dụng quán cho mục đích khác Ví dụ: vùng cho lệnh điều hướng, khu vực để thông tin nhập xuất, khu vực cho thông tin trạng thái Content Awareness (Nhận thức nội dung) Người dùng phải biết họ đâu hệ thống thơng tin hiển thị Aesthetics (Tính thẩm mỹ) Các giao diện phải hoạt động hiệu hấp dẫn người dùng thông qua việc sử dụng khoảng trắng, màu sắc phơng chữ Thường có đánh đổi việc bao gồm đủ khoảng trắng để làm cho giao diện trông đẹp mắt mà không làm nhiều không gian mà thông tin quan trọng khơng vừa hình User Experience (Kinh nghiệm người dùng) Người dùng làm quen người dùng phần mềm khơng thường xun thích dễ học hơn, thường xuyên người dùng thích dễ sử dụng Consistency (Tính quán) Cho phép người dùng dự đốn điều xảy trước chúng thực chức Nó yếu tố quan trọng dễ học, dễ sử dụng tính thẩm mỹ Minimal User Effort (Nỗ lực tối thiểu người dùng) Giao diện phải đơn giản để sử dụng Hầu hết nhà thiết kế có kế hoạch việc khơng có ba lần nhấp chuột từ menu bắt đầu người dùng thực cơng việc Bố trí - Yếu tố thiết kế bố cục hình, biểu mẫu báo cáo - Màn hình chia thành ba hộp Hộp vùng điều hướng, qua người dùng đưa lệnh để điều hướng hệ thống Hộp khu vực trạng thái, hiển thị thông tin người dùng làm Hộp - lớn - sử dụng để hiển thị báo cáo trình bày biểu mẫu cho nhập liệu - Trong nhiều trường hợp (đặc biệt Web), nhiều vùng bố cục sử dụng Hình 11-2 hiển thị hình có năm khu vực điều hướng, khu vực xếp để cung cấp chức điều hướng phần khác hệ thống Khu vực cung cấp Điều khiển lệnh điều hướng chuẩn Internet Explorer thay đổi nội dung toàn hệ thống Khu vực điều hướng cạnh bên trái điều hướng phần thay đổi tất nội dung bên phải Hai khu vực điều hướng khác trang cung cấp cách khác để điều hướng phần - Việc sử dụng nhiều khu vực bố trí để điều hướng áp dụng cho đầu vào đầu Các vùng liệu báo cáo biểu mẫu thường chia thành vùng con, vùng sử dụng cho loại thơng tin khác Ví dụ: mẫu đơn đặt hàng (hoặc báo cáo đơn hàng), phần sử dụng cho thơng tin khách hàng (ví dụ: tên, địa chỉ), phần cho thơng tin đơn đặt hàng nói chung (ví dụ: ngày, thơng tin tốn) phần, cho chi tiết đơn đặt hàng (ví dụ: đơn vị số mặt hàng với giá mặt hàng) Mỗi khu vực tự kiểm sốt để thơng tin khu vực không chạy sang khu vực khác - Các khu vực thông tin khu vực phải có luồng trực quan tự nhiên để giảm thiểu di chuyển người dùng từ khu vực sang khu vực khác Trong trường hợp nào, trước khu vực đưa vào biểu mẫu báo cáo, nhà phân tích phải có hiểu biết rõ ràng cách xếp có ý nghĩa cách biểu mẫu báo cáo sử dụng Dòng chảy phần phải quán, cho dù nằm ngang hay dọc (xem Hình 11-3) Tốt khu vực trì qn kích thước, hình dạng vị trí cho biểu mẫu sử dụng để nhập thông tin (dù giấy hay hình) báo cáo sử dụng để trình bày Nhận thức nội dung: a Khái niệm: Nhận thức nội dung đề cập đến khả giao diện làm cho người dùng nhận biết thơng tin mà giao diện chứa đựng với nỗ lực từ phía người dùng b Áp dụng vào phương diện nào? - Nhận thức nội dung áp dụng cho giao diện nói chung Tất giao diện phải có tiêu đề Menu phải hiển thị vị trí chúng Ví dụ, Hình 11-2, dịng bên khu vực điều hướng phần cho thấy người dùng duyệt từ trang chủ Wiley đến phần khoa học máy tính, phần mạng, phần mạng chung, sau đến sách cụ thể - Nhận thức nội dung áp dụng cho khu vực biểu mẫu báo cáo Tất khu vực nên phải xác định rõ ràng Sau đó, người dùng nhanh chóng xác định vị trí phần biểu mẫu báo cáo có khả chứa thơng tin họ cần Đơi khu vực đánh dấu cách sử dụng đường kẻ, màu sắc tiêu đề (ví dụ: khu vực mặt cắt Hình 11-2), trong trường hợp khác, khu vực ngụ ý (ví dụ: điều khiển trang cuối Hình 11-2) - Nhận thức nội dung áp dụng cho trường (fields) khu vực Trường phần tử riêng lẻ liệu, đầu vào đầu Các nhãn hiệu (labels) trường dùng để nhận biết trường giao diện nên ngắn gọn đặc trưng, riêng biệt Không nên chắn định dạng thông tin trường, cho dù để nhập hay hiển thị Ví dụ: ngày 10/5/07 khác tùy thuộc vào việc bạn Hoa Kỳ (ngày tháng 10 năm 2007) hay Canada (ngày 10 tháng năm 2007) - Nhận thức nội dung áp dụng cho hình thức hay báo cáo chứa thơng tin Nói chung, tất hình thức báo cáo nên có ngày chuẩn bị ( ngày in liệu hồn thành ) cho thơng tin ngày tháng phải rõ ràng Hình 11-4 cho thấy biểu mẫu từ Đại học Georgia Biểu mẫu minh họa hợp lý nhóm lĩnh vực vào khu vực với hộp rõ ràng (trên bên trái), khu vực ngụ ý khơng có hộp (phía bên trái) Các địa lĩnh vực vùng địa tuân theo trật tự rõ ràng, tự nhiên Các nhãn hiệu ngắn (xem phía bên trái) dài cần thêm thông tin để tránh hiểu sai (xem phía bên trái) Tính thẩm mỹ: a Khái niệm: Tính thẩm mỹ đề cập đến việc thiết kế giao diện đẹp mắt b Làm để thể tính thẩm mỹ? - Tất hình thức dạng báo cáo cần có khoảng trống tối thiểu để trống => tránh gây khó chịu cho người dùng nhiều thơng tin bị dồn ép trang hình - Phản ứng bạn bạn nhìn vào Hình 11-4 gì? Đây hình thức khó chịu Đại học Georgia, theo nhân viên Mật độ q cao; có q nhiều thơng tin bị dồn vào không gian nhỏ với khoảng trắng Mặc dù hiệu để tiết kiệm giấy cách sử dụng trang khơng phải hai trang, khơng hiệu nhiều người dùng - Người sử dụng không thường xuyên sử dụng giao diện, cho dù hình hay giấy, thích giao diện có mật độ thấp, thường giao diện có mật độ 50 phần trăm (nghĩa hơn 50 phần trăm giao diện bị chiếm thơng tin) Cịn người dùng có kinh nghiệm thích mật độ cao hơn, đơi đạt tới 90% họ biết vị trí thơng tin định vị mật độ cao làm giảm lượng chuyển động vật lí thơng qua giao diện Ví dụ: Hình 11-14 thường dùng người có kinh nghiệm nhân viên phịng nhân sự, người sử dụng hàng ngày c Thiết kế văn bản: - Theo nguyên tắc chung, tất văn phải giống phơng chữ có kích thước Phơng chữ phải có kích thước khơng 8, 10 thường ưa thích, đặc biệt giao diện sử dụng người lớn tuổi Thay đổi phơng chữ kích thước sử dụng để thay đổi loại thông tin trình bày (ví dụ: đề mục, báo trạng thái) Nên tránh in nghiêng gạch chân chúng làm cho văn khó đọc - Phơng chữ serif (“chữ có chân” chẳng hạn Times Roman) báo cáo in dễ đọc nhất, đặc biệt báo cáo nhỏ Phông chữ Sans serif (chẳng hạn Helvetica Arial, giống phông chữ sử dụng cho tiêu đề chương sách này) dễ đọc hình máy tính thường sử dụng cho tiêu đề báo cáo in Không sử dụng tất chữ viết hoa, ngoại trừ tiêu đề - Màu sắc hoa văn nên sử dụng cẩn thận tiết kiệm dùng cho mục đích Mục tiêu việc thiết kế văn tính dễ đọc, màu sắc hoa văn nên sử dụng để củng cố thông điệp không lấn át Màu sắc sử dụng tốt để tách phân loại mục, chẳng hạn hiển thị khác biệt tiêu đề văn thông thường để làm bật thông tin quan trọng Vì thế, nên sử dụng màu có độ tương phản cao (ví dụ: đen trắng) Nói chung, văn màu đen trắng dễ đọc nhất, với màu xanh lam màu đỏ dễ đọc Màu sắc hiển thị ảnh hưởng đến cảm xúc, với màu đỏ kích động cảm xúc mãnh liệt (ví dụ: tức giận) màu xanh lam kích động giảm cảm xúc (ví dụ: buồn ngủ) Kinh nghiệm người dùng: Về chia thành cấp: người có kinh nghiệm người khơng có kinh nghiệm VII U CẦU PHI CHỨC NĂNG VÀ THIẾT KẾ LỚP TƯƠNG TÁC GIỮA NGƯỜI VÀ MÁY TÍNH Lớp tương tác người máy tính bị ảnh hưởng nhiều yêu cầu phi chức Trước chương này, chúng tơi đề cập đến vấn đề bố cục giao diện người dùng, nhận thức nội dung, tính thẩm mỹ, trải nghiệm người dùng tính quán Khơng có số liên quan đến yêu cầu chức hệ thống Tuy nhiên, chúng bị bỏ qua, hệ thống khơng sử dụng Giống lớp quản lý liệu, có bốn loại u cầu phi chức quan trọng việc thiết kế lớp tương tác với máy tính người: hoạt động, hiệu suất, bảo mật u cầu văn hóa / trị Các yêu cầu vận hành, chẳng hạn lựa chọn tảng phần cứng phần mềm, ảnh hưởng đến thiết kế lớp tương tác người máy tính Ví dụ: đơn giản số nút chuột (một, hai, ba nhiều hơn) thay đổi tương tác mà người dùng trải nghiệm Các yêu cầu hoạt động phi chức khác ảnh hưởng đến thiết kế lớp tương tác người máy tính bao gồm tích hợp hệ thống tính di động Trong trường hợp này, giải pháp dựa Web yêu cầu, điều ảnh hưởng đến thiết kế; khơng phải tất tính giao diện người dùng triển khai cách hiệu / hiệu Web Điều gây thiết kế giao diện người dùng bổ sung Các yêu cầu hiệu suất, theo thời gian, trở thành vấn đề lớp Tuy nhiên, yêu cầu tốc độ điều tối cao, có tầm quan trọng Hầu hết người dùng không quan tâm đến việc nhấn trở lại nhấp chuột phải nghỉ giải lao chờ hệ thống phản hồi Như vậy, vấn đề hiệu phải giải Tùy thuộc vào công cụ giao diện người dùng sử dụng, thành phần giao diện người dùng khác yêu cầu Hơn nữa, tương tác lớp tương tác người máy tính với lớp khác phải xem xét Ví dụ: phản hồi hệ thống chậm, việc kết hợp cấu trúc liệu hiệu với lớp miền cố, bao gồm mục bảng với lớp quản lý liệu / chép đối tượng lớp kiến trúc vật lý yêu cầu Các yêu cầu bảo mật ảnh hưởng đến lớp tương tác người máy tính chủ yếu giải kiểm sốt truy cập triển khai để bảo vệ đối tượng khỏi bị truy cập trái phép Hầu hết kiểm sốt thực thi thơng qua DBMS 41 lớp quản lý liệu hệ điều hành lớp kiến trúc vật lý Tuy nhiên, thiết kế lớp tương tác người máy tính phải bao gồm điều khiển đăng nhập thích hợp khả mã hóa Các yêu cầu văn hóa trị ảnh hưởng đến việc thiết kế lớp tương tác người máy tính bao gồm yêu cầu đa ngôn ngữ chuẩn mực chưa xác định Các yêu cầu đa ngôn ngữ bao gồm mối quan tâm đơn giản số lượng ký tự cần phân bổ cho trường khác Ví dụ: tiếng Tây Ban Nha nhiều từ 20 đến 30 phần trăm ký tự để hiển thị thông báo tương đương so sánh với tiếng Anh Hơn nữa, có nhiều bảng chữ khác Ngoài ra, việc dịch tin nhắn từ ngôn ngữ sang ngôn ngữ khác khơng phải q trình tự động hóa Các yêu cầu định mức không ổn định bao gồm thứ hiển thị ngày định dạng thích hợp (MM / DD / YYYY so với DD / MM / YYYY) Một mối quan tâm khác bố cục giao diện người dùng Vì tiếng Anh đọc từ trái sang phải từ xuống dưới, chúng tơi có xu hướng thiết kế bố cục giao diện người dùng theo cách tương tự Nhưng tất ngôn ngữ đọc theo thứ tự Cuối cùng, việc sử dụng màu sắc có vấn đề Các văn hóa khác gắn ý nghĩa khác với màu sắc khác Ví dụ: liên quan màu đen trắng phụ thuộc vào văn hóa xem giao diện người dùng Trong nhiều văn hóa phương Tây, màu đen ngụ ý xấu màu trắng ngụ ý tốt Tuy nhiên, số văn hóa phương đông, điều ngược lại Để hệ thống thực hữu ích mơi trường tồn cầu, giao diện người dùng phải tùy chỉnh để đáp ứng yêu cầu văn hóa địa phương VIII ÁP DỤNG CÁC KHÁI NIỆM TRONG LỰA CHỌN CD Trong trường hợp lựa chọn CD Hệ thống bán hàng qua Internet, có ba trường hợp use cases cấp cao khác (xem Hình 5-19): Duy trì Thơng tin CD, Đặt hàng Duy trì Thơng tin Tiếp thị CD Ngồi cịn có sáu use cases bổ sung: Duy trì đơn hàng, Thanh tốn, Tạo khách hàng mới, Giữ chỗ cửa hàng, Đặt hàng đặc biệt Điền đơn đặt hàng qua thư, liên kết với use case Đặt hàng Để kiểm soát mức độ phức tạp ví dụ tại, phần chúng tơi tập trung vào 42 use cases Đặt hàng, Duy trì Đơn hàng Kiểm tra Phát triển kịch sử dụng Bước trình thiết kế giao diện phát triển kịch sử dụng cho Hệ thống bán hàng qua Internet Vì Alec giao việc thiết kế lớp tương tác người máy tính cho mình, anh bắt đầu cách kiểm tra use cases thiết yếu (xem Hình 5-18) suy nghĩ kiểu người dùng cách họ tương tác với hệ thống Để bắt đầu, Alec xác định hai tình sử dụng: người mua sắm duyệt web người mua sắm vội vàng (xem Hình 11-6) 43 Alec nghĩ đến số kịch sử dụng khác cho trang Web nói chung, anh bỏ qua chúng không liên quan đến phần bán hàng Internet Tương tự vậy, anh nghĩ số tình sử dụng khơng dẫn đến doanh số bán hàng (ví dụ: người hâm mộ tìm kiếm thơng tin nghệ sĩ album yêu thích họ) bỏ qua chúng Thiết kế cấu trúc giao diện Tiếp theo, Alec tạo WND cho hệ thống Web Ông bắt đầu với use cases thiết yếu Đặt hàng, Duy trì Đơn hàng Kiểm tra để đảm bảo tất chức xác định cho hệ thống đưa vào WND Hình 11-19 cho thấy WND cho phần Web Hệ thống bán hàng qua Internet Hệ thống bắt đầu với trang chủ chứa menu cho hệ thống bán hàng Dựa trường hợp sử dụng thiết yếu, Alec xác định thao tác mà anh cảm thấy hợp lý để hỗ trợ menu chính: tìm kiếm danh mục CD, tìm kiếm theo danh mục nhạc, 44 xem lại nội dung giỏ hàng thực đặt hàng Mỗi số mơ hình hóa siêu liên kết trang chủ Sau đó, Alec định lập mơ hình tùy chọn tìm kiếm đầy đủ dạng menu tìm kiếm bật lên cho phép khách hàng chọn tìm kiếm danh mục CD dựa nghệ sĩ, tên sách nhà soạn nhạc Ông định thêm cần phải có hộp văn phép khách hàng nhập tên nghệ sĩ, chức danh nhà soạn nhạc, tùy thuộc vào loại tìm kiếm yêu cầu Cuối cùng, anh chọn sử dụng nút để gửi yêu cầu đến hệ thống Sau nhấn nút Gửi, hệ thống tạo báo cáo bao gồm siêu liên kết đến thông tin riêng lẻ đĩa CD Báo cáo CD chứa thông tin tạo cách nhấp vào siêu liên kết liên kết với CD Trên báo cáo bản, Alec thêm nút để chọn tìm thơng tin bổ sung CD thêm CD vào giỏ hàng Nếu nút Chi tiết nhấn, báo cáo chi tiết chứa thông tin tiếp thị đĩa CD tạo Cuối cùng, Alec định thêm nút vào báo cáo để thêm đĩa CD vào giỏ hàng Thao tác thứ hai hỗ trợ trang chủ cho phép người dùng tìm kiếm danh mục CD theo thể loại nhạc Như với thao tác trước, Alec chọn lập mơ hình tìm kiếm danh mục menu tìm kiếm bật lên Trong trường hợp này, khách hàng chọn danh mục, hệ thống tạo báo cáo với siêu liên kết đến thông tin riêng lẻ đĩa CD Từ thời điểm đó, việc điều hướng giống với tìm kiếm trước Thao tác thứ ba hỗ trợ xem lại nội dung giỏ hàng Trong trường hợp này, Alec định lập mơ hình giỏ hàng dạng báo cáo chứa ba loại siêu liên kết: loại để xóa đĩa CD riêng lẻ khỏi giỏ hàng, loại để xóa tất đĩa CD khỏi giỏ hàng loại để đặt hàng Các siêu liên kết xóa xóa CD (hoặc tất CD) khỏi giỏ hàng người dùng xác nhận thao tác Liên kết đặt hàng đưa khách hàng đến mẫu đơn đặt hàng Sau khách hàng điền vào đơn đặt hàng, khách hàng nhấn nút đặt hàng Sau hệ thống phản hồi hộp thông báo xác nhận đơn hàng Thao tác thứ tư hỗ trợ trang chủ cho phép khách hàng đặt hàng trực tiếp Sau xem xét, Alec định đơn đặt hàng hoạt động xem xét giỏ hàng giống hệt Do đó, anh định buộc người dùng phải đặt hàng xem xét hoạt động giỏ hàng phải trải qua quy trình 45 Alec hình dung cách sử dụng khung, người dùng quay lại trang chủ từ hình Việc ghi lại điều khiến WND có nhiều dịng, Alec cần ghi mơ tả với WND Sửa đổi WND Sau đó, Alec kiểm tra tình sử dụng để xem WND ban đầu cho phép loại người dùng khác hoạt động thông qua hệ thống tốt Anh bắt đầu với tình sử dụng Duyệt mua sắm theo dõi qua WND, tưởng tượng xuất hình giả vờ điều hướng qua hệ thống Anh thấy WND hoạt động tốt, anh nhận thấy vài vấn đề nhỏ liên quan đến giỏ hàng Đầu tiên, anh định việc cho phép khách hàng truy xuất thông tin liên quan đến đĩa CD có giỏ hàng hợp lý Do đó, anh thay đổi khn mẫu thành phần giao diện người dùng từ Báo cáo thành Đại diện liên kết siêu liên kết thêm siêu liên kết từ Giỏ hàng đến Báo cáo tạo yêu cầu tìm kiếm khác Thứ hai, anh nhận thấy Giỏ hàng sử dụng siêu liên kết để liên kết với quy trình Xóa Đặt hàng Tuy nhiên, tất yếu tố khác WND, anh sử dụng nút để mơ hình hóa ý tưởng tương đương Do đó, anh định thay đổi thành phần Giỏ hàng để mơ hình hóa kết nối dạng nút Tất nhiên, điều buộc phải sửa đổi nút chuyển đổi 46 Tiếp theo, Alec khám phá use case người mua sắm vội vàng Trong trường hợp này, WND không hoạt động Di chuyển từ trang chủ, đến trang tìm kiếm, đến danh sách CD phù hợp, đến trang CD với giá thông tin khác ba cú nhấp chuột Điều nằm quy tắc ba lần nhấp, người vội vàng, điều nhiều Alec định thêm tùy chọn tìm kiếm nhanh vào trang chủ phép người dùng nhập tiêu chí tìm kiếm (ví dụ: tên tiêu đề nghệ sĩ, thay tìm kiếm chi tiết trang tìm kiếm) đó, cú nhấp chuột, đưa người dùng đến CD phù hợp với tiêu chí danh sách CD có nhiều Điều cho phép người dùng thiếu kiên nhẫn truy cập vào đĩa CD quan tâm hai cú nhấp chuột Khi đĩa CD hiển thị hình, trường hợp Hurry-up Shopper gợi ý người dùng mua đĩa CD, thực tìm kiếm từ bỏ trang Web lướt nơi khác Điều gợi ý hai thay đổi quan trọng Đầu tiên, phải có cách dễ dàng để chuyển đến hình Đặt hàng Khi WND đứng (xem Hình 11-19), người dùng phải thêm mặt hàng vào giỏ hàng sau nhấp vào liên 47 kết khung HTML để đến hình Đặt hàng Mặc dù khả người dùng nhận thấy liên kết đặt hàng khung chờ giai đoạn đánh giá giao diện, Alec nghi ngờ, dựa kinh nghiệm trước đây, số lượng lớn người dùng khơng nhìn thấy Do đó, anh định thêm nút vào hình Báo cáo hình Báo cáo chi tiết có tên Mua (xem Hình 11-20) Thứ hai, người mua sắm vội vàng muốn tìm đĩa CD khác thay mua đĩa CD đó, Alec định đưa mục tìm kiếm nhanh từ trang chủ vào khung Điều làm cho tất tìm kiếm có sẵn từ nơi hệ thống Điều có nghĩa tất chức trang chủ thực khung Alec cập nhật ghi phía đính kèm với WND để phản ánh thay đổi Cuối cùng, sau xem xét WND, Alec định sửa sang lại Danh sách nghệ sĩ, Danh sách tiêu đề Danh sách nhà soạn nhạc dạng khuôn mẫu cửa sổ thay khn mẫu hộp văn Sau đó, anh thêm hộp văn Mục tìm kiếm vào phần tử Hình 11-20 cho thấy WND sửa đổi cho phần Web trường hợp sử dụng Đặt hàng Tất thay đổi đánh dấu Thiết kế tiêu chuẩn giao diện Khi WND hoàn thành, Alec tiếp tục phát triển tiêu chuẩn giao diện cho hệ thống Phép ẩn dụ giao diện đơn giản: cửa hàng âm nhạc Lựa chọn CD Các đối tượng hành động giao diện đơn giản nhau, việc sử dụng biểu tượng logo CD Selection (xem Hình 11-21) Thiết kế mẫu giao diện Đối với mẫu giao diện, Alec định thiết kế đơn giản, gọn gàng, có họa tiết đại với biểu tượng CD Selection góc bên trái Mẫu có hai vùng điều hướng: menu để điều hướng tồn trang Web (ví dụ: trang chủ tổng thể trang Web, vị trí cửa hàng) menu phía bên trái để điều hướng hệ thống bán hàng Internet Menu bên trái chứa liên kết đến thao tác cấp cao (xem WND Hình 11-19), tùy chọn “tìm kiếm nhanh” Khu vực trung tâm hình sử dụng để hiển thị biểu mẫu báo cáo thao tác thích hợp chọn (xem Hình 11-22) 48 Tại thời điểm này, Alec định tìm kiếm số phản hồi nhanh chóng cấu trúc tiêu chuẩn giao diện trước đầu tư thời gian vào việc tạo mẫu thiết kế giao diện Do đó, ơng gặp Margaret Mooney, nhà tài trợ dự án Chris Campbell, nhà tư vấn, để thảo luận thiết kế Thực thay đổi thời điểm đơn giản nhiều so với sau thực nguyên mẫu Margaret Chris có vài gợi ý, sau họp, Alec thực thay đổi chuyển sang bước thiết kế-tạo mẫu 49 Tạo mẫu thiết kế giao diện Alec định phát triển nguyên mẫu ngôn ngữ đánh dấu siêu văn (HTML) hệ thống Hệ thống bán hàng qua Internet lãnh thổ cho CD Selective đầu tư chiến lược vào mơ hình kinh doanh mới, điều quan trọng phải đảm bảo vấn đề bị bỏ qua Ngun mẫu HTML cung cấp thông tin chi tiết cho phép đánh giá giao diện tương tác Khi thiết kế ngun mẫu, Alec bắt đầu với hình làm việc theo cách tất hình Quá trình lặp lặp lại anh thực nhiều thay đổi hình làm việc Khi thiết kế xong nguyên mẫu ban đầu, anh đăng lên mạng nội CD Selection thu hút ý kiến từ số bạn bè có nhiều kinh nghiệm Web Anh sửa lại dựa nhận xét mà anh nhận Hình 11-23 giới thiệu số hình từ nguyên mẫu 50 Đánh giá giao diện Bước đánh giá giao diện Alec định đánh giá hai giai đoạn Đánh giá đánh giá tương tác thực Margaret, giám đốc tiếp 51 thị cô, nhân viên chọn, quản lý cửa hàng chọn Chris Họ làm việc thực hành với nguyên mẫu xác định số cách để cải thiện Alec sửa đổi nguyên mẫu HTML để phản ánh thay đổi nhóm đề xuất yêu cầu Margaret Chris xem xét lại Lần đánh giá thứ hai đánh giá tương tác khác, lần loạt hai nhóm khách hàng tiềm tập trung — nhóm có kinh nghiệm Internet, nhóm cịn lại có nhiều kinh nghiệm Internet Một lần nữa, số thay đổi nhỏ xác định Alec lại sửa đổi nguyên mẫu HTML yêu cầu Margaret Chris xem xét lại Khi họ hài lịng, thiết kế giao diện hồn tất Tài liệu Thiết kế Điều hướng Bước cuối mà Alec hoàn thành ghi lại thiết kế điều hướng thông qua use cases thực tế Để thực điều này, Alec tập hợp lại use case thiết yếu (xem Hình 5-18), tình sử dụng (xem Hình 11-6), sơ đồ điều hướng cửa 52 sổ (xem Hình 11-20), nguyên mẫu giao diện người dùng (xem Hình 11-22 11-23) Đầu tiên, chép nội dung use case thiết yếu sang use case thực Anh thay đổi loại từ chi tiết, chất đến chi tiết, thực tế; actor định khách hàng duyệt thay khách hàng đơn giản Thứ hai, ơng viết cụ thể bước phản hồi mô tả tương tác khách hàng duyệt web hệ thống Hình 11-24 cho thấy danh sách phần bước quy trình bình thường phần kiện luồng use case thực Cuối cùng, anh lặp lại bước cho người mua sắm vội vàng TỔNG KẾT Nguyên tắc thiết kế giao diện người dùng Yếu tố thiết kế giao diện người dùng bố cục hình, biểu mẫu báo cáo, thường mơ tả hình chữ nhật với khu vực để điều hướng, khu vực trung tâm cho đầu vào đầu ra, dòng trạng thái phía Thiết kế phải giúp người dùng nhận thức nội dung ngữ cảnh, phần khác hệ thống họ điều hướng qua biểu mẫu báo cáo Tất giao diện phải có tính thẩm mỹ (không phải tác phẩm nghệ thuật) cần có khoảng trắng đáng kể, sử dụng màu sắc cẩn thận quán với phông chữ Hầu hết giao diện phải thiết kế để hỗ trợ người dùng làm quen / lần đầu người dùng có kinh nghiệm Tính qn thiết kế (cả hệ thống hệ thống khác người dùng sử dụng) điều quan trọng điều khiển điều hướng, thuật ngữ bố cục biểu mẫu báo cáo Cuối cùng, tất giao diện phải cố gắng giảm thiểu nỗ lực người dùng — ví dụ: cách yêu cầu không ba lần nhấp từ menu để thực hành động Quy trình thiết kế giao diện người dùng Đầu tiên, nhà phân tích phát triển kịch sử dụng mơ tả mẫu hành động thường sử dụng mà người dùng thực Thứ hai, họ thiết kế cấu 53 trúc giao diện thông qua WND dựa trường hợp sử dụng thiết yếu WND sau thử nghiệm với tình sử dụng để đảm bảo cho phép người dùng thực nhanh chóng trơn tru tình Thứ ba, nhà phân tích xác định tiêu chuẩn giao diện dạng (các) ẩn dụ giao diện, đối tượng, hành động biểu tượng Các yếu tố kết hợp với cách thiết kế mẫu giao diện cho phần hệ thống Thứ tư, thiết kế giao diện riêng lẻ tạo mẫu, thông qua bảng phân cảnh đơn giản, nguyên mẫu HTML nguyên mẫu sử dụng ngơn ngữ phát triển hệ thống (ví dụ: Visual Basic) Cuối cùng, đánh giá giao diện thực cách sử dụng đánh giá theo kinh nghiệm, đánh giá hướng dẫn, đánh giá tương tác kiểm tra khả sử dụng thức Đánh giá xác định cải tiến, giao diện thiết kế lại đánh giá thêm Thiết kế điều hướng Mục tiêu thiết kế điều hướng làm cho hệ thống sử dụng đơn giản có thể, cách ngăn người dùng mắc lỗi, đơn giản hóa việc khắc phục lỗi sử dụng trật tự ngữ pháp quán (thường thứ tự hành động đối tượng) Ngôn ngữ lệnh, ngôn ngữ tự nhiên thao tác trực tiếp sử dụng điều hướng, cách tiếp cận phổ biến menu (thanh menu, menu thả xuống, menu bật lên, menu tab, nút cơng cụ đồ hình ảnh) Thơng báo lỗi, thông báo xác nhận, thông báo xác nhận, thơng báo trì hỗn thơng báo trợ giúp loại thông báo phổ biến Một thiết kế điều hướng thống nhất, ghi lại dạng WNDs use cases thực tế Thiết kế đầu vào Mục tiêu chế đầu vào đơn giản dễ dàng nắm bắt thông tin xác để hệ thống, thường cách sử dụng xử lý hàng loạt trực tuyến, thu thập liệu nguồn giảm thiểu thao tác gõ phím Thiết kế đầu vào bao gồm thiết kế hình nhập tất biểu mẫu in sẵn sử dụng để thu thập liệu trước chúng nhập vào thơng tin hệ thống Có nhiều loại đầu vào, chẳng hạn trường văn bản, trường số, hộp kiểm, nút radio, hộp danh sách hình, hộp danh sách thả xuống trượt Hầu hết đầu vào có giá trị định danh cách sử dụng số kết hợp kiểm tra tính hồn chỉnh, kiểm tra định dạng, kiểm tra phạm vi, kiểm tra chữ số, kiểm tra tính quán kiểm tra sở liệu 54 Thiết kế đầu Mục tiêu chế đầu trình bày thơng tin cho người dùng để họ hiểu xác thơng tin với nỗ lực nhất, thông thường cách hiểu báo cáo sử dụng thiết kế chúng để giảm thiểu tải sai lệch thơng tin Thiết kế đầu có nghĩa thiết kế hình báo cáo phương tiện khác, chẳng hạn giấy Web Có nhiều loại báo cáo, chẳng hạn báo cáo chi tiết, báo cáo tóm tắt, báo cáo ngoại lệ, tài liệu quay vòng biểu đồ Yêu cầu phi chức Lớp tương tác người máy tính Các u cầu phi chức ảnh hưởng đến tính hữu dụng lớp tương tác người máy tính Bởi người dùng / khách hàng coi hệ thống lớp tương tác người máy tính, việc khơng ý đầy đủ đến yêu cầu phi chức thiết kế lớp khiến tồn nỗ lực phát triển hệ thống thất bại Các yêu cầu bao gồm vấn đề hoạt động, hiệu suất, bảo mật văn hóa trị, đồng thời chúng đan xen với thiết kế lớp kiến trúc vật lý quản lý liệu Tuy nhiên, phải đặc biệt ý đến u cầu văn hóa trị, chẳng hạn bố cục giao diện người dùng khả đa ngôn ngữ, nhằm giải việc thiết kế lớp để hệ thống có hiệu 55 ... Yêu cầu phi chức Lớp tương tác người máy tính 55 CHƯƠNG 11: THIẾT KẾ LỚP TƯƠNG TÁC GIỮA CON NGƯỜI VÀ MÁY TÍNH Giao diện người dùng phần hệ thống mà người dùng tương tác Nó bao gồm hình hiển thị... dụng truy cập hầu hết tình Nó có tính di động cao, báo cáo ngắn 40 VII YÊU CẦU PHI CHỨC NĂNG VÀ THIẾT KẾ LỚP TƯƠNG TÁC GIỮA NGƯỜI VÀ MÁY TÍNH Lớp tương tác người máy tính bị ảnh hưởng nhiều yêu cầu... vấn đề hiệu phải giải Tùy thuộc vào công cụ giao diện người dùng sử dụng, thành phần giao diện người dùng khác yêu cầu Hơn nữa, tương tác lớp tương tác người máy tính với lớp khác phải xem xét