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ọ và tên: DOÃN CÔNG THẾ

Mã sinh viên: … Nhóm lớp: 01

Hà Nội, 7/2021

0

Câu 1:

a)

Thiết kế của Tinder làm cho những mong đợi và cảm xúc

của cuộc hẹn hò trở nên dễ dàng hơn Gam màu tươi sáng và

những hình ảnh động vui tươi giúp tạo ra nhiều cảm xúc lạc

quan, vui vẻ cho người dùng

Nhìn chung, con người thích những gì dễ thực hiện Ở

Tinder, nhà thiết kế đã tối ưu hoá giao diện, loại bỏ rất nhiều

bước khó khăn và phức tạp để mang mọi người đến với nhau

nhanh hơn đồng thời cung cấp cho họ một nhóm đối tượng lớn

hơn bởi người dùng rất dễ dàng và thoải mái khi thao tác với

ứng dụng Thiết kế với những cái vuốt tay vô tận giúp tính tò

mò (trong việc khám phá những nội dung mới) của người dùng

được thoả mãn và đáp ứng liền mạch, không bị ngắt quãng hay

phân tâm

Tinder đã làm một điều rất giá trị đó là khai thác được một

trong những cảm xúc cơ bản của con người: sự ngạc nhiên

Trong chương sách có tên “Cách con người cảm nhận” của cuốn

“100 điều nhà thiết kế cần biết về con người”, tác giả Susan

Weinschenk có viết: Con người được lập trình để tận hưởng sự

bất ngờ Sự bất ngờ của Tinder đó là khi người dùng được thông

báo rằng họ đã được ghép đôi với một người dùng khác bởi họ

đã ấn chọn nhau trong khi họ không hề biết đối phương cũng

chọn mình trước khi họ chọn người đó Chính cảm xúc bất ngờ

tích cực này là điều đáng giá trong trải nghiệm sử dụng của

Tinder, giúp ứng dụng này giữ chân được người dùng

Adam liên lạc với Eva

để đặt lịchhẹn

Diễn biến

Tại giao diện ghép đôi, Adam

ấn vào nút

“Gửi tin nhắn”

Một cửa

sổ hiện lên để Adam chọn phương tiện gửi tin nhắn

Adam

Tinder đưa Adamđến giao diện ứng dụng Facebook Messenge

r với khung

Adamđóng ứngdụngFacebookMesseng

er vàTinder

Kết quả mong muốn

2

Adam tròchuyệnđược vớiEva và haingười

thốngnhất đượcvới nhau

về mộtbuổi hẹn ởbên ngoài

chọn gửitin nhắn cho Eva qua Faceboo

k Messenger

chat dànhcho Eva

Adam bắt đầu trò chuyện với Eva

Hai người thống nhất được

về buổi hẹn

Adam chưa biết trước Eva

là người thế nào nên xem thêm một

số thông tin về cô trước khi trò

chuyện

Diễn biến

Tại giao diện ghép đôi, Adam

ấn vào profile của Eva

Adam xem thêm thông tincủa Eva tại giao diện profile của cô ấy

Adam thấy Eva

là mẫu người phùhợp với mình

Adam quay trở lại giao diện ghépđôi

Tại giaodiện

ghép đôi,Adam ấnvào nút

“Gửi tinnhắn” đểthực hiệntrò

chuyệnvới Eva

Kết quả mong muốn

Adam hiểu

rõ hơn vềcon ngườiEva trướckhi tròchuyệnvới cô ấy

Diễn biến

3

Vì lý do nào đó màAdam không muốn thựchiện ghép đôi với Eva.

Tại giao diện ghép đôi, Adam ấn vào nút

“Quay lại giao diện chính”

Tại giao diện chính,Adam tiếp tục vuốt

để chọn đối tượngphù hợp

Kết quả mong muốn

Được quaytrở lại giaodiện chính

để chọnđối tượngkhác

Adam băn khoăn không biết

có nên hẹn hò vớiEva khôngnên muốn hỏi ý kiến của một người bạn than

Diễn biến

Tại giao diện ghép đôi, Adam

ấn vào nút

“Chia sẻ vớinhững

