Thiết kế và phát triển giao diện - Trần Thị Kim Chi

Thiết Kế và Phát Triển Giao DiệnGiảng viên: Trần Thị Kim ChiNỘI DUNGCác thuộc tính của tính sử dụng3Các lỗi thiết kế hệ thống tương tác1Tính sử dụng là gì?2Mô hình sự chấp nhận của hệ thống4Nguyên lý thiết kế hệ thống có tính sử dụng5Kỹ nghệ của hệ thống có tính sử dụng6Các thí dụ về lỗi thiết kế hệ thống tương tácThí dụ 1: phiếu bầu cử tổng thống Mỹ năm 2000Thí dụ 2:Thiết kế cửa ra vàoThí dụ 3:Thiết kế hộp thoại in mẫu các chứng chỉ(p 21)Các lỗi thiết kế hệ thống tương tác1Các thí dụ về lỗi thiết kế hệ thống tương tácCác lỗi thiết kế hệ thống tương tác1How do you open the toothpaste?Design suggestion A more obvious design might be to provide the type of sealed cap used on many soft-drink bottles, where unscrewing the cap breaks the seal. At the very least it would be helpful to include directions on the tube for piercing the seal. The directions should be illustrated graphically so they could be understood by speakers of any language. Các thí dụ về lỗi thiết kế hệ thống tương tácCác lỗi thiết kế hệ thống tương tác1Các thí dụ về lỗi thiết kế hệ thống tương tácCác lỗi thiết kế hệ thống tương tác1Where do you plug the mouse? Where do you plug the keyboard?top or bottom connector?Do the color coded icons help?Các thí dụ về lỗi thiết kế hệ thống tương tácCác lỗi thiết kế hệ thống tương tác1(i) A provides direct adjacent mapping between icon and connector(ii) B provides color coding to associate the connectors with the labelsCác thí dụ về lỗi thiết kế hệ thống tương tácCác lỗi thiết kế hệ thống tương tác1Coffee machineSo sánhPlugging in a USB connector Các lỗi thiết kế hệ thống tương tác1Plugging in a USB connector So sánhCác thí dụ về lỗi thiết kế hệ thống tương tácCác lỗi thiết kế hệ thống tương tác1Các thí dụ về lỗi thiết kế hệ thống tương tácCác lỗi thiết kế hệ thống tương tác1Định nghĩa tính sử dụng (Usability)Tính sử dụng được : “Khả năng hệ thống được sử dụng bởi con người một cách dễ dàng và hiệu quả” (Shacked 1991)Tính sử dụng được là phạm vi trong đó sản phẩm được sử dụng bởi nhóm người xác định để đạt được những mục tiêu xác định.Các đặc tình của tính sử dụng:Tính hiệu quả (effectiveness), Năng suất(efficiency) và Sự thỏa mãn (satisfaction) trong ngữ cảnh sử dụng xác định.Tính sử dụng - Usability2Định nghĩa tính sử dụng (Usability)Hiệu quả (effectiveness): Đem lại kết quả đúng như dự kiến. Đạt được mục tiêu một cách chính xác và đầy đủ.Năng suất (Efficiency): tiêu hao năng lượng và tài nguyên phù hợp để đạt được mục tiêu một cách chính xác và đầy đủ. Là thước đo mức độ cố gắng của người sử dụng để đạt được mục tiêu đề raThỏa mãn (satisfaction ): không bực dọc, lo lắng và có quan điểm tích cực với việc sử dụng sản phẩmNgữ cảnh ứng dụng: Người sử dụng, nhiệm vụ, thiết bị (phần cứng, phần mềm,), môi trường vật lý, xã hội.Nhiệm vụ (task): Các hoạt động cần thiết để đạt được mục tiêuTính sử dụng - Usability2Định nghĩa tính sử dụng (Usability)Tính sử dụng - Usability2Đặc tả các thành phần sử dụng và mối quan hệ giữa chúngKhung làm việc của tính sử dụng (Usability)Hiệu năng (performance): effectiveness + efficiencyHiệu năng và sự thỏa mãn của người sử dụng được sử dụng vào việc đo tính sử dụng.Độ đo về hiệu năng và sự thỏa mãn của người sử dụng là nền tảng của sự so sánh tính sử dụng của các hệ thống khác nhau.Tính sử dụng có thể cải thiện bằng cách tích hợp các đặc trưng thuộc tính đã biệt trong ngữ cảnh sử dụng cụ thể.Tính sử dụng - Usability2Sáu thuộc tính của tính sử dụng (Usability)Hiệu quả (Effectiveness):Tính chính xác và tính đầy đủ mà với nó người sử dụng đạt được mục tiêu xác định trướcTính học được (Learnability): Hệ thống có dễ học không?Năng suất (Effciency): Một khi đã dễ học, có sử dụng nhanh không?Tính dễ nhớ (Memorability):Có dễ nhớ những gì đã học?Các lỗi (Errors): Ít lỗi, dễ gỡ lỗi?Thỏa mãn mục đích (Subjective Satisfaction):Có thích thú sử dụng hệ thống ?Các thuộc tính của tính sử dụng31994, Mandel liệt kê 10 vi phạm ảnh hưởng đến tính sử dụng bao gồm:Menu và biểu tượng nhập nhằngNgôn ngữ chỉ cho phép đi theo một hướng trong hệ thốngHạn chế đầu vào và thao tác trực tiếpHạn chế lựa chọn và điểm nổi bậtTrình tự các bước không rõ ràngNhiều bước quản lý giao diện hơn thực hiện nhiệm vụLiên kết phức tạp với các ứng dụng khác và giữa các ứng dụngPhản hồi và khẳng định không phù hợpHệ thống đề phòng kém và kém thông minhCác thông điệp lỗi, trợ giúp, tài liệu không phù hợpCác thuộc tính của tính sử dụng3Mô hình sự chấp nhận được của hệ thống4SystemAcceptabilitySocialAcceptabilityPracticalAcceptabilityUsefulnessCostCompatibilityReliabilityUtilityUsabilityeffectivenessLearnabilityEfficiencyMemorabilityErrorsSatisfactionBảy nguyên tắc thiết kế của Donal (trình bày kỹ phần này)1. Sử dụng kiến thức trong đầu và trên thế giới2. Đơn giản cấu trúc nhiệm vụ3. Làm cho mọi điều dễ nhìn thấy4. Nhận quyền ánh xạ5. Khai thác sức mạnh của những khó khăn (tự nhiên và nhân tạo) –Thách thức thiết kế6. Thiết kế cho lỗi7. Tiêu chuẩn thiết kế lấy người dùng làm trung tâmĐịnh hướng thiết kế hướng đến người dùngSự rõ ràng (Visibility)Phản hồi (Feedback)Ràng buộc (Constraints)Ánh xạ (Mapping)Nhất quán (Consistency)Gợi ý (Affordance)Nguyên lý thiết kế hệ thống có tính sử dụng của Donal A Noran5DesignImplementEvaluateSự rõ ràng (Visibility):Những phần hệ thống liên quan phải được nhìn thấyLà nguyên tắc cơ bản nhất trong mô hình giao tiếp với người sử dụngUI cần có khả năng giúp người sử dụng nhận biết trạng thái hiện hành của hệ thống và cần biết phải thực hiện thao tác nào. Vd: giao diện MS WORD Nguyên lý thiết kế hệ thống có tính sử dụng5Sự phản hồi (Feedback)Những gì hệ thống đáp ứng khi người dùng thực hiện hành động.Khi những gì thay đổi, thì nó phải được nhìn thấy. vd: change the font face (ms word), remove file (explorer)Các loại phản hồi bao gồm : thị giác, âm thanh, xúc giácNguyên lý thiết kế hệ thống có tính sử dụng5Sự gợi ý (Suggest, Affordance)Tập các thao tác hay thủ tục thực hiện trên đối tượng.“Gợi ý quan sát” là những gì người sử dụng nghĩ rằng nó có thể được thực hiện trên đối tượngKhả năng tưởng tượng liên quan đến khả năng người sử dụng xác định cách sử dụng đối tượng chỉ bằng quan sát Các đối tượng vật lý : hình dáng bề ngoài gợi ý cách sử dụng đối tượng đó. Vd: cái ghế, phím nhấn, nút trượt, cánh cửa ra vào,Nguyên lý thiết kế hệ thống có tính sử dụng3Sự gợi ý (Suggest, Affordance)Sự gợi ý trong GUI: Con chạy gợi ý trỏ, hình dáng con chạy gợi ý một thao tác, Các button gợi ý nhấn để thực hiện nhiệm vụ Bàn phím gợi ý nhấn để thao tácLàm lõm các phần tử gợi ý disableMàn hình trắng và có con chạy nhấp nháy gợi ý người dùng nhập thông tinCác phần tử có nền xám gợi ý không thể thao tác đượcNhững đường nối gợi ý có thể dịch chuyển đượcNguyên lý thiết kế hệ thống có tính sử dụng5Sự gợi ý (Suggest, Affordance)Nguyên lý thiết kế hệ thống có tính sử dụng5Ánh xạ: Là quan hệ giữa các điều khiển và ảnh hưởng của nó trên hệ thống. Điều khiển là khái niệm liên quan đến các đối tượng đồ họa trong giao diện phần mềmVd: Xoay tay lái của ô tô theo chiều kim đồng hồ để điều khiển xe rẽ phải, xoay nút sử dụng âm thanh theo chiều kim đồng hồ sẽ tăng âm lượng và ngược lại, hoặc chọn số lớn cho âm thanh lớn, Nguyên lý thiết kế hệ thống có tính sử dụng5Ánh xạ: Nguyên lý thiết kế hệ thống có tính sử dụng5Tính nhất quán (Constraints)Nhất quán trong việc nhìn và cảm giác là yếu tố mấu chốt trong HCI tốtNguyên lý thiết kế hệ thống có tính sử dụng5Sự ràng buộc (Constraints)Mức độ khó sử dụng của một hệ thống liên quan trực tiếp đến tổng số khả năngSự ràng buộc là các giới hạn vật lý, ngữ nghĩa, văn hóa, logic trên tổng số khả năngNguyên lý thiết kế hệ thống có tính sử dụng5Quy ước: là sự ràng buộc về văn hóa. Nó tùy thuộc vào các nền văn hóa khác nhau. Vd:Công tắc đèn: Mỹ : bật xuống là tắt, Anh: bật lên là tắtVan nước : Mỹ : ngược chiều kim đồng hồ là mở, Anh: ngược chiều kim đồng hồ là đóngMàu đỏ : Mỹ: nguy hiểmAi cập : chết chocẤn độ : sốngTrung Quốc : hạnh phúcBàn phím máy tính :QWERTY (tiếng Anh)AZERTY (tiếng Pháp)Nguyên lý thiết kế hệ thống có tính sử dụng5Sự ràng buộc (Constraints)Nguyên lý thiết kế hệ thống có tính sử dụng5Sự ràng buộc (Constraints)Mức độ khó sử dụng của một hệ thống liên quan trực tiếp đến tổng số khả năngSự ràng buộc là các giới hạn vật lý, ngữ nghĩa, văn hóa, logic trên tổng số khả năngNguyên lý thiết kế hệ thống có tính sử dụng5Kỹ nghệ hệ thống có tính sử dụng6Giai đoạn thiết kế Người sử dụng là ai?Họ biết gì liên quan đến UI?Môi trường làm việc của họ ra sao?Mục tiêu của họ là gì?Họ cần thông tin nào?Họ thực hiện những bước nào để đạt được mục tiêu đề ra?Kỹ nghệ hệ thống có tính sử dụng46Giai đoạn cài đặt: Do không dự đoán được tính sử dụng của hệ thống nên chúng ta phải xây dựng bản mẫu (prototype). Kỹ nghệ hệ thống có tính sử dụng6Giai đoạn đánh giá : thực hiện thử nghiệm bản mẫu, sử dụng các phương pháp khác nhau như phương pháp Heuristic, phương pháp quan sát người dùng thao tác với UIĐiều quan trọng nhất của kỹ nghệ hệ thống có tính tiện dụng là thiết kế lặp. Nghĩa là chúng ta sẽ thực hiện vài lần để tái thiết kế giao diện, xây dựng bản mẫu mới và tiếp tục đánh giá, như vậy chúng ta sẽ có giao diện tiện dụng như mong đợi.Phân tích thiết kế phần mềmCreate by: quyetnv87@gmail.comddddddddddddddddddddddddThanks you !