Slie bài giảng Thiết kế tương tác đa phương tiện PTIT

THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN1PTITGiỚI THIỆU MÔN HỌC • Tênmônhọc: ThiếtkếtươngtácĐaphương tiện • Mãmônhọc: CDT1425 • Sốtínchỉ: 2 • Lýthuyết: 24tiết • Thảoluận: 3tiết • Thựchành: 3tiết • Tựhọc: Cóhướngdẫn • Tênmônhọc: ThiếtkếtươngtácĐaphương tiện • Mãmônhọc: CDT1425 • Sốtínchỉ: 2 • Lýthuyết: 24tiết • Thảoluận: 3tiết • Thựchành: 3tiết • Tựhọc: Cóhướngdẫn2 PTITĐÁNH GIÁ MÔN HỌC • Tíchcựcthảoluận: 10% (cánhân) • Kiểmtragiữakỳ: 10% (cánhân) • Bàitậplớn: 30% (nhóm) • Kiểmtracuốikỳ: 50% (cánhân) • Tíchcựcthảoluận: 10% (cánhân) • Kiểmtragiữakỳ: 10% (cánhân) • Bàitậplớn: 30% (nhóm) • Kiểmtracuốikỳ: 50% (cánhân)3 PTITTHÔNG TIN GiẢNG VIÊN • Giảngviên: ThS.PhíCôngHuy • Email: huypccdit.com.vn • Contact: 0949198889 • Giảngviên: ThS.PhíCôngHuy • Email: huypccdit.com.vn • Contact: 09491988894 PTITYÊU CẦU • Tinhthầnđónggópýkiếntrongkhóahọc • Giữtrậttựkhônggâyảnhhưởngtớibạnxung quanh • Đihọcđầyđủ • Nộpbàitậplớnđúnghạn • Tinhthầnđónggópýkiếntrongkhóahọc • Giữtrậttựkhônggâyảnhhưởngtớibạnxung quanh • Đihọcđầyđủ • Nộpbàitậplớnđúnghạn5 PTITĐỀ CƯƠNG KHÓA HỌC • Chương1:Tổngquanvềthiếtkếtươngtácvà thiếtkếtươngtácĐaphươngtiện• Chương2:Quytrìnhthiếtkếtươngtác• Chương3:Giớithiệuvềviệcđánhgiátrong thiếtkếtươngtác• Chương1:Tổngquanvềthiếtkếtươngtácvà thiếtkếtươngtácĐaphươngtiện• Chương2:Quytrìnhthiếtkếtươngtác• Chương3:Giớithiệuvềviệcđánhgiátrong thiếtkếtươngtác6 PTITCÁC NGUỒN THAM KHẢO• Sáchnênđọc: – Interaction Design Beyond HumanComputer Interaction tácgiảYvonne Rogers, Helen Sharp, JennyPreece – Essential guide to User interface designtácgiảWilbert O. Galitz – Tươngtácngười–máytácgiảLươngMạnhBá • Sáchthamkhảo: – Design ofEverdaythings–Donald A. Norman – Design for New Media: Interaction design for Multimedia and the WEB–Lon Barfield – Design user interfacetácgiảBenShneiderman • Sáchnênđọc: – Interaction Design Beyond HumanComputer Interaction tácgiảYvonne Rogers, Helen Sharp, JennyPreece – Essential guide to User interface designtácgiảWilbert O. Galitz – Tươngtácngười–máytácgiảLươngMạnhBá • Sáchthamkhảo: – Design ofEverdaythings–Donald A. Norman – Design for New Media: Interaction design for Multimedia and the WEB–Lon Barfield – Design user interfacetácgiảBenShneiderman7 PTITNỘI DUNG HÔM NAY• Cáckháiniệmthiếtkếtươngtác• CáckháiniệmthiếtkếtươngtácĐaphươngtiện• MốiliênhệgiữathiếtkếtươngtácvàthiếtkếĐa phươngtiện• Nhữngvídụ• Cáckháiniệmthiếtkếtươngtác• CáckháiniệmthiếtkếtươngtácĐaphươngtiện• MốiliênhệgiữathiếtkếtươngtácvàthiếtkếĐa phươngtiện• Nhữngvídụ8 PTITTHIẾT KẾ TƯƠNG TÁC • Tươngtácđượchiểuthếnào? –Tươngtácđượchiểuchunglànhữngphảnhồitừ 2phía(ởđâyđólàngườidùngvàsảnphẩm) • Nhữngsảnphẩmtươngtácgồm: –Điệnthoại,máytính,điềukhiển, ATM,máy photocopy… • Tươngtácđượchiểuthếnào? –Tươngtácđượchiểuchunglànhữngphảnhồitừ 2phía(ởđâyđólàngườidùngvàsảnphẩm) • Nhữngsảnphẩmtươngtácgồm: –Điệnthoại,máytính,điềukhiển, ATM,máy photocopy…9 PTITTHIẾT KẾ TƯƠNG TÁC10 PTITTHIẾT KẾ TƯƠNG TÁC• Kháiniệm: –Thiếtkếtươngtáclàthiếtkếranhữngsảnphẩm tươngtácđểhỗtrợngườidùngtrongcuộcsống hàngngày. (Yvonne Rogers, Helen Sharp, Jenny Preece) –Cụthểhơn,thiếtkếtạonênmộtthóiquentiện dụngchongườidùngtronggiaotiếp,côngviêcvà tươngtác. • Kháiniệm: –Thiếtkếtươngtáclàthiếtkếranhữngsảnphẩm tươngtácđểhỗtrợngườidùngtrongcuộcsống hàngngày. (Yvonne Rogers, Helen Sharp, Jenny Preece) –Cụthểhơn,thiếtkếtạonênmộtthóiquentiện dụngchongườidùngtronggiaotiếp,côngviêcvà tươngtác.11 PTITTHIẾT KẾ TƯƠNG TÁC12 PTITTHIẾT KẾ TƯƠNG TÁC13 PTITTHIẾT KẾ TƯƠNG TÁC14 PTITĐA PHƯƠNG TIỆN • Đaphươngtiện: –ĐịnhnghĩaĐaphươngtiện(theonghĩarộng)là baogồmcácphươngtiện:vănbản,hĩnhvẽtĩnh (vẽ,chụp),hoạthình(hìnhảnhđộng),âmthanh. • Đaphươngtiện: –ĐịnhnghĩaĐaphươngtiện(theonghĩarộng)là baogồmcácphươngtiện:vănbản,hĩnhvẽtĩnh (vẽ,chụp),hoạthình(hìnhảnhđộng),âmthanh.15 PTITTHIẾT KẾ ĐA PHƯƠNG TIỆN • ThiếtkếĐaphươngtiện: –Làviệcthiếtkếtạonênsảnphẩmdựatrênnhững vănbản,hìnhvẽtĩnh,hoạthìnhvàâmthanh. • ThiếtkếĐaphươngtiện: –Làviệcthiếtkếtạonênsảnphẩmdựatrênnhững vănbản,hìnhvẽtĩnh,hoạthìnhvàâmthanh.16 PTITTHIẾT KẾ ĐA PHƯƠNG TIỆN17 PTITTHIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN • ThiếtkếtươngtácĐaphươngtiện: –Làsựkếthợpcủacácphươngtiệntruyềnthông kỹthuậttrongmộtmôitrườngkỹthuậtnhằmcho phépngườidùngcóthểtươngtácvớidữliệuđể sửdụngvàomụcđíchnhấtđịnh • Cácphươngtiệntruyềnthôngkỹthuậtbaogồm:văn bảnđiệntử,đồhọa,hìnhảnhđộngvàâmthanh • ThiếtkếtươngtácĐaphươngtiện: –Làsựkếthợpcủacácphươngtiệntruyềnthông kỹthuậttrongmộtmôitrườngkỹthuậtnhằmcho phépngườidùngcóthểtươngtácvớidữliệuđể sửdụngvàomụcđíchnhấtđịnh • Cácphươngtiệntruyềnthôngkỹthuậtbaogồm:văn bảnđiệntử,đồhọa,hìnhảnhđộngvàâmthanh18 PTITMỐI LIÊN HỆ VÀ PHẠM VI CỦA THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN19 PTITMỐI LIÊN HỆ VÀ PHẠM VI CỦA THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TiỆN20 PTITBÀI TẬP TRÊN LỚP21Điệnthoạibàn Điệnthoạidiđộng PTITBÀI TẬP TRÊN LỚP PhânbiệtTKTTvàTKTTĐPT22 PTITBÀI TẬP TRÊN LỚP • Thựchiện1cuộcgọitừmáy: –Diđộng –Máyđiệnthoạibàn a.Khácnhaunhưthếnào? b.Cácthiếtbịnhưvậyđượcthiếtkếnhưthế nàokhinhằmvào: i. Ngườidùng ii. Cáchhỗtrợ Iii. Mụcđíchsửdụng • Thựchiện1cuộcgọitừmáy: –Diđộng –Máyđiệnthoạibàn a.Khácnhaunhưthếnào? b.Cácthiếtbịnhưvậyđượcthiếtkếnhưthế nàokhinhằmvào: i. Ngườidùng ii. Cáchhỗtrợ Iii. Mụcđíchsửdụng23 PTITNHỮNG YẾU TỐ, QUY TẮC ĐỂ NHẬN BIẾT MỘT GIAO DIỆN TỐT24PTITNỘI DUNG HÔM NAY • Thếnàolàmộtthiếtkếtốt • Hiểuđượcngườidùng • Giaodiệnảnhhưởngtớingườidùngrasao25 PTITTHẾ NÀO LÀ 1 THIẾT KẾ TỐT?26 PTITTHẾ NÀO LÀ 1 THIẾT KẾ TỐT? • Trọngtâmcủaviệcthiếtkếtươngtácđólàtập trungvàokhảnăngsửdụngcủasảnphẩmđó.27 PTITVÍ DỤ • Thaotácđểsửdụng1máyđiệnthoạibànđể nghetinnhắnđãlưu(trongkháchsạn): –Bấmsốtổngđài??? –Nhậpsốphòng ??? –Nghethôngtinphảnhồi??? –Nhậpmậtkhẩu??? –Kếtquả??? • Thaotácđểsửdụng1máyđiệnthoạibànđể nghetinnhắnđãlưu(trongkháchsạn): –Bấmsốtổngđài??? –Nhậpsốphòng ??? –Nghethôngtinphảnhồi??? –Nhậpmậtkhẩu??? –Kếtquả???28 PTITVÍ DỤ • Thaotácđểsửdụng1máyđiệnthoạibànđể nghetinnhắnđãlưu(trongkháchsạn): –Bấmsốtổngđàithànhcông –Nhậpsốphòng thànhcông –Nghethôngtinhướngdẫnthànhcông –Nhậpmậtkhẩuthấtbại –KếtquảLàmlạitừđầuhoặcmuamobile phone • Thaotácđểsửdụng1máyđiệnthoạibànđể nghetinnhắnđãlưu(trongkháchsạn): –Bấmsốtổngđàithànhcông –Nhậpsốphòng thànhcông –Nghethôngtinhướngdẫnthànhcông –Nhậpmậtkhẩuthấtbại –KếtquảLàmlạitừđầuhoặcmuamobile phone29 PTITTHẾ NÀO LÀ 1 THIẾT KẾ TỐT • Nhữngthiếtkếtốtthôngthườngsẽphụthuộc vàonhữngnhậnbiếtsau: –Hướngdẫnvàhiệnthịrõràng –Giaodiệndễsửdụng –Tạosựthíchthúkhisửdụng –Hiệusuấtcao(thaotácđơngiản) –Giaodiệnđơngiảnnhưngvẫnthuhút • Nhữngthiếtkếtốtthôngthườngsẽphụthuộc vàonhữngnhậnbiếtsau: –Hướngdẫnvàhiệnthịrõràng –Giaodiệndễsửdụng –Tạosựthíchthúkhisửdụng –Hiệusuấtcao(thaotácđơngiản) –Giaodiệnđơngiảnnhưngvẫnthuhút30 PTITHiỂU ĐƯỢC NGƯỜI DÙNG • Nhữngyếutốgâykhóchịuchongườidùng: –Khôngkiểmsoátđượcsảnphẩmđangdùng –Khôngcóthôngtinphảnhồicụthểvànhanh chóng –Khôngcóhướngdẫnsửdụng(hoặccónhưngkhó hiểu) –Khônghiểuhànhvi,thóiquenngườidùng • Nhữngyếutốgâykhóchịuchongườidùng: –Khôngkiểmsoátđượcsảnphẩmđangdùng –Khôngcóthôngtinphảnhồicụthểvànhanh chóng –Khôngcóhướngdẫnsửdụng(hoặccónhưngkhó hiểu) –Khônghiểuhànhvi,thóiquenngườidùng31 PTITHiỂU ĐƯỢC NGƯỜI DÙNG • Nhậnthứclàmộttrongnhữngđiềurấtquan trọngđểhiểuđượcngườidùng • Mộtquytrìnhnhậnthứccủangườidùngsẽliên quantớinhữngviệcnhư: – Sựchúý – Thừanhận – Ghinhớ – Họchỏi – Đọc,nghe,viết – Đưaraquyếtđịnhgiảiquyếtvấnđề • Nhậnthứclàmộttrongnhữngđiềurấtquan trọngđểhiểuđượcngườidùng • Mộtquytrìnhnhậnthứccủangườidùngsẽliên quantớinhữngviệcnhư: – Sựchúý – Thừanhận – Ghinhớ – Họchỏi – Đọc,nghe,viết – Đưaraquyếtđịnhgiảiquyếtvấnđề32 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO • Sựchúý: –Sửdụngthôngtindễnhìnthấy,đểmắttớikhi muốnngườidùngquantâmsửdụngbiểu tượng,màusắc,khoảngcáchđểkhiếnngườidùng quantâm –Hạnchếsửdụngquánhiềumàusắckhitạosự chúýchongườidùnggâyranhầmlẫn –Giaodiệncàngđơngiảnthìngườidùngcàngdễ hiểu • Sựchúý: –Sửdụngthôngtindễnhìnthấy,đểmắttớikhi muốnngườidùngquantâmsửdụngbiểu tượng,màusắc,khoảngcáchđểkhiếnngườidùng quantâm –Hạnchếsửdụngquánhiềumàusắckhitạosự chúýchongườidùnggâyranhầmlẫn –Giaodiệncàngđơngiảnthìngườidùngcàngdễ hiểu33 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAOGiaodiệnđơngiảncủaGoogle34 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO • Sựthừanhận: – Nhữngbiểutượnghoặcgiaodiệnđồhọakhithiếtkế cầnđảmbảongườidùngcóthểđọcđượchàmýcủa chúng. – Âmthanhsửdụngcầnphảirõràngvàdễhiểu – Nhữngphátbiểu(lờibình)cầnrànhmạchvàdễhiểu – Phôngchữcầnphảitáchbiệtvàdễnhậnbiếtkhikết hợpvớihìnhnền – Sửdụngnhữnghiệuứngphảnhồirõràngvàkhácbiệt đểngườidùngdễnhậnbiết • Sựthừanhận: – Nhữngbiểutượnghoặcgiaodiệnđồhọakhithiếtkế cầnđảmbảongườidùngcóthểđọcđượchàmýcủa chúng. – Âmthanhsửdụngcầnphảirõràngvàdễhiểu – Nhữngphátbiểu(lờibình)cầnrànhmạchvàdễhiểu – Phôngchữcầnphảitáchbiệtvàdễnhậnbiếtkhikết hợpvớihìnhnền – Sửdụngnhữnghiệuứngphảnhồirõràngvàkhácbiệt đểngườidùngdễnhậnbiết35 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO36 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO • Sựghinhớ: –Khôngcungcấpquánhiềuthôngtinkhithựchiện thiếtkế –Nênthiếtkếnhữnghìnhảnh,biểutượnglậplạivà đồngnhấttăngsựghinhớcủangườidùng –Cungcấpchongườidùngcóquyềnthayđổimàu sắc,đặcđiểmcủasảnphẩmđểngườidùngdễghi nhớtheocáchcủahọ(vídụ: email,hìnhảnh…) • Sựghinhớ: –Khôngcungcấpquánhiềuthôngtinkhithựchiện thiếtkế –Nênthiếtkếnhữnghìnhảnh,biểutượnglậplạivà đồngnhấttăngsựghinhớcủangườidùng –Cungcấpchongườidùngcóquyềnthayđổimàu sắc,đặcđiểmcủasảnphẩmđểngườidùngdễghi nhớtheocáchcủahọ(vídụ: email,hìnhảnh…)37 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO38 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO• Họchỏi: –Thiếtkếphảikíchthíchsựtòmòcủangườidùng –Thiếtkếgiaodiệnphảihướngdẫnngườidùng hướngđếnthaotácđúng • Họchỏi: –Thiếtkếphảikíchthíchsựtòmòcủangườidùng –Thiếtkếgiaodiệnphảihướngdẫnngườidùng hướngđếnthaotácđúng39 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO • Đọc,nóivànghe: –GiữđộdàicủacáchướngdẫnMenunhỏnhất(có thể3đến4lựachọnlàtốithiểuvàtốiđa) –Trọngâmnhấnkhinóiphảirõràngkhithiếtkế giaodiệntrênmáytính –CungcấpnhữngphôngchữởcácchếđộLớn,Vừa vàNhỏngườidùngđềuphảiđọcđược • Đọc,nóivànghe: –GiữđộdàicủacáchướngdẫnMenunhỏnhất(có thể3đến4lựachọnlàtốithiểuvàtốiđa) –Trọngâmnhấnkhinóiphảirõràngkhithiếtkế giaodiệntrênmáytính –CungcấpnhữngphôngchữởcácchếđộLớn,Vừa vàNhỏngườidùngđềuphảiđọcđược40 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO • Giảiquyếtvấnđềvàđưaraquyếtđịnh: –Cungcấpchongườidùngdễtìmkiếmvàsửdụng nhữngthôngtinthêmđãđượcẩn(vídụ:những côngcụtìmkiếmtrênweb,tìmkiếmnângcao) • Giảiquyếtvấnđềvàđưaraquyếtđịnh: –Cungcấpchongườidùngdễtìmkiếmvàsửdụng nhữngthôngtinthêmđãđượcẩn(vídụ:những côngcụtìmkiếmtrênweb,tìmkiếmnângcao)41 PTITGIAO DiỆN ẢNH HƯỞNG TỚI NGƯỜI DÙNG RA SAO42 PTITNHỮNG YẾU TỐ, QUY TẮC ĐỂ NHẬN BIẾT MỘT GIAO DIỆN TỐT (TIẾP)43PTITNỘI DUNG HÔM NAY • Nhữngyếutốlàmnên1thiếtkếtốt • Nhữngbàihọcvídụ44 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT • Yếutốđểcó1thiếtkếtươngtáctốtgồm: –Độtintưởng –Sựphùhợp –Sựthôngminh –Sựphảnhồi –Sựtiệních –Sựthoảimái • Yếutốđểcó1thiếtkếtươngtáctốtgồm: –Độtintưởng –Sựphùhợp –Sựthôngminh –Sựphảnhồi –Sựtiệních –Sựthoảimái45 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT • Độtintưởng: –Khingườidùngsửdụngbấtkỳ1sảnphẩmtương tácnàohọphảitinchắclàsựsảnphẩmđócó sựtintưởngvàantoànnhấtđịnhThiếtkếcần phảitạođượcsựtintưởngchongườidùng(vídụ: sựchắcchắn,sựđảmbảoantoàn…) • Độtintưởng: –Khingườidùngsửdụngbấtkỳ1sảnphẩmtương tácnàohọphảitinchắclàsựsảnphẩmđócó sựtintưởngvàantoànnhấtđịnhThiếtkếcần phảitạođượcsựtintưởngchongườidùng(vídụ: sựchắcchắn,sựđảmbảoantoàn…)46 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT • Sựphùhợp: –Khithiếtkếcầnphảicósựphùhợpvớimôi trườngxungquanhvàvănhóacủađấtnướcbạn đangở. • Sựphùhợp: –Khithiếtkếcầnphảicósựphùhợpvớimôi trườngxungquanhvàvănhóacủađấtnướcbạn đangở.47 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT48 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT49 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT • Sựthôngminh: –Sựtiệníchcủanhữngsảnphẩmtươngtácsẽtăng tốiđatiệníchchongườidùng,vídụ:tìmkiếm googlesẽnhanhhơnrấtnhiềukhitìmtừngtrang web… • Sựthôngminh: –Sựtiệníchcủanhữngsảnphẩmtươngtácsẽtăng tốiđatiệníchchongườidùng,vídụ:tìmkiếm googlesẽnhanhhơnrấtnhiềukhitìmtừngtrang web…50 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT51 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT • Sựphảnhồi: –Nếumộtsảnphẩmthiếtkếtươngtáctốtsẽcần phảnhồinhanh,đúnglúcvàdễnhậnbiết(vídụ: khiđặtvéonlinehệthốngluôncóphảnhồibằng dòngchữBạnđãđặtvéthànhcông) –1thiếtkếđượccoicósựphảnhồitốtkhihệthống phảnhồitrongkhoảngthờigian8s–còngọilà quyluật8s (8 seconds rule) • Sựphảnhồi: –Nếumộtsảnphẩmthiếtkếtươngtáctốtsẽcần phảnhồinhanh,đúnglúcvàdễnhậnbiết(vídụ: khiđặtvéonlinehệthốngluôncóphảnhồibằng dòngchữBạnđãđặtvéthànhcông) –1thiếtkếđượccoicósựphảnhồitốtkhihệthống phảnhồitrongkhoảngthờigian8s–còngọilà quyluật8s (8 seconds rule)52 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT53 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT • Sựtiệních: –Mộtsảnphẩmcóthiếtkếtươngtáctốtlàsản phẩmgiúpngườidùngcảmthấynóhữuíchvào nhữngtrườnghợpcụthể(vídụ:khinghedialog tiếngAnh,máyngheđàiđềucónútRewindingđể tualại…) • Sựtiệních: –Mộtsảnphẩmcóthiếtkếtươngtáctốtlàsản phẩmgiúpngườidùngcảmthấynóhữuíchvào nhữngtrườnghợpcụthể(vídụ:khinghedialog tiếngAnh,máyngheđàiđềucónútRewindingđể tualại…)54 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT55 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT • Sựthoảimái: –Sựthoảimáisẽtạocảmgiáchìnhthànhthóiquen ngườidùngvàgâyấntượngtốtkhisửdụngsản phẩmcóthiếtkếđó(vídụ:phòngxônghơiluôn thiếtkếbằnggỗ…tạocảmgiáchúthơiẩmvàdễ chịu) • Sựthoảimái: –Sựthoảimáisẽtạocảmgiáchìnhthànhthóiquen ngườidùngvàgâyấntượngtốtkhisửdụngsản phẩmcóthiếtkếđó(vídụ:phòngxônghơiluôn thiếtkếbằnggỗ…tạocảmgiáchúthơiẩmvàdễ chịu)56 PTITNHỮNG YẾU TỐ LÀM NÊN 1 THIẾT KẾ TỐT57 PTITNHỮNG VÍ DỤ • Sinhviênđưaranhữngvídụmàchođólà thiếtkếtốtnhậnxét58 PTITVAI TRÒ CỦA THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN59PTITNỘI DUNG HÔM NAY • Thiếtkếtươngtáctrongkinhdoanh • Mụctiêucủathiếtkếtươngtác:Khảnăngsử dụngvàthóiquenngườidùng • Mốiliênhệcủathiếtkếtươngtácvànhững thiếtbịĐaphươngtiện • Thiếtkếtươngtáctrongkinhdoanh • Mụctiêucủathiếtkếtươngtác:Khảnăngsử dụngvàthóiquenngườidùng • Mốiliênhệcủathiếtkếtươngtácvànhững thiếtbịĐaphươngtiện60 PTITTHIẾT KẾ TƯƠNG TÁC TRONG KINH DOANH • Rấtnhiềucôngtyđãnhìnnhậnthiếtkếsản phẩmtươngtáclà1trongnhữngđịnhhướng chiếnlược • Chuyêngiathiếtkếtươngtáclàmộtnghềrất thịnhhành • Nghềbaogồmnhữngcôngviệc: –Sángtạo,thiếtkếvàxâydựngcácđoạnphimtrực tuyếnbaogồmphimquảngcáo,tròchơi,các trang webcókhảnăngtươngtáccao… • Rấtnhiềucôngtyđãnhìnnhậnthiếtkếsản phẩmtươngtáclà1trongnhữngđịnhhướng chiếnlược • Chuyêngiathiếtkếtươngtáclàmộtnghềrất thịnhhành • Nghềbaogồmnhữngcôngviệc: –Sángtạo,thiếtkếvàxâydựngcácđoạnphimtrực tuyếnbaogồmphimquảngcáo,tròchơi,các trang webcókhảnăngtươngtáccao…61 PTITTHIẾT KẾ TƯƠNG TÁC TRONG KINH DOANH• Vídụ: –CôngtythờitrangquầnáoDOT.COMđãbịphá sảnvìlýdokhôngcoitrọngthiếtkếtươngtác trongviệckinhdoanh. –Mụctiêucủacôngtytậptrungvàogiaodiệnhình họa3D,nhưngkhôngtínhđếnthờigiandownload lâuvàđộphứctạpkhiđăngkýform online  kháchhàngthấtvọngchỉsửdụng1lầnvà khôngbaogiờquaylại. • Vídụ: –CôngtythờitrangquầnáoDOT.COMđãbịphá sảnvìlýdokhôngcoitrọngthiếtkếtươngtác trongviệckinhdoanh. –Mụctiêucủacôngtytậptrungvàogiaodiệnhình họa3D,nhưngkhôngtínhđếnthờigiandownload lâuvàđộphứctạpkhiđăngkýform online  kháchhàngthấtvọngchỉsửdụng1lầnvà khôngbaogiờquaylại.62 PTITTHIẾT KẾ TƯƠNG TÁC TRONG KINH DOANH • Sựhòanhậpcủacôngviệcthiếtkế: – Nhàthiếtkếtươngtác:lànhữngngườiphụtráchtoàn bộnhữngmảngthiếtkếtươngtáccủacácsảnphẩm, khôngchỉdừnglạithiếtkếgiaodiện. – Kỹsưvềhiệusuất:lànhữngngườitậptrungvàokhả năngsửdụng,ướclượngcủasảnphẩm,ápdụng nhữngphươngphápđểthựcthi – Nhàthiếtkếwebsite:lànhữngngườixâydựngkế hoạchvàcấutrúccủasảnphẩm,đặcbiệtlàwebsite – NhàthiếtkếUX:lànhữngngườilàmtấtcảcôngviệcở trênvàcũnglàngườiđưaranghiêncứuthiếtkếcủa sảnphẩm. • Sựhòanhậpcủacôngviệcthiếtkế: – Nhàthiếtkếtươngtác:lànhữngngườiphụtráchtoàn bộnhữngmảngthiếtkếtươngtáccủacácsảnphẩm, khôngchỉdừnglạithiếtkếgiaodiện. – Kỹsưvềhiệusuất:lànhữngngườitậptrungvàokhả năngsửdụng,ướclượngcủasảnphẩm,ápdụng nhữngphươngphápđểthựcthi – Nhàthiếtkếwebsite:lànhữngngườixâydựngkế hoạchvàcấutrúccủasảnphẩm,đặcbiệtlàwebsite – NhàthiếtkếUX:lànhữngngườilàmtấtcảcôngviệcở trênvàcũnglàngườiđưaranghiêncứuthiếtkếcủa sảnphẩm.63 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC • Khảnăngsửdụng(Usability) –Hiệuquảsửdụng –Hiệusuấtsửdụng –Độantoànsửdụng –Tiệníchsửdụng –Dễhiểu –Dễnhớ • Khảnăngsửdụng(Usability) –Hiệuquảsửdụng –Hiệusuấtsửdụng –Độantoànsửdụng –Tiệníchsửdụng –Dễhiểu –Dễnhớ64 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC • Hiệuquảsửdụng: –Làmụctiêurấtrộngvànóliênhệtớinhữngthiết kếtốtnhưthếnàothôngquaviệcthiếtkếsản phẩmđócóthểhướngdẫnngườidùngrasaovà chỉchongườidùnglàmthếnào • Hiệuquảsửdụng: –Làmụctiêurấtrộngvànóliênhệtớinhữngthiết kếtốtnhưthếnàothôngquaviệcthiếtkếsản phẩmđócóthểhướngdẫnngườidùngrasaovà chỉchongườidùnglàmthếnào65 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC • Hiệusuấtsửdụng: –Làcáchthiếtkếhướngđếnhỗtrợngườisửdụng thựchiệnđượcmụcđíchcủahọnhanhnhất –Vídụ:nghetinnhắnthoạithiếtkếphảigiảm thiểutốiđasốbướcthựchiệnđểđạtđượcmục tiêu • Hiệusuấtsửdụng: –Làcáchthiếtkếhướngđếnhỗtrợngườisửdụng thựchiệnđượcmụcđíchcủahọnhanhnhất –Vídụ:nghetinnhắnthoạithiếtkếphảigiảm thiểutốiđasốbướcthựchiệnđểđạtđượcmục tiêu66 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC • Độantoànsửdụng: –Làcáchthiếtkếnhằmbảovệngườidùngkhisử dụngnhữngsảnphẩmĐaphươngtiện;luôncó nhữnglưuýhoặcnhữngphươngánhỗtrợnhằm đảmbảosựantoàncủangườidùng –Vídụ:KhichụpXquangthìbộphầnđiềukhiển luônđượcnốicùngmáytínhđểcóthểtựđộng ngắtkhigặpsựcố;hoặcnhữngnútbáohiệunguy hiểmrấtrõràng • Độantoànsửdụng: –Làcáchthiếtkếnhằmbảovệngườidùngkhisử dụngnhữngsảnphẩmĐaphươngtiện;luôncó nhữnglưuýhoặcnhữngphươngánhỗtrợnhằm đảmbảosựantoàncủangườidùng –Vídụ:KhichụpXquangthìbộphầnđiềukhiển luônđượcnốicùngmáytínhđểcóthểtựđộng ngắtkhigặpsựcố;hoặcnhữngnútbáohiệunguy hiểmrấtrõràng67 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC68 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC • Dễhiểuvàdễnhớ: –Làcáchthiếtkếgiúpngườidùngcóthểsửdụng sảnphẩmtheocáchđơngiảnnhất –Thờigianđểngườidùnghiểuvàsửdụng1sản phẩmtươngtácđơngiảnchỉnêntrongvòng10 phút(trừnhữnghệthốnghoặcsảnphẩmphức tạp) • Dễhiểuvàdễnhớ: –Làcáchthiếtkếgiúpngườidùngcóthểsửdụng sảnphẩmtheocáchđơngiảnnhất –Thờigianđểngườidùnghiểuvàsửdụng1sản phẩmtươngtácđơngiảnchỉnêntrongvòng10 phút(trừnhữnghệthốnghoặcsảnphẩmphức tạp)69 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC • Thóiquenngườidùng(User–experience): –Sựthỏamãn –Sựthíchthú –Vuivẻ –Giảitrí –Cóích –Thoảimái –Cóđộnglực • Thóiquenngườidùng(User–experience): –Sựthỏamãn –Sựthíchthú –Vuivẻ –Giảitrí –Cóích –Thoảimái –Cóđộnglực70 PTITMỤC TIÊU CỦA THIẾT KẾ TƯƠNG TÁC71 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN • Biểutượng(icon)cũngcầnápdụngnhưng tiêuchícủakhảnăngsửdụng: –Gầngũi –Rõràngvàđặctrưng –Đơngiản –Ổnđịnh(đồngnhất) –Trựctiếp –Hiệusuất • Biểutượng(icon)cũngcầnápdụngnhưng tiêuchícủakhảnăngsửdụng: –Gầngũi –Rõràngvàđặctrưng –Đơngiản –Ổnđịnh(đồngnhất) –Trựctiếp –Hiệusuất72 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN • Biểutượng(icon)cũngcầnchúýđếnnhững yếutốsau: –Môitrườngmàbiểutượngsửdụng –Sựmongđợicủangườidùng –Độphứctạpcủanhiệmvụ • Biểutượng(icon)cũngcầnchúýđếnnhững yếutốsau: –Môitrườngmàbiểutượngsửdụng –Sựmongđợicủangườidùng –Độphứctạpcủanhiệmvụ73 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN74 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN75 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN76 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN • Mộtbiểutượng(icon)đượccoilàthànhcông nếu: –Nhìnkhácsovớinhữngbiểutượngkhác –Thểhiệnrõnộidungmuốnnói –Cóthểnhậnrakhiđộphângiảinhỏhơn16px –Đềuthểhiệnrõtạiđentrắnghoặcmàu • Mộtbiểutượng(icon)đượccoilàthànhcông nếu: –Nhìnkhácsovớinhữngbiểutượngkhác –Thểhiệnrõnộidungmuốnnói –Cóthểnhậnrakhiđộphângiảinhỏhơn16px –Đềuthểhiệnrõtạiđentrắnghoặcmàu77 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN • Màusắccũngđượcsửdụngrấtnhiềutrong thiếtkếtươngtác,mỗimàusắccónhữngquy luậtsửdụng,mụcđíchvàcáchkếthợpriêng. • Vídụ: –Thểhiệnhànhđộngvàviệccầnthiết,nhưngtông màunêndùnglàmàuấmnhư:đỏ,vàngvàcam –Thểhiệnmàunềnđểhiệnthịthôngtinnêndùng tôngmầulạnhnhư:xanhlá,xanhbiển,tím… • Màusắccũngđượcsửdụngrấtnhiềutrong thiếtkếtươngtác,mỗimàusắccónhữngquy luậtsửdụng,mụcđíchvàcáchkếthợpriêng. • Vídụ: –Thểhiệnhànhđộngvàviệccầnthiết,nhưngtông màunêndùnglàmàuấmnhư:đỏ,vàngvàcam –Thểhiệnmàunềnđểhiệnthịthôngtinnêndùng tôngmầulạnhnhư:xanhlá,xanhbiển,tím…78 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN79 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN • Vănbản: –Vănbảnhoặctinnhắncầnphảingắngọn,đơn giản –Giớihạnkhôngquá20từtrong1câu –Giớihạnkhôngquá6câutrong1vănbản • Vănbản: –Vănbảnhoặctinnhắncầnphảingắngọn,đơn giản –Giớihạnkhôngquá20từtrong1câu –Giớihạnkhôngquá6câutrong1vănbản80 PTITMỐI LIÊN HỆ GiỮA THIẾT KẾ TƯƠNG TÁC VÀ THIẾT BỊ ĐA PHƯƠNG TiỆN81 PTITGIỚI THIỆU CÁC DẠNG TƯƠNG TÁC82PTITNỘI DUNG HÔM NAY • GiaotiếpdạngMenu selection • GiaotiếpdạngAudio Menu • GiaotiếpdạngMenutrongmànhìnhnhỏ • Giaotiếpdạnghỏiđáptruyvấn • Giaotiếpdạngđiềntheomẫu • Điềukhiểntrựctiếpvangữcảnhtươngtác • WIMP • GiaotiếpdạngMenu selection • GiaotiếpdạngAudio Menu • GiaotiếpdạngMenutrongmànhìnhnhỏ • Giaotiếpdạnghỏiđáptruyvấn • Giaotiếpdạngđiềntheomẫu • Điềukhiểntrựctiếpvangữcảnhtươngtác • WIMP83 PTITGIAO TiẾP DẠNG MENU SELECTION • Có3dạngmenu haysửdụng: –Menuđơn(single menu) –Menucấutrúcnganghàng(linear menu) –Menucấutrúccây(tree structured menu) • Có3dạngmenu haysửdụng: –Menuđơn(single menu) –Menucấutrúcnganghàng(linear menu) –Menucấutrúccây(tree structured menu)84 PTITGIAO TiẾP DẠNG MENU SELECTION85 PTITGIAO TiẾP DẠNG MENU SELECTION • Ưuđiểm: –Giaotiếpnàythíchhợpvớingườidùngkhông thườngxuyên –Tốnítcôngđàotạo • Nhượcđiểm: –Chiếmkhônggianmànhình –Thiếutínhmềmdẻo(ngườidùngchỉđượcsử dụngnhữngcáiđãcósẵntrênmenu

P T IT THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN GiỚI THIỆU MÔN HỌC Thiết kế tương tác Đa phương T IT CDT1425 24 tiết tiết tiết Có hướng dẫn P • Tên mơn học: tiện • Mã mơn học: • Số tín chỉ: • Lý thuyết: • Thảo luận: • Thực hành: • Tự học: ĐÁNH GIÁ MÔN HỌC IT 10% (cá nhân) 10% (cá nhân) 30% (nhóm) 50% (cá nhân) T Tích cực thảo luận: Kiểm tra kỳ: Bài tập lớn: Kiểm tra cuối kỳ: P • • • • THƠNG TIN GiẢNG VIÊN T IT ThS Phí Cơng Huy huypc@cdit.com.vn 0949198889 P • Giảng viên: • E-mail: • Contact: U CẦU P T IT • Tinh thần đóng góp ý kiến 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 tập lớn hạn ĐỀ CƯƠNG KHĨA HỌC IT • Chương 1: Tổng quan thiết kế tương tác thiết kế tương tác Đa phương tiện P T • Chương 2: Quy trình thiết kế tương tác • Chương 3: Giới thiệu việc đánh giá thiết kế tương tác CÁC NGUỒN THAM KHẢO • Sách nên đọc: P • Sách tham khảo: T IT – Interaction Design Beyond Human-Computer Interaction tác giả Yvonne Rogers, Helen Sharp, Jenny Preece – Essential guide to User interface design tác giả Wilbert O Galitz – Tương tác người – máy tác giả Lương Mạnh Bá – 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 NỘI DUNG HƠM NAY • Các khái niệm thiết kế tương tác T IT • Các khái niệm thiết kế tương tác Đa phương tiện P • Mối liên hệ thiết kế tương tác thiết kế Đa phương tiện • Những ví dụ THIẾT KẾ TƯƠNG TÁC • Tương tác hiểu nào? IT – Tương tác hiểu chung phản hồi từ phía (ở người dùng sản phẩm) T • Những sản phẩm tương tác gồm: P – Điện thoại, máy tính, điều khiển, ATM, máy photocopy… P T IT THIẾT KẾ TƯƠNG TÁC 10