người bạn”

Một cửa sổ pop-up hiện rađưa cho Adam những phương thức chia sẻ

Adam nhấn chọn chia sẻ qua tin nhắn Zalo

Tinder chuyểnđến giao diệnnhắn tin củaZalo, Adamchọn người bạnthân đó để chia

sẻ kết quảghép đôi và tròchuyện

Kết quả mong muốn

Được traođổi với

4

người bạnthân đó vềkết quảghép đôinày.

Câu 2:

a)

Trong trường hợp này, cô Alex đã mắc phải một lỗi khá phổ biến đó là lỗi

do trình bày, thiết kế Bản thân giao diện này chưa được tối ưu kết hợp với việcAlex đã đọc lướt thông tin trong một tâm trạng có phần bối rối vì không tìmđược địa chỉ trước đó dẫn tới việc cô không tìm được thông tin cần thiết

Đây là loại lỗi tiêu cực vì gây ra kết quả không tốt mà cụ thể ở đây là việcAlex đã không nắm bắt được hoặc hiểu sai thông tin dẫn đến hậu quả mất tiềnoan Chắc hẳn Alex đã có một ấn tượng xấu về Klook, ảnh hưởng trực tiếp đếnquyết định sử dụng dịch vụ sau này của cô

b)

Để giải quyết được lỗi này của người dùng, Klook cần cải thiện lại việcphân cấp thông tin trong thiết kế Ví dụ như phần liên hệ để tiêu đề là “ContactUs” thì sẽ có nhiều người chỉ nghĩ rằng phần này chứa thông tin liên hệ với phíaKlook chứ không bao gồm các thông tin liên hệ với phía nhà hàng Vì thế có thểchia phần này ra thành 2 phần riêng biệt cho mỗi bên đại diện để người dùng dễnhận biết Thực chất, khả năng người dùng liên hệ với phía nhà hàng sẽ cao hơnnên cân nhắc để phần này bên trên và dễ tiếp cận hơn so với phần liên hệ vớiphía Klook

Ngoài ra cũng nên sử dụng thêm các biểu tượng (icon) hay hình ảnh đểviệc nhận biết của người dùng trở nên dễ dàng và nhanh chóng hơn thay vì chỉdùng những tiêu đề chữ Ví dụ như ở phần liên hệ này có thể sử dụng các iconhình điện thoại,… Hơn nữa, có thể thiết kế phần liên hệ thành dạng các bongbóng nổi luôn hiển thị trên giao diện để người dùng có thể dễ dàng tiếp cận.Việc bị choáng ngợp bởi quá nhiều thông tin trong giao diện voucher này cũngkhiến người dùng mất tập trung và khó khăn khi đưa ra quyết định Do đó chỉnên hiển thị những thông tin thực sự cần thiết

MỜI BẠN TẢI XUỐNG ĐỂ XEM TIẾP

5

10

Câu 3:

a)

Trong trường hợp này, thiết kế menu ngang như ở giao diện 1 đem lạihiệu quả hơn vì nó hiển thị rất trực quan các danh mục của trang web Ngườidùng dễ dàng và nhanh chóng chuyển qua lại giữa các danh mục khác nhau chỉvới 1 cú chạm Loại menu này phù hợp với các nội dung có ít sự lựa chọn.Ngược lại, nó sẽ là một nhược điểm nếu có quá nhiều sự lựa chọn được đưa ra

Thiết kế menu dạng drop-down như ở giao diện 2 phù hợp với những nộidung có nhiều sự lựa chọn hơn hoặc các nội dung có tính hệ thống, phân cấp.Trang mạng xã hội này chỉ có 3 danh mục nên việc dùng menu drop-down làkhông cần thiết vì nó làm phát sinh thêm thao tác của người dùng để đạt đượccùng một mục đích (chuyển qua lại giữa các danh mục) so với việc dùng menungang Nó cũng làm tốn không gian giao diện hơn Ngoài ra, ở giao diện 2,người dùng sẽ có xu hướng tập trung hơn vào danh mục Top mà bỏ qua 2 danhmục còn lại

