Báo cáo thực tập thiết kế giao diện và trải nghiệm người dùng (uiux design)

6 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 VÀ TRẢI NGHIỆM NGƯỜI DÙNG (UI/UX DESIGN) Công ty thực tập: Công ty TNHH Tin học Viễn thông Danh Việt chi nhánh TP HCM Người phụ trách: Hà Minh Hoàng Thực tập sinh: Thiều Quang Lâm TP Hồ Chí Minh, tháng 06 năm 2023 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 Công ty TNHH Tin học Viễn thông Danh Việt - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định GVHD: Trần Anh Dũng Thiều Quang Lâm LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Tin học Viễn thông Danh Việt 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 Minh Hoàng 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 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 TP HCM, ngày 28 tháng năm 2023 Thiều Quang Lâm GVHD: Trần Anh Dũng Thiều Quang Lâm NHẬN XÉT CỦA KHOA GVHD: Trần Anh Dũng Thiều Quang Lâm MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA MỤC LỤC DANH MỤC HÌNH ẢNH CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 1.1 Giới thiệu Công ty TNHH Thương Mại Tin Học Viễn Thông Danh Việt 1.2 Sản phẩm công ty 1.3 Lịch làm việc thực tập công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty kỹ công ty 2.2 Nghiên cứu kỹ thuật 2.2.1 Tìm hiểu cơng cụ giao tiếp công việc 2.2.2 Tìm hiểu cơng nghệ, kỹ thuật sử dụng trình làm việc 2.2.2.1 Tìm hiểu Figma 2.2.2.2 Tìm hiểu thiết kế giao diện người dùng 2.2.2.3 Tìm hiểu thiết kế trải nghiệm người dùng 2.3 Thực dự án thực tế 10 2.3.1 Quá trình thực 10 2.3.2 Mô tả dự án 11 2.3.3 Kết 12 CHƯƠNG 3: TỔNG KẾT 20 3.1 Điểm mạnh 20 3.2 Điểm yếu 20 TÀI LIỆU THAM KHẢO 21 GVHD: Trần Anh Dũng Thiều Quang Lâm DANH MỤC HÌNH ẢNH Hình Logo cơng ty Hình Giao diện mở ứng dụng 13 Hình Nhập thơng tin cá nhân 14 Hình Giao diện Trang chủ Nhật ký 15 Hình Giao diện Món ăn Chế độ ăn 16 Hình Giao diện thêm ăn vào bữa ăn 16 Hình Giao diện tìm kiếm ăn 17 Hình Giao diện thêm hoạt động 18 Hình Giao diện ghi lại cân nặng lượng nước uống hàng ngày 19 Hình 10 Giao diện thêm chi tiết hoạt động 19 GVHD: Trần Anh Dũng Thiều Quang Lâm CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 1.1 Giới thiệu Công ty TNHH Thương Mại Tin Học Viễn Thơng Danh Việt Hình Logo cơng ty Công ty TNHH Thương Mại Tin Học Viễn Thông Danh Việt (DVIT) thành lập từ 16/8/2006 với đội ngũ cán giàu kinh nghiệm, am hiểu kiến thức chun mơn, nhiệt tình ln tận tâm công việc, sẵn sàng mang đến cho khách hàng giải pháp hợp lý Đội ngũ cán Danh Việt có kinh nghiệm phục vụ 1.000 khách hàng toàn quốc: từ Nhà khách VP Quốc Hội đến ban ngành như: Bộ Y tế, Bộ tài chính, Bộ Cơng An, Bộ Tham mưu, Bộ Nội Vụ… Các chi nhánh ngân hàng VP Bank, VIB Bank, MB Bank, VR Bank… Các cơng ty chứng khốn chứng khốn Quốc Gia, chứng khốn Sài Gịn, chứng khốn Mê Kơng, chứng khốn Quốc tế… đến doanh nghiệp cá nhân nước 1.2 Sản phẩm cơng ty • Phân phối, cung cấp, lắp đặt tổng đài, thiết bị an ninh giám sát, thiết bị viễn thơng, thiết bị văn phịng • Tư vấn lắp đặt, thiết kế, thi công hệ thống an ninh, tin học - viễn thơng • Dịch vụ bảo hành, bảo trì, sửa chữa thiết bị an ninh, viễn thơng - thiết bị văn ρhịng • Ngồi ra, cơng ty gần mở rộng sang lĩnh vực phần mềm, cung cấp ứng dụng di động 1.3 Lịch làm việc thực tập công ty Thời gian thực tập: 27/03/2023 – 09/06/2023 Lịch thực tập: thứ hai, thứ tư, thứ sáu hàng tuần CHƯƠNG 2: NỘI DUNG THỰC TẬP 2.1 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, nghe người phụ trách giới thiệu công ty, trình thành lập phát triển, quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty, phịng ban IT, HR, Marketing, … Ngồi ra, thực tập sinh cịn giới thiệu văn hóa làm việc cơng ty thời gian làm, quy định, cách sử dụng email công việc, … Kết quả: hiểu thêm công ty Danh Việt, 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 2.2 Nghiên cứu kỹ thuật 2.2.1 Tìm hiểu cơng cụ giao tiếp cơng việc Nội dung: Tìm hiểu cơng cụ sử dụng trình làm việc 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 Thực tập sinh hướng dẫn tạo tài khoản sử dụng Skype, với Google Mail để trao đổi công việc Kết quả: 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 2.2.2 Tìm hiểu công nghệ, kỹ thuật sử dụng trình làm việc Nội dung: Tìm hiểu Figma, quy tắc thiết kế giao diện trải nghiệm người dùng 2.2.2.1 Tìm hiểu Figma Đượ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 GVHD: Trần Anh Dũng Thiều Quang Lâm 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 Kết quả: 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 sản phẩm tốt 2.2.2.2 Tìm hiểu thiết kế giao diện người dùng - 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 GVHD: Trần Anh Dũng Thiều Quang Lâm 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 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 Kết quả: 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 2.2.2.3 Tìm hiểu thiết kế trải nghiệm 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 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 GVHD: Trần Anh Dũng Thiều Quang Lâm 10 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ố đề 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 2.3 Thực dự án thực tế 2.3.1 Quá trình thực Sau tuần tìm hiểu học hỏi, thực tập sinh nắm kiến thức Figma, giao diện & trải nghiệm người dùng Trong tuần tiếp theo, thực tập sinh giao số tập thiết kế giao diện hướng dẫn mentor Sau đó, thực tập sinh hướng dẫn tham gia vào dự án mà công ty đề xuất Chi tiết trình thực hiện: Tuần Cơng việc Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn - Tìm hiểu cơng ty, Hà Minh Hồng cách tổ chức công ty - Làm quen với công cụ cần thiết cho thực dự án Figma, Skype, Google Mail GVHD: Trần Anh Dũng Thiều Quang Lâm 11 2, 5, 8, 10 11 - Tìm hiểu thiết kế giao diện trải nghiệm người dùng - Tham gia buổi training, thực tập mentor đưa - Tiếp tục thực tập mentor - Tìm hiểu dự án tới cơng ty đưa - Tham gia buổi họp công ty dự án - Trao đổi với khách hàng, với team dev để đề xuất tiến độ dự án - Phác thảo thiết kế ứng dụng - Làm việc với khách hàng, sửa đổi theo yêu cầu khách hàng - Tiếp tục thực thiết kế - Làm việc với khách hàng, sửa đổi theo yêu cầu khách hàng Hoàn thiện thiết kế cho khách hàng xem mẫu Thực báo cáo thực tập với hướng dẫn mentor Hà Minh Hoàng Hà Minh Hoàng Hà Minh Hoàng Nguyễn Đặng Thanh Hà Minh Hoàng Nguyễn Đặng Thanh Hà Minh Hoàng Hà Minh Hồng Hà Minh Hồng Nguyễn Đặng Thanh 2.3.2 Mơ tả dự án Khách hàng yêu cầu ứng dụng di động sức khoẻ với số tính như: Thu thập nhu cầu người dùng vừa bắt đầu ứng dụng (tăng cân, giảm cân, giữ cân nặng) thông tin cần thiết thể trạng, chế độ ăn uống, luyện tập tại, từ đưa lộ trình phù hợp với mục tiêu người dùng Người dùng đăng nhập/đăng ký tài khoản bắt đầu ứng dụng sau vào ứng dụng GVHD: Trần Anh Dũng Thiều Quang Lâm 12 Sau nhận lộ trình, người dùng vào hình ứng dụng Trong hình gồm nhiều mục khác Bữa sáng, Bữa trưa, Bữa tối, Uống nước, Tập luyện, Theo dõi cân nặng Đối với bữa ăn, người dùng lựa chọn ăn (Dish) chế độ ăn (Diet) phù hợp với cá nhân theo lựa chọn có sẵn Người dùng chỉnh sửa chi tiết phần, số lượng chế độ, … cho phù hợp với nhu cầu cá nhân Nếu khơng tìm thấy, người dùng tự tạo ăn chế độ ăn theo sở thích cá nhân Người dùng thích ăn/chế độ ăn ăn/chế độ ăn yêu thích xuất mục riêng biệt Ngồi ăn chế độ ăn, người dùng điều chỉnh số lượng nước uống ngày chế độ tập luyện hàng ngày Tất thay đổi ăn uống tập luyện ghi lại nhật ký, bao gồm thơng tin chi tiết số calo ăn, số calo tiêu hao tập luyện Người dùng mở nhật ký theo ngày xem ăn, tập luyện thực ngày hơm Ngồi theo dõi lượng calo nạp vào tiêu thụ ngày, người dùng ghi lại cân nặng hàng ngày để theo dõi tiến độ 2.3.3 Kết Một số hình ảnh ứng dụng: GVHD: Trần Anh Dũng Thiều Quang Lâm 13 Hình Giao diện mở ứng dụng GVHD: Trần Anh Dũng Thiều Quang Lâm 14 Hình Nhập thơng tin cá nhân GVHD: Trần Anh Dũng Thiều Quang Lâm 15 Hình Giao diện Trang chủ Nhật ký GVHD: Trần Anh Dũng Thiều Quang Lâm 16 Hình Giao diện Món ăn Chế độ ăn Hình Giao diện thêm ăn vào bữa ăn GVHD: Trần Anh Dũng Thiều Quang Lâm 17 Hình Giao diện tìm kiếm ăn GVHD: Trần Anh Dũng Thiều Quang Lâm 18 Hình Giao diện thêm hoạt động GVHD: Trần Anh Dũng Thiều Quang Lâm 19 Hình Giao diện ghi lại cân nặng lượng nước uống hàng ngày Hình 10 Giao diện thêm chi tiết hoạt động GVHD: Trần Anh Dũng Thiều Quang Lâm 20 CHƯƠNG 3: TỔNG KẾT Quãng thời gian thực tập Danh Việt giúp em cải thiện thân nhiều quy trình làm việc thực tế, tác phong người kỹ sư phần mềm Được làm việc đây, em học thêm kỹ mềm sử dụng mail, quản lý ticket, làm việc nhóm, giao tiếp với cấp trên, … Chỉ thời gian hạn chế, em hồn thành dự án cá nhân q trình training với tính năng, yêu cầu đặt ban đầu Khi tham gia vào dự án thực tế, em hoàn thành tốt tác vụ hạn đạt chất lượng tốt 3.1 Điểm mạnh - Trải nghiệm quy trình làm việc dự án theo mơ hình Agile - Xây dựng giao diện ứng dụng di động mang lại giá trị cho người dùng Học hỏi tích lũy thêm nhiều kiến thức khơng thuộc mảng UX/UI Design mà Business Analyst, Development,… Hiểu quy trình, nguyên tắc xây dựng giao diện người dùng theo nguyên tắc Design Thinking từ ý tưởng đến việc phân tích vào thực đưa ý tưởng thành thực Nâng cao tư duy, kỹ thiết kế tiếp cận nhiều xu hướng công nghệ Nâng cao khả làm việc nhóm học cách quản lý cơng việc, thời gian Kỹ giao tiếp với đồng nghiệp khách hàng, tư phản biện, giải vấn đề nâng cao 3.2 Điểm yếu - Khó khăn mặt di chuyển cơng ty có vị trí địa lý xa nơi Khó khăn ngày đầu làm quen với quy trình làm việc sinh viên chưa trải nghiệm mơi trường thực tế trước Khó khăn mặt giao tiếp, trao đổi công việc vào ngày đầu chưa quen biết toàn thành viên team Khó khăn việc trao đổi dự án ngày đầu với Mentor sinh viên chưa nắm rõ quy trình làm việc thực tế công ty GVHD: Trần Anh Dũng Thiều Quang Lâm 21 TÀI LIỆU THAM KHẢO • Nguyen N (2022, March 18) Tổng Hợp Nguyên Tắc Vàng Và Xu Hướng Thiết Kế UI/UX Nổi Bật Bạn Không Nên Bỏ Qua Glints Vietnam Blog https://glints.com/vn/blog/nguyen-tac-va-xu-huong-thiet-ke-ui-u/ • The Key Principles of UI Design (n.d.) Maze Retrieved June 28, 2023, from https://maze.co/collections/ux-ui-design/ui-design-principles/ • The Basics of UX and UI Design Principles (n.d.) Retrieved June 28, 2023, from https://www.linkedin.com/pulse/basics-ux-ui-design-principles-chrisdireduryan • TopDev (2020, October 24) Một số nguyên tắc thiết kế UI/UX website TopDev https://topdev.vn/blog/mot-so-nguyen-tac-thiet-ke-ui-ux-website/ GVHD: Trần Anh Dũng Thiều Quang Lâm