Công nghệ phần mềm Thiết kế giao diện người dùng Mục tiêu • Gợi ý số nguyên lý thiết kế tổng quát cho việc thiết kế giao diện người dùng • Giải thích kiểu tương tác khác ứng dụng chúng • Giải thích dùng biểu diễn thông tin dạng đồ họa dạng text • Giải thích hoạt động quy trình thiết kế giao diện người dùng • Giới thiệu thuộc tính dùng (usability) cách đánh giá hệ thống Các chủ đề • • • • • Các vấn đề thiết kế Quy trình thiết kế UI Phân tích người dùng User interface prototyping Đánh giá giao diện Giao diện người dùng • Nên thiết kế cho phù hợp với kĩ năng, kinh nghiệm trông đợi người dùng tương lai hệ thống • Người dùng hệ thống thường đánh giá hệ thống theo giao diện thay chức • Một giao diện thiết kế tồi – dẫn đến việc người dùng phạm lỗi nghiêm trọng – lí nhiều hệ thống phần mềm không đem sử dụng Nhân tố người thiết kế giao diện • Trí nhớ ngắn hạn có hạn – Người ta nhớ nhanh khoảng thông tin • Nếu bạn đưa nhiều vậy, người ta dễ nhầm lẫn • Nhầm lẫn chuyện thường – Khi người dùng nhầm lẫn hệ thống chạy sai, cảnh báo thông báo không mức làm người dùng căng thẳng dễ nhầm lẫn • Mỗi người có lực cao thấp khác – Người thiết kế không nên thiết kế cho lực • Mỗi người hợp với kiểu tương tác khác – Người thích hình ảnh, người khác thích chữ Các nguyên tắc thiết kế UI • Thiết kế UI phải xét đến nhu cầu, kinh nghiệm lực người dùng hệ thống • Người thiết kế cần – nhận thức hạn chế vật lý tâm lý người • Ví dụ giới hạn trí nhớ ngắn hạn – nhận thức người nhầm lẫn • Các nguyên tắc thiết kế UI đóng vai trò tảng cho thiết kế giao diện – Tuy tất nguyên tắc áp dụng cho tất thiết kế Các yêu cầu rút từ kịch • Người dùng không nhận từ khóa tìm kiếm thích hợp, cần có cách giúp đỡ họ chọn từ khóa • Người dùng phải có khả chọn collection cần tìm • Người dùng phải có khả thực tìm kiếm yêu cầu tài liệu liên quan Các kĩ thuật phân tích • Phân tích tác vụ - Task analysis – Mô hình hóa bước việc hoàn thành tác vụ • Phỏng vấn câu hỏi điều tra (questionnaire) – Hỏi người dùng công việc họ • Văn hóa – Quan sát người dùng họ làm việc Phân tích tác vụ thành phân cấp Retrieve pictures from remote libraries 1, 2, until pictures found, Discover possible sources Establish search terms Search for pictures Request photocopies of found items 3.1, 3.2, 3.3 until pictures found, 3.4 if necessary, 3.5 3.1 Select library 3.2 Log in to catalogue 3.3 Search for pictures 3.4 Modify search terms 3.3.1, 3.3.2, 3.3.3 3.3.1 Enter search terms 3.3.2 Initiate search 3.3.3 Review results 3.5 Record relevant items Phỏng vấn • Tổ chức vấn có cấu trúc linh động dựa câu hỏi mở • Khi người dùng cung cấp thông tin mà họ cho quan trọng; không thông tin mà bạn định thu thập • Phỏng vấn theo nhóm tạo điều kiện để người dùng thảo luận với công việc họ Văn hóa • Một người quan sát người dùng họ làm việc hỏi công việc họ (không theo kịch bản) • Có giá trị nhiều tác vụ người dùng mang tính trực quan họ cảm thấy khó miêu tả giải thích tác vụ • Giúp hiểu vai trò ảnh hưởng xã hội tổ chức công việc Hồ sơ tìm hiểu văn hóa Một Mộttrạm trạmđiều điềukhiển khiểnkhông khônglưu lưucó cómột mộtsố số'bàn' 'bàn'điều điềukhiển, khiển,trong đócác cácbàn bànđiều điềukhiển khiểncác cácvùng vùngkhông khônggian giancạnh cạnhnhau nhaucũng đượcđặt đặtcạnh cạnhnhau nhau.Các Cácchuyến chuyếnbay baytrong trongmột mộtvùng vùng được biểu biểudiễn diễnbằng bằngcác cácbăng bănggiấy giấylồng lồngvào vàocác cácgiá giágỗ gỗtheo theothứ thứtự tự phản phảnánh ánhvịvịtrí trícủa củachúng chúngtrong trongvùng vùng.Nếu Nếukhông khôngcòn cònđủ đủchỗ chỗ trêngiá giá(nghĩa (nghĩalàlàkhi khivùng vùngkhông khônggian gianđó đórất rấtđông đôngmáy máybay), bay), nhữngngười ngườiđiều điềukhiển khiểntrải trảicác cácbăng bănggiấy giấylên lêncái cáibàn bànviết viếtđặt đặt trước trướccái cáigiá giágỗ gỗ Khi Khichúng chúngtôi tôiquan quansát sátnhững nhữngngười ngườiđiều điềukhiển, khiển,chúng chúngtôi tôinhận nhận thấy thấycứ cứmột mộtlúc lúchọ họlại lạinhìn nhìnsang sanggiá giátreo treocác cácbăng bănggiấy giấycủa củavùng vùng bên bêncạnh cạnh.Chúng Chúngtôi tôihỏi hỏitại tạisao sao.Họ Họtrả trảlời lờirằng, rằng,nếu nếubàn bànđiều điều khiển khiểnbên bêncạnh cạnhphải phảitrải trảigiấy giấylên lênbàn, bàn,điều điềuđó đócó cónghĩa nghĩasẽ sẽcó có nhiều nhiềuchuyến chuyếnbay baybay bayvào vàovùng vùngcủa củahọ họ.Vì Vìvậy, vậy,họ họsẽ sẽcố cốgắng gắng tăng tăngtốc tốccác cácchuyến chuyếnbay baytrong trongvùng vùngcủa củamình mìnhđể để'lấy 'lấychỗ' chỗ'cho cho cácchuyến chuyếnbay bayđang đangđến đến Rút từ tìm hiểu văn hóa • Những người điều khiển phải nhìn thấy tất chuyến bay vùng Do đó, phải tránh kiểu hiển thị với kéo mà chuyến bay đỉnh đáy hình biến • Giao diện phải có cách để báo cho người điều khiển số chuyến bay vùng giáp ranh để họ lập kế hoạch cho công việc Bản mẫu UI • Mục tiêu mẫu cho phép người dùng có trải nghiệm trực tiếp giao diện • Nếu trải nghiệm trực tiếp, đánh giá khả sử dụng giao diện • Quy trình làm mẫu có bước: – Lúc đầu, dùng mẫu giấy; – Sau tinh chỉnh thiết kế, phát triển mẫu tự động hóa với độ phức tạp ngày tăng Bản mẫu giấy • Dùng vẽ nháp UI để duyệt qua kịch • Dùng storyboard để trình bày chuỗi tương tác với hệ thống • Bản mẫu giấy cách thu thập phản ứng người dùng đề xuất thiết kế Các kĩ thuật làm mẫu • Script-driven prototyping – Viết loạt script screen công cụ Macromedia Director – Khi người dùng tương tác, screen chuyển sang hiển thị hình • Visual programming – Dùng ngôn ngữ chuyên dụng cho phát triển nhanh Visual Basic • Internet-based prototyping – Dùng trình duyệt web browser script kèm theo Đánh giá UI • Cần thực số đánh giá UI để đánh giá mức độ thích hợp • Đánh giá đầy đủ toàn đắt không thực tế cho hầu hết hệ thống • Về lí tưởng, giao diện cần đánh giá theo đặc tả usability Tuy nhiên, người ta viết đặc tả Các thuộc tính usability Thuộc tính Miêu tả Khả học Người dùng cần để hoạt động hiệu với hệ thống? Tốc độ vận hành Tốc độ phản ứng hệ thống có đáp ứng tốt công việc người dùng? Chịu lỗi Mức độ dung thứ lỗi hệ thống lỗi người dùng Khả khôi phục Khả hệ thống khôi phục từ lỗi người dùng Tương thích hệ thống gắn bó chặt chẽ với kiểu làm việc đến đâu? Các kĩ thuật đánh giá đơn giản • Câu hỏi điều tra để lấy phản hồi người dùng • Quay video việc sử dụng hệ thống sau đánh giá nội dung • Cài đoạn mã thu thập thông tin tiện ích sử dụng lỗi người dùng • Phần mềm có chức thu thập phản hồi trực tuyến người dùng Tóm tắt • Các nguyên lý thiết kế UI giúp thiết kế UI tốt • Các kiểu tương tác: direct manipulation, menu systems form fill-in, command languages natural language • Nên dùng hiển thị đồ họa để biểu diễn xu hướng giá trị tương đối Dùng hiển thị số cần số xác • Nêu dùng màu sắc cách hạn chế quán Tóm tắt • Quy trình thiết kế UI gồm: phân tích người dùng, làm mẫu hệ thống đánh giá mẫu • Mục đích phân tích người dùng để người thiết kế nhận cách hoạt động người dùng • Quy trình làm mẫu UI nên mẫu giẩy làm sở cho mẫu tự động sau • Các mục tiêu đánh giá UI để thu thập phản hồi cách cải tiến thiết kế giao diện để đánh giá xem giao diện thỏa mãn đến đâu yêu cầu usability