Nghiên cứu của Susan Weinschenk trong cuốn “100 điều nhà thiết kế cầnbiết về con người” chỉ ra rằng: “Con người vốn lười biếng, họ muốn thực hiện ít

mà có thể hoàn thành được mục tiêu” Việc khiến người dùng phải làm thêmcác theo tác để chuyển giữa các danh mục đã đi ngược lại với quan điểm đó.Gây cho họ cảm giác rườm rà, phức tạp, khó chịu dẫn tới việc giảm tương táctrong trang web

b)

Một số mong muốn của người dùng khi sử dụng trang web này:

11

- Dễ dàng tiếp cận và tương tác với các nội dung được chia sẻ

- Tránh bị mất thời gian bởi các thao tác không cần thiết trên trang web và

có thể dễ dàng điều hướng qua lại giữa các danh mục chỉ với một chạm

Câu 4:

a)

Khi sử dụng ứng dụng này, động cơ để người dùng thực hiện hành động

là động cơ cảm giác (Sensation) và động cơ mong đợi (Anticipation) Cụ thể,người dùng mong muốn có được sự hài lòng, an tâm khi đã có một công cụ giúp

tự động theo dõi và tổng hợp thông tin vận động trong ngày của mình Họ hoàntoàn có thể truy cập ứng dụng để biết về trạng thái hoạt động của bản thân mộtcách tiện lợi, không còn cảm giác bị thiếu thốn dữ liệu này Họ cũng thường ởtrong sự tò mò, mong đợi về dữ liệu vận động hôm nay của mình là bao nhiêu,liệu nó đã đạt đủ chỉ tiêu đề ra hay đặt trong mối tương quan với dữ liệu nhữngngày trước đó là như thế nào,…

Thiết kế của ứng dụng nhìn chung khá dễ sử dụng Tổng thể nội dungđược chia thành các tab quen thuộc Người dùng có thể chuyển đổi giữa các tabchỉ bằng 1 chạm, không mất nhiều thời gian hay công sức Thông tin vận độngtrong ngày của người dùng được thiết kế rõ ràng, dễ hiểu ngay ở trang chủ Cơchế theo dõi dự liệu của ứng dụng thì hoàn toàn tự động, không đòi hỏi nỗ lựcthể chất của người dùng

Yếu tố kích hoạt thể hiện rõ nét nhất của ứng dụng là việc nó đề xuấtthêm các hoạt động thể chất cho người dùng Người dùng khi truy cập vào xem

dữ liệu vận động của mình có thể nhìn thấy mục “Sit less Move more Getsome exercise.” và truy cập vào nội dung của mục này Sẽ là một điểm cộng nếuứng dụng có khả năng phát hiện dữ liệu vận động của người dùng thấp hoặc họđang ngồi quá lâu thì đưa ra các thông báo đẩy để họ nhận biết và đứng dậy đilại

b)

12

Giao diện cũ Giao diện mới

Câu 5:

a)

Khi sử dụng ứng dụng này, động cơ để người dùng thực hiện hành động

là động cơ cảm giác (Sensation) và động cơ mong đợi (Anticipation) Cụ thể,người dùng muốn có thể tự tay mình làm ra những món ăn ngon dựa trên côngthức mà ứng dụng đưa ra Giải quyết vấn đề dù trước đó họ không biết cách nấunhưng cuối cùng vẫn có thể tự nấu được thực đơn mong muốn Giúp họ tự tinhơn trong việc nấu nướng và không còn coi nó như một khó khăn hay nỗi sợ

Giao diện chính của ứng dụng khá dễ sử dụng Được chia ra thành 3phần chính Phần trên cùng là thanh tìm kiếm thực đơn Người dùng dễ dàng ấnvào để gõ tìm thực đơn mong muốn Phần tiếp theo có lẽ là một số thực đơn nổibật Người dùng có thể nhanh chóng ấn vào những thực đơn này để làm theo.Phần cuối cùng là danh mục các thực đơn đã được phân loại Người dùng dễdàng ấn vào một danh mục để chọn thực đơn mong muốn Tất cả những hoạtđộng này đều là quen thuộc, nhanh chóng, miễn phí không cần nhiều thao táchay phải động não nhiều

13

