BÀI GIẢNG THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN

THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN ĐỀ CƯƠNG KHÓA HỌC Chương 1: Tổng quan về thiết kế tương tác và thiết kế tương tác Đa phương tiện • Chương 2: Quy trình thiết kế tương tác • Chương 3: Giới thiệu về việc đánh giá trong thiết kế tương tác

Trang 1

THIẾT KẾ TƯƠNG TÁC

ĐA PHƯƠNG TIỆN

1

PTIT

Trang 2

GiỚI THIỆU MÔN HỌC

• Tên môn học: Thiết kế tương tác Đa phương tiện

Trang 3

ĐÁNH GIÁ MÔN HỌC

• Tích cực thảo luận: 10% (cá nhân)

• Kiểm tra giữa kỳ: 10% (cá nhân)

• Bài tập lớn: 30% (nhóm)

• Kiểm tra cuối kỳ: 50% (cá nhân)

• Tích cực thảo luận: 10% (cá nhân)

• Kiểm tra giữa kỳ: 10% (cá nhân)

• Bài tập lớn: 30% (nhóm)

• Kiểm tra cuối kỳ: 50% (cá nhân)

3

PTIT

Trang 4

THÔNG TIN GiẢNG VIÊN

• Giảng viên: ThS Phí Công Huy

Trang 5

YÊU CẦU

• Tinh thần đóng góp ý kiến trong khóa học

• Giữ trật tự không gây ảnh hưởng tới bạn xung quanh

• Đi học đầy đủ

• Nộp bài tập lớn đúng hạn

• Tinh thần đóng góp ý kiến trong khóa học

• Giữ trật tự không gây ảnh hưởng tới bạn xung quanh

• Đi học đầy đủ

• Nộp bài tập lớn đúng hạn

5

PTIT

Trang 6

ĐỀ CƯƠNG KHÓA HỌC

• Chương 1: Tổng quan về thiết kế tương tác và thiết kế tương tác Đa phương tiện

• Chương 2: Quy trình thiết kế tương tác

• Chương 3: Giới thiệu về việc đánh giá trong

• Chương 1: Tổng quan về thiết kế tương tác và thiết kế tương tác Đa phương tiện

• Chương 2: Quy trình thiết kế tương tác

• Chương 3: Giới thiệu về việc đánh giá trongPTIT

Trang 7

CÁC NGUỒN THAM KHẢO

– Design of Everday things – Donald A Norman

– Design for New Media: Interaction design for Multimedia and the WEB – Lon Barfield

– Design user interface tác giả Ben Shneiderman

– Design of Everday things – Donald A Norman

– Design for New Media: Interaction design for Multimedia and the WEB – Lon Barfield

– Design user interface tác giả Ben Shneiderman

7

PTIT

Trang 8

NỘI DUNG HÔM NAY

• Các khái niệm thiết kế tương tác

• Các khái niệm thiết kế tương tác Đa phương tiện

• Mối liên hệ giữa thiết kế tương tác và thiết kế Đa phương tiện

• Các khái niệm thiết kế tương tác

• Các khái niệm thiết kế tương tác Đa phương tiện

• Mối liên hệ giữa thiết kế tương tác và thiết kế Đa

Trang 9

THIẾT KẾ TƯƠNG TÁC

• Tương tác được hiểu thế nào?

– Tương tác được hiểu chung là những phản hồi từ

2 phía (ở đây đó là người dùng và sản phẩm)

• Những sản phẩm tương tác gồm:

– Điện thoại, máy tính, điều khiển, ATM, máy

photocopy…

• Tương tác được hiểu thế nào?

– Tương tác được hiểu chung là những phản hồi từ

2 phía (ở đây đó là người dùng và sản phẩm)

Trang 10

PTIT

Trang 11

• Khái niệm:

– Thiết kế tương tác là thiết kế ra những sản phẩmtương tác để hỗ trợ người dùng trong cuộc sốnghàng ngày (Yvonne Rogers, Helen Sharp, Jenny

Preece)

