TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG MÔN HỌC THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG THÔNG TIN CHUNG (General information)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƢỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ĐỀ CƢƠNG MÔN HỌC IE106-THIẾT KẾ GIAO DIỆN NGƢỜI DÙNG THÔNG TIN CHUNG (General information) Tên môn học (tiếng Việt): Thiết kế Giao diện Người dùng Tên môn học (tiếng Anh): User Interface Design Mã môn học: IE106 Thuộc khối kiến thức: Đại cương ; Cơ sở nhóm ngành ; Cơ sở ngành ; Chuyên ngành ; Tốt nghiệp  Khoa/Bộ môn phụ trách: Khoa học Kỹ thuật Thông tin Giảng viên phụ trách: ThS Nguyễn Hồng Hải, ThS Tạ Thu Thủy Email: thuthuyt@uit.edu.vn Giảng viên giảng dạy: Nguyễn Hồng Hải, Tạ Thu Thủy Số tín chỉ: Lý thuyết: 45 tiết Thực hành: 30 tiết Tự học: 80 tiết Tính chất mơn Bắt buộc sinh viên ngành KH & KTTT Môn học tiên quyết: Không Môn học trước: Nhập môn lập trình MƠ TẢ MƠN HỌC (Course description) Mơn học cung cấp kiến thức như: nguyên tắc quan trọng thiết kế giao diện người dùng, trình thiết kế giao diện, đánh giá thiết kế giao diện; bên cạnh việc giới thiệu số dạng kỹ thuật thiết kế liên quan đến thực đơn, form fill-in, hộp hội thoại, tài liệu người dùng, giao diện tìm kiếm, mối liên hệ giao diện người dùng với trực quan thông tin MỤC TIÊU MƠN HỌC (Course Goals) Sau hồn thành mơn học này, sinh viên có thể: Bảng Mục tiêu môn học Chuẩn đầu CTĐT Trả lời khái niệm giao diện người dùng 1.2.8 Liệt kê trình bày quy trình kỹ thuật thiết kế giao diện 4.3.1, 4.4.2 Trình bày phân tích được, đánh giá giao diện sản phẩm 2.2.3 Thiết kế giao diện người dùng cho sản phẩm phần mềm theo yêu cầu 4.4.3, 4.5.1 Áp dụng khả đọc hiểu tài liệu tiếng Anh thiết kế giao diện người dùng 3.3.2 Vận hành hoạt động nhóm phát triển kỹ giao tiếp, thuyết trình 3.1.1, 3.1.2 CHUẨN ĐẦU RA MÔN HỌC (Course learning outcomes) Bảng CĐRMH Mô tả CĐRMH (mục tiêu cụ thể) Mức độ giảng dạy G1 (1.2.8) Trả lời khái niệm giao TU diện người dùng G2 (4.3.1, 4.4.2) Liệt kê trình bày quy trình kỹ ITU thuật thiết kế giao diện G3 (2.2.3) Trình bày phân tích được, đánh giá TU giao diện sản phẩm G4 (4.4.3, 4.5.1) Thiết kế giao diện người dùng cho TU sản phẩm phần mềm theo yêu cầu G5 (3.3.2) Áp dụng khả đọc hiểu tài liệu ITU tiếng Anh thiết kế giao diện người dùng G6 (3.1.1, 3.1.2) Vận hành hoạt động nhóm phát triển TU kỹ giao tiếp, thuyết trình NỘI DUNG MƠN HỌC, KẾ HOẠCH GIẢNG DẠY (Course content, Lesson plan) a Lý thuyết Bảng Nội dung [2] Buổi học CĐRMH [3] (3Tiết) [1] Buổi Giới thiệu môn học: Tại G1, G3, cần học môn Thiết kế giao G4, G5 diện người dùng & Phương pháp học, đánh giá,… Chƣơng 1: Các nguyên lý thiết kế giao diện & tình cụ thể Buổi Buổi Buổi Buổi Buổi Usability Learnability Hoạt động dạy học [4] Dạy: Lý thuyết, cho ví A1, A3, A4 dụ minh họa Phân chia nhóm SV Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi Dạy: Lý thuyết, cho ví dụ minh họa Phân chia nhóm SV Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi Learnability (tt) G1, G3, Dạy: Lý thuyết, cho ví G4, G5 dụ minh họa Phân chia nhóm SV Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi Efficiency G1, G3, Dạy: Lý thuyết, cho ví G4, G5 dụ minh họa Phân chia Safety nhóm SV Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi Safety (tt) G1, G3, Dạy: Lý thuyết, cho ví G4, G5 dụ minh họa Phân chia Nguyên tắc duyệt web nhóm SV user Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi Chƣơng 2: Quy trình thiết G2, G5, G6 Dạy: Lý thuyết, cho ví dụ minh họa Giao dề kế giao diện Phương pháp thiết kế lấy tài người dùng làm trung tâm Học lớp: Tiếp thu, G1, G3, G4, G5 Thành phần đánh giá [5] A1, A3, A4 A1, A3, A4 A1, A3, A4 A1, A3, A4 A1, A3, A4 thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi (User Center Design) Prototyping Buổi Case Study Video thực tế trình thiết kế Case Study Video thực tế trình thiết kế (tt) G2, G5, G6 Dạy: Lý thuyết, cho ví dụ minh họa Giao dề tài Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi A1, A3, A4 Chƣơng 3: Kỹ thuật thiết G3, G4, G5 Dạy: Lý thuyết, cho ví dụ minh họa Giao dề kế thành phần tài giao diện Học lớp: Tiếp thu, Thiết kế Navigation cho web thảo luận nhóm - Sitemap, Breadcrumbs, Học nhà: Làm Menu, Search box, Page tập trả lời câu hỏi name & Tabs A1, A3, A4 Vai trị làm việc nhóm, phối hợp Role Project, cách UX Designer giao tiếp hiệu với nhóm Buổi Thiết kế Button, Selection Box, Hyperlink, Search box, & phân biệt tình sử dụng Buổi Thiết kế web cho mục đích “lướt” web thay “đọc” web Thể nội dung Text giao diện G3, G4, G5 Dạy: Lý thuyết, cho ví dụ minh họa Giao dề tài Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi A1, A3, A4 G3, G4, G5 Dạy: Lý thuyết, cho ví dụ minh họa Giao dề tài Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi G2, G5, G6 Dạy: Lý thuyết, cho ví dụ minh họa Thảo A1, A3, A4 Color Buổi 10 Color (tt) Thiết kế Home screen Buổi 11 Thiết kế Home screen (tt) A1, A3, A4 Sự khác thiết kế Web, Win-form, Mobile App Buổi 12 Chƣơng 4: Đánh giá giao G3, G5 diện ngƣời dùng Tổng quan Heuristic Evaluation Kỹ thuật Nielsen Heuristics Buổi 13 Kỹ thuật khác: Norman, Tog’s First & Shneiderman’s Quy trình đánh giá giao diện Chƣơng 5: Ứng dụng Dạy: Lý thuyết, cho ví dụ minh họa Trao đổi tập nhà Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi G2, G5 Dạy: góp ý chỉnh sửa A1, A3, A4 thuyết trình nhóm Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi Dạy: góp ý chỉnh sửa A1, A3, A4 thuyết trình nhóm Học lớp: Tiếp thu, thảo luận nhóm, trả lời câu hỏi Học nhà: Ôn tập SV thuyết trình cơng cụ Prototype cho trước Buổi 15 SV thuyết trình cơng cụ Prototype cho trước A1, A3, A4 G3, G5 Tập đánh giá tổng quát số giao diện ứng dụng Mobile App Website thực tế Buổi 14 luận đề tài giao Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi Dạy: Lý thuyết, cho ví dụ minh họa Trao đổi tập nhà Học lớp: Tiếp thu, thảo luận nhóm Học nhà: Làm tập trả lời câu hỏi G2, G5 Ôn tập b Thực hành Bảng Buổi Nội dung CĐRMH học (5Tiết) Buổi Bài thực hành 1: Phổ biến đồ G2, G4, án, phân tích yêu cầu khách G5, G6 hàng & nghiên cứu phần mềm tương tự & tổ chức A1, A3, A4 Hoạt động dạy học Thành phần đánh giá Dạy: Hướng dẫn thực hành A3 Học lớp: Tiếp thu, nhóm đồ án thảo luận nhóm & làm đồ án Học nhà: Làm đồ án nộp báo cáo vào trước buổi thực hành Buổi Bài thực hành 2: Thiết kế G4, G5, G6 Dạy: Hướng dẫn thực Navigation, Home screen hành Thiết kế Sketch cho hình cụ thể Evolus Pencil (p1) A3 Học lớp: Tiếp thu, thảo luận nhóm & làm đồ án Học nhà: Làm đồ án nộp báo cáo vào trước buổi thực hành Buổi Bài thực hành 3: Thiết kế Sketch cho hình cụ thể Evolus Pencil (p2) G4, G5, G6 Dạy: Hướng dẫn thực hành A3 Học lớp: Tiếp thu, thảo luận nhóm & làm đồ án Học nhà: Làm đồ án nộp báo cáo vào trước buổi thực hành Buổi Bài thực hành 4: Thiết kế G4, G5, G6 Dạy: Hướng dẫn thực Prototype cho hình cụ hành thể Microsoft Visual Studio 2010 Học lớp: Tiếp thu, thảo luận nhóm & làm đồ án A3 Học nhà: Làm đồ án nộp báo cáo vào trước buổi thực hành Buổi Bài thực hành 5: Hoàn thiện hình thiết kế, tương tác dạng hình ảnh, chuyển đổi tốt G3, G6 Dạy: Hướng dẫn thực hành Học lớp: Tiếp thu, thảo luận nhóm & làm đồ án A3 Học nhà: Làm đồ án nộp báo cáo vào trước buổi thực hành Buổi Các nhóm lên thuyết trình & chấm điểm Dạy: Chấm điểm nhận xét đồ án G3, G6 A3 Học lớp: Tiếp thu, thảo luận nhóm ĐÁNH GIÁ MƠN HỌC (Course assessment) Bảng Thành phần đánh giá [1] CĐRMH (Gx) Tỷ lệ (%) [2] [3] A1 Quá trình (Phát biểu, G1, G3, G5, G6 kiểm tra lớp, chuyên cần) 20% A1.1 Seminar 10% G1, G3, G6 A1.2 Bài tập, phát biểu, G1, G5 chuyên cần 10% A2 Giữa kỳ A3 Thực hành G3, G4, G6 30% A4 Cuối kỳ G1, G2, G3 50% Kiểm tra đánh giá kết học tập STT Thời điểm kiểm tra Quá trình (seminar): buổi  10 Hình thức KTĐG Công cụ KTĐG Thực lớp Thuyết trình nhóm Bài tập, phát biểu, chun cần (15 buổi) Thực lớp Bài tập, phát biểu, chuyên cần Thực hành Thực lớp nhà Bài tập hàng tuần, đồ án thực hành Trọng số 10% 10% 30% Thang điểm Tiêu chí đánh giá 10 Nội dung, bố cục trình bày, slides thuyết trình, kỹ trình bày 10 Trả lời câu hỏi, học tập tích cực chuyên cần 10 Làm tập đầy đủ, nội dung trình bày rõ ràng, Cuối kỳ Tập trung nhóm đúng, đủ yêu cầu Kiểm tra viết Nội dung lý thuyết, phân tích nhận xét, thiết kế giao diện người dùng 50% 10 a Rubric thành phần đánh giá A1.1 Tiêu chí đánh giá Dƣới trung bình Trung bình Khá Giỏi Xuất sắc Điểm Bố cục trình bày báo cáo Sơ sài, không rõ ràng Đầy đủ phần trình bày theo yêu cầu Bố cục trình bày rõ ràng Bố cục trình bày khoa học Bố cục trình bày khoa học sáng tạo Có hình ảnh minh họa Nội dung trình bày xúc tích kết Nội dung hợp với trình bày hình ảnh xúc tích kết minh họa hợp với dễ hiểu, mở hình ảnh rộng, so minh họa sánh thêm dễ hiểu với ứng dụng tương tự Trình bày rõ ràng nắm cấu trúc slides Tự tin, trình bày hút, tương tác với người nghe trả lời câu hỏi thắc mắc Slides trình bày Kỹ trình bày Sơ sài, nội dung khơng rõ ràng Nói nhỏ, khơng hiểu rõ nội dung trình bày Đầy đủ nội dung theo yêu cầu Nói nhỏ hiểu nội dung trình bày Tự tin trình bày tốt b Rubric thành phần đánh giá A1.2 Tiêu chí đánh giá Dƣới trung bình Trung bình Chuyên cần, phát biểu, tập Không học đầy đủ 1/2 số buổi Đi học Đi học 2/3 Đi học 1/2 số buổi số buổi tích đầy đủ số khơng cực, buổi, tích tích cực học đầy đủ số cực Khá Giỏi Xuất sắc Điểm Đi học đầy đủ số buổi, tích cực phát biểu, 10 lớp học buổi khơng tích cực lớp học lớp học trả lời câu hỏi lớp học c Rubric thành phần đánh giá A3 Tiêu chí đánh giá Dƣới trung bình Trung bình Khá Giỏi Xuất sắc Điểm Chuyên cần Khơng học Đi học buổi, tích cực Đi học buổi, tích cực Đi học buổi, tích cực Đi học buổi, tích cực 2.5 Làm tập thực hành hàng tuần Làm tập Làm tập Làm tập Làm tập Làm tập 2.5 Sơ sài, nội dung không rõ ràng Đáp ứng 1/2 nội dung theo yêu cầu Đáp ứng đầy đủ nội dung yêu cầu Đáp ứng đầy đủ nội dung yêu cầu, tương tác tốt Tương tác tốt, sáng tạo Khá Giỏi Xuất sắc Điểm Trả lời 1/2 Trả lời tương đối hết theo ý hiểu thân Có thêm ví dụ minh họa, trình bày hiểu biết thêm Trình bày 2/3 ưu nhược điểm Trình bày ưu nhược điểm Trình bày hoàn thiện ưu nhược điểm, đề xuất giải pháp khắc phục Đề xuất đến hình cần thiết kế Đề xuất hình theo yêu cầu Đề xuất thêm số giải pháp tối ưu, sáng tạo Báo cáo đồ án thực hành d Rubric thành phần đánh giá A4 Tiêu chí đánh giá Các câu hỏi lý thuyết thiết kế giao diện người dùng Phân tích, đánh giá ưu nhược điểm giao diện người dùng cho sẵn Đề xuất phương án, phác thảo giao diện theo u cầu Dƣới trung bình Khơng trả lời Khơng nêu ưu nhược điểm Khơng đề xuất Trung bình Trả lời 1/2 Trình bày 1/2 ưu nhược điểm Đề xuất đến hình QUY ĐỊNH CỦA MÔN HỌC (Course requirements and expectations) - Giảng viên cung cấp nội dung giảng lớp, sinh viên chủ động học tập trao đổi với với giảng viên - Giảng viên cung cấp chủ đề cho sinh viên tìm hiểu nhà theo nhóm, sinh viên trình bày lớp thảo luận - Sinh viên cần chủ động tự tìm hiểu thêm từ nguồn tài liệu khác, Web - Môn học cung cấp kiến thức tập trung vào “Kỹ thuật thiết kế giao diện & Quy trình thiết kế giao diện”, khơng tập trung vào “Công cụ (tool) thiết kế giao diện” Ngồi cơng cụ chuẩn giới thiệu phần #9, Sinh viên cần chủ động nghiên cứu sử dụng công cụ khác TÀI LIỆU HỌC TẬP, THAM KHẢO Giáo trình Nguyễn Thịnh (2015) Đồ họa ứng dụng Đại học Quốc gia TP HCM Yvonne Rogers, Helen Sharp, Jenny Preece (2007) Interaction Design: Beyond Human - Computer Interaction (2nd Edition) John Wiley & Sons Ben Shneiderman, Catherine Plaisant (2010) Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition) Addison Wesley Tài liệu tham khảo Prof Rob Miller (2011) User Interface Design and Implementation Massachusetts Institute of Technology, Department of Electrical Engineering and Computer Science, Spring Julie Steele, Noah Illinsky (Eds) (2010) Beautiful Visualization: Looking at Data Through the Eyes of Experts O’Reilly PHẦN MỀM HAY CÔNG CỤ HỖ TRỢ THỰC HÀNH Microsoft Visual Studio 2010 Evolus Pencil 2012 Tp.HCM, ngày 25 tháng 04 năm 2018 Trƣởng khoa/ môn Giảng viên (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) ThS Tạ Thu Thủy 10 11 ... tài liệu khác, Web - Môn học cung cấp kiến thức tập trung vào “Kỹ thuật thiết kế giao diện & Quy trình thiết kế giao diện? ??, không tập trung vào ? ?Công cụ (tool) thiết kế giao diện? ?? Ngồi cơng cụ... chí đánh giá Các câu hỏi lý thuyết thiết kế giao diện người dùng Phân tích, đánh giá ưu nhược điểm giao diện người dùng cho sẵn Đề xuất phương án, phác thảo giao diện theo u cầu Dƣới trung bình... Buổi Giới thiệu môn học: Tại G1, G3, cần học môn Thiết kế giao G4, G5 diện người dùng & Phương pháp học, đánh giá,… Chƣơng 1: Các nguyên lý thiết kế giao diện & tình cụ thể Buổi Buổi Buổi Buổi