Về yếu tố kích hoạt, ứng dụng có thể dựa trên thông tin các thực đơngần đây của người dùng để đưa ra các thông báo đề xuất về thực đơn tương tự.Đây là kích hoạt kiểu tín hiệu (Facilitator) khi mà người dùng thực sự muốn nấumột món ăn và đã 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) thì dùng kích hoạt kiểu khơi mào(Signal) để đưa ra các thực đơn hấp dẫn nhưng rất dễ thực hiện Với nhữngngười dùng mới nhưng có động lực nấu các thực đơn phức tạp thì cần kích hoạtkiểu hướng dẫn (Spark) để họ dễ dàng làm theo Ngoài ra, đôi khi người dùngthấy người khác nấu được một món ăn rất ngon thì trong tâm trí họ sẽ nảy sinhham muốn cũng làm được món ăn đó nên sẽ mở ứng dụng để tìm chỉ dẫn Đâychính là yếu tố kích hoạt bên trong.

b)

Giao diện cũ Giao diện mới

Câu 6:

a)

14

Khi sử dụng ứng dụng này, động cơ để người dùng thực hiện hành động

là động cơ cảm giác (Sensation) Cụ thể, người dùng muốn thưởng thức các bảnnhạc để họ có thể có được sự thư giãn cũng như giảm bớt căng thẳng trong côngviệc

Giao diện ứng dụng khá dễ sử dụng Các danh mục chính được chiathành các tab phía trên, dễ dàng truy cập Danh sách bài hát có nhiều tuỳ chọn.Thanh tìm kiếm theo ký tự đầu giúp quá trình tìm kiếm diễn ra nhanh chóng,tiện lợi Thanh trình phát nhạc bên dưới dễ tiếp cận với các nút điều hướng trựcquan Khi ứng dụng ở chế độ chạy ngầm, trình phát nhạc sẽ xuất hiện ở thanhtrạng thái điện thoại nên người dùng rất dễ thao tác

Thông thường, ứng dụng này sẽ dùng phương thức kích hoạt bên trong,khi người dùng chủ động sử dụng để thoả mãn nhu cầu hiện tại của mình hoặcviệc nghe nhạc đã trở thành thói quen của họ

Khi sử dụng ứng dụng này, động cơ để người dùng thực hiện hành động là động

cơ cảm giác (Sensation), động cơ mong đợi (Anticipation) và động cơ liên kết

xã hội (Social cohesion) Cụ thể, người dùng mong muốn tra cứu ngày âm mộtcách nhanh chóng, tiện lợi và thoải mái nhất Họ không cần phải cất công đi tìmmột quyển lịch treo tường để tra cứu nữa Họ cũng muốn giải quyết vấn đềthường xuyên bị lỡ lịch bằng một chức năng thông báo nào đó để họ không cònbận tâm về chuyện này Khi được nhắc nhở như thế, họ sẽ làm chủ được lịchtrình và các sự 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 dưới được bố trí khoa học,

dễ thao tác Ngay khi mở ứng dụng lên, tại tab Trang chủ đã hiển thị thông tinngày âm nên người dùng không cần tốn thêm thao tác và thời gian Việc đẩythông báo các sự kiện quan trọng là hoàn toàn tự động nên người dùng không lochúng sẽ bị bỏ lỡ

Về các yếu tố kích hoạt bên ngoài, ứng dụng hiện các thông báo đẩy về các sựkiện đặc biệt sắp tới và yêu cầu người dùng ấn vào để xem thông tin chi tiết.Đây là kích hoạt dạng khơi mào (Signal) Các chức năng cơ bản như “Đổingày”, “Tạo sự kiện”, “Xem ngày tốt” được thiết kế dưới dạng các nút bấm làmột hình thức kích hoạt dạng tín hiệu (Facilitator) khi người dùng có các nhucầu này

b)

16

Giao diện cũ Giao diện mới

Câu 8:

a)

Khi sử dụng ứng dụng này, động cơ để người dùng thực hiện hành động

là động cơ cảm giác (Sensation), động cơ mong đợi (Anticipation) và động cơ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 và nhanh chóng, tiết kiệm được thời gian, công sức và tiền bạc