– Cụ thể hơn, thiết kế tạo nên một thói quen tiệndụng cho người dùng trong giao tiếp, công viêc vàtương tác

• Khái niệm:

– Thiết kế tương tác là thiết kế ra những sản phẩmtương tác để hỗ trợ người dùng trong cuộc sốnghàng ngày (Yvonne Rogers, Helen Sharp, Jenny

Preece)

– Cụ thể hơn, thiết kế tạo nên một thói quen tiệndụng cho người dùng trong giao tiếp, công viêc vàtương tác

11

PTIT

Trang 12

PTIT

Trang 13

13

PTIT

Trang 14

PTIT

Trang 15

ĐA PHƯƠNG TIỆN

• Đa phương tiện:

– Định nghĩa Đa phương tiện (theo nghĩa rộng) làbao gồm các phương tiện: văn bản, hĩnh vẽ tĩnh(vẽ, chụp), hoạt hình (hình ảnh động), âm thanh

• Đa phương tiện:

– Định nghĩa Đa phương tiện (theo nghĩa rộng) làbao gồm các phương tiện: văn bản, hĩnh vẽ tĩnh(vẽ, chụp), hoạt hình (hình ảnh động), âm thanh

15

PTIT

Trang 16

THIẾT KẾ ĐA PHƯƠNG TIỆN

• Thiết kế Đa phương tiện:

– Là việc thiết kế tạo nên sản phẩm dựa trên nhữngvăn bản , hình vẽ tĩnh, hoạt hình và âm thanh

• Thiết kế Đa phương tiện:

– Là việc thiết kế tạo nên sản phẩm dựa trên nhữngvăn bản , hình vẽ tĩnh, hoạt hình và âm thanh

PTIT

Trang 17

THIẾT KẾ ĐA PHƯƠNG TIỆN

17

PTIT

Trang 18

ĐA PHƯƠNG TIỆN

• Thiết kế tương tác Đa phương tiện:

– Là sự kết hợp của các phương tiện truyền thông

kỹ thuật trong một môi trường kỹ thuật nhằm chophép người dùng có thể tương tác với dữ liệu để

sử dụng vào mục đích nhất định

• Các phương tiện truyền thông kỹ thuật bao gồm: văn bản điện tử, đồ họa, hình ảnh động và âm thanh

• Thiết kế tương tác Đa phương tiện:

– Là sự kết hợp của các phương tiện truyền thông

kỹ thuật trong một môi trường kỹ thuật nhằm chophép người dùng có thể tương tác với dữ liệu để

sử dụng vào mục đích nhất định

• Các phương tiện truyền thông kỹ thuật bao gồm: văn bản điện tử, đồ họa, hình ảnh động và âm thanhPTIT

Trang 19

MỐI LIÊN HỆ VÀ PHẠM VI CỦA THIẾT

KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN

19

PTIT

Trang 20

MỐI LIÊN HỆ VÀ PHẠM VI CỦA THIẾT

KẾ TƯƠNG TÁC ĐA PHƯƠNG TiỆN

PTIT

Trang 21

BÀI TẬP TRÊN LỚP

21

Điện thoại bàn PTITĐiện thoại di động

Trang 22

BÀI TẬP TRÊN LỚPPhân biệt TKTT và TKTTĐPT

PTIT

Trang 23

BÀI TẬP TRÊN LỚP

• Thực hiện 1 cuộc gọi từ máy:

– Di động

– Máy điện thoại bàn

a Khác nhau như thế nào?

b Các thiết bị như vậy được thiết kế như thế nào khi nhằm vào:

i Người dùng

ii Cách hỗ trợ Iii Mục đích sử dụng

• Thực hiện 1 cuộc gọi từ máy:

– Di động

– Máy điện thoại bàn

a Khác nhau như thế nào?

b Các thiết bị như vậy được thiết kế như thế nào khi nhằm vào:

i Người dùng

