Công nghệ phần mềm - Thiết kế giao diện người dùng

CÔNG NGHỆ PHẦN MỀMThiết Kế Giao Diện Người DùngHồ hải nghĩa – lớp 13T3Phạm Ngọc Hạnh – 12T31Tổng quan về thiết kế giao diện người dùngGiới thiệuNguyên tắc thiết kế giao diện người dùngTiến trình thiết kế giao diệnCác công cụ thiết kếCác mẫu thiết kế giao diện2Giới thiệu tổng quátLà một khâu trong thiết kế phần mềmHướng người dùngLàm bản mẫu, người dùng đánh giáVai trò, tầm ảnh hưởngCho phép người dùng sử dụng hệ thốngNgười dùng đánh giá, cảm nhận thông qua tương tác giao diệnQuyết định sự thành bại của một dự án→ Dễ sử dụng, thân thiện3Nguyên Tắc Thiết KếNgười sử dụng hệ thốngDễ điều khiểnÍt phải nhớGiao diện toàn vẹnCác nguyên tắc thiết kế giao diệnSự quen thuộc của người sử dụngNhất quánTối thiểu hóa sự bất ngờKhả năng phục hồiHướng dẫn người dùngĐa dạng người dùng4Người sử dụng hệ thốngDễ điều khiểnKhông bắt người dùng làm những hoạt động không ưu thíchCó được sự mềm dẻo trong tương tác: keyboard, mouse, bút...Người dùng có thể ngắt thao tác và undoChe dấu kỹ thuật bên trongĐối tượng sử dụng là khác nhau5Người sử dụng hệ thốngNgười dùng ít phải ghi nhớNên đưa ra những gợi ý trực quan cho người dùngHiển thị icon bẳng những biểu tượng có ý nghĩaTạo đường dẫn tắt (shortcut) trực quan........6Người sử dụng hệ thốngGiao diện toàn vẹncho phép người dùng sử dụng các tác vụ theo ngữ cảnhCác giao diện trong ứng dụng phải toàn vẹn:Đầy đủ:thêm, xóa, sửaCó cùng các thứcToàn vẹn về mô hình cũ đang được người dùng ưu chuộng.....7Các nguyên tắc thiết kế giao diện Sự quen thuộc của người sử dụngGiao diện phải được xây dựng trên các thuật ngữ và các khái niệm mà người sử dụng cảm thấy dễ hiểu hơn là thuật ngữ liên quan đến máy tính. Nhất quánHệ thống nên hiển thị ở mức thống nhất thích hợp.Tối thiểu hóa sự bất ngờNếu một yều được xử lý theo các thông thường thì người sử dụng có thể dự đoán thao tác yêu cầu tương tự khác8Các nguyên tắc thiết kế giao diện Khả năng phục hồiHoàn tác vụ (undo).Hỏi lại những hành động: xóa, hủy.. Hướng dẫn người dùnghệ thống trợ giúpHướng dẫn trực tiếp Đa dạng người dùngHỗ trợ nhiều loại tương tác cho nhiều người khác nhau. Vd: cận thị, mù màu9Tiến trình thiết kế giao diệnLà một quy trình lặp đi lặp lại với sự liên lạc chặt chẽ giữa người dùng và người thiết kế.Vd: ...Gồm 3 hoạt động chính:phân tích người sử dụng: tìm hiểu người dùng sẽ làm gì với hệ thốngLập mẫu thử hệ thống: phát triển một loạt các mẫu thử để thử nghiệmĐánh giá giao diện: thử nghiệm các mẫu thử cuối cùng với người dùng để đưa ra bản chính thức10Tiến trình thiết kế giao diệnQuá trình thiết kế có thể chia ra làm hai bước chính: Thiết kế tổng thể:Giao diện có bao nhiêu màn hìnhSự liên kết giữa các màn hình đó như thế nào Thiết kế chi tiết: mô tả chi tiết từng màn hìnhSắp xếp các đối tượng trong một màn hình11Tiến trình thiết kế giao diện12Quá trình thiết kế sơ lượcTiến trình thiết kế giao diện (tổng thể)13Sơ đồ thiết kế giao diện người dùngTiến trình thiết kế giao diện (tổng thể)Phân tích và tìm hiểu các hoạt động của người dùngHiểu rõ người dùng muốn làm gì với hệ thốngMô tả theo cách cả người dùng lẫn người thiết kế đều hiểu→ kỹ thuật viên cầnPhân tích tác vụ: mô hình hóa các bước cần thực hiện để hoàn thành một nhiệm vụPhỏng vấn và đặt các câu hỏi trắc nghiệmMô tả: quan sát người sử dụng làm việc...14Kỹ thuật phân tíchPhân tích tác vụ:15Retrieve picturesfrom remotelibrariesDiscoverpossiblesourcesEstablishsearchtermsSearch forpicturesRequestphotocopiesof found items1234.SelectlibraryLog in tocatalogueSearch forpicturesModifysearch termsRecordrelevantitems3.13.23.33.43.5Enter searchtermsInitiatesearchReviewresults3.3.13.3.23.3.3do 1, 2,3 until pictures found, 4do 3.1, 3.2,3.3 until pictures found,3.4 if necessary, 3.5do 3.3.1, 3.3.2, 3.3.3Kỹ thuật phân tíchPhỏng vấn: có thể là phỏng vấn tay đôi, hoặc nhómĐặt câu hỏi theo hai dạng: câu hỏi mở, câu hỏi đóng (có thể trắc nghiệm)Câu hỏi có thể sắp xếp: thu hẹp dần, mở rộng dầnChú ý: không được thể hiện sự áp đặt, một định kiến chủ quan, biết lắng nghe, tôn trọng, cảm thông ...Phiếu điều tra: có thể coi là một hình thức phỏng vấn gián tiếp16Kỹ thuật phân tíchMô tảQuát sát người dùng khi họ đang làm việc, có thể hỏi công việc của họcCó nhiều tác vụ mà tính trực quan, rất khó để diễn đạt nên quan sát họ làm việc để cảm nhận là tốt nhấtGiúp hiểu về vai trò của các ảnh hưởng xã hôi, tổ chức đối với công việc17Tiến trình thiết kế giao diện (tổng thể)Tạo bản mẫu thiết kế:Cho phép người dùng trải nghiệm trực tiếp đối với giao diện. Đánh giá khả năng sử dụng giao diện một cách khách quan nhấtQuy trình làm bản mẫu có thể theo 2 bước:Làm bản thiết kế trên giấy trướcTừ bản mẫu trên giấy cộng với tìm hiểu ý kiến người dùng để tạo ra bản mẫu động phức tạp hơnSau khi tạo bản mẫu thiết kế động đã được người dùng đánh giá sẽ tiến hành tạo bản mẫu chạy đượcCài đặt giao diện người dùng cuối cùng18Tiến trình thiết kế giao diệnKỹ thuật thiết kếTương tác người dùng: cách người dùng đưa thông tin vào hệ thốngBiểu diễn thông tin: cách hệ trình diễn thông tin cho người dùng Giải pháp được xem xét theo góc độ:Thiết bị tương tác với người dùngCách hệ thống trình diễn chủng loại giao diệnMô hình tương tác19Tiến trình thiết kế giao diệnThiết bị vào ra:Màn hìnhBàn phímMouse, bút từMàn hình cảm biếnMic, loaSmart cards....Cả thiết bị lẫn phương thức đều đang tiến hóa20Tiến trình thiết kế giao diệnCác bộ phận thiết kếKỹ sư phần mềm tạo ra mô hình thiết kế(design model)Người phụ trách về nhân sự, tạo ra mô hình người dùng(user model)Người dùng cuối phát triển mô hình nhận biết hệ thống(system perception) Người thực thi tạo ra mô hình thực thi (implementation model)21Tiến trình thiết kế giao diệnThiết kế chi tiết trên màn hình dao diệnBố trí màn hình theo loại dữ liệu: hình ảnh, icon...Người dùng có thể tùy biến màn hìnhPhân chia những báo cáo lớn dễ hiểu nhấtDữ liệu xuất ra dạng hình ảnh phải vừa vặnSử dụng màu sắc phù hợpCảnh báo lỗi22Các vấn đề trong thiết kế giao diệnThời gian phản hồi:Thời gian phản hồi trung bình: không được lâu quá: cảm giác mệt mỏiCần chứng tỏ hệ thống đang hoạt độngĐộ biến thiên thời gianGây cảm giác hệ thống đang gặp lỗi23Các vấn đề trong thiết kế giao diệnThông báo:Là phản hồi của hệ thống đối với thao tácCần có nghĩa, dễ hiểu, đưa ra các thông tin hưu ích với người dùngTránh đưa ra sai số liệuĐịnh dạng thông báo nhất quánThông báo lỗi chính xácCó tính xây dựng, nguyên nhân, cách khắc phụcSố lượng thông báoThời điểm thứ tự đưa ra thông báo24Xử lý lỗiGiả sử một game thủ tìm kiếm thông tin của một hero trong game bằng cách nhật tên Mời nhận tên hero và ấn OKYASUOSTên HeroOKCancelXử lý lỗiThông báo lỗi kiểu hệ thốngThông báo lỗi kiểu người dùngPatientsHelpRetryCancelKhông có tướng nào tên YASUOSNhấn Patients để xem danh sách Nhấn Retry để nhập lạiNhấn Help để tìm hiểu thêmLỗi: dxt000#Dữ liệu bạn nhập lỗi?OKCancelCác vấn đề trong thiết kế giao diệnTiện ích (trợ giúp)Cần có các tiện ích giúp đỡ người sử dụngTiện ích tích hợp: trợ giúp, trực tuyến, theo ngữ cảnhChú giải thao tác, giao diệnCác tài liệu trực tuyếnTra cứu chức năng hệ thống. Vd: chứ năng tra cứu trực tuyến của lumiaCác macro: tự động hóa thao tác27Các vấn đề trong thiết kế giao diệnHệ thống HELPHelp? Nghĩa là “help. I want information” Help! Nghĩa là “help. I'm in trouble”Help không đơn giản chỉ là 1 sổ tay hướng dẫn1 hệ thống help thông tin là hiện thị thông tin độngThông tin help cung cấp cho người dụng phải giá trị, không tràn lan.Help nên được thiết kế ở nơi người dùng dễ tìm nhất28Các hình thức tương tácTương tác trực tiếp với thông tin:Vd: soạn thảo văn bản, điền formDễ học, dễ sử dụngNhận được tức thời kết quả thao tácCài đặt phức tạp, tốn tài nguyên phần cứng29Các hình thức tương tácTương tác gián tiếpVd: chọn từ lệnh menu giao diện dòng lệnhThuận tiện khi lặp đi lặp lại thao tácPhức tạpKém trực quan30Các hình thức tương tácSử dụng thực đơn (menu )Không cần nhớ lệnhTối thiểu hóa dùng bàn phímTránh các lỗi như sai lệnh, tham sốDễ dàng tạo các trợ giúp theo ngữ cảnh31Các hình thức tương tácĐối thoại (Dialog)Dùng khi cần người dùng đưa ra quyết địnhVd: hệ thống đưa ra đối thoại để người dụng chọn giữa Abort, Retry, Ignore32Tính kỹ nghệ trong thế kếGiao diện là phần tử dễ thay đổiThay đổi quy trình: phương thức thao tácThay đổi môi trường: phần cứng, hệ điều hànhNâng cấp: đẹp hơn dễ sử dụng hơnGiao diện phải dễ sửa đổi: có tính khả chuyểnGiao diện nên độc lập với xử lý33Giao diện người dùngGiao diện người dùngGiao diện người dùngTham sốPhương pháp và công cụ thiết kếPhương pháp:Hướng đối tượngHướng chức năngCông cụ: Power Designer Rational RoseVisual basic, c#.34Các loại giao diệnGiao diện dòng lệnhLà phương thức tương tác đầu tiênNhập lệnh dữ liệu từ bàn phímDễ cài đặt so với giao diện đồ họaThực hiện thông qua hàm chuẩn của ngôn ngữKhông tốn tài nguyên hệ thốngCó khả năng tạo ra lệnh phức tạp nhờ tổ hợpThao tác thực hiện tuần tự, khó sửa lỗiKhông phù hợp với người dùng ít kinh nghiệm35Giao diện dòng lệnh36Các loại giao diệnGiao diện đồ họaLà giao diện thông dụng nhất hiện nay. Trên PC, smart phone.....Dễ học, dễ sử dụng thuận tiện với người ít kinh nghiệmCó nhiều cửa sổ. Không sợ mất thông tin khi tương tác song song giữa các cửa sổCó thể hiển thị, tương tác dữ liệu trên nhiều vị trí trong cửa sổ37Giao diện đồ họa (GUI)38Giao diện đồ họa (GUI)39CÔNG NGHỆ PHẦN MỀMThiết Kế Giao Diện Người DùngCảm ởn giáo viên và các bạn đã lắng nghe40