so với các hình thức đặt bàn truyền thống Thông tin đặt bàn và thực đơn đượccập nhật chính xác và nhanh chóng khiến người dùng không còn lo lắng hayhoang mang về dịch vụ Các thông tin ưu đãi được cập nhật thường xuyên, đảmbảo cho người dùng được thông tin nhanh chóng như những khách hàng khác

Giao diện ứng dụng được thiết kế khá sạch, tập trung vào những chứcnăng chính Nút “Đặt bàn” được thiết kế nổi bật, dễ nhận diện Chức năng quét

mã QR là một điểm cộng cho ứng dụng này vì tính tiện lợi và nhanh chóng của

nó Hình ảnh thực đơn rõ ràng, trực quan Các nút được bố trí ở vị trí khá hợp

lý, không quá khó để với tới khi thao tác 1 tay

17

Ứng dụng có riêng một tab cho phần thông báo Yếu tố kích hoạt khơimào (Signal) sẽ phát huy hiệu quả khi ứng dụng gửi các thông báo đẩy về lờimời tham gia các chương trình ưu đãi cho người dùng Với những người dùngmới, cách thức đặt bàn và gọi món có thể sẽ khó khăn, việc đưa ra các kích hoạthướng dẫn (Spark) là cần thiết Trong giao diện trang chủ, nút “Đặt bàn” là mộtdạng kích hoạt tín hiệu (Facilitator) thu hút người dùng hành động.

Các câu hỏi tiêu cực: Q2, Q4, Q6, Q8, Q10

i=4 và người trả lời j=1

18

2.75 2.25

2 4 6 8 10 12 14 16 18 20

17 16

15 15 16

13 14 14 14 13

18

13 13

4

6 4

7 5

Tương quan về độ hài lòng ở các câu hỏi tích cực và độ không hài lòng ở các câu hỏi tiêu cựccủa mỗi người dùng

Tích cực Tiêu cực (không hài lòng) Độ chênh lệch

Biểu đồ 3

20

Bảng số liệu để đo mức độ thoả mãn của người dùng (Truy cập đường dẫn sau để xem chi tiết : https://tinyurl.com/solieucau9 )

c)

Theo như chỉ số hài lòng của người dùng được tính ở phần

a, con số 62,71% cho thấy đây là một kết quả khá tốt (so vớimức tiêu chuẩn là 80%) Điểm số 75,25 đạt gần đến mức thoảmãn

Theo biểu đồ 1, ở các câu hỏi tích cực, trung bình điểmhài lòng đạt cao nhất ở câu số 9 (3,5 điểm) và thấp nhất ở câu

số 3 (2,67 điểm) Ở các câu hỏi tiêu cực, trung bình điểm hàilòng đạt cao nhất ở câu số 10 (2,67 điểm) và thấp nhất ở câu số

4 (1,33 điểm) Cần tập trung cải thiện sản phẩm bắt đầu từnhững câu hỏi có độ hài lòng thấp này

Biểu đồ 2 cho thấy người có mức độ hài lòng cao nhất làngười số 11 (tổng 28 điểm/40 điểm), mức độ hài lòng thấp nhấtthuộc về người số 6 và số 10 (tổng 21 điểm/40 điểm) Khoảng

21

cách chênh lệch này không quá lớn nhưng vẫn cần được cảithiện.

Biểu đồ 3 làm rõ mức độ hài lòng và không hài lòng ở mỗingười dùng Dấu hiệu tích cực ở đây là người dùng nào cũng cóđiểm số tích cực cao hơn điểm số tiêu cực Tuy nhiên, mức độchênh lệch này còn thấp Độ chênh lệch cao nhất thuộc vềngười số 11 với 8 điểm trong khi thấp nhất thuộc về người số 6

và 10 với 2 điểm Cần làm tăng độ chênh lệch này hơn bằngcách tăng độ hài lòng hoặc giảm độ không hài lòng để cải thiệnsản phẩm

Câu 10:

a)

dùng j thực hiện nhiệm vụ i

Theo dữ liệu trong biểu đồ thì cho thấy nhiệm vụ này đã không được hoànthành