An ninh bảo mật - Chương I: Thiết kế lấy người dùng làm trung tâm

được chọn nhiều nhất Người dùng có khẩu vị riêng 8. So sánh giá cả Hương vị của món ăn vẫn quan trọng hơn giá cả Ví dụ: online pizza ordering • Các kịch bản sau được tạo ra trên cơ sở phân loại người dùng theo tần suất mua hàng, thời gian giao hàng và phương pháp đặt mua. Trong hệ thống mới, có thể đặt mua trực tiếp hoặc đặt mua qua mạng 46 Kịch bản 1: người mua hàng thường xuyên, đặt mua tại nhà, cần giao hàng ngay 47 Kịch bản 2: đặt mua từ văn phòng, thời gian giao hàng theo hẹn trước, lần đầu đặt mua 48 Kịch bản 3: Đặt mua tại chỗ, giao hàng sau khi đặt hàng 2h, lần đầu đặt mua 49 Online Pizza Ordering Example 50 CHƯƠNG II. CÁC KỸ THUẬT THIẾT KẾ GIAO TIẾP NGƯỜI DÙNG – MÁY TÍNH 51 Tổng kết bài học • Tổng quan về giao diện tương tác người dùng máy tính, các nguyên lý thiết kế • Hướng tiếp cận thiết kế tương tác lấy người dùng làm trung tâm • Phân tích một ví dụ về UCD • Buổi sau: THIẾT KẾ GIAO DiỆN NGƯỜI DÙNG 52 CHƯƠNG II. THIẾT KẾ HỢP TÁC 53 IV. Thiết kế hợp tác • Thiết kế theo ngữ cảnh công việc, xem người sử dụng không chỉ như là một đối tượng thí nghiệm mà còn như một thành viên của nhóm thiết kế. • Nhằm mục đích cải tiến các yêu cầu hệ thống thông qua một quy trình thiết kế mang tính lặp trong đó người sử dụng tham gia một cách tích cực vào quy trình thiết kế. 54 Đặc điểm của thiết kế hợp tác • Cải tiến môi trường làm việc và nhiệm vụ thông qua việc giới thiệu thiết kế.  Làm cho thiết kế và đánh giá mang tính hướng ngữ cảnh hoặc công việc hơn là hướng hệ thống. • Đặc trưng bởi sự hợp tác: người sử dụng tham gia vào nhóm thiết kế và có thể đóng góp ở mọi giai đoạn của quá trình thiết kế. • Cách tiếp cận của thiết kế hợp tác mang tính lặp: thiết kế có thể được đánh giá và chỉnh sửa lại ở mỗi giai đoạn. 55 Quy trình thiết kế hợp tác • Sử dụng một số phương pháp để giúp cho việc trao đổi thông tin giữa người sử dụng và người thiết kế – Brainstorming (Phương pháp trí tuệ nhóm): • Mọi thành viên tham gia thiết kế đều đưa ra ý tưởng • Mọi thông tin đều được ghi lại trung thực, không chỉnh sửa • Chọn lọc ý tưởng bằng nhiều kỹ thuật khác nhau. – Storyboarding (Phương pháp xây dựng bảng tình tiết) • Người dùng là tất cả những người có quyền lợi/nghĩa vụ liên quan • Sử dụng họ để mô tả các hoạt động của người dùng và đánh giá các tác động của thiết kế 56 Quy trình thiết kế hợp tác • Sử dụng một số phương pháp để giúp cho việc trao đổi thông tin giữa người sử dụng và người thiết kế – Workshops (hội thảo): • Chất vấn lẫn nhau nhằm mục đích cho các bên tham gia có thể hiểu hơn về ngữ cảnh thiết kế từ quan điểm của mỗi thành viên. • Tạo ra một nền tảng chung giữa người sử dụng và người thiết kế và thiết lập cơ sở cho thiết kế. – Pencil and paper exercises (Xây dựng phác thảo): • Phác thảo các nhiệm vụ điển hình của hệ thống: chỉ rõ sự khác nhau giữa các yêu cầu của người sử dụng và thiết kế thực tế. • Cung cấp một kĩ thuật đơn giản và ít tốn kém cho việc đánh giá các mô hình ban đầu. 57 CHƯƠNG III. THIẾT KẾ MÀN HÌNH I. Quy trình thiết kế màn hình II. Nguyên tắc thiết kế màn hình tốt 58 I. Quy trình thiết kế màn hình • Step 1: Know Your User or Client • Step 2: Understand the Business Function • Step 3: Understand the Principles of Good Screen Design • Step 4: Develop System Menus and Navigation Schemes • Step 5: Select the Proper Kinds of Windows • Step 6: Select the Proper Device-Based Controls • Step 7: Choose the Proper Screen-Based Controls • Step 8: Write Clear Text and Messages • Step 9: Provide Effective Feedback and Guidance and Assistance • Step 10: Provide Effective Internationalization and Accessibility • Step 11: Create Meaningful Graphics, Icons and Images • Step 12: Choose the Proper Colors • Step 13: Organize and Layout Windows and Pages • Step 14: Test, Test, and Retest 59 II. Nguyên tắc thiết kế màn hình tốt • Màn hình được thiết kế tốt nếu: – Phản ánh được năng lực, nhu cầu và nhiệm vụ của người dùng – Phù hợp với các ràng buộc vật lý của thiết bị hiện thị. – Sử dụng hiệu quả khả năng của các phần mềm điều khiển – Đạt mục tiêu nghiệp vụ của hệ thống. Nguyên tắc thiết kế màn hình tốt ??? Số lượng tin cần giới thiệu trên màn hình: Cách tổ chức màn hình và phân tách các phần thông tin Ngôn ngữ Sự nhất quán giữa các màn hình 60 1. Màn hình và phần tử thông tin • Các phần tử thông tin trên màn hình đều phải có ý nghĩa đối với người dùng: trợ giúp thực hiện nhiệm vụ – Điều khiển – Văn bản – Tổ chức màn hình – Nhấn mạnh – Màu sắc – Đồ họa – Hoạt họa – Thông điệp – Thông tin phản hồi 61 2. Nguyên tắc sắp xếp thứ tự thông tin trên màn hình • Phân chia thông tin thành các phần logic, có ý nghĩa và dễ cảm nhận • Tổ chức thông tin theo các cấp độ quan hệ của chúng. • Sắp xếp thông tin theo kỳ vọng và nhu cầu người dùng • Tạo các nhóm thông tin thỏa mãn các thứ tự sắp xếp phổ biến: – Quy ước – Trình tự sử dụng – Tần suất sử dụng – Chức năng – Mức độ quan trọng – Mức độ tổng quát. • Các thông tin cần so sánh phải xuất hiện cùng lúc • Chỉ các thông tin liên quan đến nhiệm vụ hay nhu cầu của người dùng mới xuât hiện trên màn hình 62 3. Luồng duyệt tin trên màn hình • Mắt người thường dịch chuyển từ trái sang phải, từ trên xuống dưới và theo chiều kim đồng hồ Thông tin được tìm thấy nhanh nhất Thông tin được tìm thấy chậm nhất 3. Luồng duyệt tin trên màn hình • Tổ chức màn hình sao cho : – Mắt người dùng duyệt qua các thông tin một các nhịp nhàng, có định hướng – Tôn trọng cách dịch chuyển tự nhiên của mắt – Tối thiểu hóa khoảng cách dịch chuyển giữa con trỏ và mắt • Đặt các phần tử thông tin hay điều khiển quan trọng nhất, hay xuất hiện nhất vào góc trên bên trái màn hình • Duy trỉ luông thông tin từ trái sang phải, từ trên xuống dưới • Hỗ trợ duyệt tin : – Gióng hàng các phần từ – Nhóm các phần tử – Sử dụng khung viền • Tập trung và nhấn mạnh vào các phần tử: quan trọng, thứ cấp, ngoại vi • Dùng phím tab để dịch chuyển theo thứ tự logic của các thông tin hiện thị • Đặt các nút lệnh vào cuối dãy dịch chuyển của phím Tab • Khi một nhóm các thông tin bị hiện thị trên vài màn hình khác nhau, cần cung cấp điểm ngắt thông tin rõ ràng trong luồng thông tin 64 Mắt người thường dịch chuyển từ trái sang phải, từ trên xuống dưới và theo chiều kim đồng hồ Thông tin được tìm thấy nhanh nhất Thông tin được tìm thấy chậm nhất Cân bằng • Tạo sự cân bằng màn hình bằng cách xây dựng lưới cho các thành phần thông tin hiện thị trên màn hình: cùng độ dài, cùng độ rộng 65 Đối xứng 66 Đều đặn 67 Nguyên tắc thiết kế luồng duyệt tin trên màn hình: Dễ dự đoán • Tạo khả năng dự đoán theo các thứ tự đã thỏa thuận trước đó 68 Tuần tự • Sắp xếp các yếu tố hướng dẫn mắt nhìn các thông tin trên màn hình một cách hợp lý, rõ ràng, nhịp nhàng và hiệu quả. 69 Kinh tế • Chỉ sử dụng các kỹ thuật hiện thị (như màu sắc, phông chữ..) đủ để làm nổi bật thông điệp gửi đến người dùng, không hơn. 70 Thống nhất và phân mảnh • Thống nhất: Tất cả các phần tử thông tin hiện thị trên màn hình đều là các mảnh ghép ăn khớp với nhau của một bức tranh toàn cảnh duy nhất. • Phân mảnh: mỗi phần tử thông tin đều giữ lại đặc tính của riêng mình  Sử dụng kích thước, hình dạng, màu sắc tương tự cho các thông tin liên quan.  Phân biệt không gian giữa các nhóm tin (khoảng cách, biên giới) 71 Tỉ lệ • Tạo các cửa sổ và các nhóm tin với tỉ lệ cân đối, đảm bảo yếu tố thẩm mỹ 72 Square root of two (1:1.414) Golden rectangle (1:1.618) Square (1:1) Square root of two (1:1.414) Golden rectangle (1:1.618) Square root of three (1:1.732) Double square (1:2) Đơn giản • Tối ưu số phần tử thông tin trên màn hình, để đảm bảo nội dung từng phần tử đều được hiện thị rõ ràng • Giảm thiểu số điểm gióng hàng ngang – dọc 73 Nhóm thông tin • Các thông tin liên quan được nhóm với nhau, có tiêu đề rõ ràng, có khoảng cách và đường viền hoặc màu nền hợp lý. 74 3. Một số ví dụ về màn hình 75 Một số ví dụ về màn hình 76 Một số ví dụ về màn hình 77 Một số ví dụ về màn hình 78 Một số ví dụ về màn hình 79 Một số ví dụ về màn hình 80 Một số ví dụ về màn hình 81 Một số ví dụ về màn hình 82 4. Thiết kế màn hình cho Online Pizza Ordering System: đăng nhập, đăng ký người dùng 83 Thiết kế màn hình cho Online Pizza Ordering System: chọn món chính 84 Thiết kế màn hình cho Online Pizza Ordering System: chọn món phụ 85 Thiết kế màn hình cho Online Pizza Ordering System: xác nhận đơn hàng 86 Liệt kê các tình huống tương tác thông qua giao diện của Online Pizza Ordering System 87 88