ii Cách hỗ trợ Iii Mục đích sử dụng

23

PTIT

Trang 24

NHỮNG YẾU TỐ, QUY TẮC ĐỂ NHẬN

BIẾT MỘT GIAO DIỆN TỐT

PTIT

Trang 25

NỘI DUNG HÔM NAY

• Thế nào là một thiết kế tốt

• Hiểu được người dùng

• Giao diện ảnh hưởng tới người dùng ra sao

25

PTIT

Trang 26

THẾ NÀO LÀ 1 THIẾT KẾ TỐT?

PTIT

Trang 29

– Kết quả  Làm lại từ đầu hoặc mua mobile phone

• Thao tác để sử dụng 1 máy điện thoại bàn để nghe tin nhắn đã lưu (trong khách sạn):

Trang 30

– Hiệu suất cao (thao tác đơn giản)

– Giao diện đơn giản nhưng vẫn thu hút

• Những thiết kế tốt thông thường sẽ phụ thuộc vào những nhận biết sau:

– Hướng dẫn và hiện thị rõ ràng

– Giao diện dễ sử dụng

– Tạo sự thích thú khi sử dụng

– Hiệu suất cao (thao tác đơn giản)

– Giao diện đơn giản nhưng vẫn thu hútPTIT

Trang 31

HiỂU ĐƯỢC NGƯỜI DÙNG

• Những yếu tố gây khó chịu cho người dùng:

– Không kiểm soát được sản phẩm đang dùng

– Không có thông tin phản hồi cụ thể và nhanh

chóng

– Không có hướng dẫn sử dụng (hoặc có nhưng khóhiểu)

– Không hiểu hành vi, thói quen người dùng

• Những yếu tố gây khó chịu cho người dùng:

– Không kiểm soát được sản phẩm đang dùng

– Không có thông tin phản hồi cụ thể và nhanh

Trang 32

HiỂU ĐƯỢC NGƯỜI DÙNG

• Nhận thức là một trong những điều rất quan

trọng để hiểu được người dùng

• Một quy trình nhận thức của người dùng sẽ liên quan tới những việc như:

– Sự chú ý

– Thừa nhận

– Ghi nhớ

– Học hỏi

• Nhận thức là một trong những điều rất quan

trọng để hiểu được người dùng

• Một quy trình nhận thức của người dùng sẽ liên quan tới những việc như:

– Sự chú ý

– Thừa nhận

– Ghi nhớ

Trang 33

GIAO DiỆN ẢNH HƯỞNG TỚI

NGƯỜI DÙNG RA SAO

• Sự chú ý:

– Sử dụng thông tin dễ nhìn thấy, để mắt tới khi

muốn người dùng quan tâm  sử dụng biểu

tượng, màu sắc, khoảng cách để khiến người dùngquan tâm

– Hạn chế sử dụng quá nhiều màu sắc khi tạo sự

chú ý cho người dùng  gây ra nhầm lẫn

– Giao diện càng đơn giản thì người dùng càng dễhiểu

• Sự chú ý:

– Sử dụng thông tin dễ nhìn thấy, để mắt tới khi

muốn người dùng quan tâm  sử dụng biểu

tượng, màu sắc, khoảng cách để khiến người dùngquan tâm

– Hạn chế sử dụng quá nhiều màu sắc khi tạo sự

chú ý cho người dùng  gây ra nhầm lẫn

– Giao diện càng đơn giản thì người dùng càng dễhiểu

33

PTIT

Trang 34

PTIT

Trang 35

• Sự thừa nhận:

– Những biểu tượng hoặc giao diện đồ họa khi thiết kế cần đảm bảo người dùng có thể đọc được hàm ý của chúng.

– Âm thanh sử dụng cần phải rõ ràng và dễ hiểu

– Những phát biểu (lời bình) cần rành mạch và dễ hiểu – Phông chữ cần phải tách biệt và dễ nhận biết khi kết hợp với hình nền

– Sử dụng những hiệu ứng phản hồi rõ ràng và khác biệt

