THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

1

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

<b>TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN </b>

<b>ĐỀ CƯƠNG MÔN HỌC </b>

<b>IE106-THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 1. THƠNG TIN CHUNG (General information) </b>

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

Thuộc khối kiến thức: Đại cương o; Cơ sở nhóm ngnh o;

C s ngnh ỵ; Chuyờn ngnh o; Tốt nghiệp o Khoa/Bộ môn phụ trách: Khoa học và Kỹ thuật Thông tin

Giảng viên biên soạn: ThS. Tạ Thu Thủy

Môn học tiên quyết: Khơng

Mơn học trước: Nhập mơn lập trình

<b>2. MƠ TẢ MƠN HỌC (Course description) </b>

Mơn học này cung cấp các kiến thức cơ bản như: vấn đề khả dụng của các hệ thống tương tác; các nguyên tắc quan trọng của thiết kế giao diện người dùng, quá 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 một 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ệ giữa giao diện người dùng với trực quan thông tin; cũng như giới thiệu sơ về các mảng công nghệ mới.

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

2

<b>3. MỤC TIÊU MƠN HỌC (Course Goals) </b>

Sau khi hồn thành mơn học này, sinh viên có thể: Bảng 1.

<b>Ký hiệu Mục tiêu môn học ^{Chuẩn đầu ra}trong CTĐT </b>

G1 ^{Xác định, trả lời được các khái niệm chính về giao diện người}<b>_dùng.</b> LO5 (1.2) G2 <b>Liệt kê, trình bày được quy trình và kỹ thuật thiết kế giao diện. LO5 (4.3.1, 4.4.2) </b>

G3 Trình bày và phân tích được, đánh giá giao diện sản phẩm. <b>LO5 (2.2) </b>

G4

Thiết kế được giao diện người dùng cho sản phẩm phần mềm theo yêu cầu. Áp dụng được khả năng đọc hiểu tài liệu tiếng Anh và tìm hiểu một số công nghệ mới.

LO10 (4.4.3, 4.5.1, 3.3.2) G5 Vận dụng và phát triển kỹ năng làm việc, hoạt động nhóm. LO7 (3.1) G6 Vận dụng và phát triển kỹ năng giao tiếp, thuyết trình. LO8 (3.2)

<b>4. CHUẨN ĐẦU RA MÔN HỌC (Course learning outcomes) </b>

Bảng 2.

<b>CĐRMH Mô tả CĐRMH (mục tiêu cụ thể) _{giảng dạy}^{Mức độ}</b>

G1 (1.2.8) ^{Xác định, trả lời được các khái niệm chính về giao diện người dùng}

<b>như giao diện, giao diện người dùng, thiết kế giao diện người dùng,… </b>

IT

G2 (4.3.1, 4.4.2)

Liệt kê, trình bày được quy trình và kỹ thuật thiết kế giao diện. Các quy trình thiết kế giao diện người dùng gồm những gì, các kỹ thuật,

<b>nguyên lý khi thiết kế. </b>

Áp dụng được khả năng đọc hiểu tài liệu tiếng Anh và tìm hiểu một số công nghệ mới về thiết kế giao diện người dùng theo bối cảnh và nhu cầu xã hội.

TU

G5 (3.1.1, 3.1.2)

Vận dụng và phát triển kỹ năng làm việc, hoạt động nhóm. Thành lập nhóm và lên kế hoạch, nhiệm vụ vai trị của các thành viên, có bảng phân công công việc, đánh giá việc thực hiện và thái độ của các thành viên trong nhóm.

TU

G6 (3.2)

Vận dụng và phát triển kỹ năng giao tiếp, thuyết trình. Trình bày bài thuyết trình trên lớp theo cấu trúc phù hợp và trả lời các câu hỏi, tương tác đối thoại.

TU

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<i><b>[3] </b></i> <b>^{Hoạt động dạy và học}</b><i><b>[4] </b></i> <b>^{Thành phần}</b><i><b>đánh giá [5] </b></i>

Buổi 1 <b>Giới thiệu môn học: Tại sao </b>

cần học môn Thiết kế giao diện người dùng & Phương

G1, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Phân chia

Buổi 2 Learnability. G1, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Phân chia

Buổi 3 Learnability (tt). G1, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Thảo tập hoặc trả lời câu hỏi. Tìm kiếm tài liệu về đề tài đã giao.

A1, A4

Buổi 4 Efficiency. Safety.

G1, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Thảo tập hoặc trả lời câu hỏi. Tìm kiếm tài liệu về đề

A1

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

G1, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Kiểm tra tập hoặc trả lời câu hỏi. Tìm kiếm tài liệu về đề tài đã giao.

A1

Buổi 6 <b>Chương 2: Quy trình thiết kế giao diện </b>

Phương pháp thiết kế lấy người dùng làm trung tâm (User Center Design).

