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

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 CNPM Thiết kế giao diện 7.1 Nguyên tắc thiết kế giao diện 7.2 Quy trình thiết kế giao diện 7.3 Các yêu cầu thiết kế 7.4 Giao diện Web CNPM 7.1 Nguyên tắc thiết kế giao diện Thiết kế giao diện Dễ học? Dễ dùng? Dễ hiểu? CNPM Thiết kế giao diện Lỗi thiết kế đặc trưng Thiếu tồ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 Luật vàng „ „ „ CNPM Người dùng dễ điều khiển Người dùng phải nhớ Giao diện tồ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 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 Che dấu kỹ thuật bên Tương tác trực tiếp với đối tượng hình CNPM Người dùng phải nhớ „ „ „ „ „ Giảm nhu cầu nhớ ngắn Tạo trường hợp mặc định có ý nghĩa 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 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 tồn vẹn 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 Ví dụ CNPM CNPM 10 Kiến trúc nội dung Linear structure Network structure CNPM Grid structure Hierarchical structure 59 Kiến trúc MVC (MVC Architecture) „ Model chứa tất nội dung đặc trưng ứng dụng logic xử lý bao gồm „ „ „ „ View chứa tất chức đặc trưng giao diện cho phép „ „ „ „ Tất đối tượng nội dung Truy cập tới nguồn thông tin hay liệu Tất chức xử lý đặc trưng ứng dụng Biểu diễn nội dung logic xử lý Truy cập tới nguồn thông tin hay liệu Tất chức xử lý yêu cầu người dùng Controller quản lý truy cập tới Model View kết hợp với luồng liệu chúng CNPM 60 Kiến trúc MVC cont roller user request or dat a browser manages user request s select s model behavior select s view response behavior request ( st at e change) view select ion model encapsulat es funct ionalit y encapsulat es cont ent object s incorporat es all webApp st at es client dat a from model HTML dat a view updat e request ext ernal dat a prepares dat a from model request updat es from model present s view select ed by cont roller server CNPM 61 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 NN1 link24 NN4 link13 CNPM NN2 NN3 NSU link34 62 Tạo NSU request alt ernat ive recommend component (s) select Room Product Component ret urn t o Room view BillOf Mat erials show Product Component Room show descript ion purchase Product Component BillOf Mat erials CompDescript ion purchase Product Component Market ingDescript ion phot ograph t echDescript ion video schemat ic CNPM 63 Thiết kế đối tượng Menu bar major functions List of user objectives graphic, logo, and company name objective #1 objective #2 objective #3 objective #4 objective #5 graphic objective #n Home page text copy Navigation menu CNPM 64 Qui trình kiểm thử Cont ent Test ing Int erf ace Test ing user Navigat ion Test ing Interface design Aesthetic design Content design Component Test ing Navigation design Architecture design Component design technology CNPM Conf igurat ion Test ing Perf ormance Test ing Securit y Test ing 65 Kiểm thử giao diện người dùng „ „ „ „ „ Luật thiết kế, mỹ thuật nội dung liên quan sẵn dùng khơng có lỗi Những kỹ thuật giao diện riêng kiểm thử tương tự kiểm thử đơn vị Mỗi kỹ thuật giao diện kiểm thử ngữ cảnh use-case hay NSU ứng với loại người dùng đặc trưng Giao diện đầy đủ kiểm dựa vào use-case chọn NSU để tìm lỗi theo ngữ nghĩa giao diện Giao diện kiểm nhiều mơi trường chẳng hạn trình duyệt CNPM 66 Kỹ thuật kiểm thử giao diện… „ „ „ „ „ „ „ „ „ „ Links Forms Client-side scripting Dynamic HTML— (scripting or cascading style sheets (CSS)) Client-side pop-up windows CGI scripts (CGI - common gateway interface) Streaming content — rather than waiting for a request from the client-side, content objects are downloaded automatically from the server side Cookies Application specific interface mechanisms (a shopping cart, credit card processing, or a shipping cost calculator) CNPM 67 Kiểm thử tải (Load Testing) „ „ „ N, the number of concurrent users T, the number of on-line transactions per unit of time D, the data load processed by the server per transaction „P CNPM = NxTxD 68 Giao diện Web „ „ „ „ „ „ „ Lỗi máy chủ Web làm cho người dùng quay lưng 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 gây thất vọng với thông báo “đang xây dựng” Tránh phải dùng cuộn cuộn ngang Bộ điều hướng (navigation) phải thiết kế thống sẵn dùng, tránh dùng chức trình duyệt Vấn đề mỹ thuật không lấn át chức Sự điều hướng phải rõ ràng với người dùng CNPM 69 Những câu hỏi bản… „ „ „ „ Trang chủ Web site quan trọng nào? Những bố trí (layout) trang mà ảnh hưởng (menu hay bên phải, bên trái…) chúng có phụ thuộc nhiều vào loại ứng dụng Web phát triển? Những phương tiện (media) chọn lựa tác động tới người dùng nhiều nhất? 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? Susan Weinshenk CNPM 70 …Những câu hỏi „ „ „ „ Với ứng dụng web phức tạp, hỗ trợ việc điều hướng (navigation) quan trọng nào? Những liệu nhập biểu mẫu (forms input) phức tạp tạo mà khơng làm người dùng phải bực mình, thực nào? Những 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ó khiếm khuyết? Susan Weinshenk CNPM 71 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 người dùng Phát triển kế hoạch dự án dù ban đầu đơn giản Cần mơ hình hóa mà ta xây dựng Kiểm tra mơ hình cho tính tồn vẹn chất lượng Dùng công cụ kỹ thuật cho phép ta xây dựng hệ thống với nhiều thành phần sử dụng lại tốt Không sớm tin cậy vào người dùng để debug ứng dụng Web, thiết kế test đầy đủ thực chúng trước phát hành hệ thống CNPM 72 Patterns Repositories „ Hypermedia Design Patterns Repository „ „ InteractionPatterns by TomErickson „ „ http://www.rdrop com/~half/Creations/Writings/Web.patterns/index.html http://www.rdrop.com/~half/Creations/Writings/Web.patterns/index.html Indexing Pattern Language „ CNPM http://www.mit jtidwell/interaction_patterns.html /interaction_patterns.html http://www.mit edu/~ edu/~jtidwell Patterns for Personal Web Sites „ „ http://www.anamorph com/docs/patterns/default.html http://www.anamorph.com/docs/patterns/default.html Common Ground - A Pattern Language for HCI Design „ „ http://www8.org/w8http://www8.org/w8-papers/5bpapers/5b-hypertexthypertext-media/improving/improving.html An HTML 2.0 Pattern Language „ „ http://www.welie com/patterns/ http://www.welie.com/patterns/ Improving Web Information Systems with Navigational Patterns „ „ http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns html http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns.html Web Design Patterns by Martijn vanWelie „ „ http://www.designpattern http://www.designpattern lu lu.unisi unisi.ch/ ch/ http://www.cs brown.edu edu/~ /~rms rms//InformationStructures/Indexing/Overview.html http://www.cs.brown InformationStructures/Indexing/Overview.html 73 .. .Thiết kế giao diện 7.1 Nguyên tắc thiết kế giao diện 7.2 Quy trình thiết kế giao diện 7.3 Các yêu cầu thiết kế 7.4 Giao diện Web CNPM 7.1 Nguyên tắc thiết kế giao diện Thiết kế giao diện Dễ học? ... Interface design is complete CNPM 27 7.3 Các mẫu thiết kế „ „ Các mẫu giao diện Thiết kế help tài liệu người dùng CNPM 28 Các mẫu giao diện „ Giao diện bảng điều khiển Busy Grid Title JSD example... hình hóa hành vi Thể hình ảnh trạng thái giao tiếp Chỉ cách thức người dùng hiểu trạng thái hệ thống từ thông tin qua giao diện CNPM 24 Mẫu thiết kế giao diện „ „ „ „ „ „ „ „ „ CNPM The complete