để người dùng dễ nhận biết

• Sự thừa nhận:

– Những biểu tượng hoặc giao diện đồ họa khi thiết kế cần đảm bảo người dùng có thể đọc được hàm ý của chúng.

– Âm thanh sử dụng cần phải rõ ràng và dễ hiểu

– Những phát biểu (lời bình) cần rành mạch và dễ hiểu – Phông chữ cần phải tách biệt và dễ nhận biết khi kết hợp với hình nền

– Sử dụng những hiệu ứng phản hồi rõ ràng và khác biệt

để người dùng dễ nhận biết

35

PTIT

Trang 36

PTIT

Trang 37

37

PTIT

Trang 38

PTIT

Trang 39

• Học hỏi:

– Thiết kế phải kích thích sự tò mò của người dùng– Thiết kế giao diện phải hướng dẫn người dùnghướng đến thao tác đúng

• Học hỏi:

– Thiết kế phải kích thích sự tò mò của người dùng– Thiết kế giao diện phải hướng dẫn người dùnghướng đến thao tác đúng

39

PTIT

Trang 40

• Đọc, nói và nghe:

– Giữ độ dài của các hướng dẫn Menu nhỏ nhất (cóthể 3 đến 4 lựa chọn là tối thiểu và tối đa)

– Trọng âm nhấn khi nói phải rõ ràng khi thiết kế

giao diện trên máy tính

– Cung cấp những phông chữ ở các chế độ Lớn, Vừa

và Nhỏ  người dùng đều phải đọc được

• Đọc, nói và nghe:

– Giữ độ dài của các hướng dẫn Menu nhỏ nhất (cóthể 3 đến 4 lựa chọn là tối thiểu và tối đa)

– Trọng âm nhấn khi nói phải rõ ràng khi thiết kế

giao diện trên máy tính

– Cung cấp những phông chữ ở các chế độ Lớn, Vừa

và Nhỏ  người dùng đều phải đọc đượcPTIT

Trang 41

• Giải quyết vấn đề và đưa ra quyết định:

– Cung cấp cho người dùng dễ tìm kiếm và sử dụngnhững thông tin thêm đã được ẩn (ví dụ: nhữngcông cụ tìm kiếm trên web, tìm kiếm nâng cao)

• Giải quyết vấn đề và đưa ra quyết định:

– Cung cấp cho người dùng dễ tìm kiếm và sử dụngnhững thông tin thêm đã được ẩn (ví dụ: nhữngcông cụ tìm kiếm trên web, tìm kiếm nâng cao)

41

PTIT

Trang 42

PTIT

Trang 43

NHỮNG YẾU TỐ, QUY TẮC ĐỂ NHẬN

BIẾT MỘT GIAO DIỆN TỐT (TIẾP)

43

PTIT

Trang 44

NỘI DUNG HÔM NAY

• Những yếu tố làm nên 1 thiết kế tốt

• Những bài học ví dụ

PTIT

Trang 45

NHỮNG YẾU TỐ LÀM NÊN 1 THIẾT

Trang 46

Trang 47

KẾ TỐT

• Sự phù hợp:

– Khi thiết kế cần phải có sự phù hợp với môi

trường xung quanh và văn hóa của đất nước bạnđang ở

• Sự phù hợp:

– Khi thiết kế cần phải có sự phù hợp với môi

trường xung quanh và văn hóa của đất nước bạnđang ở

47

PTIT

Trang 48

KẾ TỐT

PTIT

Trang 49

KẾ TỐT

49

PTIT

Trang 50

Trang 51

KẾ TỐT

51

PTIT

Trang 52

KẾ TỐT

• Sự phản hồi:

– Nếu một sản phẩm thiết kế tương tác tốt sẽ cầnphản hồi nhanh, đúng lúc và dễ nhận biết (ví dụ:khi đặt vé online hệ thống luôn có phản hồi bằngdòng chữ Bạn đã đặt vé thành công!!!)