Dạy: Lý thuyết, cho ví dụ minh họa. Kiểm tra

Vai trị của làm việc nhóm, sự phối hợp của các Role trong một Project, và cách một UX Designer giao tiếp hiệu quả với nhóm. Menu, Search box, Page name & Tabs.

Thiết kế Button, Selection Box, Hyperlink, Search box, & phân biệt các tình huống

G2, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Kiểm tra

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

5 sử dụng.

Buổi 9 Thiết kế web cho mục đích “lướt” web thay vì “đọc” web.

Thể hiện nội dung Text trên giao diện.

Color.

G2, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Kiểm tra

Thiết kế Home screen.

G2, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Kiểm tra

Buổi 11 Thiết kế Home screen (tt). Sự khác nhau giữa thiết kế Web, Win-form, và Mobile

<b>App. </b>

G2, G3 Dạy: Lý thuyết, cho ví dụ minh họa. Kiểm tra

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

Dạy: Lý thuyết, cho ví dụ minh họa. Kiểm tra

G6 ^{Dạy: Lý thuyết, cho ví}dụ minh họa. Hướng dẫn sinh viên báo cáo, chuẩn bị nội dung báo cáo, slide thuyết trình về đề tài đã giao.

A1

Buổi 15 SV thuyết trình về cơng cụ Prototype cho trước.

<b>Thống nhất lịch báo cáo đồ án cuối kỳ. </b>

G4, G5,

G6 ^{Dạy: Lý thuyết, cho ví}dụ minh họa. Hướng dẫn sinh viên báo cáo, chuẩn bị nội dung báo cáo, slide thuyết trình về đề tài đã giao.

A1, A4

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<i><b>Buổi 1 Bài thực hành 1: Phổ biến đồ </b></i>

án, phân tích yêu cầu khách hàng & nghiên cứu các phần mềm tương tự & tổ chức nhóm đồ án. Lên ý tưởng thiết kế Navigation, Home screen.

G2, G3,

<i>G4, G5 </i>

Dạy: Hướng dẫn thực hành. Cung cấp tài liệu tham khảo, phân tích

<i>G4, G5 </i> ^{Dạy: Hướng dẫn thực}hành, cung cấp tài liệu, phân tích các yêu cầu.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

8

<i>G4, G5 </i> hành.

Học ở nhà: Thảo luận nhóm và viết báo cáo hồn thiện tại nhà.

<b>6. ĐÁNH GIÁ MƠN HỌC (Course assessment) </b>

<b>Kiểm tra đánh giá kết quả học tập </b>

<b>STT ^{Thời điểm}_{kiểm tra}^{Hình thức}_KTĐG^{Cơng cụ}_KTĐG^Trọng_số^Thang_điểm_{đánh giá}^{Tiêu chí}</b>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>bình ^Khá^Giỏi^{Xuất sắc}^Điểm</b>

<i><b>Chuyên cần </b></i> ^{Không đi} đầy đủ nội dung

theo yêu cầu,

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>7. QUY ĐỊNH CỦA MÔN HỌC (Course requirements and expectations) </b>

- Giảng viên cung cấp nội dung bài giảng trên lớp, sinh viên chủ động học tập và trao đổi với nhau và với giảng viên, không làm việc riêng trong giờ học.

- Giảng viên cung cấp chủ đề cho sinh viên tìm hiểu ở nhà và theo nhóm, sinh viên trình bày tại lớp và thảo luận.

- Sinh viên cần chủ động tự tìm hiểu thêm từ các nguồn tài liệu khác, nhất là trên 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”, nhưng không tập trung vào “Công cụ (tool) thiết kế giao diện”. Ngoài các công cụ chuẩn sẽ được giới thiệu ở phần #9, Sinh viên cần chủ động nghiên cứu sử dụng các công cụ khác.

<b>8. TÀI LIỆU HỌC TẬP, THAM KHẢO Giáo trình </b>

<i>1. Nguyễn Thịnh (2015). Đồ họa ứng dụng. Đại học Quốc gia TP HCM. </i>

<i>2. Yvonne Rogers, Helen Sharp, Jenny Preece (2007). Interaction Design: Beyond Human - Computer Interaction (2nd Edition). John Wiley & Sons. </i>

<i>3. Ben Shneiderman, Catherine Plaisant (2010). Designing the User Interface: </i>

<i>Strategies for Effective Human-Computer Interaction (5th Edition). Addison Wesley. </i>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

12

<b>Tài liệu tham khảo </b>

1. Prof. Rob Miller (2011). User Interface Design and Implementation. Massachusetts Institute of Technology, Department of Electrical Engineering and Computer Science, Spring.

<i>2. Julie Steele, Noah Illinsky (Eds) (2010). Beautiful Visualization: Looking at Data Through the Eyes of Experts. O’Reilly. </i>

</div>