TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM MÔN HỌC CÔNG NGHỆ PHẦN MỀM Chương Thiết kế giao diện người dùng

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM MÔN HỌC CÔNG NGHỆ PHẦN MỀM Chương Thiết kế giao diện người dùng CNPM/NN Thiết kế giao diện Nguyên tắc thiết kế giao diện Quy trình thiết kế giao diện Các mẫu thiết kế giao diện Giới thiệu Web CNPM/NN Nguyên tắc thiết kế giao diện Thiết kế giao diện cần phải Dễ học? Dễ dùng? Dễ hiểu? CNPM/NN Lỗi đặc trưng Thiếu toàn vẹn Phải nhớ q nhiều Khơng có hướng dẫn, trợ giúp Không nhạy với ngữ cảnh Đáp ứng nghèo nàn Không thân thiện, khó hiểu CNPM/NN Luật vàng    CNPM/NN Người dùng dễ điều khiển Người dùng phải nhớ Giao diện toàn vẹn Người dùng dễ điều khiển       Không buộc người dùng phải hoạt động không cần thiết hay không ưa thích Tương tác mềm dẽo (bàn phím, chuột, bút, ) Tương tác người dùng ngắt undo Tương tác theo luồng cho phép tùy biến tương tác (macro) Che dấu kỹ thuật bên Tương tác trực tiếp với đối tượng hình “to control the computer, not have the computer control”, “System reads their mind, it knows what the users want to before the user need to do” CNPM/NN Người dùng phải nhớ      Giảm nhu cầu nhớ ngắn, nên đưa gợi ý trực quan Tạo trường hợp mặc định có ý nghĩa Đường dẫn tắt (Shortcut) trực quan Thể hình ảnh biểu tượng theo giới thực Trình bày thơng tin theo diễn tiến động CNPM/NN Một số đặc điểm người sử dụng     CNPM/NN Khả nhớ tức thời người bị hạn chế: người nhớ khoảng thơng tin Nếu ta biểu diễn nhiều khiến người sử dụng không nhớ hết gây lỗi Người sử dụng gây lỗi, thơng báo khơng thích hợp làm tăng áp lực lên người sử dụng làm cho dễ xảy lỗi khác Người sử dụng có khả sở thích hồn tồn khác Giao tiếp đa phương tiện dễ thu hút người dùng Giao diện toàn vẹn   Cho phép người dùng sử dụng tác vụ theo ngữ cảnh Các giao diện ứng dụng phải toàn vẹn    Cùng cách thức nhập liệu Cùng cách thức chuyển từ cơng việc sang cơng việc khác Mơ hình tương tác trước người dùng ưa chuộng khơng nên thay đổi trừ có lý thuyết phục CNPM/NN CNPM/NN 10 Nhóm kỹ nghệ Web  Vai trị nhóm kỹ nghệ Web       CNPM/NN Content Developer /Providers Web Publisher Web Engineer Business domain experts Support Specialist Administrator (“Web Master”) 50 Hình chóp thiết kế WebE CNPM/NN 51 Điều hướng Linear structure Network structure CNPM/NN Grid structure Hierarchical structure 52 Kiến trúc MVC CNPM/NN 53 NSU (Navigation Semantic Units)  Navigation semantic unit  Ways of navigation (WoN) — Biểu diễn cách điều hướng tốt cho người dùng có tiền sử xác định để đạt mục tiêu hay mục tiêu mà họ quan tâm  Navigation nodes (NN) connected by Navigation links link12 NN2 NN1 NN4 link13 CNPM/NN link24 NN3 NSU link34 54 Tạo NSU CNPM/NN 55 Thiết kế trang web CNPM/NN 56 Form Preset Transfer Mode in form definition (HTML) Preset Values (HTML) Limited Length (HTML) URL with preset Values (HTML) Inter Value validation (script) Data Value, Type, & Format validation (script) CNPM/NN Preset No of Fields (HTML) 57 Tạo hiệu ứng CNPM/NN 58 Progressive Enhancement Graceful Degradation CNPM/NN 59 Mơ hình Quy trình kiểm thử Web CNPM/NN 60 Kiểm thử tải (Load Testing)    N : số người dùng đồng thời T : số giao dịch trực tuyến đơn vị thời gian D : lượng liệu xử lý server cho giao dịch  Tải CNPM/NN hệ thống P= NxTxD 61 Những điều       Tránh dùng nhiều text việc đọc hình thường chậm 25% so với đọc giấy Tránh phải dùng cuộn cuộn ngang Khi người dùng tìm kiếm thơng tin thao tác mà người dùng phải thực hiện? Việc nhập thông tin cho biểu mẫu phức tạp thực mà khơng làm người dùng bực mình, thực nào? Khả tìm kiếm quan trọng nào? Ứng dụng Web có thiết kế mà cho phép người có khả khác sử dụng? CNPM/NN 62 Một số nguyên tắc cho phát triển Web  Nguyên tắc 7±2   Nguyên tắc giây   Nguyên tắc mà người dùng không chờ đợi giây cho số phản ứng hệ thống Nguyên tắc Click   Nghiên cứu Geogre A.Mikker cho nhớ ngắn hạn người chứa khoảng 5-9 điều lúc Thực tế thường sử dụng luận nhằm hạn chế lựa chọn menu điều hướng Theo nguyên tắc này, người dùng không tiếp tục sử dụng trang web họ khơng tìm thấy thơng tin khơng thể truy cập tính trang web vịng cú click chuột Nguyên tắc 80/20 (Nguyên tắc Pareto)  CNPM/NN 20% khách hàng, người dùng, hoạt động, sản phẩm q trình đóng góp đến 80% lợi nhuận 63 Thực hành       Tìm hiểu nhu cầu thương mại mục tiêu sản phẩm Mô tả theo hướng kịch tương tác người dùng với ứng dụng Web Phát triển kế hoạch dự án đơn giản Cần mơ hình hóa cần xây dựng kiểm tra tính tồn vẹn chất lượng cho mơ hình Dùng cơng cụ kỹ thuật cho phép ta xây dựng hệ thống mà có nhiều thành phần sử dụng lại Khơng sớm tin cậy vào người dùng để sửa lỗi ứng dụng Web, phải test trước phát hành hệ thống CNPM/NN 64 .. .Thiết kế giao diện Nguyên tắc thiết kế giao diện Quy trình thiết kế giao diện Các mẫu thiết kế giao diện Giới thiệu Web CNPM/NN Nguyên tắc thiết kế giao diện Thiết kế giao diện cần phải Dễ học? ... CNPM/NN Người dùng dễ điều khiển Người dùng phải nhớ Giao diện toàn vẹn Người dùng dễ điều khiển       Không buộc người dùng phải hoạt động khơng cần thiết hay khơng ưa thích Tương tác mềm. .. hình Kỹ sư phần mềm tạo Mơ hình thiết kế (design model) Người phụ trách nhân tạo 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