TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP THIẾT KẾ GIAO DIỆN & TRẢI NGHIỆM NGƯỜI DÙNG (UX/UI DESIGN) Công ty thực tập Long Van System Solution Người phụ trách Mentor[.]
1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP THIẾT KẾ GIAO DIỆN & TRẢI NGHIỆM NGƯỜI DÙNG (UX/UI DESIGN) Công ty thực tập : Long Van System Solution Người phụ trách : Mentor Phùng Hợp Thực tập sinh : Bùi Minh Thịnh TP Hồ Chí Minh, tháng 12 năm 2022 Bùi Minh Thịnh Thực tập tốt nghiệp LỜI MỞ ĐẦU Ngày nay, thiết kế giao diện trải nghiệm người dùng công việc thiếu phát triển sản phẩm công nghệ Việc website, ứng dụng mobile đời ngày nhiều thúc đẩy nhu cầu thiết kế giao diện trải nghiệm sản phẩm tốt nhằm đảm bảo tính cạnh tranh giữ chân người dùng sử dụng sản phẩm Từ đó, kích thích phát triển công nghệ thông tin nước giới Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành UI/UX Designer Việt Nam phát triển mạnh mẽ, để hịa nhập với cơng ty hàng đầu giới Bên cạnh với xu thời đại, UX/UI dần giúp công ty tạo nên giá trị tốt hơn, hoàn thiện hết UI (viết tắt User Interface) dùng để mô tả giao diện người dùng, bao gồm yếu tố mà người dùng tiếp xúc với trang web ứng dụng Trong đó, UX (viết tắt User Experience) trải nghiệm người dùng Nói cách khác, cách thức mà người dùng tương tác với yếu tố UI tạo Cả hai yếu tố UI UX quan trọng tính tương trợ chúng ảnh hưởng trực tiếp tới lên trình sử dụng sản phẩm cảm nhận người dùng Tuy vậy, vai trò UI UX lại khơng giống nhiều khía cạnh, từ trình phát triển sản phẩm nguyên lý, nguyên tắc thiết kế Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn trở thành Nhà thiết kế giao diện & trải nghiệm người dùng mơi trường chun nghiệp Vì vậy, em định chọn Long Van System Solution - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Bùi Minh Thịnh Thực tập tốt nghiệp LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Long Van System Solution tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh mentor anh chị team, em tiếp thu kiến thức quan trọng để làm vài cơng việc UX/UI Chân thành cảm ơn anh Mentor anh chị khác công ty bỏ nhiều thời gian,công sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Phùng Hợp training UX/UI, hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với môi trường Cũng xin cảm ơn thầy cô khoa Công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Bùi Minh Thịnh Thực tập tốt nghiệp NHẬN XÉT CỦA KHOA Bùi Minh Thịnh Thực tập tốt nghiệp MỤC LỤC Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Long Van System Solution Sản phẩm công ty Văn hố cơng ty Một số khách hàng tiêu biểu Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật 2.1 2.2 2.3 2.4 Các công cụ quản lý công việc Tìm hiểu Figma 10 Thiết kế giao diện người dùng .11 Thiết kế trải nghiệm người dùng 12 Thực công việc 14 Lịch làm việc 14 Chương 3: Chi tiết công việc 15 Giao diện máy POS 15 1.1 1.2 1.3 1.4 1.5 Yêu cầu 15 Danh sách giao diện .15 Thực .17 Kế hoạch thực 17 Kết đạt 17 Giao diện ứng dụng chấm công 17 2.1 2.2 2.3 2.4 2.5 Yêu cầu 17 Danh sách giao diện .18 Thực .19 Kế hoạch thực 19 Kết đạt 19 Chương 4: Tổng kết .20 Kết thu 20 Những khó khăn gặp phải q trình thực tập 20 Gợi ý cho lộ trình phát triển tương lai 20 Bùi Minh Thịnh Thực tập tốt nghiệp Cảm nhận công ty 20 Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Long Van System Solution Công ty Cổ phần Giải pháp Hệ thống Long Vân công ty tiên phong Việt Nam chuyên phát triển ứng dụng tảng công nghệ điện tốn đám mây, từ cung cấp giải pháp dịch vụ liên quan cho khách hàng cá nhân doanh nghiệp Long Vân đối tác nhà cung cấp công nghệ hàng đầu giới: NetApp, Vmware, Cisco,… tự tin đem đến cho khách hàng sản phẩm dịch vụ chất lượng cao tạo thành từ tinh hoa công nghệ giới Long Vân với văn phịng Nam & Bắc, Trung Tâm Kỹ Thuật, Data center, sẵn sàng 24/7/365 việc hỗ trợ khách hàng nhanh chóng - nhiệt tình phận kỹ thuật, hướng dẫn - tư vấn dịch vụ cách chuyên nghiệp phận kinh doanh, Long Vân hi vọng mang lại cho khách hàng đối tác tin cậy, an tâm hài lòng nhất, đảm bảo cung cấp cho khách hàng dịch vụ tốt với chi phí phù hợp theo nhu cầu khả khách hàng Sản phẩm công ty Công ty Cổ phần Giải pháp Hệ thống Long Vân chuyên trách phát triển ứng dụng tảng cơng nghệ điện tốn đám mây, từ cung cấp giải pháp dịch vụ liên quan cho khách hàng cá nhân doanh nghiệp Bùi Minh Thịnh Thực tập tốt nghiệp Sứ mệnh Long Vân mang đến hài lòng cao cho khách hàng, giúp khách hàng đạt mục tiêu kinh doanh cách đưa giải pháp hệ thống phần mềm với công nghệ tiên tiến ưu việt từ tảng Cloud Nhờ thỏa thuận hợp tác với thương hiệu lớn, Long Vân liên kết thương hiệu lớn toàn giới với sản phẩm Emobi Game, Smedia, Gạch Việt Nhật, Saigon Flea Market,… Văn hố cơng ty Văn hóa Long Vân xây dựng dựa giá trị cốt lõi như: - Luôn ủng hộ lẫn sẵn sàng nỗ lực mục tiêu chung đội / nhóm / cơng ty - Ý chí cầu tiến, ln ln phấn đầu mục tiêu xa - Đóng góp phát triển nhóm khơng thuộc trách nhiệm bạn - Suy nghĩ, quan tâm hành động thân Thời gian làm việc từ thứ đến thứ (8h00 – 17h00) Thời gian nghỉ trưa từ 12h00 đến 13h00, nhân viên ăn trưa, nghỉ ngơi trước bắt đầu công việc vào buổi chiều Đồ ăn nhẹ, nước uống, trà, cà phê, trái miễn phí cho tất nhân viên Nhân viên sau ngày làm việc khuyến khích ghi lại thời gian, đầu mục công việc làm ngày hệ thống công ty để đảm bảo dự án thực cách tốt Bùi Minh Thịnh Thực tập tốt nghiệp Một số khách hàng tiêu biểu Sứ mệnh Long Vân mang đến hài lòng cao cho khách hàng, giúp khách hàng đạt mục tiêu kinh doanh cách đưa giải pháp hệ thống phần mềm với công nghệ tiên tiến ưu việt từ tảng Cloud Những khách hàng tiêu biểu mà phục vụ: - Emobi Game – Nhà phát triển game hàng đầu Việt Nam - Kết xổ số - Trang web cung cấp kết xổ số với lượng truy cập cao Việt Nam - Smedia - Công ty truyền thông hàng đầu việc cung cấp dịch vụ giá trị gia tăng SMS - Gạch Việt Nhật – Nhà cung ứng gạch trang trí uy tín chất lượng - Saigon Flea Market – Mơ hình chợ trời, chợ phiên thành cơng Việt Nam - Bóng Đá Net - Một trang tin tức trực truyến bóng đá uy tín - Oxygen - Một nhà cung cấp dịch vụ quảng cáo cho doanh nghiệp vừa nhỏ đáng tin cậy chuyên nghiệp Bùi Minh Thịnh Thực tập tốt nghiệp Chương 2: Nội dung thực tập Đợt thực tập với vị trí “UX/UI Designer” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện thiết kế trải nghiệm & giao diện người dùng, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển sản phẩm chun nghiệp Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm công ty Long Vân, q trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ quản lý công việc Thời gian : ngày Nội dung : Tìm hiểu cơng cụ sử dụng trình làm việc để quản lý công việc tác vụ Trong thời gian này, Mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho công việc sau Một số phần mềm số Trello – cơng cụ quản lý tasks dự án, Slack, Skype – cơng cụ liên lạc trị chuyện trình làm việc, Phần mềm nội công ty – công cụ quản lý nội dung công ty tiến độ công việc Thực : Thực hành sử dụng phần mềm nêu Kết : Hiểu cách sử dụng quy tắc sử dụng công cụ, giúp dễ dàng kết hợp công cụ với Bùi Minh Thịnh Thực tập tốt nghiệp 10 2.2 Tìm hiểu Figma Thời gian : ngày Nội dung : Được training cách sử dụng tính cơng cụ, kiến thức quan trọng để tạo hình khối, frame, chữ, màu sắc, thuộc tính chúng, kết hợp với widget plugin để xây dựng hình theo ý muốn - Hình khối Các kiến thức việc tạo hình chữ nhật, hình ellipse, hình tam giác, hình ngơi sao, đường thẳng, mũi tên, cách kết hợp chúng thành selection để tạo hình - Hình ảnh Cách chèn hình ảnh tuỳ chỉnh thơng số hình ảnh - Màu sắc Thực tập sinh hướng dẫn tư màu sắc, cách phối màu với nhau, thông số màu sắc saturation, hue, tint, opacity,… - Font chữ Cung cấp nguồn để sử dụng font chữ, khái niệm, thông số font chữ typeface, baseline, glyph,… - Layer Cung cấp tuỳ chọn thuộc tính layer Pass through, Normal, Lighten, Darken,… - Widget Tìm hiểu widget phổ biến để giúp tăng tốc độ thiết kế - Quản lý nhớ Mentor hướng dẫn thực tập sinh cách quản lý thư mục, file figma tập task sau Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, đúc kết, hệ thống hoá kiến thức học Kết : - Nâng cao kỹ thiết kế với Figma Ngồi cịn biết thêm số quy tắc việc thiết kế cho chuẩn, dễ nhìn, tiện lợi để tạo Bùi Minh Thịnh Thực tập tốt nghiệp 11 2.3 Thiết kế giao diện người dùng Nội dung: Các kiến thức thiết kế giao diện người dùng để làm giao diện đa tảng thiết bị - Khái niệm thiết kế giao diện người dùng Nắm khái niệm thiết kế giao diện người dùng, q trình khơng thể thiếu để tạo sản phẩm mang đến người dùng Các ưu điểm khuyết điểm thường mắc phải thiết kế giao diện - Style Guides Làm để truyền thơng thương hiệu đến với người dùng Đó Style Guide, thứ tập trung chủ yếu vào phong cách Chúng bao gồm màu sắc, font chữ, logo thuộc tính thương hiệu - Design System Design System chủ yếu sưu tập quy luật, nguyên tắc, ràng buộc áp dụng thiết kế code Ba thuộc tính phục vụ chức riêng biệt, tính thống tính hệ thống - Thiết kế giao diện đa thiết bị Học cách quy luật thiết kế nhiều thiết bị khác mobile, tablet, laptop,… Cách áp dụng auto layout contraints để thiết kế cách tối ưu nhất, … - Sketch Sketch phác thảo nhanh UI, nhằm ghi lại ý tưởng nhanh chức Mục đích Sketch để capture nhanh ý tưởng lúc tư brainstorm với - Wireframe Là bố cục giao diện người dùng, không chi tiết thể rõ luồng thao tác người dùng (user flow) cấu trúc nhóm thơng tin có UI - Mockup Bùi Minh Thịnh Thực tập tốt nghiệp 12 Mockup chi tiết Wireframe về: màu sắc, vị trí field, kích cỡ, hình ảnh, font chữ, đường kẻ, phân lơ, phân luồng, chí validation trường liệu - Prototype Nhìn bên ngồi, Prototype giống Mockup Nhưng điều làm Prototype trở nên thú vị khả tương tác Với Prototype, người dùng hồn tồn tương tác trực tiếp với như: nhấn nút, kéo thả, trượt lên, trượt xuống, mở popup, Điều giúp khách hàng hình dung rõ ràng sản phẩm mà họ nhận Thực : - Tham gia đầy đủ buổi trainning Làm tập thực hành yêu cầu Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - Hiểu khái niệm thiết kế giao diện người dùng Đã thực vài giao diện người dùng mẫu trang mạng xã hội 2.4 Thiết kế trải nghiệm người dùng Nội dung : Các kỹ thuật, quy luật để tạo trải nghiệm tốt sử dụng giao diện người dùng - Định nghĩa Trải nghiệm người dùng: Thiết kế trải nghiệm người dùng (UXD) q trình nâng cao hài lịng người dùng với sản phẩm cách cải thiện khả sử dụng, khả truy cập hài lòng tương tác với sản phẩm - Tầm quan trọng thiết kế trải nghiệm người dùng: Thiết kế trải nghiệm người dùng tốt không làm bật nâng tầm sản phẩm bạn, mà cịn trở thành phần quan trọng việc xây dựng phát triển tin tưởng khách hàng Một sản phẩm tuyệt vời nội dung hấp dẫn mà khơng có trải nghiệm người dùng hấp dẫn ảnh hưởng đến khả đạt mục tiêu kinh doanh Bùi Minh Thịnh Thực tập tốt nghiệp 13 - Phương pháp tiếp cận tốt để thiết kế trải nghiệm người dùng: Thiết kế lấy người dùng làm trung tâm (Human – Centered Design - HCD): Yếu tố thành công nằm việc bạn đặt người dùng trung tâm trình thiết kế Cách tiếp cận cho phép bạn tạo thiết kế sẽ, đơn giản, trực quan, linh hoạt hấp dẫn, đồng thời cung cấp trải nghiệm tuyệt vời cho người dùng phân biệt bạn với đối thủ cạnh tranh bạn Quy trình thiết kế trải nghiệm người dùng: - Understand - Hiểu: Để cung cấp giải pháp, trước tiên bạn cần hiểu vấn đề để sau giải vấn đề - Research - nghiên cứu: Nghiên cứu chìa khố quan trọng việc thiết kế trải nghiệm - Sketch - phác thảo: Vẽ phác thảo giấy, dịng bảng trắng khung hình để chia sẻ ý tưởng bạn với bên liên quan - Design - thiết kế: Biến mơ hình ban đầu wireframes thành hình ảnh tuyệt đẹp với theme style áp dụng cho chúng với thông số kỹ thuật - Implement - thực hiện: Nhóm phát triển xây dựng chức back-end trước tiên kết nối với giao diện người dùng họ nhận đồ tạo tác thiết kế - Evaluate - đánh giá; Khi tính sản phẩm triển khai, sản phẩm cuối đánh giá dựa số yếu tố đề Thực : - Tham gia đầy đủ buổi training Bùi Minh Thịnh Thực tập tốt nghiệp 14 - Tạo nội dung theo mẫu User Stories, Userflow, User Personas, Kết quả: - Đã nắm kiến thức thiết kế trải nghiệm người dùng - Đã tạo User Stories, User Personas, Userflow,… theo yêu cầu từ Mentor Thực công việc Sau hai tháng training thực hành, thực tập sinh nắm kiến thức Figma, giao diện & trải nghiệm người dùng Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực task từ phía cơng ty đưa Chi tiết task nói phần sau Lịch làm việc Tuần - - Cơng việc Tìm hiểu cơng ty, cách tổ chức công ty Làm quen với công cụ quản lý công ty Học cách trao đổi, làm việc qua skype, slack Tìm hiểu Figma Tìm hiểu cách làm việc với team khác công ty Thực hành sử dụng công cụ Figma theo mẫu có sẵn trang mạng xã hội thiết kế Tìếp cận kiến thức Giao diện người dùng Tìếp cận kiến thức Trải nghiệm người dùng Làm quen với yêu cầu khách hàng giả đình Thực hành áp dụng kiến thức Giao diện người dùng tập mà Mentor đưa Thực hành áp dụng kiến thức Trải nghiệm người dùng tập mà Mentor đưa Đúc kết kinh nghiệm trình bày buổi Meeting Thiết kế giao diện máy POS Đúc kết kinh nghiệm trình bày buổi Meeting Thiết kế giao diện ứng dụng chấm cơng Đúc kết kinh nghiệm trình bày buổi Meeting Chuẩn bị tài liệu để báo cáo thực tập Tham dự buổi workshop định hướng công ty Người hướng dẫn Anh Phùng Hợp Anh Phùng Hợp Anh Phùng Hợp Anh Phùng Hợp Anh Phùng Hợp Anh Phùng Hợp Anh Phùng Hợp Anh Phùng Hợp Bùi Minh Thịnh Thực tập tốt nghiệp - trước tốt nghiệp Củng cố kiến thức qua đợt thực tập Người hướng dẫn đánh giá nhận xét Bản thân rút kinh nghiệm, tự đánh giá khắc phục khuyết điểm sản phẩm tạo Gửi lời cảm ơn chia tay quý công ty 15 Bùi Minh Thịnh Thực tập tốt nghiệp 16 Chương 3: Chi tiết công việc Giao diện máy POS Sản phẩm thiết kế để giúp cho hoạt động buôn bán Cloud công ty, sử dụng người quản lý hàng kho người giới thiệu sản phẩm đến với khách hàng cửa hàng trực tiếp 1.1 Yêu cầu - Hoàn thành giao diện thiết bị Laptop Mobile - Giao diện xác thực tài khoản bao gồm trang Đăng nhập Quên mật - Giao diện Trang chủ giúp điều hướng sang trang khác - Giao diện Báo cáo thống kê giúp xem lại doanh thu cửa hàng thống kê đơn hàng qua ngày, tháng, năm - Giao diện Quản lý bán hàng giúp người dùng tìm kiếm sản phẩm có cửa hàng, thêm vào giỏ hàng tiến hành toán, bên cạnh hệ thống liệt kê chi tiết tốn phí vận chuyển, phí trước thuế, chiết khấu, lưu thông tin khách hàng mua hàng, toán qua QR code,… - Giao diện Quản lý đơn hàng giúp quản lý đơn hàng khách hàng đặt hệ thống, xem thông tin, danh sách sản phẩm mua đơn hàng, tình trạng vận chuyển, ghi chú,… - Giao diện Quản lý khách hàng giúp xem thông tin khách hàng mua hàng cửa hàng để tiện lợi cho lần mua hàng thống kê 1.2 Danh sách giao diện Bùi Minh Thịnh Thực tập tốt nghiệp 17 Giao diện Responsive Website Giao diện Mobile Bùi Minh Thịnh Thực tập tốt nghiệp 18 1.3 Thực - Thực tập sinh: Bùi Minh Thịnh - Và giúp đỡ tận tình anh Phùng Hợp 1.4 Kế hoạch thực - Giai đoạn 1: Nhận yêu cầu tiến hành thấu hiểu vấn đề - Giai đoạn 2: Tiến hành viết Userstories, Userflow,… - Giai đoạn 3: Tiến hành nghiên cứu tham khảo giao diện từ Moodboard - Giai đoạn 4: Tiến hành xây dựng Design System Sketch, vẽ Wireframe - Giai đoạn 5: Thiết kế giao diện theo chức - Giai đoạn 6: Đánh giá chỉnh sửa để hoàn thiện task 1.5 Kết đạt - Hoàn thành task Mentor yêu cầu - Nhận xét, góp ý, đúc kết kinh nghiệm cho cấc task Giao diện ứng dụng chấm công Sản phẩm thiết kế để giúp cho nhân viên công ty quản lý thời gian làm việc, chấm cơng làm việc để tính lương bổng, quản lý lịch làm việc công ty,… 2.1 Yêu cầu - Hồn thành giao diện thiết bị Mobile - Giao diện Chấm cơng gồm trang trạng thái thay đổi dựa thời gian - Giao diện Quét QR để giúp nhân viên quét mã chấm công đến công ty làm việc - Giao diện Thông báo hiển thị thông báo lịch làm việc, nhắc nhở ca làm, ngày nghỉ,… Bùi Minh Thịnh Thực tập tốt nghiệp 19 - Giao diện Thống kê chấm công giúp xem tổng thời gian làm việc, số nghỉ, số trễ, sớm, quên checkin, checkout,… theo mốc thời gian chọn - Giao diện Lịch sử chấm công để xem thông tin lần chấm công vào làm tan làm - Giao diện Chi tiết chấm công giúp xem thời gian chấm công, địa điểm chấm cơng phịng ban, trụ sở,… - Giao diện Lịch chi tiết nhân viên giúp nhân viên xem lịch làm việc mình, tránh trường hợp làm vào ngày nghỉ, ngày làm việc từ xa,… 2.2 Danh sách giao diện Bùi Minh Thịnh Thực tập tốt nghiệp 20 2.3 Thực - Thực tập sinh: Bùi Minh Thịnh - Và giúp đỡ tận tình anh Phùng Hợp 2.4 Kế hoạch thực - Giai đoạn 1: Nhận yêu cầu viết Userstories, Userflow,… - Giai đoạn 2: Tiến hành nghiên cứu tham khảo giao diện từ Moodboard - Giai đoạn 3: Tiến hành xây dựng Design System vẽ Wireframe - Giai đoạn 4: Thiết kế giao diện theo chức - Giai đoạn 5: Gắn tương tác giao diện - Giai đoạn 6: Đánh giá chỉnh sửa để hoàn thiện task 2.5 Kết đạt - Hoàn thành task Mentor yêu cầu - Nhận xét, góp ý, đúc kết kinh nghiệm cho cấc task Bùi Minh Thịnh Thực tập tốt nghiệp ... Nội dung: Các kiến thức thiết kế giao diện người dùng để làm giao diện đa tảng thiết bị - Khái niệm thiết kế giao diện người dùng Nắm khái niệm thiết kế giao diện người dùng, q trình khơng thể... kế trải nghiệm người dùng Nội dung : Các kỹ thuật, quy luật để tạo trải nghiệm tốt sử dụng giao diện người dùng - Định nghĩa Trải nghiệm người dùng: Thiết kế trải nghiệm người dùng (UXD) trình... tập thực hành yêu cầu Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - Hiểu khái niệm thiết kế giao diện người dùng Đã thực vài giao diện người dùng mẫu trang mạng xã hội 2.4 Thiết kế trải nghiệm