(Tiểu luận) phát triển, nâng cao sự hiểu biết về thiết kế giao diện – trải nghiệmngười dùng (ui ux)

BỘ GIÁO DỤC VÀ ĐÀO TẠO HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA CƠNG NGHỆ THƠNG TIN  BÀI TIỂU LUẬN CUỐI KÌ MƠN ĐA PHƯƠNG TIỆN Họ tên : Nguyễn Nhật Thư Mã sinh viên Lớp : N22DCPT094 : D22CQPT01-N Giảng viên : Nguyễn Tất Mão GIỚI THIỆU Skills Copywriting & Drawing Graphic & Web Design Với đam mê ngành Graphic & Web Design, thân em không ngừng học hỏi kĩ năng, lắng nghe, thay đỏi phù hợp với xu hướng phát triển ngày Photography & Editing Videography Teamwork Work Experience THPT Phan Bội Châu 2019-2022 Tham gia ban thiết kế hội Chủ Thập Đỏ trường Tham gia đoàn niên tình nguyện 2022 - Present Học Viện Cơng Nghệ Bưu Chính Viễn Thơng 0943366037 TP Phan Thiết, tỉnh Bình Thuận Thành viên Liên chi đồn Cơng Nghệ Đa Phương Tiện Tham gia thiết kế logo checkin kỉ niệm năm thành lập LCĐ Công Nghệ Đa Phương Tiện Future goal nthu2843@gmail.com 2023-2025 Aim 6.5+IELTS Get Google UX Design Professional Certificate & MOS Certificate FUTURE WORK Become a UI designer MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN DANH MỤC TỪ VIẾT TẮT .6 I Lý chọn đề tài II Mục tiêu đề tài III Nội dung đề tài .7 Phần 1: CÔNG NGHỆ ĐA PHƯƠNG TIỆN CÔNG NGHỆ ĐA PHƯƠNG TIỆN (MULTIMEDIA TECHNOLOGY) .8 TRUYỀN THÔNG ĐA PHƯƠNG TIỆN (MULTIMEDIA COMMUNICATION) Sự khác Công nghệ đa phương tiện Truyền thông đa phương tiện? .8 PHẦN 2: MỘT SỐ VÍ DỤ THUỘC TRUYỀN THÔNG & CÔNG NGHỆ ĐA PHƯƠNG TIỆN Quảng cáo truyền hình Phần mềm chỉnh sửa video 10 Ứng dụng trò chơi điện tử 11 4.Hệ thống phát sóng trực tuyến .11 5.Ứng dụng di động: .12 6.Tạo phát sóng podcast 14 Phần 3: Loại hình ưa thích 15 I.Tìm hiểu thiết kế Giao diện – Trải nghiệm người dùng (UI/UX) .15 3.1 Thiết kế Giao diện (UI) gì? 15 3.2 Trải nghiệm người dùng (UX) gì? 15 II Phân tích Trải nghiệm người dùng (UX) 16 3.1 Tỉ lệ (Scale) 17 3.2 Visual Hierarchy (H thốống ệ phân câốp tr ực quan) 21 3.3 Balance (Cân bằằng) .21 3.4 Contrast (Độ tương phản màu sắc) 22 3.5 Nguyên tắc Gestalt .24 III Tình hình thực tế xu hướng tương lai ngành UX DESIGN 25 IV Đ nhị h ướ ng nghềằ nghi pệ t ừcon sốố 27 Phâằn 4: KẾẾT LUẬN 27 TÀI LIỆU THAM KHẢO 29 LỜI CẢM ƠN “Để hoàn thành tiểu luận này, em xin gửi lời cảm ơn chân thành đến: Ban giám hiệu trường Học Viện Công Nghệ Bưu Chính Viễn Thơng Thành phố Hồ Chí Minh tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin Xin cảm ơn giảng viên môn - Thầy Nguyễn Tất Mão giảng dạy tận tình, chi tiết để em có đủ kiến thức vận dụng chúng vào tiểu luận Do chưa có nhiều kinh nghiệm làm để tài hạn chế kiến thức, tiểu luận chắn khơng tránh khỏi thiếu sót Rất mong nhận nhận xét, ý kiến đóng góp, phê bình từ phía Thầy để tiểu luận hồn thiện Lời cuối cùng, em xin kính chúc thầy nhiều sức khỏe, thành công hạnh phúc.” LỜI CAM ĐOAN Em xin cam kết toàn nội dung đề tài kết nghiên cứu riêng em Các kết quả, số liệu đề tài trung thực hoàn toàn khách quan Em hoàn toàn chịu trách nhiệm lời cam đoan Tp.HCM, ngày 22 tháng năm 2023 Người thực (Ký ghi rõ họ tên) DANH MỤC TỪ VIẾT TẮT UX: User Experience – Trải nghiệm nguời dùng UI: User Interface – Giao diện người dùng IT (Information Technology): Công nghệ thông tin VR (Virtual Reality): Thực tế ảo Landing pages:Trang đích Dashboards: Bảng điều khiển Micro-interaction: Tương tác vi mô Document continues below Discover more Công nghệ đa from: phương tiện Học viện Công ng… 18 documents Go to course Tktt đề cương qua 12 môn - oke Công nghệ đa phương tiện None Đề thi thử năm 2021 - nothing to say Công nghệ đa phương tiện None Bao Cao Nhom YEahhh Công nghệ đa phương tiện None Decuong - Copy peasy Công nghệ đa phương tiện None Tư tưởng thẩm mỹ trung cổ Công nghệ đa phương tiện ĐỀ TÀI: None BT PERT Chart dfsdfsdfdsfsfs Tìm hiểu phân tích Trải nghiệm người dùng (UX) I Lý chọn đề tài Công nghệ đa phương tiện None - Trong giai đoạn phát triển công nghệ nay, nhiều sản phẩm kĩ thuật số phát triển rộng rãi: trang web, ứng dụng truyền hình, landing pages and dashboards - Để thiết kế sản phẩm kỹ thuật số, cần có hợp tác từ số ngành nghề, số nhà phát triển giao diện người dùng nhà phát triển UX/UI II Mục tiêu đề tài - Phát triển, nâng cao hiểu biết thiết kế Giao diện – Trải nghiệm người dùng (UI/UX) - Tìm hiểu phân tích ngun lý thiết kế UX - Từ đó, giải vấn đề thắc mắc ngành hot UX DESIGN III Nội dung đề tài Tìm hiểu phân tích Trải nghiệm người dùng (UX) Phần 1: CÔNG NGHỆ ĐA PHƯƠNG TIỆN CƠNG NGHỆ ĐA PHƯƠNG TIỆN (MULTIMEDIA TECHNOLOGY) Cơng nghệ đa phương tiện (Multimedia technology) kết hợp cơng nghệ máy tính, internet thiết bị truyền thông khác để tạo ra, chỉnh sửa, lưu trữ, phân phối truyền tải nội dung đa phương tiện Công nghệ đa phương tiện cho phép người dùng tạo truyền tải nội dung hình ảnh, video, âm văn nhiều thiết bị khác máy tính, điện thoại di động, máy tính bảng, TV, đồng hồ thơng minh thiết bị kết nối Internet khác.1 TRUYỀN THÔNG ĐA PHƯƠNG TIỆN (MULTIMEDIA COMMUNICATION) Truyền thông đa phương tiện (Multimedia communication) q trình truyền tải thơng tin đa phương tiện từ nguồn thông tin đến người nhận thông qua nhiều kênh truyền thông khác nhau, bao gồm âm thanh, hình ảnh, văn yếu tố trực quan khác hình ảnh động, video âm nhạc Truyền thông đa phương tiện cho phép thông điệp truyền tải đến khán giả cách nhanh chóng hiệu so với hình thức truyền thông truyền thống2 https://fit.ptithcm.edu.vn/dao-tao/multimedia https://vi.wikipedia.org/wiki/%C4%90a_ph%C6%B0%C6%A1ng_ti%E1%BB%87n Sự khác Công nghệ đa phương tiện Truyền thông đa phương tiện? Mặc dù thuật ngữ "truyền thông đa phương tiện" "công nghệ đa phương tiện" thường sử dụng đồng nghĩa với nhau, chúng có khác biệt sau đây: • Truyền thơng đa phương tiện (Multimedia communication) q trình truyền tải thông tin đa phương tiện từ nguồn thông tin đến người nhận thông qua nhiều kênh truyền thông khác Công nghệ đa phương tiện (Multimedia technology) kết hợp cơng nghệ máy tính, internet thiết bị truyền thông khác để tạo ra, chỉnh sửa, lưu trữ, phân phối truyền tải nội dung đa phương tiện • Truyền thơng đa phương tiện nhấn mạnh vào q trình truyền tải thơng tin đa phương tiện, công nghệ đa phương tiện tập trung vào công nghệ sử dụng để tạo ra, lưu trữ phân phối nội dung đa phương tiện • Về mặt ứng dụng, truyền thơng đa phương tiện thường sử dụng lĩnh vực truyền thơng, giải trí quảng cáo, cơng nghệ đa phương tiện sử dụng nhiều lĩnh vực khác nhau, bao gồm giáo dục, y tế, khoa học cơng nghiệp nhấn mạnh khía cạnh quan trọng thiết kế bạn cách làm cho chúng lớn 19 (Nguồnảnh: dribbble.com ) 20 (Nguồnảnh: davidviet.vn) 21 3.2 Visual Hierarchy (Hệ thống phân cấp trực quan) Khi Người dùng dễ dàng hiểu bố cục có hệ thống phân cấp trực quan tốt Định nghĩa: Nguyên tắc phân cấp trực quan đề cập đến việc hướng dẫn mắt trang cho ý đến yếu tố thiết kế khác theo thứ tự tầm quan trọng chúng Hệ thống phân cấp trực quan triển khai thơng qua biến thể tỷ lệ, giá trị, màu sắc, khoảng cách, vị trí nhiều loại tín hiệu khác.7 Hệ thống phân cấp trực quan kiểm soát việc cung cấp trải nghiệm Nếu bạn gặp khó khăn việc xác định xem nên tìm đâu trang, nhiều khả bố cục trang thiếu hệ thống phân cấp trực quan rõ ràng Thông thường, hệ thống phân cấp trực quan rõ ràng có 2-3 kích thước kiểu chữ trang để người dùng biết phần nội dung quan trọng Hoặc, cân nhắc sử dụng màu sáng cho mục quan trọng màu trầm cho mục quan trọng Tỷ lệ giúp xác định cấu trúc phân cấp trực quan, kết hợp tỷ lệ khác cho yếu tố thiết kế khác bạn Một nguyên tắc chung bao gồm thành phần nhỏ, trung bình lớn thiết kế 3.3 Balance (Cân bằng) Tất yếu tố nguyên tắc thiết kế—kiểu chữ, màu sắc, hình ảnh, hình dạng, hoa văn, v.v.—đều có trọng lượng trực quan Một số yếu tố nặng thu hút mắt, yếu tố khác nhẹ Chapman, C (2018, December 13) The Principles of Design and Their Importance Toptal Design Blog https://www.toptal.com/designers/ui/principles-of-design#:~:text=The %20elements%2C%20or%20principles%2C%20of,and%20optimizes%20the%20user %20experience 22 Cách yếu tố trình bày trang tạo cảm giác cân bằng.8 Có hai loại cân bản: đối xứng không đối xứng Các thiết kế đối xứng bố trí yếu tố có trọng lượng hai bên đường tâm tưởng tượng Cân bất đối xứng sử dụng yếu tố có trọng lượng khác nhau, thường bố trí liên quan đến đường thẳng không nằm trung tâm thiết kế tổng thể Khám phá phong cách Hub: Bố cục cho cảm giác ổn định, điều đặc biệt thích hợp bạn tìm kiếm cơng việc mà u ự cân thích S đối xứng N ếu bạn trục dọc vẽ tưởng tượng trang web, phần tử phân bổ hai mặt trục Chapman, C (2018, December 13) The Principles of Design and Their Importance Toptal Design Blog https://www.toptal.com/designers/ui/principles-of-design#:~:text=The %20elements%2C%20or%20principles%2C%20of,and%20optimizes%20the%20user %20experience 23 (Nguồnảnh: dribbble.com ) 3.4 Contrast (Độ tương phản màu sắc) Đây nguyên tắc thường sử dụng khác giúp làm bật số phần định thiết kế bạn người dùng Định nghĩa : Nguyên tắc tương phản đề cập đến việc đặt cạnh yếu tố khơng giống mặt hình ảnh để truyền đạt thực tế yếu tố khác (ví dụ: thuộc loại khác nhau, có chức khác nhau, hành xử khác nhau) Nói cách khác, độ tương phản cung cấp cho mắt khác biệt đáng ý (ví dụ: kích thước màu sắc) hai đối tượng (hoặc hai nhóm đối tượng) để nhấn mạnh chúng khác biệt 9 Principles of Visual Design in UX (n.d.) Nielsen Norman Group https://www.nngroup.com/articles/principles-visual-design/ 24 Ứng dụng nhắc nhở iOS: Màu đỏ, có độ tương phản cao với bối cảnh xung quanh, dành riêng để xóa (Nguồnảnh: dribbble.com ) 25 3.5 Nguyên tắc Gestalt Đây tập hợp nguyên tắc thiết lập vào đầu kỷ XX nhà tâm lý học Gestalt Họ nắm bắt cách người tạo ý nghĩa hình ảnh Định nghĩa : Các nguyên tắc Gestalt giải thích cách người đơn giản hóa tổ chức hình ảnh phức tạp bao gồm nhiều yếu tố, cách xếp phận thành hệ thống có tổ chức tiềm thức để tạo tổng thể, thay diễn giải chúng loạt yếu tố khác Nói cách khác, nguyên tắc Gestalt nắm bắt xu hướng nhận thức tổng thể thay yếu tố riêng lẻ.10 Có số nguyên tắc Gestalt, bao gồm tương đồng, tiếp nối, khép kín, gần gũi , vùng chung , hình/mặt bằng, đối xứng trật tự Sự gần gũi đặc biệt quan trọng UX — đề cập đến thực tế mục gần trực quan coi phần nhóm 10 Chapman, C (2018, December 13) The Principles of Design and Their Importance Toptal Design Blog https://www.toptal.com/designers/ui/principles-of-design#:~:text=The%20elements %2C%20or%20principles%2C%20of,and%20optimizes%20the%20user%20experience Nguồn: https://dribbble.com/shots/19558786-Shape-Study-040 27 Nguồn: https://dribbble.com/shots/9439759-H-Lettermark III Tình hình thực tế xu hướng tương lai ngành UX DESIGN Các UX designer tuyển dụng lúc, nơi Nếu tìm kiếm LinkedIn, có hàng ngàn vị trí tuyển dụng Và ngày, số gia tăng Các UX designer đặc biệt cần cho tập đồn cơng ty đa quốc gia IT Google, Microsoft, Amazon, Facebook, Apple Các tập đoàn phát triển hàng ngày liên tục tuyển dụng designer Cho dù UX designer làm việc từ xa văn phịng thu nhập họ ln mức cao Mức lương trung bình Mỹ 85.000 đô la/năm, không yêu cầu kinh nghiệm làm việc vị trí cơng việc Tất nhiên, bạn thích làm việc California, mức lương cao Tất phụ thuộc vào địa điểm cơng ty Nhưng nhìn chung, mức lương cho UX/UI designer cao Một số công ty đề xuất với chuyên gia giàu kinh nghiệm mức 500.000 đô la/năm UX/UI thuật ngữ dần trở nên phổ biến thời đại ngày nay, đặc biệt lĩnh vực phần mềm thiết kế Những bạn trẻ có khiếu thiết kế khơng cịn bị bó buộc vào Graphic Design mà có lựa chọn khác: Học UX/UI Vậy UX DESIGN làm việc gì?  Cơng việc chính: Thiết kế trải nghiệm người dùng cho phần mềm website, mobile app Cơng việc mở rộng có nhiều tảng VR, Smartwatch (đại loại digital product) Đi sâu vào làm việc chủ yếu với nghiên cứu nhu cầu người dùng, phác thảo giải pháp, kiểm thử giải pháp Có số cơng việc có phạm vi hẹp xoay quanh tính dễ hiểu dễ dùng sản phẩm, không cần sâu vào công việc 28  Công cụ sử dụng chính: cơng cụ vẽ phác thảo dựng mơ phác thảo Ngồi dùng nhiều giấy bút file document  Kết đầu ra: giải pháp triển khai nhằm giải toán cụ thể Có thể wireframe đơn giản prototype folder nhiều tài liệu Nói chung tùy vào toán mà độ phức tạp giải pháp cần triển khai khác  Tư chính: thiết kế lấy người dùng làm trọng tâm  Kĩ chính: Khả sử dụng, khả kiểm thử (user and usability testing) Ngồi cơng việc chia làm môi trường: agency quảng cáo, agency thiết kế/xây dựng sản phẩm công ty sản phẩm (in-house team) Agency quảng cáo  Hoạt động theo campaign nên sản phẩm thường khơng lâu dài, mang tính ngắn hạn  Việc triển khai UX/UI phụ thuộc nhiều vào chiến lược branding marketing Người dùng đặt vị trí thứ yếu Agency thiết kế/xây dựng sản phẩm  Sản phẩm thiết kế thường có tính sử dụng lâu dài nên áp dụng đầy đủ quy trình để tránh số lỗi tránh Khơng gắn bó với sản phẩm lâu nên hiểu biết chuyên sâu có hạn chế định  Người định client nên việc triển khai UX/UI bị ảnh hưởng client định Người dùng đặt vị trí thứ yếu Cơng ty sản phẩm  Sản phẩm thiết kế dành cho khách hàng cơng ty quyền lợi cơng ty Thường gắn bó lâu với sản phẩm nên hiểu sâu sản phẩm tập người dùng 29  Người định chủ doanh nghiệp nên việc triển khai UX/UI phụ thuộc vào tư chủ doanh nghiệp Nếu chủ doanh nghiệp khơng q trọng người dùng đặt vị trí thứ hai Nếu chủ doanh nghiệp trọng (đa số) người dùng đặt vị trí thứ IV Định hướng nghề nghiệp từ số Bạn người thiết kế trải nghiệm người dùng trước tiên bạn phải đứng vai trị người dùng Có ý quan sát thứ xung quanh bạn nhạy cảm “vấn đề” cần giải Kế đó, bạn tìm cách giải vấn đề Bạn trải nghiệm nhiều (nhiều kinh nghiệm, đi đó, tích lũy vốn sống) giúp bạn dễ dàng giải vấn đề Nói chung thứ hai bạn tích lũy thật nhiều trải nghiệm cho Kế tiếp bạn bắt đầu học công cụ để giúp phác thảo giải pháp Bạn nên học vẽ phác thảo đơn giản Khơng cần phải cầu kì ngồi vẽ người, bạn cần học đủ để thể muốn truyền tải thơi Cơng cụ quen thuộc với bạn có lẽ bút chì, giấy, cục gơm (cục tẩy) Bạn học sâu mơi trường thể (desktop, mobile, VR…) mơi trường có đặc điểm khác nhau; học sâu số lĩnh vực ảnh hưởng tới người nói chung (ergonomics, tâm lý học, cognitive science, tương tác người – máy…); lĩnh vực cụ thể (tài chính, y tế, thương mại, dịch vụ v.v.) Những kiến thức giúp cho giải pháp bạn ổn định tránh lỗi tránh (avoidable mistakes) Vì UX Designer khơng làm riêng mà phải cộng tác với nhiều người nên bạn nên học thêm phần production giải pháp (lập trình, sản xuất nội dung) vận hành giải pháp để giúp cho giải pháp bạn không 30 phục vụ tốt người dùng mà cịn có tính khả thi đáp ứng mục tiêu kinh doanh Phần 4: KẾT LUẬN 31 Dù UX Design ngành mẽ thị trường Việt Nam có thơng tin để người đọc tiếp cận, chủ yếu giới thiệu qua tài liệu nước ngồi Vì vậy, người học cần trau dồi khả ngoại ngữ để bổ sung kiến thức theo đuổi đam mê Đây ngành khơng liên quan đến Cơng Nghệ Thơng tin mà cịn liên quan đến nhu cầu, tâm lý, đời sống xã hội người Cuối cùng, trải qua buổi học môn “Nhập môn đa phương tiện”, em chân thành gửi lời cảm ơn đến thầy dẫn giúp em hiểu rõ ngành học lĩnh vực tương lai theo đuổi TÀI LIỆU THAM KHẢO https://fit.ptithcm.edu.vn/dao-tao/multimedia https://vi.wikipedia.org/wiki/%C4%90a_ph%C6%B0%C6%A1ng_ti%E1%BB%87n Phuong H T (n.d.) UI/UX gì? Học ngành phù hợp để trở thành UI/UX designer? https://www.hotcourses.vn/study-abroad-info/studyguides/hoc-nganh-gi-de-tro-thanh-ui-ux-designer/ "Trải nghiệm người dùng – Wikipedia tiếng Việt." https://vi.wikipedia.org/wiki/Tr%E1%BA %A3i_nghi%E1%BB%87m_ng%C6%B0%E1%BB%9Di_d%C3%B9ng Principles of Visual Design in UX (n.d.) Nielsen Norman Group https://www.nngroup.com/articles/principles-visual-design/ 5 Principles of Visual Design in UX (n.d.) Nielsen Norman Group https://www.nngroup.com/articles/principles-visual-design/ Chapman, C (2018, December 13) The Principles of Design and Their Importance Toptal Design Blog https://www.toptal.com/designers/ui/principles-ofdesign#:~:text=The%20elements%2C%20or%20principles%2C%20of,and%20optimizes%20the %20user%20experience Chapman, C (2018, December 13) The Principles of Design and Their Importance Toptal Design Blog https://www.toptal.com/designers/ui/principles-of8 design#:~:text=The%20elements%2C%20or%20principles%2C%20of,and%20optimizes%20the %20user%20experience Principles of Visual Design in UX (n.d.) Nielsen Norman Group https://www.nngroup.com/articles/principles-visual-design/ Chapman, C (2018, December 13) The Principles of Design and Their Importance Toptal Design Blog https://www.toptal.com/designers/ui/principles-ofdesign#:~:text=The%20elements%2C%20or%20principles%2C%20of,and%20optimizes%20the %20user%20experience 10 33