Bài tập lớn học phần Thiết kế tương tác đa phương tiện nâng cao HVCNBCVT 72021

Bài tập lớn của học phần Thiết kế tương tác đa phương tiện nâng cao khoa Đa phương tiện Học viện Công nghệ Bưu chính Viễn thông. Tài liệu được hoàn thành vào tháng 7 năm 2021. Nội dung chủ yếu về lĩnh vực thiết kế giao diện và trải nghiệm người dùng (UIUX).

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ TƯƠNG TÁC ĐA PHƯƠNG TIỆN NÂNG CAO Giảng viên hướng dẫn: ThS … Sinh viên thực hiện: Họ tên: DỖN CƠNG THẾ Mã sinh viên: … Nhóm lớp: 01 Hà Nội, 7/2021 MỤC LỤC Câu Câu Câu Câu Câu Câu Câu Câu 11 Câu 12 Câu 10 16 Lời cảm ơn 20 Câu 1: a) Thiết kế Tinder làm cho mong đợi cảm xúc hẹn hò trở nên dễ dàng Gam màu tươi sáng hình ảnh động vui tươi giúp tạo nhiều cảm xúc lạc quan, vui vẻ cho người dùng Nhìn chung, người thích dễ thực Ở Tinder, nhà thiết kế tối ưu hoá giao diện, loại bỏ nhiều bước khó khăn phức tạp để mang người đến với nhanh đồng thời cung cấp cho họ nhóm đối tượng lớn người dùng dễ dàng thoải mái thao tác với ứng dụng Thiết kế với vuốt tay vô tận giúp tính tị mị (trong việc khám phá nội dung mới) người dùng thoả mãn đáp ứng liền mạch, không bị ngắt quãng hay phân tâm Tinder làm điều giá trị khai thác cảm xúc người: ngạc nhiên Trong chương sách có tên “Cách người cảm nhận” “100 điều nhà thiết kế cần biết người”, tác giả Susan Weinschenk có viết: Con người lập trình để tận hưởng bất ngờ Sự bất ngờ Tinder người dùng thơng báo họ ghép đôi với người dùng khác họ ấn chọn họ đối phương chọn trước họ chọn người Chính cảm xúc bất ngờ tích cực điều đáng giá trải nghiệm sử dụng Tinder, giúp ứng dụng giữ chân người dùng b) Kịch Tình Adam thấy Eva thực đối Diễn biến Tại giao Adam liên diện ghép lạc với Eva đôi, Adam để đặt lịch ấn vào nút “Gửi tin hẹn Một cửa sổ lên để Adam chọn Tinder đưa Adam đến giao diện ứng dụng Adam đóng ứng dụng Facebook Messeng tượng lý tưởng Kết mong muốn Adam trị chuyện với Eva hai người thống với buổi hẹn bên Kịch Tình Adam thấy Eva đối tượng phù hợp với nhắn” Adam chưa biết trước Eva người nên xem thêm số thơng tin trước trị chuyện phương tiện gửi tin nhắn Adam chọn gửi tin nhắn cho Eva qua Faceboo k Messeng er Facebook Messenge r với khung chat dành cho Eva Adam bắt đầu trò chuyện với Eva Hai người thống buổi hẹn er Tinder Adam xem thêm thông tin Eva giao diện profile cô Adam thấy Eva mẫu người phù hợp với Adam quay trở lại giao diện ghép đôi Tại giao diện ghép đôi, Adam ấn vào nút “Gửi tin nhắn” để thực trò chuyện với Eva Diễn biến Tại giao diện ghép đôi, Adam ấn vào profile Eva Kết mong muốn Adam hiểu rõ người Eva trước trị chuyện với Kịch Tình Diễn biến Tại giao diện ghép đôi, Adam ấn vào nút Adam Vì lý khơng mà “Quay lại giao diện chính” thấy Adam hứng thú khơng với kết muốn thực ghép ghép đôi đôi với Eva Tại giao diện chính, Adam tiếp tục vuốt để chọn đối tượng phù hợp Kết mong muốn Được quay trở lại giao diện để chọn đối tượng khác Kịch Tình Diễn biến Tại giao Adam Adam băn diện ghép đôi, Adam muốn khoăn chia sẻ ấn vào nút “Chia sẻ với thơng tin có nên ghép đơi hẹn hị với với Eva không người bạn” bạn nên muốn hỏi ý kiến Một cửa sổ pop-up đưa cho Adam phương thức chia sẻ Adam nhấn chọn chia sẻ qua tin nhắn Zalo Tinder chuyển đến giao diện nhắn tin Zalo, Adam chọn người bạn thân để chia sẻ kết ghép đơi trị chuyện người bạn than Kết mong muốn Được trao đổi với người bạn thân kết ghép đơi Câu 2: a) Trong trường hợp này, cô Alex mắc phải lỗi phổ biến lỗi trình bày, thiết kế Bản thân giao diện chưa tối ưu kết hợp với việc Alex đọc lướt thơng tin tâm trạng có phần bối rối khơng tìm địa trước dẫn tới việc khơng tìm thơng tin cần thiết Đây loại lỗi tiêu cực gây kết không tốt mà cụ thể việc Alex không nắm bắt hiểu sai thông tin dẫn đến hậu tiền oan Chắc hẳn Alex có ấn tượng xấu Klook, ảnh hưởng trực tiếp đến định sử dụng dịch vụ sau cô b) Để giải lỗi người dùng, Klook cần cải thiện lại việc phân cấp thơng tin thiết kế Ví dụ phần liên hệ để tiêu đề “Contact Us” có nhiều người nghĩ phần chứa thơng tin liên hệ với phía Klook khơng bao gồm thơng tin liên hệ với phía nhà hàng Vì chia phần thành phần riêng biệt cho bên đại diện để người dùng dễ nhận biết Thực chất, khả người dùng liên hệ với phía nhà hàng cao nên cân nhắc để phần bên dễ tiếp cận so với phần liên hệ với phía Klook Ngồi nên sử dụng thêm biểu tượng (icon) hay hình ảnh để việc nhận biết người dùng trở nên dễ dàng nhanh chóng thay dùng tiêu đề chữ Ví dụ phần liên hệ sử dụng icon hình điện thoại,… Hơn nữa, thiết kế phần liên hệ thành dạng bong bóng ln hiển thị giao diện để người dùng dễ dàng tiếp cận Việc bị choáng ngợp nhiều thông tin giao diện voucher khiến người dùng tập trung khó khăn đưa định Do nên hiển thị thông tin thực cần thiết MỜI BẠN TẢI XUỐNG ĐỂ XEM TIẾP Giao diện cũ Giao diện Câu 5: a) Khi sử dụng ứng dụng này, động để người dùng thực hành động động cảm giác (Sensation) động mong đợi (Anticipation) Cụ thể, người dùng muốn tự tay làm ăn ngon dựa công thức mà ứng dụng đưa Giải vấn đề dù trước họ khơng biết cách nấu cuối tự nấu thực đơn mong muốn Giúp họ tự tin việc nấu nướng khơng cịn coi khó khăn hay nỗi sợ Giao diện ứng dụng dễ sử dụng Được chia thành phần Phần tìm kiếm thực đơn Người dùng dễ dàng ấn vào để gõ tìm thực đơn mong muốn Phần có lẽ số thực đơn bật Người dùng nhanh chóng ấn vào thực đơn để làm theo Phần cuối danh mục thực đơn phân loại Người dùng dễ dàng ấn vào danh mục để chọn thực đơn mong muốn Tất hoạt động quen thuộc, nhanh chóng, miễn phí khơng cần nhiều thao tác hay phải động não nhiều 13 Về yếu tố kích hoạt, ứng dụng dựa thơng tin thực đơn gần người dùng để đưa thông báo đề xuất thực đơn tương tự Đây kích hoạt kiểu tín hiệu (Facilitator) mà người dùng thực muốn nấu ăn dễ dàng làm theo thực đơn Trường hợp người dùng thiếu động lực (lâu khơng sử dụng ứng dụng) dùng kích hoạt kiểu khơi mào (Signal) để đưa thực đơn hấp dẫn dễ thực Với người dùng có động lực nấu thực đơn phức tạp cần kích hoạt kiểu hướng dẫn (Spark) để họ dễ dàng làm theo Ngồi ra, đơi người dùng thấy người khác nấu ăn ngon tâm trí họ nảy sinh ham muốn làm ăn nên mở ứng dụng để tìm dẫn Đây yếu tố kích hoạt bên b) Giao diện cũ Giao diện Câu 6: a) Khi sử dụng ứng dụng này, động để người dùng thực hành động động cảm giác (Sensation) Cụ thể, người dùng muốn thưởng thức 14 nhạc để họ có thư giãn giảm bớt căng thẳng công việc Giao diện ứng dụng dễ sử dụng Các danh mục chia thành tab phía trên, dễ dàng truy cập Danh sách hát có nhiều tuỳ chọn Thanh tìm kiếm theo ký tự đầu giúp trình tìm kiếm diễn nhanh chóng, tiện lợi Thanh trình phát nhạc bên dễ tiếp cận với nút điều hướng trực quan Khi ứng dụng chế độ chạy ngầm, trình phát nhạc xuất trạng thái điện thoại nên người dùng dễ thao tác Thông thường, ứng dụng dùng phương thức kích hoạt bên trong, người dùng chủ động sử dụng để thoả mãn nhu cầu việc nghe nhạc trở thành thói quen họ b) Giao diện cũ Giao diện Câu 7: a) Khi sử dụng ứng dụng này, động để người dùng thực hành động động cảm giác (Sensation), động mong đợi (Anticipation) động liên kết 15 xã hội (Social cohesion) Cụ thể, người dùng mong muốn tra cứu ngày âm cách nhanh chóng, tiện lợi thoải mái Họ không cần phải cất cơng tìm lịch treo tường để tra cứu Họ muốn giải vấn đề thường xuyên bị lỡ lịch chức thông báo để họ khơng cịn bận tâm chuyện Khi nhắc nhở thế, họ làm chủ lịch trình kiện đặc biệt để kết nối với cộng đồng Giao diện ứng dụng tương đối dễ dùng Các tab bên bố trí khoa học, dễ thao tác Ngay mở ứng dụng lên, tab Trang chủ hiển thị thông tin ngày âm nên người dùng không cần tốn thêm thao tác thời gian Việc đẩy thông báo kiện quan trọng hoàn toàn tự động nên người dùng không lo chúng bị bỏ lỡ Về yếu tố kích hoạt bên ngồi, ứng dụng thông báo đẩy kiện đặc biệt tới yêu cầu người dùng ấn vào để xem thơng tin chi tiết Đây kích hoạt dạng khơi mào (Signal) Các chức “Đổi ngày”, “Tạo kiện”, “Xem ngày tốt” thiết kế dạng nút bấm hình thức kích hoạt dạng tín hiệu (Facilitator) người dùng có nhu cầu b) 16 Giao diện cũ Giao diện Câu 8: a) Khi sử dụng ứng dụng này, động để người dùng thực hành động động cảm giác (Sensation), động mong đợi (Anticipation) động liên kết xã hội (Social cohesion) Cụ thể, người dùng mong muốn có trải nghiệm đặt bàn tiện lợi nhanh chóng, tiết kiệm thời gian, cơng sức tiền bạc so với hình thức đặt bàn truyền thống Thông tin đặt bàn thực đơn cập nhật xác nhanh chóng khiến người dùng khơng cịn lo lắng hay hoang mang dịch vụ Các thông tin ưu đãi cập nhật thường xuyên, đảm bảo cho người dùng thông tin nhanh chóng khách hàng khác Giao diện ứng dụng thiết kế sạch, tập trung vào chức Nút “Đặt bàn” thiết kế bật, dễ nhận diện Chức quét mã QR điểm cộng cho ứng dụng tính tiện lợi nhanh chóng Hình ảnh thực đơn rõ ràng, trực quan Các nút bố trí vị trí hợp lý, khơng q khó để với tới thao tác tay Ứng dụng có riêng tab cho phần thơng báo Yếu tố kích hoạt khơi mào (Signal) phát huy hiệu ứng dụng gửi thông báo đẩy lời mời tham gia chương trình ưu đãi cho người dùng Với người dùng mới, cách thức đặt bàn gọi khó khăn, việc đưa kích hoạt hướng dẫn (Spark) cần thiết Trong giao diện trang chủ, nút “Đặt bàn” dạng kích hoạt tín hiệu (Facilitator) thu hút người dùng hành động b) 17 Giao diện cũ Giao diện Câu 9: a) Các câu hỏi tích cực: Q1, Q3, Q5, Q7, Q9 Các câu hỏi tiêu cực: Q2, Q4, Q6, Q8, Q10 p41= Giá trị đại diện cho trọng số câu trả lời i=4 người trả lời j=1 b) Chỉ số hài lòng người sử dụng sản phẩm là: = = 62,71% 18 Trung bình mức độ hài lòng người dùng câu hỏi 4.0 3.50 3.5 3.0 3.00 2.92 2.75 2.67 2.5 2.67 2.25 2.0 2.17 1.83 1.5 1.33 1.0 0.5 0.0 Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Q10 Biểu đồ Mức độ hài lòng ng ười dùng phân t heo loại câu hỏi Tích cực Tiêu cực 30 25 12 10 9 13 10 12 11 20 15 12 17 18 16 15 15 16 13 10 14 14 14 P7 P8 P9 13 13 P1 P2 P3 P4 P5 P6 Biểu đồ 19 P10 P11 P12 Tương quan độ hài lịng câu hỏi tích cực độ khơng hài lịng câu hỏi tiêu cựccủa người dùng 20 18 18 16 17 16 14 12 15 13 11 10 11 6 4 14 13 10 16 15 14 13 11 13 11 14 7 8 P2 P3 P4 Tích cực P5 P1 10 P6 P7 Tiêu cực (khơng hài lịng) Biểu đồ 20 P8 P9 Độ chênh lệch P10 P11 P12 Bảng số liệu để đo mức độ thoả mãn người dùng (Truy cập đường dẫn sau để xem chi tiết: https://tinyurl.com/solieucau9 ) c) Theo số hài lòng người dùng tính phần a, số 62,71% cho thấy kết tốt (so với mức tiêu chuẩn 80%) Điểm số 75,25 đạt gần đến mức thoả mãn Theo biểu đồ 1, câu hỏi tích cực, trung bình điểm hài lịng đạt cao câu số (3,5 điểm) thấp câu số (2,67 điểm) Ở câu hỏi tiêu cực, trung bình điểm hài lịng đạt cao câu số 10 (2,67 điểm) thấp câu số (1,33 điểm) Cần tập trung cải thiện sản phẩm câu hỏi có độ hài lòng thấp Biểu đồ cho thấy người có mức độ hài lịng cao người số 11 (tổng 28 điểm/40 điểm), mức độ hài lòng thấp thuộc người số số 10 (tổng 21 điểm/40 điểm) Khoảng 21 cách chênh lệch không lớn cần cải thiện Biểu đồ làm rõ mức độ hài lịng khơng hài lịng người dùng Dấu hiệu tích cực người dùng có điểm số tích cực cao điểm số tiêu cực Tuy nhiên, mức độ chênh lệch thấp Độ chênh lệch cao thuộc người số 11 với điểm thấp thuộc người số 10 với điểm Cần làm tăng độ chênh lệch cách tăng độ hài lòng giảm độ khơng hài lịng để cải thiện sản phẩm Câu 10: a) Trong cơng thức từ đề bài, tij có nghĩa thời gian người dùng j thực nhiệm vụ i t17 = 210 Người dùng dành 210 giây để thực nhiệm vụ Theo liệu biểu đồ cho thấy nhiệm vụ khơng hồn thành b) Chỉ số hiệu sử dụng (Efficiency) là: = = 0.0113 (tác vụ/giây) 22 T h i l ượ n g t r un g b ì n h đ ể t h ực h i ệ n m ỗ i t c vụ 160 147.17 140 127.75 120 108.92 103.50 100 80 62.83 60 40 20 Task Task Task Task Task Đơn vị: s (g iây) Biểu đồ Thời lượng dành cho tác vụ người thực hành công không thành công Thực thành công Thực không thành công Mức chênh lệch 1400 1198 1200 930 1000 800 600 702 801 603 540 568 630 506 364 390 400 200 -200 -400 162 Task Task Task Task -295 -327 -600 Biểu đồ 23 Task 5-26 Tương quan thời gian người dùng dành cho tác vụ thành công không thành công Tác vụ thành công Tác vụ không thành công Mức chênh lệch 800 P6 P7 P9 P10 -419 -400 -600 Biểu đồ 24 335 186 208 350 352 216 136 121 90 P8 P11 P12 -149 P5 -142 P4 P3 -306 -200 P2 -145 P1 -36 427 460 370 412 59 115 147 120 267 270 125 164 200 269 210 412 534 400 294 330 400 564 600 + Bảng số liệu để đo tính hiệu thực tác vụ (Truy cập đường dẫn sau để xem chi tiết: https://tinyurl.com/solieucau10 ) c) Theo biểu đồ 4, thời gian người dùng dành cho tác vụ nhiều (trung bình 147,17 giây) tác vụ (trung bình 62,83 giây) Cần tìm hiểu cải thiện thời gian thực tác vụ tác vụ Ở biểu đồ 5, tác vụ 3, người thực thành công bỏ nhiều thời gian để thực người thực không thành công Độ chênh lệch thể rõ tác vụ Trong đó, tác vụ 2, người thực thành cơng bỏ thời gian để thực người 25 thực không thành công Độ chênh lệch thể rõ tác vụ Ở biểu đồ 6, với cột mức chênh lệch có giá trị dương người số 2, 5, 6, 7, 8, 10 họ bỏ thời gian để làm tác vụ thành công nhiều so với tác vụ không thành công (thể rõ người số 6) Với cột mức chênh lệch có giá trị âm người số 1, 3, 4, 9, 11, 12 họ bỏ thời gian để làm tác vụ thành cơng so với tác vụ không thành công (thể rõ người số 4) 26 LỜI CẢM ƠN Thiết kế tương tác đa phương tiện nâng cao học phần mà em yêu thích theo học chuyên ngành Thiết kế Đa phương tiện Học viện Cơng nghệ Bưu Viễn thông Học phần cung cấp tảng vững kiến thức kỹ lĩnh vực thiết kế trải nghiệm người dùng cho sinh viên người định hướng theo ngành UI/UX Design em Trong suốt trình học tập, em cảm nhận nhiệt tình tâm huyết cách giảng dạy thầy… cô … Cả hai thầy cô với chuyên môn vững vàng truyền đạt cho em kiến thức mà em cho tảng để em tự tin, sẵn sàng bước chân vào phát triển nghiệp UI/UX Em xin chân thành cảm ơn! Hà Nội, ngày 25 tháng năm 2021 Sinh viên Thế Dỗn Cơng Thế 27