– 1 thiết kế được coi có sự phản hồi tốt khi hệ thốngphản hồi trong khoảng thời gian 8s – còn gọi là

quy luật 8s (8 seconds rule)

• Sự phản hồi:

– Nếu một sản phẩm thiết kế tương tác tốt sẽ cầnphản hồi nhanh, đúng lúc và dễ nhận biết (ví dụ:khi đặt vé online hệ thống luôn có phản hồi bằngdòng chữ Bạn đã đặt vé thành công!!!)

– 1 thiết kế được coi có sự phản hồi tốt khi hệ thốngphản hồi trong khoảng thời gian 8s – còn gọi là

quy luật 8s (8 seconds rule)PTIT

Trang 53

KẾ TỐT

53

PTIT

Trang 54

• Sự tiện ích:

– Một sản phẩm có thiết kế tương tác tốt là sản

phẩm giúp người dùng cảm thấy nó hữu ích vàonhững trường hợp cụ thể (ví dụ: khi nghe dialogtiếng Anh, máy nghe đài đều có nút Rewinding để

Trang 55

KẾ TỐT

55

PTIT

Trang 56

KẾ TỐT

• Sự thoải mái:

– Sự thoải mái sẽ tạo cảm giác hình thành thói quenngười dùng và gây ấn tượng tốt khi sử dụng sảnphẩm có thiết kế đó (ví dụ: phòng xông hơi luônthiết kế bằng gỗ…tạo cảm giác hút hơi ẩm và dễchịu)

• Sự thoải mái:

– Sự thoải mái sẽ tạo cảm giác hình thành thói quenngười dùng và gây ấn tượng tốt khi sử dụng sảnphẩm có thiết kế đó (ví dụ: phòng xông hơi luônthiết kế bằng gỗ…tạo cảm giác hút hơi ẩm và dễ

Trang 57

KẾ TỐT

57

PTIT

Trang 58

NHỮNG VÍ DỤ

• Sinh viên đưa ra những ví dụ mà cho đó là thiết kế tốt  nhận xét

PTIT

Trang 59

VAI TRÒ CỦA THIẾT KẾ TƯƠNG TÁC

ĐA PHƯƠNG TIỆN

59

PTIT

Trang 60

NỘI DUNG HÔM NAY

• Thiết kế tương tác trong kinh doanh

• Mục tiêu của thiết kế tương tác: Khả năng sử dụng và thói quen người dùng

• Mối liên hệ của thiết kế tương tác và những thiết bị Đa phương tiện

• Thiết kế tương tác trong kinh doanh

• Mục tiêu của thiết kế tương tác: Khả năng sử dụng và thói quen người dùng

• Mối liên hệ của thiết kế tương tác và những thiết bị Đa phương tiệnPTIT

Trang 61

THIẾT KẾ TƯƠNG TÁC TRONG

KINH DOANH

• Rất nhiều công ty đã nhìn nhận thiết kế sản

phẩm tương tác là 1 trong những định hướng chiến lược

• Chuyên gia thiết kế tương tác là một nghề rất thịnh hành

• Nghề bao gồm những công việc:

– Sáng tạo, thiết kế và xây dựng các đoạn phim trựctuyến bao gồm phim quảng cáo, trò chơi, các

trang web có khả năng tương tác cao…

• Rất nhiều công ty đã nhìn nhận thiết kế sản

phẩm tương tác là 1 trong những định hướng chiến lược

• Chuyên gia thiết kế tương tác là một nghề rất thịnh hành

• Nghề bao gồm những công việc:

– Sáng tạo, thiết kế và xây dựng các đoạn phim trựctuyến bao gồm phim quảng cáo, trò chơi, các

trang web có khả năng tương tác cao…

61

PTIT

Trang 62

KINH DOANH

• Ví dụ:

– Công ty thời trang quần áo DOT.COM đã bị phá

sản vì lý do không coi trọng thiết kế tương tác

trong việc kinh doanh

– Mục tiêu của công ty tập trung vào giao diện hìnhhọa 3D, nhưng không tính đến thời gian downloadlâu và độ phức tạp khi đăng ký form online 

khách hàng thất vọng  chỉ sử dụng 1 lần và

• Ví dụ:

– Công ty thời trang quần áo DOT.COM đã bị phá

sản vì lý do không coi trọng thiết kế tương tác

trong việc kinh doanh

– Mục tiêu của công ty tập trung vào giao diện hìnhhọa 3D, nhưng không tính đến thời gian downloadlâu và độ phức tạp khi đăng ký form online 

khách hàng thất vọng  chỉ sử dụng 1 lần vàPTIT

Trang 63

KINH DOANH

• Sự hòa nhập của công việc thiết kế:

– Nhà thiết kế tương tác: là những người phụ trách toàn

bộ những mảng thiết kế tương tác của các sản phẩm , không chỉ dừng lại thiết kế giao diện.

– Kỹ sư về hiệu suất: là những người tập trung vào khả năng sử dụng, ước lượng của sản phẩm, áp dụng

những phương pháp để thực thi

– Nhà thiết kế website: là những người xây dựng kế

hoạch và cấu trúc của sản phẩm, đặc biệt là website – Nhà thiết kế UX: là những người làm tất cả công việc ở trên và cũng là người đưa ra nghiên cứu thiết kế của sản phẩm.

• Sự hòa nhập của công việc thiết kế:

– Nhà thiết kế tương tác: là những người phụ trách toàn

bộ những mảng thiết kế tương tác của các sản phẩm , không chỉ dừng lại thiết kế giao diện.

– Kỹ sư về hiệu suất: là những người tập trung vào khả năng sử dụng, ước lượng của sản phẩm, áp dụng

những phương pháp để thực thi

– Nhà thiết kế website: là những người xây dựng kế

hoạch và cấu trúc của sản phẩm, đặc biệt là website – Nhà thiết kế UX: là những người làm tất cả công việc ở trên và cũng là người đưa ra nghiên cứu thiết kế của sản phẩm.

63

PTIT

Trang 64

MỤC TIÊU CỦA THIẾT KẾ TƯƠNG

Trang 65

TÁC

• Hiệu quả sử dụng:

– Là mục tiêu rất rộng và nó liên hệ tới những thiết

kế tốt như thế nào thông qua việc thiết kế sản

phẩm đó có thể hướng dẫn người dùng ra sao vàchỉ cho người dùng làm thế nào

• Hiệu quả sử dụng:

– Là mục tiêu rất rộng và nó liên hệ tới những thiết

kế tốt như thế nào thông qua việc thiết kế sản

phẩm đó có thể hướng dẫn người dùng ra sao vàchỉ cho người dùng làm thế nào

65

PTIT

Trang 66

Trang 67

TÁC

• Độ an toàn sử dụng:

– Là cách thiết kế nhằm bảo vệ người dùng khi sửdụng những sản phẩm Đa phương tiện; luôn cónhững lưu ý hoặc những phương án hỗ trợ nhằmđảm bảo sự an toàn của người dùng

– Ví dụ: Khi chụp X-quang thì bộ phần điều khiểnluôn được nối cùng máy tính để có thể tự độngngắt khi gặp sự cố; hoặc những nút báo hiệu nguyhiểm rất rõ ràng

• Độ an toàn sử dụng:

– Là cách thiết kế nhằm bảo vệ người dùng khi sửdụng những sản phẩm Đa phương tiện; luôn cónhững lưu ý hoặc những phương án hỗ trợ nhằmđảm bảo sự an toàn của người dùng

– Ví dụ: Khi chụp X-quang thì bộ phần điều khiểnluôn được nối cùng máy tính để có thể tự độngngắt khi gặp sự cố; hoặc những nút báo hiệu nguyhiểm rất rõ ràng

67

PTIT

Định dạng
Số trang	207
Dung lượng	3,54 MB